@flowgram.ai/form-materials 0.2.0 → 0.2.1

package/src/components/type-selector/constants.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { CascaderData } from '@douyinfe/semi-ui/lib/es/cascader';
 import Icon from '@douyinfe/semi-icons';
 
-import { JsonSchema } from './types';
+import { IJsonSchema } from '../../typings';
 
 export const VariableTypeIcons: { [key: string]: React.ReactNode } = {
   custom: (
@@ -271,7 +271,7 @@ export const ArrayIcons: { [key: string]: React.ReactNode } = {
   ),
 };
 
-export const getSchemaIcon = (value?: Partial<JsonSchema>) => {
+export const getSchemaIcon = (value?: Partial<IJsonSchema>) => {
   if (value?.type === 'array') {
     return ArrayIcons[value.items?.type || 'object'];
   }

package/src/components/type-selector/index.tsx

@@ -2,17 +2,17 @@ import React, { useMemo } from 'react';
 
 import { Button, Cascader } from '@douyinfe/semi-ui';
 
-import { JsonSchema } from './types';
+import { IJsonSchema } from '../../typings';
 import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constants';
 
 interface PropTypes {
-  value?: Partial<JsonSchema>;
-  onChange: (value?: Partial<JsonSchema>) => void;
+  value?: Partial<IJsonSchema>;
+  onChange: (value?: Partial<IJsonSchema>) => void;
   disabled?: boolean;
   style?: React.CSSProperties;
 }
 
-export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | undefined => {
+export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
   if (value?.type === 'array' && value?.items) {
     return [value.type, ...(getTypeSelectValue(value.items) || [])];
   }
@@ -20,7 +20,7 @@ export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | unde
   return value?.type ? [value.type] : undefined;
 };
 
-export const parseTypeSelectValue = (value?: string[]): Partial<JsonSchema> | undefined => {
+export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | undefined => {
   const [type, ...subTypes] = value || [];
 
   if (type === 'array') {
@@ -54,4 +54,4 @@ export function TypeSelector(props: PropTypes) {
   );
 }
 
-export { JsonSchema, VariableTypeIcons, ArrayIcons, getSchemaIcon };
+export { VariableTypeIcons, ArrayIcons, getSchemaIcon };

package/src/components/variable-selector/config.json

@@ -1,5 +1,5 @@
 {
   "name": "variable-selector",
-  "depMaterials": ["type-selector"],
+  "depMaterials": ["type-selector", "utils/json-schema", "typings/json-schema"],
   "depPackages": ["@douyinfe/semi-ui", "styled-components"]
 }

package/src/components/variable-selector/index.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 
-import { VarJSONSchema } from '@flowgram.ai/editor';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
+import { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
 import { UIRootTitle, UITag, UITreeSelect } from './styles';
 
@@ -15,8 +15,8 @@ interface PropTypes {
     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.CSSProperties;

package/src/components/variable-selector/use-variable-tree.tsx

@@ -1,16 +1,18 @@
 import React, { useCallback } from 'react';
 
-import { useScopeAvailable, ASTMatch, BaseVariableField, VarJSONSchema } from '@flowgram.ai/editor';
+import { useScopeAvailable, ASTMatch, BaseVariableField } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
 import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
+import { JsonSchemaUtils } from '../../utils/json-schema';
+import { IJsonSchema } from '../../typings/json-schema';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
 export function useVariableTree(params: {
-  includeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
-  excludeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
 }): TreeNodeData[] {
   const { includeSchema, excludeSchema } = params;
 
@@ -68,8 +70,12 @@ export 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 not match, and no children, return null

package/src/typings/index.ts

@@ -1 +1,2 @@
 export * from './flow-value';
+export * from './json-schema';

package/src/typings/json-schema/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "json-schema",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/typings/json-schema/index.ts

@@ -0,0 +1,31 @@
+export type JsonSchemaBasicType =
+  | 'boolean'
+  | 'string'
+  | 'integer'
+  | 'number'
+  | 'object'
+  | 'array'
+  | 'map';
+
+export 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;
+    // Used in BaseType.isEqualWithJSONSchema, the type comparison will be weak
+    weak?: boolean;
+    // Set the render component
+    formComponent?: string;
+    [key: string]: any;
+  };
+}
+
+export type IBasicJsonSchema = IJsonSchema<JsonSchemaBasicType>;

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './format-legacy-refs';
+export * from './json-schema';

package/src/utils/json-schema/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "json-schema",
+  "depMaterials": ["typings/json-schema"],
+  "depPackages": ["lodash"]
+}

package/src/utils/json-schema/index.ts

@@ -0,0 +1,154 @@
+import { get } from 'lodash';
+import { ASTFactory, ASTKind, ASTMatch, ASTNode, ASTNodeJSON, BaseType } from '@flowgram.ai/editor';
+
+import { IJsonSchema } from '../../typings/json-schema';
+
+export 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.
+   */
+  export function schemaToAST(jsonSchema: IJsonSchema): ASTNodeJSON | undefined {
+    const { type, extra } = jsonSchema || {};
+    const { weak = false } = extra || {};
+
+    if (!type) {
+      return undefined;
+    }
+
+    switch (type) {
+      case 'object':
+        if (weak) {
+          return { kind: ASTKind.Object, weak: true };
+        }
+        return ASTFactory.createObject({
+          properties: Object.entries(jsonSchema.properties || {})
+            /**
+             * Sorts the properties of a JSON schema based on the 'extra.index' field.
+             * If the 'extra.index' field is not present, the property will be treated as having an index of 0.
+             */
+            .sort((a, b) => (get(a?.[1], 'extra.index') || 0) - (get(b?.[1], 'extra.index') || 0))
+            .map(([key, _property]) => ({
+              key,
+              type: schemaToAST(_property),
+              meta: { description: _property.description },
+            })),
+        });
+      case 'array':
+        if (weak) {
+          return { kind: ASTKind.Array, weak: true };
+        }
+        return ASTFactory.createArray({
+          items: schemaToAST(jsonSchema.items!),
+        });
+      case 'map':
+        if (weak) {
+          return { kind: ASTKind.Map, weak: true };
+        }
+        return ASTFactory.createMap({
+          valueType: schemaToAST(jsonSchema.additionalProperties!),
+        });
+      case 'string':
+        return ASTFactory.createString();
+      case 'number':
+        return ASTFactory.createNumber();
+      case 'boolean':
+        return ASTFactory.createBoolean();
+      case 'integer':
+        return ASTFactory.createInteger();
+
+      default:
+        // If the type is not recognized, return CustomType
+        return ASTFactory.createCustomType({ typeName: type });
+    }
+  }
+
+  /**
+   * Convert AST To JSON Schema
+   * @param typeAST
+   * @returns
+   */
+  export function astToSchema(typeAST: ASTNode): IJsonSchema | undefined {
+    if (ASTMatch.isString(typeAST)) {
+      return {
+        type: 'string',
+      };
+    }
+
+    if (ASTMatch.isBoolean(typeAST)) {
+      return {
+        type: 'boolean',
+      };
+    }
+
+    if (ASTMatch.isNumber(typeAST)) {
+      return {
+        type: 'number',
+      };
+    }
+
+    if (ASTMatch.isInteger(typeAST)) {
+      return {
+        type: 'integer',
+      };
+    }
+
+    if (ASTMatch.isObject(typeAST)) {
+      return {
+        type: 'object',
+        properties: Object.fromEntries(
+          Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)!])
+        ),
+      };
+    }
+
+    if (ASTMatch.isArray(typeAST)) {
+      return {
+        type: 'array',
+        items: astToSchema(typeAST.items),
+      };
+    }
+
+    if (ASTMatch.isMap(typeAST)) {
+      return {
+        type: 'map',
+        items: astToSchema(typeAST.valueType),
+      };
+    }
+
+    if (ASTMatch.isCustomType(typeAST)) {
+      return {
+        type: typeAST.typeName,
+      };
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Check if the AST type is match the JSON Schema
+   * @param typeAST
+   * @param schema
+   * @returns
+   */
+  export function isASTMatchSchema(
+    typeAST: BaseType,
+    schema: IJsonSchema | IJsonSchema[]
+  ): boolean {
+    if (Array.isArray(schema)) {
+      return typeAST.isTypeEqual(
+        ASTFactory.createUnion({
+          types: schema.map((_schema) => schemaToAST(_schema)!).filter(Boolean),
+        })
+      );
+    }
+
+    return typeAST.isTypeEqual(schemaToAST(schema));
+  }
+}

package/src/components/type-selector/types.ts

@@ -1,5 +0,0 @@
-import { VarJSONSchema } from '@flowgram.ai/editor';
-
-export type BasicType = VarJSONSchema.BasicType;
-
-export type JsonSchema = VarJSONSchema.ISchema;