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

web/components/action-buttons/ActionButton/ActionButton.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { StoryFn, Meta } from '@storybook/nextjs';
+import { action } from 'storybook/actions';
 import { ActionButton } from './ActionButton';
 
 const meta = {

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { StoryFn, Meta } from '@storybook/nextjs';
+import { action } from 'storybook/actions';
 import { ActionButtonMenu } from './ActionButtonMenu';
 
 const meta = {

web/components/action-buttons/ActionButtonRow/ActionButtonRow.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { StoryFn, Meta } from '@storybook/nextjs';
+import { action } from 'storybook/actions';
 import { ActionButtonRow } from './ActionButtonRow';
 import { ActionButton } from '../ActionButton/ActionButton';
 

web/components/chat/ChatActionMessage/ChatActionMessage.stories.tsx

@@ -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';
 

web/components/chat/ChatContainer/ChatContainer.stories.tsx

@@ -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';

web/components/chat/ChatJoinMessage/ChatJoinMessage.stories.tsx

@@ -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';
 

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.stories.tsx

@@ -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:

web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.stories.tsx

@@ -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:

web/components/chat/ChatModeratorNotification/ChatModeratorNotification.stories.tsx

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

web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.stories.tsx

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

web/components/chat/ChatPartMessage/ChatPartMessage.stories.tsx

@@ -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';
 

web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx

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

web/components/chat/ChatSystemMessage/ChatSystemMessage.stories.tsx

@@ -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';

web/components/chat/ChatTextField/ChatTextField.stories.tsx

@@ -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: {

web/components/chat/ChatUserBadge/ChatUserBadge.stories.tsx

@@ -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';

web/components/chat/ChatUserMessage/ChatUserMessage.stories.tsx

@@ -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';

web/components/common/ContentHeader/ContentHeader.stories.tsx

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

web/components/common/OwncastLogo/OwncastLogo.stories.tsx

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

web/components/common/UserDropdown/UserDropdown.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { UserDropdown } from './UserDropdown';
 import { CurrentUser } from '../../../interfaces/current-user';

web/components/layouts/Main/Main.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Meta, StoryFn, StoryObj } from '@storybook/nextjs';
 import { MutableSnapshot, RecoilRoot } from 'recoil';
 import { makeEmptyClientConfig } from '../../../interfaces/client-config.model';
 import { ServerStatus, makeEmptyServerStatus } from '../../../interfaces/server-status.model';
@@ -129,20 +129,22 @@ export const OfflineMobile: StoryObj<typeof Template> = {
     },
   },
 
-  parameters: {
+  globals: {
     viewport: {
-      defaultViewport: 'mobile1',
-    },
+      value: 'mobile1',
+      isRotated: false
+    }
   },
 };
 
 export const OfflineTablet: StoryObj<typeof Template> = {
   render: Template,
 
-  parameters: {
+  globals: {
     viewport: {
-      defaultViewport: 'tablet',
-    },
+      value: 'tablet',
+      isRotated: false
+    }
   },
 };
 
@@ -168,10 +170,11 @@ export const OnlineMobile: StoryObj<typeof Template> = {
     },
   },
 
-  parameters: {
+  globals: {
     viewport: {
-      defaultViewport: 'mobile1',
-    },
+      value: 'mobile1',
+      isRotated: false
+    }
   },
 };
 
@@ -182,9 +185,10 @@ export const OnlineTablet: StoryObj<typeof Template> = {
     ServerStatusServiceMock: OnlineServerStatusServiceMock,
   },
 
-  parameters: {
+  globals: {
     viewport: {
-      defaultViewport: 'tablet',
-    },
+      value: 'tablet',
+      isRotated: false
+    }
   },
 };

web/components/modals/AuthModal/AuthModal.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { AuthModal } from './AuthModal';
 import { currentUserAtom } from '../../stores/ClientConfigStore';

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { BrowserNotifyModal } from './BrowserNotifyModal';
 import BrowserNotifyModalMock from '../../../stories/assets/mocks/notify-modal.png';

web/components/modals/ChatModal/ChatModal.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { ChatModal, ChatModalProps } from './ChatModal';
 import { ChatMessage } from '../../../interfaces/chat-message.model';

web/components/modals/FatalErrorStateModal/FatalErrorStateModal.stories.tsx

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

web/components/modals/FediAuthModal/FediAuthModal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { FediAuthModal } from './FediAuthModal';
 import FediAuthModalMock from '../../../stories/assets/mocks/fediauth-modal.png';
 

