build: use mjs for Storybook React

.changeset/breezy-moles-flash.md

@@ -0,0 +1,107 @@
+---
+"@utrecht/accordion-css": minor
+"@utrecht/alert-css": minor
+"@utrecht/alert-dialog-css": minor
+"@utrecht/alternate-lang-nav-css": minor
+"@utrecht/article-css": minor
+"@utrecht/backdrop-css": minor
+"@utrecht/badge-counter-css": minor
+"@utrecht/badge-css": minor
+"@utrecht/badge-data-css": minor
+"@utrecht/badge-list-css": minor
+"@utrecht/badge-status-css": minor
+"@utrecht/blockquote-css": minor
+"@utrecht/body-css": minor
+"@utrecht/breadcrumb-nav-css": minor
+"@utrecht/button-css": minor
+"@utrecht/button-group-css": minor
+"@utrecht/button-link-css": minor
+"@utrecht/calendar-css": minor
+"@utrecht/checkbox-css": minor
+"@utrecht/code-block-css": minor
+"@utrecht/code-css": minor
+"@utrecht/color-sample-css": minor
+"@utrecht/column-layout-css": minor
+"@utrecht/combobox-css": minor
+"@utrecht/currency-data-css": minor
+"@utrecht/custom-checkbox-css": minor
+"@utrecht/data-list-css": minor
+"@utrecht/data-placeholder-css": minor
+"@utrecht/digid-button-css": minor
+"@utrecht/document-css": minor
+"@utrecht/drawer-css": minor
+"@utrecht/emphasis-css": minor
+"@utrecht/figure-css": minor
+"@utrecht/flex-wrap-fallback-css": minor
+"@utrecht/focus-ring-css": minor
+"@utrecht/form-css": minor
+"@utrecht/form-field-css": minor
+"@utrecht/form-field-description-css": minor
+"@utrecht/form-field-error-message-css": minor
+"@utrecht/form-fieldset-css": minor
+"@utrecht/form-label-css": minor
+"@utrecht/form-toggle-css": minor
+"@utrecht/heading-1-css": minor
+"@utrecht/heading-2-css": minor
+"@utrecht/heading-3-css": minor
+"@utrecht/heading-4-css": minor
+"@utrecht/heading-5-css": minor
+"@utrecht/heading-6-css": minor
+"@utrecht/heading-css": minor
+"@utrecht/heading-group-css": minor
+"@utrecht/html-content-css": minor
+"@utrecht/iban-data-css": minor
+"@utrecht/icon": minor
+"@utrecht/img-css": minor
+"@utrecht/index-char-nav-css": minor
+"@utrecht/link-button-css": minor
+"@utrecht/link-css": minor
+"@utrecht/link-list-css": minor
+"@utrecht/link-social-css": minor
+"@utrecht/list-social-css": minor
+"@utrecht/listbox-css": minor
+"@utrecht/logo-button-css": minor
+"@utrecht/logo-css": minor
+"@utrecht/logo-image-css": minor
+"@utrecht/map-control-button-css": minor
+"@utrecht/map-marker-css": minor
+"@utrecht/mark-css": minor
+"@utrecht/multiline-data-css": minor
+"@utrecht/nav-bar-css": minor
+"@utrecht/nav-list-css": minor
+"@utrecht/number-badge-css": minor
+"@utrecht/number-data-css": minor
+"@utrecht/ordered-list-css": minor
+"@utrecht/page-body-css": minor
+"@utrecht/page-content-css": minor
+"@utrecht/page-css": minor
+"@utrecht/page-footer-css": minor
+"@utrecht/page-header-css": minor
+"@utrecht/page-layout-css": minor
+"@utrecht/pagination-css": minor
+"@utrecht/paragraph-css": minor
+"@utrecht/pre-heading-css": minor
+"@utrecht/preserve-data-css": minor
+"@utrecht/radio-button-css": minor
+"@utrecht/rich-text-css": minor
+"@utrecht/root-css": minor
+"@utrecht/search-bar-css": minor
+"@utrecht/select-css": minor
+"@utrecht/separator-css": minor
+"@utrecht/skip-link-css": minor
+"@utrecht/spotlight-section-css": minor
+"@utrecht/subscript-css": minor
+"@utrecht/superscript-css": minor
+"@utrecht/surface-css": minor
+"@utrecht/table-css": minor
+"@utrecht/table-of-contents-css": minor
+"@utrecht/textarea-css": minor
+"@utrecht/textbox-css": minor
+"@utrecht/top-task-link-css": minor
+"@utrecht/top-task-nav-css": minor
+"@utrecht/unordered-list-css": minor
+"@utrecht/url-data-css": minor
+"@utrecht/vega-visualization-css": minor
+---
+
+Add `tokens.mjs` and `tokens.d.mts` files to CSS packages.

