Design System em React

[jemluz]

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

[jemluz]

Story: Button

Para criar qualquer componente no storybook, devemos fazer isso dentro da pasta stories, utilizando sempre a extensão .stories.tsx

Uma vez criado o arquivo .stories , você irá seguir o seguinte padrão:

• 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)

Ao rodar o storyBook, o documento irá corresponder ao seu arquivo .stories

O button com o ícone expansível é o modelo padrão, e dentro dele estão organizados as variações desse modelo

[jemluz]

Story: Button (adicionando props e melhorando o intelisense)

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

[jemluz]

Documentação de cores

Temos 2 formas de criar documentações no storybook

• A primeira (ja vimos acima) é no formato typescript .tsx
• E a segunda é no formato .mdx (que é um .md + .xml)

Nos arquivos .mdx, cada / no atributo title será igual a um novo subnível no storybook

[jemluz]

Turborepo

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.