@flowgram.ai/form-materials 0.1.0-alpha.10 → 0.1.0-alpha.12

package/src/form-plugins/infer-assign-plugin/config.json

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

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

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { set, uniqBy } from 'lodash';
+import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import {
+  ASTFactory,
+  createEffectFromVariableProvider,
+  defineFormPluginCreator,
+  FlowNodeRegistry,
+  getNodeForm,
+  getNodeScope,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue, IFlowValue } from '../../typings';
+
+type AssignValueType =
+  | {
+      operator: 'assign';
+      left?: IFlowRefValue;
+      right?: IFlowValue;
+    }
+  | {
+      operator: 'declare';
+      left?: string;
+      right?: IFlowValue;
+    };
+
+interface InputConfig {
+  assignKey: string;
+  outputKey: string;
+}
+
+export const createInferAssignPlugin = defineFormPluginCreator<InputConfig>({
+  onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
+    if (!assignKey || !outputKey) {
+      return;
+    }
+
+    mergeEffect({
+      [assignKey]: createEffectFromVariableProvider({
+        parse: (value: AssignValueType[], ctx) => {
+          const declareRows = uniqBy(
+            value.filter((_v) => _v.operator === 'declare' && _v.left && _v.right),
+            'left'
+          );
+
+          return [
+            ASTFactory.createVariableDeclaration({
+              key: `${ctx.node.id}`,
+              meta: {
+                title: getNodeForm(ctx.node)?.getValueIn('title'),
+                icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+              },
+              type: ASTFactory.createObject({
+                properties: declareRows.map((_v) =>
+                  ASTFactory.createProperty({
+                    key: _v.left as string,
+                    type:
+                      _v.right?.type === 'constant'
+                        ? JsonSchemaUtils.schemaToAST(_v.right?.schema || {})
+                        : undefined,
+                    initializer:
+                      _v.right?.type === 'ref'
+                        ? ASTFactory.createKeyPathExpression({
+                            keyPath: _v.right?.content || [],
+                          })
+                        : {},
+                  })
+                ),
+              }),
+            }),
+          ];
+        },
+      }),
+    });
+
+    addFormatOnSubmit((formData, ctx) => {
+      set(
+        formData,
+        outputKey,
+        JsonSchemaUtils.astToSchema(getNodeScope(ctx.node).output.variables?.[0]?.type)
+      );
+
+      return formData;
+    });
+  },
+});

package/src/form-plugins/infer-inputs-plugin/config.json

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

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

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { get, set } from 'lodash';
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
+import {
+  defineFormPluginCreator,
+  getNodePrivateScope,
+  getNodeScope,
+  Scope,
+} from '@flowgram.ai/editor';
+
+import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '../../typings';
+
+interface InputConfig {
+  sourceKey: string;
+  targetKey: string;
+  scope?: 'private' | 'public';
+}
+
+export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
+  onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
+    if (!sourceKey || !targetKey) {
+      return;
+    }
+
+    addFormatOnSubmit((formData, ctx) => {
+      set(
+        formData,
+        targetKey,
+        infer(
+          get(formData, sourceKey),
+          scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
+        )
+      );
+
+      return formData;
+    });
+  },
+});
+
+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/index.tsx

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

