fix: upgraded and auto migrated storybook and related dependencies

Upgraded and auto migrated storybook and related dependencies

HCRC-178.

The Storybook related files and dependencies were updated with

```shell
npx storybook@latest upgrade
```

It ran a automated migration script that resulted to following:

```
◇  Checking the health of your project(s)..
│
│  Your Storybook project looks good!
│
◇  The upgrade is complete!
│
│  Your project(s) have been upgraded successfully! 🎉
│
│  If you want to learn more about the automigrations that executed in
your
│  project(s), please check the following links:
│
│  • upgrade-storybook-related-dependencies
│  • addon-globals-api
│  • consolidated-imports
│  • remove-addon-interactions
│  • renderer-to-framework
│  • remove-essential-addons
│
│  For a full list of changes, please check our migration guide:
│  https://storybook.js.org/docs/releases/migration-guide?ref=upgrade
```
----

fix: exports, storybook, babel, jest and msw synergy

1. Install a new storybook (to fix critical security issues reported by
Dependabot). Used `npx storybook@latest upgrade` to run an automated
migration tool.

2. Storybook upgrade and migration resulted in some type issues and
issues starting the storybook. Export clauses needed "type" addition to
the statement when the re-exported object was a type.

3. MSW needed an update in order to fix the Storybook issues. Upgraded
MSW and migrated the old mocks to support new syntax and rules.

4. Some new linting issues and deprecation warnings appeared and also
the JEST environment needed some reconfiguration. Jest now had some
problems with JSDom / ESM overlapping in same project. Fixed the type
issues.

5. In order to fix the Jest environment, babel needed some
reconfiguration.

Author: nikomakela

.babelrc

@@ -11,9 +11,6 @@ module.exports = {
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-viewport',
     {
       name: '@storybook/preset-scss',
       options: {
@@ -30,6 +27,7 @@ module.exports = {
       },
     },
     '@storybook/addon-webpack5-compiler-babel',
+    '@storybook/addon-docs',
   ],
 
   framework: {

.storybook/main.js

@@ -1,6 +1,6 @@
 // Enable hds-design-tokens in storybook
 import 'hds-design-tokens/lib/all.min.css';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 import { initialize as mswInitialize, mswDecorator } from 'msw-storybook-addon';
 
 // Enable HelsinkiGrotesk font in storybook
@@ -16,8 +16,7 @@ export const parameters = {
     },
   },
   viewport: {
-    defaultViewport: 'extraSmall',
-    viewports: INITIAL_VIEWPORTS,
+    options: INITIAL_VIEWPORTS,
   },
 };
 
@@ -27,3 +26,10 @@ mswInitialize();
 // Provide the MSW addon decorator globally
 export const decorators = [mswDecorator];
 export const tags = ['autodocs', 'autodocs'];
+
+export const initialGlobals = {
+  viewport: {
+    value: 'extraSmall',
+    isRotated: false,
+  },
+};

.storybook/preview.js

@@ -44,7 +44,6 @@ The general requirements for new Component development:
 
 ### Available scripts
 
-
 | Name                    | Purpose                                                                                                                    | Useful Options                |
 | ----------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
 | `yarn dev`              | Starts storybook environment that can be used for developing components.                                                   |                               |
@@ -62,7 +61,6 @@ The general requirements for new Component development:
 
 **NOTE: To manually publish a new version to the NPM, you will need the credentials that can be found from the City of Helsinki Culture and Leisure's Vault-service.**
 
-
 ### Development environments
 
 You can use docker local environment for development:

README.md

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    // It's also a good practice to set the new JSX runtime
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+  env: {
+    test: {
+      plugins: ['@babel/plugin-transform-runtime'],
+    },
+  },
+};

babel.config.js

@@ -1,9 +1,5 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { toHaveNoViolations } from 'jest-axe';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import fetchMock from 'jest-fetch-mock';
 import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
 import { hideConsoleMessages } from './src/tests/hideConsoleMessages';

jest-setup.ts

@@ -12,16 +12,23 @@ module.exports = {
     // return a mock css module
     '\\.(css|less|scss|sss|styl)$': 'identity-obj-proxy',
     '^lodash-es$': 'lodash',
+    // This forces Jest to use the correct CommonJS version of uuid
+    // instead of the ESM one hds-react is trying to import.
+    '^uuid$': require.resolve('uuid'),
   },
 
   setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
 
