@flowgram.ai/form-materials 0.4.0 → 0.4.2

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -4,15 +4,9 @@
  */
 
 import { get, set } from 'lodash';
-import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
-import {
-  defineFormPluginCreator,
-  getNodePrivateScope,
-  getNodeScope,
-  Scope,
-} from '@flowgram.ai/editor';
+import { defineFormPluginCreator, getNodePrivateScope, getNodeScope } from '@flowgram.ai/editor';
 
-import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 interface InputConfig {
   sourceKey: string;
@@ -30,7 +24,7 @@ export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
       set(
         formData,
         targetKey,
-        infer(
+        FlowValueUtils.inferJsonSchema(
           get(formData, sourceKey),
           scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
         )
@@ -40,69 +34,3 @@ export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
     });
   },
 });
-
-function isRef(value: any): value is IFlowRefValue {
-  return (
-    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
-  );
-}
-
-function isTemplate(value: any): value is IFlowTemplateValue {
-  return value?.type === 'template' && typeof value?.content === 'string';
-}
-
-function isConstant(value: any): value is IFlowConstantValue {
-  return value?.type === 'constant' && typeof value?.content !== 'undefined';
-}
-
-const infer = (values: any, scope: Scope): IJsonSchema | undefined => {
-  if (typeof values === 'object') {
-    if (isConstant(values)) {
-      if (values?.schema) {
-        return values.schema;
-      }
-
-      if (typeof values.content === 'string') {
-        return {
-          type: 'string',
-        };
-      }
-
-      if (typeof values.content === 'number') {
-        return {
-          type: 'number',
-        };
-      }
-
-      if (typeof values.content === 'boolean') {
-        return {
-          type: 'boolean',
-        };
-      }
-    }
-
-    if (isRef(values)) {
-      const variable = scope.available.getByKeyPath(values?.content);
-      const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : undefined;
-
-      return schema;
-    }
-
-    if (isTemplate(values)) {
-      return {
-        type: 'string',
-      };
-    }
-
-    return {
-      type: 'object',
-      properties: Object.keys(values).reduce((acc, key) => {
-        const schema = infer(values[key], scope);
-        if (schema) {
-          acc[key] = schema;
-        }
-        return acc;
-      }, {} as Record<string, IJsonSchema>),
-    };
-  }
-};

package/src/hooks/use-object-list/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { nanoid } from 'nanoid';
 import { difference, get, isObject, set } from 'lodash';
