Refactor Storybook configuration to use Webpack 5 and update related …

…dependencies
vasapolrittideah · Jan 23, 2025 · 05bcc78 · 05bcc78
1 parent ead75b8
commit 05bcc78
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 15 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
@@ -1,6 +1,9 @@
-import path from 'path';
+import { resolve } from 'path';
 
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 const config: StorybookConfig = {
   stories: [
@@ -12,18 +15,46 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/addon-webpack5-compiler-swc',
   ],
   framework: {
-    name: '@storybook/react-vite',
+    name: '@storybook/react-webpack5',
     options: {},
   },
-  viteFinal: async (config) => {
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+  webpackFinal: async (config) => {
     if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve.alias,
-        '@': path.resolve(__dirname, '../src'),
-      };
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
     }
+
+    config.module?.rules?.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: [tailwindcss(), autoprefixer()],
+            },
+          },
+        },
+      ],
+      include: resolve(__dirname, '../'),
+    });
+
     return config;
   },
 };

diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
@@ -1,10 +1,9 @@
 import type { Preview } from '@storybook/react';
-import '../lib/styles.css';
+import '../global.css';
 
 const preview: Preview = {
   parameters: {
     controls: {
-      disableSaveFromUI: true,
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,

diff --git a/packages/ui/bun.lockb b/packages/ui/bun.lockb
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -22,7 +22,7 @@
   },
   "scripts": {
     "build": "vite build",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --debug",
     "build-storybook": "storybook build",
     "generate:component": "plop"
   },
@@ -34,17 +34,21 @@
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
     "@storybook/blocks": "^8.4.7",
+    "@storybook/builder-vite": "^8.5.1",
+    "@storybook/cli": "^8.5.1",
     "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@storybook/react-webpack5": "^8.5.1",
     "@storybook/test": "^8.4.7",
     "@types/bun": "latest",
     "@types/react": "^18.2.61",
     "autoprefixer": "^10.4.18",
     "plop": "^4.0.1",
     "postcss": "^8.4.35",
-    "storybook": "^8.4.7",
+    "storybook": "8.5.1",
     "tailwindcss": "^3.4.1",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "5.5.4",
     "vite": "^6.0.11",
     "vite-plugin-dts": "^4.5.0",
@@ -54,6 +58,8 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "ajv": "latest"
+    "ajv": "latest",
+    "crypto": "^1.0.1",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -9,6 +9,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["images.d.ts", "src", "lib", "lib/components.ts"],
+  "include": [".storybook", "images.d.ts", "src", "lib"],
   "exclude": ["node_modules"]
 }