feat: rspack in storybook 8 (#108)

* deps: upgrade deps * Update deps once more * Reorder package.json * feat: rspack in storybook * Fix some things
datavisyn · Jan 21, 2025 · e76e5be · e76e5be
1 parent 4cdbc23
commit e76e5be
Show file tree

Hide file tree

Showing 6 changed files with 1,160 additions and 3,381 deletions.
diff --git a/config/storybook.main.template.js b/config/storybook.main.template.js
@@ -1,83 +1,37 @@
+const { resolve } = require('path');
+
 /**
- * @type {import('@storybook/react-webpack5').StorybookConfig}
+ * @type {import('storybook-react-rsbuild').StorybookConfig}
  */
 module.exports = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    {
-      name: '@storybook/addon-styling',
-      options: {
-        // This is our best guess to replicate the style config we are using in the rspack.config.js
-        scssBuildRule: {
-          test: /\.scss$/,
-          use: [
-            'style-loader',
-            {
-              loader: 'css-loader',
-              options: { importLoaders: 1 },
-            },
-            'resolve-url-loader',
-            {
-              loader: 'sass-loader',
-              options: {
-                sourceMap: true,
-              },
-            },
-          ],
-        },
-      },
-    },
-    'storybook-addon-swc',
   ],
   framework: {
-    // TODO: as soon as rspack storybook integration is ready, use that: https://www.rspack.dev/guide/migrate-storybook
-    name: '@storybook/react-webpack5',
+    name: 'storybook-react-rsbuild',
     options: {
       builder: {
-        useSWC: true,
+        rsbuildConfigPath: resolve(__dirname, './storybook.rsbuild.config.ts'),
       },
     },
   },
-  webpackFinal: async (config) => {
+  rsbuildFinal: async (config) => {
+    const reactDocgenLoaderRule = config.tools.rspack[1].module.rules[0];
+
     // eslint-disable-next-line no-param-reassign
-    config.module.rules = config.module.rules.flatMap((rule) => (rule.loader?.includes('swc-loader')
-      ? [
-        {
-          ...rule,
-          options: {
-            ...(rule?.options || {}),
-            jsc: {
-              ...(rule?.options?.jsc || {}),
-              parser: {
-                ...(rule?.options?.jsc?.parser || {}),
-                // Sync rules with our rspack config
-                decorators: true,
-              },
-            },
-          },
-        },
-        {
-          // In addition to the swc-loader rule from storybook, add a rule which allows transforming ts and tsx files (i.e. to transform node_modules/visyn_core)
-          ...rule,
-          options: {
-            ...(rule?.options || {}),
-            jsc: {
-              ...(rule?.options?.jsc || {}),
-              parser: {
-                ...(rule?.options?.jsc?.parser || {}),
-                // Sync rules with our rspack config
-                decorators: true,
-              },
-            },
-          },
-          test: /\.(ts|tsx)$/,
-          exclude: [],
-        },
-      ]
-      : [rule]));
+    config.tools.rspack[1].module.rules = [
+      reactDocgenLoaderRule,
+      {
+        // Copy the rule (found here: https://github.com/rspack-contrib/storybook-rsbuild/blob/c6b92bd1d40b63cebdf78b8bf75594ec0568b972/packages/framework-react/src/react-docs.ts#L27)
+        // And modify it to not exclude node_modules
+        ...reactDocgenLoaderRule,
+        test: /\.(tsx?)$/,
+        exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))/,
+      },
+    ];
 
     return config;
   },

diff --git a/config/storybook.rsbuild.config.ts b/config/storybook.rsbuild.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
+
+// This is the rsbuild configuration used by storybook, it is not the same as the rspack config!
+export default defineConfig({
+  plugins: [pluginReact(), pluginSass()],
+});
diff --git a/package.json b/package.json
@@ -34,6 +34,9 @@
   },
   "dependencies": {
     "@kesills/eslint-config-airbnb-typescript": "^20.0.0",
+    "@rsbuild/core": "^1.2.0",
+    "@rsbuild/plugin-react": "^1.1.0",
+    "@rsbuild/plugin-sass": "^1.2.0",
     "@rsdoctor/cli": "^0.4.13",
     "@rsdoctor/rspack-plugin": "^0.4.13",
     "@rspack/cli": "~1.2.0",
@@ -98,7 +101,8 @@
   "devDependencies": {
     "@types/yargs": "^17.0.33",
     "http-server": "^14.1.1",
-    "jest-dev-server": "^6.2.0"
+    "jest-dev-server": "^6.2.0",
+    "storybook-react-rsbuild": "^0.1.8"
   },
   "peerDependencies": {
     "@types/react": "^18.3.18",

diff --git a/tests_fixtures/standalone_template/.storybook/preview.jsx b/tests_fixtures/standalone_template/.storybook/preview.jsx
@@ -4,7 +4,6 @@ import '../workspace.scss';
  * @type {import('@storybook/react').Parameters}
  */
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'fullscreen',
   controls: {
     matchers: {

diff --git a/tests_fixtures/standalone_template/package.json b/tests_fixtures/standalone_template/package.json
@@ -51,26 +51,24 @@
     "bundle:prod": "visyn_scripts bundle --mode production --env workspace_mode=single"
   },
   "dependencies": {
-    "cypress": "^13.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "cypress": "^13.15.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "visyn_scripts": "portal:../../"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.20",
-    "@storybook/addon-essentials": "^7.6.20",
-    "@storybook/addon-interactions": "^7.6.20",
-    "@storybook/addon-links": "^7.6.20",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/cli": "^7.6.20",
-    "@storybook/react": "^7.6.20",
-    "@storybook/react-webpack5": "^7.6.20",
-    "@storybook/testing-library": "0.2.2",
-    "@types/react": "18.2.42",
-    "@types/react-dom": "^18.0.0",
-    "storybook": "^7.6.20",
-    "storybook-addon-swc": "^1.2.0"
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/cli": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "storybook": "^8.4.7",
+    "storybook-react-rsbuild": "^0.1.6"
   },
   "resolutions": {
     "visyn_scripts": "portal:../../"