Patch round 2024 05

.husky/pre-commit

@@ -1 +1 @@
-npx --no-install lint-staged
+pnpx lint-staged

.ncurc.major.cjs

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

apps/rvs.rivm.nl/package.json

@@ -24,9 +24,9 @@
     "start": "http-server dist/"
   },
   "dependencies": {
-    "next": "14.1.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "next": "14.2.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@rijkshuisstijl-community/components-css": "workspace:*",
@@ -35,13 +35,13 @@
     "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/web-components-react": "workspace:*",
     "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
-    "@types/node": "20.11.30",
-    "@types/react": "18.2.67",
-    "@types/react-dom": "18.2.22",
-    "@utrecht/component-library-css": "3.0.1-alpha.24",
-    "@utrecht/component-library-react": "3.0.1-alpha.24",
+    "@types/node": "20.12.11",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "@utrecht/component-library-css": "3.0.1-alpha.33",
+    "@utrecht/component-library-react": "3.0.1-alpha.33",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.1.4",
-    "typescript": "5.4.2"
+    "eslint-config-next": "14.2.3",
+    "typescript": "5.4.5"
   }
 }

package.json

@@ -17,12 +17,12 @@
     "./proprietary/*"
   ],
   "devDependencies": {
-    "@lerna-lite/cli": "3.3.1",
-    "@lerna-lite/publish": "3.3.1",
-    "@lerna-lite/run": "3.3.1",
-    "@types/node": "20.11.30",
-    "@typescript-eslint/eslint-plugin": "7.3.1",
-    "@typescript-eslint/parser": "7.3.1",
+    "@lerna-lite/cli": "3.3.3",
+    "@lerna-lite/publish": "3.3.3",
+    "@lerna-lite/run": "3.3.3",
+    "@types/node": "20.12.11",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
@@ -31,17 +31,16 @@
     "eslint-plugin-react": "7.34.1",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
-    "markdownlint-cli": "0.39.0",
-    "npm-check-updates": "16.14.17",
+    "markdownlint-cli": "0.40.0",
+    "npm-check-updates": "16.14.20",
     "npm-package-json-lint": "7.1.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.37",
+    "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "stylelint": "16.2.1",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-standard-scss": "13.0.0",
+    "stylelint": "16.5.0",
+    "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
-    "typescript": "5.4.2"
+    "typescript": "5.4.5"
   },
   "scripts": {
     "build": "lerna run build",

packages/components-css/package.json

@@ -11,14 +11,5 @@
   "publishConfig": {
     "access": "restricted",
     "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "@babel/core": "7.24.1",
-    "@mdx-js/react": "3.0.1",
-    "@storybook/addon-docs": "7.6.17",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.4.2",
-    "webpack": "5.90.3"
   }
 }

packages/components-react/package.json

@@ -33,48 +33,47 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "clsx": "2.1.0",
+    "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "lodash.chunk": "4.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.1",
-    "@babel/plugin-transform-runtime": "7.24.1",
-    "@babel/preset-env": "7.24.1",
+    "@babel/core": "7.24.5",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.5",
     "@babel/preset-react": "7.24.1",
     "@babel/preset-typescript": "7.24.1",
-    "@babel/runtime": "7.24.1",
+    "@babel/runtime": "7.24.5",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.2",
+    "@testing-library/dom": "10.1.0",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
-    "@types/date-fns": "2.6.0",
     "@types/jest": "29.5.12",
     "@types/lodash.chunk": "4.2.9",
-    "@types/react": "18.2.67",
+    "@types/react": "18.3.1",
     "@types/testing-library__jest-dom": "5.14.9",
     "@vitejs/plugin-react": "4.2.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "next": "14.1.4",
+    "next": "14.2.3",
     "npm-run-all": "4.1.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rimraf": "5.0.5",
-    "rollup": "4.13.0",
+    "rollup": "4.17.2",
     "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "7.0.1",
+    "rollup-plugin-node-externals": "7.1.2",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.72.0",
+    "sass": "1.77.0",
     "tslib": "2.6.2",
