tsadok-ui

Tsadok UI Framework

Framework de UI para React Native com ThemeProvider centralizado e componentes customizáveis.

🚀 Características

• ThemeProvider centralizado - Sistema de temas flexível e customizável
• Componentes básicos - Text, Button, Input, Card com múltiplas variants
• TypeScript - Tipagem completa para melhor experiência de desenvolvimento
• Customização por componente - Override de estilos específicos por componente
• Design system consistente - Tokens globais para cores, tipografia, espaçamento

📦 Instalação

npm install tsadok-ui

🎨 Uso Básico

import React from 'react';
import { ThemeProvider, Text, Button, Input, Card } from 'tsadok-ui';

const theme = {
  colors: { 
    primary: '#6200ee', 
    background: '#fff' 
  },
  components: {
    Button: { borderRadius: 12 },
    Card: { borderRadius: 8 }
  }
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Text variant="headtitle">Bem-vindo</Text>
      <Button variant="filled" size="large">Clique aqui</Button>
      <Input variant="outlined" label="Seu nome" />
      <Card variant="filled" mode="rounded">
        <Text variant="body">Conteúdo do card</Text>
      </Card>
    </ThemeProvider>
  );
}

🧩 Componentes

Text

<Text variant="headtitle">Título Principal</Text>
<Text variant="title">Título</Text>
<Text variant="subtitle">Subtítulo</Text>
<Text variant="body">Texto do corpo</Text>
<Text variant="label">Label</Text>
<Text variant="caption">Legenda</Text>

Button

<Button variant="filled" size="large" mode="rounded">
  Botão Preenchido
</Button>
<Button variant="outlined" size="medium" mode="square">
  Botão com Borda
</Button>
<Button variant="text" size="small">
  Botão Texto
</Button>

Input

<Input variant="outlined" label="Nome" placeholder="Digite seu nome" />
<Input variant="inlined" label="Email" placeholder="Digite seu email" />
<Input variant="boxed" label="Senha" placeholder="Digite sua senha" />

Card

<Card variant="filled" mode="rounded">
  <Text variant="body">Conteúdo do card</Text>
</Card>

<Card variant="elevation" mode="square">
  <Text variant="body">Card com elevação</Text>
  <Card.Actions>
    <Button variant="text">Cancelar</Button>
    <Button variant="filled">Confirmar</Button>
  </Card.Actions>
</Card>

Stack (Layout Helper)

<Stack direction="row" justify="space-between" gap={8}>
  <Button variant="filled" size="small">1</Button>
  <Button variant="filled" size="small">2</Button>
  <Button variant="filled" size="small">3</Button>
</Stack>

<Stack direction="column" align="center" gap={16}>
  <Text variant="title">Título</Text>
  <Text variant="body">Conteúdo</Text>
</Stack>

List

<List>
  <List.Item 
    title="Configurações" 
    subtitle="Ajustes do app"
    onPress={() => console.log('Configurações')}
  />
  <List.Item 
    title="Notificações" 
    subtitle="Gerenciar alertas"
    onPress={() => console.log('Notificações')}
  />
</List>

Checkbox

<Checkbox 
  label="Aceito os termos" 
  checked={checked}
  onPress={() => setChecked(!checked)}
/>

<Checkbox 
  label="Small checkbox" 
  size="small"
/>

Switch

<Switch 
  label="Receber notificações" 
  value={enabled}
  onValueChange={setEnabled}
/>

<Switch 
  label="Large switch" 
  size="large"
/>

🎨 Customização de Tema

const customTheme = {
  colors: {
    primary: '#2196f3',
    secondary: '#ff4081',
    surface: '#ffffff',
    background: '#f5f5f5',
    text: {
      primary: '#212121',
      secondary: '#757575',
      disabled: '#bdbdbd',
    },
  },
  typography: {
    fontSize: {
      xs: 12,
      sm: 14,
      md: 16,
      lg: 18,
      xl: 20,
      xxl: 24,
    },
  },
  components: {
    Button: {
      borderRadius: 12,
      padding: 16,
    },
    Card: {
      borderRadius: 8,
      elevation: 2,
    },
  },
};

📚 API Reference

ThemeProvider Props

Prop	Tipo	Descrição
theme	Theme	Objeto de tema customizado
children	ReactNode	Componentes filhos

Text Props

Prop	Tipo	Padrão	Descrição
variant	'headtitle' | 'title' | 'subtitle' | 'body' | 'label' | 'caption'	'body'	Variant do texto
color	string	-	Cor customizada
align	'left' | 'center' | 'right'	'left'	Alinhamento do texto

Button Props

Prop	Tipo	Padrão	Descrição
variant	'filled' | 'outlined' | 'text'	'filled'	Estilo do botão
size	'small' | 'medium' | 'large'	'medium'	Tamanho do botão
mode	'rounded' | 'square'	'square'	Modo de arredondamento
disabled	boolean	false	Botão desabilitado

Input Props

Prop	Tipo	Padrão	Descrição
variant	'outlined' | 'inlined' | 'boxed'	'outlined'	Estilo do input
label	string	-	Label do input
error	string	-	Mensagem de erro
disabled	boolean	false	Input desabilitado

Card Props

Prop	Tipo	Padrão	Descrição
variant	'outlined' | 'filled' | 'elevation'	'filled'	Estilo do card
mode	'rounded' | 'square'	'square'	Modo de arredondamento
elevation	number	-	Elevação customizada

🛠️ Desenvolvimento

# Instalar dependências
npm install

# Desenvolvimento
npm run dev

# Build
npm run build

# Testes
npm test

# Lint
npm run lint

📚 Storybook (Expo)

Para visualizar todos os componentes interativamente:

# Iniciar Storybook (Expo)
npm run storybook

# Executar no Android
npm run storybook:android

# Executar no iOS
npm run storybook:ios

# Executar no Web
npm run storybook:web

Vantagens do Expo Storybook:

• ✅ Mais rápido - Hot reload instantâneo
• ✅ Fácil desenvolvimento - Sem configuração complexa
• ✅ Multiplataforma - iOS, Android e Web
• ✅ Todas as variants de cada componente
• ✅ Controles interativos para testar props
• ✅ Ações para testar eventos
• ✅ Documentação integrada
• ✅ Temas customizáveis

📄 Licença

MIT