O Que É o Storybook? Uma Oficina para Componentes de UI
Storybook é um ambiente de desenvolvimento para construir, visualizar e documentar componentes de UI de forma isolada, fora da aplicação completa.
Trabalhar em um componente dentro de uma aplicação completa é desajeitado: você precisa navegar até a tela certa e configurar o estado certo. O Storybook permite desenvolver cada componente por conta própria, em todos os estados, em uma oficina dedicada. Ele também serve como documentação viva e como base para testes automatizados de UI, e ambos rodam no CI.
O que é uma story
Uma story é um único estado renderizado de um componente, definido em código. Um componente pode ter muitas stories: default, loading, error, disabled. O Storybook as lista para que você alterne entre estados instantaneamente.
Por que o isolamento ajuda
- Desenvolver estados de casos extremos que são difíceis de alcançar na aplicação.
- Documentar como um componente se parece e se comporta.
- Dar a designers e revisores um catálogo de componentes navegável.
Storybook como superfície de teste
Como as stories são estados renderizados determinísticos, elas são entradas ideais para testes de regressão visual e de interação. Ferramentas fazem snapshot de cada story e sinalizam diferenças de pixels, transformando o Storybook em um arcabouço de testes.
Um build estático e implantável
O Storybook pode ser construído como um site estático, para que o catálogo de componentes possa ser hospedado e compartilhado com toda a equipe. Esse build estático é apenas mais um conjunto de arquivos que um pipeline pode fazer deploy.
Storybook em CI/CD
O CI constrói o Storybook estático, executa testes de interação e de regressão visual contra as stories, e frequentemente faz deploy do catálogo como um preview por pull request. Isso torna o Storybook ao mesmo tempo uma barreira de qualidade e um auxílio de revisão no pipeline.
Principais conclusões
- O Storybook desenvolve e documenta componentes de UI de forma isolada como stories.
- Stories são estados determinísticos, ideais para testes visuais e de interação.
- O CI constrói, testa e frequentemente faz deploy do Storybook como um preview por PR.