@flowgram.ai/form-materials 0.1.30 → 0.2.0

package/src/components/index.ts

@@ -1,3 +1,6 @@
-export { VariableSelector } from './variable-selector';
-export { TypeSelector, JsonSchema, VariableTypeIcons, ArrayIcons } from './type-selector';
-export { JsonSchemaEditor } from './json-schema-editor';
+export * from './variable-selector';
+export * from './type-selector';
+export * from './json-schema-editor';
+export * from './batch-variable-selector';
+export * from './constant-input';
+export * from './dynamic-value-input';

package/src/components/json-schema-editor/hooks.tsx

@@ -36,15 +36,21 @@ export function usePropertiesEdit(
   const initPropertyList = useMemo(
     () =>
       isDrilldownObject
-        ? Object.entries(drilldown.schema?.properties || {}).map(
-            ([name, _value]) =>
-              ({
-                key: genId(),
-                name,
-                isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                ..._value,
-              } as PropertyValueType)
-          )
+        ? Object.entries(drilldown.schema?.properties || {})
+            .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+            .map(
+              ([name, _value], index) =>
+                ({
+                  key: genId(),
+                  name,
+                  isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
+                  ..._value,
+                  extra: {
+                    ...(_value.extra || {}),
+                    index,
+                  },
+                } as PropertyValueType)
+            )
         : [],
     [isDrilldownObject]
   );
@@ -65,23 +71,25 @@ export function usePropertiesEdit(
             nameMap.set(_property.name, _property);
           }
         }
-        return Object.entries(drilldown.schema?.properties || {}).map(([name, _value]) => {
-          const _property = nameMap.get(name);
-          if (_property) {
+        return Object.entries(drilldown.schema?.properties || {})
+          .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+          .map(([name, _value]) => {
+            const _property = nameMap.get(name);
+            if (_property) {
+              return {
+                key: _property.key,
+                name,
+                isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
+                ..._value,
+              };
+            }
             return {
-              key: _property.key,
+              key: genId(),
               name,
               isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
               ..._value,
             };
-          }
-          return {
-            key: genId(),
-            name,
-            isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-            ..._value,
-          };
-        });
+          });
       });
     }
     mountRef.current = true;
