fix: update storybook

Author: martinjagodic

.storybook/main.js

@@ -0,0 +1,39 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../packages/**/src/**/?(*.)(story|stories).(js|jsx|ts|tsx|mdx)'],
+
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+    '@storybook/addon-a11y',
+    'storybook-addon-deep-controls',
+    'storybook-dark-mode',
+    '@storybook/addon-webpack5-compiler-babel',
+  ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: false,
+      },
+    },
+  },
+
+  webpackFinal: async (config) => {
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'decap-cms-ui-next': path.resolve(__dirname, '../packages/decap-cms-ui-next/src'),
+      'decap-cms-locales': path.resolve(__dirname, '../packages/decap-cms-locales/src'),
+    };
+    return config;
+  },
+};

.storybook/main.ts

@@ -1,31 +1,45 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
 
-import { dirname, join } from 'path';
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = join(__filename, '..');
 
 const config: StorybookConfig = {
   stories: ['../packages/**/src/**/?(*.)(story|stories).(js|jsx|ts|tsx|mdx)'],
 
   addons: [
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/addon-storysource'),
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('storybook-addon-deep-controls'),
-    getAbsolutePath('storybook-dark-mode'),
-    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+    '@storybook/addon-a11y',
+    'storybook-addon-deep-controls',
+    'storybook-dark-mode',
+    '@storybook/addon-webpack5-compiler-babel',
   ],
 
   framework: {
-    name: getAbsolutePath('@storybook/react-webpack5'),
-    options: {},
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: false,
+      },
+    },
+  },
+
+  webpackFinal: async (config) => {
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'decap-cms-ui-next': join(__dirname, '../packages/decap-cms-ui-next/src'),
+      'decap-cms-locales': join(__dirname, '../packages/decap-cms-locales/src'),
+    };
+    return config;
   },
 };
 export default config;