feat: update materials import (#659)

packages/materials/form-materials/bin/index.ts

@@ -5,7 +5,7 @@ import { Command } from 'commander';
 import chalk from 'chalk';
 
 import { getProjectInfo, installDependencies, ProjectInfo } from './project.js';
-import { bfsMaterials, copyMaterial, listAllMaterials, Material } from './materials.js';
+import { copyMaterial, listAllMaterials, Material } from './materials.js';
 
 const program = new Command();
 
@@ -66,14 +66,14 @@ program
       process.exit(1);
     }
 
+    // 4. Copy the materials to the project
+    console.log(chalk.bold('The following materials will be added to your project'));
     console.log(material);
-
-    // 3. Get the component dependencies by BFS (include depMaterials and depPackages)
-    const { allMaterials, allPackages } = bfsMaterials(material!, materials);
+    let { packagesToInstall } = copyMaterial(material, projectInfo);
 
     // 4. Install the dependencies
-    allPackages.push(`@flowgram.ai/editor`);
-    const packagesToInstall: string[] = allPackages.map((_pkg) => {
+    packagesToInstall.push(`@flowgram.ai/editor`);
+    packagesToInstall = packagesToInstall.map((_pkg) => {
       if (
         _pkg.startsWith(`@flowgram.ai/`) &&
         projectInfo.flowgramVersion !== 'workspace:*' &&
@@ -87,19 +87,6 @@ program
     console.log(chalk.bold('These npm dependencies will be added to your project'));
     console.log(packagesToInstall);
     installDependencies(packagesToInstall, projectInfo);
-
-    // 5. Copy the materials to the project
-    console.log(chalk.bold('These Materials will be added to your project'));
-    console.log(allMaterials);
-    copyMaterial(material, projectInfo, { overwrite: true });
-
-    allMaterials.forEach((mat: Material) => {
-      if (mat === material) {
-        return;
-      }
-      // Add type for mat
-      copyMaterial(mat, projectInfo, { overwrite: false });
-    });
   });
 
 program.parse(process.argv);

packages/materials/form-materials/bin/materials.ts

@@ -7,6 +7,8 @@ import { fileURLToPath } from 'url';
 import path from 'path';
 import fs from 'fs';
 
+import { traverseRecursiveFiles } from './utils/traverse-file';
+import { replaceImport, traverseFileImports } from './utils/import';
 import { ProjectInfo } from './project'; // Import ProjectInfo
 
 const __filename = fileURLToPath(import.meta.url);
@@ -17,8 +19,6 @@ export interface Material {
   name: string;
   type: string;
   path: string;
-  depPackages?: string[];
-  depMaterials?: string[];
   [key: string]: any; // For other properties from config.json
 }
 
@@ -48,19 +48,7 @@ export function listAllMaterials(): Material[] {
             return null;
           }
 
-          const configPath = path.join(materialsPath, _path, 'config.json');
-          // Check if config.json exists before reading
-          if (!fs.existsSync(configPath)) {
-            console.warn(
-              `Warning: config.json not found for material at ${path.join(materialsPath, _path)}`
-            );
-            return null;
-          }
-          const configContent = fs.readFileSync(configPath, 'utf8');
-          const config = JSON.parse(configContent);
-
           return {
-            ...config,
             name: _path, // Assuming the folder name is the material name
             type: _type,
             path: path.join(materialsPath, _path),
@@ -73,66 +61,12 @@ export function listAllMaterials(): Material[] {
   return _materials;
 }
 
-interface BfsResult {
-  allMaterials: Material[];
-  allPackages: string[];
-}
-
-export function bfsMaterials(material: Material, _materials: Material[] = []): BfsResult {
-  function findConfigByName(name: string): Material | undefined {
-    return _materials.find(
-      (_config) => _config.name === name || `${_config.type}/${_config.name}` === name
-    );
-  }
-
-  const queue: (Material | undefined)[] = [material]; // Queue can hold undefined if findConfigByName returns undefined
-  const allMaterials = new Set<Material>();
-  const allPackages = new Set<string>();
-
-  while (queue.length > 0) {
-    const _material = queue.shift();
-    if (!_material || allMaterials.has(_material)) {
-      // Check if _material is defined
-      continue;
-    }
-    allMaterials.add(_material);
-
-    if (_material.depPackages) {
-      for (const _package of _material.depPackages) {
-        allPackages.add(_package);
-      }
-    }
-
-    if (_material.depMaterials) {
-      for (const _materialName of _material.depMaterials) {
-        const depMaterial = findConfigByName(_materialName);
-        if (depMaterial) {
-          // Ensure dependent material is found before adding to queue
-          queue.push(depMaterial);
-        } else {
-          console.warn(
-            `Warning: Dependent material "${_materialName}" not found for material "${_material.name}".`
-          );
-        }
-      }
-    }
-  }
-
-  return {
-    allMaterials: Array.from(allMaterials),
-    allPackages: Array.from(allPackages),
-  };
-}
-
 export const copyMaterial = (
   material: Material,
-  projectInfo: ProjectInfo,
-  {
-    overwrite,
-  }: {
-    overwrite?: boolean;
-  } = {}
-): void => {
+  projectInfo: ProjectInfo
+): {
+  packagesToInstall: string[];
+} => {
   const sourceDir: string = material.path;
   const materialRoot: string = path.join(
     projectInfo.projectPath,
@@ -141,25 +75,33 @@ export const copyMaterial = (
     `${material.type}`
   );
   const targetDir = path.join(materialRoot, material.name);
-
-  if (!overwrite && fs.readdirSync(targetDir)?.length > 0) {
-    console.log(`Material ${material.name} already exists in ${materialRoot}, skip copying.`);
-    return;
-  }
+  const packagesToInstall: Set<string> = new Set();
 
   fs.cpSync(sourceDir, targetDir, { recursive: true });
 
-  let materialRootIndexTs: string = '';
-  const indexTsPath = path.join(materialRoot, 'index.ts');
-  if (fs.existsSync(indexTsPath)) {
-    materialRootIndexTs = fs.readFileSync(indexTsPath, 'utf8');
-  }
-  if (!materialRootIndexTs.includes(material.name)) {
-    fs.writeFileSync(
-      indexTsPath,
-      `${materialRootIndexTs}${materialRootIndexTs.endsWith('\n') ? '' : '\n'}export * from './${
-        material.name
-      }';\n`
-    );
+  for (const file of traverseRecursiveFiles(targetDir)) {
+    if (['.ts', '.tsx'].includes(file.suffix)) {
+      for (const importDeclaration of traverseFileImports(file.content)) {
+        const { source } = importDeclaration;
+
+        if (source.startsWith('@/')) {
+          // is inner import
+          console.log(`Replace Import from ${source} to @flowgram.ai/form-materials`);
+          file.replace((content) =>
+            replaceImport(content, importDeclaration, [
+              { ...importDeclaration, source: '@flowgram.ai/form-materials' },
+            ])
+          );
+          packagesToInstall.add('@flowgram.ai/form-materials');
+        } else if (!source.startsWith('.') && !source.startsWith('react')) {
+          // check if is third party npm packages
+          packagesToInstall.add(source);
+        }
+      }
+    }
   }
+
+  return {
+    packagesToInstall: [...packagesToInstall],
+  };
 };

packages/materials/form-materials/bin/utils/import.ts

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Cases
+ * import { A, B } from 'module';
+ * import A from 'module';
+ * import * as C from 'module';
+ * import D, { type E, F } from 'module';
+ * import A, { B as B1 } from 'module';
+ */
+interface ImportDeclaration {
+  // origin statement
+  statement: string;
+
+  // import { A, B } from 'module';
+  namedImports?: {
+    local?: string;
+    imported: string;
+    typeOnly?: boolean;
+  }[];
+
+  // import A from 'module';
+  defaultImport?: string;
+
+  // import * as C from 'module';
+  namespaceImport?: string;
+
+  source: string;
+}
+
+export function assembleImport(declaration: ImportDeclaration): string {
+  const { namedImports, defaultImport, namespaceImport, source } = declaration;
+  const importClauses = [];
+  if (namedImports) {
+    importClauses.push(
+      `{ ${namedImports
+        .map(
+          ({ local, imported, typeOnly }) =>
+            `${typeOnly ? 'type ' : ''}${imported}${local ? ` as ${local}` : ''}`
+        )
+        .join(', ')} }`
+    );
+  }
+  if (defaultImport) {
+    importClauses.push(defaultImport);
+  }
+  if (namespaceImport) {
+    importClauses.push(`* as ${namespaceImport}`);
+  }
+  return `import ${importClauses.join(', ')} from '${source}'`;
+}
+
+export function replaceImport(
+  fileContent: string,
+  origin: ImportDeclaration,
+  replaceTo: ImportDeclaration[]
+): string {
+  const replaceImportStatements = replaceTo.map(assembleImport);
+  // replace origin statement
+  return fileContent.replace(origin.statement, replaceImportStatements.join('\n'));
+}
+
+export function* traverseFileImports(fileContent: string): Generator<ImportDeclaration> {
+  // 匹配所有 import 语句的正则表达式
+  const importRegex =
+    /import\s+([^{}*,]*?)?(?:\s*\*\s*as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?(?:\s*\{([^}]*)\}\s*,?)?(?:\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?\s*from\s*['"`]([^'"`]+)['"`]/g;
+
+  let match;
+  while ((match = importRegex.exec(fileContent)) !== null) {
+    const [fullMatch, defaultPart, namespacePart, namedPart, defaultPart2, source] = match;
+
+    const declaration: ImportDeclaration = {
+      statement: fullMatch,
+      source: source,
+    };
+
+    // 处理默认导入
+    const defaultImport = defaultPart?.trim() || defaultPart2?.trim();
+    if (defaultImport && !namespacePart && !namedPart) {
+      declaration.defaultImport = defaultImport;
+    } else if (defaultImport && (namespacePart || namedPart)) {
+      declaration.defaultImport = defaultImport;
+    }
+
+    // 处理命名空间导入 (* as)
+    if (namespacePart) {
+      declaration.namespaceImport = namespacePart.trim();
+    }
+
+    // 处理命名导入
+    if (namedPart) {
+      const namedImports = [];
+      const namedItems = namedPart
+        .split(',')
+        .map((item) => item.trim())
+        .filter(Boolean);
+
+      for (const item of namedItems) {
+        const typeOnly = item.startsWith('type ');
+        const cleanItem = typeOnly ? item.slice(5).trim() : item;
+
+        if (cleanItem.includes(' as ')) {
+          const [imported, local] = cleanItem.split(' as ').map((s) => s.trim());
+          namedImports.push({
+            imported,
+            local,
+            typeOnly,
+          });
+        } else {
+          namedImports.push({
+            imported: cleanItem,
+            typeOnly,
+          });
+        }
+      }
+
+      if (namedImports.length > 0) {
+        declaration.namedImports = namedImports;
+      }
+    }
+
+    yield declaration;
+  }
+}

packages/materials/form-materials/bin/utils/traverse-file.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import path from 'path';
+import fs from 'fs';
+
+class File {
+  content: string;
+
+  isUtf8: boolean;
+
+  relativePath: string;
+
+  path: string;
+
+  suffix: string;
+
+  constructor(filePath: string, public root: string = '/') {
+    this.path = filePath;
+    this.relativePath = path.relative(this.root, this.path);
+    this.suffix = path.extname(this.path);
+
+    // Check if exists
+    if (!fs.existsSync(this.path)) {
+      throw Error(`File ${path} Not Exists`);
+    }
+
+    // If no utf-8, skip
+    try {
+      this.content = fs.readFileSync(this.path, 'utf-8');
+      this.isUtf8 = true;
+    } catch (e) {
+      this.isUtf8 = false;
+      return;
+    }
+  }
+
+  replace(updater: (content: string) => string) {
+    if (!this.isUtf8) {
+      console.warn('Not UTF-8 file skipped: ', this.path);
+      return;
+    }
+    this.content = updater(this.content);
+    fs.writeFileSync(this.path, this.content, 'utf-8');
+  }
+}
+
+export function* traverseRecursiveFiles(folder: string): Generator<File> {
+  const files = fs.readdirSync(folder);
+  for (const file of files) {
+    const filePath = path.join(folder, file);
+    if (fs.statSync(filePath).isDirectory()) {
+      yield* traverseRecursiveFiles(filePath);
+    } else {
+      yield new File(filePath);
+    }
+  }
+}

packages/materials/form-materials/src/components/assign-row/config.json

@@ -1,11 +0,0 @@
-{
-  "name": "assign-row",
-  "depMaterials": [
-    "flow-value",
-    "dynamic-value-input",
-    "variable-selector"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui"
-  ]
-}

packages/materials/form-materials/src/components/assign-row/index.tsx

@@ -9,11 +9,11 @@ import { IconButton } from '@douyinfe/semi-ui';
 import { IconMinus } from '@douyinfe/semi-icons';
 
 import { IFlowConstantRefValue } from '@/typings';
+import { VariableSelector } from '@/components/variable-selector';
+import { DynamicValueInput } from '@/components/dynamic-value-input';
 
 import { AssignRowProps } from './types';
 import { BlurInput } from './components/blur-input';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
 
 export function AssignRow(props: AssignRowProps) {
   const {

packages/materials/form-materials/src/components/assign-rows/config.json

@@ -1,11 +0,0 @@
-{
-  "name": "assign-rows",
-  "depMaterials": [
-    "flow-value",
-    "dynamic-value-input",
-    "variable-selector"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui"
-  ]
-}

packages/materials/form-materials/src/components/assign-rows/index.tsx

@@ -9,7 +9,7 @@ import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
-import { AssignRow, AssignValueType } from '../assign-row';
+import { AssignRow, AssignValueType } from '@/components/assign-row';
 
 interface AssignRowsProps {
   name: string;

packages/materials/form-materials/src/components/batch-outputs/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "batch-outputs",
-  "depMaterials": [
-    "flow-value",
-    "variable-selector",
-    "use-object-list"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "@douyinfe/semi-icons",
-    "styled-components"
-  ]
-}

packages/materials/form-materials/src/components/batch-outputs/index.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { useObjectList } from '@/hooks';
+import { VariableSelector } from '@/components/variable-selector';
+
 import { PropsType } from './types';
-import { VariableSelector } from '../variable-selector';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 
 export function BatchOutputs(props: PropsType) {

packages/materials/form-materials/src/components/batch-outputs/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export type ValueType = Record<string, IFlowRefValue | undefined>;
 

packages/materials/form-materials/src/components/batch-variable-selector/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "batch-variable-selector",
-  "depMaterials": [
-    "variable-selector"
-  ],
-  "depPackages": [
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/batch-variable-selector/index.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { PrivateScopeProvider } from '@flowgram.ai/editor';
 
-import { VariableSelector, VariableSelectorProps } from '../variable-selector';
+import { VariableSelector, VariableSelectorProps } from '@/components/variable-selector';
 
 const batchVariableSchema: IJsonSchema = {
   type: 'array',

packages/materials/form-materials/src/components/code-editor-mini/config.json

@@ -1,7 +0,0 @@
-{
-  "name": "code-editor-mini",
-  "depMaterials": [
-    "code-editor"
-  ],
-  "depPackages": []
-}

packages/materials/form-materials/src/components/code-editor-mini/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import { CodeEditor, CodeEditorPropsType } from '../code-editor';
+import { CodeEditor, CodeEditorPropsType } from '@/components/code-editor';
 
 const UIMini = styled.div`
   .ͼ1 .cm-content {

packages/materials/form-materials/src/components/code-editor/config.json

@@ -1,10 +0,0 @@
-{
-  "name": "code-editor",
-  "depMaterials": [],
-  "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.879fbb",
-    "@codemirror/view",
-    "@codemirror/state",
-    "typescript"
-  ]
-}

packages/materials/form-materials/src/components/condition-row/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "condition-row",
-  "depMaterials": [
-    "variable-selector",
-    "dynamic-value-input",
-    "flow-value"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "styled-components",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/condition-row/hooks/useRule.ts

@@ -8,9 +8,10 @@ import { useMemo } from 'react';
 import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
+import { IFlowRefValue } from '@/typings';
+
 import { IRules } from '../types';
 import { defaultRules } from '../constants';
-import { IFlowRefValue } from '../../../typings';
 
 export function useRule(left?: IFlowRefValue, userRules?: IRules) {
   const available = useScopeAvailable();

packages/materials/form-materials/src/components/condition-row/index.tsx

@@ -8,12 +8,13 @@ import React, { useMemo } from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { Input } from '@douyinfe/semi-ui';
 
+import { VariableSelector } from '@/components/variable-selector';
+import { DynamicValueInput } from '@/components/dynamic-value-input';
+
 import { ConditionRowValueType, IRules, OpConfigs } from './types';
 import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
 import { useRule } from './hooks/useRule';
 import { useOp } from './hooks/useOp';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
 
 interface PropTypes {
   value?: ConditionRowValueType;

packages/materials/form-materials/src/components/condition-row/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue } from '../../typings';
+import { IFlowConstantRefValue, IFlowRefValue } from '@/typings';
 
 export enum Op {
   EQ = 'eq',

packages/materials/form-materials/src/components/constant-input/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "constant-input",
-  "depMaterials": [
-    "plugins/json-schema-preset"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui"
-  ]
-}

packages/materials/form-materials/src/components/constant-input/index.tsx

@@ -8,8 +8,11 @@ import React, { useMemo } from 'react';
 
 import { Input } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
-import { PropsType } from './types';
+import { useTypeManager } from '@/plugins';
+
+import { PropsType, Strategy as ConstantInputStrategy } from './types';
+
+export { ConstantInputStrategy };
 
 export function ConstantInput(props: PropsType) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;

packages/materials/form-materials/src/components/constant-input/types.ts

@@ -5,7 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { ConstantRendererProps } from '../../plugins';
+import { ConstantRendererProps } from '@/plugins';
 
 export interface Strategy<Value = any> {
   hit: (schema: IJsonSchema) => boolean;

packages/materials/form-materials/src/components/display-flow-value/config.json

@@ -1,8 +0,0 @@
-{
-  "name": "display-flow-value",
-  "depMaterials": [
-    "components/display-schema-tag",
-    "typings/flow-value"
-  ],
-  "depPackages": []
-}

packages/materials/form-materials/src/components/display-flow-value/index.tsx

@@ -8,8 +8,8 @@ import React, { useMemo } from 'react';
 import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { DisplaySchemaTag } from '../display-schema-tag';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
   value?: IFlowValue;

packages/materials/form-materials/src/components/display-inputs-values/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "display-outputs",
-  "depMaterials": [
-    "components/display-schema-tag"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui"
-  ]
-}

packages/materials/form-materials/src/components/display-inputs-values/index.tsx

@@ -5,8 +5,9 @@
 
 import React from 'react';
 
-import { DisplayFlowValue } from '../display-flow-value';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { DisplayFlowValue } from '@/components/display-flow-value';
+
 import { DisplayInputsWrapper } from './styles';
 
 interface PropsType {

packages/materials/form-materials/src/components/display-outputs/config.json

@@ -1,10 +0,0 @@
-{
-  "name": "display-outputs",
-  "depMaterials": [
-    "components/display-flow-value"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "styled-components"
-  ]
-}

packages/materials/form-materials/src/components/display-outputs/index.tsx

@@ -8,7 +8,8 @@ import React, { useEffect } from 'react';
 import { IJsonSchema, JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
 
-import { DisplaySchemaTag } from '../display-schema-tag';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
+
 import { DisplayOutputsWrapper } from './styles';
 
 interface PropsType {

packages/materials/form-materials/src/components/display-schema-tag/config.json

@@ -1,10 +0,0 @@
-{
-  "name": "display-schema-tag",
-  "depMaterials": [
-    "components/display-schema-tree"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "styled-components"
-  ]
-}

packages/materials/form-materials/src/components/display-schema-tag/index.tsx

@@ -8,8 +8,9 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Popover } from '@douyinfe/semi-ui';
 
-import { DisplaySchemaTree } from '../display-schema-tree';
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
+import { DisplaySchemaTree } from '@/components/display-schema-tree';
+
 import { PopoverContent, StyledTag, TitleSpan } from './styles';
 
 interface PropsType {

packages/materials/form-materials/src/components/display-schema-tree/config.json

@@ -1,11 +0,0 @@
-{
-  "name": "display-schema-tree",
-  "depMaterials": [
-    "plugins/json-schema-preset"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "styled-components",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/display-schema-tree/index.tsx

@@ -7,7 +7,8 @@ import React from 'react';
 
 import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
+
 import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
 
 interface PropsType {

packages/materials/form-materials/src/components/dynamic-value-input/config.json

@@ -1,14 +0,0 @@
-{
-  "name": "dynamic-value-input",
-  "depMaterials": [
-    "flow-value",
-    "constant-input",
-    "variable-selector"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "@douyinfe/semi-icons",
-    "styled-components",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/dynamic-value-input/hooks.ts

@@ -8,7 +8,7 @@ import { useMemo, useState } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings/flow-value';
 
 export function useRefVariable(value?: IFlowConstantRefValue) {
   const available = useScopeAvailable();

packages/materials/form-materials/src/components/dynamic-value-input/index.tsx

@@ -9,11 +9,11 @@ import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { VariableSelector } from '../variable-selector';
-import { TypeSelector } from '../type-selector';
-import { Strategy } from '../constant-input/types';
-import { ConstantInput } from '../constant-input';
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings/flow-value';
+import { VariableSelector } from '@/components/variable-selector';
+import { TypeSelector } from '@/components/type-selector';
+import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
+
 import { UIContainer, UIMain, UITrigger, UIType } from './styles';
 import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
@@ -25,7 +25,7 @@ interface PropsType {
   style?: React.CSSProperties;
   schema?: IJsonSchema;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     schema?: IJsonSchema; // set schema of constant input only
     [key: string]: any;
   };

packages/materials/form-materials/src/components/inputs-values/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "inputs-values",
-  "depMaterials": [
-    "flow-value",
-    "dynamic-value-input"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "@douyinfe/semi-icons",
-    "styled-components",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/inputs-values/index.tsx

@@ -8,10 +8,11 @@ import React from 'react';
 import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { IFlowConstantRefValue, IFlowValue } from '@/typings';
+import { useObjectList } from '@/hooks';
+import { DynamicValueInput } from '@/components/dynamic-value-input';
+
 import { PropsType } from './types';
-import { DynamicValueInput } from '../dynamic-value-input';
-import { IFlowConstantRefValue, IFlowValue } from '../../typings';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 import { BlurInput } from './components/blur-input';
 

packages/materials/form-materials/src/components/inputs-values/types.ts

@@ -5,8 +5,8 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { Strategy } from '../constant-input/types';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {
   value?: Record<string, IFlowValue | undefined>;
@@ -16,7 +16,7 @@ export interface PropsType {
   schema?: IJsonSchema;
   style?: React.CSSProperties;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     [key: string]: any;
   };
 }

packages/materials/form-materials/src/components/json-editor-with-variables/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "json-editor-with-variables",
-  "depMaterials": [
-    "variable-selector",
-    "code-editor"
-  ],
-  "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.879fbb",
-    "@codemirror/view",
-    "styled-components",
-    "@douyinfe/semi-ui"
-  ]
-}

packages/materials/form-materials/src/components/json-editor-with-variables/extensions/variable-tree.tsx

@@ -15,7 +15,7 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
-import { useVariableTree } from '../../variable-selector';
+import { useVariableTree } from '@/components/variable-selector';
 
 export function VariableTree() {
   const [posKey, setPosKey] = useState('');

packages/materials/form-materials/src/components/json-editor-with-variables/index.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { transformerCreator } from '@coze-editor/editor/preset-code';
 import { Text } from '@coze-editor/editor/language-json';
 
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
-import { CodeEditor, type CodeEditorPropsType } from '../code-editor';
 
 type Match = { match: string; range: [number, number] };
 function findAllMatches(inputString: string, regex: RegExp): Match[] {

packages/materials/form-materials/src/components/json-schema-editor/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "json-schema-editor",
-  "depMaterials": [
-    "type-selector",
-    "constant-inputs"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "@douyinfe/semi-icons",
-    "styled-components",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/json-schema-editor/default-value.tsx

@@ -9,6 +9,8 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
 import { IconBrackets } from '@douyinfe/semi-icons';
 
+import { ConstantInput } from '@/components/constant-input';
+
 import { getValueType } from './utils';
 import {
   ConstantInputWrapper,
@@ -17,7 +19,6 @@ import {
   JSONHeaderRight,
   JSONViewerWrapper,
 } from './styles';
-import { ConstantInput } from '../constant-input';
 
 /**
  * 根据不同的数据类型渲染对应的默认值输入组件。

packages/materials/form-materials/src/components/json-schema-editor/index.tsx

@@ -17,7 +17,8 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { TypeSelector } from '../type-selector';
+import { TypeSelector } from '@/components/type-selector';
+
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,

packages/materials/form-materials/src/components/prompt-editor-with-inputs/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "prompt-editor-with-inputs",
-  "depMaterials": [
-    "prompt-editor",
-    "flow-value"
-  ],
-  "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.879fbb",
-    "@codemirror/view",
-    "styled-components",
-    "@douyinfe/semi-ui"
-  ]
-}

packages/materials/form-materials/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx

@@ -15,8 +15,9 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
+import { IFlowValue } from '@/typings';
+
 import { InputsPicker } from '../inputs-picker';
-import { IFlowValue } from '../../../typings';
 
 export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlowValue> }) {
   const [posKey, setPosKey] = useState('');

packages/materials/form-materials/src/components/prompt-editor-with-inputs/index.tsx

@@ -5,9 +5,10 @@
 
 import React from 'react';
 
+import { IFlowValue } from '@/typings';
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
 import { InputsTree } from './extensions/inputs-tree';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
-import { IFlowValue } from '../../typings';
 
 interface PropsType extends PromptEditorPropsType {
   inputsValues: Record<string, IFlowValue>;

packages/materials/form-materials/src/components/prompt-editor-with-inputs/inputs-picker.tsx

@@ -16,7 +16,7 @@ import {
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Tree } from '@douyinfe/semi-ui';
 
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 

packages/materials/form-materials/src/components/prompt-editor-with-variables/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "prompt-editor-with-variables",
-  "depMaterials": [
-    "variable-selector",
-    "prompt-editor"
-  ],
-  "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.879fbb",
-    "@codemirror/view",
-    "styled-components",
-    "@douyinfe/semi-ui"
-  ]
-}

packages/materials/form-materials/src/components/prompt-editor-with-variables/extensions/variable-tree.tsx

@@ -15,7 +15,7 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
-import { useVariableTree } from '../../variable-selector';
+import { useVariableTree } from '@/components/variable-selector';
 
 export function VariableTree() {
   const [posKey, setPosKey] = useState('');

packages/materials/form-materials/src/components/prompt-editor-with-variables/index.tsx

@@ -5,9 +5,10 @@
 
 import React from 'react';
 
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
 
 export function PromptEditorWithVariables(props: PromptEditorPropsType) {
   return (

packages/materials/form-materials/src/components/prompt-editor/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "prompt-editor",
-  "depMaterials": [],
-  "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.879fbb",
-    "@codemirror/view",
-    "styled-components"
-  ]
-}

packages/materials/form-materials/src/components/prompt-editor/types.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { IFlowTemplateValue } from '../../typings';
+import { IFlowTemplateValue } from '@/typings';
 
 export type PropsType = React.PropsWithChildren<{
   value?: IFlowTemplateValue;

packages/materials/form-materials/src/components/type-selector/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "type-selector",
-  "depMaterials": [],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "@douyinfe/semi-icons",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/type-selector/index.tsx

@@ -8,7 +8,7 @@ import React, { useMemo } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
 
 interface PropTypes {
   value?: Partial<IJsonSchema>;

packages/materials/form-materials/src/components/variable-selector/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "variable-selector",
-  "depMaterials": [],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "styled-components",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/components/variable-selector/use-variable-tree.tsx

@@ -10,7 +10,7 @@ import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
 
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;

packages/materials/form-materials/src/effects/auto-rename-ref/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "auto-rename-ref",
-  "depMaterials": ["flow-value"],
-  "depPackages": ["lodash"]
-}

packages/materials/form-materials/src/effects/auto-rename-ref/index.ts

@@ -11,7 +11,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
 
 /**
  * Auto rename ref when form item's key is renamed

packages/materials/form-materials/src/effects/listen-ref-schema-change/config.json

@@ -1,10 +0,0 @@
-{
-  "name": "listen-ref-schema-change",
-  "depMaterials": [
-    "flow-value"
-  ],
-  "depPackages": [
-    "lodash",
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/effects/listen-ref-schema-change/index.ts

@@ -13,7 +13,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

packages/materials/form-materials/src/effects/listen-ref-value-change/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "listen-ref-value-change",
-  "depMaterials": [
-    "flow-value"
-  ],
-  "depPackages": [
-    "lodash"
-  ]
-}

packages/materials/form-materials/src/effects/listen-ref-value-change/index.ts

@@ -12,7 +12,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

packages/materials/form-materials/src/effects/provide-batch-input/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "provide-batch-input",
-  "depMaterials": ["flow-value"],
-  "depPackages": []
-}

packages/materials/form-materials/src/effects/provide-batch-input/index.ts

@@ -11,7 +11,7 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
   private: true,

packages/materials/form-materials/src/effects/provide-json-schema-outputs/config.json

@@ -1,7 +0,0 @@
-{
-  "name": "provide-json-schema-outputs",
-  "depMaterials": [],
-  "depPackages": [
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/effects/sync-variable-title/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "sync-variable-title",
-  "depMaterials": [],
-  "depPackages": []
-}

packages/materials/form-materials/src/effects/validate-when-variable-sync/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "validate-when-variable-sync",
-  "depMaterials": [],
-  "depPackages": []
-}

packages/materials/form-materials/src/form-plugins/batch-outputs-plugin/config.json

@@ -1,7 +0,0 @@
-{
-  "name": "batch-outputs-plugin",
-  "depMaterials": [
-    "flow-value"
-  ],
-  "depPackages": []
-}

packages/materials/form-materials/src/form-plugins/batch-outputs-plugin/index.ts

@@ -17,7 +17,7 @@ import {
   FlowNodeScopeType,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [

packages/materials/form-materials/src/form-plugins/infer-assign-plugin/config.json

@@ -1,7 +0,0 @@
-{
-  "name": "infer-assign-plugin",
-  "depMaterials": [
-    "flow-value"
-  ],
-  "depPackages": []
-}

packages/materials/form-materials/src/form-plugins/infer-assign-plugin/index.ts

@@ -14,7 +14,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowValue } from '../../typings';
+import { IFlowRefValue, IFlowValue } from '@/typings';
 
 type AssignValueType =
   | {

packages/materials/form-materials/src/form-plugins/infer-inputs-plugin/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "infer-inputs-plugin",
-  "depMaterials": [
-    "flow-value"
-  ],
-  "depPackages": [
-    "@flowgram.ai/json-schema"
-  ]
-}

packages/materials/form-materials/src/form-plugins/infer-inputs-plugin/index.ts

@@ -12,7 +12,7 @@ import {
   Scope,
 } from '@flowgram.ai/editor';
 
-import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '@/typings';
 
 interface InputConfig {
   sourceKey: string;

packages/materials/form-materials/src/hooks/use-object-list/config.json

@@ -1,8 +0,0 @@
-{
-  "name": "use-object-list",
-  "depMaterials": [],
-  "depPackages": [
-    "lodash",
-    "nanoid"
-  ]
-}

packages/materials/form-materials/src/shared/format-legacy-refs/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "format-legacy-ref",
-  "depMaterials": [],
-  "depPackages": []
-}

packages/materials/form-materials/src/validate/validate-flow-value/config.json

@@ -1,7 +0,0 @@
-{
-  "name": "validate-flow-value",
-  "depMaterials": [
-    "flow-value"
-  ],
-  "depPackages": []
-}