Aula 7: Storybook — A Fonte da Verdade Visual
Para checar o `Button` no estado `ghost` com um erro, você faz login no app, abre um formulário, digita dados incorretos, e espera. Tudo isso para ver um único componente. Esta aula ensina você o `Storybook`: um ficheiro de stories que renderiza cada variante isoladamente, em uma única página — uma
O Storybook é como a vitrine de um alfaiate: cada variante de uma roupa em seu próprio manequim, enfileiradas, para que você examine cada uma separadamente — sem vestir uma pessoa inteira e mandá-la passear pela loja.
- Storybook
- Uma ferramenta que renderiza componentes isoladamente, fora do app, cada um com suas variantes em uma única página — uma fonte da verdade visual para desenvolver, revisar e documentar o design system.
- story
- Um único estado de um componente, exportado de um ficheiro `*.stories.tsx` — geralmente uma variante com seus args (`export const Ghost = { args: { variant: 'ghost' } }`).
- isolated development
- Construir e testar um componente separado do app, sem precisar navegar até ele por ecrãs, login e dados — isso encurta o ciclo de feedback.
- visual regression
- Uma mudança visual não intencional que passa despercebida por acidente (um componente que 'quebrou' visualmente). O Storybook facilita detetar isso porque todas as variantes ficam visíveis juntas.
