feat(storybook): upgrade storybook to rsbuild remove webpack as a dep (#9062)

package.json

@@ -26,11 +26,6 @@
     "@jest/globals": "^29.2.0",
     "@playwright/test": "1.62.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/builder-webpack5": "^10.1.10",
-    "@storybook/react": "^10.1.10",
-    "@storybook/react-webpack5": "^10.1.10",
     "@stylistic/eslint-plugin": "^5.3.1",
     "@types/adm-zip": "^0.5.8",
     "@types/jest": "^29.5.11",
@@ -54,7 +49,6 @@
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
-    "storybook": "^10.1.10",
     "ts-jest": "^29.2.6"
   },
   "scripts": {
@@ -123,4 +117,4 @@
     "ajv": "^8.18.0",
     "git-url-parse": "^14.1.0"
   }
-}
+}

packages/bruno-app/package.json

@@ -123,12 +123,14 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.22.0",
-    "@rsbuild/core": "^1.1.2",
+    "@rsbuild/core": "^1.7.6",
     "@rsbuild/plugin-babel": "^1.0.3",
     "@rsbuild/plugin-node-polyfill": "1.2.0",
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
-    "@rsbuild/plugin-styled-components": "1.1.0",
+    "@rsbuild/plugin-styled-components": "^1.6.3",
+    "@storybook/addon-docs": "^10.5.9",
+    "@storybook/react": "^10.5.9",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -137,22 +139,15 @@
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
-    "css-loader": "7.1.2",
-    "file-loader": "^6.2.0",
-    "html-loader": "^3.0.1",
-    "html-webpack-plugin": "^5.5.0",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.4.5",
     "postcss": "8.5.23",
-    "postcss-loader": "^8.1.1",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.4.1",
-    "webpack": "^5.104.1",
-    "webpack-cli": "^4.9.1"
+    "storybook": "^10.5.9",
+    "storybook-react-rsbuild": "3.4.2",
+    "tailwindcss": "^3.4.1"
   },
   "overrides": {
     "httpsnippet": {
       "form-data": "4.0.4"
     }
   }
-}
+}

packages/bruno-app/plugins/remote-images/loader.cjs