@@ -121,7 +129,10 @@ export function usePropertiesEdit(
   };
 
   const onAddProperty = () => {
-    updatePropertyList((_list) => [..._list, { key: genId(), name: '', type: 'string' }]);
+    updatePropertyList((_list) => [
+      ..._list,
+      { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
+    ]);
   };
 
   const onRemoveProperty = (key: number) => {

package/src/components/json-schema-editor/index.tsx

@@ -12,7 +12,7 @@ import {
 
 import { JsonSchema } from '../type-selector/types';
 import { TypeSelector } from '../type-selector';
-import { PropertyValueType } from './types';
+import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
   UIActions,
@@ -35,8 +35,9 @@ import { usePropertiesEdit } from './hooks';
 export function JsonSchemaEditor(props: {
   value?: JsonSchema;
   onChange?: (value: JsonSchema) => void;
+  config?: ConfigType;
 }) {
-  const { value = { type: 'object' }, onChange: onChangeProps } = props;
+  const { value = { type: 'object' }, config = {}, onChange: onChangeProps } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -49,6 +50,7 @@ export function JsonSchemaEditor(props: {
           <PropertyEdit
             key={_property.key}
             value={_property}
+            config={config}
             onChange={(_v) => {
               onEditProperty(_property.key!, _v);
             }}
@@ -59,7 +61,7 @@ export function JsonSchemaEditor(props: {
         ))}
       </UIProperties>
       <Button size="small" style={{ marginTop: 10 }} icon={<IconPlus />} onClick={onAddProperty}>
-        Add
+        {config?.addButtonText ?? 'Add'}
       </Button>
     </UIContainer>
   );
@@ -67,12 +69,13 @@ export function JsonSchemaEditor(props: {
 
 function PropertyEdit(props: {
   value?: PropertyValueType;
+  config?: ConfigType;
   onChange?: (value: PropertyValueType) => void;
   onRemove?: () => void;
   $isLast?: boolean;
   $showLine?: boolean;
 }) {
-  const { value, onChange: onChangeProps, onRemove, $isLast, $showLine } = props;
+  const { value, config, onChange: onChangeProps, onRemove, $isLast, $showLine } = props;
 
   const [expand, setExpand] = useState(false);
   const [collapse, setCollapse] = useState(false);
@@ -107,7 +110,7 @@ function PropertyEdit(props: {
           <UIRow>
             <UIName>
               <Input
-                placeholder="Input Variable Name"
+                placeholder={config?.placeholder ?? 'Input Variable Name'}
                 size="small"
                 value={name}
                 onChange={(value) => onChange('name', value)}
@@ -158,12 +161,12 @@ function PropertyEdit(props: {
           </UIRow>
           {expand && (
             <UIExpandDetail>
-              <UILabel>Description</UILabel>
+              <UILabel>{config?.descTitle ?? 'Description'}</UILabel>
               <Input
                 size="small"
                 value={description}
                 onChange={(value) => onChange('description', value)}
-                placeholder="Help LLM to understand the property"
+                placeholder={config?.descPlaceholder ?? 'Help LLM to understand the property'}
               />
             </UIExpandDetail>
           )}
@@ -175,6 +178,7 @@ function PropertyEdit(props: {
                 <PropertyEdit
                   key={_property.key}
                   value={_property}
+                  config={config}
                   onChange={(_v) => {
                     onEditProperty(_property.key!, _v);
                   }}

package/src/components/json-schema-editor/types.ts

@@ -9,3 +9,10 @@ export interface PropertyValueType extends JsonSchema {
 export type PropertiesValueType = Pick<PropertyValueType, 'properties' | 'required'>;
 
 export type JsonSchemaProperties = JsonSchema['properties'];
+
+export interface ConfigType {
+  placeholder?: string;
+  descTitle?: string;
+  descPlaceholder?: string;
+  addButtonText?: string;
+}

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

@@ -8,6 +8,8 @@ import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constan
 interface PropTypes {
   value?: Partial<JsonSchema>;
   onChange: (value?: Partial<JsonSchema>) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
 }
 
 export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | undefined => {
@@ -29,15 +31,16 @@ export const parseTypeSelectValue = (value?: string[]): Partial<JsonSchema> | un
 };
 
 export function TypeSelector(props: PropTypes) {
-  const { value, onChange } = props;
+  const { value, onChange, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
   return (
     <Cascader
+      disabled={disabled}
       size="small"
       triggerRender={() => (
-        <Button size="small" style={{ width: 50 }}>
+        <Button size="small" style={style}>
           {getSchemaIcon(value)}
         </Button>
       )}

package/src/components/type-selector/types.ts

@@ -1,19 +1,5 @@
-export type BasicType = 'boolean' | 'string' | 'integer' | 'number' | 'object' | 'array';
+import { VarJSONSchema } from '@flowgram.ai/editor';
 
-export interface JsonSchema<T = string> {
-  type?: T;
-  default?: any;
-  title?: string;
-  description?: string;
-  enum?: (string | number)[];
-  properties?: Record<string, JsonSchema>;
-  additionalProperties?: JsonSchema;
-  items?: JsonSchema;
-  required?: string[];
-  $ref?: string;
-  extra?: {
-    order?: number;
-    literal?: boolean; // is literal type
-    formComponent?: string; // Set the render component
-  };
-}
+export type BasicType = VarJSONSchema.BasicType;
+
+export type JsonSchema = VarJSONSchema.ISchema;

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

@@ -1,5 +1,5 @@
 {
   "name": "variable-selector",
   "depMaterials": ["type-selector"],
-  "depPackages": ["@douyinfe/semi-ui"]
+  "depPackages": ["@douyinfe/semi-ui", "styled-components"]
 }

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

@@ -1,44 +1,108 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { TreeSelect } from '@douyinfe/semi-ui';
+import { VarJSONSchema } from '@flowgram.ai/editor';
+import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
+import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
 import { useVariableTree } from './use-variable-tree';
+import { UIRootTitle, UITag, UITreeSelect } from './styles';
 
-export interface PropTypes {
-  value?: string;
-  onChange: (value?: string) => void;
+interface PropTypes {
+  value?: string[];
+  config?: {
+    placeholder?: string;
+    notFoundContent?: string;
+  };
+  onChange: (value?: string[]) => void;
+  includeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+  excludeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
   readonly?: boolean;
   hasError?: boolean;
   style?: React.CSSProperties;
+  triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
 }
 
+export type VariableSelectorProps = PropTypes;
+
 export const VariableSelector = ({
   value,
+  config,
   onChange,
   style,
   readonly = false,
+  includeSchema,
+  excludeSchema,
   hasError,
+  triggerRender,
 }: PropTypes) => {
-  const treeData = useVariableTree();
+  const treeData = useVariableTree({ includeSchema, excludeSchema });
+
+  const treeValue = useMemo(() => {
+    if (typeof value === 'string') {
+      console.warn(
+        'The Value of VariableSelector is a string, it should be an ARRAY. \n',
+        'Please check the value of VariableSelector \n'
+      );
+      return value;
+    }
+    return value?.join('.');
+  }, [value]);
+
+  const renderIcon = (icon: string | JSX.Element) => {
+    if (typeof icon === 'string') {
+      return <img style={{ marginRight: 8 }} width={12} height={12} src={icon} />;
+    }
+
+    return icon;
+  };
 
   return (
     <>
-      <TreeSelect
+      <UITreeSelect
         dropdownMatchSelectWidth={false}
         disabled={readonly}
         treeData={treeData}
         size="small"
-        value={value}
-        style={{
-          ...style,
-          outline: hasError ? '1px solid red' : undefined,
-        }}
+        value={treeValue}
+        clearIcon={null}
+        $error={hasError}
+        style={style}
         validateStatus={hasError ? 'error' : undefined}
-        onChange={(option) => {
-          onChange(option as string);
+        onChange={(_, _config) => {
+          onChange((_config as TreeNodeData).keyPath as string[]);
+        }}
+        renderSelectedItem={(_option: TreeNodeData) => {
+          if (!_option?.keyPath) {
+            return (
+              <UITag
+                prefixIcon={<IconIssueStroked />}
+                color="amber"
+                closable={!readonly}
+                onClose={() => onChange(undefined)}
+              >
+                {config?.notFoundContent ?? 'Undefined'}
+              </UITag>
+            );
+          }
+
+          return (
+            <UITag
+              prefixIcon={renderIcon(_option.rootMeta?.icon || _option?.icon)}
+              closable={!readonly}
+              onClose={() => onChange(undefined)}
+            >
+              <UIRootTitle>
+                {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
+              </UIRootTitle>
+              {_option.label}
+            </UITag>
+          );
         }}
-        showClear
-        placeholder="Select Variable..."
+        showClear={false}
+        arrowIcon={value ? null : <IconChevronDownStroked size="small" />}
+        triggerRender={triggerRender}
+        placeholder={config?.placeholder ?? 'Select Variable...'}
       />
     </>
   );

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

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { Tag, TreeSelect } from '@douyinfe/semi-ui';
+
+export const UIRootTitle = styled.span`
+  margin-right: 4px;
+  color: var(--semi-color-text-2);
+`;
+
+export const UITag = styled(Tag)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0;
+  }
+`;
+
+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;
+    height: 22px;
+  }
+
+  & .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  & .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+`;

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useScopeAvailable, ASTMatch, BaseVariableField } from '@flowgram.ai/editor';
+import { useScopeAvailable, ASTMatch, BaseVariableField, VarJSONSchema } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
@@ -8,11 +8,16 @@ import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
-export function useVariableTree(): TreeNodeData[] {
+export function useVariableTree(params: {
+  includeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+  excludeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+}): TreeNodeData[] {
+  const { includeSchema, excludeSchema } = params;
+
   const available = useScopeAvailable();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {
-    if (variable.meta.icon) {
+    if (variable.meta?.icon) {
       if (typeof variable.meta.icon === 'string') {
         return <img style={{ marginRight: 8 }} width={12} height={12} src={variable.meta.icon} />;
       }
@@ -44,6 +49,10 @@ export function useVariableTree(): TreeNodeData[] {
   ): TreeNodeData | null => {
     let type = variable?.type;
 
+    if (!type) {
+      return null;
+    }
+
     let children: TreeNodeData[] | undefined;
 
     if (ASTMatch.isObject(type)) {
@@ -56,14 +65,27 @@ export function useVariableTree(): TreeNodeData[] {
       }
     }
 
-    const currPath = [...parentFields.map((_field) => _field.key), variable.key].join('.');
+    const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
+    const key = keyPath.join('.');
+
+    const isSchemaInclude = includeSchema ? type.isEqualWithJSONSchema(includeSchema) : true;
+    const isSchemaExclude = excludeSchema ? type.isEqualWithJSONSchema(excludeSchema) : false;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+
+    // If not match, and no children, return null
+    if (!isSchemaMatch && !children?.length) {
+      return null;
+    }
 
     return {
-      key: currPath,
-      label: variable.meta.title || variable.key,
-      value: currPath,
+      key: key,
+      label: variable.meta?.title || variable.key,
+      value: key,
+      keyPath,
       icon: getVariableTypeIcon(variable),
       children,
+      disabled: !isSchemaMatch,
+      rootMeta: parentFields[0]?.meta,
     };
   };
 

package/src/effects/index.ts

@@ -0,0 +1,2 @@
+export * from './provide-batch-input';
+export * from './provide-batch-outputs';

package/src/effects/provide-batch-input/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "provide-batch-input",
+  "depMaterials": ["flow-value"],
+  "depPackages": []
+}

package/src/effects/provide-batch-input/index.ts

@@ -0,0 +1,38 @@
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
+  private: true,
+  parse: (value: IFlowRefValue, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}_locals`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: [
+          ASTFactory.createProperty({
+            key: 'item',
+            initializer: ASTFactory.createEnumerateExpression({
+              enumerateFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || [],
+              }),
+            }),
+          }),
+          ASTFactory.createProperty({
+            key: 'index',
+            type: ASTFactory.createNumber(),
+          }),
+        ],
+      }),
+    }),
+  ],
+});

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

@@ -0,0 +1,5 @@
+{
+  "name": "provide-batch-outputs",
+  "depMaterials": ["flow-value"],
+  "depPackages": []
+}

package/src/effects/provide-batch-outputs/index.ts

@@ -0,0 +1,34 @@
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
+  private: true,
+  parse: (value: Record<string, IFlowRefValue>, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: Object.entries(value).map(([_key, value]) =>
+          ASTFactory.createProperty({
+            key: _key,
+            initializer: ASTFactory.createWrapArrayExpression({
+              wrapFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || [],
+              }),
+            }),
+          })
+        ),
+      }),
+    }),
+  ],
+});

package/src/index.ts

@@ -1 +1,4 @@
 export * from './components';
+export * from './effects';
+export * from './utils';
+export * from './typings';

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

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

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

@@ -0,0 +1,27 @@
+export interface IFlowConstantValue {
+  type: 'constant';
+  content?: string | number | boolean;
+}
+
+export interface IFlowRefValue {
+  type: 'ref';
+  content?: string[];
+}
+
+export interface IFlowExpressionValue {
+  type: 'expression';
+  content?: string;
+}
+
+export interface IFlowTemplateValue {
+  type: 'template';
+  content?: string;
+}
+
+export type IFlowValue =
+  | IFlowConstantValue
+  | IFlowRefValue
+  | IFlowExpressionValue
+  | IFlowTemplateValue;
+
+export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;

package/src/typings/index.ts

@@ -0,0 +1 @@
+export * from './flow-value';

package/src/utils/format-legacy-refs/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "format-legacy-ref",
+  "depMaterials": [],
+  "depPackages": []
+}