[Projeto] Código da aula | NextJS: documentando seu Front-end com o Storybook

Padrão de componentes no storybook.

Import base do storybook
Import do componente
Caminho de organização para chegar até ele
Título → #
Descrição → ##
Primeiro exemplo/componente

Canvas → Componente do próprio storybook.

Story → Precisa de um name, args (quais propriedades vai ter)

Button.tsx

export default function Button({ children }) {
  return (
    <button>
      {children}
    </button>
  )
}

Button.stories.mdx

import { Meta, Canvas, Story } from "@storybook/addon-docs";
import Button from "./Button.tsx";

<Meta title="Components/Button" />

# Button

Aqui vai a descrição do botão e você pode escrever o que achar melhor.

## Button example

<Canvas>
  <Story
    name="Button Example"
    args={{ children: 'Texto do botão' }}
  >
    {(args) => <Button {...args} />}
  </Story>
</Canvas>

## Button example 2

<Canvas>
  <Story
    name="Button Example 2"
    args={{ children: 'Texto do botão 2' }}
  >
    {(args) => <Button {...args} />}
  </Story>
</Canvas>