Configuração do Storybook para Documentação de Componentes React

Introdução ao Storybook

O Storybook é uma ferramenta poderosa para desenvolver componentes de maneira isolada, permitindo que você crie, teste e documente seus componentes React de forma eficaz. Neste tutorial, vamos explorar como configurar o Storybook em seu projeto React.

Instalação do Storybook

Para começar, primeiro você precisa instalar o Storybook em seu projeto. No terminal, navegue até o diretório do seu projeto e execute o seguinte comando:

npx sb init

Esse comando irá instalar o Storybook e criar uma estrutura de pastas adequada no seu projeto. Após a instalação, você verá uma nova pasta chamada .storybook e uma pasta stories onde você pode adicionar seus componentes.

Estrutura de Pastas

Após a instalação, a estrutura de pastas do seu projeto deverá ficar assim:

my-project/
├── .storybook/
│   ├── main.js
│   └── preview.js
├── src/
│   └── components/
│       └── MyComponent.js
└── stories/
    └── MyComponent.stories.js

A pasta .storybook contém os arquivos de configuração do Storybook, enquanto a pasta stories é o local onde você irá colocar as histórias dos seus componentes.

Criando Histórias

Agora, vamos criar uma história para o nosso componente. Suponha que você tenha um componente chamado MyComponent. Crie um arquivo chamado MyComponent.stories.js na pasta stories com o seguinte conteúdo:

import React from 'react';
import MyComponent from '../src/components/MyComponent';

export default {
  title: 'Exemplo/MyComponent',
  component: MyComponent,
};

const Template = (args) => <MyComponent {...args} />;

export const Default = Template.bind({});
Default.args = {
  // Defina as props padrão do seu componente aqui
  title: 'Título padrão',
};

Esse código cria uma história padrão para o seu componente. A história é uma função que retorna o seu componente com as props que você deseja testar. No exemplo acima, a história Default renderiza o MyComponent com um título padrão.

Executando o Storybook

Para visualizar suas histórias, execute o seguinte comando no terminal:

npm run storybook

Isso abrirá o Storybook em seu navegador, onde você poderá ver e interagir com suas histórias. Você pode testar diferentes estados do seu componente e verificar como ele se comporta com diferentes props.

Adicionando Estilos

Uma das grandes vantagens do Storybook é a capacidade de testar seu componente em diferentes estilos. Para adicionar estilos, você pode importar arquivos CSS diretamente no seu componente ou usar bibliotecas como o Styled Components. Aqui está um exemplo de como usar o Styled Components:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
`;

const MyComponent = ({ title }) => <StyledButton>{title}</StyledButton>;

No exemplo acima, criamos um botão estilizado usando o Styled Components. Essa abordagem permite que você mantenha seus estilos encapsulados junto com seus componentes.

Integração com Testes

Uma boa prática ao usar o Storybook é integrá-lo com ferramentas de teste como Jest e Testing Library. Você pode escrever testes para suas histórias para garantir que seus componentes se comportem como esperado. Aqui está um exemplo de teste:

import { render, screen } from '@testing-library/react';
import MyComponent from '../src/components/MyComponent';

test('renders the title', () => {
  render(<MyComponent title="Test Title" />);
  const linkElement = screen.getByText(/Test Title/i);
  expect(linkElement).toBeInTheDocument();
});

Esse teste verifica se o título passado como prop está sendo renderizado corretamente no componente.

Conclusão

O Storybook é uma ferramenta indispensável para o desenvolvimento de componentes React. Com ele, você pode documentar, testar e visualizar seus componentes de maneira isolada, tornando o processo de desenvolvimento muito mais eficiente. Ao seguir este tutorial, você aprendeu como configurar o Storybook, criar histórias e integrar estilos e testes. Agora, você está pronto para documentar seus componentes de forma eficaz e contribuir para um desenvolvimento de software de alta qualidade.

Entenda a Importância do Storybook para sua Equipe de Desenvolvimento

O Storybook é uma ferramenta que tem ganhado destaque na comunidade de desenvolvedores React. Sua principal função é permitir a construção de componentes isolados, promovendo uma melhor organização e testabilidade. Ao usar o Storybook, as equipes podem trabalhar em paralelo, criando e documentando componentes que podem ser reutilizados em diferentes partes de um aplicativo. Essa abordagem não só melhora a qualidade do código, mas também proporciona uma documentação visual que facilita a colaboração entre desenvolvedores e designers.

Algumas aplicações:

• Documentação de componentes de UI
• Testes visuais de componentes
• Desenvolvimento paralelo de componentes

Dicas para quem está começando

• Comece com componentes simples e vá aumentando a complexidade.
• Utilize as histórias para visualizar diferentes estados do componente.
• Explore addons do Storybook para aumentar a funcionalidade.
• Mantenha a documentação sempre atualizada.

Compartilhe este tutorial