chore: upgrade to storybook10, vite6, vitest and msw

.storybook-config/Toggle.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { useGlobals, useParameter, useArgs } from '@storybook/api';
-import { IconButton } from '@storybook/components';
+import { useGlobals, useParameter } from 'storybook/manager-api';
+import { IconButton } from 'storybook/internal/components';
 
 export const Toggle = ({global: globalKey, children}) => {
   const [globals, updateGlobals] = useGlobals();

.storybook-config/dataLayerListener/Panel.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { useAddonState, useChannel } from "@storybook/api";
-import { styled } from "@storybook/theming";
-import { AddonPanel, Button, Form } from "@storybook/components";
-import { Source } from '@storybook/blocks';
+import { useAddonState, useChannel } from "storybook/manager-api";
+import { styled } from "storybook/theming";
+import { AddonPanel, Button, Form } from "storybook/internal/components";
+import { Source } from '@storybook/addon-docs/blocks';
 import { ADDON_ID, EVENTS } from "./constants.js";
 
 const SourceWrapper = styled(Source)({

.storybook-config/dataLayerListener/index.js

@@ -1,8 +1,9 @@
-module.exports = {
-  config: function config(entry = []) {
-    return [...entry, require.resolve('./preset/preview.js')];
-  },
-  managerEntries: function managerEntries(entry = []) {
-    return [...entry, require.resolve('./preset/manager.js')];
-  }
-};
+import { fileURLToPath } from "url";
+
+export function previewAnnotations(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve('./preset/preview.js'))];
+}
+
+export function managerEntries(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve('./preset/manager.js'))];
+}

.storybook-config/dataLayerListener/preset/manager.js

@@ -1,6 +1,6 @@
 
-import { addons, types } from "@storybook/addons";
-import { useAddonState } from "@storybook/api";
+import { addons, types } from "storybook/manager-api";
+import { useAddonState } from "storybook/manager-api";
 import { ADDON_ID, PANEL_ID } from "../constants";
 import { Panel } from "../Panel";
 

.storybook-config/dataLayerListener/withDataLayerListener.js

@@ -1,48 +1,40 @@
-import { makeDecorator, useChannel, useEffect } from "@storybook/addons";
+import { useChannel } from "storybook/preview-api";
+import { useEffect } from "react";
 import { EVENTS, PARAM_KEY } from "./constants";
 