-  // The test environment that will be used for testing
-  // We have react-script as a dependency for our storybook build. This
-  // package forces our jsdom version into an older one, regardless of
-  // jest being at version 26. To circumvent, we are telling jest to
-  // use jsdom sixteen here.
-  testEnvironment: 'jest-environment-jsdom',
+  // Fix the issue "Request/Response/TextEncoder is not defined (Jest)". See more: https://mswjs.io/docs/migrations/1.x-to-2.x#frequent-issues.
+  testEnvironment: 'jest-fixed-jsdom',
+
+  transform: {
+    '^.+\\.(t|j)sx?$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(hds-react|uuid|until-async)/)',
+    '\\.pnp\\.[^\\/]+$',
+  ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   testPathIgnorePatterns: ['<rootDir>/(build|dist|temp)/'],

jest.config.js

@@ -64,7 +64,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@chromatic-com/storybook": "^3",
+    "@chromatic-com/storybook": "^4.1.2",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/typescript": "^4.1.1",
     "@graphql-codegen/typescript-operations": "^4.3.1",
@@ -73,18 +73,14 @@
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-actions": "^8.4.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-viewport": "^8.4.2",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addon-a11y": "^10.0.4",
+    "@storybook/addon-docs": "^10.0.4",
+    "@storybook/addon-links": "^10.0.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-webpack5": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/react-webpack5": "^10.0.4",
     "@storybook/test-runner": "^0.24.1",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -97,6 +93,7 @@
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "axe-playwright": "^2.0.3",
+    "babel-jest": "^30.2.0",
     "babel-loader": "^9.2.1",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.1",
@@ -116,8 +113,7 @@
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-fetch-mock": "^3.0.3",
-    "msw": "^1.1.0",
-    "msw-storybook-addon": "1.8.0",
+    "msw-storybook-addon": "^2.0.6",
     "postcss": "^8.4.49",
     "postcss-scss": "^4.0.9",
     "prettier": "3.3.3",
@@ -134,7 +130,7 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.66.0",
     "sass-loader": "^13.3.2",
-    "storybook": "^8.4.2",
+    "storybook": "^10.0.4",
     "style-loader": "^4.0.0",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
@@ -148,7 +144,9 @@
     "html-react-parser": "^4.2.9",
     "isomorphic-dompurify": "^2.31.0",
     "jest-environment-jsdom": "^30.2.0",
-    "lodash-es": "^4.17.21"
+    "jest-fixed-jsdom": "^0.0.10",
+    "lodash-es": "^4.17.21",
+    "msw": "^2.11.6"
   },
   "msw": {
     "workerDirectory": "public"

package.json

@@ -2,10 +2,9 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.5).
+ * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
- * - Please do NOT serve this file on production.
  */
 
 const PACKAGE_VERSION = '2.11.6';
@@ -72,11 +71,6 @@ addEventListener('message', async function (event) {
       break;
     }
 
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
     case 'CLIENT_CLOSED': {
       activeClientIds.delete(clientId);
 
@@ -97,11 +91,6 @@ addEventListener('message', async function (event) {
 addEventListener('fetch', function (event) {
   const requestInterceptedAt = Date.now();
 
-  // Bypass server-sent events.
-  if (accept.includes('text/event-stream')) {
-    return
-  }
-
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
     return;
@@ -118,7 +107,7 @@ addEventListener('fetch', function (event) {
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
+  // after it's been terminated (still remains active until the next reload).
   if (activeClientIds.size === 0) {
     return;
   }
@@ -156,15 +145,18 @@ async function handleRequest(event, requestId, requestInterceptedAt) {
       {
         type: 'RESPONSE',
         payload: {
-          requestId,
-          type: clonedResponse.type,
-          ok: clonedResponse.ok,
-          status: clonedResponse.status,
-          statusText: clonedResponse.statusText,
-          body:
-            clonedResponse.body === null ? null : await clonedResponse.text(),
-          headers: Object.fromEntries(clonedResponse.headers.entries()),
-          redirected: clonedResponse.redirected,
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
         },
       },
       responseClone.body ? [serializedRequest.body, responseClone.body] : [],
@@ -174,10 +166,14 @@ async function handleRequest(event, requestId, requestInterceptedAt) {
   return response;
 }
 
-// Resolve the main client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId);
 
@@ -255,12 +251,6 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
     return passthrough();
   }
 
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  if (request.headers.get('x-msw-bypass') === 'true') {
-    return passthrough()
-  }
-
   // Notify the client that a request has been intercepted.
   const serializedRequest = await serializeRequest(event.request);
   const clientMessage = await sendToClient(
@@ -284,21 +274,18 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
     case 'PASSTHROUGH': {
       return passthrough();
     }
-
-    case 'NETWORK_ERROR': {
-      const { name, message } = clientMessage.data
-      const networkError = new Error(message)
-      networkError.name = name
-
-      // Rejecting a "respondWith" promise emulates a network error.
-      throw networkError
-    }
   }
 
   return passthrough();
 }
 
-function sendToClient(client, message) {
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
   return new Promise((resolve, reject) => {
     const channel = new MessageChannel();
 

public/mockServiceWorker.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/function-component-definition */
 
 import React from 'react';
-import type { StoryFn, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 import { HelmetProvider } from 'react-helmet-async';
 
 import { ConfigProvider } from '../core/configProvider/ConfigProvider';