@flowgram.ai/form-materials 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.3.1",
-    "@flowgram.ai/json-schema": "0.3.1"
+    "@flowgram.ai/json-schema": "0.3.2",
+    "@flowgram.ai/editor": "0.3.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -51,8 +51,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/ts-config": "0.3.1",
-    "@flowgram.ai/eslint-config": "0.3.1"
+    "@flowgram.ai/ts-config": "0.3.2",
+    "@flowgram.ai/eslint-config": "0.3.2"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/assign-row/components/blur-input.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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/components/assign-row/config.json

@@ -0,0 +1,11 @@
+{
+  "name": "assign-row",
+  "depMaterials": [
+    "flow-value",
+    "dynamic-value-input",
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui"
+  ]
+}

package/src/components/assign-row/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IconButton } from '@douyinfe/semi-ui';
+import { IconMinus } from '@douyinfe/semi-icons';
+
+import { IFlowConstantRefValue } from '@/typings';
+
+import { AssignRowProps } from './types';
+import { BlurInput } from './components/blur-input';
+import { VariableSelector } from '../variable-selector';
+import { DynamicValueInput } from '../dynamic-value-input';
+
+export function AssignRow(props: AssignRowProps) {
+  const {
+    value = {
+      operator: 'assign',
+    },
+    onChange,
+    onDelete,
+    readonly,
+  } = props;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+      <div style={{ width: 150, minWidth: 150, maxWidth: 150 }}>
+        {value?.operator === 'assign' ? (
+          <VariableSelector
+            style={{ width: '100%', height: 26 }}
+            value={value?.left?.content}
+            config={{ placeholder: 'Select Left' }}
+            onChange={(v) =>
+              onChange?.({
+                ...value,
+                left: { type: 'ref', content: v },
+              })
+            }
+          />
+        ) : (
+          <BlurInput
+            style={{ height: 26 }}
+            size="small"
+            placeholder="Input Name"
+            value={value?.left}
+            onChange={(v) =>
+              onChange?.({
+                ...value,
+                left: v,
+              })
+            }
+          />
+        )}
+      </div>
+      <div style={{ flexGrow: 1 }}>
+        <DynamicValueInput
+          readonly={readonly}
+          value={value?.right as IFlowConstantRefValue | undefined}
+          onChange={(v) =>
+            onChange?.({
+              ...value,
+              right: v,
+            })
+          }
+        />
+      </div>
+      {onDelete && (
+        <div>
+          <IconButton
+            size="small"
+            theme="borderless"
+            icon={<IconMinus />}
+            onClick={() => onDelete?.()}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { AssignValueType } from './types';

package/src/components/assign-row/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowRefValue, IFlowValue } from '@/typings';
+
+export type AssignValueType =
+  | {
+      operator: 'assign';
+      left?: IFlowRefValue;
+      right?: IFlowValue;
+    }
+  | {
+      operator: 'declare';
+      left?: string;
+      right?: IFlowValue;
+    };
+
+export interface AssignRowProps {
+  value?: AssignValueType;
+  onChange?: (value?: AssignValueType) => void;
+  onDelete?: () => void;
+  readonly?: boolean;
+}

package/src/components/assign-rows/config.json

@@ -0,0 +1,11 @@
+{
+  "name": "assign-rows",
+  "depMaterials": [
+    "flow-value",
+    "dynamic-value-input",
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui"
+  ]
+}

package/src/components/assign-rows/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
+import { Button } from '@douyinfe/semi-ui';
+import { IconPlus } from '@douyinfe/semi-icons';
+
+import { AssignRow, AssignValueType } from '../assign-row';
+
+interface AssignRowsProps {
+  name: string;
+  readonly?: boolean;
+}
+
+export function AssignRows(props: AssignRowsProps) {
+  const { name, readonly } = props;
+
+  return (
+    <FieldArray name={name}>
+      {({ field }: FieldArrayRenderProps<AssignValueType | undefined>) => (
+        <>
+          {field.map((childField, index) => (
+            <AssignRow
+              key={childField.key}
+              readonly={readonly}
+              value={childField.value}
+              onChange={(value) => {
+                childField.onChange(value);
+              }}
+              onDelete={() => field.remove(index)}
+            />
+          ))}
+          <div style={{ display: 'flex', gap: 5 }}>
+            <Button
+              size="small"
+              theme="borderless"
+              icon={<IconPlus />}
+              onClick={() => field.append({ operator: 'assign' })}
+            >
+              Assign
+            </Button>
+            <Button
+              size="small"
+              theme="borderless"
+              icon={<IconPlus />}
+              onClick={() => field.append({ operator: 'declare' })}
+            >
+              Declaration
+            </Button>
+          </div>
+        </>
+      )}
+    </FieldArray>
+  );
+}

package/src/components/constant-input/config.json

@@ -1,7 +1,7 @@
 {
   "name": "constant-input",
   "depMaterials": [
-    "shared/json-schema-preset"
+    "plugins/json-schema-preset"
   ],
   "depPackages": [
     "@douyinfe/semi-ui"

package/src/components/display-outputs/index.tsx

@@ -51,7 +51,13 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   return (
     <DisplayOutputsWrapper>
       {childEntries.map(([key, schema]) => (
-        <DisplaySchemaTag key={key} title={key} value={schema} showIconInTree={showIconInTree} />
+        <DisplaySchemaTag
+          key={key}
+          title={key}
+          value={schema}
+          showIconInTree={showIconInTree}
+          warning={!schema}
+        />
       ))}
     </DisplayOutputsWrapper>
   );

package/src/components/display-schema-tree/config.json

@@ -1,7 +1,7 @@
 {
   "name": "display-schema-tree",
   "depMaterials": [
-    "shared/json-schema-preset"
+    "plugins/json-schema-preset"
   ],
   "depPackages": [
     "@douyinfe/semi-ui",

package/src/components/index.ts

@@ -23,3 +23,5 @@ export * from './display-outputs';
 export * from './display-schema-tag';
 export * from './display-flow-value';
 export * from './display-inputs-values';
+export * from './assign-rows';
+export * from './assign-row';

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

@@ -130,7 +130,7 @@ export const VariableSelector = ({
         showClear={false}
         arrowIcon={<IconChevronDownStroked size="small" />}
         triggerRender={triggerRender}
-        placeholder={config?.placeholder ?? 'Select Variable...'}
+        placeholder={config?.placeholder ?? 'Select Variable'}
       />
     </>
   );

package/src/effects/index.ts

@@ -7,3 +7,4 @@ export * from './provide-batch-input';
 export * from './auto-rename-ref';
 export * from './provide-json-schema-outputs';
 export * from './sync-variable-title';
+export * from './validate-when-variable-sync';

package/src/effects/validate-when-variable-sync/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "validate-when-variable-sync",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/effects/validate-when-variable-sync/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isEmpty } from 'lodash';
+import {
+  DataEvent,
+  Effect,
+  EffectOptions,
+  getNodeScope,
+  getNodePrivateScope,
+} from '@flowgram.ai/editor';
+
+export const validateWhenVariableSync = ({
+  scope,
+}: {
+  scope?: 'private' | 'public';
+} = {}): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInit,
+    effect: (({ context, form }) => {
+      const nodeScope =
+        scope === 'private' ? getNodePrivateScope(context.node) : getNodeScope(context.node);
+
+      const disposable = nodeScope.available.onListOrAnyVarChange(() => {
+        if (!isEmpty(form.state.errors)) {
+          form.validate();
+        }
+      });
+
+      return () => disposable.dispose();
+    }) as Effect,
+  },
+];

package/src/form-plugins/index.ts

@@ -5,3 +5,4 @@
 
 export * from './batch-outputs-plugin';
 export * from './infer-inputs-plugin';
+export * from './infer-assign-plugin';

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/index.ts

@@ -9,3 +9,4 @@ export * from './shared';
 export * from './typings';
 export * from './form-plugins';
 export * from './plugins';
+export * from './validate';

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

@@ -14,7 +14,7 @@ import { jsonSchemaTypePreset } from './type-definition';
 import { JsonSchemaTypeRegistry } from './manager';
 
 export const createTypePresetPlugin = definePluginCreator<{
-  types?: JsonSchemaTypeRegistry[];
+  types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>[];
   unregisterTypes?: string[];
 }>({
   onInit(ctx, opts) {

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

@@ -6,8 +6,9 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { CodeEditorMini } from '@/components/code-editor-mini';
+
 import { type JsonSchemaTypeRegistry } from '../manager';
-import { CodeEditorMini } from '../../../components/code-editor-mini';
 
 export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'array',

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

@@ -6,8 +6,9 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { CodeEditorMini } from '@/components/code-editor-mini';
+
 import { type JsonSchemaTypeRegistry } from '../manager';
-import { CodeEditorMini } from '../../../components/code-editor-mini';
 
 export const objectRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'object',

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('.')
+  );
+}