Skip to main content

Story 18.4: Storybook & Documentation

FieldValue
Story Points6
SprintSprint 80

User Story​

As a Developer
I want interactive documentation for all components
So that I can quickly find and use components correctly

Storybook Features​

  • Interactive component playground
  • Auto-generated docs from TypeScript
  • Dark mode toggle
  • Accessibility addon (a11y)
  • Figma design links
  • Controls for all props
  • Multiple story variants

Structure​

📁 Introduction
📁 Design Tokens
📁 Components
  ├── Buttons
  ├── Forms
  ├── Data Display
  ├── Navigation
  ├── Overlays
  └── Complex
📁 Patterns
  ├── List Page
  ├── Detail Page
  └── Form Page

Addons​

  • @storybook/addon-essentials
  • @storybook/addon-a11y
  • @storybook/addon-interactions
  • @storybook/addon-designs
  • storybook-dark-mode