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

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

@@ -5,18 +5,26 @@
 
 import React, { useMemo } from 'react';
 
-import { Button, Cascader } from '@douyinfe/semi-ui';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
-import { IJsonSchema } from '../../typings';
-import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constants';
+import { useTypeManager } from '../../plugins';
 
 interface PropTypes {
   value?: Partial<IJsonSchema>;
-  onChange: (value?: Partial<IJsonSchema>) => void;
+  onChange?: (value?: Partial<IJsonSchema>) => void;
+  readonly?: boolean;
+  /**
+   * @deprecated use readonly instead
+   */
   disabled?: boolean;
   style?: React.CSSProperties;
 }
 
+const labelStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 5 };
+
+const firstUppercase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
 export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
   if (value?.type === 'array' && value?.items) {
     return [value.type, ...(getTypeSelectValue(value.items) || [])];
@@ -36,27 +44,62 @@ export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | u
 };
 
 export function TypeSelector(props: PropTypes) {
-  const { value, onChange, disabled, style } = props;
+  const { value, onChange, readonly, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
+  const typeManager = useTypeManager();
+
+  const icon = typeManager.getDisplayIcon(value || {});
+
+  const options = useMemo(
+    () =>
+      typeManager.getTypeRegistriesWithParentType().map((_type) => {
+        const isArray = _type.type === 'array';
+
+        return {
+          label: (
+            <div style={labelStyle}>
+              <Icon size="small" svg={_type.icon} />
+              {firstUppercase(_type.type)}
+            </div>
+          ),
+          value: _type.type,
+          children: isArray
+            ? typeManager.getTypeRegistriesWithParentType('array').map((_type) => ({
+                label: (
+                  <div style={labelStyle}>
+                    <Icon
+                      size="small"
+                      svg={typeManager.getDisplayIcon({
+                        type: 'array',
+                        items: { type: _type.type },
+                      })}
+                    />
+                    {firstUppercase(_type.type)}
+                  </div>
+                ),
+                value: _type.type,
+              }))
+            : [],
+        };
+      }),
+    []
+  );
+
   return (
     <Cascader
-      disabled={disabled}
+      disabled={readonly || disabled}
       size="small"
       triggerRender={() => (
-        <Button size="small" style={style}>
-          {getSchemaIcon(value)}
-        </Button>
+        <IconButton size="small" style={style} disabled={readonly || disabled} icon={icon} />
       )}
       treeData={options}
       value={selectValue}
       leafOnly={true}
       onChange={(value) => {
-        onChange(parseTypeSelectValue(value as string[]));
+        onChange?.(parseTypeSelectValue(value as string[]));
       }}
     />
   );
 }
-
-export { VariableTypeIcons, ArrayIcons, getSchemaIcon };

package/src/components/variable-selector/config.json

@@ -1,5 +1,9 @@
 {
   "name": "variable-selector",
-  "depMaterials": ["type-selector", "utils/json-schema", "typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui", "styled-components"]
+  "depMaterials": [],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components",
+    "@flowgram.ai/json-schema"
+  ]
 }

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

@@ -5,13 +5,14 @@
 
 import React, { useMemo } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
