build: update Storybook to v8

Update Storybook to v8. Remove incompatible addons
(@etchteam/storybook-addon-status) and its configuration.

Simplify config:

- Move the decorator to its own .tsx file and rename main.tsx and
  preview.tsx to main.ts and preview.ts respectively
- Add types

Rename *.stories.mdx -> *.mdx as this is now required for Storybook 8.

Remove unused vite.config.ts

Remove unused dependencies.

Remove Storybook deps from .ncurc.major.cjs

.ncurc.major.cjs

@@ -2,6 +2,6 @@ const minorConfig = require('./.ncurc.minor.cjs');
 
 module.exports = {
   ...minorConfig,
-  reject: [...minorConfig.reject, '@mdx-js/react', 'storybook', '@storybook/*', 'eslint'],
+  reject: [...minorConfig.reject, 'eslint'],
   target: 'latest',
 };

package.json

@@ -38,7 +38,6 @@
     "postcss": "8.4.38",
     "prettier": "3.2.5",
     "stylelint": "16.3.1",
-    "stylelint-config-prettier": "9.0.5",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
     "typescript": "5.4.5"

packages/storybook/config/ParameterArgsDecorator.tsx

@@ -0,0 +1,12 @@
+import type { Decorator } from '@storybook/react';
+
+export const ParameterArgsDecorator: Decorator = (Story, context) => {
+  // Hack to make current args for a story available in the transformSource of the docs addon
+  context.parameters['args'] = context.args;
+
+  return (
+    <div className="voorbeeld-theme">
+      <Story />
+    </div>
+  );
+};

packages/storybook/config/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-docs',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+    '@storybook/addon-viewport',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  docs: {
+    autodocs: true,
+  },
+  staticDirs: ['../../../proprietary/assets/src'],
+};
+
+export default config;

packages/storybook/config/preview.ts

@@ -0,0 +1,19 @@
+// import '@nl-design-system-unstable/voorbeeld-design-tokens/src/font.js';
+import { defineCustomElements } from '@kernteam/web-components-stencil/loader/index.js';
+import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css';
+import type { Preview } from '@storybook/react';
+import { ParameterArgsDecorator } from './ParameterArgsDecorator';
+
+defineCustomElements();
+
+const preview: Preview = {
+  decorators: [ParameterArgsDecorator],
+  parameters: {
+    controls: { expanded: false },
+    options: {
+      panelPosition: 'right',
+    },
+  },
+};
+
+export default preview;

packages/storybook/package.json

@@ -19,11 +19,6 @@
     "storybook": "storybook dev --config-dir config/ --port 6006"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
-    "@babel/preset-env": "7.24.4",
-    "@babel/preset-react": "7.24.1",
-    "@babel/preset-typescript": "7.24.1",
-    "@etchteam/storybook-addon-status": "4.2.4",
     "@kernteam/assets": "workspace:*",
     "@kernteam/components-css": "workspace:*",
     "@kernteam/design-tokens": "workspace:*",
@@ -32,39 +27,27 @@
     "@kernteam/web-components-stencil": "workspace:*",
     "@nl-design-system-unstable/nlds-design-tokens": "1.0.0-alpha.189",
     "@nl-design-system-unstable/voorbeeld-design-tokens": "1.0.0-alpha.133",
-    "@storybook/addon-a11y": "7.6.17",
-    "@storybook/addon-actions": "7.6.17",
-    "@storybook/addon-docs": "7.6.17",
-    "@storybook/addon-interactions": "7.6.17",
-    "@storybook/addon-links": "7.6.17",
-    "@storybook/addon-viewport": "7.6.17",
-    "@storybook/manager-api": "7.6.17",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-vite": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.17",
+    "@storybook/addon-a11y": "8.0.8",
+    "@storybook/addon-actions": "8.0.8",
+    "@storybook/addon-docs": "8.0.8",
+    "@storybook/addon-interactions": "8.0.8",
+    "@storybook/addon-links": "8.0.8",
+    "@storybook/addon-viewport": "8.0.8",
+    "@storybook/blocks": "8.0.8",
+    "@storybook/react": "8.0.8",
+    "@storybook/react-vite": "8.0.8",
+    "@storybook/theming": "8.0.8",
     "@tabler/icons-react": "3.2.0",
     "@types/react": "18.2.75",
     "@types/react-dom": "18.2.24",
     "@utrecht/component-library-react": "3.0.0",
     "@utrecht/web-component-library-react": "1.0.2",
-    "@vitejs/plugin-react": "4.2.1",
-    "babel-loader": "9.1.3",
-    "css-loader": "7.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "5.0.5",
-    "sass": "1.74.1",
-    "sass-loader": "14.1.1",
-    "storybook": "7.6.17",
-    "style-loader": "4.0.0",
+    "storybook": "8.0.8",
     "typescript": "5.4.5",
-    "vite": "5.2.8",
-    "vite-plugin-html": "3.2.2",
-    "vite-plugin-markdown": "2.2.0",
-    "webpack": "5.91.0"
+    "vite": "5.2.8"
   }
 }

packages/storybook/src/documentation/notice.stories.mdx → packages/storybook/src/documentation/notice.mdx

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

packages/storybook/tsconfig.json

@@ -5,6 +5,6 @@
     "skipLibCheck": true
   },
   "extends": "../../tsconfig.json",
-  "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx", "vite.config.ts"],
+  "include": ["config/**/*.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["**/node_modules/*"]
 }