chore: upgrade to storybook v8 (partially working)

.lintstagedrc.json

@@ -2,6 +2,9 @@
   "*.md": ["prettier --check"],
   "*.{yaml,yml}": ["prettier --check"],
   "*.{css,scss}": ["stylelint --allow-empty-input", "prettier --check"],
-  "*.{js,cjs,mjs,jsx,json,mdx,ts,tsx}": ["eslint --no-error-on-unmatched-pattern", "prettier --check"],
+  "*.{js,cjs,mjs,jsx,json,mdx,ts,tsx}": [
+    "eslint --no-error-on-unmatched-pattern --no-warn-ignored",
+    "prettier --check"
+  ],
   "package.json": "npmPkgJsonLint --allowEmptyTargets"
 }

.ncurc.major.js

@@ -4,6 +4,6 @@ const minorConfig = require('./.ncurc.minor');
 
 module.exports = {
   ...minorConfig,
-  reject: [...minorConfig.reject, 'storybook', '@storybook/*', '@etchteam/storybook-addon-status'],
+  reject: [...minorConfig.reject],
   target: 'latest',
 };

components/Note/README.md

@@ -77,6 +77,11 @@ Notes should:
 - Info: Provide additional information to users.
 - Warning: Warn users about important information.
 
+### Aria Live
+
+In case the note has been applied as reference in a form and will be updated by javascript, apply `aria-live="polite"` and `aria-atomic=true"` to the component.
+This way screenreaders will re-read the element when the component has been updated.
+
 ## References
 
 https://www.figma.com/file/JpoY3waVoQGlLQzQXTL9nn/Design-System---Gemeente-Den-Haag?node-id=8123%3A24065

package.json

@@ -66,7 +66,7 @@
     "@svgr/rollup": "8.1.0",
     "@svgr/webpack": "8.1.0",
     "@types/jest": "29.5.12",
-    "@types/node": "20.14.11",
+    "@types/node": "20.14.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.17.0",

packages/storybook/config/main.ts

