[DevEx] Set Up Storybook for Component Development, Visual Testing, and Design Documentation

[KarenZita01]

Description

The frontend has no Storybook or component development environment. Components cannot be developed in isolation, making visual testing, documentation, and collaboration difficult. For a component library-driven architecture, Storybook is essential.

Storybook gaps:

• No Storybook installation or configuration
• No component stories for existing or planned components
• No interactive playground for component props
• No visual regression testing
• No accessibility testing in Storybook (axe addon)
• No component documentation with usage examples
• No MDX documentation for design guidelines
• No theme switching in Storybook (dark/light mode)

Technical Context & Impact

• Affected Components/Files: .storybook/ (missing), src/stories/ (missing)
• Impact: Poor component development experience; no visual regression testing

Step-by-Step Implementation Guide

1. Install Storybook: npx storybook@latest init with Next.js framework
2. Configure Storybook: .storybook/main.ts:
   • Auto-detect stories in src/components/**/*.stories.tsx
   • Add Next.js image loader configuration
   • Configure TailwindCSS and PostCSS support
3. Create Storybook decorators: .storybook/decorators.tsx:
   • ThemeDecorator - wraps story in both dark and light theme context
   • QueryDecorator - wraps story in React Query provider
   • AuthDecorator - wraps story in auth context with mock wallet
4. Write component stories: For each UI component:
   • Button.stories.tsx - all variants, sizes, states (loading, disabled, active)
   • Card.stories.tsx - with title, content, actions variants
   • Modal.stories.tsx - open, closed, with long content
   • Table.stories.tsx - empty, loading, with data, with error
   • Chart.stories.tsx - with sample data, no data, loading
5. Add accessibility addon: @storybook/addon-a11y showing axe violations in Storybook panel
6. Add interaction testing: @storybook/addon-interactions for component interaction tests
7. Add visual regression: @chromatic-com/storybook for visual diff in CI
8. Create design system documentation: MDX stories explaining design tokens, usage guidelines, and best practices
9. Export Storybook as static site: npm run build-storybook for deployment to GitHub Pages

Verification & Testing Steps

1. Run npm run storybook -> verify all stories render without errors
2. Navigate through component library -> verify all variants displayed
3. Test dark/light theme toggle -> components adapt correctly
4. Run a11y addon -> verify zero violations on all components
5. Run npm run build-storybook -- --test -> verify build succeeds
6. Test interaction: click button in story -> verify onClick fires and logs