Olá Web Developers! O Storybook é uma ferramenta incrível para o desenvolvimento de componentes que você vai usar em seu sistema, independentemente do framework ou biblioteca que você usa. Aqui nós vamos conhecer melhor sobre o Storybook e o porque você deveria usá-lo.
O que é Storybook?
Storybook é uma ferramenta que tem como objetivo servir de ambiente isolado para você criar seus componentes. Ou seja, você não precisa desenvolver seu componente diretamente no seu sistema.
Ele é utilizado por grandes empresas como: GitHub, Dropbox, airbnb, Mozilla, JetBrains, etc.
O Storybook funciona com várias bibliotecas e frameworks, como: React, Angular, Vue, Ember, etc.
Curso
React - Despertando o Poder dos Hooks
Conhecer o curso
Por que preciso de um ambiente isolado?
A ideia dos componentes é que eles precisam ser reutilizáveis. Se você cria diretamente no seu sistema, algum JavaScript ou CSS do sistema pode influenciá-lo. Além disso, você pode cair na tentação de integrar o componente com alguma fonte de dados para facilitar o acesso a algum dado. E isso já acaba com a possibilidade de reutilização.
Além disso, o componente corre o risco de ficar mais complexo, dificultando na hora de testá-lo.
Como o Storybook pode ajudar?
Um bom exemplo aqui na TreinaWeb é em nosso sistema de ensino, na parte do conteúdo. Há vários testes e validações a serem feitas, e também há vários tipos de exercícios que são embaralhados antes de serem exibidos ao aluno. Imagine o trabalho que eu tinha na hora de testar: procurar uma aula com o tipo de conteúdo que eu precisava e, se fosse necessário testar um exercício, precisava ficar procurando e ter a sorte dele aparecer para mim.
Uma saída seria criar uma tela apenas para testes e chamar o componente que quero testar, passando dados mockados. Já fiz muito isso no passado, mas começava a dificultar conforme a quantidade de componentes aumentava.
Já com o Storybook eu posso ter uma lista com os componentes e controlá-los para poder testar o que quiser sem muito esforço.
Veja na imagem abaixo que você pode criar controles para modificar o seu componente em tempo real da maneira que quiser:
Isso tudo é feito com o Storybook de maneira bem simples! Portanto, você vai ter um ambiente leve para criar seus componentes de maneira isolada, poder testá-los de maneira bem simples e ele também acaba servindo de documentação da sua biblioteca de componentes!
Além disso, o Storybook é completamente customizável e possui vários plugins que podem facilitar em várias tarefas, como testes em diferentes resoluções, mudança de tema, teste de acessibilidade, internacionalização, etc.
