CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Storybook #4

Merged
an.di merged 4 commits from adilallo/Storybook into main 2025-08-14 18:48:11 +00:00
Conversation 0 Commits 4 Files Changed 21
+5370 -159
an.di commented 2025-08-14 18:47:35 +00:00
Owner
Copy Link
Copy Source

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.
Screenshot 2025-08-14 at 12.46.51 PM.png
285 KiB
an.di added 4 commits 2025-08-14 18:47:36 +00:00
Storybook created acc572e6be
Revert "Storybook created" 4ef658a355 
This reverts commit acc572e6be.
Storybook responsive fix 79ae558b60
Fix viewport issue df7e2e1029
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.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#4
Delete Branch "adilallo/Storybook"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?