Update storybook to v9 (#4645)

* chore: Update storybook to v9 * Pin next-export-i18n + remove outdated mock library * Replace old mocking library with MSW * Resolve knip unused code warnings
2025-10-20 21:26:32 -07:00
parent 72d5ee8754
commit cc9286416c
68 changed files with 40881 additions and 44059 deletions
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { ChatActionMessage } from './ChatActionMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-action.png';

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { ChatContainer } from './ChatContainer';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { ChatJoinMessage } from './ChatJoinMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-action.png';

@@ -1,23 +1,9 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
+import { http, HttpResponse } from 'msw';
 import { ChatModerationActionMenu } from './ChatModerationActionMenu';

-const mocks = {
-  mocks: [
-    {
-      // The "matcher" determines if this
-      // mock should respond to the current
-      // call to fetch().
-      matcher: {
-        name: 'response',
-        url: 'glob:/api/moderation/chat/user/*',
-      },
-      // If the "matcher" matches the current
-      // fetch() call, the fetch response is
-      // built using this "response".
-      response: {
-        status: 200,
-        body: {
+const mockUserData = {
          user: {
            id: 'hjFPU967R',
            displayName: 'focused-snyder',
@@ -57,17 +43,19 @@ const mocks = {
              body: 'test message 1',
            },
          ],
-        },
-      },
-    },
-  ],
-};
+        };

 const meta = {
  title: 'owncast/Chat/Moderation menu',
  component: ChatModerationActionMenu,
  parameters: {
-    fetchMock: mocks,
+    msw: {
+      handlers: [
+        http.get('/api/moderation/chat/user/*', () => {
+          return HttpResponse.json(mockUserData);
+        }),
+      ],
+    },
    docs: {
      description: {
        component: `This should be a popup that is activated from a user's chat message. It should have actions to:
@@ -1,23 +1,9 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
+import { http, HttpResponse } from 'msw';
 import { ChatModerationDetailsModal } from './ChatModerationDetailsModal';

-const mocks = {
-  mocks: [
-    {
-      // The "matcher" determines if this
-      // mock should respond to the current
-      // call to fetch().
-      matcher: {
-        name: 'response',
-        url: 'glob:/api/moderation/chat/user/*',
-      },
-      // If the "matcher" matches the current
-      // fetch() call, the fetch response is
-      // built using this "response".
-      response: {
-        status: 200,
-        body: {
+const mockUserData = {
          user: {
            id: 'hjFPU967R',
            displayName: 'focused-snyder',
@@ -57,17 +43,19 @@ const mocks = {
              body: 'test message 1',
            },
          ],
-        },
-      },
-    },
-  ],
-};
+        };

 const meta = {
  title: 'owncast/Chat/Moderation modal',
  component: ChatModerationDetailsModal,
  parameters: {
-    fetchMock: mocks,
+    msw: {
+      handlers: [
+        http.get('/api/moderation/chat/user/*', () => {
+          return HttpResponse.json(mockUserData);
+        }),
+      ],
+    },
    docs: {
      description: {
        component: `This should be a modal that gives the moderator more details about the user such as:
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { ChatModeratorNotification } from './ChatModeratorNotification';

 const meta = {
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { ChatNameChangeMessage } from './ChatNameChangeMessage';

 const meta = {
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { ChatPartMessage } from './ChatPartMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-action.png';

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { ChatSocialMessage } from './ChatSocialMessage';

 const meta = {
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { ChatSystemMessage } from './ChatSystemMessage';
 import Mock from '../../../stories/assets/mocks/chatmessage-system.png';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
@@ -1,37 +1,24 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
+import { http, HttpResponse } from 'msw';
 import { ChatTextField } from './ChatTextField';
 import Mockup from '../../../stories/assets/mocks/chatinput-mock.png';

 const mockResponse = JSON.parse(
  `[{"name":"Reaper-gg.png","url":"https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=OC"},{"name":"Reaper-hi.png","url":"https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=XX"},{"name":"Reaper-hype.png","url":"https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=TX"},{"name":"Reaper-lol.png","url":"https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=CA"},{"name":"Reaper-love.png","url":"https://ui-avatars.com/api/?background=0D8ABC&color=fff&name=OK"}]`,
 );
-const mocks = {
-  mocks: [
-    {
-      // The "matcher" determines if this
-      // mock should respond to the current
-      // call to fetch().
-      matcher: {
-        name: 'response',
-        url: 'glob:/api/emoji',
-      },
-      // If the "matcher" matches the current
-      // fetch() call, the fetch response is
-      // built using this "response".
-      response: {
-        status: 200,
-        body: mockResponse,
-      },
-    },
-  ],
-};

 const meta = {
  title: 'owncast/Chat/Input text field',
  component: ChatTextField,
  parameters: {
-    fetchMock: mocks,
+    msw: {
+      handlers: [
+        http.get('/api/emoji', () => {
+          return HttpResponse.json(mockResponse);
+        }),
+      ],
+    },
    chromatic: { diffThreshold: 0.9 },

    design: {
@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { ChatUserBadge } from './ChatUserBadge';
 import { ModerationBadge } from './ModerationBadge';
 import { AuthedUserBadge } from './AuthedUserBadge';
@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { ChatUserMessage } from './ChatUserMessage';
 import { ChatMessage } from '../../../interfaces/chat-message.model';