4 anos atrás

Storybook: Use-o com React, Angular ou Vue!

Storybook é uma ferramente indispensável, na minha opinião, ao criar componentes visuais em nossos aplicativos.

Agora, imagine-se no início de um projeto onde não existe nada, tudo será construído do zero. Você, sabiamente estudou o layout das telas, mapeando tudo que será necessário criar.

Todo animado, você foi lá e criou todos os componentes, olhou na tela e lá estava ela, toda linda, como você imaginou.

Agora, feche os olhos, imagine que você é novo no projeto, a aplicação é complexa, cheia de fluxos e condições para chegar na bendita tela que você precisa criar/atualizar o layout.

O cenário perfeito para gambiarras

Então você terá que refazer esse fluxo diversas vezes apenas para visualizar a desejada alteração ou irá realizar algumas gambiarras, como comentar o código de uma página ou tirar a validação de algum componente para poder visualizar de forma mais fácil.

Já vi muitas dessas gambiarras por aí e eu mesmo já as fiz. Por fim, você sobe a aplicação e esquece de alterar todo o fluxo que tinha mexido antes, quebrando várias páginas e quando te perguntam quem foi…

Concordamos que com um cenário assim seria bem mais fácil e menos doloroso se houvesse alguma forma de não fazer essa maratona para poder alterar um único componente.

Ou melhor, haver alguma forma mais direta de acessar este componente, quem sabe de uma forma isolada.

Pare e pense, quanto mais sua aplicação cresce mais esses componentes estão relacionados entre si, fazendo alterações muito pequenas em um deles pode gerar um efeito em cascata e levar a quebra de uma tela inteira.

Logo, não poderíamos trabalhar assim, nossos componentes devem ser sólidos e robustos como um bloco de Lego.

É assim que o Storybook entra na história.

Mas o que é o Storybook?

O Storybook é uma ferramenta opensource que prepara um ambiente de desenvolvimento para componentes de UI.

Ele possui um CLI para ser utilizado no terminal, isso quer dizer que dentro desta ferramenta podemos organizar nossos componentes.

Ele nos permite desenvolver e testar componentes de uma forma isolada da nossa aplicação.

Como funciona o Storybook

Ele funciona permitindo a criação de componentes em Angular, React, Vue entre outros grandes frameworks no mercado.

Todos os componentes criados são reutilizáveis dentro de nossa aplicação tornando o desenvolvimento mais simples e prático justamente por já estar de acordo com a identidade visual do projeto, por exemplo.

Assim não nos preocupamos com a lógica de negócio de como obter os dados, podendo também ampliar as suas funcionalidades para melhorar o seu fluxo de trabalho criando uma documentação dentro do componente.

Como começar com o Storybook

Vamos dar o primeiro passo nesta nova jornada e ver como podemos integrar em um projeto mostrando como funciona o Storybook.

Integrar a ferramenta em um projeto é uma tarefa muito simples, apenas precisamos de um projeto que já existe ou então começamos um do zero. Para fins demonstrativos faremos isso com um projeto do zero.

Antes, precisamos instalar o NodeJs e NPM no computador. Uma vez que já temos os dois instalados, podemos seguir para a pasta onde queremos criar o nosso projeto, abrir o terminal e digitar:

npx create-react-app mystorybook

Criamos, desta forma, um projeto em React com o nome de mystorybook.

Após finalizar as instalações, podemos acessar a pasta com o comando no terminal:

cd mystorybook

Uma vez dentro do projeto, podemos abrir algum programa de preferência, eu gosto bastante do visual code, então basta digitar:

code .

E vemos que já existe uma estrutura pronta.

Como preparar o Storybook para os componentes

Agora vamos introduzir o Storybook para podermos criar componentes que mais tarde vamos usar em algum determinado aplicativo.

Voltemos ao terminal para inserir o seguinte comando:

npx -p @storybook/cli sb init

Este comando serve para detectar que tipo de projeto estamos trabalhando (Vue, React ou Angular, por exemplo).

Se por algum motivo o comando falhar ou usar algum projeto já existente, você poderá definir o seu tipo adicionando um script de tipo, por exemplo:

Storybook React:

npx -p @storybook/cli sb init --type react

Storybook Angular

npx -p @storybook/cli sb init --type angular

Storybook Vue

npx -p @storybook/cli sb init --type vue

Entre outros, no final do artigo terá o site da documentação do Storybook e o código no GitHub que estamos criando.

Finalizando a instalação, podemos olhar o nosso package.json:

devDependencies

Note que ele também criou uma pasta:

.storybook

Dentro desta pasta existe um arquivo main.js onde encontram-se as configurações do storybook, com:

stories: ['../src/**/*.stories.js']

