@flowgram.ai/form-materials 0.1.31 → 0.2.1

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/format-legacy-refs/config.json

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

package/src/utils/format-legacy-refs/index.ts

@@ -0,0 +1,153 @@
+import { isObject } from 'lodash';
+
+interface LegacyFlowRefValueSchema {
+  type: 'ref';
+  content: string;
+}
+
+interface NewFlowRefValueSchema {
+  type: 'ref';
+  content: string[];
+}
+
+/**
+ * In flowgram 0.2.0, for introducing Loop variable functionality,
+ * the FlowRefValueSchema type definition is updated:
+ *
+ * interface LegacyFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string;
+ * }
+ *
+ * interface NewFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string[];
+ * }
+ *
+ *
+ * For making sure backend json will not be changed, we provide format legacy ref utils for updating the formData
+ *
+ * How to use:
+ *
+ * 1. Call formatLegacyRefOnSubmit on the formData before submitting
+ * 2. Call formatLegacyRefOnInit on the formData after submitting
+ *
+ * Example:
+ * import { formatLegacyRefOnSubmit, formatLegacyRefOnInit } from '@flowgram.ai/form-materials';
+ * formMeta: {
+ *  formatOnSubmit: (data) => formatLegacyRefOnSubmit(data),
+ *  formatOnInit: (data) => formatLegacyRefOnInit(data),
+ * }
+ */
+export function formatLegacyRefOnSubmit(value: any): any {
+  if (isObject(value)) {
+    if (isLegacyFlowRefValueSchema(value)) {
+      return formatLegacyRefToNewRef(value);
+    }
+
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value]: [string, any]) => [
+        key,
+        formatLegacyRefOnSubmit(value),
+      ])
+    );
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnSubmit);
+  }
+
+  return value;
+}
+
+/**
+ * In flowgram 0.2.0, for introducing Loop variable functionality,
+ * the FlowRefValueSchema type definition is updated:
+ *
+ * interface LegacyFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string;
+ * }
+ *
+ * interface NewFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string[];
+ * }
+ *
+ *
+ * For making sure backend json will not be changed, we provide format legacy ref utils for updating the formData
+ *
+ * How to use:
+ *
+ * 1. Call formatLegacyRefOnSubmit on the formData before submitting
+ * 2. Call formatLegacyRefOnInit on the formData after submitting
+ *
+ * Example:
+ * import { formatLegacyRefOnSubmit, formatLegacyRefOnInit } from '@flowgram.ai/form-materials';
+ *
+ * formMeta: {
+ *  formatOnSubmit: (data) => formatLegacyRefOnSubmit(data),
+ *  formatOnInit: (data) => formatLegacyRefOnInit(data),
+ * }
+ */
+export function formatLegacyRefOnInit(value: any): any {
+  if (isObject(value)) {
+    if (isNewFlowRefValueSchema(value)) {
+      return formatNewRefToLegacyRef(value);
+    }
+
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value]: [string, any]) => [
+        key,
+        formatLegacyRefOnInit(value),
+      ])
+    );
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnInit);
+  }
+
+  return value;
+}
+
+export function isLegacyFlowRefValueSchema(value: any): value is LegacyFlowRefValueSchema {
+  return (
+    isObject(value) &&
+    Object.keys(value).length === 2 &&
+    (value as any).type === 'ref' &&
+    typeof (value as any).content === 'string'
+  );
+}
+
+export function isNewFlowRefValueSchema(value: any): value is NewFlowRefValueSchema {
+  return (
+    isObject(value) &&
+    Object.keys(value).length === 2 &&
+    (value as any).type === 'ref' &&
+    Array.isArray((value as any).content)
+  );
+}
+
+export function formatLegacyRefToNewRef(value: LegacyFlowRefValueSchema) {
+  const keyPath = value.content.split('.');
+
+  if (keyPath[1] === 'outputs') {
+    return {
+      type: 'ref',
+      content: [`${keyPath[0]}.${keyPath[1]}`, ...(keyPath.length > 2 ? keyPath.slice(2) : [])],
+    };
+  }
+
+  return {
+    type: 'ref',
+    content: keyPath,
+  };
+}
+
+export function formatNewRefToLegacyRef(value: NewFlowRefValueSchema) {
+  return {
+    type: 'ref',
+    content: value.content.join('.'),
+  };
+}

package/src/utils/format-legacy-refs/readme.md

@@ -0,0 +1,38 @@
+# Notice
+
+In `@flowgram.ai/form-materials@0.2.0`, for introducing loop-related materials,
+
+The FlowRefValueSchema type definition is updated:
+
+```typescript
+interface LegacyFlowRefValueSchema {
+  type: 'ref';
+  content: string;
+}
+
+interface NewFlowRefValueSchema {
+  type: 'ref';
+  content: string[];
+}
+```
+
+
+
+For making sure backend json will not be changed in your application, we provide `format-legacy-ref` utils for upgrading
+
+
+How to use:
+
+1. Call formatLegacyRefOnSubmit on the formData before submitting
+2. Call formatLegacyRefOnInit on the formData after submitting
+
+Example:
+
+```typescript
+import { formatLegacyRefOnSubmit, formatLegacyRefOnInit } from '@flowgram.ai/form-materials';
+
+formMeta: {
+  formatOnSubmit: (data) => formatLegacyRefOnSubmit(data),
+  formatOnInit: (data) => formatLegacyRefOnInit(data),
+}
+```

package/src/utils/index.ts

@@ -0,0 +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,19 +0,0 @@
-export type BasicType = 'boolean' | 'string' | 'integer' | 'number' | 'object' | 'array';
-
-export interface JsonSchema<T = string> {
-  type?: T;
-  default?: any;
-  title?: string;
-  description?: string;
-  enum?: (string | number)[];
-  properties?: Record<string, JsonSchema>;
-  additionalProperties?: JsonSchema;
-  items?: JsonSchema;
-  required?: string[];
-  $ref?: string;
-  extra?: {
-    order?: number;
-    literal?: boolean; // is literal type
-    formComponent?: string; // Set the render component
-  };
-}