Open jemluz opened 4 months ago
Para criar qualquer componente no storybook, devemos fazer isso dentro da pasta stories, utilizando sempre a extensão .stories.tsx
Lembre-se de importar o componente desejado, e os tipos Meta e StoryObj
Declarar um modelo padrão do componente em questão (utilizando o tipo Meta
)
Declarar suas variações (todo modelo deve possuir no mínimo uma variação, utilizando o tipo StoryObj
)
O button com o ícone expansível é o modelo padrão, e dentro dele estão organizados as variações desse modelo
No arquivo do componente podemos definir props com
export type ButtonProps = {
size: 'small' | 'big'
}
Ou usando o ComponentProps do react
export type ButtonProps = ComponentProps<typeof Button>
Dentro do objeto styled definimos o atributo variants
import { ComponentProps } from 'react'
import { styled } from './styles'
export const Button = styled('button', {
fontFamily: '$default',
backgroundColor: '$ignite500',
borderRadius: '$md',
padding: '$4',
variants: {
size: {
small: {
fontSize: 14,
padding: '$2 $4',
},
big: {
fontSize: 16,
padding: '$3 $6',
},
},
},
defaultVariants: {
size: 'small',
},
})
export type ButtonProps = ComponentProps<typeof Button>
No arquivo de stories vc irá importar os props e defini-lo como generics do Meta
import type { StoryObj, Meta } from '@storybook/react'
import { Button, ButtonProps } from '@ignite-ui/react'
export default {
title: 'Button',
component: Button,
args: {
children: 'Enviar',
},
} as Meta<ButtonProps>
export const Primary: StoryObj<ButtonProps> = {}
export const Secondary: StoryObj<ButtonProps> = {}
Assim ele já habilita o autocomplete
Temos 2 formas de criar documentações no storybook
.mdx
(que é um .md
+ .xml
)Nos arquivos .mdx
, cada / no atributo title será igual a um novo subnível no storybook
Como estamos utilizando um mono repo, trabalhar com o turbo repo nos permite centralizar comandos unicos de dev e build que executam todos os repositórios ao mesmo tempo.
Para isso eu preciso configurar os scripts no package.json
principal do projeto
{
"private": true,
"name": "ds-ignite-call",
"workspaces": [
"packages/*"
],
"packageManager": "npm@10.2.4",
"scripts": {
"dev": "turbo run dev --parallel",
"build": "turbo run build"
},
"dependencies": {
"@stitches/react": "^1.2.8"
},
"devDependencies": {
"turbo": "^2.0.7"
}
}
E fazer mais umas configs no arquivo turbo.json
{
"$schema": "https://turborepo.org/schema.json",
"tasks": {
"dev": {
"cache": false
},
"build": {
"outputs": [
"dist/**",
"storybook-static/**"
],
"dependsOn": [
"^build"
]
}
}
}
Link da documentação do Turborepo
Assim, quando eu executar o npm run dev principal, ele irá rodar todos os meus packages de uma vez só.
E não apenas isso como ele também guarda um cache da build para agilizar toda vez que vc rodar o script de build.
Entendendo o Storybook
O Storybook é uma ferramenta de desenvolvimento de código aberto usada principalmente para criar e documentar componentes de interface do usuário (UI) de forma isolada. Ele permite que os desenvolvedores visualizem e interajam com os componentes de uma aplicação em um ambiente controlado, separado do contexto geral da aplicação.
Aqui estão algumas maneiras pelas quais o Storybook é útil:
Desenvolvimento Isolado:
Os desenvolvedores podem trabalhar em componentes individuais sem precisar iniciar toda a aplicação. Isso acelera o desenvolvimento e facilita a depuração de problemas específicos do componente.
Documentação Automática:
O Storybook gera automaticamente uma documentação para os componentes, tornando mais fácil entender como usá-los e quais props (propriedades) eles aceitam.
Teste de Componentes:
Os desenvolvedores podem criar casos de teste para os componentes diretamente no Storybook, permitindo testar a funcionalidade e a aparência dos componentes de forma isolada.
Colaboração:
Como o Storybook cria uma visualização dos componentes acessível pela web, é fácil compartilhar o trabalho com colegas de equipe, designers e outros interessados no desenvolvimento do componente.
Consulte a documentação oficial em storybook.js.org