feat(create-rslib): bump Storybook to v10 (#1309)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: fi3ework <[email protected]>

Author: renovate[bot]

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

@@ -1,16 +1,19 @@
-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: [
@@ -22,6 +25,8 @@ const config: StorybookConfig = {
     options: {},
   },
   addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-onboarding',
     {
       name: getAbsolutePath('storybook-addon-rslib'),
       options: {
@@ -40,6 +45,10 @@ const config: StorybookConfig = {
       },
     },
   ],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    check: true,
+  },
 };
 
 export default config;

examples/module-federation/mf-react-component/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

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

@@ -22,15 +22,19 @@
     "@module-federation/enhanced": "^0.21.6",
     "@module-federation/rsbuild-plugin": "^0.21.6",
     "@module-federation/storybook-addon": "^5.0.1",
+    "@rsbuild/core": "~1.6.9",
     "@rsbuild/plugin-react": "^1.4.2",
     "@rslib/core": "workspace:*",
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/react": "^10.1.0",
     "@types/react": "^19.2.6",
     "http-server": "^14.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "storybook": "^9.1.16",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-react-rsbuild": "^2.1.6"
+    "storybook": "^10.1.0",
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-react-rsbuild": "^3.0.0"
   },
   "peerDependencies": {
     "react": "*"

examples/vue-component-bundleless/.storybook/main.ts

@@ -1,16 +1,19 @@
-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: 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: [

examples/vue-component-bundleless/package.json

@@ -13,14 +13,15 @@
     "test": "vitest run"
   },
   "devDependencies": {
+    "@rsbuild/core": "~1.6.9",
     "@rslib/core": "workspace:*",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-onboarding": "^9.1.16",
-    "@storybook/vue3": "^9.1.16",
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/vue3": "^10.1.0",
     "rsbuild-plugin-unplugin-vue": "^0.1.0",
-    "storybook": "^9.1.16",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-vue3-rsbuild": "^2.1.6",
+    "storybook": "^10.1.0",
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-vue3-rsbuild": "^3.0.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
     "vue-tsc": "^3.1.5"

packages/create-rslib/fragments/tools/storybook-react-js/.storybook/main.js

@@ -1,15 +1,18 @@
-import { createRequire } from 'node:module';
-import { dirname, join } from 'node:path';
-
-const require = createRequire(import.meta.url);
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node: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) => {
+  return resolve(
+    fileURLToPath(
+      new URL(import.meta.resolve(`${value}/package.json`, import.meta.url)),
+    ),
+    '..',
+  );
+};
 
 const config = {
   stories: [

packages/create-rslib/fragments/tools/storybook-react-js/package.json

@@ -5,11 +5,11 @@
   },
   "devDependencies": {
     "@rsbuild/core": "~1.6.9",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-onboarding": "^9.1.16",
-    "@storybook/react": "^9.1.16",
-    "storybook": "^9.1.16",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-react-rsbuild": "^2.1.6"
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/react": "^10.1.0",
+    "storybook": "^10.1.0",
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-react-rsbuild": "^3.0.0"
   }
 }

packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/main.ts

@@ -1,17 +1,20 @@
-import { createRequire } from 'node:module';
-import { dirname, join } from 'node:path';
-
-const require = createRequire(import.meta.url);
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import type { StorybookConfig } from 'storybook-react-rsbuild';
 
 /**
  * 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: [

packages/create-rslib/fragments/tools/storybook-react-ts/package.json

@@ -5,11 +5,11 @@
   },
   "devDependencies": {
     "@rsbuild/core": "~1.6.9",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-onboarding": "^9.1.16",
-    "@storybook/react": "^9.1.16",
-    "storybook": "^9.1.16",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-react-rsbuild": "^2.1.6"
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/react": "^10.1.0",
+    "storybook": "^10.1.0",
+    "storybook-addon-rslib": "^3.0.0",
+    "storybook-react-rsbuild": "^3.0.0"
   }
 }

packages/create-rslib/fragments/tools/storybook-vue-js/.storybook/main.js

@@ -1,14 +1,18 @@
-import { createRequire } from 'node:module';
-import { dirname, join } from 'node:path';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-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) => {
+  return resolve(
+    fileURLToPath(
+      new URL(import.meta.resolve(`${value}/package.json`, import.meta.url)),
+    ),
+    '..',
+  );
+};
 
 const config = {
   stories: [