[Frontend] Set up Storybook for component documentation and visual regression testing

[Penielka]

Description

The frontend has many reusable components but no visual documentation or isolated development environment. Storybook should be set up to document all shared components, support visual regression testing, and serve as a living style guide.

Definition of Done

• Storybook 8.x installed and configured for Next.js + Tailwind
• Stories written for all shared UI components (Button, Card, Badge, Skeleton, etc.)
• Stories written for form components (Input, Select, Checkbox, etc.)
• Stories written for composite components (Quiz, Enrollment, Dashboard, etc.)
• Storybook builds in CI and deploys to GitHub Pages or Chromatic
• Stories include all component states: default, hover, focus, disabled, loading, error, empty
• Dark mode toggle in Storybook toolbar
• Documentation pages for design tokens and usage guidelines

Acceptance Criteria

1. npm run storybook starts Storybook on port 6006
2. All shared components have at least one story
3. Stories cover all visual states of each component
4. Storybook builds without errors in CI

Files to Modify

• frontend/package.json — add storybook and related dependencies + scripts
• New file: frontend/.storybook/main.ts — Storybook config
• New file: frontend/.storybook/preview.ts — global decorators
• New file: frontend/src/components/ui/button.stories.tsx — example stories
• New file: frontend/src/components/ui/card.stories.tsx
• New file: frontend/src/components/ui/badge.stories.tsx
• New file: frontend/src/components/Skeleton.stories.tsx
• New file: frontend/src/components/ErrorBoundary.stories.tsx
• Multiple story files for other components
• .github/workflows/ci.yml — add Storybook build step

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.
My PR will be submitted in under 10hours.

[clintjeff2]

Hello, I have 6 years of experience working on tasks like this and handling similar challenges across backend, frontend, and smart-contract development. I have carefully read and fully understood the task requirements, and I am confident I can deliver a clean, efficient, and well-tested solution promptly. I always ensure high-quality implementation, maintainability, and adherence to best practices.

Pull request in 5 hours.