Criando uma documentação com StoryBook para React
Nesse post vamos falar sobre como criar uma documentação para uma aplicação FrontEnd de forma simples e intuitiva.
Se você não gosta dos padrões antigos de documentação que nem eu, seus problemas acabaram! 🤩
Hoje vou te mostrar uma ferramenta que vem ganhando bastante espaço na comunidade e no mercado, que é ninguém menos que o Storybook, uma ferramenta Open Source que prepara um ambiente de desenvolvimento para componentes de UI.
Então bora para o que importa 🤓
Ah, antes de começar, eu vou utilizar o Storybook com o React, mas ele da suporte para vários outros frameworks e libs como 👇
Sem mais delongas, vamos para o código:
Vamos criar uma aplicação React utilizando o CRA, rodando o comando:
npx create-react-app my-app
Com o projeto criado, vamos fazer a instalação do Storybook, rodando o comando: npx sb init
Você pode acessar a documentação para saber mais sobre a instalação através desse link.
Depois que a instalação for concluída vai ser criado duas pastas no nosso projeto 👇
Uma pasta chamada .storybook e outra dentro de /src/stories, a pasta .storybook contém as configurações que não vamos abordar hoje, mas você pode ler mais sobre essas configurações na documentação, e também foi criado a pasta /src/stories que vai ser onde vamos escrever nossas histórias.
Vamos rodar o Storybook
Execute o comando npm run storybook e acesse http://localhost:6006 você vai ver uma tela como essa 👇
Isso quer dizer que nosso Storybook foi instalado e está rodando corretamente! 🤩
Agora vamos entender a interface do Storybook
No lado esquerdo da tela, temos a lista de stories. O Storybook criou alguns componentes de exemplo.
Clicando no componente de botão, vamos ver algo parecido com isso 👇
Onde é renderizado o componente, e na parte inferior temos um menu com algumas opções que podemos interagir com o componente e ver o seu funcionamento.
No menu superior temos uma opção Docs, clicando nela vai ser aberto a documentação do componente 👇
Agora vamos criar uma nova Stories
Para começar, fiz uma limpa na pasta stories deixando somente a introdução e os assets 👇
Vamos criar um simples componente de Alert, então pra isso vamos criar 3 arquivos 👇
Como o foco desse post não é criar um componente, vou pular essa parte, o código do componente está disponível nesse repositório.
Nosso componente de Alert ficou assim 👇
Agora vamos criar a Storie, para isso crie um arquivo Alert.stories.js 👇
Calma, sei que tem bastante coisa ai, mas vou te explicar as partes importantes!
Linha 6–16: Aqui estamos criando a configuração default da nossa Storie, definindo um title, apontando o componente e definindo os args padrões. Na linha 10 estamos defindo que a props type vai ser exibida como um select na tela do Storybook recebendo um array de opções:
Linha 17: Estamos definindo nossa Story
Linha 19: Aqui estamos definindo as props para o componente Default, que vai receber um title e uma message
E o resultado vai ser esse 👇
E pronto, é simples assim 🎉
Vamos adicionar as outras variantes do nosso Alert 👇
A diferença aqui é que foi adicionado a props type dentro do args, automaticamente o Storybook vai listar todas as variantes do componente 👇
O arquivo Alert.stories.js final ficou assim 👇
E pronto, criamos nossa primeira Storie, simples né?! 😎
Caso você queira rodar a aplicação na sua maquina, você pode acessar o repositório nesse link.
👉 Ah e em breve vou trazer mais publicações sobre Storybook, fica ligado aqui no meu perfil!
Bom, é isso, espero que tenha gostado!
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por ai! 😜
- Portfólio: vinniciusgomes.dev
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
