Merge pull request #3621 from open-formulieren/chore/3620-upgrade-sto…

…rybook Upgrade storybook to v7
open-formulieren · Nov 21, 2023 · e3dc546 · e3dc546
2 parents 6d9710a + 55d7546
commit e3dc546
Show file tree

Hide file tree

Showing 74 changed files with 15,617 additions and 26,576 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -2,10 +2,12 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-  stories: [
-    '../src/openforms/js/**/*.stories.mdx',
-    '../src/openforms/js/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  stories: ['../src/openforms/js/**/*.mdx', '../src/openforms/js/**/*.stories.@(js|jsx|ts|tsx)'],
+
   staticDirs: [
     {from: '../static/admin', to: 'static/admin'},
     {from: '../static/fonts', to: 'static/fonts'},
@@ -15,16 +17,24 @@ module.exports = {
     {from: '../static/img', to: 'img'},
     {from: '../public', to: ''},
   ],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     'storybook-react-intl',
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5',
+  features: {
+    interactionsDebugger: true,
+    storyStoreV7: true,
+    buildStoriesJson: true,
   },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
   webpackFinal: async (config, {configType}) => {
     const isEnvProduction = configType === 'PRODUCTION';
 
@@ -71,4 +81,8 @@ module.exports = {
     );
     return config;
   },
+
+  docs: {
+    autodocs: 'tag',
+  },
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,7 +1,8 @@
 import '../src/openforms/scss/screen.scss';
 import '../src/openforms/scss/admin/admin_overrides.scss';
-import {initialize, mswDecorator} from 'msw-storybook-addon';
+import {initialize, mswDecorator, mswLoader} from 'msw-storybook-addon';
 import {reactIntl} from './reactIntl.js';
+import ReactModal from 'react-modal';
 
 initialize({
   onUnhandledRequest: 'bypass',
@@ -10,25 +11,26 @@ initialize({
   },
 });
 
-export const parameters = {
-  reactIntl,
-  locale: reactIntl.defaultLocale,
-  locales: {
-    nl: 'Nederlands',
-    en: 'English',
-  },
-  actions: {argTypesRegex: '^on[A-Z].*'},
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+ReactModal.setAppElement(document.getElementById('storybook-root'));
+
+export default {
+  decorators: [mswDecorator],
+  globals: {
+    locale: reactIntl.defaultLocale,
+    locales: {
+      nl: 'Nederlands',
+      en: 'English',
     },
   },
-  docs: {
-    source: {
-      type: 'dynamic',
-      excludeDecorators: true,
+  parameters: {
+    actions: {argTypesRegex: '^on[A-Z].*'},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
+    reactIntl,
   },
+  loaders: [mswLoader],
 };
-export const decorators = [mswDecorator];