@modern-js/main-doc 0.0.0-next-1686852453693 → 0.0.0-next-1686907286928

package/CHANGELOG.md

@@ -1,11 +1,11 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1686852453693
+## 0.0.0-next-1686907286928
 
 ### Patch Changes
 
-- Updated dependencies [4d4dca08f]
-  - @modern-js/builder-doc@0.0.0-next-1686852453693
+- Updated dependencies [4d4dca08f6]
+  - @modern-js/builder-doc@0.0.0-next-1686907286928
 
 ## 2.23.0
 

package/docs/en/apis/app/hooks/config/storybook.mdx

@@ -2,6 +2,7 @@
 title: storybook/
 sidebar_position: 7
 ---
+
 # storybook/
 
 Modern.js supports debugging using Storybook. When configuring Storybook, you need to configure it in the `config/storybook` directory of the project.
@@ -12,3 +13,26 @@ Please refer to [Storybook Configuration](https://storybook.js.org/docs/react/co
 Enabling the Visual Testing (Storybook) mode function requires running the new command to enable it under the project first.
 
 :::
+
+#### Example
+
+For the webpack configuration of the Storybook Manager app section, you can configure it by adding the `./config/storybook/main.js` file to configure it.
+
+```js
+// ./config/storybook/main.js
+
+module.exports = {
+  // it controls the Storybook manager app
+  managerWebpack: async (config, options) => {
+    // update config here
+    return config;
+  },
+};
+```
+
+### Limitation
+
+There are some limitations when using the `config/storybook` directory for configuration:
+
+- The location where the Story file is stored cannot be modified, that is, the `stories` configuration cannot be modified in the `main.js` file.
+- It is not supported to modify Webpack and Babel related configurations in `main.js`, related requirements can be passed through [`tools.webpack`](/configure/app/tools/webpack.html) /[`tools.babel`](/configure/app/tools/babel.html) modify.

package/docs/en/apis/app/hooks/src/stories.mdx

@@ -6,7 +6,7 @@ sidebar_position: 7
 
 Application project Storybook files.
 
-You can create files in the `*.stories.[tj]sx` format in the project source code directory `src/` as Storybook files.
+You can create files in the `*.stories.(js|jsx|ts|tsx|mdx)` format in the project source code directory `src/` as Storybook files.
 
 Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
 

package/docs/en/guides/advanced-features/using-storybook.mdx

@@ -0,0 +1,44 @@
+---
+sidebar_position: 20
+---
+
+# 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
+
+## Enable Storybook debugging
+
+The Modern.js framework integrates the Builder's Node Polyfill plugin by default.
+
+If you want to debug the component, you can enable Storybook debugging through `pnpm run new`.
+
+```bash
+$ npx modern new
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Visual Testing (Storybook)
+```
+
+After the execution is complete, you only need to register the Modern.js Storybook plugin in the `modern.config.ts` file to enable Storybook debugging capabilities.
+
+```ts title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [appTools(), storybookPlugin()],
+});
+```
+
+## Debugging code
+
+Modern.js recognizes files in the format of [\*.stories.(js|jsx|ts|tsx|mdx)](/apis/app/hooks/src/stories.html) under the project source code directory (src/) by default as Storybook debugging files.
+
+## Configure Storybook
+
+In Modern.js, Storybook configuration files can be added to the [`config/storybook`](/apis/app/hooks/config/storybook.html) directory of the project.

package/docs/zh/apis/app/hooks/config/storybook.mdx

@@ -2,6 +2,7 @@
 title: storybook/
 sidebar_position: 7
 ---
+
 # storybook/
 
 Modern.js 支持使用 Storybook 进行调试，当需要对 Storybook 进行配置时，需要在项目 config/storybook 目录进行配置。
@@ -12,3 +13,26 @@ Storybook 配置请查看：[Storybook 配置](https://storybook.js.org/docs/rea
 使用 Storybook 进行调试需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式功能。
 
 :::
+
+### 示例
+
+对于 Storybook Manager app 部分的 webpack 配置，可以通过增加 `./config/storybook/main.js` 文件进行配置。
+
+```js
+// ./config/storybook/main.js
+
+module.exports = {
+  // it controls the Storybook manager app
+  managerWebpack: async (config, options) => {
+    // update config here
+    return config;
+  },
+};
+```
+
+### 限制
+
+在使用 config/storybook 目录进行配置时，存在以下限制：
+
+- 不能修改 Story 文件存放的位置，即无法在 `main.js` 文件里修改 `stories` 配置。
+- 不支持在 `main.js` 中修改 Webpack 和 Babel 相关配置，相关需求可通过 [`tools.webpack`](/configure/app/tools/webpack.html) / [`tools.babel`](/configure/app/tools/babel.html) 修改。

package/docs/zh/apis/app/hooks/src/stories.mdx

@@ -6,7 +6,7 @@ sidebar_position: 7
 
 应用项目 Storybook 调试文件。
 
-可以在项目源码目录 `src/` 下创建 `*.stories.[tj]sx` 格式的文件作为 Storybook 的调试文件。
+可以在项目源码目录 `src/` 下创建 `*.stories.(js|jsx|ts|tsx|mdx)` 格式的文件作为 Storybook 的调试文件。
 
 在项目下执行 `npm run dev story` 命令，支持使用这些文件在 Storybook 中对相关内容进行调试。
 

package/docs/zh/guides/advanced-features/using-storybook.mdx

@@ -0,0 +1,44 @@
+---
+sidebar_position: 20
+---
+
+# 使用 Storybook
+
+[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，它围绕着组件开发提供了：
+
+- 丰富多样的调试能力
+- 可与一些测试工具结合使用
+- 可重复使用的文档内容
+- 可分享能力
+- 工作流程自动化
+
+## 开启 Storybook 调试
+
+EdenX 默认集成了 Storybook 的调试能力。
+
+当我们想要对组件进行调试的时候，可以通过 `pnpm run new` 启用 Storybook 调试功能。
+
+```bash
+$ npx modern new
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「Visual Testing (Storybook)」模式
+```
+
+执行完成后，你只需在 `modern.config.ts` 文件中注册 Modern.js 的 Storybook 插件，即可启用 Storybook 调试能力。
+
+```ts title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [appTools(), storybookPlugin()],
+});
+```
+
+## 调试代码
+
+Modern.js 默认识别项目源码目录 src/ 下 [\*.stories.(js|jsx|ts|tsx|mdx)](/apis/app/hooks/src/stories.html) 格式的文件作为 Storybook 的调试文件。
+
+## 配置 Storybook
+
+在 Modern.js 中，可以在项目的 [`config/storybook`](/apis/app/hooks/config/storybook.html) 目录下增加 Storybook 配置文件。

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1686852453693",
+  "version": "0.0.0-next-1686907286928",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1686852453693"
+    "@modern-js/builder-doc": "0.0.0-next-1686907286928"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -34,9 +34,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/doc-tools": "0.0.0-next-1686852453693",
-    "@modern-js/builder-doc": "0.0.0-next-1686852453693",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686852453693"
+    "@modern-js/builder-doc": "0.0.0-next-1686907286928",
+    "@modern-js/doc-tools": "0.0.0-next-1686907286928",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686907286928"
   },
   "scripts": {
     "dev": "modern dev",