Storybook

Esta análise do Storybook JS aborda para que serve esta ferramenta de desenvolvimento front-end, as suas principais funcionalidades, o seu custo, como funcionam os testes, os seus pontos fortes e fracos, e como se compara com outras ferramentas. O Storybook funciona em paralelo com a sua aplicação como um ambiente de desenvolvimento independente e integra-se num fluxo de trabalho front-end já existente. Escreve-se «histórias»: pequenos ficheiros que representam um componente num determinado estado, como um botão desativado ou um formulário com um erro. O Storybook reúne todas as histórias numa interface de utilizador do navegador, para que programadores, designers e equipas de produto possam ver, testar e discutir cada elemento da interface de utilizador sem terem de navegar pela aplicação real. O projeto é de código aberto e mantido pela Chromatic, sendo a versão 10 a versão atual (anúncio do Storybook 10).

Para que serve o Storybook?

O Storybook é utilizado para o desenvolvimento, teste e documentação da interface do utilizador num único local. As utilizações típicas são:

• Criar e construir componentes da interface do utilizador de forma isolada, como uma área de teste para desenvolvimento, incluindo casos extremos difíceis de alcançar na aplicação, tais como estados vazios, estados de carregamento e erros de API.
• Executar uma biblioteca de componentes ou um sistema de design como fonte única de referência para a consistência da interface do utilizador de um produto.
• Testes visuais, de interação e de acessibilidade em cada história.
• Publicar um guia de estilo dinâmico que seja utilizado tanto por designers como por programadores.
• Revisão de alterações na interface do utilizador em pull requests antes de estas chegarem à produção e ajuda aos programadores na depuração de um componente sem o resto da aplicação.

É utilizado principalmente por programadores front-end em projetos React, mas também com Vue, Angular, Svelte e Web Components. As equipas com mais do que uma aplicação, ou com um sistema de design partilhado, tiram o máximo partido desta ferramenta.

Principais funcionalidades

• Histórias e isolamento: cada história renderiza um componente num único estado. Dados simulados, contexto e pedidos à API permitem-lhe desenvolver componentes sem um backend em execução, e o recarregamento dinâmico de módulos atualiza o ecrã à medida que guarda.
• Suporte a frameworks: suporte oficial para React (com Vite, Webpack, Next.js e React Native Web), Preact, Vue, Angular, Svelte e SvelteKit, e Web Components; as compilações da comunidade incluem Nuxt, SolidJS e outros (frameworks).
• Testes: testes de interação que simulam cliques num componente, testes de acessibilidade com o axe e testes visuais. Desde a versão 9 que o executor de testes é baseado no Vitest, e a versão 10 adiciona a simulação automática de módulos.
• Documentação: páginas de documentação automáticas a partir das suas histórias, com tabelas de props e páginas Markdown (MDX), para que a documentação se mantenha sincronizada com o código.
• Complementos: um ecossistema de complementos para janelas de visualização, temas, tokens de design, incorporações do Figma e muito mais. Cada complemento instala-se com um único comando e amplia a interface do Storybook ou os seus testes.
• Integração: importe componentes existentes tal como estão; o Storybook integra-se com o Vite, o Webpack, o Vitest, o Playwright, pipelines de CI e ferramentas de design, e o fornecedor lista mais de 400 integrações e complementos, pelo que os utilizadores raramente precisam de ferramentas separadas.
• Publicação: crie um Storybook estático e hospede-o em qualquer site, ou publique-o com o Chromatic para partilhar com as equipas para revisão.

Preços do Storybook

O Storybook em si é gratuito e de código aberto ao abrigo da licença MIT (GitHub). Instala-se com o npm num projeto novo ou existente, executa-se localmente (por predefinição na porta 6006) e hospeda-se a compilação estática onde quiser.

A parte paga é opcional e provém do Chromatic, o serviço hospedado pela equipa do Storybook. De acordo com a página de preços do Chromatic (setembro de 2026):

• Gratuito: 0 $, 5 000 instantâneos por mês, apenas no Chrome, projetos e colaboradores ilimitados.
• Starter: 179 $ por mês, 35 000 instantâneos, inclui o Safari, o Firefox e o Edge.
• Pro: 399 $ por mês, 85 000 instantâneos, inclui um domínio personalizado.
• Enterprise: preços personalizados, instantâneos ilimitados, SSO e suporte prioritário.

A métrica de utilização é o número de instantâneos: uma captura de ecrã de uma história num navegador. O aspeto que pode causar surpresas em termos de custos é o volume de instantâneos, porque cada história, multiplicada por cada navegador e área de visualização, conta. O TurboSnap da Chromatic volta a testar apenas as histórias afetadas por uma alteração, o que mantém a utilização baixa em grandes bibliotecas de componentes.

