build(storybook): update storybook to v10 DEV-1246

.github/workflows/biome.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v6
       - uses: actions/setup-node@v6
         with:
-          node-version: '20.18.1' # version that's pinned in Dockerfile for kpi release
+          node-version: '20.19.0' # version that's pinned in Dockerfile for kpi release
           check-latest: true # download newer semver match if available
           cache: 'npm'
 

.github/workflows/chromatic.yml

@@ -58,7 +58,7 @@ jobs:
           ref: "main"
       - uses: actions/setup-node@v6
         with:
-          node-version: 20.18.1
+          node-version: 20.19.0
       - name: Install dependencies
         run: npm ci
       - name: Run Chromatic

.github/workflows/npm-test.yml

@@ -21,7 +21,7 @@ jobs:
 
       matrix:
         node-version:
-          - '20.18.1'  # version that's pinned in Dockerfile for kpi release
+          - '20.19.0'  # version that's pinned in Dockerfile for kpi release
           - '22'       # version that's active (v22 until Nov, 2025), see https://nodejs.org/en/about/previous-releases
           # - '24'       # version that's current (v24 since May, 2025), see https://nodejs.org/en/about/previous-releases
       fail-fast: false # Let each job finish

.github/workflows/openapi.yml

@@ -101,7 +101,7 @@ jobs:
       - uses: actions/checkout@v6
       - uses: actions/setup-node@v6
         with:
-          node-version: 20.18.1  # version that's pinned in Dockerfile for kpi release. FYI v22 doesn't work out of box.
+          node-version: 20.19.0  # version that's pinned in Dockerfile for kpi release. FYI v22 doesn't work out of box.
           check-latest: true # download newer semver match if available
           cache: 'npm'
 

.github/workflows/storybook-deploy.yml

@@ -11,7 +11,7 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     container:
-      image: node:20
+      image: node:20.19
     permissions:
       contents: read
       id-token: write

.node-version

@@ -1 +1 @@
-v20.18.1
+v20.19.0

.nvmrc

@@ -1 +1 @@
-v20.18.1
+v20.19.0

.storybook/main.js → .storybook/main.mjs

