Guia — atenvi-ui

Biblioteca de componentes. Fonte de verdade visual: Figma.

Estrutura de pastas

src/
  components/
    <ComponentName>/
      index.ts              ← re-export
      <ComponentName>.tsx   ← implementação
      <ComponentName>.stories.tsx
      <ComponentName>.test.tsx
  hooks/
  utils/
  styles/
    tailwind.config.ts      ← config compartilhada (exportada)
    globals.css

Regras de componente

• Todo componente tem Story no Storybook
• Variantes definidas via CVA — sem condicionais inline de classe
• Usar cn() (clsx + tailwind-merge) para merge de classes
• Props de estilo aceitas via className — nunca style inline
• Componentes sem lógica de negócio — apenas apresentação

Fidelidade ao Figma

• Comparar com Figma antes de marcar componente como pronto
• Tokens de cor/espaçamento via tailwind.config.ts — sem valores hardcoded
• Variantes do Figma = variantes CVA

Storybook

• Story por variante de componente
• Usar @storybook/test para interaction tests em fluxos com estado
• Args tipados com satisfies Meta<typeof Component>

Exportação

• Exportar via index.ts na raiz do src/
• Sem exportações default — apenas named exports