refactor: ♻️ Update Babel configuration for Storybook compatibility a…

…nd make Storybook work with webpack

.babelrc

@@ -1,5 +1,10 @@
 {
-  "presets": ["react-app"],
+  "presets": [
+    "react-app",
+    // NOTE: explicitly defined to work with storybook
+    // transforming JSX syntax into regular JavaScript
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
   "env": {
     "development": {
       "plugins": [

.storybook/main.ts

@@ -1,21 +1,67 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
+import configFactory from "../config/webpack.config";
+
+import { mergeUniqueArrays } from "../utils";
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
+  webpackFinal: async (config, { configType }) => {
+    const customWebpackConfig = configFactory(configType?.toLocaleLowerCase() || "development");
+
+    if (configType === "DEVELOPMENT") {
+      // Modify config for development
+    }
+    if (configType === "PRODUCTION") {
+      // Modify config for production
+    }
+
+    if (config.resolve) {
+      if (config.resolve.modules)
+        config.resolve.modules = mergeUniqueArrays(config.resolve.modules, customWebpackConfig.resolve.modules);
+
+      if (config.resolve.extensions)
+        config.resolve.extensions = mergeUniqueArrays(
+          config.resolve.extensions,
+          customWebpackConfig.resolve.extensions
+        );
+    }
+
+    if (config.module?.rules) {
+      config.module.rules.push({
+        test: /\.css$/,
+        use: [
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: [require("tailwindcss")],
+              },
+            },
+          },
+        ],
+      });
+    }
+
+    return config;
+  },
   addons: [
-    "@storybook/addon-webpack5-compiler-swc",
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
+    "@storybook/addon-webpack5-compiler-babel",
   ],
   framework: {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+  staticDirs: ["../public"],
+  docs: {},
 };
 export default config;

.storybook/preview.ts

@@ -1,5 +1,9 @@
 import type { Preview } from "@storybook/react";
 
+import { withThemeByClassName } from "@storybook/addon-themes";
+
+import "../src/index.css";
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -9,6 +13,19 @@ const preview: Preview = {
       },
     },
   },
+  tags: ["autodocs"],
 };
 
 export default preview;
+
+/* snipped for brevity */
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      // nameOfTheme: 'classNameForTheme',
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+  }),
+];