updating to storybook v9. Ran npx @storybook latest and made some compatiblity changes

Author: SoLetsDev

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from "@storybook/vue3-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: ["@storybook/addon-essentials", "@chromatic-com/storybook", "@storybook/experimental-addon-test"],
+  addons: ["@chromatic-com/storybook", "@storybook/addon-vitest", "@storybook/addon-docs"],
   framework: {
     name: "@storybook/vue3-vite",
     options: {},

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/.storybook/preview.ts

@@ -1,7 +1,7 @@
 // .storybook/preview.ts
 
-import type { Preview } from "@storybook/vue3";
-import { setup } from "@storybook/vue3"; // ✅ Use the setup function from Storybook
+import type { Preview } from "@storybook/vue3-vite";
+import { setup } from "@storybook/vue3-vite"; // ✅ Use the setup function from Storybook
 import { createVuetify } from "vuetify";
 import "vuetify/styles"; // Import Vuetify base styles
 import "@mdi/font/css/materialdesignicons.css"; // Optional: MDI icons

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/.storybook/vitest.setup.ts

@@ -1,5 +1,5 @@
 import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/vue3';
+import { setProjectAnnotations } from '@storybook/vue3-vite';
 import * as projectAnnotations from './preview';
 
 // This is an important step to apply the right configuration when testing your stories.

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/package-lock.json

@@ -34,13 +34,10 @@
     "vuetify": "^3.9.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.7",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/experimental-addon-test": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/vue3": "^8.6.14",
-    "@storybook/vue3-vite": "^8.6.14",
+    "@chromatic-com/storybook": "^4.0.1",
+    "@storybook/addon-vitest": "^9.0.17",
+    "@storybook/vue3-vite": "^9.0.17",
+    "@storybook/addon-docs": "^9.0.17",
     "@tsconfig/node18": "^18.2.4",
     "@types/lodash": "^4.17.20",
     "@types/luxon": "^3.6.2",
@@ -58,16 +55,16 @@
     "eslint-plugin-cypress": "^5.1.0",
     "eslint-plugin-mocha": "^11.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.17",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^10.3.0",
     "openapicmd": "^2.6.1",
     "playwright": "^1.53.1",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.17",
     "vitest": "^3.2.4",
     "sass": "^1.86.3",
     "typescript": "~5.8.3",
-    "vite": "^6.3.2",
+    "vite": "^7.0.2",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^3.0.3"
   },

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/package.json

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { action } from "storybook/actions";
 
 import ApplicationCardList from "./ApplicationCardList.vue";
 import { getTodayDate, getDatePlusYears, getDateMinusYears } from "../utils/dateHelpers";

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationCardList.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import CertificationCard from "./CertificationCard.vue";
 

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/CertificationCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import CertificationList from "./CertificationList.vue";
 

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/CertificationList.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import RenewAction from "./RenewAction.vue";
 

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/RenewAction.stories.ts

@@ -1,30 +1,33 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
-import { defineWorkspace } from "vitest/config";
+import storybookTest from "@storybook/addon-vitest/vitest-plugin";
+import { defineConfig } from "vitest/config";
 
 const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
-// More info at: https://storybook.js.org/docs/writing-tests/test-addon
-export default defineWorkspace([
-  "vite.config.mts",
-  {
-    extends: "vite.config.mts",
-    plugins: [
-      // The plugin will run tests for the stories defined in your Storybook config
-      // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
-      storybookTest({ configDir: path.join(dirname, ".storybook") }),
-    ],
-    test: {
-      name: "storybook",
-      browser: {
-        enabled: true,
-        headless: true,
-        name: "chromium",
-        provider: "playwright",
+// 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,
+            name: "chromium",
+            provider: "playwright",
+          },
+          setupFiles: ["SETUP_FILE"],
+        },
       },
-      setupFiles: [".storybook/vitest.setup.ts"],
-    },
+    ],
   },
-]);
+});