small fix to run theme-switcher for windows environment, add rhc-alert to themes

Author: Roanheid

packages/components-react/design-tokens-table-react/package.json

@@ -31,7 +31,7 @@
   },
   "scripts": {
     "build": "rollup --config ./rollup.config.mjs",
-    "clean": "rimraf ./dist/ ./*.tsbuildinfo ./.rollup.cache/",
+    "clean": "rimraf ./dist/ ./tmp/ ./.rollup.cache/",
     "config": "tsc --showConfig",
     "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage",
     "typecheck": "tsc"

packages/components-react/design-tokens-table-react/tsconfig.build.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "composite": false,
     "declaration": true,
-    "declarationMap": true
+    "declarationMap": true,
+    "incremental": true,
+    "tsBuildInfoFile": "./tmp/tsconfig.dist.tsbuildinfo"
   },
   "include": ["src/*.ts", "src/*.tsx"],
   "exclude": ["src/**/*.test.*"]

packages/design-tokens-definition/src/collection.ts

@@ -1,14 +1,18 @@
 import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
 import merge from 'lodash-es/merge';
 
 const tokenPackages = ['@utrecht/component-library-design-tokens/dist/tokens.json'];
 
 export const getCommunityTokens = async () => {
   const tokens = await Promise.all(
     tokenPackages.map(async (tokensPath) => {
-      const path = new URL(import.meta.resolve(tokensPath)).pathname;
+      const url = import.meta.resolve(tokensPath);
+      const path = fileURLToPath(url);
+
       return JSON.parse(await readFile(path, 'utf-8'));
     }),
   );
+
   return merge({}, ...tokens);
 };

packages/theme-switcher/package.json

@@ -22,7 +22,7 @@
     "directory": "packages/theme-switcher"
   },
   "scripts": {
-    "build": "mkdir -p dist/ && node src/generate-json.mjs",
+    "build": "mkdirp dist && node src/generate-json.mjs",
     "clean": "rimraf dist/"
   },
   "devDependencies": {
@@ -47,6 +47,7 @@
     "@nl-design-system-unstable/westervoort-design-tokens": "workspace:*",
     "@nl-design-system-unstable/zevenaar-design-tokens": "workspace:*",
     "@nl-design-system-unstable/zwolle-design-tokens": "workspace:*",
+    "mkdirp": "3.0.1",
     "rimraf": "6.0.1"
   }
 }

packages/theme-toolkit/src/component-stories-rhc.tsx

@@ -1,5 +1,5 @@
 import { STORY_GROUPS } from './component-stories-util';
-import { DotBadge, Logo } from '@rijkshuisstijl-community/components-react';
+import { DotBadge, Alert, Heading, Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 
 export const RHC_COMPONENT_STORIES = [
   {
@@ -16,4 +16,16 @@ export const RHC_COMPONENT_STORIES = [
     name: 'Rijkshuisstijl Logo',
     render: () => <Logo organisation="Rijkshuisstijl-community" />,
   },
+  {
+    storyId: 'react-rhc-alert--default',
+    component: 'rhc-alert',
+    group: STORY_GROUPS['ALERTS'],
+    name: 'Rijkshuisstijl Alert',
+    render: () => (
+      <Alert type="info">
+        <Heading level={3}>Heading</Heading>
+        <Paragraph>Lorem ipsum dolor sit amet, consectetur ad isicing elit, sed do eiusmod</Paragraph>
+      </Alert>
+    ),
+  },
 ];

packages/voorbeeld-design-tokens/documentation/alert/rhc-alert.stories.tsx

@@ -0,0 +1,49 @@
+import { Alert, Heading, Paragraph } from '@rijkshuisstijl-community/components-react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  id: 'rhc-alert',
+  title: 'Components/Alert/Rijkshuisstijl Community',
+  component: Alert,
+  parameters: { actions: { disable: true } },
+  argTypes: {
+    children: {
+      description: 'HTML content of the alert',
+    },
+    type: {
+      description: 'Type',
+      control: { type: 'select' },
+      options: ['', 'error', 'info', 'ok', 'warning'],
+    },
+  },
+  args: {
+    children: (
+      <>
+        <Heading level={2}>Lorem ipsum</Heading>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </Paragraph>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Alert>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+// Een story met het voorbeeld thema
+export const VoorbeeldTheme: Story = {
+  name: 'Voorbeeld theme',
+  parameters: { theme: 'voorbeeld-theme' },
+};
+
+// Een story met het thema van de organisatie die de component bijdraagt
+export const RijkshuisstijlTheme: Story = {
+  name: 'Rijkshuisstijl Community theme',
+  parameters: { theme: 'rhc-theme' },
+};