docs(materials): init materials docs (#222)

apps/docs/src/en/guide/advanced/_meta.json

@@ -20,5 +20,6 @@
   "shortcuts",
   "minimap",
   "custom-plugin",
-  "custom-service"
+  "custom-service",
+  "form-materials"
 ]

apps/docs/src/en/guide/advanced/form-materials.mdx

@@ -0,0 +1,105 @@
+# Official Form Materials  
+
+## How to Use?  
+
+### Via Package Reference  
+
+Official form materials can be used directly via package reference:  
+
+```tsx
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command={{
+  npm: "npm install @flowgram.ai/form-materials"
+}} />
+```
+
+```tsx
+import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
+```  
+
+### Adding Material Source Code via CLI  
+
+If customization is required (e.g., modifying text, styles, or business logic), it is recommended to **add the material source code to the project for customization via CLI**:  
+
+```bash
+npx @flowgram.ai/form-materials
+```  
+
+After running, the CLI will prompt the user to select the material to add:  
+
+```console
+? Select one material to add: (Use arrow keys)  
+❯ components/json-schema-editor  
+  components/type-selector  
+  components/variable-selector  
+```  
+
+Users can also directly add the source code of a specific material via CLI:  
+
+```bash
+npx @flowgram.ai/form-materials components/json-schema-editor  
+```  
+
+Once the CLI completes successfully, the relevant materials will be automatically added to the `src/form-materials` directory in the current project.  
+
+:::warning Notes  
+
+1. The official materials are currently implemented based on [Semi Design](https://semi.design/). If there are requirements for an underlying component library, the source code can be copied via CLI and replaced.  
+2. Some materials depend on third-party npm libraries, which will be automatically installed during CLI execution.  
+3. Some materials depend on other official materials. The source code of these dependent materials will also be added to the project during CLI execution.  
+
+:::  
+
+## Currently Supported Component Materials  
+
+### [TypeSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/type-selector/index.tsx)  
+
+TypeSelector is used for variable type selection.  
+
+<img loading="lazy" src="/materials/type-selector.png" style={{width:500}}/>  
+
+Usage via package reference:  
+
+```tsx
+import { TypeSelector } from '@flowgram.ai/materials'  
+```  
+
+Adding source code via CLI:  
+```bash
+npx @flowgram.ai/materials components/type-selector  
+```  
+
+### [VariableSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector/index.tsx)  
+
+VariableSelector is used for selecting a single variable.  
+
+<img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>  
+
+Usage via package reference:  
+
+```tsx
+import { VariableSelector } from '@flowgram.ai/materials'  
+```  
+
+Adding source code via CLI:  
+```bash
+npx @flowgram.ai/materials components/variable-selector  
+```  
+
+### [JsonSchemaEditor](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-schema-editor/index.tsx)  
+
+JsonSchemaEditor is used for visually editing JsonSchema, commonly used for configuring node output variables visually.  
+
+<img loading="lazy" src="/materials/json-schema-editor.png" style={{width:500}}/>  
+
+Usage via package reference:  
+
+```tsx
+import { JsonSchemaEditor } from '@flowgram.ai/materials'  
+```  
+
+Adding source code via CLI:  
+```bash
+npx @flowgram.ai/materials components/json-schema-editor  
+```

apps/docs/src/en/guide/advanced/variable/variable-consume.mdx

@@ -76,3 +76,21 @@ const renderVariable = (variable: BaseVariableField) => ({
 // ....
 
 ```
+
+## Using Official VariableSelector Component
+
+See: [Official Form Materials](/guide/advanced/form-materials.html)
+
+<img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>
+
+The [VariableSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector/index.tsx) component is used for selecting individual variables.
+
+Install via package:
+```tsx
+import { VariableSelector } from '@flowgram.ai/materials'
+```
+
+Or copy source code via CLI:
+```bash
+npx @flowgram.ai/materials components/variable-selector
+```

apps/docs/src/zh/guide/advanced/_meta.json

@@ -20,5 +20,6 @@
   "shortcuts",
   "minimap",
   "custom-plugin",
-  "custom-service"
+  "custom-service",
+  "form-materials"
 ]

apps/docs/src/zh/guide/advanced/form-materials.mdx

@@ -0,0 +1,109 @@
+# 官方表单物料
+
+## 如何使用？
+
+### 通过包引用使用
+
+官方表单物料可以直接通过包引用使用：
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command={{
+  npm: "npm install @flowgram.ai/form-materials"
+}} />
+
+```tsx
+import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
+```
+
+
+### 通过 CLI 添加物料源代码使用
+
+
+如果业务对组件有定制诉求（如：更改文案、样式、业务逻辑），推荐 **通过 CLI 将物料源代码添加到项目中进行定制**：
+
+```bash
+npx @flowgram.ai/form-materials
+```
+
+运行后 CLI 会提示用户选择要添加到项目中的物料:
+
+```console
+? Select one material to add: (Use arrow keys)
+❯ components/json-schema-editor
+  components/type-selector
+  components/variable-selector
+```
+
+使用者也可以直接在 CLI 中添加指定物料的源代码:
+
+```bash
+npx @flowgram.ai/form-materials components/json-schema-editor
+```
+
+CLI 运行成功后，相关物料会自动添加到当前项目下的 `src/form-materials` 目录下
+
+:::warning 注意事项
+
+1. 官方物料目前底层基于 [Semi Design](https://semi.design/) 实现，业务如果有底层组件库的诉求，可以通过 CLI 复制源码进行替换
+2. 一些物料会依赖一些第三方 npm 库，这些库会在 CLI 运行时自动安装
+3. 一些物料会依赖另外一些官方物料，这些被依赖的物料源代码在 CLI 运行时会一起被添加到项目中去
+
+:::
+
+## 当前支持的 Component 物料
+
+### [TypeSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/type-selector/index.tsx)
+
+TypeSelector 用于变量类型选择
+
+<img loading="lazy" src="/materials/type-selector.png" style={{width:500}}/>
+
+通过包引用使用：
+
+```tsx
+import { TypeSelector } from '@flowgram.ai/materials'
+```
+
+通过 CLI 复制源代码使用：
+```bash
+npx @flowgram.ai/materials components/type-selector
+```
+
+
+### [VariableSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector/index.tsx)
+
+VariableSelector 用于选择单个变量
+
+<img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>
+
+
+通过包引用使用：
+
+```tsx
+import { VariableSelector } from '@flowgram.ai/materials'
+```
+
+通过 CLI 复制源代码使用：
+```bash
+npx @flowgram.ai/materials components/variable-selector
+```
+
+
+### [JsonSchemaEditor](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-schema-editor/index.tsx)
+
+JsonSchemaEditor 用于可视化编辑 JsonSchema，常用于可视化配置节点的输出变量
+
+<img loading="lazy" src="/materials/json-schema-editor.png" style={{width:500}}/>
+
+
+通过包引用使用：
+
+```tsx
+import { JsonSchemaEditor } from '@flowgram.ai/materials'
+```
+
+通过 CLI 复制源代码使用：
+```bash
+npx @flowgram.ai/materials components/json-schema-editor
+```

apps/docs/src/zh/guide/advanced/variable/variable-consume.mdx

@@ -77,3 +77,23 @@ const renderVariable = (variable: BaseVariableField) => ({
 // ....
 
 ```
+
+## 直接使用 VariableSelector 官方物料
+
+详见: [官方表单物料](/guide/advanced/form-materials.html)
+
+<img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>
+
+[VariableSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector/index.tsx) 组件用于选择单个变量
+
+通过包引用使用：
+
+```tsx
+import { VariableSelector } from '@flowgram.ai/materials'
+```
+
+通过 CLI 复制源代码使用：
+
+```bash
+npx @flowgram.ai/materials components/variable-selector
+```

packages/materials/form-materials/bin/materials.js

@@ -67,6 +67,11 @@ export function bfsMaterials(material, _materials = []) {
 
 export const copyMaterial = (material, projectInfo) => {
   const sourceDir = material.path;
-  const targetDir = path.join(projectInfo.projectPath, `form-${material.type}`, material.name);
+  const targetDir = path.join(
+    projectInfo.projectPath,
+    'form-materials',
+    `${material.type}`,
+    material.name
+  );
   fs.cpSync(sourceDir, targetDir, { recursive: true });
 };