Testes de desenvolvimento da IU: testes de interação, acessibilidade e testes visuais

O Storybook é utilizado tanto para testes como para desenvolvimento, e os testes são agora uma parte fundamental do fluxo de trabalho de desenvolvimento. Uma história já é, por si só, um caso de teste: apresenta um componente num estado conhecido. Além disso, o Storybook adiciona três tipos de testes. Os testes de interação utilizam uma play função para clicar, digitar e verificar, como um pequeno teste de ponta a ponta para um componente. Os testes de acessibilidade executam o axe em cada história e assinalam problemas de contraste, rótulos e ARIA. Os testes visuais comparam capturas de ecrã com a última versão aprovada, localmente ou através do Chromatic. Desde o Storybook 9, estes são executados através do Vitest, pelo que os mesmos testes funcionam na interface do Storybook, na linha de comandos e na CI. O resultado são testes de desenvolvimento da interface do utilizador que detetam regressões antes de estas chegarem aos utilizadores, sem necessidade de escrever um conjunto de testes separado para cada componente.

Interface do Storybook para sistemas de design, documentação e equipas

O Storybook é a plataforma padrão para muitos sistemas de design. A biblioteca de componentes reside no código, e o Storybook transforma-a num catálogo navegável com documentação, exemplos e as propriedades exatas que cada componente aceita. Os designers podem explorar cada componente e a sua funcionalidade no navegador, e os programadores podem copiar um exemplo funcional. As histórias podem ser incorporadas em wikis, páginas Markdown e no Figma, o que mantém a colaboração entre o design e o código num único local. Para as equipas, o principal benefício é a consistência: todos criam novas páginas a partir dos mesmos elementos testados, e uma alteração num componente é refletida em todas as histórias que o utilizam.

Onde o Storybook se destaca — e onde fica aquém

Pontos fortes:

• Gratuito, de código aberto e amplamente utilizado, com uma grande comunidade e muitos complementos.
• Desenvolve componentes de forma isolada, incluindo casos extremos que são difíceis de reproduzir.
• Desenvolvimento, testes e documentação a partir das mesmas histórias.
• Suporta a maioria das estruturas de front-end, bem como o Vite e o Webpack.

Desvantagens:

• A configuração e as atualizações exigem algum esforço; versões principais, como a versão 10 (exclusivamente ESM), requerem o Node 20.16 ou mais recente.
• As histórias são código adicional que as equipas têm de manter atualizado; caso contrário, o catálogo fica desfasado da aplicação real.
• Em projetos pequenos com poucos componentes partilhados, a sobrecarga pode superar os benefícios.
• Os testes visuais em vários navegadores à grande escala requerem um plano pago do Chromatic ou a sua própria infraestrutura.

Como o Storybook se compara

• Figma: onde os designers desenham a interface do utilizador; o Storybook é onde os programadores criam e testam a versão codificada, e os dois conectam-se através de add-ons e incorporações.
• Builder.io: um editor visual que permite que quem não é programador crie páginas a partir dos seus componentes registados, enquanto o Storybook continua a ser uma ferramenta para programadores.

Existem ferramentas de código aberto mais leves, como o Ladle para React e o Histoire para Vue, mas têm ecossistemas de add-ons mais reduzidos e menos funcionalidades de teste.

Vale a pena usar o Storybook?

O Storybook vale a pena para equipas de front-end que mantêm uma biblioteca de componentes, um sistema de design ou mais do que uma aplicação com interface de utilizador partilhada. É gratuito, facilita a criação e a revisão de componentes e as suas funcionalidades de teste substituem grande parte do código de teste escrito manualmente. Vale menos a pena para uma pequena aplicação única com poucos componentes reutilizáveis, em que manter as histórias atualizadas custa mais tempo do que aquele que poupa. Se precisar de ajuda para configurar o Storybook, um sistema de design ou uma biblioteca de componentes, os programadores front-end e as agências da LowCodeDevs podem encarregar-se disso.

Fontes

• Storybook: o site do fornecedor, funcionalidades e estatísticas do projeto.
• Frameworks do Storybook: frameworks e construtores suportados.
• Storybook 10: notas de lançamento, requisitos exclusivos para ESM e Node.
• Porquê o Storybook?: a explicação do fornecedor sobre o desenvolvimento orientado por componentes.
• Preços do Chromatic: planos de testes visuais alojados e limites de instantâneos.
• O que é o Storybook, Stackify: uma introdução para programadores.
• Storybook para equipas de produto, UXPin: como as equipas de design e de produto o utilizam (a UXPin comercializa uma ferramenta de design que se integra com o Storybook).