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