chore(deps): update pnpm.catalog.storybook msw-storybook-addon to v3

.storybook/main.ts

@@ -13,6 +13,7 @@ const config = {
     '@storybook/addon-docs',
     '@storybook/addon-themes',
     'storybook-i18n',
+    'msw-storybook-addon',
   ],
   framework: '@storybook-vue/nuxt',
   staticDirs: ['./.public', { from: '../public', to: '/' }],

.storybook/preview.ts

@@ -4,12 +4,10 @@ import { addons } from 'storybook/preview-api'
 import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
 import { ACCENT_COLORS } from '../shared/utils/constants'
-import { initialize, mswLoader } from 'msw-storybook-addon'
+import { mswLoader } from 'msw-storybook-addon/csf3'
 
 import npmxDark from './theme'
 
-initialize()
-
 // @ts-expect-error - dynamic global name
 globalThis.defineOgImage = fn()
 
@@ -95,7 +93,7 @@ const preview: Preview = {
       }
     },
   ],
-  loaders: [mswLoader],
+  loaders: [mswLoader()],
 }
 
 export default preview

app/pages/about.stories.ts

@@ -5,12 +5,15 @@ import { contributorsHandler } from '../storybook/mocks/handlers'
 
 const meta = {
   component: About,
+
+  beforeEach({ msw }) {
+    msw.use(contributorsHandler)
+  },
+
   parameters: {
     layout: 'fullscreen',
-    msw: {
-      handlers: [contributorsHandler],
-    },
   },
+
   decorators: [pageDecorator],
 } satisfies Meta<typeof About>
 
@@ -21,10 +24,4 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 
 /** Contributors section is hidden with no API response. */
-export const WithoutContributors: Story = {
-  parameters: {
-    msw: {
-      handlers: [],
-    },
-  },
-}
+export const WithoutContributors: Story = {}

app/pages/leaderboard/likes.stories.ts

@@ -9,12 +9,15 @@ import {
 
 const meta = {
   component: LikesLeaderboard,
+
+  beforeEach({ msw }) {
+    msw.use(likesLeaderboardHandler)
+  },
+
   parameters: {
     layout: 'fullscreen',
-    msw: {
-      handlers: [likesLeaderboardHandler],
-    },
   },
+
   decorators: [pageDecorator],
 } satisfies Meta<typeof LikesLeaderboard>
 
@@ -26,22 +29,14 @@ export const Default: Story = {}
 
 /** Exactly three entries returned — only the podium section is rendered, no remaining list below. */
 export const PodiumOnly: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('/api/leaderboard/likes', () =>
-          HttpResponse.json(likesLeaderboardEntries.slice(0, 3)),
-        ),
-      ],
-    },
+  beforeEach({ msw }) {
+    msw.use(
+      http.get('/api/leaderboard/likes', () =>
+        HttpResponse.json(likesLeaderboardEntries.slice(0, 3)),
+      ),
+    )
   },
 }
 
 /** Unavailable card is shown with no API response; `useFetch` falls back to its `default: () => []`. */
-export const WithoutEntries: Story = {
-  parameters: {
-    msw: {
-      handlers: [],
-    },
-  },
-}
+export const WithoutEntries: Story = {}

app/pages/pds.stories.ts

@@ -5,12 +5,15 @@ import { pdsUsersHandler } from '../storybook/mocks/handlers'
 
 const meta = {
   component: Pds,
+
+  beforeEach({ msw }) {
+    msw.use(pdsUsersHandler)
+  },
+
   parameters: {
     layout: 'fullscreen',
-    msw: {
-      handlers: [pdsUsersHandler],
-    },
   },
+
   decorators: [pageDecorator],
 } satisfies Meta<typeof Pds>
 
@@ -21,10 +24,4 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 
 /** Community section shows an empty/loading state with no API response. */
-export const WithoutUsers: Story = {
-  parameters: {
-    msw: {
-      handlers: [],
-    },
-  },
-}
+export const WithoutUsers: Story = {}

app/pages/recharging.stories.ts

@@ -5,12 +5,15 @@ import { repoStatsHandler } from '../storybook/mocks/handlers'
 
 const meta = {
   component: Recharging,
+
+  beforeEach({ msw }) {
+    msw.use(repoStatsHandler)
+  },
+
   parameters: {
     layout: 'fullscreen',
-    msw: {
-      handlers: [repoStatsHandler],
-    },
   },
+
   decorators: [pageDecorator],
 } satisfies Meta<typeof Recharging>
 
@@ -21,10 +24,4 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 
 /** Stats grid is hidden with no API response; the rest of the page renders normally. */
-export const WithoutStats: Story = {
-  parameters: {
-    msw: {
-      handlers: [],
-    },
-  },
-}
+export const WithoutStats: Story = {}

app/pages/settings.stories.ts

@@ -9,12 +9,12 @@ const meta = {
   globals: {
     locale: 'en-US',
   },
-  beforeEach: () => localStorage.removeItem('npmx-settings'),
+  beforeEach({ msw }) {
+    localStorage.removeItem('npmx-settings')
+    msw.use(i18nStatusHandler)
+  },
   parameters: {
     layout: 'fullscreen',
-    msw: {
-      handlers: [i18nStatusHandler],
-    },
   },
   decorators: [pageDecorator],
 } satisfies Meta<typeof Settings>
@@ -47,9 +47,4 @@ export const WithoutTranslationHelper: Story = {
   globals: {
     locale: 'fr-FR',
   },
-  parameters: {
-    msw: {
-      handlers: [],
-    },
-  },
 }

app/pages/translation-status.stories.ts

@@ -5,12 +5,15 @@ import { i18nStatusHandler } from '../storybook/mocks/handlers/lunaria-status'
 
 const meta = {
   component: TranslationStatus,
+
+  beforeEach({ msw }) {
+    msw.use(i18nStatusHandler)
+  },
+
   parameters: {
     layout: 'fullscreen',
-    msw: {
-      handlers: [i18nStatusHandler],
-    },
   },
+
   decorators: [pageDecorator],
 } satisfies Meta<typeof TranslationStatus>
 
@@ -21,10 +24,4 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 
 /** No API response — the fetch never succeeds so `fetchStatus` stays as `'pending'`. Shows skeleton blocks in the locale list and skeleton inlines in body text. */
-export const WithoutTranslationData: Story = {
-  parameters: {
-    msw: {
-      handlers: [],
-    },
-  },
-}
+export const WithoutTranslationData: Story = {}

pnpm-workspace.yaml

@@ -24,7 +24,7 @@ catalogs:
     '@storybook/addon-a11y': '^10.3.5'
     '@storybook/addon-docs': '^10.3.5'
     '@storybook/addon-themes': '^10.3.5'
-    'msw-storybook-addon': '^2.0.7'
+    'msw-storybook-addon': '^3.0.0'
     'storybook': '^10.3.1'
     'storybook-i18n': '^10.1.1'