Ignite Call (Design System - Storybook)

6/7 projects of Ignite React specialization by @rocketseat-education: Project focused on build a design system and storybook. This design system will be used in the ignite call project.

Hosted at github pages: jemluz.github.io/ds-ignite-call

Requirements

• Tokens
• Button
• Heading
• Text
• TextInput
• Textarea
• Checkbox
• Avatar
• MultiStep

Technologies & Libraries used on this project

• 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 and Discussions

• The basis of a design system #1

  • Monorepos in npm
  • Deal with monorepo

• Design System in React #2

  • Entendendo o Storybook
  • Story: Button (general anatomy of a story)
  • Story: Button (adding props and improving intellisense)
  • Color documentation
  • Turborepo

• Design System components #3

  • Story: Text Input (understanding decorators)
  • Story: Checkbox (understanding data-state and stitches animations)
  • Story: Multi Step (another way to pass props)

• StoryBook Improvement #4

  • Components display names
  • Actions logs in componentes
  • Components controls
  • Accessibility addon

• Publishing and maintenance #4

  • Publishing StoryBook
  • Cache in GitHub Actions