Escalando a entrega de UI com o Storybook- parte 3

Concluindo a série sobre as entregas com o Storybook vamos falar um pouco dos addons, os plugins do Storybook

Se você não leu os outros artigos:

• Parte 1- Falo do funcionamento básico e da instalação;
• Parte 2 - Como interagir com as stories enviando e recebendo props;

Addons — Turbinando suas Stories

O Storybook possue vários addons para salvar nossa pele na hora de demonstrar nossos componentes. Uns são para organização de demonstração de código, mas eles podem realmente salvar o dia. Você pode conferir no repositório do Storybook mais detalhadamente.

Vou destacar alguns que uso muito e outros que eu sempre configuro em qualquer projeto e você pode ver o funcionamento deles no meu projeto:

• Backgrounds -> Troca a cor do background da story, é excelente para aquele componente que fica num background zebrado;
• Console -> Redireciona todo console.log para a story;
• Knob -> Habilita a modificação das props da story em tempo real;
• ViewPort -> Possibilita trocar o viewport da story, assim checamos a responsividade do componente;
• StorySource -> Adiciona a tab Story para mostrar o source code da story;

Instalando um Addon

A instalação do addon é bem simples e em 2 a 3 etapas, em cada add-existe as instruções, mas resumindo sao:

A primeira etapa é a instalação do pacote:

yarn add -D @storybook/addon-nome-do-pacote

O registro do addon no arquivo .storybook/addons.js

import '@storybook/addon-nome-do-pacore/register';

E se necessário a configuração no arquivo .storybook/config.js

Como eu posso te ajudar

Eu desenvolvi um extensão para o vscode contendo alguns snippets para facilitar a minha vida e da minha equipe na implantação do Storybook, talvez possa lhe ajudar também! E só procurar por Storybook Snippets no menu de extensões do vscode que já está no topo da pesquisa.

Posso te ajudar também tirando dúvidas no uso!

Conclusão

O Storybook é uma ferramenta que eu venho usando há quase 2 anos tanto para React, por onde eu conheci, quando para Angular, e vem me ajudado muito nas entregas da minha equipe.

Podemos, sem medo, parelelizar tarefas para entregar uma feature que, a princípio, demoraria pela interdependência de criação de componentes.

Além disso reduziu exponencialmente o retrabalho de criação de componentes, pois todos os componentes compartilhados estão documentados pelo Storybook.

Ficou muito mais fácil debuggar e atualizar o funcionamento de um componente sem a necessidade de fazer integrações com a aplicação para conferir o comportamento.

A comunidade vem mantendo uma página de tutorial bem interessante também de se conferir.