-    "typescript": "5.4.2",
-    "vite": "5.2.0",
+    "typescript": "5.4.5",
+    "vite": "5.2.11",
     "vite-plugin-runtime-config": "1.0.2"
   },
   "peerDependencies": {

packages/storybook/config/Prettify.tsx

@@ -0,0 +1,24 @@
+import * as prettier from 'prettier';
+import pluginHTML from 'prettier/plugins/html';
+import { useEffect, useState } from 'react';
+
+interface Props {
+  ugly: string;
+}
+
+export function Prettify({ ugly }: Props): string {
+  const [prettySrc, setPrettySrc] = useState('');
+  useEffect(() => {
+    const prettify = async () => {
+      const pretty = await prettier.format(ugly, {
+        parser: 'html',
+        plugins: [pluginHTML],
+      });
+      setPrettySrc(pretty);
+    };
+
+    prettify();
+  }, []);
+
+  return prettySrc;
+}

packages/storybook/config/main.ts

@@ -1,25 +1,21 @@
-/* eslint-env node */
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
-  stories: ['../src/**/*stories.@(js|jsx|mdx|ts|tsx)'],
+  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
   addons: [
-    '@etchteam/storybook-addon-status/register',
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
     '@storybook/addon-docs',
-    '@storybook/addon-viewport/register',
-    '@storybook/preset-scss',
-    '@storybook/addon-mdx-gfm',
-    '@storybook/addon-styling',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+    '@storybook/addon-themes',
+    '@storybook/addon-viewport',
+    '@whitespace/storybook-addon-html',
   ],
   framework: '@storybook/react-vite',
-  features: {
-    buildStoriesJson: true,
-    storyStoreV7: true,
-  },
   staticDirs: ['../../../proprietary/assets/src'],
   docs: {
     autodocs: true,

packages/storybook/config/preview.tsx

@@ -1,58 +1,17 @@
-import { withThemeByClassName } from '@storybook/addon-styling';
-import { Preview } from '@storybook/react';
-import type { StoryContext } from '@storybook/types';
-import { UtrechtDocument } from '@utrecht/web-component-library-react';
-import prettierBabel from 'prettier/parser-babel';
-import prettier from 'prettier/standalone';
-import React from 'react';
-import * as ReactDOMServer from 'react-dom/server';
-import '@utrecht/component-library-css/dist/index.css';
-import '@utrecht/component-library-css/dist/html.css';
+import '@nl-rvo/assets/fonts/index.css';
 import '@rijkshuisstijl-community/design-tokens/dist/index.css';
 import '@rijkshuisstijl-community/digid-design-tokens/dist/theme.css';
+import '@rijkshuisstijl-community/font/src/index.scss';
 import '@rijkshuisstijl-community/logius-design-tokens/dist/theme.css';
 import '@rijkshuisstijl-community/mijnoverheid-design-tokens/dist/theme.css';
 import '@rijkshuisstijl-community/rivm-design-tokens/dist/theme.css';
-import '@rijkshuisstijl-community/font/src/index.scss';
-import '@nl-rvo/assets/fonts/index.css';
-
-// Configure @etchteam/storybook-addon-status
-const addonStatus = {
-  status: {
-    statuses: {
-      PRODUCTION: {
-        background: '#088008',
-        color: '#ffffff',
-        description:
-          'Used in production in a variety of situations, well tested, stable APIs, mostly patches and minor releases.',
-      },
-      BETA: {
-        background: '#3065ee',
-        color: '#ffffff',
-        description:
-          'Used in production in a specific situation, evolving APIs based on feedback, breaking changes are still likely.',
-      },
-      ALPHA: {
-        background: '#e0bc2e',
-        color: '#000000',
-        description:
-          'Used in prototypes and in projects that are still in development, breaking changes occur frequently and are not communicated.',
-      },
-      'WORK IN PROGRESS': {
-        background: '#cc0000',
-        color: '#ffffff',
-        description:
-          'Do not use in production. Does not follow semantic versioning and any published packages are for internal use only.',
-      },
-    },
-  },
-};
-
-const previewTabs = {
-  'storybookjs/notes/panel': { title: 'Documentation' },
-  'storybook/docs/panel': { title: 'API' },
-  canvas: { title: 'Design Tokens' },
-};
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { Preview, StoryContext } from '@storybook/react';
+import '@utrecht/component-library-css/dist/html.css';
+import '@utrecht/component-library-css/dist/index.css';
+import { UtrechtDocument } from '@utrecht/web-component-library-react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Prettify } from './Prettify';
 
 const preview: Preview = {
   decorators: [
@@ -70,20 +29,15 @@ const preview: Preview = {
   ],
   parameters: {
     previewTabs: {
-      ...previewTabs,
+      'storybookjs/notes/panel': { title: 'Documentation' },
+      'storybook/docs/panel': { title: 'API' },
+      canvas: { title: 'Design Tokens' },
     },
-    ...addonStatus,
     controls: { expanded: false },
-    options: {
-      panelPosition: 'right',
-    },
+    options: { panelPosition: 'right' },
     docs: {
-      // Show code by default.
-      // Stories without concise code snippets can hide the code at Story level.
       source: {
-        state: 'open',
-        transform: (src: string, storyContext: StoryContext<any>): string => {
-          // Ensure valid HTML in the Preview source
+        transform(src: string, storyContext: StoryContext) {
           const render =
             typeof storyContext.component === 'function'
               ? storyContext.component
@@ -92,13 +46,9 @@ const preview: Preview = {
                 : null;
 
           if (render) {
-            const renderOutput = render(storyContext.args);
-            const markup = ReactDOMServer.renderToStaticMarkup(renderOutput);
-            const prettierMarkup = prettier.format(markup, {
-              parser: 'babel',
-              plugins: [prettierBabel],
-            });
-            return prettierMarkup;
+            const srcString = renderToStaticMarkup(render(storyContext.args));
+
+            return Prettify({ ugly: srcString });
           }
           return src;
         },