diff --git a/.storybook/main.ts b/.storybook/main.ts index e7f7270185..98ce1928ed 100644 --- a/.storybook/main.ts +++ b/.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: '/' }], diff --git a/.storybook/preview.ts b/.storybook/preview.ts index e64a50168e..9d545ea267 100644 --- a/.storybook/preview.ts +++ b/.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 diff --git a/app/pages/about.stories.ts b/app/pages/about.stories.ts index adc719dbb9..f6a7133781 100644 --- a/app/pages/about.stories.ts +++ b/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 @@ -21,10 +24,4 @@ type Story = StoryObj export const Default: Story = {} /** Contributors section is hidden with no API response. */ -export const WithoutContributors: Story = { - parameters: { - msw: { - handlers: [], - }, - }, -} +export const WithoutContributors: Story = {} diff --git a/app/pages/leaderboard/likes.stories.ts b/app/pages/leaderboard/likes.stories.ts index 55cd0a0d59..937d5c98a5 100644 --- a/app/pages/leaderboard/likes.stories.ts +++ b/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 @@ -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 = {} diff --git a/app/pages/pds.stories.ts b/app/pages/pds.stories.ts index 421802ad5e..fb801022a3 100644 --- a/app/pages/pds.stories.ts +++ b/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 @@ -21,10 +24,4 @@ type Story = StoryObj 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 = {} diff --git a/app/pages/recharging.stories.ts b/app/pages/recharging.stories.ts index 912cd99a07..a9bb0144f3 100644 --- a/app/pages/recharging.stories.ts +++ b/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 @@ -21,10 +24,4 @@ type Story = StoryObj 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 = {} diff --git a/app/pages/settings.stories.ts b/app/pages/settings.stories.ts index 51212d478e..6399a391fa 100644 --- a/app/pages/settings.stories.ts +++ b/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 @@ -47,9 +47,4 @@ export const WithoutTranslationHelper: Story = { globals: { locale: 'fr-FR', }, - parameters: { - msw: { - handlers: [], - }, - }, } diff --git a/app/pages/translation-status.stories.ts b/app/pages/translation-status.stories.ts index 28ee091b2f..3b1faa7cbc 100644 --- a/app/pages/translation-status.stories.ts +++ b/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 @@ -21,10 +24,4 @@ type Story = StoryObj 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 = {} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b1d053d595..501c40cfc2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ catalogs: specifier: ^10.3.5 version: 10.5.5 msw-storybook-addon: - specifier: ^2.0.7 - version: 2.0.7 + specifier: ^3.0.0 + version: 3.0.0 storybook: specifier: ^10.3.1 version: 10.5.5 @@ -352,7 +352,7 @@ importers: version: 2.15.0(@types/node@24.13.3)(typescript-native-bridge@6.0.3-bridge.9.tsgo.7.0.2) msw-storybook-addon: specifier: catalog:storybook - version: 2.0.7(msw@2.15.0) + version: 3.0.0(msw@2.15.0)(storybook@10.5.5) rolldown: specifier: 1.2.1 version: 1.2.1 @@ -8567,10 +8567,12 @@ packages: ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} - msw-storybook-addon@2.0.7: - resolution: {integrity: sha512-TGmlxXy2TsaB6QcClVKRxqvay5f93xoLguHOihRFQ+gIEIyiyvcoQjkEeuOe7Y9qvddzGB1LyFomzPo9/EpnuQ==} + msw-storybook-addon@3.0.0: + resolution: {integrity: sha512-tyYmYAwSGcfFSHhrE5yzun/OXuVIkBGOt4YTsH5IR94N38F+hzZhvGqe5scu1ENJh/hOApI/8ZRQkWdFNFsKcw==} + hasBin: true peerDependencies: - msw: ^2.0.0 + msw: '>=2' + storybook: '>=9' msw@2.15.0: resolution: {integrity: sha512-2wQAmKkQKxRuXvYJxVhPGG0wZNBQyD06oJvxqw90XqLvptdqxdlHrFUfEteKkpaNORX3Xzc+HtEl/q0nfmN2wQ==} @@ -20339,10 +20341,10 @@ snapshots: ms@2.1.3: {} - msw-storybook-addon@2.0.7(msw@2.15.0): + msw-storybook-addon@3.0.0(msw@2.15.0)(storybook@10.5.5): dependencies: - is-node-process: 1.2.0 msw: 2.15.0(@types/node@24.13.3)(typescript-native-bridge@6.0.3-bridge.9.tsgo.7.0.2) + storybook: 10.5.5(@types/react@19.2.17)(prettier@3.9.4)(react@19.2.8)(vite-plus@0.2.7) msw@2.15.0(@types/node@24.13.3)(typescript-native-bridge@6.0.3-bridge.9.tsgo.7.0.2): dependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 811b5a01cf..3e11682bbc 100644 --- a/pnpm-workspace.yaml +++ b/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'