-export const withDataLayerListener = makeDecorator({
-  name: "withDataLayerListener",
-  parameterName: PARAM_KEY,
-  skipIfNoParametersOrOptions: false,
-  wrapper: (storyFn, context ) => {
-    const emit = useChannel({});
+export const withDataLayerListener = (storyFn, context) => {
+  const emit = useChannel({});
 
-    function removeDOMObjects(eventObject){
-      return Object.entries(eventObject).reduce((acc, [k, v])=>{
-        acc[k] = (typeof v === "object" && v.tagName) ? v.tagName : v;
-        return acc
-    },{})
-    }
-
-    function newPush() {
-      for (var i = 0, n = this.length, l = arguments.length; i < l; i++, n++) {
-        this[n] = arguments[i];
-        emit(EVENTS.ADD_EVENT, {
-          event: removeDOMObjects(arguments[i]),
-        });
-      }
-      return n;
-    }
+  function removeDOMObjects(eventObject){
+    return Object.entries(eventObject).reduce((acc, [k, v])=>{
+      acc[k] = (typeof v === "object" && v.tagName) ? v.tagName : v;
+      return acc
+  },{})
+  }
 
-    const listenToDataLayer = () => {
-      window.dataLayer = window.dataLayer || [];
-      Object.defineProperty(window.dataLayer, "push", {
-        value: newPush,
-        writable: true,
-        enumerable: true,
-        configurable: true,
+  function newPush() {
+    for (var i = 0, n = this.length, l = arguments.length; i < l; i++, n++) {
+      this[n] = arguments[i];
+      emit(EVENTS.ADD_EVENT, {
+        event: removeDOMObjects(arguments[i]),
       });
     }
+    return n;
+  }
 
-    useEffect(()=>{
-      setTimeout(listenToDataLayer, 1000);
-    }, [])
+  const listenToDataLayer = () => {
+    window.dataLayer = window.dataLayer || [];
+    Object.defineProperty(window.dataLayer, "push", {
+      value: newPush,
+      writable: true,
+      enumerable: true,
+      configurable: true,
+    });
+  }
 
-    return storyFn(context);
-  },
-});
+  useEffect(()=>{
+    setTimeout(listenToDataLayer, 1000);
+  }, [])
 
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
+  return storyFn(context);
+};

.storybook-config/preset/manager.js

@@ -1,4 +1,4 @@
-import { addons, types } from '@storybook/addons';
+import { addons, types } from 'storybook/manager-api';
 import { Toggle } from '../Toggle';
 import React from 'react';
 import udsTheme from '../theme.js';

.storybook-config/theme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create';
+import { create } from 'storybook/theming/create';
 
 export default create({
   base: 'light',

package.json

@@ -57,13 +57,8 @@
     "@semantic-release/git": "^10.0.1",
     "@siteimprove/alfa-playwright": "^0.78.1",
     "@siteimprove/alfa-test-utils": "^0.78.1",
-    "@storybook/addons": "^7.6.14",
-    "@storybook/api": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/components": "^7.6.14",
-    "@storybook/core-events": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/theming": "^7.6.14",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/react": "^10.0.0",
     "@types/node": "^20.0.0",
     "@types/react-dom": "^18.3.0",
     "@types/semver": "^7",
@@ -104,7 +99,7 @@
     "semantic-release-monorepo": "^8.0.2",
     "semver": "^7.5.2",
     "tsx": "^4.19.3",
-    "vite": "^5.3.5",
+    "vite": "^6.0.0",
     "webpack": "^5.32.0",
     "webpack-bundle-analyzer": "^4.4.1",
     "webpack-cli": "^4.6.0",

packages/app-degree-pages/.storybook/main.js

@@ -1,18 +1,20 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+function getAbsolutePath(value) {
+  return dirname(fileURLToPath(import.meta.resolve(value)));
+}
+
 const config = {
   staticDirs: ['../dist'],
   addons: [
-    "../../../.storybook-config",
-    "../../../.storybook-config/dataLayerListener",
-    "@storybook/addon-controls",
-    "@storybook/addon-viewport",
-    "@storybook/addon-a11y",
+    fileURLToPath(import.meta.resolve("../../../.storybook-config/index.js")),
+    fileURLToPath(import.meta.resolve("../../../.storybook-config/dataLayerListener/index.js")),
+    getAbsolutePath("@storybook/addon-a11y"),
   ],
   stories: ["../src/**/*.stories.{js,jsx}"],
   framework: {
-    name: "@storybook/react-vite",
-  },
-  core: {
-    builder: '@storybook/builder-vite'
+    name: getAbsolutePath("@storybook/react-vite"),
   },
 };
 

packages/app-degree-pages/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from 'storybook/manager-api';
 
 addons.setConfig({
   showRoots: true,

packages/app-degree-pages/.storybook/middleware.js

@@ -1,8 +1,9 @@
 // @ts-check
-const { createProxyMiddleware } = require("http-proxy-middleware");
-const express = require("express");
-const fs = require("fs");
+import express from "express";
+import fs from "fs";
+import { createRequire } from "module";
 
+const require = createRequire(import.meta.url);
 const dataSearch = require("../__mocks__/data/degree-search.json");
 
 const getFullUrl = req =>
@@ -104,4 +105,4 @@ function mockDegreeSeearch(router) {
 
 }
 
-module.exports = mockDegreeSeearch;
+export default mockDegreeSeearch;

packages/app-degree-pages/package.json

@@ -57,15 +57,14 @@
     "@babel/plugin-syntax-jsx": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@babel/plugin-transform-runtime": "^7.14.5",
-    "@storybook/addon-a11y": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
+    "@storybook/addon-a11y": "^10",
+    "@storybook/addon-docs": "^10",
+    "@storybook/react": "^10",
+    "@storybook/react-vite": "^10",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/browser": "^2.1.2",
+    "@vitest/browser": "^4.0.0",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -83,12 +82,12 @@
     "sass-loader": "^11.1.0",
     "semantic-release": "^22",
     "semantic-release-monorepo": "^8.0.2",
-    "storybook": "^7.6.14",
+    "storybook": "^10",
     "string.prototype.replaceall": "^1.0.5",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.1",
-    "vite": "^5.3.5",
-    "vitest": "^2.1.1",
+    "vite": "^6.0.0",
+    "vitest": "^4.0.0",
     "webpack-merge": "^5.8.0"
   },
   "resolutions": {

packages/app-rfi/.storybook/main.js

@@ -1,18 +1,19 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+function getAbsolutePath(value) {
+  return dirname(fileURLToPath(import.meta.resolve(value)));
+}
+
 const config = {
   staticDirs: ['../dist'],
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
-    "../../../.storybook-config",
-    "../../../.storybook-config/dataLayerListener",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "storybook-css-modules-preset",
+    fileURLToPath(import.meta.resolve("../../../.storybook-config/index.js")),
+    fileURLToPath(import.meta.resolve("../../../.storybook-config/dataLayerListener/index.js")),
   ],
   framework: {
-    name: "@storybook/react-vite",
-  },
-  core: {
-    builder: "@storybook/builder-vite"
+    name: getAbsolutePath("@storybook/react-vite"),
   },
   docs: {
     autodocs: false

packages/app-rfi/package.json

@@ -50,10 +50,9 @@
     "@babel/plugin-syntax-jsx": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@babel/plugin-transform-runtime": "^7.14.5",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
+    "@storybook/addon-docs": "^10",
+    "@storybook/react": "^10",
+    "@storybook/react-vite": "^10",
     "@testing-library/react": "^11.2.6",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-loader": "^8.2.2",
@@ -73,10 +72,9 @@
     "postcss": "^8.4.19",
     "semantic-release": "^22",
     "semantic-release-monorepo": "^8.0.2",
-    "storybook": "^7.6.14",
-    "storybook-css-modules-preset": "^1.1.1",
+    "storybook": "^10",
     "style-loader": "^2.0.0",
-    "vite": "^5.3.5",
+    "vite": "^6.0.0",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {

packages/app-rfi/src/components/controls/controls-helpers.js

@@ -25,7 +25,12 @@ const RfiRequiredIndicator = ({ required = false }) =>
     </>
   );
 
-const RfiLabel = ({ label, name, id = undefined, requiredIcon = undefined }) => (
+const RfiLabel = ({
+  label,
+  name,
+  id = undefined,
+  requiredIcon = undefined,
+}) => (
   <label htmlFor={id || name}>
     <RfiRequiredIndicator required={requiredIcon} />
     {label}
@@ -75,4 +80,10 @@ RfiError.propTypes = {
   isError: PropTypes.bool,
   metaError: PropTypes.string,
 };
-export { RfiRequiredIndicator, RfiLabel, RfiLegend, RfiError, GaEventPropTypes };
+export {
+  RfiRequiredIndicator,
+  RfiLabel,
+  RfiLegend,
+  RfiError,
+  GaEventPropTypes,
+};