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

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}
+    />
+  ),
+};

package/src/plugins/json-schema-preset/type-definition/object.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 objectRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'object',
+  ConstantRenderer: (props) => (
+    <CodeEditorMini
+      value={props.value}
+      onChange={(v) => props.onChange?.(v)}
+      languageId="json"
+      placeholder="Please Input Object"
+      readonly={props.readonly}
+    />
+  ),
+};

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

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

package/src/{utils → shared}/index.ts

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

package/src/typings/flow-value/config.json

@@ -1,5 +1,7 @@
 {
   "name": "flow-value",
   "depMaterials": [],
-  "depPackages": []
+  "depPackages": [
+    "@flowgram.ai/json-schema"
+  ]
 }

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

@@ -3,24 +3,35 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
+export interface IFlowValueExtra {
+  index?: number;
+}
+
 export interface IFlowConstantValue {
   type: 'constant';
   content?: string | number | boolean;
+  schema?: IJsonSchema;
+  extra?: IFlowValueExtra;
 }
 
 export interface IFlowRefValue {
   type: 'ref';
   content?: string[];
+  extra?: IFlowValueExtra;
 }
 
 export interface IFlowExpressionValue {
   type: 'expression';
   content?: string;
+  extra?: IFlowValueExtra;
 }
 
 export interface IFlowTemplateValue {
   type: 'template';
   content?: string;
+  extra?: IFlowValueExtra;
 }
 
 export type IFlowValue =

package/src/typings/index.ts

@@ -4,4 +4,3 @@
  */
 
 export * from './flow-value';
-export * from './json-schema';

package/src/validate/index.tsx

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

package/src/validate/validate-flow-value/config.json

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

package/src/validate/validate-flow-value/index.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isNil, uniq } from 'lodash';
+import { FeedbackLevel, FlowNodeEntity, getNodeScope } from '@flowgram.ai/editor';
+
+import { IFlowTemplateValue, IFlowValue } from '@/typings';
+
+interface Context {
+  node: FlowNodeEntity;
+  required?: boolean;
+  errorMessages?: {
+    required?: string;
+    unknownVariable?: string;
+  };
+}
+
+export function validateFlowValue(value: IFlowValue | undefined, ctx: Context) {
+  const { node, required, errorMessages } = ctx;
+
+  const {
+    required: requiredMessage = 'Field is required',
+    unknownVariable: unknownVariableMessage = 'Unknown Variable',
+  } = errorMessages || {};
+
+  if (required && (isNil(value) || isNil(value?.content) || value?.content === '')) {
+    return {
+      level: FeedbackLevel.Error,
+      message: requiredMessage,
+    };
+  }
+
+  if (value?.type === 'ref') {
+    const variable = getNodeScope(node).available.getByKeyPath(value?.content || []);
+    if (!variable) {
+      return {
+        level: FeedbackLevel.Error,
+        message: unknownVariableMessage,
+      };
+    }
+  }
+
+  if (value?.type === 'template') {
+    const allRefs = getTemplateKeyPaths(value);
+
+    for (const ref of allRefs) {
+      const variable = getNodeScope(node).available.getByKeyPath(ref);
+      if (!variable) {
+        return {
+          level: FeedbackLevel.Error,
+          message: unknownVariableMessage,
+        };
+      }
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * get template key paths
+ * @param value
+ * @returns
+ */
+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('.')
+  );
+}