@flowgram.ai/form-materials 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -1,6 +1,27 @@
 import React$1 from 'react';
-import { VarJSONSchema, EffectOptions } from '@flowgram.ai/editor';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
+import { EffectOptions, ASTNodeJSON, ASTNode, BaseType } from '@flowgram.ai/editor';
+
+type JsonSchemaBasicType = 'boolean' | 'string' | 'integer' | 'number' | 'object' | 'array' | 'map';
+interface IJsonSchema<T = string> {
+    type?: T;
+    default?: any;
+    title?: string;
+    description?: string;
+    enum?: (string | number)[];
+    properties?: Record<string, IJsonSchema<T>>;
+    additionalProperties?: IJsonSchema<T>;
+    items?: IJsonSchema<T>;
+    required?: string[];
+    $ref?: string;
+    extra?: {
+        index?: number;
+        weak?: boolean;
+        formComponent?: string;
+        [key: string]: any;
+    };
+}
+type IBasicJsonSchema = IJsonSchema<JsonSchemaBasicType>;
 
 interface PropTypes$1 {
     value?: string[];
@@ -9,8 +30,8 @@ interface PropTypes$1 {
         notFoundContent?: string;
     };
     onChange: (value?: string[]) => void;
-    includeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
-    excludeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+    includeSchema?: IJsonSchema | IJsonSchema[];
+    excludeSchema?: IJsonSchema | IJsonSchema[];
     readonly?: boolean;
     hasError?: boolean;
     style?: React$1.CSSProperties;
@@ -19,7 +40,24 @@ interface PropTypes$1 {
 type VariableSelectorProps = PropTypes$1;
 declare const VariableSelector: ({ value, config, onChange, style, readonly, includeSchema, excludeSchema, hasError, triggerRender, }: PropTypes$1) => React$1.JSX.Element;
 
-type JsonSchema = VarJSONSchema.ISchema;
+interface IFlowConstantValue {
+    type: 'constant';
+    content?: string | number | boolean;
+}
+interface IFlowRefValue {
+    type: 'ref';
+    content?: string[];
+}
+interface IFlowExpressionValue {
+    type: 'expression';
+    content?: string;
+}
+interface IFlowTemplateValue {
+    type: 'template';
+    content?: string;
+}
+type IFlowValue = IFlowConstantValue | IFlowRefValue | IFlowExpressionValue | IFlowTemplateValue;
+type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
 
 declare const VariableTypeIcons: {
     [key: string]: React$1.ReactNode;
@@ -27,16 +65,16 @@ declare const VariableTypeIcons: {
 declare const ArrayIcons: {
     [key: string]: React$1.ReactNode;
 };
-declare const getSchemaIcon: (value?: Partial<JsonSchema>) => React$1.ReactNode;
+declare const getSchemaIcon: (value?: Partial<IJsonSchema>) => React$1.ReactNode;
 
 interface PropTypes {
-    value?: Partial<JsonSchema>;
-    onChange: (value?: Partial<JsonSchema>) => void;
+    value?: Partial<IJsonSchema>;
+    onChange: (value?: Partial<IJsonSchema>) => void;
     disabled?: boolean;
     style?: React$1.CSSProperties;
 }
-declare const getTypeSelectValue: (value?: Partial<JsonSchema>) => string[] | undefined;
-declare const parseTypeSelectValue: (value?: string[]) => Partial<JsonSchema> | undefined;
+declare const getTypeSelectValue: (value?: Partial<IJsonSchema>) => string[] | undefined;
+declare const parseTypeSelectValue: (value?: string[]) => Partial<IJsonSchema> | undefined;
 declare function TypeSelector(props: PropTypes): React$1.JSX.Element;
 
 interface ConfigType {
@@ -47,15 +85,15 @@ interface ConfigType {
 }
 
 declare function JsonSchemaEditor(props: {
-    value?: JsonSchema;
-    onChange?: (value: JsonSchema) => void;
+    value?: IJsonSchema;
+    onChange?: (value: IJsonSchema) => void;
     config?: ConfigType;
 }): React$1.JSX.Element;
 
 declare function BatchVariableSelector(props: VariableSelectorProps): React$1.JSX.Element;
 
 interface Strategy<Value = any> {
-    hit: (schema: VarJSONSchema.ISchema) => boolean;
+    hit: (schema: IJsonSchema) => boolean;
     Renderer: React.FC<RendererProps<Value>>;
 }
 interface RendererProps<Value = any> {
@@ -64,39 +102,20 @@ interface RendererProps<Value = any> {
     readonly?: boolean;
 }
 interface PropsType$1 extends RendererProps {
-    schema: VarJSONSchema.ISchema;
+    schema: IJsonSchema;
     strategies?: Strategy[];
     [key: string]: any;
 }
 
 declare function ConstantInput(props: PropsType$1): React$1.JSX.Element;
 
-interface IFlowConstantValue {
-    type: 'constant';
-    content?: string | number | boolean;
-}
-interface IFlowRefValue {
-    type: 'ref';
-    content?: string[];
-}
-interface IFlowExpressionValue {
-    type: 'expression';
-    content?: string;
-}
-interface IFlowTemplateValue {
-    type: 'template';
-    content?: string;
-}
-type IFlowValue = IFlowConstantValue | IFlowRefValue | IFlowExpressionValue | IFlowTemplateValue;
-type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
-
 interface PropsType {
     value?: IFlowConstantRefValue;
     onChange: (value?: IFlowConstantRefValue) => void;
     readonly?: boolean;
     hasError?: boolean;
     style?: React$1.CSSProperties;
-    schema?: VarJSONSchema.ISchema;
+    schema?: IJsonSchema;
     constantProps?: {
         strategies?: Strategy[];
         [key: string]: any;
@@ -188,4 +207,31 @@ declare function formatNewRefToLegacyRef(value: NewFlowRefValueSchema): {
     content: string;
 };
 
-export { ArrayIcons, BatchVariableSelector, ConstantInput, DynamicValueInput, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type JsonSchema, JsonSchemaEditor, TypeSelector, VariableSelector, type VariableSelectorProps, VariableTypeIcons, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getSchemaIcon, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect };
+declare namespace JsonSchemaUtils {
+    /**
+     * Converts a JSON schema to an Abstract Syntax Tree (AST) representation.
+     * This function recursively processes the JSON schema and creates corresponding AST nodes.
+     *
+     * For more information on JSON Schema, refer to the official documentation:
+     * https://json-schema.org/
+     *
+     * @param jsonSchema - The JSON schema to convert.
+     * @returns An AST node representing the JSON schema, or undefined if the schema type is not recognized.
+     */
+    function schemaToAST(jsonSchema: IJsonSchema): ASTNodeJSON | undefined;
+    /**
+     * Convert AST To JSON Schema
+     * @param typeAST
+     * @returns
+     */
+    function astToSchema(typeAST: ASTNode): IJsonSchema | undefined;
+    /**
+     * Check if the AST type is match the JSON Schema
+     * @param typeAST
+     * @param schema
+     * @returns
+     */
+    function isASTMatchSchema(typeAST: BaseType, schema: IJsonSchema | IJsonSchema[]): boolean;
+}
+
+export { ArrayIcons, BatchVariableSelector, ConstantInput, DynamicValueInput, type IBasicJsonSchema, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IJsonSchema, type JsonSchemaBasicType, JsonSchemaEditor, JsonSchemaUtils, TypeSelector, VariableSelector, type VariableSelectorProps, VariableTypeIcons, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getSchemaIcon, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   ConstantInput: () => ConstantInput,
   DynamicValueInput: () => DynamicValueInput,
   JsonSchemaEditor: () => JsonSchemaEditor,
+  JsonSchemaUtils: () => JsonSchemaUtils,
   TypeSelector: () => TypeSelector,
   VariableSelector: () => VariableSelector,
   VariableTypeIcons: () => VariableTypeIcons,
@@ -58,7 +59,7 @@ var import_semi_icons2 = require("@douyinfe/semi-icons");
 
 // src/components/variable-selector/use-variable-tree.tsx
 var import_react2 = __toESM(require("react"));
-var import_editor = require("@flowgram.ai/editor");
+var import_editor2 = require("@flowgram.ai/editor");
 var import_semi_ui = require("@douyinfe/semi-ui");
 
 // src/components/type-selector/constants.tsx
@@ -450,10 +451,122 @@ var options = [
   }
 ];
 
+// src/utils/json-schema/index.ts
+var import_lodash = require("lodash");
+var import_editor = require("@flowgram.ai/editor");
+var JsonSchemaUtils;
+((JsonSchemaUtils2) => {
+  function schemaToAST(jsonSchema) {
+    const { type, extra } = jsonSchema || {};
+    const { weak = false } = extra || {};
+    if (!type) {
+      return void 0;
+    }
+    switch (type) {
+      case "object":
+        if (weak) {
+          return { kind: import_editor.ASTKind.Object, weak: true };
+        }
+        return import_editor.ASTFactory.createObject({
+          properties: Object.entries(jsonSchema.properties || {}).sort((a, b) => ((0, import_lodash.get)(a?.[1], "extra.index") || 0) - ((0, import_lodash.get)(b?.[1], "extra.index") || 0)).map(([key, _property]) => ({
+            key,
+            type: schemaToAST(_property),
+            meta: { description: _property.description }
+          }))
+        });
+      case "array":
+        if (weak) {
+          return { kind: import_editor.ASTKind.Array, weak: true };
+        }
+        return import_editor.ASTFactory.createArray({
+          items: schemaToAST(jsonSchema.items)
+        });
+      case "map":
+        if (weak) {
+          return { kind: import_editor.ASTKind.Map, weak: true };
+        }
+        return import_editor.ASTFactory.createMap({
+          valueType: schemaToAST(jsonSchema.additionalProperties)
+        });
+      case "string":
+        return import_editor.ASTFactory.createString();
+      case "number":
+        return import_editor.ASTFactory.createNumber();
+      case "boolean":
+        return import_editor.ASTFactory.createBoolean();
+      case "integer":
+        return import_editor.ASTFactory.createInteger();
+      default:
+        return import_editor.ASTFactory.createCustomType({ typeName: type });
+    }
+  }
+  JsonSchemaUtils2.schemaToAST = schemaToAST;
+  function astToSchema(typeAST) {
+    if (import_editor.ASTMatch.isString(typeAST)) {
+      return {
+        type: "string"
+      };
+    }
+    if (import_editor.ASTMatch.isBoolean(typeAST)) {
+      return {
+        type: "boolean"
+      };
+    }
+    if (import_editor.ASTMatch.isNumber(typeAST)) {
+      return {
+        type: "number"
+      };
+    }
+    if (import_editor.ASTMatch.isInteger(typeAST)) {
+      return {
+        type: "integer"
+      };
+    }
+    if (import_editor.ASTMatch.isObject(typeAST)) {
+      return {
+        type: "object",
+        properties: Object.fromEntries(
+          Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)])
+        )
+      };
+    }
+    if (import_editor.ASTMatch.isArray(typeAST)) {
+      return {
+        type: "array",
+        items: astToSchema(typeAST.items)
+      };
+    }
+    if (import_editor.ASTMatch.isMap(typeAST)) {
+      return {
+        type: "map",
+        items: astToSchema(typeAST.valueType)
+      };
+    }
+    if (import_editor.ASTMatch.isCustomType(typeAST)) {
+      return {
+        type: typeAST.typeName
+      };
+    }
+    return void 0;
+  }
+  JsonSchemaUtils2.astToSchema = astToSchema;
+  function isASTMatchSchema(typeAST, schema) {
+    if (Array.isArray(schema)) {
+      return typeAST.isTypeEqual(
+        import_editor.ASTFactory.createUnion({
+          types: schema.map((_schema) => schemaToAST(_schema)).filter(Boolean)
+        })
+      );
+    }
+    return typeAST.isTypeEqual(schemaToAST(schema));
+  }
+  JsonSchemaUtils2.isASTMatchSchema = isASTMatchSchema;
+})(JsonSchemaUtils || (JsonSchemaUtils = {}));
+
 // src/components/variable-selector/use-variable-tree.tsx
 function useVariableTree(params) {
   const { includeSchema, excludeSchema } = params;
-  const available = (0, import_editor.useScopeAvailable)();
+  const available = (0, import_editor2.useScopeAvailable)();
   const getVariableTypeIcon = (0, import_react2.useCallback)((variable) => {
     if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
@@ -462,7 +575,7 @@ function useVariableTree(params) {
       return variable.meta.icon;
     }
     const _type = variable.type;
-    if (import_editor.ASTMatch.isArray(_type)) {
+    if (import_editor2.ASTMatch.isArray(_type)) {
       return /* @__PURE__ */ import_react2.default.createElement(
         import_semi_ui.Icon,
         {
@@ -471,7 +584,7 @@ function useVariableTree(params) {
         }
       );
     }
-    if (import_editor.ASTMatch.isCustomType(_type)) {
+    if (import_editor2.ASTMatch.isCustomType(_type)) {
       return /* @__PURE__ */ import_react2.default.createElement(import_semi_ui.Icon, { size: "small", svg: VariableTypeIcons[_type.typeName.toLowerCase()] });
     }
     return /* @__PURE__ */ import_react2.default.createElement(import_semi_ui.Icon, { size: "small", svg: VariableTypeIcons[variable.type?.kind.toLowerCase()] });
@@ -482,7 +595,7 @@ function useVariableTree(params) {
       return null;
     }
     let children;
-    if (import_editor.ASTMatch.isObject(type)) {
+    if (import_editor2.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...parentFields, variable])).filter(Boolean);
       if (!children?.length) {
         return null;
@@ -490,8 +603,8 @@ function useVariableTree(params) {
     }
     const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
     const key = keyPath.join(".");
-    const isSchemaInclude = includeSchema ? type.isEqualWithJSONSchema(includeSchema) : true;
-    const isSchemaExclude = excludeSchema ? type.isEqualWithJSONSchema(excludeSchema) : false;
+    const isSchemaInclude = includeSchema ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema) : true;
+    const isSchemaExclude = excludeSchema ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema) : false;
     const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
     if (!isSchemaMatch && !children?.length) {
       return null;
@@ -1026,13 +1139,13 @@ function PropertyEdit(props) {
 
 // src/components/batch-variable-selector/index.tsx
 var import_react8 = __toESM(require("react"));
-var import_editor2 = require("@flowgram.ai/editor");
+var import_editor3 = require("@flowgram.ai/editor");
 var batchVariableSchema = {
   type: "array",
   extra: { weak: true }
 };
 function BatchVariableSelector(props) {
-  return /* @__PURE__ */ import_react8.default.createElement(import_editor2.PrivateScopeProvider, null, /* @__PURE__ */ import_react8.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+  return /* @__PURE__ */ import_react8.default.createElement(import_editor3.PrivateScopeProvider, null, /* @__PURE__ */ import_react8.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
 }
 
 // src/components/constant-input/index.tsx
@@ -1178,29 +1291,29 @@ function DynamicValueInput({
 }
 
 // src/effects/provide-batch-input/index.ts
-var import_editor3 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor3.createEffectFromVariableProvider)({
+var import_editor4 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor4.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor3.ASTFactory.createVariableDeclaration({
+    import_editor4.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor3.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor4.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor3.ASTFactory.createObject({
+      type: import_editor4.ASTFactory.createObject({
         properties: [
-          import_editor3.ASTFactory.createProperty({
+          import_editor4.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor3.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor3.ASTFactory.createKeyPathExpression({
+            initializer: import_editor4.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor4.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor3.ASTFactory.createProperty({
+          import_editor4.ASTFactory.createProperty({
             key: "index",
-            type: import_editor3.ASTFactory.createNumber()
+            type: import_editor4.ASTFactory.createNumber()
           })
         ]
       })
@@ -1209,22 +1322,22 @@ var provideBatchInputEffect = (0, import_editor3.createEffectFromVariableProvide
 });
 
 // src/effects/provide-batch-outputs/index.ts
-var import_editor4 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor4.createEffectFromVariableProvider)({
+var import_editor5 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor5.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor4.ASTFactory.createVariableDeclaration({
+    import_editor5.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor4.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor5.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor4.ASTFactory.createObject({
+      type: import_editor5.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor4.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor5.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor4.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor4.ASTFactory.createKeyPathExpression({
+            initializer: import_editor5.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor5.ASTFactory.createKeyPathExpression({
                 keyPath: value2.content || []
               })
             })
@@ -1236,9 +1349,9 @@ var provideBatchOutputsEffect = (0, import_editor4.createEffectFromVariableProvi
 });
 
 // src/utils/format-legacy-refs/index.ts
-var import_lodash = require("lodash");
+var import_lodash2 = require("lodash");
 function formatLegacyRefOnSubmit(value) {
-  if ((0, import_lodash.isObject)(value)) {
+  if ((0, import_lodash2.isObject)(value)) {
     if (isLegacyFlowRefValueSchema(value)) {
       return formatLegacyRefToNewRef(value);
     }
@@ -1255,7 +1368,7 @@ function formatLegacyRefOnSubmit(value) {
   return value;
 }
 function formatLegacyRefOnInit(value) {
-  if ((0, import_lodash.isObject)(value)) {
+  if ((0, import_lodash2.isObject)(value)) {
     if (isNewFlowRefValueSchema(value)) {
       return formatNewRefToLegacyRef(value);
     }
@@ -1272,10 +1385,10 @@ function formatLegacyRefOnInit(value) {
   return value;
 }
 function isLegacyFlowRefValueSchema(value) {
-  return (0, import_lodash.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+  return (0, import_lodash2.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
 }
 function isNewFlowRefValueSchema(value) {
-  return (0, import_lodash.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+  return (0, import_lodash2.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
 }
 function formatLegacyRefToNewRef(value) {
   const keyPath = value.content.split(".");
@@ -1303,6 +1416,7 @@ function formatNewRefToLegacyRef(value) {
   ConstantInput,
   DynamicValueInput,
   JsonSchemaEditor,
+  JsonSchemaUtils,
   TypeSelector,
   VariableSelector,
   VariableTypeIcons,