Ignite Call (Design System - Storybook)

Projeto focado em aprofundar os conhecimentos em design system e storybook. Esse design system será utiliado no projeto ignite call.

Requisitos

• [x] Tokens
• [x] Button
• [x] Heading
• [x] Text
• [x] TextInput
• [x] Textarea
• [x] Checkbox
• [x] Avatar
• [x] MultiStep

Tecnologias e bibliotecas

• StoryBook (Components documentation)
• TurboRepo (Multi package build optimization)
• Stitches (Styling)
• ReactJS (Components)
• Changesets (Multi package version management)
• TSup (Prepare single Packages For Build, to support vanilla and ecmaScript clients)
• Phosphor Icons (Icons library)
• Radix UI (Component library)

Issues com tópicos discutidos/estudados no projeto

• A base de um design system #1

  • Monorepos no npm
  • Lidando com monorepo

• Design System em React #2

  • Entendendo o Storybook
  • Story: Button (anatomia geral de um storie)
  • Story: Button (adicionando props e melhorando o intelisense)
  • Documentação de cores
  • Turborepo

• Componentes do design system #3

  • Story: Text Input (entendendo decorators)
  • Story: Checkbox (entendendo data-state e animações no stitches)
  • Story: Multi Step (outro jeito de passar props)

• Melhorias no StoryBook #4

  • Display names dos componentes
  • Logs de ações nos componentes
  • Controles nos componentes
  • Addon de acessibilidade

• Publicação e manutenção #4

  • Publicando StoryBook
  • Cache no GitHub Actions