Isso quer dizer: encontre todas as stories dentro da pasta.

src/QUALQUERPASTA/*.stories.js'

Antes de fazer qualquer alteração iremos rodar o projeto com o seguinte comando:

npm run storybook

Após rodar este comando, teremos levantado o projeto.

Caso não ocorra nenhum erro, o navegador irá abrir automaticamente com o nosso projeto.

Como exibir componentes com Storybook

A parte principal da tela é onde serão exibidos os componentes. Na barra lateral é onde terá a listagem dos componentes e na barra inferior temos o ‘actions‘ que funciona como um console.log.

Após verificar que esta tudo funcionando, removi o story, na pasta scr/ e criei uma pasta chamada components.

Então criei o primeiro componente simples, com o nome Button. Após criar a pasta, foram criados três arquivos:

Index.js: que guarda a lógica do nosso componente;
Styles.css: onde fica o nosso estilo, a identidade visual;
Index.stories.js: para podermos visualizar o nosso componente criado.

Para alterar, podemos alterar as props dinamicamente:

npm i -D @storybook/addon-knobs

E adicionar no:

.storybook/main.js

Deve ficar assim:

module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
],
};

O exemplo é bem simples.

Como deve ficar o Index.js

Para fins demostrativos, o index.js ficaria como:

import React from 'react';
import PropTypes from 'prop-types';
import './styles.css'
const Button = ({ label, color, onClick, disabled }) => (
<button onClick={onClick} disabled={disabled} className={color}>{label}</button>
);
Button.defaultProps = {
color: 'success'
};
Button.propTypes = {
label: PropTypes.string,
color: PropTypes.oneOf(['success', 'error']),
disabled: PropTypes.bool,
onClick: PropTypes.func
};
export default Button;

Onde recebemos as props:

label: para alterar o nome do botao;
color: para alterar a cor do botão;
onClick: recendo uma ação para ser disparada no botao;
disabled: para desabilitar o botão.

Como deve ficar o Style.css

O nosso styles.css ficou bem simples, sem nenhum framework para facilitar o entendimento:

button {
outline: 0;
border: 0;
text-transform: uppercase;
padding: 16px 48px;
border-radius: 24px;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
cursor: pointer;
transition: all ease-in .2s;
}
button.success {
background-color: #2E933C;
color: white;
}
button.success:hover {
background-color: #4bdf80;
}
button.error {
background-color: #e71d36;
color: #fff;
}
button.error:hover {
background-color: #f94144;
color: white;
}
button:disabled, button[disabled]:hover {
background-color: lightgray;
cursor: not-allowed;
}

Como deve ficar o Index.stories.js

E no index.stories.js fizemos:

import React from 'react';
 
import { object, text, boolean, select } from '@storybook/addon-knobs';
import Button from '.';
export const Example = () => {
return (
<Button
color={select('color', colorOptions, 'success')}
onClick={object('onClick', onClickTest)}
disabled={boolean('disabled', false)}
label={text('label', 'sucesso')}/>
);
};
const onClickTest = () => {
console.log(documents)
alert('You clicked me!');
};
const colorOptions = {
success: 'success',
error: 'error',
};

Foi adicionado um exemplo do button, na qual foi passado um objeto de ‘colorOptions’, contendo todas as cores que este botão pode assumir permitindo, então, ao desenvolvedor visualizar como ficará o seu resultado final.

Nas propriedades dos componentes no Storybook, passamos os knobs sobre como alterar as props dinamicamente e sem a necessidade de alterar o código. Podemos passar funções, booleanos, select, texto dentre outras opções.

Como instalar o pacote Notes do Storybook

E para fechar com chave de ouro, vamos instalar mais um pacote entre outros do Storybook, o Notes. Com ele é possível visualizar, em forma de documentação, o nosso componente.

Para começar, basta digitar o comando:

npm i -D @storybook/addon-notes

Em seguida, adicionar no .storybook/main.js:

module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-notes/register'
],
};

O index.stories.js deverá ficar assim:

import React from 'react';
import documents from './notes.md'
import { object, text, boolean, select } from '@storybook/addon-knobs';
import Button from '.';
export default {
title: 'Componentes|Button',
parameters: {
notes: documents,
},
};
export const Example = () => {
return (
<Button
color={select('color', colorOptions, 'success')}
onClick={object('onClick', onClickTest)}
disabled={boolean('disabled', false)}
label={text('label', 'sucesso')}/>
);
};
const onClickTest = () => {
console.log(documents)
alert('You clicked me!');
};
const colorOptions = {
success: 'success',
error: 'error',
};

E criamos um notes.md na pasta de button para adicionar à sua documentação.

E, por fim, o resultado deve ser: