docs: add new storybook docs (#7260)

Author: zllkjc

packages/document/main-doc/docs/en/guides/basic-features/debug/using-storybook.mdx

@@ -2,231 +2,47 @@
 sidebar_position: 15
 ---
 
-# Using Storybook
-
-[Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.
-
-- Develop UIs that are more durable
-- Test UIs with less effort and no flakes
-- Document UI for your team to reuse
-- Share how the UI actually works
-- Automate UI workflows
-
-:::tip
-This tutorial is suitable for Storybook V7 users. If you are using an old version of Storybook V6 (using the @modern-js/plugin-storybook plugin), you can refer to the [Migration Guide](#migration-guide) to upgrade.
-:::
-
-## Quick Start
-
-Modern.js integrates Storybook debugging capabilities by default. You can directly enable the Storybook feature by using the following command:
-
-```bash
-$ npx modern new
-? Please select the operation you want: Enable features
-? Please select the feature name: Enable「Storybook」V7
-```
-
-This command will create a template for Storybook, including:
-
-- Creating a configuration folder .storybook and a default configuration file .storybook/main.ts.
-- Creating example story components.
-- Updating package.json to add dependencies @storybook/addon-essentials and @modern-js/storybook, as well as creating Storybook-related scripts.
-
-To start, run `npm run storybook`.
-
-## Enable Rspack build
-
-Rspack is known for its fast build speed. To use Rspack as a build tool in Modern.js, you only need to configure it as follows:
-
-```diff filename='.storybook/main.js'
-const config = {
-  framework: {
-    name: '@modern-js/storybook',
-    options: {
--      bundler: 'webpack'
-+      bundler: 'rspack'
-    },
-  },
-  typescript: {
--    reactDocgen: 'react-docgen-typescript'
-+    reactDocgen: 'react-docgen'
-  }
-};
-
-export default config;
-```
-
-Note that in the above configuration, the reactDocgen configuration has been changed because Rspack currently does not support @storybook/react-docgen-typescript-plugin.
-
-## Configurations
-
-There are some configurations in `.storybook/main.js`.
-
-### configPath
-
-- **Type**: `string`
-- **Default**: `modern.config.(j|t)s`
-
-Specify the path of Modern.js configuration.
-
-Example:
-
-```javascript filename='.storybook/main.js'
-const config = {
-  framework: {
-    name: '@modern-js/storybook',
-    options: {
-      configPath: 'modern.storybook.config.ts',
-    },
-  },
-};
-
-export default config;
-```
-
-### bundler
-
-- **Type**: `'webpack' | 'rspack'`
-- **Default**: `webpack`
-
-Specify the underlying build tool to use either Webpack or Rspack.
-
-Example:
-
-```javascript filename='.storybook/main.js'
-const config = {
-  framework: {
-    name: '@modern-js/storybook',
-    options: {
-      bundler: 'rspack',
-    },
-  },
-};
-
-export default config;
-```
-
-### builderConfig
+import { PackageManagerTabs } from '@theme'
 
-- **Type**: `BuilderConfig`
-- **Default**: `undefined`
-
-To modify the configuration of build, which has a higher priority than the configuration file, you can specify the build configuration directly here if you do not want to use the configuration file.
-
-Example:
-
-```javascript filename='.storybook/main.js'
-const config = {
-  framework: {
-    name: '@modern-js/storybook',
-    options: {
-      builderConfig: {
-        alias: {
-          react: require.resolve('react'),
-          'react-dom': require.resolve('react-dom'),
-        },
-      },
-    },
-  },
-};
-
-export default config;
-```
-
-## Command Line Interface
-
-@modern-js/storybook proxies some of the storybook cli commands.
-
-### storybook dev
-
-Start Storybook, more details at [storybook#dev](https://storybook.js.org/docs/react/api/cli-options#dev).
-
-### storybook build
-
-Build Storybook for production, more details at [storybook#build](https://storybook.js.org/docs/react/api/cli-options#build).
-
-## Storybook addon compatibility
-
-Due to the current version of Storybook in the document being version 7, please select the addon for Storybook V7.
-
-When an addon does not require additional Babel or Webpack configurations, it can be used directly, such as @storybook/addon-essentials.
-
-For some addons that require dependencies on Babel plugins and Webpack configurations, such as @storybook/addon-coverage, only @modern-js/builder-webpack-provider supports them.
-
-## Benefits
-
-Using @modern-js/storybook can bring you lightning-fast builds with Rspack, without the need for tedious configuration. It comes with many best practices for web development out-of-the-box, such as code splitting strategies, built-in support for CSS modules and postcss, TypeScript support, and commonly used Babel plugins.
-
-The powerful build capabilities of Modern.js can be directly used in Storybook projects.
-
-## Trouble Shooting
-
-1. Modern.js won't load your other configurations like `babel.config.json`, babel config needs to be set in Modern.js config, [tools.babel](/configure/app/tools/babel).
-   Webpack configuration can be written in either [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain).
-
-2. If you find that the build performance is not good, please check if the Storybook automatic documentation generation feature is enabled. For optimal performance, configure it to use `react-docgen`. The difference between `react-docgen` and `react-docgen-typescript` is that the former is implemented based on Babel, while the latter is implemented based on TypeScript. The former has better performance but weaker type inference capabilities. If you are using Rspack for the build, only `react-docgen` is supported.
-
-```javascript filename='.storybook/main.js'
-const config = {
-  typescript: {
-    reactDocgen: 'react-docgen',
-  },
-};
-
-export default config;
-```
-
-## Migration Guide
-
-### Migrate from @modern-js/plugin-storybook
-
-If you are a user migrating from V6 to V7, you can use V7 through [the above method](#quick-start) and make the following adjustments:
-
-##### Modify configuration file
-
-If you have made some custom configurations to Storybook in the older version, you need to move the configuration file `root/config/storybook/main.(j|t)s` to `root/.storybook/main.(j|t)s`.
-
-And then add the following lines in `root/.storybook/main.(j|t)s`, specify framework as `@modern-js/storybook`.
+# Using Storybook
 
-```diff
-const config = {
-+  framework: {
-+    name: '@modern-js/storybook'
-+  }
-};
+[Storybook](https://storybook.js.org/) is a tool specifically designed for component debugging. It provides:
 
-export default config;
-```
+- A rich variety of debugging capabilities
+- Integration with some testing tools
+- Reusable documentation content
+- Sharing capabilities
+- Workflow automation
 
-##### Update Dependencies
+## Principle
 
-Update dependencies like @storybook/addon-\* to major version 7.
+Rsbuild provides [Storybook Rsbuild](https://storybook.rsbuild.rs/index.html), which allows any Rsbuild project to use this tool for building Storybook.
 
-##### Remove @modern-js/plugin-storybook
+Modern.js implements `storybook-addon-modernjs` based on this tool. This plugin loads the Modern.js configuration file and converts it into a configuration usable by **Storybook Rsbuild**.
 
-在 modern.config.(j|t)s 中删除 @modern-js/plugin-storybook 插件的注册。
+:::info
+This document only provides the simplest usage. For more information, please refer to [Storybook Rsbuild Modern.js Integration](https://storybook.rsbuild.rs/guide/integrations/modernjs.html).
+:::
 
-##### Modify Storybook Syntax
+## Installation
 
-Follow the official Storybook documentation to make the necessary updates for some breaking changes, such as changes in story writing and MDX syntax. You can refer to the migration guide at [storybook migrate doc](https://storybook.js.org/docs/react/migration-guide).
+<PackageManagerTabs command="install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D" />
 
-### Native Storybook users
+You need to install `@rsbuild/core` in your project, otherwise the plugin may not work properly.
 
-Modern.js only support Storybook 7, so you need to upgrade from Storybook version 6 to version 7, please follow the steps outlined in the official Storybook documentation at [storybook migrate doc](https://storybook.js.org/docs/react/migration-guide).
+## Configure `.storybook/main.ts`
 
-```diff filename='.storybook/main.js'
-const config = {
--  framework: '@storybook/react-webapck5',
-+  framework: {
-+    name: '@modern-js/storybook'
-+  },
-};
+```ts
+import type { StorybookConfig } from 'storybook-react-rsbuild'
 
-export default config;
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['storybook-addon-modernjs'],
+  framework: ['storybook-react-rsbuild'],
+}
+export default config
 ```
 
-The default config file path is `modern.config.(j|t)s`, for the detail config, see [modern.js config](/configure/app/usage).
-
-If the original project includes configurations for Babel, they need to be written in the modern configuration. Most Babel configurations have already been included in Modern.js.
+## Example
 
-After installation, make the corresponding [configuration](/guides/basic-features/debug/using-storybook#configurations).
+You can check out the [example](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/modernjs-react) to learn how to use Storybook in Modern.js.