nl-design-system · Robbert · Nov 20, 2024 · Nov 17, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/.changeset/short-chefs-hope.md b/.changeset/short-chefs-hope.md
@@ -0,0 +1,28 @@
+---
+"@utrecht/form-field-error-message-react": patch
+"@utrecht/form-field-description-react": patch
+"@utrecht/form-field-checkbox-react": patch
+"@utrecht/checkbox-group-react": patch
+"@utrecht/radio-button-react": patch
+"@utrecht/page-footer-react": patch
+"@utrecht/page-header-react": patch
+"@utrecht/page-layout-react": patch
+"@utrecht/radio-group-react": patch
+"@utrecht/form-field-react": patch
+"@utrecht/form-label-react": patch
+"@utrecht/page-body-react": patch
+"@utrecht/calendar-react": patch
+"@utrecht/checkbox-react": patch
+"@utrecht/combobox-react": patch
+"@utrecht/fieldset-react": patch
+"@utrecht/listbox-react": patch
+"@utrecht/nav-bar-react": patch
+"@utrecht/textbox-react": patch
+"@utrecht/button-react": patch
+"@utrecht/body-react": patch
+"@utrecht/link-react": patch
+"@utrecht/root-react": patch
+"@utrecht/component-library-react": patch
+---
+
+Remove `@babel` runtime from `.mjs` files, use modern JavaScript syntax and use our own CSS injection script.
diff --git a/apps/preact/index.html b/apps/preact/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" class="utrecht-theme">
+  <head>
+    <meta charset="utf-8" />
+    <title>React component library</title>
+    <link rel="stylesheet" href="node_modules/@utrecht/design-tokens/dist/theme.css" />
+  </head>
+  <body>
+    <h1>React components rendered with Preact</h1>
+    <p>This example uses ES Modules and import maps.</p>
+    <div id="root"></div>
+    <script type="importmap">
+      {
+        "imports": {
+          "@utrecht/body-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/body-react/dist/index.mjs",
+          "@utrecht/body-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/body-react/dist/css.mjs",
+          "@utrecht/button-react": "./node_modules/@utrecht/button-react/dist/index.mjs",
+          "@utrecht/button-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/button-react/dist/index.mjs",
+          "@utrecht/button-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/button-react/dist/css.mjs",
+          "@utrecht/calendar-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/calendar-react/dist/index.mjs",
+          "@utrecht/calendar-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/calendar-react/dist/css.mjs",
+          "@utrecht/checkbox-group-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/checkbox-group-react/dist/index.mjs",
+          "@utrecht/checkbox-group-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/checkbox-group-react/dist/css.mjs",
+          "@utrecht/checkbox-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/checkbox-react/dist/index.mjs",
+          "@utrecht/checkbox-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/checkbox-react/dist/css.mjs",
+          "@utrecht/combobox-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/combobox-react/dist/index.mjs",
+          "@utrecht/combobox-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/combobox-react/dist/css.mjs",
+          "@utrecht/component-library-react/dist/css-module": "./node_modules/@utrecht/component-library-react/dist/css-module/index.mjs",
+          "@utrecht/fieldset-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/fieldset-react/dist/index.mjs",
+          "@utrecht/fieldset-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/fieldset-react/dist/css.mjs",
+          "@utrecht/form-field-checkbox-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-checkbox-react/dist/index.mjs",
+          "@utrecht/form-field-checkbox-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-checkbox-react/dist/css.mjs",
+          "@utrecht/form-field-description-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-description-react/dist/index.mjs",
+          "@utrecht/form-field-description-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-description-react/dist/css.mjs",
+          "@utrecht/form-field-error-message-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-error-message-react/dist/index.mjs",
+          "@utrecht/form-field-error-message-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-error-message-react/dist/css.mjs",
+          "@utrecht/form-field-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-react/dist/index.mjs",
+          "@utrecht/form-field-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-field-react/dist/css.mjs",
+          "@utrecht/form-label-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-label-react/dist/index.mjs",
+          "@utrecht/form-label-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/form-label-react/dist/css.mjs",
+          "@utrecht/link-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/link-react/dist/index.mjs",
+          "@utrecht/link-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/link-react/dist/index.mjs",
+          "@utrecht/link-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/link-react/dist/css.mjs",
+          "@utrecht/link-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/link-react/dist/css.mjs",
+          "@utrecht/listbox-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/listbox-react/dist/index.mjs",
+          "@utrecht/listbox-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/listbox-react/dist/css.mjs",
+          "@utrecht/nav-bar-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/nav-bar-react/dist/index.mjs",
+          "@utrecht/nav-bar-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/nav-bar-react/dist/css.mjs",
+          "@utrecht/page-content-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-content-react/dist/index.mjs",
+          "@utrecht/page-content-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-content-react/dist/css.mjs",
+          "@utrecht/page-footer-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-footer-react/dist/index.mjs",
+          "@utrecht/page-footer-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-footer-react/dist/css.mjs",
+          "@utrecht/page-header-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-header-react/dist/index.mjs",
+          "@utrecht/page-header-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-header-react/dist/css.mjs",
+          "@utrecht/page-layout-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-layout-react/dist/index.mjs",
+          "@utrecht/page-layout-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/page-layout-react/dist/css.mjs",
+          "@utrecht/radio-button-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/radio-button-react/dist/index.mjs",
+          "@utrecht/radio-button-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/radio-button-react/dist/css.mjs",
+          "@utrecht/radio-group-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/radio-group-react/dist/index.mjs",
+          "@utrecht/radio-group-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/radio-group-react/dist/css.mjs",
+          "@utrecht/root-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/root-react/dist/index.mjs",
+          "@utrecht/root-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/root-react/dist/css.mjs",
+          "@utrecht/select-combobox-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/select-combobox-react/dist/index.mjs",
+          "@utrecht/select-combobox-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/select-combobox-react/dist/css.mjs",
+          "@utrecht/textbox-react": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/textbox-react/dist/index.mjs",
+          "@utrecht/textbox-react/dist/css": "./node_modules/@utrecht/component-library-react/node_modules/@utrecht/textbox-react/dist/css.mjs",
+          "clsx": "./node_modules/@utrecht/button-react/node_modules/clsx/dist/clsx.mjs",
+          "preact": "./node_modules/preact/dist/preact.mjs",
+          "preact/compat": "./node_modules/preact/compat/dist/compat.mjs",
+          "preact/hooks": "./node_modules/preact/hooks/dist/hooks.mjs",
+          "react": "./node_modules/preact/compat/dist/compat.mjs",
+          "react/jsx-runtime": "./node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs"
+        }
+      }
+    </script>
+    <script type="module">
+      import { render, createElement } from 'preact';
+      import { Button } from '@utrecht/button-react/dist/css';
+      import { Separator } from '@utrecht/component-library-react/dist/css-module';
+      (async () => {
+        const root = document.getElementById('root');
+        if (root) {
+          render(createElement(Button, { children: 'Click me!', appearance: 'primary-action-button' }), root);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/apps/preact/package.json b/apps/preact/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@utrecht/preact-app",
+  "version": "1.0.0",
+  "author": "Community for NL Design System",
+  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "main": "index.js",
+  "scripts": {
+    "start": "http-server ."
+  },
+  "dependencies": {
+    "@utrecht/button-react": "workspace:*",
+    "@utrecht/component-library-react": "workspace:*",
+    "@utrecht/design-tokens": "workspace:*",
+    "preact": "10.24.3"
+  },
+  "devDependencies": {
+    "http-server": "14.1.1"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/utrecht.git",
+    "directory": "apps/preact"
+  }
+}
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   ],
   "private": true,
   "workspaces": [
+    "./apps/*",
     "./documentation/",
     "./components/",
     "./components/*/",

diff --git a/packages/build-utils-react/package.json b/packages/build-utils-react/package.json
@@ -0,0 +1,35 @@
+{
+  "version": "0.0.1",
+  "author": "Community for NL Design System",
+  "description": "Utilities for React component npm packages",
+  "license": "EUPL-1.2",
+  "name": "@utrecht/build-utils-react",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/utrecht.git",
+    "directory": "packages/build-utils-react"
+  },
+  "bin": {
+    "build-react-package": "./src/index.mjs"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "7.24.7",
+    "@babel/preset-react": "7.24.7",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "26.0.1",
+    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-typescript": "12.1.0",
+    "rollup": "4.23.0",
+    "rollup-plugin-filesize": "10.0.0",
+    "rollup-plugin-node-externals": "7.1.2",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-typescript2": "0.36.0",
+    "typescript": "5.6.2"
+  }
+}
diff --git a/packages/build-utils-react/src/insert-style.ts b/packages/build-utils-react/src/insert-style.ts
@@ -0,0 +1,8 @@
+export const insertStyle = function (css: string) {
+  if (typeof document !== 'undefined') {
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.appendChild(document.createTextNode(css));
+    head.appendChild(style);
+  }
+};
diff --git a/packages/build-utils-react/src/rollup.mjs b/packages/build-utils-react/src/rollup.mjs
@@ -0,0 +1,105 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import filesize from 'rollup-plugin-filesize';
+import nodeExternal from 'rollup-plugin-node-externals';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+export const createConfig = () => [
+  {
+    input: './src/index.tsx',
+    output: [
+      {
+        file: './dist/index.cjs',
+        format: 'cjs',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      commonjs(),
+      nodeExternal(),
+      resolve({ browser: true }),
+      json(),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'runtime',
+        exclude: ['node_modules/**', 'dist/**'],
+        extensions: ['.ts', '.tsx'],
+        inputSourceMap: true,
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+      filesize(),
+    ],
+  },
+  {
+    input: './src/index.tsx',
+    output: [
+      {
+        file: './dist/index.mjs',
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve({ browser: true }),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      filesize(),
+    ],
+  },
+  {
+    input: './src/css.tsx',
+    output: [
+      {
+        file: './dist/css.cjs',
+        format: 'cjs',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      commonjs(),
+      nodeExternal(),
+      resolve({ browser: true }),
+      json(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        minimize: true,
+      }),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'runtime',
+        exclude: ['node_modules/**', 'dist/**'],
+        extensions: ['.ts', '.tsx'],
+        inputSourceMap: true,
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+      filesize(),
+    ],
+  },
+  {
+    input: './src/css.tsx',
+    output: [
+      {
+        file: './dist/css.mjs',
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve({ browser: true }),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      filesize(),
+    ],
+  },
+];
diff --git a/packages/component-library-react/src/css-module/Accordion.tsx b/packages/component-library-react/src/css-module/Accordion.tsx
@@ -4,7 +4,9 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/accordion-css/src/index.scss';
+import css from '@utrecht/accordion-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 import './Button';
 
 export * from '../Accordion';
diff --git a/packages/component-library-react/src/css-module/Alert.tsx b/packages/component-library-react/src/css-module/Alert.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/alert-css/src/index.scss';
+import css from '@utrecht/alert-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../Alert';
diff --git a/packages/component-library-react/src/css-module/AlertDialog.tsx b/packages/component-library-react/src/css-module/AlertDialog.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/alert-dialog-css/src/index.scss';
+import css from '@utrecht/alert-dialog-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../AlertDialog';
diff --git a/packages/component-library-react/src/css-module/Article.tsx b/packages/component-library-react/src/css-module/Article.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/article-css/src/index.scss';
+import css from '@utrecht/article-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../Article';
diff --git a/packages/component-library-react/src/css-module/Backdrop.tsx b/packages/component-library-react/src/css-module/Backdrop.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/backdrop-css/src/index.scss';
+import css from '@utrecht/backdrop-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../Backdrop';
diff --git a/packages/component-library-react/src/css-module/BadgeCounter.tsx b/packages/component-library-react/src/css-module/BadgeCounter.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/badge-counter-css/src/index.scss';
+import css from '@utrecht/badge-counter-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../BadgeCounter';
diff --git a/packages/component-library-react/src/css-module/BadgeList.tsx b/packages/component-library-react/src/css-module/BadgeList.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/badge-list-css/src/index.scss';
+import css from '@utrecht/badge-list-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../BadgeList';
diff --git a/packages/component-library-react/src/css-module/Blockquote.tsx b/packages/component-library-react/src/css-module/Blockquote.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/blockquote-css/src/index.scss';
+import css from '@utrecht/blockquote-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../Blockquote';
diff --git a/packages/component-library-react/src/css-module/BreadcrumbNav.tsx b/packages/component-library-react/src/css-module/BreadcrumbNav.tsx
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/breadcrumb-nav-css/src/index.scss';
+import css from '@utrecht/breadcrumb-nav-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+insertStyle(css);
 
 export * from '../BreadcrumbNav';