1
resposta

[Projeto] Código da aula

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>
1 resposta

Oi Sarah, tudo bem?

Muito obrigada por compartilhar aqui o código e parabéns por praticar!

Continue os bons estudos.

Um abraço.