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

O Storybook é executado em paralelo com o aplicativo que está sendo desenvolvido. Ele ajuda você a criar componentes de interface do usuário (UI em formato bruto) que são isolados da lógica de negócios e do contexto do aplicativo. Esta edição de aprendizagem do livro de histórias é para Angular. Outras versões estão disponíveis para Vue e React.

O cenário perfeito para gambiarras

Em seguida, você terá que refazer esse processo várias vezes para visualizar as alterações desejadas ou realizará algumas soluções alternativas, como comentar o código da página ou validar alguns componentes para poder visualizá-los com mais facilidade.

Eu vi muitos desses hacks e eu mesmo os fiz. No final, você abre o app e esquece de mudar todo o fluxo que estragou antes, quebrando algumas páginas, quando perguntam quem você é…

Concordamos que em um cenário como esse seria mais fácil e menos doloroso se houvesse alguma maneira de não fazer essa maratona para poder trocar componentes individuais.

Ou melhor, existem algumas formas mais diretas de acessar esse componente, talvez de forma isolada.

Pare e pense, quanto mais seu aplicativo cresce, mais esses componentes estão conectados, e fazer uma alteração muito pequena em um deles pode ter um efeito cascata e fazer com que a tela inteira quebre.

Então não podemos trabalhar assim, nossos componentes têm que ser tão fortes e duráveis ​​quanto o Lego.

É assim que os livros de histórias entram nas histórias.

Mas o que é o Storybook?

O Storybook é uma ferramenta de código aberto para preparar um ambiente de desenvolvimento para componentes de interface do usuário.

Possui uma CLI utilizada no terminal, o que significa que podemos organizar nossos componentes nesta ferramenta.

Ele nos permite desenvolver e testar componentes independentemente de nossa aplicação.

Como funciona o Storybook

Permite criar componentes em Angular, React, Vue e outros grandes frameworks do mercado.

Por exemplo, todos os componentes criados podem ser reaproveitados em nossa aplicação, tornando o desenvolvimento mais simples e funcional, pois já condiz com a identidade visual do projeto.

Portanto, não precisamos nos preocupar com a lógica de negócios de como obter os dados, também podemos estender sua funcionalidade para melhorar seu fluxo de trabalho criando documentos dentro do componente.

Como começar com o Storybook

Vamos dar o primeiro passo nesta nova jornada e ver como podemos integrar o Storybook em nossos projetos, mostrando como ele funciona.

Integrar uma ferramenta em um projeto é uma tarefa muito simples, precisamos apenas de um projeto existente ou começamos um projeto do zero. Para fins de demonstração, usaremos um projeto do zero para fazer isso.

Primeiro, precisamos instalar o NodeJs e o NPM em nosso computador. Uma vez instalado, podemos ir até a pasta onde queremos criar o projeto, abrir um terminal e digitar:

npx create-react-app mystorybook

Com isso, criamos um projeto chamado mystorybook em React.

Uma vez instalado, podemos acessar a pasta com o comando no terminal:

cd mystorybook

Uma vez no projeto podemos abrir qualquer programa de sua escolha, gosto muito de visualizar código então é só digitar:

code .

E vemos que já existe uma estrutura pronta.

Como preparar o Storybook para os componentes

Agora vamos apresentar o Storybook para que possamos criar componentes que serão usados ​​posteriormente em alguma aplicação específica.

Voltemos ao terminal para inserir o seguinte comando:

npx -p @storybook/cli sb init

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

Se por algum motivo o comando falhar ou usar um projeto existente, você pode definir 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 outras coisas, no final do artigo, você encontrará o site de 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 executar este comando, iniciaremos o projeto.

Se não houver erros, o navegador abrirá automaticamente nosso projeto.

Como exibir componentes com o Storybook

A parte principal da tela é onde os componentes são exibidos. Na barra lateral você terá a lista de componentes e na barra inferior temos a “ação” que é usada como console.log .

Depois de confirmar que estava tudo bem, apaguei as histórias 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’,

};

Adicionado um exemplo de botão, passando um objeto “colorOptions” contendo todas as cores que o botão pode assumir, permitindo que os desenvolvedores visualizem como será o resultado final.

Nas propriedades do componente do Storybook, passamos o botão de como alterar props dinamicamente sem alterar o código. Podemos passar opções como funções, booleanos, seleções, texto, etc.

Como instalar o pacote Notes do Storybook

Por fim, instalaremos outro pacote do Storybook, Notes. Com ele, nossos componentes podem ser visualizados na forma de documentação.

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:

Gostou do resultado? Deixe seu comentário!