package/src/hooks/use-object-list/config.json

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

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

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useEffect, useState } from 'react';
+
+import { nanoid } from 'nanoid';
+import { difference, get, isObject, set } from 'lodash';
+
+function genId() {
+  return nanoid();
+}
+
+interface ListItem<ValueType> {
+  id: string;
+  key?: string;
+  value?: ValueType;
+}
+
+type ObjectType<ValueType> = Record<string, ValueType | undefined>;
+
+export function useObjectList<ValueType>({
+  value,
+  onChange,
+  sortIndexKey,
+}: {
+  value?: ObjectType<ValueType>;
+  onChange: (value?: ObjectType<ValueType>) => void;
+  sortIndexKey?: string;
+}) {
+  const [list, setList] = useState<ListItem<ValueType>[]>([]);
+
+  useEffect(() => {
+    setList((_prevList) => {
+      const newKeys = Object.entries(value || {})
+        .sort((a, b) => get(a[1], sortIndexKey || 0) - get(b[1], sortIndexKey || 0))
+        .map(([key]) => key);
+
+      const oldKeys = _prevList.map((item) => item.key).filter(Boolean) as string[];
+      const addKeys = difference(newKeys, oldKeys);
+
+      return _prevList
+        .filter((item) => !item.key || newKeys.includes(item.key))
+        .map((item) => ({
+          id: item.id,
+          key: item.key,
+          value: item.key ? value?.[item.key!] : item.value,
+        }))
+        .concat(
+          addKeys.map((_key) => ({
+            id: genId(),
+            key: _key,
+            value: value?.[_key],
+          }))
+        );
+    });
+  }, [value]);
+
+  const add = () => {
+    setList((prevList) => [
+      ...prevList,
+      {
+        id: genId(),
+      },
+    ]);
+  };
+
+  const updateValue = (itemId: string, value: ValueType) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            value,
+          };
+        }
+        return _item;
+      });
+
+      onChange(
+        Object.fromEntries(
+          nextList
+            .filter((item) => item.key)
+            .map((item) => [item.key!, item.value])
+            .map((_res, idx) => {
+              if (isObject(_res[1]) && sortIndexKey) {
+                set(_res[1], sortIndexKey, idx);
+              }
+              return _res;
+            })
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  const updateKey = (itemId: string, key: string) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            key,
+          };
+        }
+        return _item;
+      });
+
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  const remove = (itemId: string) => {
+    setList((prevList) => {
+      const nextList = prevList.filter((_item) => _item.id !== itemId);
+
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  return { list, add, updateKey, updateValue, remove };
+}

package/src/index.ts

@@ -5,6 +5,8 @@
 
 export * from './components';
 export * from './effects';
-export * from './utils';
+export * from './shared';
 export * from './typings';
 export * from './form-plugins';
+export * from './plugins';
+export * from './validate';

package/src/{typings/json-schema → plugins/disable-declaration-plugin}/config.json

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

package/src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  ASTMatch,
+  definePluginCreator,
+  type GlobalEventActionType,
+  VariableEngine,
+} from '@flowgram.ai/editor';
+
+export const createDisableDeclarationPlugin = definePluginCreator<void>({
+  onInit(ctx) {
+    const variableEngine = ctx.get(VariableEngine);
+
+    const handleEvent = (action: GlobalEventActionType) => {
+      if (ASTMatch.isVariableDeclaration(action.ast)) {
+        if (!action.ast.meta?.disabled) {
+          action.ast.updateMeta({
+            ...(action.ast.meta || {}),
+            disabled: true,
+          });
+        }
+      }
+    };
+
+    variableEngine.onGlobalEvent('NewAST', handleEvent);
+    variableEngine.onGlobalEvent('UpdateAST', handleEvent);
+  },
+});

package/src/plugins/disable-declaration-plugin/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { createDisableDeclarationPlugin } from './create-disable-declaration-plugin';

package/src/plugins/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './json-schema-preset';
+export * from './disable-declaration-plugin';

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

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

package/src/plugins/json-schema-preset/create-type-preset-plugin.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  BaseTypeManager,
+  jsonSchemaContainerModule,
+  JsonSchemaTypeManager,
+} from '@flowgram.ai/json-schema';
+import { definePluginCreator } from '@flowgram.ai/editor';
+
+import { jsonSchemaTypePreset } from './type-definition';
+import { JsonSchemaTypeRegistry } from './manager';
+
+export const createTypePresetPlugin = definePluginCreator<{
+  types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>[];
+  unregisterTypes?: string[];
+}>({
+  onInit(ctx, opts) {
+    const typeManager = ctx.get(BaseTypeManager) as JsonSchemaTypeManager;
+    jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
+
+    opts.types?.forEach((_type) => typeManager.register(_type));
+    opts.unregisterTypes?.forEach((_type) => typeManager.unregister(_type));
+  },
+  containerModules: [jsonSchemaContainerModule],
+});

