SuperApp UI Components

Uma biblioteca de componentes UI moderna para React Native usando TypeScript e NativeWind.

🚀 Características

• ✅ TypeScript: Tipagem completa para melhor experiência de desenvolvimento
• ✅ NativeWind: Sistema de design baseado em Tailwind CSS
• ✅ Customizável: Componentes flexíveis e personalizáveis
• ✅ Acessível: Componentes com suporte a testID e acessibilidade
• ✅ Moderno: Sintaxe moderna e padrões atuais do React Native

📦 Instalação

npm install @superapp/ui-components
# ou
yarn add @superapp/ui-components

Dependências Peer

Esta biblioteca requer as seguintes dependências em seu projeto:

npm install react react-native nativewind
# ou
yarn add react react-native nativewind

Configuração do NativeWind

Certifique-se de ter configurado o NativeWind em seu projeto. Adicione ao seu tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@superapp/ui-components/lib/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

🎯 Uso Básico

import React from "react";
import { View, Text, Button } from "@superapp/ui-components";

export default function App() {
  return (
    <View p={4} bg="gray-50" flex justify="center" align="center">
      <Text size="lg" weight="bold" mb={4}>
        Bem-vindo ao SuperApp!
      </Text>

      <Button
        title="Clique aqui"
        variant="primary"
        size="lg"
        onPress={() => console.log("Botão pressionado!")}
      />
    </View>
  );
}

📚 Componentes

Button

Componente de botão customizável com múltiplas variantes e estados.

import { Button } from '@superapp/ui-components';

// Botão básico
<Button title="Clique aqui" onPress={() => {}} />

// Botão com variante
<Button
  title="Sucesso"
  variant="success"
  size="lg"
  onPress={() => {}}
/>

// Botão outline
<Button
  title="Cancelar"
  variant="danger"
  outline
  onPress={() => {}}
/>

// Botão com loading
<Button
  title="Carregando..."
  loading
  onPress={() => {}}
/>

// Botão full width
<Button
  title="Full Width"
  fullWidth
  onPress={() => {}}
/>

Props:

• title: string - Texto do botão
• onPress?: () => void - Função chamada ao pressionar
• variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' - Variante de cor
• size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' - Tamanho do botão
• loading?: boolean - Estado de carregamento
• disabled?: boolean - Estado desabilitado
• fullWidth?: boolean - Ocupa toda a largura disponível
• outline?: boolean - Estilo outline
• icon?: React.ReactNode - Ícone do botão
• iconPosition?: 'left' | 'right' - Posição do ícone

Text

Componente de texto com tipografia consistente.

import { Text } from '@superapp/ui-components';

// Texto básico
<Text>Texto simples</Text>

// Texto com tamanho e peso
<Text size="lg" weight="bold">Título</Text>

// Texto com cor
<Text variant="primary">Texto colorido</Text>

// Texto customizado
<Text
  size="xl"
  weight="semibold"
  align="center"
  color="#FF6B6B"
>
  Texto customizado
</Text>

Props:

• children: React.ReactNode - Conteúdo do texto
• variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' - Variante de cor
• size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' - Tamanho do texto
• weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' - Peso da fonte
• align?: 'left' | 'center' | 'right' | 'justify' - Alinhamento
• color?: string - Cor customizada

View

Componente de container flexível com sistema de layout.

import { View } from '@superapp/ui-components';

// Container básico
<View p={4}>
  <Text>Conteúdo</Text>
</View>

// Layout flexível
<View
  direction="row"
  justify="between"
  align="center"
  p={4}
>
  <Text>Esquerda</Text>
  <Text>Direita</Text>
</View>

// Card com sombra
<View
  bg="white"
  p={6}
  borderRadius="lg"
  shadow
  m={4}
>
  <Text>Conteúdo do card</Text>
</View>

Props:

• children?: React.ReactNode - Conteúdo do container
• flex?: boolean | number - Propriedade flex
• direction?: 'row' | 'column' - Direção do flexbox
• justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' - Justify content
• align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' - Align items
• wrap?: boolean - Flex wrap
• gap?: number - Espaçamento entre elementos
• bg?: string - Cor de fundo
• border?: boolean - Adicionar borda
• borderColor?: string - Cor da borda
• borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' - Raio da borda
• shadow?: boolean - Adicionar sombra

Props de Espaçamento:

• m, mt, mr, mb, ml, mx, my - Margin
• p, pt, pr, pb, pl, px, py - Padding

🎨 Sistema de Cores

A biblioteca inclui um sistema de cores pré-definido:

• Primary: Azul (#3b82f6)
• Secondary: Cinza (#64748b)
• Success: Verde (#22c55e)
• Warning: Amarelo (#f59e0b)
• Danger: Vermelho (#ef4444)

Cada cor possui 9 variações (50-900) disponíveis no Tailwind.

🛠️ Utilitários

cn()

Utilitário para combinar classes CSS de forma condicional:

import { cn } from "@superapp/ui-components";

const classes = cn(
  "base-class",
  condition && "conditional-class",
  "another-class"
);

🏗️ Build e Publicação

Para fazer build da biblioteca:

npm run build

Para publicar no NPM:

npm publish

📄 Licença

MIT

Desenvolvido com ❤️ pela equipe SuperApp