@@ -1,45 +1,40 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'path';
+
+const getAbsolutePath = (packageName: string) => path.dirname(require.resolve(path.join(packageName, 'package.json')));
 
 const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  features: {
-    buildStoriesJson: true,
-  },
+  stories: ['../src/**/*.@(stories.@(js|jsx|ts|tsx))'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-docs',
-    '@storybook/addon-a11y',
-    '@storybook/addon-viewport',
-    '@storybook/preset-scss',
-    '@etchteam/storybook-addon-status/register',
-    '@whitespace/storybook-addon-html',
-    '@storybook/addon-links',
-    'storybook-addon-pseudo-states',
-    'storybook-addon-themes',
+    getAbsolutePath('@storybook/addon-actions'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-viewport'),
+    getAbsolutePath('@storybook/preset-scss'),
+    getAbsolutePath('@etchteam/storybook-addon-status'),
+    getAbsolutePath('@whitespace/storybook-addon-html'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('storybook-addon-pseudo-states'),
+    getAbsolutePath('storybook-addon-themes'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
   ],
   staticDirs: ['../src/assets'],
-  docs: {
-    autodocs: 'tag',
+  docs: {},
+  typescript: {
+    reactDocgen: getAbsolutePath('react-docgen-typescript'),
   },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  webpackFinal: async (config: any) => {
-    const rules = config.module.rules;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const fileLoaderRule = rules.find((rule: any) => rule.test && rule.test.test('.svg'));
-    fileLoaderRule.exclude = /\.svg$/;
-
-    rules.push({
-      test: /\.svg$/,
-      use: ['@svgr/webpack'],
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+    return mergeConfig(config, {
+      define: { 'process.env': {} },
     });
-    return config;
   },
 };
 

packages/storybook/config/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming/create';
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
 import theme from './theme';
 
 addons.setConfig({

packages/storybook/config/theme.ts

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

packages/storybook/package.json

@@ -2,6 +2,7 @@
   "name": "@gemeente-denhaag/storybook",
   "version": "0.1.0-alpha.47",
   "description": "Storybook for the Municipality of the Hague",
+  "type": "module",
   "bugs": "https://github.com/nl-design-system/denhaag/issues",
   "repository": {
     "type": "git",
@@ -92,59 +93,64 @@
     "@gemeente-denhaag/typography": "workspace:*",
     "@gemeente-denhaag/unorderedlist": "workspace:*",
     "@gemeente-denhaag/utils": "workspace:*",
-    "@nl-design-system-unstable/theme-toolkit": "1.0.0-alpha.27"
+    "@nl-design-system-unstable/theme-toolkit": "1.0.0-alpha.27",
+    "@storybook/manager-api": "8.2.6",
+    "@storybook/preview-api": "8.2.6"
   },
   "devDependencies": {
-    "@etchteam/storybook-addon-status": "4.2.4",
     "@babel/core": "7.24.9",
     "@babel/preset-env": "7.24.8",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
+    "@etchteam/storybook-addon-status": "5.0.0",
     "@mdx-js/react": "3.0.1",
     "@open-formulieren/sdk": "2.3.1",
-    "@storybook/addon-a11y": "7.6.19",
-    "@storybook/addon-actions": "7.6.19",
-    "@storybook/addon-docs": "7.6.19",
-    "@storybook/addon-links": "7.6.19",
-    "@storybook/addon-mdx-gfm": "7.6.19",
-    "@storybook/addon-viewport": "7.6.19",
-    "@storybook/addons": "7.6.19",
+    "@storybook/addon-a11y": "8.2.6",
+    "@storybook/addon-actions": "8.2.6",
+    "@storybook/addon-docs": "8.2.6",
+    "@storybook/addon-links": "8.2.6",
+    "@storybook/addon-mdx-gfm": "8.2.6",
+    "@storybook/addon-viewport": "8.2.6",
     "@storybook/api": "7.6.19",
-    "@storybook/blocks": "7.6.19",
-    "@storybook/cli": "7.6.19",
-    "@storybook/components": "7.6.19",
-    "@storybook/core-events": "7.6.19",
+    "@storybook/blocks": "8.2.6",
+    "@storybook/cli": "8.2.6",
+    "@storybook/components": "8.2.6",
+    "@storybook/core-events": "8.2.6",
     "@storybook/mdx2-csf": "1.1.0",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "7.6.19",
-    "@storybook/react-webpack5": "7.6.19",
-    "@storybook/theming": "7.6.19",
-    "@storybook/types": "7.6.19",
+    "@storybook/react": "8.2.6",
+    "@storybook/react-vite": "8.2.6",
+    "@storybook/theming": "8.2.6",
+    "@storybook/types": "8.2.6",
     "@tabler/icons-react": "3.11.0",
     "@types/lodash": "4.17.7",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@vitejs/plugin-react": "4.3.1",
     "@whitespace/storybook-addon-html": "6.1.1",
     "babel-loader": "9.1.3",
     "clsx": "2.1.1",
     "css-loader": "7.1.2",
     "html-react-parser": "5.1.12",
     "lodash.defaultsdeep": "4.6.1",
     "lodash.groupby": "4.6.0",
+    "lodash": "4.17.21", 
     "prettier": "3.3.3",
     "react": "18.3.1",
+    "react-docgen-typescript": "2.2.2",
     "react-dom": "18.3.1",
     "react-formio": "4.3.0",
     "react-syntax-highlighter": "15.5.0",
     "require-from-string": "2.0.2",
     "rimraf": "6.0.1",
     "sass": "1.77.8",
     "sass-loader": "14.2.1",
-    "storybook": "7.6.19",
+    "storybook": "8.2.6",
     "storybook-addon-pseudo-states": "3.1.1",
+    "storybook-addon-react-docgen": "1.2.44",
     "storybook-addon-themes": "6.1.0",
     "style-loader": "4.0.0",
     "typescript": "5.5.4",
-    "webpack": "5.93.0"
+    "vite": "5.3.4"
   }
 }

packages/storybook/vite.config.ts

@@ -0,0 +1,12 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  assetsInclude: ['**/*.md'],
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      external: ['react', 'react-dom', 'lodash'],
+    },
+  },
+});