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/.eslintignore

@@ -3,3 +3,6 @@ node_modules
 out
 ../static/web
 public/styles/admin/config-public-details.css
+
+# Ignore Storybook files during Next.js builds
+**/*.stories.*

web/.knip.json

@@ -22,7 +22,6 @@
 		"sharp",
 		"workbox-precaching",
 		"workbox-window",
-		"@storybook/addon-postcss",
 		"@storybook/cli",
 		"@storybook/mdx2-csf",
 		"@mdx-js/react",
@@ -37,20 +36,15 @@
 		"install",
 		"mdx-mermaid",
 		"mermaid",
-		"storybook-preset-less",
 		"ts-jest",
 		"stylelint-config-standard",
 		"@babel/core",
 		"npm",
 		"eslint-config-next",
-		"@storybook/addon-postcss",
-		"@storybook/cli",
-		"@storybook/mdx2-csf",
 		"@commitlint/cli",
 		"@commitlint/config-conventional",
 		"babel-plugin-dynamic-import-node",
 		"@babel/preset-react",
-		"@babel/core",
 		"i18next-scanner",
 		"@types/video.js",
 		"@testing-library/jest-dom",
@@ -58,6 +52,8 @@
 		"jest-environment-jsdom",
 		"@babel/parser",
 		"@babel/traverse",
-		"glob"
+		"glob",
+		"style-loader",
+		"css-loader"
 	]
 }

web/.storybook/main.js

@@ -7,93 +7,8 @@ module.exports = {
 
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/preset-scss',
     '@storybook/addon-a11y',
-    'storybook-addon-fetch-mock',
+    '@storybook/addon-docs'
-    '@storybook/addon-mdx-gfm',
-    '@storybook/addon-styling-webpack',
-    {
-      name: '@storybook/addon-styling-webpack',
-
-      options: {
-        rules: [
-          {
-            test: /\.css$/,
-            sideEffects: true,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
-                  modules: {
-                    auto: true,
-                  },
-                },
-              },
-            ],
-          },
-          {
-            test: /\.s[ac]ss$/,
-            sideEffects: true,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
-                  modules: {
-                    auto: true,
-		    namedExport: false,
-                  },
-                  importLoaders: 2,
-                },
-              },
-              require.resolve('resolve-url-loader'),
-              {
-                loader: require.resolve('sass-loader'),
-                options: {
-                  // Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
-                  implementation: require.resolve('sass'),
-                  sourceMap: true,
-                  sassOptions: {},
-                },
-              },
-            ],
-          },
-          {
-            test: /\.less$/,
-            sideEffects: true,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
-                  modules: {
-                    auto: true,
-                  },
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve('less-loader'),
-                options: {
-                  // Want to add more Less options? Read more here: https://webpack.js.org/loaders/less-loader/#options
-                  implementation: require.resolve('less'),
-                  sourceMap: true,
-                  lessOptions: {
-                    javascriptEnabled: true,
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      },
-    },
-    '@chromatic-com/storybook'
   ],
 
   webpackFinal: async (config, { configType }) => {
@@ -107,6 +22,23 @@ module.exports = {
       use: ['@svgr/webpack'],
     });
 
+    // Configure LESS loader for Ant Design
+    config.module.rules.push({
+      test: /\.less$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'less-loader',
+          options: {
+            lessOptions: {
+              javascriptEnabled: true,
+            },
+          },
+        },
+      ],
+    });
+
     return config;
   },
 

web/.storybook/preview.js

@@ -2,10 +2,11 @@ import '../styles/variables.css';
 import '../styles/global.less';
 import '../styles/theme.less';
 import './preview.scss';
-import { themes } from '@storybook/theming';
+import { themes } from 'storybook/theming';
 import { DocsContainer } from './storybook-theme';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 import _ from 'lodash';
+import { initialize, mswLoader } from 'msw-storybook-addon';
 
 /**
  * Takes an entry of a viewport (from Object.entries()) and converts it
@@ -13,8 +14,8 @@ import _ from 'lodash';
  *
  * @template {string} Key
  *
- * @param {[Key, import('@storybook/addon-viewport/dist/ts3.9/models').Viewport]} entry
+ * @param {[Key, import('storybook/viewport/dist/ts3.9/models').Viewport]} entry
- * @returns {Array<[`${Key}${'Portrait' | 'Landscape'}`, import('@storybook/addon-viewport/dist/ts3.9/models').Viewport]>}
+ * @returns {Array<[`${Key}${'Portrait' | 'Landscape'}`, import('storybook/viewport/dist/ts3.9/models').Viewport]>}
  */
 const convertToLandscapeAndPortraitEntries = ([objectKey, viewport]) => {
   const pixelStringToNumber = str => parseInt(str.split('px')[0]);
@@ -67,15 +68,14 @@ const convertToLandscapeAndPortraitEntries = ([objectKey, viewport]) => {
  */
 const flatMapObject = (obj, f) => Object.fromEntries(Object.entries(obj).flatMap(f));
 
+// Initialize MSW
+initialize();
+
 export const parameters = {
-  fetchMock: {
-    mocks: [],
-  },
   // actions: { argTypesRegex: '^on[A-Z].*' },
   docs: {
     container: DocsContainer,
   },
-  // actions: { argTypesRegex: '^on[A-Z].*' },
   viewMode: 'docs',
   controls: {
     matchers: {
@@ -99,8 +99,8 @@ export const parameters = {
     light: { ...themes.normal },
   },
   viewport: {
-    // Take a bunch of viewports from the storybook addon and convert them
-    // to portrait + landscape. Keys are appended with 'Landscape' or 'Portrait'.
     viewports: flatMapObject(INITIAL_VIEWPORTS, convertToLandscapeAndPortraitEntries),
   },
 };
+
+export const loaders = [mswLoader];

web/.storybook/stories-category-doc-pages/Design.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
 

web/.storybook/stories-category-doc-pages/Development.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
 

web/.storybook/stories-category-doc-pages/Emoji.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
 import { Image, ImageRow } from './ImageAsset';
 
 <Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />

web/.storybook/stories-category-doc-pages/Images.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs/blocks';
 
 <Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
 

web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { Image, ImageRow } from './ImageAsset';
 
 <Meta

web/.storybook/stories-category-doc-pages/ProductDefinition.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
 

web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs/blocks';
 
 <Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
 

web/.storybook/stories-category-doc-pages/Tshirt.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { Image, ImageRow } from './ImageAsset';
 
 <Meta title="owncast/Project Assets/T-Shirt" parameters={{chromatic: { disableSnapshot: true }}} />

web/.storybook/stories-category-doc-pages/Typography.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Typeset, Source } from '@storybook/blocks';
+import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs/blocks';
 
 <Meta
   title="owncast/Styles/Typography"

web/.storybook/stories-category-doc-pages/WebComponents.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
 

web/.storybook/stories-category-doc-pages/colors/ComponentColors.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
+import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
 import { ColorRow, getColor } from './Color';
 
 <Meta

web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/blocks';
+import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs/blocks';
 import { ColorRow, getColor } from './Color';
 
 <Meta

web/.storybook/stories-category-doc-pages/colors/UserColors.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
+import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
 import { ColorRow, getColor } from './Color';
 
 <Meta

web/.storybook/storybook-theme.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
-import { themes } from '@storybook/theming';
+import { themes } from 'storybook/theming';
 
 export const DocsContainer = ({ children, context }) => {
   return (

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

@@ -1,5 +1,5 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
-import { action } from '@storybook/addon-actions';
+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 { StoryFn, Meta } from '@storybook/nextjs';
-import { action } from '@storybook/addon-actions';
+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 { StoryFn, Meta } from '@storybook/nextjs';
-import { action } from '@storybook/addon-actions';
+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 = {
+const mockUserData = {
-  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: {
           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 = {
+const mockUserData = {
-  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: {
           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 = {
+const mockFollowersData = {
-  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: 100,
           results: [
             {
@@ -227,34 +212,11 @@ const mocks = {
               disabledAt: null,
             },
           ],
-        },
+        };
-      },
-    },
-  ],
-};
 
-const noFollowersMock = {
+const noFollowersData = {
-  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 meta = {
@@ -270,9 +232,7 @@ export default meta;
 const Template: StoryFn<typeof FollowerCollection> = (args: object) => (
   <RecoilRoot>
     <FollowerCollection
-      onFollowButtonClick={() => {
+      onFollowButtonClick={() => {}}
-        action('Follow button clicked');
-      }}
       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 = {

web/package.json

@@ -43,6 +43,7 @@
     "chart.js": "^4.2.0",
     "classnames": "2.5.1",
     "date-fns": "^4.0.0",
+    "emoji-mart": "^5.2.2",
     "glob": "^11.0.3",
     "graphemer": "^1.4.0",
     "i18next-scanner": "^4.6.0",
@@ -50,7 +51,7 @@
     "interweave-autolink": "^5.1.0",
     "lodash": "4.17.21",
     "next": "14.2.33",
-		"next-export-i18n": "^2.0.0",
+    "next-export-i18n": "2.3.5",
     "next-pwa": "^5.6.0",
     "next-with-less": "3.0.1",
     "postcss-flexbugs-fixes": "5.0.2",
@@ -80,21 +81,12 @@
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@mdx-js/react": "3.1.1",
-		"@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-a11y": "^9.1.13",
-		"@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-docs": "^9.1.13",
-		"@storybook/addon-docs": "^8.3.6",
+    "@storybook/addon-links": "^9.1.13",
-		"@storybook/addon-essentials": "^8.3.6",
+    "@storybook/cli": "^9.1.13",
-		"@storybook/addon-links": "^8.3.6",
-		"@storybook/addon-mdx-gfm": "^8.3.6",
-		"@storybook/addon-postcss": "2.0.0",
-		"@storybook/addon-styling-webpack": "^1.0.0",
-		"@storybook/addon-viewport": "^8.3.6",
-		"@storybook/cli": "^8.3.6",
     "@storybook/mdx2-csf": "1.1.0",
-		"@storybook/nextjs": "^8.3.6",
+    "@storybook/nextjs": "^9.1.13",
-		"@storybook/preset-scss": "^1.0.3",
-		"@storybook/react": "^8.3.6",
-		"@storybook/theming": "^8.3.6",
     "@svgr/webpack": "8.1.0",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
@@ -121,7 +113,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "4.6.2",
-		"eslint-plugin-storybook": "0.12.0",
+    "eslint-plugin-storybook": "9.1.13",
     "handlebars": "^4.7.7",
     "html-webpack-plugin": "5.6.4",
     "install": "^0.13.0",
@@ -131,15 +123,13 @@
     "less-loader": "12.3.0",
     "mdx-mermaid": "^2.0.0",
     "mermaid": "^11.10.0",
+    "msw": "^2.11.6",
+    "msw-storybook-addon": "^2.0.6",
     "npm": "^11.0.0",
     "postcss": "^8.4.31",
     "prettier": "3.5.3",
-		"resolve-url-loader": "^5.0.0",
     "sass": "1.93.2",
-		"sass-loader": "^16.0.0",
+    "storybook": "^9.1.13",
-		"storybook": "^8.3.6",
-		"storybook-addon-fetch-mock": "^2.0.1",
-		"storybook-preset-less": "1.1.3",
     "style-dictionary": "3.9.2",
     "style-loader": "4.0.0",
     "stylelint": "^16.0.0",
@@ -152,5 +142,10 @@
     "@emoji-mart/react": {
       "emoji-mart": "5.2.2"
     }
+  },
+  "msw": {
+    "workerDirectory": [
+      "public/"
+    ]
   }
 }

web/public/mockServiceWorker.js

@@ -0,0 +1,349 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.11.6'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}

web/stories/PageLogo.stories.tsx

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

web/stories/ReadonlyChat.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 ReadOnlyPage from '../pages/embed/chat/readonly/index';
 import { ChatMessage } from '../interfaces/chat-message.model';

web/stories/ReadwriteChat.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/nextjs';
 import { RecoilRoot, useRecoilState, useSetRecoilState } from 'recoil';
 import ReadWritePage from '../pages/embed/chat/readwrite/index';
 import { ChatMessage } from '../interfaces/chat-message.model';

web/stories/Translation.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/nextjs';
 import { Translation } from '../components/ui/Translation/Translation';
 import { Localization } from '../types/localization';
 

web/stories/config-federation.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/nextjs';
 import ConfigFederation from '../pages/admin/config-federation';
 
 const meta = {