web-infra-dev · fi3ework · Nov 4, 2024 · Nov 4, 2024
diff --git a/website/docs/en/guide/_meta.json b/website/docs/en/guide/_meta.json
@@ -6,8 +6,8 @@
   },
   {
     "type": "dir",
-    "name": "framework",
-    "label": "Framework"
+    "name": "solution",
+    "label": "Solution"
   },
   {
     "type": "dir",

diff --git a/website/docs/en/guide/advanced/storybook.mdx b/website/docs/en/guide/advanced/storybook.mdx
@@ -1 +1,95 @@
+import { PackageManagerTabs } from '@theme';
+
 # Use Storybook
+
+[Storybook](https://storybook.js.org/) is a powerful tool for developing UI components in isolation for React, Vue, and other frameworks. It enables you to build and test components independently, which can accelerate both development and testing.
+
+[storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild) is the Rsbuild powered Storybook builder, and provided the framework integration for React, Vue3 and vanilla JavaScript. The coherent Rsbuild system could make Storybook use an unified configuration with Rslib.
+
+:::tip
+You can create a new project with Storybook by using [create-rslib](/guide/start/quick-start#creating-an-rslib-project).
+:::
+
+## Getting Started
+
+### Setup a Rslib project
+
+This is the prerequisite for setting up Storybook. You need to have a Rslib project with components that you want to showcase in Storybook, check out [Solution](/guide/solution) to setup a Rslib project.
+
+### Add Storybook to project
+
+Set up a Storybook project with an existing Rslib project. To use React, Vue 3, vanilla JavaScript, or other frameworks, you must first install the appropriate Storybook framework package. For installation instructions, refer to the [Storybook Rsbuild documentation](https://storybook.rsbuild.dev/guide/framework.html).
+
+Using React as an example, at this step you need to:
+
+1. Install the dependencies for Storybook Rsbuild React framework. The essential ones include
+
+   - [storybook](https://www.npmjs.com/package/@storybook/addon-essentials): The Storybook core.
+   - [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials): a curated collection of addons to bring out the best of Storybook.
+   - [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core): Storybook builder.
+   - [storybook-addon-rslib](https://www.npmjs.com/package/storybook-addon-rslib): This addon will make Storybook Rsbuild could derive Rsbuild configuration from Rslib config file.
+     The addon will automatically read the Rslib configuration and apply it to Storybook Rsbuild, ensuring that the configuration is unified. You can check the [storybook-addon-rslib](https://storybook.rsbuild.dev/guide/integrations/rslib.html) documentation for available options.
+
+   <PackageManagerTabs
+     command={{
+       npm: 'npm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+       yarn: 'yarn add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+       pnpm: 'pnpm add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+       bun: 'bun add storybook @storybook/addon-essentials storybook-addon-rslib @rsbuild/core -D',
+     }}
+   />
+
+   The dependencies may vary for each framework, please refer to the [Storybook Rsbuild documentation](https://storybook.rsbuild.dev/guide/framework.html) for details. In this React example, we will install [storybook-rsbuild-react](https://www.npmjs.com/package/storybook-react-rsbuild) as the framework integration.
+
+2. Configure the Storybook configuration file `.storybook/main.js`, specify the stories and addons, and set the framework with corresponding framework integration.
+
+   ```js title=".storybook/main.js"
+   export default {
+     stories: [
+       '../stories/**/*.mdx',
+       '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+     ],
+     addons: ['@storybook/addon-essentials', 'storybook-addon-rslib'],
+     framework: 'storybook-react-rsbuild', // storybook-react-rsbuild for example
+   };
+   ```
+
+   3. Add a simple story to the `stories` directory. For example, create a `Button.stories.js` file with the following content:
+
+   ```js title="stories/Button.stories.js"
+   import { Button } from '../src/Button';
+
+   const meta = {
+     title: 'Example/Button',
+     component: Button,
+   };
+
+   export default meta;
+
+   export const Primary = {
+     args: {
+       primary: true,
+       label: 'Button',
+     },
+   };
+   ```
+
+:::tip
+In case you are using [Yarn Plug-n-Play](https://yarnpkg.com/features/pnp) or your project is set up within a mono repository environment, you might run into issues with module resolution. In such cases, you can add an `getAbsolutePath('storybook-addon-rslib')` function to resolve the addon. Check the [Storybook's FAQ](https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments) for more information.
+:::
+
+There you go, you could start and build the Storybook server with the following command:
+
+```bash
+npx storybook dev   // development mode
+npx storybook build // build static files
+```
+
+Check out more details in the [Storybook Rsbuild documentation](https://storybook.rsbuild.dev/) and the [Storybook documentation](https://storybook.js.org/docs/react/get-started/introduction).
+
+{/* TODO: */}
+{/* ## Module Federation */}
+
+## Example
+
+- [React component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)
diff --git a/website/docs/en/guide/basic/_meta.json b/website/docs/en/guide/basic/_meta.json
@@ -4,6 +4,5 @@
   "typescript",
   "output-format",
   "output-structure",
-  "upgrade-rslib",
-  "umd"
+  "upgrade-rslib"
 ]
diff --git a/website/docs/en/guide/basic/umd.mdx b/website/docs/en/guide/basic/umd.mdx
diff --git a/website/docs/en/guide/basic/upgrade-rslib.mdx b/website/docs/en/guide/basic/upgrade-rslib.mdx
@@ -1 +1,68 @@
 # Upgrade Rslib
+
+This section explains how to upgrade the project's Rslib dependencies to the latest version.
+
+{/* TODO */}
+{/* > Please see [Releases](/community/releases/index) to understand the Rsbuild release strategy. */}
+
+:::info
+Rslib is still in the early stages of development, and the API may change frequently. We recommend upgrading to the latest version to access new features and bug fixes. We plan to release version 0.1.0 in the fourth quarter of 2024.
+:::
+
+## Using Taze
+
+We recommend using [Taze](https://github.com/antfu-collective/taze) to upgrade the Rslib version. Taze is a CLI tool for updating npm dependencies.
+
+### Usage
+
+Run the following command to upgrade all dependencies that include `rslib` and `rsbuild` in their names:
+
+```bash
+npx taze major --include "/(rsbuild|rslib)/" -w
+```
+
+:::tip
+Rslib has not yet reached version 0.1.0, so you need to add the `major` parameter when updating.
+:::
+
+The result will look similar to:
+
+```bash
+rslib - 2 major, 1 patch
+
+  @rsbuild/plugin-react       dev  ~2mo  ^1.0.1   →  ^1.0.6
+  @rslib/core                 dev  ~7d  ^0.0.15  →  ^0.0.16
+  rsbuild-plugin-dts          dev  ~7d  ^0.0.15  →  ^0.0.16
+
+ℹ changes written to package.json, run npm i to install updates.
+```
+
+You can also adjust the `include` pattern to match specific packages, for example, to upgrade only packages under the `@rslib` scope:
+
+```bash
+npx taze --include /@rslib/ -w
+```
+
+### Options
+
+Here are some examples of using taze options.
+
+- In a monorepo, you can add the `-r` option to upgrade recursively:
+
+```bash
+npx taze --include /(rsbuild|rslib)/ -w -r
+```
+
+- Add `-l` to upgrade locked versions:
+
+```bash
+npx taze --include /(rsbuild|rslib)/ -w -l
+```
+
+- To upgrade to a major version:
+
+```bash
+npx taze major --include /(rsbuild|rslib)/ -w
+```
+
+> For more options, please refer to the [taze documentation](https://github.com/antfu-collective/taze).
diff --git a/website/docs/en/guide/solution.mdx b/website/docs/en/guide/solution.mdx
@@ -0,0 +1 @@
+# Solution
diff --git a/website/docs/en/guide/framework/_meta.json → website/docs/en/guide/solution/_meta.json b/website/docs/en/guide/framework/_meta.json → website/docs/en/guide/solution/_meta.json
diff --git a/website/docs/en/guide/framework/react.mdx → website/docs/en/guide/solution/react.mdx b/website/docs/en/guide/framework/react.mdx → website/docs/en/guide/solution/react.mdx
diff --git a/...te/docs/en/guide/framework/typescript.mdx → ...ite/docs/en/guide/solution/typescript.mdx b/...te/docs/en/guide/framework/typescript.mdx → ...ite/docs/en/guide/solution/typescript.mdx
diff --git a/website/docs/en/guide/framework/vue.mdx → website/docs/en/guide/solution/vue.mdx b/website/docs/en/guide/framework/vue.mdx → website/docs/en/guide/solution/vue.mdx
diff --git a/website/docs/en/guide/start/glossary.mdx b/website/docs/en/guide/start/glossary.mdx
@@ -20,6 +20,12 @@ CJS stands for [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-m
 
 Bundleless refers to a development approach that avoids the traditional practice of bundling multiple JavaScript / TypeScript files into a single or fewer output files before serving them to the client. Instead, it aims to serve individual modules directly.
 
+## Module Federation
+
+Module Federation is an architectural pattern for JavaScript application decomposition (similar to microservices on the server-side), allowing you to share code and resources between multiple JavaScript applications (or micro-frontends).
+
+See [Module Federation](https://rsbuild.dev/guide/advanced/module-federation) for more details.
+
 ## More
 
 See more glossary in [Rsbuild - Glossary](https://rsbuild.dev/guide/start/glossary) and [Rspack - Glossary](https://rspack.dev/misc/glossary).