Exemplo Expo - Componentes Native Core

Este é um projeto de exemplo que demonstra como usar a biblioteca componentes-native-core em um projeto Expo.

🚀 Instalação

# Instalar dependências
npm install

# Instalar nossa biblioteca
npm install componentes-native-core

# Instalar dependências dos componentes
npm install react-native-paper react-hook-form @hookform/resolvers yup

📱 Como Executar

# Iniciar o projeto
npm start

# Executar no Android
npm run android

# Executar no iOS (requer macOS)
npm run ios

# Executar na web
npm run web

🎯 O que está Demonstrado

1. Componentes de Layout

• Container - Container principal com largura máxima
• VBox - Container vertical com espaçamento
• HBox - Container horizontal com espaçamento
• Paper - Container com elevação e sombras
• Grid - Sistema de grid responsivo

2. Sistema de Temas

• Cores: 10 tons para cada cor (ex: blue-6, red-3)
• Espaçamentos: Sistema consistente de padding/margin
• Sombras: Diferentes níveis de elevação
• Tipografia: Escalas de tamanho de fonte

3. Formulários

• TextField - Campo de texto com validação
• FormProvider - Gerenciamento de estado do formulário
• Validação: Regras customizáveis com Yup
• Estados: Loading, erro, sucesso

🎨 Exemplos de Uso

Cores do Tema

import { getColor } from 'componentes-native-core';

// Usar cores do tema
backgroundColor={getColor('blue-6')}    // Azul médio
backgroundColor={getColor('red-3')}     // Vermelho claro
backgroundColor={getColor('gray-1')}    // Cinza muito claro

Componentes de Layout

import { Container, VBox, HBox, Paper } from 'componentes-native-core';

<Container backgroundColor={getColor('blue-6')} padding={20}>
  <VBox gap={15}>
    <Paper shadow="medium" padding={15}>
      Conteúdo com sombra
    </Paper>
    <HBox gap={10}>
      <Paper style={{ flex: 1 }}>Coluna 1</Paper>
      <Paper style={{ flex: 1 }}>Coluna 2</Paper>
    </HBox>
  </VBox>
</Container>

Formulários com Validação

import { FormProvider, TextField } from 'componentes-native-core';

<FormProvider
  defaultValues={{ name: '', email: '' }}
  validation={{
    name: { required: 'Nome é obrigatório' },
    email: { 
      required: 'Email é obrigatório',
      pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Email inválido' }
    }
  }}
  onSubmit={(data) => console.log(data)}
>
  <TextField name="name" label="Nome" />
  <TextField name="email" label="Email" />
</FormProvider>

🔧 Estrutura do Projeto

expo-simple/
├── App.tsx              # Aplicação principal com exemplos
├── package.json         # Dependências do projeto
├── tsconfig.json        # Configuração TypeScript
└── README.md           # Esta documentação

📚 Biblioteca Principal

A biblioteca componentes-native-core está disponível no npm:

npm install componentes-native-core

URL: https://www.npmjs.com/package/componentes-native-core

🎉 Recursos

• ✅ TypeScript - Tipos completos e corretos
• ✅ React Native Paper - Componentes base de alta qualidade
• ✅ React Hook Form - Gerenciamento de formulários eficiente
• ✅ Yup - Validação de esquemas robusta
• ✅ Temas - Sistema de design consistente
• ✅ Layout - Componentes de layout responsivos

🚀 Próximos Passos

1. Explorar os exemplos - Navegue entre as abas para ver diferentes funcionalidades
2. Customizar temas - Experimente diferentes cores e espaçamentos
3. Criar formulários - Teste a validação e submissão
4. Integrar em seu projeto - Use os componentes em sua aplicação

Desenvolvido com ❤️ usando componentes-native-core