Storybook #4

Merged
an.di merged 4 commits from adilallo/Storybook into main 2025-08-14 18:48:11 +00:00
Owner

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

Screenshot 2025-08-14 at 12.46.51 PM.png

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.
# 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.
an.di added 4 commits 2025-08-14 18:47:36 +00:00
an.di self-assigned this 2025-08-14 18:47:51 +00:00
an.di merged commit 091eb21dda into main 2025-08-14 18:48:11 +00:00
an.di deleted branch adilallo/Storybook 2025-08-14 18:48:20 +00:00
an.di changed title from adilallo/Storybook to Storybook 2025-08-14 20:49:07 +00:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#4