Boas Práticas do Luminus

Componentes e Estilização

Uso de Componentes

O Luminus é construído sobre uma base sólida de componentes React, Tailwind CSS e DaisyUI. Aqui estão algumas diretrizes importantes:

1. Componentes Base

   • Utilize os componentes base do Luminus sempre que possível
   • Mantenha a consistência usando os mesmos componentes em toda a aplicação
   • Evite criar componentes personalizados quando já existir um componente Luminus que atenda à necessidade

2. Tailwind CSS

   • Use classes utilitárias do Tailwind para estilização rápida e consistente
   • Mantenha as classes organizadas seguindo a ordem: layout > espaçamento > tipografia > cores > interatividade
   • Exemplo:

   <View className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
     <Text className="text-xl font-semibold text-gray-800">Título</Text>
     <Button variant="primary" className="px-4 py-2">
       Ação
     </Button>
   </View>

3. DaisyUI

   • Aproveite os componentes pré-estilizados do DaisyUI
   • Use os temas do DaisyUI para manter consistência visual
   • Exemplo de uso:

   <Card className="w-96">
     <Card.Body>
       <Card.Title>Título do Card</Card.Title>
       <Text>Conteúdo do card aqui</Text>
       <View className="card-actions justify-end">
         <Button variant="primary">Ação</Button>
       </View>
     </Card.Body>
   </Card>

4. Boas Práticas de Estilização

   • Mantenha a responsividade usando as classes do Tailwind (sm:, md:, lg:, xl:)
   • Use variáveis CSS para cores e valores reutilizáveis
   • Evite estilos inline quando possível
   • Mantenha a acessibilidade em mente ao estilizar componentes

5. Organização de Código

   • Agrupe componentes relacionados em diretórios
   • Mantenha a estrutura de arquivos consistente
   • Use nomes descritivos para componentes e classes
   • Documente componentes complexos com comentários

6. Componentes Disponíveis O Luminus oferece uma ampla variedade de componentes organizados por categorias:

   • Básicos: View, Text, Image, Markdown, Page, Video
   • Display: Card, Avatar, Badge, Accordion, Carousel, Chat, Code, List, Stat, Timeline
   • Feedback: Alert, Loading, Progress, Skeleton, Toast, Tooltip
   • Input: Button, Checkbox, Dropdown, FileInput, FormControl, TextInput, Select
   • Layout: Artboard, Divider, Hero, Stack
   • Navegação: Breadcrumbs, Link, Steps
   • Outros: Modal, ThemeController, Webview

   Estes componentes são otimizados para desenvolvimento mobile, oferecendo uma experiência nativa tanto em Android quanto em iOS. Utilize-os para garantir a melhor performance e experiência do usuário em dispositivos móveis.

O que não fazer

1. Evite Componentes Web

• Não use componentes web como div, span, p, h1-h6 eles não irão funcionar.

2. Evite Estilos Web

• Não use arquivos CSS externos - todo estilo deve ser feito via className
• Não use estilos inline (style prop) - use sempre className
• Evite usar valores arbitrários no Tailwind como w-[40px] - use as propriedades nativas do componente (ex: width={40})
• Não use seletores CSS ou media queries
• Não use !important ou outras regras CSS avançadas

3. Evite Práticas de Performance

• Não carregue imagens sem otimização
• Não use animações pesadas ou complexas
• Não implemente lógica de renderização desnecessária
• Evite re-renderizações desnecessárias de componentes

4. Evite Integrações Web

• Não use APIs web que não são suportadas em ambiente mobile
• Não dependa de funcionalidades específicas de navegadores
• Evite usar WebViews para funcionalidades que podem ser nativas

5. Evite Gerenciamento de Estado Complexo

• Não implemente soluções de estado desnecessariamente complexas
• Evite usar múltiplas bibliotecas de gerenciamento de estado
• Não mantenha estado global para dados que podem ser locais

6. Evite Dependências Desnecessárias

• Não adicione bibliotecas que duplicam funcionalidades já existentes no Luminus
• Evite usar bibliotecas que não são otimizadas para mobile
• Não implemente soluções customizadas quando o Luminus já oferece uma alternativa