@@ -141,7 +141,13 @@ module.exports = function remoteImagesLoader(source) {
 
     const urlToAssetPath = new Map();
     for (const url of urls) {
-      const { cachePath, hash } = await ensureCachedImage(url);
+      const { cachePath, hash } = await ensureCachedImage(url).catch((err) => {
+        console.warn(`remote-images: failed to download ${url} (${err.message})`);
+        return { cachePath: null, hash: null };
+      });
+      if (!cachePath || !hash) {
+        continue;
+      }
       const filename = assetFilenameFromHash(hash, url);
       // emitFile API needs Buffer; read one file at a time after streaming to disk
       const buffer = await readCachedFile(cachePath);

packages/bruno-app/rsbuild.config.mjs

@@ -41,8 +41,11 @@ export default defineConfig({
       '**/*.test.*',
       '**/*.spec.*'
     ],
-    // swagger-ui-react needs immutable@4 (CJS default export). sass hoists
-    // immutable@5 to the repo root; redux-immutable is hoisted there too.
+  },
+  resolve: {
+    // swagger-ui-react nests immutable@3 (CJS default export). sass hoists
+    // immutable@5 to the repo root, which dropped that default; redux-immutable
+    // is also hoisted there, so without this alias it loads v5 and crashes.
     alias: {
       immutable$: swaggerImmutable
     }
@@ -67,7 +70,7 @@ export default defineConfig({
       externals: {
         // List specific Node.js modules you want to exclude
         // Format: 'module-name': 'commonjs module-name'
-        'worker_threads': 'commonjs worker_threads',
+        'node:worker_threads': 'commonjs worker_threads',
         // 'path': 'commonjs path'
       },
       optimization: {

packages/bruno-app/storybook/main.js

@@ -1,62 +1,10 @@
-const path = require('path');
-
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+/** @type { import('storybook-react-rsbuild').StorybookConfig } */
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-webpack5-compiler-babel',
-    '@storybook/addon-docs'
-  ],
+  addons: ['@storybook/addon-docs'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: 'storybook-react-rsbuild',
     options: {}
-  },
-  docs: {
-    autodocs: true
-  },
-  webpackFinal: async (config) => {
-    // Add path aliases to match jsconfig.json
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      assets: path.resolve(__dirname, '../src/assets'),
-      ui: path.resolve(__dirname, '../src/ui'),
-      components: path.resolve(__dirname, '../src/components'),
-      hooks: path.resolve(__dirname, '../src/hooks'),
-      themes: path.resolve(__dirname, '../src/themes'),
-      api: path.resolve(__dirname, '../src/api'),
-      pageComponents: path.resolve(__dirname, '../src/pageComponents'),
-      providers: path.resolve(__dirname, '../src/providers'),
-      utils: path.resolve(__dirname, '../src/utils')
-    };
-
-    // Storybook's default CSS rule only runs css-loader + style-loader, so the
-    // Tailwind directives in src/styles/globals.css never expand. Append
-    // postcss-loader (which reads postcss.config.js → tailwindcss + autoprefixer)
-    // to every existing CSS rule so utility classes actually apply.
-    const postcssLoader = {
-      loader: 'postcss-loader',
-      options: {
-        postcssOptions: { config: path.resolve(__dirname, '../postcss.config.js') }
-      }
-    };
-    const loaderName = (entry) => (typeof entry === 'string' ? entry : (entry && entry.loader) || '');
-    const addPostcss = (rules = []) => {
-      rules.forEach((rule) => {
-        if (!rule || typeof rule !== 'object') return;
-        if (Array.isArray(rule.oneOf)) addPostcss(rule.oneOf);
-        if (Array.isArray(rule.rules)) addPostcss(rule.rules);
-        const test = rule.test && rule.test.toString();
-        if (test && test.includes('css') && Array.isArray(rule.use)) {
-          const uses = rule.use.map(loaderName);
-          if (uses.some((u) => u.includes('css-loader')) && !uses.some((u) => u.includes('postcss-loader'))) {
-            rule.use.push(postcssLoader);
-          }
-        }
-      });
-    };
-    addPostcss(config.module.rules);
-
-    return config;
   }
 };
 

packages/bruno-electron/package.json

@@ -54,16 +54,16 @@
     "axios-ntlm": "^1.4.2",
     "chai": "^4.3.7",
     "chokidar": "^3.5.3",
-    "cors": "^2.8.5",
     "content-disposition": "^0.5.4",
+    "cors": "^2.8.5",
     "decomment": "^0.9.5",
     "diff": "^8.0.3",
     "dotenv": "^16.0.3",
     "electron-is-dev": "^2.0.0",
     "electron-notarize": "^1.2.2",
     "electron-store": "^8.1.0",
-    "express": "^4.21.2",
     "electron-util": "^0.17.2",
+    "express": "^4.21.2",
     "extract-zip": "^2.0.1",
     "form-data": "4.0.4",
     "fs-extra": "^10.1.0",
@@ -78,7 +78,7 @@
     "mime-types": "^2.1.35",
     "nanoid": "3.3.18",
     "qs": "^6.15.2",
-    "simple-git": "3.36.0",
+    "simple-git": "3.32.3",
     "socks-proxy-agent": "^8.0.2",
     "tough-cookie": "^6.0.0",
     "uuid": "^10.0.0",
@@ -94,4 +94,4 @@
     "electron-builder": "^24.13.3",
     "electron-devtools-installer": "^4.0.0"
   }
-}
+}

playwright.benchmark.config.ts

@@ -25,7 +25,8 @@ export default defineConfig({
   webServer: [
     {
       command: 'npm run dev:web',
-      url: 'http://localhost:3000',
+      stdout: 'pipe',
+      wait: { stdout: /ready\s+built in/i },
       reuseExistingServer: !process.env.CI,
       timeout: 10 * 60 * 1000
     }

playwright.config.ts

@@ -53,7 +53,8 @@ export default defineConfig({
   webServer: [
     {
       command: 'npm run dev:web',
-      url: 'http://localhost:3000',
+      stdout: 'pipe', 
+      wait: { stdout: /ready\s+built in/i },
       reuseExistingServer: !process.env.CI,
       timeout: 10 * 60 * 1000
     },