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>