[UI/UX Design] Set up Storybook to document Text, Button, StatusChip and design tokens

[1nonlypiece]

[UI/UX Design] Set up Storybook to document Text, Button, StatusChip and design tokens

Description

The repo has a design-system package with token JSON and shared components (Text, planned Button/StatusChip) but no interactive component catalogue. This issue introduces Storybook to document components and visualize tokens from design-system/tokens, giving designers and engineers a single reference.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Configure Storybook for the Vite + React + TypeScript stack
• Add stories for Text roles and token swatches (colors/spacing/typography)
• Wire the ThemeContext so stories render in light and dark
• Add an npm run storybook script to package.json

Suggested execution

• Fork the repo and create a branch
• git checkout -b chore/storybook-setup
• Implement changes
  • Add .storybook config and src/components/*.stories.tsx
  • Write a smoke test that stories render without error
  • Document the Storybook workflow in README and design-system/documentation
  • Verify token swatches reflect both themes
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

chore: add Storybook for components and design tokens

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours