Frontend Web - Componentes

Este documento descreve a organização de componentes no estado atual do web.

Camadas de componentes

1. src/components/ui/*

2. biblioteca base reutilizável (Radix + utilitários)

3. src/components/*

4. componentes globais de aplicação (layout, guards, fallback, erros)

5. src/modules/<dominio>/<submodulo>/components/*

6. componentes específicos de feature

Regra de composição

• view.tsx monta componentes de apresentação.
• page.tsx injeta dados e handlers na view.
• componentes internos do submódulo não devem acessar serviço HTTP diretamente.

Componentes globais críticos

• src/components/ProtectedRoute.tsx (autorização)
• src/components/Sidebar.tsx (navegação por papel/módulo)
• src/components/ProfileRouter.tsx (roteamento de perfil)
• src/components/AccessibilityPanel.tsx (controles de acessibilidade)
• src/components/PageFallback.tsx (fallback de lazy loading)

Convenções para novos componentes

1. Nomear por contexto de domínio e não por detalhe técnico.
2. Manter props explícitas (evitar objetos genéricos sem contrato).
3. Evitar lógica de consulta/mutação em componentes de apresentação.
4. Extrair componentes quando view.tsx ou um content component crescer excessivamente.
5. Co-localizar testes com o componente quando possível.

Onde documentar novos componentes

• Componentes base: atualizar este arquivo e design-system.md.
• Componentes de feature: documentar no README do submódulo (quando existir) ou na documentação de domínio correspondente.