.changeset/metal-mugs-join.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/icon": minor
+---
+
+Add `iconset.mjs` and `iconset.d.mts` files.

.changeset/plenty-turtles-boil.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/design-tokens": minor
+---
+
+Add `list.mjs` and `list.d.mts` to the design tokens package.

.changeset/selfish-pumas-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": patch
+---
+
+Use correct `stroke-width` syntax in SVG icon of the Accordion, and avoid warning in logs.

components/alternate-lang-nav/src/tokens.json

@@ -0,0 +1,5 @@
+{
+  "utrecht": {
+    "alternate-lang-nav": {}
+  }
+}

components/body/src/tokens.json

@@ -0,0 +1,46 @@
+{
+  "utrecht": {
+    "body": {
+      "font-family": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "*",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": ["<length>", "<number>"],
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "lineHeights"
+      }
+    }
+  }
+}

components/combobox/src/tokens.json

@@ -0,0 +1,18 @@
+{
+  "utrecht": {
+    "combobox": {
+      "popover": {
+        "z-index": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<number>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "other"
+        }
+      }
+    }
+  }
+}

components/heading/package.json

@@ -10,8 +10,13 @@
     "src/",
     "*.md"
   ],
-  "scripts": {},
-  "devDependencies": {},
+  "scripts": {
+    "build": "build-css-package",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "@utrecht/build-utils-css": "workspace:*"
+  },
   "keywords": [
     "nl-design-system"
   ],

components/heading/src/index.scss

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */

components/html-content/src/tokens.json

@@ -0,0 +1,5 @@
+{
+  "utrecht": {
+    "html-content": {}
+  }
+}

components/icon/src/build.js

@@ -93,7 +93,22 @@ writeComponentFile();
 const generateIconsNameFile = async () => {
   const data = await getIconData();
   await mkdir('dist', { recursive: true });
-  await writeFile(path.resolve(process.cwd(), 'dist/index.json'), generateIconsName(data), 'utf-8');
+  const json = generateIconsName(data);
+  await writeFile(path.resolve(process.cwd(), 'dist/index.json'), json, 'utf-8');
+  await writeFile(path.resolve(process.cwd(), 'dist/iconset.mjs'), `export default ${json};\n`, 'utf-8');
+  await writeFile(
+    path.resolve(process.cwd(), 'dist/iconset.d.mts'),
+    `export default iconset;
+
+declare interface Icon {
+  id: string;
+  src: string;
+  unicodeBidi?: boolean;
+}
+
+declare const iconset: Icon[];\n`,
+    'utf-8',
+  );
 };
 generateIconsNameFile();
 

components/page-layout/src/tokens.json

@@ -0,0 +1,5 @@
+{
+  "utrecht": {
+    "page-layout": {}
+  }
+}

packages/build-utils-css/src/index.mjs

@@ -1,4 +1,4 @@
-import { mkdir, writeFile } from 'node:fs/promises';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import postcss from 'postcss';
 import * as sass from 'sass';
@@ -89,6 +89,21 @@ const buildStyles = async (config) => {
   }
 };
 
