Storybook

O que é

Package bem útil para criar a sua biblioteca de componentes visuais. Ele não tem componentes visuais próprios, ele apenas cria uma lista de componentes que vocês fez e gera a visualização fácil dele.

STORYBOOK

Como utilizar

O site do Storybook provê informações úteis sobre como configurar a ferramenta com qualquer framework suportado. Depois do setup inicial, você terá a seguinte organização de pastas:

  • .storybook
    • main.js : o arquivo de configuração gerado, indicando as pastas de onde os stories serão lidos e os addons utilizados
    • preview.js : as configurações globais dos stories. Você pode definir decorators, wrappers e outras configurações que vão ser aplicados em todos os Stories definidos.
  • src / components: a pasta onde você criará seus componentes. ("components" é só um nome de exemplo)
    • Component.js : O componente que você criar
    • Component.stories.js : O "Story" associado ao componente criado

Para criar o Story de um componentes, no seu arquivo Component.stories.js você deve:

  • Importar seu componente
  • Adicionar um export default com um título, seu componente e outros atributos opcionais
  • Fazer um export const StoryName para cada Story do componente. Um padrão comum é utilizar um Template , que permite o uso dos argumentos do componente.
  • Para cada StoryName , defina os argumentos ou propriedades que descrevem o Story.

Execute npm run storybook para executar sua aplicação Storybook no localhost.

V6

import React from 'react';
import Component from './Component';

export default {
  component: Component, // Which component it will render
  title: 'Component', // Name displayed at sidebar
  decorators: [story => <div style={{ padding: '3rem' }}>{story()}</div>],
};

/*Story Template*/
const Template = args => <Component {...args} />;

/*Story that receives the template arguments*/
export const Default = Template.bind({});
/*Setting the story args*/
Default.args = {
    text: 'example',
    object: {
        id: 1,
        title: 'example',
    },
};

Como aprender

Material útil

Validando o conhecimento

  • Criar projeto básico com create-react-app, fazer um componente de item com mais de um estado e de lista usando o componente de item

Comandos úteis

  • npm run storybook

Configurando deploy para GitHub Pages

Para configurar o deploy do Storybook para a GitHub Pages do repositório é bem simples:

  1. Adicione o pacote storybook-deployer ao projeto:

    yarn add @storybook/storybook-deployer

  2. Crie o comando de deploy aos scripts do arquivo package.json:

    {
  "scripts": {
    "deploy-storybook": "storybook-to-ghpages"
  }
}

  3. Execute o comando deploy-storybook. O storybook será compilado para uma versão estática e um commit será feito no branch gh-pages.

    yarn deploy-storybook

  4. Na página do repositório vá em Settings desça até GitHub Pages e selecione a opção gh-pages branch no campo Source.

    ATENÇÃO: Mesmo que o branch gp-pages já apareça selecionado, clique nele de novo. Isso é provavelmente um bug do GitHub, há casos em que o branch está selecionado, mas a página naõ é publicada.

  5. Se tiver dado tudo certo, deve aparecer uma mensagem:

    Your site is published at https://app-masters.github.io/${nome_repo}/

    Depois de publicado, a página pode demorar alguns minutos para aparecer no servidor.

Usando o comando em uma CI

Depois de configurado o deploy, para rodar em uma CI, basta utilizar o comando npm run deploy-storybook -- --ci.

- name: Deploy
  run: npm run deploy-storybook -- --ci
  env:
    GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Por padrão o comando utiliza a variável de ambiente GH_TOKEN para fazer o deploy, caso necessário, é possível definir outra variável de ambiente:

npm run deploy-storybook -- --ci --host-token-env-variable=GITHUB_TOKEN

Possíveis problemas

  • Versão do node: Algumas versões do node não foram aceitas na instalação. Utilizando a 9.10.0, foi preciso voltar para a 8.10.0 (usar o nvm para ajudar)
← nvmVisual Studio Code →