Skip to main content

Integração do Storybook no Frontend

· 2 min read
Juathan Coelho Duarte
Juathan Coelho Duarte
Tech Lead

Temos o prazer de anunciar que o Storybook agora está oficialmente integrado ao nosso fluxo de desenvolvimento de frontend. Esta ferramenta será fundamental para a criação, teste e documentação de componentes de interface de forma isolada.

O que é o Storybook?​

O Storybook é uma ferramenta de código aberto para construir componentes de UI e páginas de forma isolada. Ele simplifica o desenvolvimento de UI, testes e documentação ao permitir que os desenvolvedores visualizem estados de componentes sem a necessidade de rodar a aplicação completa.

Por que estamos utilizando?​

  1. Desenvolvimento Isolado: Crie componentes sem se preocupar com a lógica de negócio complexa ou dados de API pesados.
  2. Documentação Viva: O Storybook serve como uma vitrine de todos os componentes disponíveis no @design-system, facilitando o reuso por outros desenvolvedores.
  3. Testes de Estado: Visualize facilmente como um componente se comporta com diferentes estados (loading, error, empty, etc.).
  4. Colaboração: Facilita a revisão de UI com designers e PMs.

Como utilizar?​

Para rodar o Storybook localmente, utilize o comando:

pnpm storybook

Ao criar um novo componente, lembre-se de sempre criar o arquivo .stories.tsx correspondente na pasta do componente.

Exemplo de Story​

// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./index";
import type { IButtonProps } from "./types";

const meta: Meta<IButtonProps> = {
  title: "Design System/Button",
  component: Button,
};

export default meta;
type Story = StoryObj<IButtonProps>;

export const Primary: Story = {
  args: {
    label: "Clique aqui",
    variant: "primary",
  },
};

Com essa integração, damos mais um passo em direção à excelência técnica e à consistência visual da nossa plataforma.