Skip to content

fix(storybook): resolve molecules layer rendering issues#240

Merged
raaymax merged 2 commits intodevfrom
fix/storybook-molecules-errors
Feb 1, 2026
Merged

fix(storybook): resolve molecules layer rendering issues#240
raaymax merged 2 commits intodevfrom
fix/storybook-molecules-errors

Conversation

@raaymax
Copy link
Owner

@raaymax raaymax commented Feb 1, 2026

Summary

Fixes Storybook configuration issues that were causing molecules and atoms stories to fail rendering. The pass rate improved from 0% to 97.5% (119/122 stories now render correctly).

Changes

Storybook Configuration

  • Add viteFinal config to .storybook/main.ts to inherit define (API_URL, APP_VERSION, APP_NAME) and resolve.alias settings from vite.config.ts
  • Fix emoji mock data in preview.tsx to use hex codes ("1F600") instead of Unicode characters ("😀")
  • Add missing channel mocks (toolbar-test, test, unknown-channel) to preview.tsx

Story Fixes

  • Fix TextMenu.stories.tsx import path: use InputContext from input.tsx instead of incorrect useInput.tsx
  • Convert MessageToolbar.stories.tsx and Reactions.stories.tsx from args to render pattern to ensure app.getMessages() is called at render time after loaders run
  • Remove duplicate AppProvider wrappers from DiscussionHeader, ChannelLink, and ButtonWithEmoji stories

Architectural Refactoring

  • Add useFileUrl hook for centralized URL generation
  • Add isUserActive utility function to utils.ts
  • Split LoggedUser into base component and connected wrapper (LoggedUserConnected)
  • Remove unnecessary observer wrappers from Files and NavUserButton components

New Stories

  • BaseButton.stories.tsx - Button variants and sizes
  • Wrap.stories.tsx - Flex wrap component
  • MessageBody.stories.tsx - Message formatting (bold, italic, code, etc.)

Dependencies

  • Update Storybook from v9.x to v10.2.3
  • Add playwright for headless story validation

Testing

  • Added check-storybook.mjs Playwright script for automated story validation
  • Run with node check-storybook.mjs (requires Storybook running on port 6006)
  • Verified 119/122 stories render without errors
  • 3 minor remaining issues (image corruption warning, empty src warning, HTML nesting in MessageBody emoji)

raaymax and others added 2 commits February 1, 2026 14:58
- Add viteFinal config to inherit define/alias from vite.config.ts
- Fix emoji mock data to use hex codes instead of Unicode characters
- Add missing channel mocks (toolbar-test, test, unknown-channel)
- Fix TextMenu.stories.tsx import path for InputContext
- Convert MessageToolbar and Reactions stories to render pattern
  to ensure loaders run before app.getMessages() is called
- Add useFileUrl hook and isUserActive utility
- Refactor LoggedUser to base/connected pattern
- Remove unnecessary observer wrappers from Files and NavUserButton
- Update Storybook deps to v10.2.3 and add playwright for testing
- Add check-storybook.mjs for automated story validation

Storybook pass rate improved from 0% to 97.5% (119/122 stories)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rename useFileUrl.ts to fileUrl.ts and functions to getFileUrl,
  getThumbnailUrl, getDownloadUrl (they're not React hooks)
- Extract magic number to ACTIVE_USER_THRESHOLD_MS constant in utils.ts
- Add proper TypeScript types to Attachments.stories.tsx
- Add proper TypeScript types to TextMenu.stories.tsx

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@raaymax raaymax merged commit e47c15b into dev Feb 1, 2026
1 check passed
@raaymax raaymax deleted the fix/storybook-molecules-errors branch February 1, 2026 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant