ADR-0003: Biblioteca de Componentes — Storybook + Package
Status
Accepted
Context and Problem Statement
Os projetos atenvi-admin e atenvi-web precisam compartilhar componentes visuais de forma consistente. Precisamos de um ambiente de desenvolvimento isolado para os componentes e uma forma de distribuí-los entre os projetos consumidores.
Decision Drivers
- Componentes precisam ser desenvolvidos e testados em isolamento
- Reutilização entre
atenvi-admineatenvi-websem duplicação - Fidelidade visual ao Figma como fonte de verdade do design
- Versionamento independente dos componentes
Considered Options
- Storybook + pacote NPM local (monorepo ou local package)
- shadcn/ui com cópia de componentes por projeto
- Radix UI direto nos projetos sem camada de abstração
Decision Outcome
Chosen option: Storybook + pacote distribuído via atenvi-ui, porque centraliza o desenvolvimento visual, permite comparação direta com Figma (Figma plugin no Storybook), e distribui componentes tipados entre os projetos consumidores.
Positive Consequences
- Desenvolvimento de componentes isolado do contexto de negócio
- Figma como referência visual integrada ao fluxo de desenvolvimento
- Storybook serve como documentação viva dos componentes
- Pacote versionado permite controle de breaking changes
Negative Consequences
- Overhead de manutenção do pacote (
atenvi-ui) - Mudanças de componente exigem publicação/atualização nos consumidores
More Information
- Projeto:
atenvi-ui - Consumidores:
atenvi-admin,atenvi-web - Storybook versão mínima: 8.x
- Fonte de verdade visual: Figma