Reapply "Update to storybook 10"

frontend/.storybook/preview.tsx

@@ -300,23 +300,33 @@ export default {
   parameters: {
     nextIntl,
     mockingDate: new Date(2024, 0, 1),
+
     viewport: {
-      viewports: {
+      options: {
         small: { name: "Small", styles: { width: "640px", height: "800px" } },
         large: { name: "Large", styles: { width: "1024px", height: "1000px" } },
       },
     },
+
     backgrounds: {
-      values: [
-        { name: "light", value: "#fafafa" },
-        { name: "dark", value: "#251f32" },
-      ],
+      options: {
+        light: { name: "light", value: "#fafafa" },
+        dark: { name: "dark", value: "#251f32" },
+      },
     },
+
     chromatic: {
       modes: {
         dark: allModes["dark"],
       },
     },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
   },
   loaders: [mswLoader],
   decorators: [

frontend/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

frontend/package.json

@@ -81,17 +81,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^5.0.0",
     "@eslint/js": "^9.39.2",
     "@faker-js/faker": "^10.0.0",
     "@fortedigital/nextjs-cache-handler": "2.3.1",
-    "@storybook/addon-a11y": "^9.1.15",
-    "@storybook/addon-docs": "^9.1.15",
-    "@storybook/addon-links": "^9.1.15",
-    "@storybook/addon-onboarding": "^9.1.15",
-    "@storybook/addon-themes": "^9.1.15",
-    "@storybook/addon-vitest": "^9.1.15",
-    "@storybook/nextjs-vite": "^9.1.15",
+    "@storybook/addon-a11y": "^10.2.0",
+    "@storybook/addon-docs": "^10.2.0",
+    "@storybook/addon-links": "^10.2.0",
+    "@storybook/addon-onboarding": "^10.2.0",
+    "@storybook/addon-themes": "^10.2.0",
+    "@storybook/addon-vitest": "^10.2.0",
+    "@storybook/nextjs-vite": "^10.2.0",
     "@tailwindcss/postcss": "^4.1.6",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/eslint-plugin-query": "^5.91.0",
@@ -107,19 +107,19 @@
     "eslint-config-next": "15.5.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.0",
-    "eslint-plugin-storybook": "^9.1.6",
+    "eslint-plugin-storybook": "^10.2.0",
     "msw": "^2.11.2",
-    "msw-storybook-addon": "^2.0.5",
+    "msw-storybook-addon": "^2.0.6",
     "orval": "7.18.0",
     "playwright": "^1.55.1",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "redis": "^5.10.0",
     "simple-git": "^3.28.0",
-    "storybook": "^9.1.17",
-    "storybook-addon-mock-date": "^1.0.1",
-    "storybook-next-intl": "^2.0.13",
+    "storybook": "^10.2.0",
+    "storybook-addon-mock-date": "^2.0.0",
+    "storybook-next-intl": "^10.0.1",
     "tailwindcss": "^4.1.14",
     "tsx": "^4.20.3",
     "typescript": "^5.9.3",

frontend/src/components/application/InstallButton.stories.tsx

@@ -1,6 +1,6 @@
+import { userEvent, within } from "storybook/test"
 import { Meta, StoryObj } from "@storybook/nextjs-vite"
 import InstallButton from "./InstallButton"
-import { userEvent, within } from "storybook/internal/test"
 
 const meta = {
   title: "Components/InstallButton",

frontend/vitest.config.ts

@@ -0,0 +1,37 @@
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { defineConfig } from "vitest/config"
+
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin"
+
+const dirname =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url))
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, ".storybook") }),
+        ],
+        test: {
+          name: "storybook",
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: "playwright",
+            instances: [{ browser: "chromium" }],
+          },
+          setupFiles: [".storybook/vitest.setup.ts"],
+        },
+      },
+    ],
+  },
+})

frontend/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />