✨ [REFACTORING] implement preact webcomponent

Author: stefrado

.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

.storybook/main.ts

@@ -1,37 +1,14 @@
-import { StorybookConfig } from '@storybook/react-vite';
-import path from 'path';
+import type { StorybookConfig } from '@storybook/preact-vite';
 import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  core: {
-    disableWhatsNewNotifications: true,
-  },
-  stories: [
-    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-    '../src/open_inwoner/react/components/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  framework: { name: '@storybook/preact-vite', options: {} },
+  core: { disableWhatsNewNotifications: true },
+  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
-
+  docs: { autodocs: true },
   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: {
@@ -42,20 +19,11 @@ const config: StorybookConfig = {
           },
         },
       },
-      build: {
-        target: 'esnext',
-      },
+      build: { target: 'esnext' },
       // Ensure esbuild doesn't add refresh runtime
-      esbuild: {
-        jsx: 'automatic',
-      },
+      esbuild: { jsx: 'automatic' },
     });
   },
-
-  typescript: {
-    check: false, // Disable TypeScript checking to avoid conflicts
-    reactDocgen: 'react-docgen-typescript',
-  },
 };
 
 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',