+const buildTokens = async ({ inputFile, outputFile }) => {
+  const json = JSON.parse(await readFile(inputFile, 'utf-8'));
+
+  await writeFile(outputFile, `export default ${JSON.stringify(json, null, 2)};\n`);
+
+  await writeFile(
+    outputFile.replace('.mjs', '.d.mts'),
+    `
+declare const tokens: any;
+
+export default tokens;
+`,
+  );
+};
+
 buildStyles({
   inputFile: 'src/index.scss',
   outputFile: 'dist/index.css',
@@ -111,3 +126,8 @@ buildStyles({
   esm: true,
   dts: 'dist/index.mjs.d.ts',
 });
+
+buildTokens({
+  inputFile: 'src/tokens.json',
+  outputFile: 'dist/tokens.mjs',
+});

packages/component-library-react/src/Accordion.tsx

@@ -25,7 +25,7 @@ const IconChevronDown = () => (
     <g style={{ clipPath: 'url(#clippath)' }}>
       <path
         d="m7,8c-.26,0-.51-.1-.71-.29L.29,1.71C-.1,1.32-.1.68.29.29S1.32-.1,1.71.29l5.29,5.29L12.29.29c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-6,6c-.2.2-.45.29-.71.29Z"
-        style={{ strokeWidth: '0px;' }}
+        style={{ strokeWidth: '0px' }}
       />
     </g>
   </svg>

packages/storybook-helpers/src/addon-viewport.ts

@@ -16,6 +16,5 @@ export const addonViewport = {
         },
       },
     },
-    defaultViewport: 'responsive',
   },
 };

packages/storybook-react/package.json

@@ -7,6 +7,7 @@
   "keywords": [
     "nl-design-system"
   ],
+  "type": "module",
   "private": true,
   "repository": {
     "type": "git+ssh",
@@ -51,6 +52,7 @@
     "@storybook/react-vite": "7.4.6",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "7.4.6",
+    "@storybook/types": "7.4.6",
     "@types/lodash.merge": "4.6.9",
     "@types/react": "18.3.3",
     "@utrecht/accordion-css": "workspace:*",

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/accordion-css/README.md?raw';
-import tokensDefinition from '@utrecht/accordion-css/src/tokens.json';
+import tokensDefinition from '@utrecht/accordion-css/dist/tokens.mjs';
 import {
   AccordionProvider,
   AccordionSectionProps,
@@ -12,10 +12,10 @@ import {
   TableHeaderCell,
   TableRow,
 } from '@utrecht/component-library-react/dist/css-module';
-import tokens from '@utrecht/design-tokens/dist/index.json';
+import tokens from '@utrecht/design-tokens/dist/list.mjs';
 import { UtrechtIconChevronDown } from '@utrecht/web-component-library-react';
 import React, { ReactNode } from 'react';
-import { designTokenStory } from './util';
+import { designTokenStory } from './util.js';
 interface AccordionStoryProps {
   label: string;
   body: ReactNode;

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

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/alert-css/README.md?raw';
-import tokensDefinition from '@utrecht/alert-css/src/tokens.json';
+import tokensDefinition from '@utrecht/alert-css/dist/tokens.mjs';
 import { Alert, AlertProps, Heading1, Paragraph } from '@utrecht/component-library-react/dist/css-module';
-import tokens from '@utrecht/design-tokens/dist/index.json';
-import iconSet from '@utrecht/icon/dist/index.json';
+import tokens from '@utrecht/design-tokens/dist/list.mjs';
+import iconSet from '@utrecht/icon/dist/iconset.mjs';
 import React from 'react';
-import { designTokenStory } from './util';
+import { designTokenStory } from './util.js';
 
 interface AlertStoryProps extends AlertProps {
   icon?: string;

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/alert-dialog-css/README.md?raw';
-import tokensDefinition from '@utrecht/alert-dialog-css/src/tokens.json';
+import tokensDefinition from '@utrecht/alert-dialog-css/dist/tokens.mjs';
 import type { AlertDialogProps } from '@utrecht/component-library-react';
 import {
   AlertDialog,
@@ -9,9 +9,9 @@ import {
   Paragraph,
   PrimaryActionButton,
 } from '@utrecht/component-library-react/dist/css-module';
-import tokens from '@utrecht/design-tokens/dist/index.json';
+import tokens from '@utrecht/design-tokens/dist/list.mjs';
 import React, { createRef, PropsWithChildren, useState } from 'react';
-import { designTokenStory } from './util';
+import { designTokenStory } from './util.js';
 
 const meta = {
   title: 'React Component/Alert dialog',