web/components/modals/FollowModal/FollowModal.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { FollowModal } from './FollowModal';
 import FollowModalMock from '../../../stories/assets/mocks/follow-modal.png';
 

web/components/modals/IndieAuthModal/IndieAuthModal.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { IndieAuthModal } from './IndieAuthModal';
 import Mock from '../../../stories/assets/mocks/indieauth-modal.png';
 

web/components/modals/NameChangeModal/NameChangeModal.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { NameChangeModal } from './NameChangeModal';
 import { CurrentUser } from '../../../interfaces/current-user';

web/components/ui/ComponentError/ComponentError.stories.tsx

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

web/components/ui/CustomPageContent/CustomPageContent.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-useless-escape */
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { CustomPageContent } from './CustomPageContent';
 

web/components/ui/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { Footer } from './Footer';
 

web/components/ui/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { Header } from './Header';
 

web/components/ui/Modal/Modal.stories.tsx

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

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-alert */
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { NotifyReminderPopup } from './NotifyReminderPopup';
 import Mock from '../../../stories/assets/mocks/notify-popup.png';
 

web/components/ui/OfflineBanner/OfflineBanner.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { OfflineBanner } from './OfflineBanner';
 import OfflineState from '../../../stories/assets/mocks/offline-state.png';

web/components/ui/OfflineEmbed/OfflineEmbed.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { OfflineEmbed } from './OfflineEmbed';
 import OfflineState from '../../../stories/assets/mocks/offline-state.png';

web/components/ui/SocialLinks/SocialLinks.stories.tsx

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

web/components/ui/Statusbar/StatusBar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { subHours, subMinutes, subSeconds } from 'date-fns';
 import { Statusbar } from './Statusbar';
 

web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx

@@ -1,24 +1,9 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
-import { action } from '@storybook/addon-actions';
+import { http, HttpResponse } from 'msw';
 import { FollowerCollection } from './FollowerCollection';
 
-const mocks = {
-  mocks: [
-    {
-      // The "matcher" determines if this
-      // mock should respond to the current
-      // call to fetch().
-      matcher: {
-        name: 'response',
-        url: 'glob:/api/followers*',
-      },
-      // If the "matcher" matches the current
-      // fetch() call, the fetch response is
-      // built using this "response".
-      response: {
-        status: 200,
-        body: {
+const mockFollowersData = {
           total: 100,
           results: [
             {
@@ -227,34 +212,11 @@ const mocks = {
               disabledAt: null,
             },
           ],
-        },
-      },
-    },
-  ],
-};
+        };
 
-const noFollowersMock = {
-  mocks: [
-    {
-      // The "matcher" determines if this
-      // mock should respond to the current
-      // call to fetch().
-      matcher: {
-        name: 'response',
-        url: 'glob:/api/followers*',
-      },
-      // If the "matcher" matches the current
-      // fetch() call, the fetch response is
-      // built using this "response".
-      response: {
-        status: 200,
-        body: {
-          total: 0,
-          results: [],
-        },
-      },
-    },
-  ],
+const noFollowersData = {
+  total: 0,
+  results: [],
 };
 
 const meta = {
@@ -270,9 +232,7 @@ export default meta;
 const Template: StoryFn<typeof FollowerCollection> = (args: object) => (
   <RecoilRoot>
     <FollowerCollection
-      onFollowButtonClick={() => {
-        action('Follow button clicked');
-      }}
+      onFollowButtonClick={() => {}}
       name="Example stream name"
       {...args}
     />
@@ -283,7 +243,13 @@ export const NoFollowers = {
   render: Template,
 
   parameters: {
-    fetchMock: noFollowersMock,
+    msw: {
+      handlers: [
+        http.get('/api/followers*', () => {
+          return HttpResponse.json(noFollowersData);
+        }),
+      ],
+    },
   },
 };
 
@@ -291,6 +257,12 @@ export const Example = {
   render: Template,
 
   parameters: {
-    fetchMock: mocks,
+    msw: {
+      handlers: [
+        http.get('/api/followers*', () => {
+          return HttpResponse.json(mockFollowersData);
+        }),
+      ],
+    },
   },
 };

web/components/ui/followers/SingleFollower/SingleFollower.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import { SingleFollower } from './SingleFollower';
 import SingleFollowerMock from '../../../../stories/assets/mocks/single-follower.png';
 

web/components/video/OwncastPlayer/OwncastPlayer.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot } from 'recoil';
 import { OwncastPlayer } from './OwncastPlayer';
 

web/components/video/VideoPoster/VideoPoster.stories.tsx

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