@@ -27,14 +27,30 @@ export function useObjectList<ValueType>({
 }: {
   value?: ObjectType<ValueType>;
   onChange: (value?: ObjectType<ValueType>) => void;
-  sortIndexKey?: string;
+  sortIndexKey?: string | ((item: ValueType | undefined) => string);
 }) {
   const [list, setList] = useState<ListItem<ValueType>[]>([]);
 
+  const effectVersion = useRef(0);
+  const changeVersion = useRef(0);
+
+  const getSortIndex = (value?: ValueType) => {
+    if (typeof sortIndexKey === 'function') {
+      return get(value, sortIndexKey(value)) || 0;
+    }
+    return get(value, sortIndexKey || '') || 0;
+  };
+
   useEffect(() => {
+    effectVersion.current = effectVersion.current + 1;
+    if (effectVersion.current === changeVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+
     setList((_prevList) => {
       const newKeys = Object.entries(value || {})
-        .sort((a, b) => get(a[1], sortIndexKey || 0) - get(b[1], sortIndexKey || 0))
+        .sort((a, b) => getSortIndex(a[1]) - getSortIndex(b[1]))
         .map(([key]) => key);
 
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean) as string[];
@@ -57,16 +73,19 @@ export function useObjectList<ValueType>({
     });
   }, [value]);
 
-  const add = () => {
+  const add = (defaultValue?: ValueType) => {
     setList((prevList) => [
       ...prevList,
       {
         id: genId(),
+        value: defaultValue,
       },
     ]);
   };
 
   const updateValue = (itemId: string, value: ValueType) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
         if (_item.id === itemId) {
@@ -84,8 +103,13 @@ export function useObjectList<ValueType>({
             .filter((item) => item.key)
             .map((item) => [item.key!, item.value])
             .map((_res, idx) => {
-              if (isObject(_res[1]) && sortIndexKey) {
-                set(_res[1], sortIndexKey, idx);
+              const indexKey =
+                typeof sortIndexKey === 'function'
+                  ? sortIndexKey(_res[1] as ValueType | undefined)
+                  : sortIndexKey;
+
+              if (isObject(_res[1]) && indexKey) {
+                set(_res[1], indexKey, idx);
               }
               return _res;
             })
@@ -97,6 +121,8 @@ export function useObjectList<ValueType>({
   };
 
   const updateKey = (itemId: string, key: string) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
         if (_item.id === itemId) {
@@ -119,6 +145,8 @@ export function useObjectList<ValueType>({
   };
 
   const remove = (itemId: string) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setList((prevList) => {
       const nextList = prevList.filter((_item) => _item.id !== itemId);
 

package/src/plugins/json-schema-preset/manager.ts

@@ -9,6 +9,7 @@ export interface ConstantRendererProps<Value = any> {
   value?: Value;
   onChange?: (value: Value) => void;
   readonly?: boolean;
+  [key: string]: any;
 }
 export interface JsonSchemaTypeRegistry<Value = any> extends OriginJsonSchemaTypeRegistry {
   /**

package/src/plugins/json-schema-preset/type-definition/string.tsx

@@ -7,18 +7,27 @@
 import React from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
-import { Input } from '@douyinfe/semi-ui';
+import { Input, TextArea } from '@douyinfe/semi-ui';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
 
 export const stringRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'string',
-  ConstantRenderer: (props) => (
-    <Input
-      placeholder={I18n.t('Please Input String')}
-      size="small"
-      disabled={props.readonly}
-      {...props}
-    />
-  ),
+  ConstantRenderer: (props) =>
+    props?.enableMultiLineStr ? (
+      <TextArea
+        autosize
+        rows={1}
+        placeholder={I18n.t('Please Input String')}
+        disabled={props.readonly}
+        {...props}
+      />
+    ) : (
+      <Input
+        size="small"
+        placeholder={I18n.t('Please Input String')}
+        disabled={props.readonly}
+        {...props}
+      />
+    ),
 };

package/src/shared/flow-value/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './utils';

package/src/shared/flow-value/schema.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import z from 'zod';
+
+// Shared extra schema for flow value types
+export const extraSchema = z
+  .object({
+    index: z.number().optional(),
+  })
+  .optional();
+
+export const constantSchema = z.object({
+  type: z.literal('constant'),
+  content: z.any().optional(),
+  schema: z.any().optional(),
+  extra: extraSchema,
+});
+
+export const refSchema = z.object({
+  type: z.literal('ref'),
+  content: z.array(z.string()).optional(),
+  extra: extraSchema,
+});
+
+export const expressionSchema = z.object({
+  type: z.literal('expression'),
+  content: z.string().optional(),
+  extra: extraSchema,
+});
+
+export const templateSchema = z.object({
+  type: z.literal('template'),
+  content: z.string().optional(),
+  extra: extraSchema,
+});

package/src/shared/flow-value/utils.ts

@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isArray, isObject, isPlainObject, uniq } from 'lodash';
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import { Scope } from '@flowgram.ai/editor';
+
+import {
+  IFlowConstantValue,
+  IFlowRefValue,
+  IFlowExpressionValue,
+  IFlowTemplateValue,
+  IFlowValue,
+  IFlowConstantRefValue,
+  FlowValueType,
+} from '@/typings';
+
+import { constantSchema, refSchema, expressionSchema, templateSchema } from './schema';
+
+export namespace FlowValueUtils {
+  /**
+   * Check if the value is a constant type
+   */
+  export function isConstant(value: any): value is IFlowConstantValue {
+    return constantSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is a reference type
+   */
+  export function isRef(value: any): value is IFlowRefValue {
+    return refSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is an expression type
+   */
+  export function isExpression(value: any): value is IFlowExpressionValue {
+    return expressionSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is a template type
+   */
+  export function isTemplate(value: any): value is IFlowTemplateValue {
+    return templateSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is either a constant or reference type
+   */
+  export function isConstantOrRef(value: any): value is IFlowConstantRefValue {
+    return isConstant(value) || isRef(value);
+  }
+
+  /**
+   * Check if the value is a valid flow value type
+   */
+  export function isFlowValue(value: any): value is IFlowValue {
+    return isConstant(value) || isRef(value) || isExpression(value) || isTemplate(value);
+  }
+
+  /**
+   * Traverse all flow values in the given value
+   * @param value The value to traverse
+   * @param options The options to traverse
+   * @returns A generator of flow values
+   */
+  export function* traverse(
+    value: any,
+    options: {
+      includeTypes?: FlowValueType[];
+      path?: string;
+    }
+  ): Generator<{ value: IFlowValue; path: string }> {
+    const { includeTypes = ['ref', 'template'], path = '' } = options;
+
+    if (isPlainObject(value)) {
+      if (isRef(value) && includeTypes.includes('ref')) {
+        yield { value, path };
+        return;
+      }
+
+      if (isTemplate(value) && includeTypes.includes('template')) {
+        yield { value, path };
+        return;
+      }
+
+      if (isExpression(value) && includeTypes.includes('expression')) {
+        yield { value, path };
+        return;
+      }
+
+      if (isConstant(value) && includeTypes.includes('constant')) {
+        yield { value, path };
+        return;
+      }
+
+      for (const [_key, _value] of Object.entries(value)) {
+        yield* traverse(_value, { ...options, path: `${path}.${_key}` });
+      }
+      return;
+    }
+
+    if (isArray(value)) {
+      for (const [_idx, _value] of value.entries()) {
+        yield* traverse(_value, { ...options, path: `${path}[${_idx}]` });
+      }
+      return;
+    }
+
+    return;
+  }
+
+  /**
+   * Get all key paths in the template value
+   * @param value The template value
+   * @returns A list of key paths
+   */
+  export function getTemplateKeyPaths(value: IFlowTemplateValue) {
+    // find all keyPath wrapped in {{}}
+    const keyPathReg = /{{(.*?)}}/g;
+    return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
+      _keyPath.slice(2, -2).split('.')
+    );
+  }
+
+  /**
+   * Infer the schema of the constant value
+   * @param value
+   * @returns
+   */
+  export function inferConstantJsonSchema(value: IFlowConstantValue): IJsonSchema | undefined {
+    if (value?.schema) {
+      return value.schema;
+    }
+
+    if (typeof value.content === 'string') {
+      return {
+        type: 'string',
+      };
+    }
+
+    if (typeof value.content === 'number') {
+      return {
+        type: 'number',
+      };
+    }
+
+    if (typeof value.content === 'boolean') {
+      return {
+        type: 'boolean',
+      };
+    }
+
+    if (isObject(value.content)) {
+      return {
+        type: 'object',
+      };
+    }
+    return undefined;
+  }
+
+  /**
+   * Infer the schema of the flow value
+   * @param values The flow value or object contains flow value
+   * @param scope
+   * @returns
+   */
+  export function inferJsonSchema(values: any, scope: Scope): IJsonSchema | undefined {
+    if (isPlainObject(values)) {
+      if (isConstant(values)) {
+        return inferConstantJsonSchema(values);
+      }
+
+      if (isRef(values)) {
+        const variable = scope.available.getByKeyPath(values?.content);
+        const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : undefined;
+
+        return schema;
+      }
+
+      if (isTemplate(values)) {
+        return { type: 'string' };
+      }
+
+      return {
+        type: 'object',
+        properties: Object.keys(values).reduce((acc, key) => {
+          const schema = inferJsonSchema((values as any)[key], scope);
+          if (schema) {
+            acc[key] = schema;
+          }
+          return acc;
+        }, {} as Record<string, IJsonSchema>),
+      };
+    }
+  }
+}

package/src/shared/index.ts

@@ -5,3 +5,4 @@
 
 export * from './format-legacy-refs';
 export * from './inject-material';
+export * from './flow-value';

package/src/typings/flow-value/index.ts

@@ -9,6 +9,8 @@ export interface IFlowValueExtra {
   index?: number;
 }
 
+export type FlowValueType = 'constant' | 'ref' | 'expression' | 'template';
+
 export interface IFlowConstantValue {
   type: 'constant';
   content?: string | number | boolean;

package/src/components/json-schema-editor/components/blur-input.tsx

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React, { useEffect, useState } from 'react';
-
-import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
-
-export function BlurInput(props: InputProps) {
-  const [value, setValue] = useState('');
-
-  useEffect(() => {
-    setValue(props.value as string);
-  }, [props.value]);
-
-  return (
-    <Input
-      {...props}
-      value={value}
-      onChange={(value) => {
-        setValue(value);
-      }}
-      onBlur={(e) => props.onChange?.(value, e)}
-    />
-  );
-}

package/src/plugins/disable-declaration-plugin/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "disable-declaration-plugin",
-  "depMaterials": [],
-  "depPackages": []
-}

package/src/plugins/json-schema-preset/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "json-schema-preset",
-  "depMaterials": [
-    "components/code-editor-mini"
-  ],
-  "depPackages": [
-    "@flowgram.ai/json-schema"
-  ]
-}