chore: bump Storybook Rsbuild to v3 (#369)

Author: fi3ework

pnpm-lock.yaml

@@ -1,16 +1,17 @@
-import { createRequire } from 'node:module';
-import { dirname, join } from 'node:path';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import type { StorybookConfig } from 'storybook-react-rsbuild';
 
-const require = createRequire(import.meta.url);
-
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
+const getAbsolutePath = (value: string): any => {
+  return resolve(
+    fileURLToPath(new URL(import.meta.resolve(`${value}/package.json`, import.meta.url))),
+    '..',
+  );
+};
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

rslib/module-federation/mf-react-component/.storybook/main.ts

@@ -29,8 +29,8 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "storybook": "^10.0.8",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-react-rsbuild": "^2.1.6"
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-react-rsbuild": "^3.0.0"
   },
   "peerDependencies": {
     "react": "*"

rslib/module-federation/mf-react-component/package.json

@@ -1,16 +1,17 @@
-import { createRequire } from 'node:module';
-import { dirname, join } from 'node:path';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import type { StorybookConfig } from 'storybook-react-rsbuild';
 
-const require = createRequire(import.meta.url);
-
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
+const getAbsolutePath = (value: string): any => {
+  return resolve(
+    fileURLToPath(new URL(import.meta.resolve(`${value}/package.json`, import.meta.url))),
+    '..',
+  );
+};
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

rslib/react-storybook/.storybook/main.ts

@@ -29,8 +29,8 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "storybook": "^10.0.8",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-react-rsbuild": "^2.1.6",
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-react-rsbuild": "^3.0.0",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {

rslib/react-storybook/package.json

@@ -1,16 +1,17 @@
-import { createRequire } from 'node:module';
-import { dirname, join } from 'node:path';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import type { StorybookConfig } from 'storybook-vue3-rsbuild';
 
-const require = createRequire(import.meta.url);
-
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value) {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
+const getAbsolutePath = (value: string): any => {
+  return resolve(
+    fileURLToPath(new URL(import.meta.resolve(`${value}/package.json`, import.meta.url))),
+    '..',
+  );
+};
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

rslib/vue-storybook/.storybook/main.ts

@@ -26,8 +26,8 @@
     "@storybook/vue3": "^10.0.8",
     "rsbuild-plugin-unplugin-vue": "^0.1.0",
     "storybook": "^10.0.8",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-vue3-rsbuild": "^2.1.6",
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-vue3-rsbuild": "^3.0.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.21",
     "vue-tsc": "^3.1.5"