Upgrade react@19, storybook@10

eslint.config.mjs

@@ -4,6 +4,7 @@ import nlDesignSystemConfig from '@nl-design-system/eslint-config/configs/nl-des
 import prettier from 'eslint-config-prettier';
 import perfectionist from 'eslint-plugin-perfectionist';
 import react from 'eslint-plugin-react';
+import storybook from 'eslint-plugin-storybook';
 import { defineConfig, globalIgnores } from 'eslint/config';
 import tseslint from 'typescript-eslint';
 
@@ -72,6 +73,7 @@ export default defineConfig([
     ...react.configs.flat.recommended,
     ...react.configs.flat['jsx-runtime'],
   },
+  storybook.configs['flat/recommended'],
   {
     // Minor override for Stencil files that import `h` but do not use it so allow this
     files: ['packages/web-components-stencil/**/*.tsx'],

package.json

@@ -13,7 +13,7 @@
     "url": "git@github.com:nl-design-system/example.git",
     "directory": "."
   },
-  "packageManager": "pnpm@10.30.1+sha512.3590e550d5384caa39bd5c7c739f72270234b2f6059e13018f975c313b1eb9fefcc09714048765d4d9efe961382c312e624572c0420762bdc5d5940cdf9be73a",
+  "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",
   "engines": {
     "//": "Update @types/node to match the highest node version here",
     "node": ">=24 <=25",
@@ -29,6 +29,7 @@
     "@eslint/json": "0.14.0",
     "@nl-design-system/eslint-config": "2.2.0",
     "@types/node": "24.10.9",
+    "eslint-plugin-storybook": "10.2.14",
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-perfectionist": "4.15.1",

packages/components-react/package.json

@@ -51,14 +51,14 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
-    "@types/react": "18.3.27",
+    "@types/react": "19.2.14",
     "@vitejs/plugin-react": "4.7.0",
     "@vitest/coverage-v8": "3.2.4",
     "jsdom": "26.1.0",
     "next": "15.5.10",
     "postcss": "8.5.6",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "rimraf": "6.1.2",
     "rollup": "4.57.0",
     "rollup-plugin-filesize": "10.0.0",

packages/storybook/config/ParametersArgsDecorator.tsx

@@ -1,4 +1,4 @@
-import type { Decorator } from '@storybook/react';
+import type { Decorator } from '@storybook/react-vite';
 
 export const ParametersArgsDecorator: Decorator = (Story, context) => {
   context.parameters['args'] = context.args;

packages/storybook/config/main.ts

@@ -4,17 +4,13 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-docs',
-    '@storybook/addon-viewport',
     '@whitespace/storybook-addon-html',
     '@etchteam/storybook-addon-status',
   ],
   core: {
     disableTelemetry: true,
     disableWhatsNewNotifications: true,
   },
-  docs: {
-    autodocs: 'tag',
-  },
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/storybook/config/preview.ts

@@ -1,6 +1,6 @@
 import '@example/design-tokens/dist/index.css';
 import '@example/font/src/index.scss';
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 import { defineCustomElements } from '@example/web-components-stencil/loader/index.js';
 import { ParametersArgsDecorator } from './ParametersArgsDecorator';
 

packages/storybook/package.json

@@ -20,29 +20,25 @@
   },
   "devDependencies": {
     "@babel/core": "7.28.6",
-    "@etchteam/storybook-addon-status": "5.0.0",
+    "@etchteam/storybook-addon-status": "8.0.0",
     "@example/assets": "workspace:*",
     "@example/components-css": "workspace:*",
     "@example/design-tokens": "workspace:*",
     "@example/font": "workspace:*",
     "@example/web-components-react": "workspace:*",
     "@example/web-components-stencil": "workspace:*",
-    "@storybook/addon-a11y": "8.6.15",
-    "@storybook/addon-actions": "8.6.15",
-    "@storybook/addon-docs": "8.6.15",
-    "@storybook/addon-interactions": "8.6.15",
-    "@storybook/addon-links": "8.6.15",
-    "@storybook/addon-viewport": "8.6.15",
-    "@storybook/react": "8.6.15",
-    "@storybook/react-vite": "8.6.15",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.7",
-    "@whitespace/storybook-addon-html": "6.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "@storybook/addon-a11y": "10.2.14",
+    "@storybook/addon-docs": "10.2.14",
+    "@storybook/addon-links": "10.2.14",
+    "@storybook/react-vite": "10.2.14",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@whitespace/storybook-addon-html": "9.0.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-syntax-highlighter": "15.6.6",
     "rimraf": "6.1.2",
-    "storybook": "8.6.15",
+    "storybook": "10.2.14",
     "typescript": "5.9.3",
     "vite": "6.4.1"
   }

packages/storybook/src/css-button.stories.tsx

@@ -1,6 +1,6 @@
 /* @license CC0-1.0 */
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import readme from '@example/components-css/button/README.md?raw';
 import { PropsWithChildren } from 'react';
 import '@example/components-css/button/index.scss';

packages/storybook/src/documentation/introduction.mdx

@@ -1,4 +1,4 @@
-import { Markdown, Meta } from '@storybook/addon-docs';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import markdown from './introduction.md?raw';
 
 <Meta title="Example/Intro" />

packages/storybook/src/documentation/license.mdx

@@ -1,4 +1,4 @@
-import { Markdown, Meta } from '@storybook/addon-docs';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import markdown from '../../../../LICENSE.md?raw';
 
 <Meta title="Example/Open Source License" />

packages/storybook/src/documentation/notice.mdx

@@ -1,4 +1,4 @@
-import { Markdown, Meta } from '@storybook/addon-docs';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import markdown from '../../../../NOTICE.md?raw';
 
 <Meta title="Example/Toestemming voor gebruik" />

packages/storybook/src/react-button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../../components-react/src/Button';
 
 const meta = {

packages/storybook/src/web-component-button.stories.tsx

@@ -1,6 +1,6 @@
 /* @license CC0-1.0 */
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import readme from '@example/components-css/button/README.md?raw';
 import { ExampleButton } from '@example/web-components-react';
 import { PropsWithChildren } from 'react';

packages/storybook/tsconfig.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "module": "esnext",
+    "moduleResolution": "bundler"
   },
   "extends": "../../tsconfig.json",
   "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"],

packages/web-components-react/package.json

@@ -31,10 +31,10 @@
   "devDependencies": {
     "@example/web-components-stencil": "workspace:*",
     "@types/node": "24.10.9",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.7",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "rimraf": "6.1.2",
     "typescript": "5.9.3"
   },

packages/web-components-stencil/src/button/index.scss

@@ -1 +1 @@
-@import "~@example/components-css/button/index";
+@use "~@example/components-css/button/index" as *;