-import { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
-import { UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
+import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 
 interface PropTypes {
   value?: string[];
@@ -93,23 +94,43 @@ export const VariableSelector = ({
             );
           }
 
+          const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
+
+          const rootTitle = (
+            <UIRootTitle>
+              {_option.rootMeta?.title
+                ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} `
+                : null}
+            </UIRootTitle>
+          );
+
           return (
-            <UITag
-              prefixIcon={renderIcon(_option.rootMeta?.icon || _option?.icon)}
-              closable={!readonly}
-              onClose={() => onChange(undefined)}
-            >
-              <UIRootTitle>
-                {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
-              </UIRootTitle>
-              <UIVarName>{_option.label}</UIVarName>
-            </UITag>
+            <div>
+              <Popover
+                content={
+                  <UIPopoverContent>
+                    {rootIcon}
+                    {rootTitle}
+                    <UIVarName>{_option.keyPath.slice(1).join('.')}</UIVarName>
+                  </UIPopoverContent>
+                }
+              >
+                <UITag
+                  prefixIcon={rootIcon}
+                  closable={!readonly}
+                  onClose={() => onChange(undefined)}
+                >
+                  {rootTitle}
+                  {!_option.isRoot && <UIVarName $inSelector>{_option.label}</UIVarName>}
+                </UITag>
+              </Popover>
+            </div>
           );
         }}
         showClear={false}
         arrowIcon={<IconChevronDownStroked size="small" />}
         triggerRender={triggerRender}
-        placeholder={config?.placeholder ?? 'Select Variable...'}
+        placeholder={config?.placeholder ?? 'Select Variable'}
       />
     </>
   );

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Tag, TreeSelect } from '@douyinfe/semi-ui';
 
 export const UIRootTitle = styled.div`
@@ -15,11 +15,16 @@ export const UIRootTitle = styled.div`
   color: var(--semi-color-text-2);
 `;
 
-export const UIVarName = styled.div`
+export const UIVarName = styled.div<{ $inSelector?: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 50%;
+
+  ${({ $inSelector }) =>
+    $inSelector &&
+    css`
+      min-width: 50%;
+    `}
 `;
 
 export const UITag = styled(Tag)`
@@ -34,18 +39,15 @@ export const UITag = styled(Tag)`
 
   &.semi-tag {
     margin: 0;
+    height: 22px;
   }
 `;
 
 export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
   outline: ${({ $error }) => ($error ? '1px solid red' : 'none')};
 
-  height: 22px;
-  min-height: 22px;
-  line-height: 22px;
-
   & .semi-tree-select-selection {
-    padding: 0 2px;
+    padding: 0px;
     height: 22px;
   }
 
@@ -57,3 +59,11 @@ export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
     padding-left: 10px;
   }
 `;
+
+export const UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+`;

package/src/components/variable-selector/use-variable-tree.tsx

@@ -5,22 +5,27 @@
 
 import React, { useCallback } from 'react';
 
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
-import { JsonSchemaUtils } from '../../utils/json-schema';
-import { IJsonSchema } from '../../typings/json-schema';
+import { useTypeManager } from '../../plugins';
 
-type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
+type VariableField = BaseVariableField<{
+  icon?: string | JSX.Element;
+  title?: string;
+  disabled?: boolean;
+}>;
 
 export function useVariableTree(params: {
   includeSchema?: IJsonSchema | IJsonSchema[];
   excludeSchema?: IJsonSchema | IJsonSchema[];
+  customSkip?: (variable: VariableField) => boolean;
 }): TreeNodeData[] {
-  const { includeSchema, excludeSchema } = params;
+  const { includeSchema, excludeSchema, customSkip } = params;
 
+  const typeManager = useTypeManager();
   const variables = useAvailableVariables();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {
@@ -32,22 +37,9 @@ export function useVariableTree(params: {
       return variable.meta.icon;
     }
 
-    const _type = variable.type;
+    const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldownObject: false });
 
-    if (ASTMatch.isArray(_type)) {
-      return (
-        <Icon
-          size="small"
-          svg={ArrayIcons[_type.items?.kind.toLowerCase()] || VariableTypeIcons.array}
-        />
-      );
-    }
-
-    if (ASTMatch.isCustomType(_type)) {
-      return <Icon size="small" svg={VariableTypeIcons[_type.typeName.toLowerCase()]} />;
-    }
-
-    return <Icon size="small" svg={VariableTypeIcons[variable.type?.kind.toLowerCase()]} />;
+    return <Icon size="small" svg={typeManager.getDisplayIcon(schema || {})} />;
   }, []);
 
   const renderVariable = (
@@ -77,8 +69,12 @@ export function useVariableTree(params: {
     const isSchemaExclude = excludeSchema
       ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
       : false;
+    const isCustomSkip = customSkip ? customSkip(variable) : false;
+
+    // disabled in meta when created
+    const isMetaDisabled = variable.meta?.disabled;
 
-    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip && !isMetaDisabled;
 
     // If not match, and no children, return null
     if (!isSchemaMatch && !children?.length) {
@@ -93,7 +89,8 @@ export function useVariableTree(params: {
       icon: getVariableTypeIcon(variable),
       children,
       disabled: !isSchemaMatch,
-      rootMeta: parentFields[0]?.meta,
+      rootMeta: parentFields[0]?.meta || variable.meta,
+      isRoot: !parentFields?.length,
     };
   };
 

package/src/effects/auto-rename-ref/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isArray, isObject } from 'lodash';
+import { isArray, isObject, uniq } from 'lodash';
 import {
   DataEvent,
   Effect,
@@ -11,7 +11,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
 
 /**
  * Auto rename ref when form item's key is renamed
@@ -44,9 +44,34 @@ export const autoRenameRefEffect: EffectOptions[] = [
 
         // traverse rename refs inside form item 'name'
         traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
-          if (isRefMatch(_v, beforeKeyPath)) {
-            _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
-            form.setValueIn(_drilldownName, _v);
+          if (_v.type === 'ref') {
+            // ref auto rename
+            if (isKeyPathMatch(_v.content, beforeKeyPath)) {
+              _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+              form.setValueIn(_drilldownName, _v);
+            }
+          } else if (_v.type === 'template') {
+            // template auto rename
+            const templateKeyPaths = getTemplateKeyPaths(_v);
+            let hasMatch = false;
+
+            templateKeyPaths.forEach((_keyPath) => {
+              if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
+                hasMatch = true;
+                const nextKeyPath = [
+                  ...afterKeyPath,
+                  ...(_keyPath || [])?.slice(beforeKeyPath.length),
+                ];
+                _v.content = _v.content?.replace(
+                  `{{${_keyPath.join('.')}}`,
+                  `{{${nextKeyPath.join('.')}}`
+                );
+              }
+            });
+
+            if (hasMatch) {
+              form.setValueIn(_drilldownName, { ..._v });
+            }
           }
         });
       });
@@ -64,8 +89,21 @@ export const autoRenameRefEffect: EffectOptions[] = [
  * @param targetKeyPath
  * @returns
  */
-function isRefMatch(value: IFlowRefValue, targetKeyPath: string[]) {
-  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+function isKeyPathMatch(keyPath: string[] = [], targetKeyPath: string[]) {
+  return targetKeyPath.every((_key, index) => _key === keyPath[index]);
+}
+
+/**
+ * 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('.')
+  );
 }
 
 /**
@@ -79,19 +117,32 @@ function isRef(value: any): value is IFlowRefValue {
   );
 }
 
+function isTemplate(value: any): value is IFlowTemplateValue {
+  return value?.type === 'template' && typeof value?.content === 'string';
+}
+
 /**
  * Traverse value to find ref
  * @param value
  * @param options
  * @returns
  */
-function traverseRef(name: string, value: any, cb: (name: string, _v: IFlowRefValue) => void) {
+function traverseRef(
+  name: string,
+  value: any,
+  cb: (name: string, _v: IFlowRefValue | IFlowTemplateValue) => void
+) {
   if (isObject(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
     }
 
+    if (isTemplate(value)) {
+      cb(name, value);
+      return;
+    }
+
     Object.entries(value).forEach(([_key, _value]) => {
       traverseRef(`${name}.${_key}`, _value, cb);
     });

package/src/effects/index.ts

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

package/src/effects/listen-ref-schema-change/config.json

@@ -0,0 +1,10 @@
+{
+  "name": "listen-ref-schema-change",
+  "depMaterials": [
+    "flow-value"
+  ],
+  "depPackages": [
+    "lodash",
+    "@flowgram.ai/json-schema"
+  ]
+}

package/src/effects/listen-ref-schema-change/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import {
+  BaseType,
+  DataEvent,
+  Effect,
+  EffectFuncProps,
+  EffectOptions,
+  getNodeScope,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+/**
+ * Example:
+ * const formMeta = {
+ *   effect: {
+ *     'inputsValues.*': listenRefSchemaChange(({ name, schema, form }) => {
+ *       form.setValueIn(`${name}.schema`, schema);
+ *     })
+ *   }
+ * }
+ * @param cb
+ * @returns
+ */
+export const listenRefSchemaChange = (
+  cb: (props: EffectFuncProps<IFlowRefValue> & { schema?: IJsonSchema }) => void
+): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInitOrChange,
+    effect: ((params) => {
+      const { context, value } = params;
+
+      if (value?.type !== 'ref') {
+        return () => null;
+      }
+
+      const disposable = getNodeScope(context.node).available.trackByKeyPath<BaseType | undefined>(
+        value?.content || [],
+        (_type) => {
+          cb({ ...params, schema: JsonSchemaUtils.astToSchema(_type) });
+        },
+        {
+          selector: (_v) => _v?.type,
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];

package/src/effects/listen-ref-value-change/config.json

@@ -0,0 +1,9 @@
+{
+  "name": "listen-ref-value-change",
+  "depMaterials": [
+    "flow-value"
+  ],
+  "depPackages": [
+    "lodash"
+  ]
+}

package/src/effects/listen-ref-value-change/index.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  BaseVariableField,
+  DataEvent,
+  Effect,
+  EffectFuncProps,
+  EffectOptions,
+  getNodeScope,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+/**
+ * Example:
+ * const formMeta = {
+ *   effect: {
+ *     'inputsValues.*': listenRefValueChange(({ name, variable, form }) => {
+ *       const schema = JsonSchemaUtils.astToSchema(variable?.type);
+ *       form.setValueIn(`${name}.schema`, schema);
+ *     })
+ *   }
+ * }
+ * @param cb
+ * @returns
+ */
+export const listenRefValueChange = (
+  cb: (props: EffectFuncProps<IFlowRefValue> & { variable?: BaseVariableField }) => void
+): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInitOrChange,
+    effect: ((params) => {
+      const { context, value } = params;
+
+      if (value?.type !== 'ref') {
+        return () => null;
+      }
+
+      const disposable = getNodeScope(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (v) => {
+          cb({ ...params, variable: v });
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];

package/src/effects/provide-json-schema-outputs/config.json

@@ -1,8 +1,7 @@
 {
   "name": "provide-json-schema-outputs",
-  "depMaterials": [
-    "typings/json-schema",
-    "utils/json-schema"
-  ],
-  "depPackages": []
+  "depMaterials": [],
+  "depPackages": [
+    "@flowgram.ai/json-schema"
+  ]
 }

package/src/effects/provide-json-schema-outputs/index.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,
   EffectOptions,
@@ -11,9 +12,6 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { JsonSchemaUtils } from '../../utils';
-import { IJsonSchema } from '../../typings';
-
 export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: IJsonSchema, ctx) => [
     ASTFactory.createVariableDeclaration({

package/src/effects/sync-variable-title/index.ts

@@ -18,6 +18,7 @@ export const syncVariableTitle: EffectOptions[] = [
       context.node.getData(FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
+            ...(_var.meta || {}),
             title: value || context.node.id,
             icon: context.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
           });

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

@@ -3,4 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-export { createBatchOutputsFormPlugin } from './batch-outputs-plugin';
+export * from './batch-outputs-plugin';
+export * from './infer-inputs-plugin';
+export * from './infer-assign-plugin';