como usar o storybook?

Em uma das vagas que estou fazendo o processo seletivo, tem um requisito que é o storybook. Então, fui pesquisar para saber o que é, entender o funcionamento e quando é usado e fazer algo na prática para ter a primeira impressão. Preciso estar preparado para conversar sobre e buscar realizar minhas primeiras tarefas com esse requisito.

Storybook é uma ferramenta indispensável para criar componentes visuais em nossos aplicativos.

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.

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

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

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.

Configurar o Storybook com React

Precisamos de alguns passos extra para configurar o processo de compilação no nosso ambiente de desenvolvimento. Para começar queremos usar o pacote Create React App ou como é vulgarmente conhecido (CRA), para compilação e permitir ao Storybook e Jest fazerem testes na nossa aplicação. Vamos executar os seguintes comandos:

# Create our application:
npx create-react-app mystorybook

cd mystorybook

# Add Storybook:
npx storybook init

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.

As três modalidades de frontend da aplicação: testes automáticos (Jest), desenvolvimento de componentes (Storybook) e a aplicação em si.

Dependendo de qual parte da aplicação em que está a trabalhar, pode querer executar uma ou mais simultaneamente. Mas, visto que o nosso foco é a criação de um único componente de interface de utilizador (UI na forma original), vamos ficar somente pela execução do Storybook.

Reutilizar CSS

A Taskbox reutiliza elementos de design deste tutorial React e GraphQL, logo não precisamos escrever CSS neste tutorial. Copie e cole o CSS compilado no ficheiro (ou arquivo) src/index.css.

Se for necessária alguma alteração aos elementos de estilo, os ficheiros LESS originais encontram-se disponíveis no repositório Github.

Adicionar recursos

De forma a igualar o design pretendido do tutorial, terá que transferir as pastas (ou diretórios) dos ícones e fontes para dentro da pasta src/assets.

npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon

Foi usado o degit para transferir pastas do GitHub. Se quiser transferir manualmente, pode obtê-las aqui.

Após adicionar os estilos e assets, a aplicação irá renderizar de forma estranha. Tudo bem. Não vamos trabalhar nela agora. Vamos antes começar por construir o nosso primeiro componente.

Como preparar 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

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

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

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:

Storybook para o React

Configuração do React Storybook no ambiente de desenvolvimento React. O Storybook executa paralelamente à aplicação em desenvolvimento.

Ajuda-o a construir componentes de interface de utilizador, UI na forma original, isolados da lógica de negócio e contexto da aplicação.

Para escrever esse texto, pesquisei sobre o storybook para o react e acredito ser interessante consultar outras fontes para esclarecer ainda mais esse tema.

Storybook Tutorials

O Storybook tem aplicação com diversas linguagens mas estou mais interessado com a união com o react e outras tecnologias nesse contexto.

Espero que tenha gostado do texto. Me ajudou muito a construir minhas soluções com o storybook. Deixe o seu aplauso e até o próximo artigo.