updated storybook webpack config

.storybook/main.js

@@ -0,0 +1,35 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const custom = require('../webpack.config.js')()
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  webpackFinal: (config) => {
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: custom.module.rules, // babel, sass, fonts and images loaders
+      },
+      resolve: {
+        ...config.resolve,
+        ...custom.resolve, // custom imports resolvers
+      },
+      plugins: [
+        new MiniCssExtractPlugin({
+          filename: '[name].[contenthash].css',
+        }),
+        ...config.plugins,
+      ],
+    }
+  },
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}