Switch Storybook build to vite builder

.env

@@ -1,3 +1,10 @@
+# ViteJS based
+VITE_VERSION=latest
+VITE_BASE_API_URL=http://localhost:8000/api/v2/
+VITE_FORM_ID=93c09209-5fb9-4105-b6bb-9d9f0aa6782c
+VITE_USE_HASH_ROUTING=false
+
+# Legacy
 REACT_APP_VERSION=latest
 REACT_APP_BASE_API_URL=http://localhost:8000/api/v2/
 REACT_APP_FORM_ID=93c09209-5fb9-4105-b6bb-9d9f0aa6782c

.storybook/main.mts

@@ -0,0 +1,30 @@
+import {StorybookConfig} from '@storybook/react-vite';
+
+// https://github.com/storybookjs/storybook/issues/26291 vite-plugin-istanbul is
+// still causing CommonJS warnings, which is because of @storybook/addon-coverage,
+// see https://github.com/storybookjs/storybook/issues/26291#issuecomment-2378399131
+
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-addon-theme-provider',
+    'storybook-react-intl',
+    'storybook-addon-remix-react-router',
+    '@storybook/addon-coverage',
+    '@storybook/addon-webpack5-compiler-babel',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  staticDirs: ['../src/img/', '../public'],
+  docs: {},
+};
+
+export default config;

.storybook/modes.mjs

@@ -0,0 +1,14 @@
+export const allModes = {
+  smallMobile: {
+    viewport: 'smallMobile',
+  },
+  largeMobile: {
+    viewport: 'largeMobile',
+  },
+  tablet: {
+    viewport: 'tablet',
+  },
+  desktop: {
+    viewport: 'desktop',
+  },
+};

.storybook/preview.js

@@ -5,6 +5,7 @@ import 'design-token-editor/lib/css/dte.css';
 import 'design-token-editor/lib/css/root.css';
 import 'flatpickr';
 import 'flatpickr/dist/l10n/nl.js';
+import lodash from 'lodash';
 import {fixIconUrls as fixLeafletIconUrls} from 'map';
 import {initialize, mswLoader} from 'msw-storybook-addon';
 import {Formio, Templates} from 'react-formio';
@@ -25,9 +26,12 @@ import {
   withClearSessionStorage,
   withClearSubmissionLocalStorage,
 } from './decorators';
-import {reactIntl} from './reactIntl.js';
+import {allModes} from './modes.mjs';
+import {reactIntl} from './reactIntl.mjs';
 import ThemeProvider from './theme';
 
+window._ = lodash;
+
 initialize({
   onUnhandledRequest: 'bypass',
   serviceWorker: {
@@ -88,8 +92,8 @@ export default {
     chromatic: {
       // Here we specify the viewports of which we want snapshots in Chromatic
       modes: {
-        mobile: {viewport: 'smallMobile'},
-        desktop: {viewport: 'desktop'},
+        mobile: allModes.smallMobile,
+        desktop: allModes.desktop,
       },
     },
   },

.storybook/reactIntl.mjs

@@ -0,0 +1,17 @@
+import enMessages from '../src/i18n/compiled/en.json';
+import nlMessages from '../src/i18n/compiled/nl.json';
+
+// Populate the messages object
+const messages = {
+  nl: nlMessages,
+  en: enMessages,
+};
+
+const formats = {}; // optional, if you have any formats
+
+export const reactIntl = {
+  defaultLocale: 'nl',
+  locales: Object.keys(messages),
+  messages,
+  formats,
+};

fonts

@@ -0,0 +1 @@
+./src/fonts