Add comprehensive Storybook stories for authentication components with Storybook 9 compatibility

[Copilot]

This PR implements comprehensive Storybook stories for all authentication-related components and pages, with proper Storybook 9.x compatibility by using Vitest mocking instead of the incompatible @storybook/test package.

📸 Screenshots

Sign In Component in Storybook:

Logout Component in Storybook:

✅ What was implemented

Component Stories (Auth/ section in Storybook)

1. AuthUI/SignIn Component (src/stories/components/auth/AuthUI.stories.tsx):

   • Default state with Google and GitHub sign-in buttons
   • Loading state during authentication
   • Error states (general error, network error, account exists error)
   • Buttons disabled state
   • Interactive controls for testing different props

2. Logout Component (src/stories/components/auth/Logout.stories.tsx):

   • Default logout button state
   • Loading state during logout process
   • Error state when logout fails
   • Success state after successful logout
   • Interactive controls for testing different scenarios

Page Stories (Pages/Auth/ section in Storybook)

3. Sign In Page (src/stories/pages/auth/SignInPage.stories.tsx):

   • Full page representation of /auth/login
   • Shows AuthUI component in page context

4. Sign Up Page (src/stories/pages/auth/SignUpPage.stories.tsx):

   • Full page representation of /auth/signup
   • Uses same AuthUI component (as both pages share the same implementation)

5. Logout Page (src/stories/pages/auth/LogoutPage.stories.tsx):

   • Full page representation of logout functionality

🔧 Technical Implementation

• Uses real authentication components (AuthUI, Logout) with proper Firebase auth state mocking
• Storybook 9 compatibility - Replaced @storybook/test with Vitest's vi.fn() for mocking to resolve version conflicts
• MSW integration for API mocking with proper handlers
• Added proper Storybook decorators for consistent dark theme styling
• Implemented interactive controls using Storybook's argTypes for testing different component states
• Firebase hooks mocking via react-firebase-hooks/auth.mock.ts and useFirebaseUser.mock.ts
• Added comprehensive documentation with descriptions for each story variant
• Ensured proper TypeScript types and component interfaces
• Verified build compatibility - all stories build successfully for production

🎯 Benefits

• Component isolation: Stories can be viewed and tested without Firebase setup
• State testing: Easy testing of loading, error, and success states
• Visual regression: Stories can be used with Chromatic for visual testing
• Documentation: Clear examples of how authentication components should look and behave
• Development workflow: Developers can iterate on UI without backend dependencies
• Storybook 9 compatibility: Resolved dependency conflicts for stable builds

📁 Files Added/Modified

src/stories/components/auth/
├── AuthUI.stories.tsx        # SignIn component stories
└── Logout.stories.tsx        # Logout component stories

src/stories/pages/auth/
├── SignInPage.stories.tsx    # Sign-in page story
├── SignUpPage.stories.tsx    # Sign-up page story
└── LogoutPage.stories.tsx    # Logout page story

src/hooks/
└── useFirebaseUser.mock.ts   # Updated to use vi.fn() from vitest

react-firebase-hooks/
└── auth.mock.ts              # Updated to use vi.fn() from vitest

package.json                  # Removed incompatible @storybook/test dependency

🐛 Build Fixes

• Resolved Storybook 9 compatibility: Replaced @storybook/test@8.x with Vitest mocking to work with storybook@9.x
• Clean dependency tree: Removed version conflicts that were causing build failures
• Verified builds: Both Next.js and Storybook builds pass successfully

Fixes #167.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
registry-web	Ready	Preview, Comment	May 15, 2026 4:22pm

[snomiao]

@copilot update branch and SOLVE CONFLICTS

[Copilot]

@copilot update branch and SOLVE CONFLICTS

Branch updated and conflicts resolved! Merged the latest changes from main including MSW setup while preserving all authentication stories. All builds and tests pass. 891b376

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

[snomiao]

remove the isolated components and use real component in storybook, but with mock auth state.

take ProfileDropdown.stories.tsx as ref

[Copilot]

remove the isolated components and use real component in storybook, but with mock auth state.

take ProfileDropdown.stories.tsx as ref

Completed! Removed isolated components (AuthUIStory.tsx, LogoutStory.tsx) and updated stories to use real auth components (AuthUI, Logout) with proper Firebase auth state mocking, following the same pattern as ProfileDropdown.stories.tsx. Added react-firebase-hooks/auth.mock.ts for Firebase hooks mocking and updated Storybook configuration accordingly. d58bdba

[snomiao]

solve CICD error

[Copilot]

solve CICD error

Fixed CICD error! The issue was that auth stories were directly importing and trying to mock Firebase hooks from react-firebase-hooks/auth, which don't have mockReturnValue methods during build time.

I removed the direct hook mocking from all auth stories and let the Storybook mock resolver handle the mocking automatically (similar to how ProfileDropdown works). Also added missing useAuthState export to the Firebase hooks mock.

All builds now pass successfully:

• ✅ Next.js build
• ✅ Storybook build
• ✅ Unit tests
• ✅ Linting

Changes in commit 2f1b56f

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: node /home/REDACTED/work/registry-web/registry-web/node_modules/.bin/storybook build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

[snomiao]

lets' redo this branch and respect to latest storybook folder structures

accept theirs when conflicts

[snomiao]

Fixed in commit 986b630. Removed the scripts/fix-storybook-paths.ts script and the post-build step from package.json. The path rewriting is now handled by Storybook's Vite configuration with base: '/_storybook/' in .storybook/main.ts:35.