@@ -1,23 +1,16 @@
-const path = require('path')
-const webpack = require('webpack')
-let SpeedMeasurePlugin
-if (process.env.MEASURE) {
-  SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
-}
-module.exports = {
+import path from 'path'
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export default {
   stories: ['../jsapp/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
     '@storybook/addon-a11y',
-    // NB:
-    // 'storybook-addon-swc' may improve build speed in the future.
-    // - At time of writing, the build performance gains are negated because it
-    //   switches to a slower refresh plugin and also causes other compatibility
-    //   issues in Storybook 6.
-    // - Testing with React 16.14.0 and Storybook 7 (beta) seemed to perform
-    //   well.
     'storybook-dark-mode',
-    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-webpack5-compiler-babel',
     'storybook-addon-remix-react-router',
     '@storybook/addon-docs',
   ],
@@ -32,9 +25,12 @@ module.exports = {
   webpackFinal: async (config, { configType }) => {
     config.plugins.push(new webpack.ProvidePlugin({ $: ['jquery', 'default'] }))
 
-    // Storybook has its own webpack config, so mirror app support for `*.svg?react` imports.
-    // Without this, such imports resolve to URLs and React tries to render them as invalid tag names.
+    // Exclude .module.css and .module.scss from Storybook's default CSS rules
     config.module.rules.forEach((rule) => {
+      if (rule && rule.test instanceof RegExp && rule.test.test('.css')) {
+        rule.exclude = /\.module\.(css|scss)$/
+      }
+      // Mirror app support for `*.svg?react` imports.
       if (rule && rule.test instanceof RegExp && rule.test.test('.svg')) {
         rule.resourceQuery = {
           not: [/react/],
@@ -103,13 +99,29 @@ module.exports = {
           'sass-loader',
         ],
       },
+      {
+        test: /\.module\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]--[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+        ],
+      },
     )
 
     // Build speed improvements
     applySpeedTweaks(config)
 
     // Print speed measurement if env variable MEASURE is set
     if (process.env.MEASURE) {
+      const { default: SpeedMeasurePlugin } = await import('speed-measure-webpack-plugin')
       const smp = new SpeedMeasurePlugin()
       return smp.wrap(config)
     }
@@ -119,6 +131,7 @@ module.exports = {
     // Build speed improvements
     applySpeedTweaks(config)
     if (process.env.MEASURE) {
+      const { default: SpeedMeasurePlugin } = await import('speed-measure-webpack-plugin')
       const smp = new SpeedMeasurePlugin()
       return smp.wrap(config)
     }
@@ -137,14 +150,6 @@ function applySpeedTweaks(config) {
   //   'import/no-unresolved': [2, { caseSensitive: true }]
   config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'CaseSensitivePathsPlugin')
 
-  // Use swc to make the Terser step faster
-  if (config.mode === 'production') {
-    const TerserPlugin = require('terser-webpack-plugin')
-    config.optimization.minimizer = [
-      new TerserPlugin({
-        minify: TerserPlugin.swcMinify,
-        terserOptions: {},
-      }),
-    ]
-  }
+  // Note: Removed custom TerserPlugin with swcMinify because it doesn't handle
+  // ESM code properly (import.meta, export statements). Let Storybook use its default minifier.
 }

jsapp/js/account/DeleteAccountModal.stories.tsx

@@ -1,6 +1,6 @@
 import { Button, Center, type ModalProps } from '@mantine/core'
 import type { Meta, StoryObj } from '@storybook/react-webpack5'
-import { useArgs } from 'storybook/internal/preview-api'
+import { useArgs } from 'storybook/preview-api'
 import DeleteAccountModal from './DeleteAccountModal'
 
 const RenderModal = ({ ...args }: ModalProps) => {

jsapp/js/components/common/actionIcon.stories.tsx

@@ -96,18 +96,18 @@ export const Preview = () => (
       padding: '10px',
     }}
   >
-    {actionIconVariants.map((variant) =>
-      actionIconSizes.map((size) => {
+    {actionIconVariants.map((variant, index1) =>
+      actionIconSizes.map((size, index2) => {
         const actionIconProps: ActionIconProps = {
           variant,
           size: size,
           iconName: 'more',
         }
         return (
           <>
-            <ActionIcon {...actionIconProps} />
-            <ActionIcon {...actionIconProps} loading />
-            <ActionIcon {...actionIconProps} disabled />
+            <ActionIcon {...actionIconProps} key={index1 + '-' + index2 + '-default'} />
+            <ActionIcon {...actionIconProps} key={index1 + '-' + index2 + '-loading'} loading />
+            <ActionIcon {...actionIconProps} key={index1 + '-' + index2 + '-disabled'} disabled />
           </>
         )
       }),

jsapp/js/components/common/avatar.stories.tsx

@@ -189,8 +189,8 @@ const bulkUsernames = [
 export const BulkColorsTest: Story = {
   render: () => (
     <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
-      {bulkUsernames.map((username) => (
-        <div key={username}>
+      {bulkUsernames.map((username, index) => (
+        <div key={index}>
           <Avatar size='m' username={username} />
         </div>
       ))}

jsapp/js/components/submissions/DataTableWrapper.stories.tsx

@@ -7,9 +7,9 @@
 
 import { Box } from '@mantine/core'
 import type { Meta, StoryObj } from '@storybook/react-webpack5'
-import type { DecoratorFunction } from '@storybook/types'
 import React, { useEffect } from 'react'
 import { reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router'
+import type { DecoratorFunction } from 'storybook/internal/types'
 import { expect, waitFor } from 'storybook/test'
 import subscriptionStore from '#/account/subscriptionStore'
 import { actions } from '#/actions'

msw-mocks/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.11.3'
+const PACKAGE_VERSION = '2.14.6'
 const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
@@ -205,6 +205,7 @@ async function resolveMainClient(event) {
  * @param {FetchEvent} event
  * @param {Client | undefined} client
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  * @returns {Promise<Response>}
  */
 async function getResponse(event, client, requestId, requestInterceptedAt) {