Implement Preact + Web Components

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version-file: '.nvmrc'
       - run: npm ci
       - run: npm run test:ci
       - run: npm run type-check
@@ -288,7 +288,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version-file: '.nvmrc'
       - run: npm ci
 
       # Build frontend assets first to generate CSS bundle

.nvmrc

@@ -1 +1 @@
-20
+20.19

.storybook/main.ts

@@ -1,61 +1,16 @@
-import { StorybookConfig } from '@storybook/react-vite';
-import path from 'path';
-import { mergeConfig } from 'vite';
+import type { StorybookConfig } from '@storybook/preact-vite';
 
 const config: StorybookConfig = {
   framework: {
-    name: '@storybook/react-vite',
+    name: '@storybook/preact-vite',
     options: {},
   },
   core: {
     disableWhatsNewNotifications: true,
   },
-  stories: [
-    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-    '../src/open_inwoner/react/components/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-essentials', '@chromatic-com/storybook'],
-  docs: {
-    autodocs: true,
-  },
-  // staticDirs: ['../src/open_inwoner/static'], // For OIP icon fonts
-
-  viteFinal: async (config) => {
-    return mergeConfig(config, {
-      resolve: {
-        alias: {
-          '@react': path.resolve(__dirname, '../src/open_inwoner/react'),
-          '@webcomponents': path.resolve(
-            __dirname,
-            '../src/open_inwoner/webcomponents'
-          ),
-        },
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.mdx'],
-      },
-      css: {
-        preprocessorOptions: {
-          scss: {
-            includePaths: ['node_modules'],
-            additionalData: '', // global SCSS imports
-            outputStyle: 'compressed',
-            sourceComments: false,
-          },
-        },
-      },
-      build: {
-        target: 'esnext',
-      },
-      // Ensure esbuild doesn't add refresh runtime
-      esbuild: {
-        jsx: 'automatic',
-      },
-    });
-  },
-
-  typescript: {
-    check: false, // Disable TypeScript checking to avoid conflicts
-    reactDocgen: 'react-docgen-typescript',
-  },
+  docs: { autodocs: true },
 };
 
 export default config;

.storybook/preview.tsx

@@ -1,32 +1,19 @@
-import type { Preview } from '@storybook/react';
-import type { StoryFn } from '@storybook/react';
-
-// NLDS keys
-// @ts-expect-error - CSS imports handled by bundler
 import '@open-inwoner/design-tokens/dist/css/index.css';
-// NLDS values
-// @ts-expect-error
+import { Preview } from '@storybook/preact';
+import {
+  withIntl,
+  withThemeClass,
+} from '../src/open_inwoner/react/lib/decorators';
 import '../src/open_inwoner/static/bundles/open_inwoner-css.css';
 
-const withThemeClass = (Story: StoryFn) => {
-  document.body.classList.add('openinwoner-theme');
-
-  return <Story />;
-};
-
 const preview: Preview = {
-  decorators: [withThemeClass],
+  decorators: [withThemeClass, withIntl],
   parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
+    controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },
     options: {
       storySort: {
         method: 'alphabetical',
-        order: ['Introduction', 'Developers', 'React'],
+        order: ['Introduction', 'Developers', 'Preact'],
       },
     },
     layout: 'centered',

CHANGELOG.rst

@@ -44,6 +44,9 @@ Deployment aandachtspunten
   de primaire kleur (CSS-variabelen ``--color-primary`` en ``--color-secondary``) is hier nu een
   stijl verandering te zien. Call-to-action elementen gebruiken nu altijd de primaire kleur. Hierdoor
   worden de knoppen in tegels niet langer in een afwijkende secundaire kleur weergegeven.
+* Controleer of de nieuwe frontend web-componenten correct functioneren. In sommige gevallen wordt de
+  frontend-bundle mogelijk niet volledig overschreven.
+
 
 Nieuwe features
 ---------------
@@ -93,12 +96,14 @@ Nieuwe features
   belangrijk kan zijn voor security audits (zoals PENTests) van bijvoorbeeld DigiD.
   Standaard blijven de hints ingeschakeld om het huidige gedrag te behouden.
 * [:taiga-us:`3580`, :pr:`2033`]: De zoekfunctie kan nu worden uitgeschakeld in de Algemene Configuratie.
-* [:taiga-is`3600`, :pr:`2046`]: 'Signing requets' toegevoegd aan admin. Beheerders kunnen nu een CSR
+* [:taiga-is:`3600`, :pr:`2046`]: 'Signing requests' toegevoegd aan admin. Beheerders kunnen nu een CSR
   (Certificate Signing Request) genereren in de admin via 'Datakoppelingen > Ondertekeningsverzoeken'.
 * [:taiga-us:`3579`, :pr:`2049`]: Het commando om de ZGW Catalogus te importeren geeft
   nu uitgebreidere informatie (bijvoorbeeld welke zaaktypes wel zijn ontvangen maar niet
   gesynchroniseerd vanwege een geconfigureerd filter), en zorgt ervoor dat alle velden
   uit de API correct worden overgenomen in de lokale versie van de catalogus.
+* [:taiga-us:`3578`, :pr:`2043`]: Nieuw Front-end ontwerp voor CMS plug-in 'Balie Afspraken' gebouwd met
+  design-tokens volgens het NLDS principe.
 
 Bugfixes
 --------

build/paths.js

@@ -28,9 +28,6 @@ module.exports = {
   // Path to the js entry point (source)
   reactEntry: sourcesRoot + 'react/main.ts',
 
-  // Path to the web components entry point (source)
-  webComponentsEntry: sourcesRoot + 'webcomponents/index.ts',
-
   // Path to js (sources)
   jsSrc: sourcesRoot + 'js/**/*.js',