This PR introduces a Storybook component library for CommunityRule, providing an interactive development environment and living documentation for all UI components.
The setup integrates with Next.js and Vite, supports responsive viewport testing, accessibility auditing, and includes documentation for the header system components.
Changes
Added Storybook infrastructure with Next.js + Vite integration
Run npm run build-storybook and confirm a static build is generated for deployment.
Notes
Ready for dark mode integration in a future PR.
Supports future TypeScript migration.
Component coverage will expand beyond header system in subsequent PRs.
# Add Storybook Component Library
## Overview
This PR introduces a **Storybook component library** for CommunityRule, providing an interactive development environment and living documentation for all UI components.
The setup integrates with Next.js and Vite, supports responsive viewport testing, accessibility auditing, and includes documentation for the header system components.
## Changes
- Added **Storybook infrastructure** with Next.js + Vite integration
- Configured **custom viewports** matching project breakpoints (xsm → xl)
- Integrated **Tailwind CSS** with full design token support
- Enabled **accessibility auditing** with axe-core and a11y addon
- Added **Chromatic integration** for visual regression testing
- Configured **Storybook addons**: viewport, docs, vitest, accessibility
- Implemented **automatic documentation** with props tables and interactive controls
- Added **header system stories**:
- Header, HomeHeader, HeaderTab
- MenuBar, MenuBarItem
- Button, Avatar, AvatarContainer
- Logo, Footer
- Enabled **responsive testing** with viewport addon
- Integrated **unit testing** with Vitest setup for components
- Configured **ESLint + Prettier** for code quality enforcement
## Screenshots
<img width="1034" alt="Screenshot 2025-08-14 at 12.46.51 PM.png" src="attachments/09552b24-8b42-4293-b823-655dcc6d79f1">
## How to Test
1. Run `npm run storybook` and verify Storybook starts on port 6006.
2. Open stories for header system components (Header, MenuBar, Button, Avatar, Logo, Footer).
3. Confirm:
- Stories display correctly across **xsm, sm, md, lg, xl** viewports
- Props controls update components live
- Accessibility addon reports no WCAG violations
- Keyboard navigation and focus states work as expected
- Chromatic snapshots render consistently (if configured)
4. Run `npm run build-storybook` and confirm a static build is generated for deployment.
## Notes
- Ready for **dark mode** integration in a future PR.
- Supports **future TypeScript migration**.
- Component coverage will expand beyond header system in subsequent PRs.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Add Storybook Component Library
Overview
This PR introduces a Storybook component library for CommunityRule, providing an interactive development environment and living documentation for all UI components.
The setup integrates with Next.js and Vite, supports responsive viewport testing, accessibility auditing, and includes documentation for the header system components.
Changes
Screenshots
How to Test
npm run storybookand verify Storybook starts on port 6006.npm run build-storybookand confirm a static build is generated for deployment.Notes
adilallo/Storybookto Storybook