package/src/plugins/json-schema-preset/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+
+import {
+  type IJsonSchema,
+  JsonSchemaUtils,
+  useTypeManager as useOriginTypeManager,
+  TypePresetProvider as OriginTypePresetProvider,
+  JsonSchemaTypeManager,
+  type JsonSchemaBasicType,
+} from '@flowgram.ai/json-schema';
+
+import { jsonSchemaTypePreset } from './type-definition';
+import { type JsonSchemaTypeRegistry, type ConstantRendererProps } from './manager';
+import { createTypePresetPlugin } from './create-type-preset-plugin';
+
+const useTypeManager = () =>
+  useOriginTypeManager() as JsonSchemaTypeManager<IJsonSchema, JsonSchemaTypeRegistry>;
+
+const JsonSchemaTypePresetProvider = ({
+  types = [],
+  children,
+}: React.PropsWithChildren<{ types: JsonSchemaTypeRegistry[] }>) => (
+  <OriginTypePresetProvider types={[...jsonSchemaTypePreset, ...types]}>
+    {children}
+  </OriginTypePresetProvider>
+);
+
+export {
+  createTypePresetPlugin,
+  useTypeManager,
+  JsonSchemaTypePresetProvider,
+  IJsonSchema,
+  JsonSchemaUtils,
+  JsonSchemaTypeRegistry,
+  ConstantRendererProps,
+  JsonSchemaBasicType,
+};

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { JsonSchemaTypeRegistry as OriginJsonSchemaTypeRegistry } from '@flowgram.ai/json-schema';
+
+export interface ConstantRendererProps<Value = any> {
+  value?: Value;
+  onChange?: (value: Value) => void;
+  readonly?: boolean;
+}
+export interface JsonSchemaTypeRegistry<Value = any> extends OriginJsonSchemaTypeRegistry {
+  /**
+   * Render Constant Input
+   */
+  ConstantRenderer: React.FC<ConstantRendererProps<Value>>;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+import { CodeEditorMini } from '@/components/code-editor-mini';
+
+import { type JsonSchemaTypeRegistry } from '../manager';
+
+export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'array',
+  ConstantRenderer: (props) => (
+    <CodeEditorMini
+      value={props.value}
+      languageId="json"
+      onChange={(v) => props.onChange?.(v)}
+      placeholder="Please Input Array"
+      readonly={props.readonly}
+    />
+  ),
+};

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

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+import { Select } from '@douyinfe/semi-ui';
+
+import { type JsonSchemaTypeRegistry } from '../manager';
+
+export const booleanRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'boolean',
+  ConstantRenderer: (props) => {
+    const { value, onChange, ...rest } = props;
+    return (
+      <Select
+        placeholder="Please Select Boolean"
+        size="small"
+        disabled={props.readonly}
+        optionList={[
+          { label: 'True', value: 1 },
+          { label: 'False', value: 0 },
+        ]}
+        value={value ? 1 : 0}
+        onChange={(value) => onChange?.(!!value)}
+        {...rest}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { jsonSchemaTypeManager } from '@flowgram.ai/json-schema';
+
+import { stringRegistry } from './string';
+import { objectRegistry } from './object';
+import { numberRegistry } from './number';
+import { integerRegistry } from './integer';
+import { booleanRegistry } from './boolean';
+import { arrayRegistry } from './array';
+
+export const jsonSchemaTypePreset = [
+  stringRegistry,
+  objectRegistry,
+  numberRegistry,
+  integerRegistry,
+  booleanRegistry,
+  arrayRegistry,
+];
+
+jsonSchemaTypePreset.forEach((_type) => jsonSchemaTypeManager.register(_type));

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+import { InputNumber } from '@douyinfe/semi-ui';
+
+import { type JsonSchemaTypeRegistry } from '../manager';
+
+export const integerRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'integer',
+  ConstantRenderer: (props) => (
+    <InputNumber
+      placeholder="Please Input Integer"
+      size="small"
+      disabled={props.readonly}
+      precision={0}
+      {...props}
+    />
+  ),
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+import { InputNumber } from '@douyinfe/semi-ui';
+
+import { type JsonSchemaTypeRegistry } from '../manager';
+
+export const numberRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'number',
+  ConstantRenderer: (props) => (
+    <InputNumber
+      placeholder="Please Input Number"
+      size="small"
+      disabled={props.readonly}
+      hideButtons
+      {...props}
+    />
+  ),
+};