Merge pull request #448 from DialmasterOrg/fix/storybook-msw-worker-setup

fix: Storybook failing to load/update docs

Author: dialmaster

client/.storybook/main.js

@@ -6,6 +6,7 @@ const config = {
     '../src/**/__tests__/**/*.story.@(js|jsx|mjs|ts|tsx|mdx)',
   ],
   addons: ['@storybook/addon-a11y', '@storybook/addon-links'],
+  staticDirs: ['../public'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

client/package-lock.json

@@ -28,6 +28,7 @@
     "typescript": "5.9.3"
   },
   "scripts": {
+    "postinstall": "npx msw init public/ --save",
     "dev": "vite",
     "start": "vite",
     "build": "vite build",

client/package.json

@@ -16,6 +16,13 @@ const meta: Meta<typeof ChannelManager> = {
   parameters: {
     layout: 'fullscreen',
   },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 
 export default meta;

client/src/components/__tests__/ChannelManager.story.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within, waitFor } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
+import { MemoryRouter } from 'react-router-dom';
 import VideosPage from '../VideosPage';
 
 const meta: Meta<typeof VideosPage> = {
@@ -13,6 +14,13 @@ const meta: Meta<typeof VideosPage> = {
   parameters: {
     layout: 'fullscreen',
   },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 
 export default meta;

client/src/components/__tests__/VideosPage.story.tsx

@@ -114,12 +114,19 @@ The Vite dev server will proxy API and WebSocket requests to the backend at port
 
 Use Storybook to develop and document components in isolation.
 
+**Prerequisites:** Complete Step 2 (Build Development Environment) first, or at minimum install client dependencies:
+```bash
+cd client && npm install
+```
+
+This automatically generates the MSW (Mock Service Worker) file needed for API mocking in stories.
+
 ```bash
 # Start Storybook Server
 npm run storybook
 ```
 
-Storybook runs on http://localhost:6006. Story validation is done via Jest tests (see `client/src/tests/storybook_coverage.test.js`).
+Storybook will open automatically in your browser. Story validation is done via Jest tests (see `client/src/tests/storybook_coverage.test.js`).
 
 ### 6. Access the Application