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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.1.0-alpha.11",
+  "version": "0.1.0-alpha.13",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -34,7 +34,8 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.1.0-alpha.11"
+    "@flowgram.ai/editor": "0.1.0-alpha.13",
+    "@flowgram.ai/json-schema": "0.1.0-alpha.13"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -50,8 +51,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.11",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.11"
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.13",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.13"
   },
   "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/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 { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
+import { AssignRowProps } from './types';
+import { BlurInput } from './components/blur-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' ? (
+          <InjectVariableSelector
+            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 }}>
+        <InjectDynamicValueInput
+          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/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 '@/components/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/batch-outputs/index.tsx

@@ -8,15 +8,16 @@ import React from 'react';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
-import { useList } from './use-list';
+import { useObjectList } from '@/hooks';
+import { InjectVariableSelector } from '@/components/variable-selector';
+
 import { PropsType } from './types';
-import { VariableSelector } from '../variable-selector';
 import { UIRow, UIRows } from './styles';
 
 export function BatchOutputs(props: PropsType) {
   const { readonly, style } = props;
 
-  const { list, add, update, remove } = useList(props);
+  const { list, add, updateKey, updateValue, remove } = useObjectList(props);
 
   return (
     <div>
@@ -28,21 +29,13 @@ export function BatchOutputs(props: PropsType) {
               disabled={readonly}
               size="small"
               value={item.key}
-              onChange={(v) => update({ ...item, key: v })}
+              onChange={(v) => updateKey(item.id, v)}
             />
-            <VariableSelector
+            <InjectVariableSelector
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value?.content}
-              onChange={(v) =>
-                update({
-                  ...item,
-                  value: {
-                    type: 'ref',
-                    content: v,
-                  },
-                })
-              }
+              onChange={(v) => updateValue(item.id, { type: 'ref', content: v })}
             />
             <Button
               disabled={readonly}

package/src/components/batch-outputs/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export type ValueType = Record<string, IFlowRefValue | undefined>;
 

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

@@ -5,10 +5,10 @@
 
 import React from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { PrivateScopeProvider } from '@flowgram.ai/editor';
 
-import { VariableSelector, VariableSelectorProps } from '../variable-selector';
-import { IJsonSchema } from '../../typings';
+import { VariableSelector, VariableSelectorProps } from '@/components/variable-selector';
 
 const batchVariableSchema: IJsonSchema = {
   type: 'array',

package/src/components/code-editor/index.tsx

@@ -15,6 +15,7 @@ import preset, { type EditorAPI } from '@coze-editor/editor/preset-code';
 import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
+import { initTsWorker } from './language-features';
 
 import './theme';
 import './language-features';
@@ -54,6 +55,12 @@ export function CodeEditor({
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
+  useEffect(() => {
+    if (languageId === 'typescript') {
+      initTsWorker();
+    }
+  }, [languageId]);
+
   useEffect(() => {
     // listen to value change
     if (editorRef.current?.getValue() !== value) {

package/src/components/code-editor/language-features.ts

@@ -11,8 +11,8 @@ import { json } from '@coze-editor/editor/language-json';
 import { mixLanguages } from '@coze-editor/editor';
 
 languages.register('python', python);
-languages.register('typescript', typescript);
 languages.register('shell', shell);
+languages.register('typescript', typescript);
 
 languages.register('json', {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
@@ -21,3 +21,24 @@ languages.register('json', {
   }),
   languageService: json.languageService,
 });
+
+let tsWorkerInit = false;
+
+export const initTsWorker = () => {
+  if (tsWorkerInit) {
+    return;
+  }
+  tsWorkerInit = true;
+
+  const tsWorker = new Worker(
+    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
+    { type: 'module' }
+  );
+  typescript.languageService.initialize(tsWorker, {
+    compilerOptions: {
+      // eliminate Promise error
+      lib: ['es2015', 'dom'],
+      noImplicitAny: false,
+    },
+  });
+};

package/src/components/code-editor/theme/light.ts

@@ -29,7 +29,7 @@ export const lightTheme: Extension = createTheme({
     gutterForeground: '#666',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#f0f0f0',
+    lineHighlight: '#e1e1e180',
     bracketColors: ['#FFD700', '#DD99FF', '#78B0FF'],
     tooltip: {
       backgroundColor: '#f0f0f0',

package/src/components/code-editor-mini/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { CodeEditor, CodeEditorPropsType } from '@/components/code-editor';
+
+const UIMini = styled.div`
+  .ͼ1 .cm-content {
+    padding: 0;
+  }
+`;
+
+export function CodeEditorMini(props: CodeEditorPropsType) {
+  return (
+    <UIMini>
+      <CodeEditor
+        {...props}
+        options={{
+          lineNumbersGutter: false,
+          foldGutter: false,
+          ...(props.options || {}),
+        }}
+      />
+    </UIMini>
+  );
+}

package/src/components/condition-row/constants.ts

@@ -5,7 +5,7 @@
 
 import { IRules, Op, OpConfigs } from './types';
 
-export const rules: IRules = {
+export const defaultRules: IRules = {
   string: {
     [Op.EQ]: 'string',
     [Op.NEQ]: 'string',
@@ -13,8 +13,8 @@ export const rules: IRules = {
     [Op.NOT_CONTAINS]: 'string',
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: 'string',
-    [Op.IS_NOT_EMPTY]: 'string',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
   },
   number: {
     [Op.EQ]: 'number',
@@ -25,8 +25,6 @@ export const rules: IRules = {
     [Op.LTE]: 'number',
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
   },
   integer: {
     [Op.EQ]: 'number',
@@ -37,8 +35,6 @@ export const rules: IRules = {
     [Op.LTE]: 'number',
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
   },
   boolean: {
     [Op.EQ]: 'boolean',
@@ -47,8 +43,6 @@ export const rules: IRules = {
     [Op.IS_FALSE]: null,
     [Op.IN]: 'array',
     [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
   },
   object: {
     [Op.IS_EMPTY]: null,
@@ -57,6 +51,10 @@ export const rules: IRules = {
   array: {
     [Op.IS_EMPTY]: null,
     [Op.IS_NOT_EMPTY]: null,
+    [Op.CONTAINS]: 'array',
+    [Op.NOT_CONTAINS]: 'array',
+    [Op.EQ]: 'array',
+    [Op.NEQ]: 'array',
   },
   map: {
     [Op.IS_EMPTY]: null,
@@ -64,7 +62,7 @@ export const rules: IRules = {
   },
 };
 
-export const opConfigs: OpConfigs = {
+export const defaultOpConfigs: OpConfigs = {
   [Op.EQ]: {
     label: 'Equal',
     abbreviation: '=',

package/src/components/condition-row/hooks/useOp.tsx

@@ -5,38 +5,44 @@
 
 import React, { useMemo } from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, Select } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked } from '@douyinfe/semi-icons';
 
-import { IRule, Op } from '../types';
-import { opConfigs } from '../constants';
+import { IRule, OpConfigs } from '../types';
+import { defaultOpConfigs } from '../constants';
 
 interface HookParams {
   rule?: IRule;
-  op?: Op;
-  onChange: (op: Op) => void;
+  op?: string;
+  onChange: (op: string) => void;
+  readonly?: boolean;
+  userOps?: OpConfigs;
 }
 
-export function useOp({ rule, op, onChange }: HookParams) {
+export function useOp({ rule, op, onChange, readonly, userOps }: HookParams) {
   const options = useMemo(
     () =>
       Object.keys(rule || {}).map((_op) => ({
-        ...(opConfigs[_op as Op] || {}),
+        ...(defaultOpConfigs[_op] || {}),
+        ...(userOps?.[_op] || {}),
         value: _op,
+        label: I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label),
       })),
-    [rule]
+    [rule, userOps]
   );
 
-  const opConfig = useMemo(() => opConfigs[op as Op], [op]);
+  const opConfig = useMemo(() => defaultOpConfigs[op as string], [op]);
 
   const renderOpSelect = () => (
     <Select
       style={{ height: 22 }}
+      disabled={readonly}
       size="small"
       value={op}
       optionList={options}
       onChange={(v) => {
-        onChange(v as Op);
+        onChange(v as string);
       }}
       triggerRender={({ value }) => (
         <Button size="small" disabled={!rule}>

package/src/components/condition-row/hooks/useRule.ts

@@ -5,15 +5,19 @@
 
 import { useMemo } from 'react';
 
+import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { rules } from '../constants';
-import { JsonSchemaUtils } from '../../../utils';
-import { IFlowRefValue, JsonSchemaBasicType } from '../../../typings';
+import { IFlowRefValue } from '@/typings';
 
-export function useRule(left?: IFlowRefValue) {
+import { IRules } from '../types';
+import { defaultRules } from '../constants';
+
+export function useRule(left?: IFlowRefValue, userRules?: IRules) {
   const available = useScopeAvailable();
 
+  const rules = useMemo(() => ({ ...defaultRules, ...(userRules || {}) }), [userRules]);
+
   const variable = useMemo(() => {
     if (!left) return undefined;
     return available.getByKeyPath(left.content);
@@ -25,7 +29,7 @@ export function useRule(left?: IFlowRefValue) {
     const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
 
     return rules[schema?.type as JsonSchemaBasicType];
-  }, [variable?.type]);
+  }, [variable?.type, rules]);
 
   return { rule };
 }

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

@@ -5,34 +5,52 @@
 
 import React, { useMemo } from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Input } from '@douyinfe/semi-ui';
 
-import { ConditionRowValueType, Op } from './types';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
+import { ConditionRowValueType, IRules, OpConfigs } from './types';
 import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
 import { useRule } from './hooks/useRule';
 import { useOp } from './hooks/useOp';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
-import { JsonSchemaBasicType } from '../../typings';
 
 interface PropTypes {
   value?: ConditionRowValueType;
   onChange: (value?: ConditionRowValueType) => void;
   style?: React.CSSProperties;
   readonly?: boolean;
+  ruleConfig?: {
+    ops?: OpConfigs;
+    rules?: IRules;
+  };
 }
 
-export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
+const defaultRuleConfig = {
+  ops: {},
+  rules: {},
+};
+
+export function ConditionRow({
+  style,
+  value,
+  onChange,
+  readonly,
+  ruleConfig = defaultRuleConfig,
+}: PropTypes) {
   const { left, operator, right } = value || {};
-  const { rule } = useRule(left);
+  const { rule } = useRule(left, ruleConfig.rules);
   const { renderOpSelect, opConfig } = useOp({
     rule,
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v }),
+    readonly,
+    userOps: ruleConfig.ops,
   });
 
   const targetSchema = useMemo(() => {
-    const targetType: JsonSchemaBasicType | null = rule?.[operator as Op] || null;
+    const targetType: string | null = rule?.[operator || ''] || null;
     return targetType ? { type: targetType, extra: { weak: true } } : null;
   }, [rule, opConfig]);
 
@@ -41,7 +59,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
       <UIOperator>{renderOpSelect()}</UIOperator>
       <UIValues>
         <UILeft>
-          <VariableSelector
+          <InjectVariableSelector
             readonly={readonly}
             style={{ width: '100%' }}
             value={left?.content}
@@ -58,7 +76,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
         </UILeft>
         <UIRight>
           {targetSchema ? (
-            <DynamicValueInput
+            <InjectDynamicValueInput
               readonly={readonly || !rule}
               value={right}
               schema={targetSchema}
@@ -69,7 +87,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
               size="small"
               disabled
               style={{ pointerEvents: 'none' }}
-              value={opConfig?.rightDisplay || 'Empty'}
+              value={opConfig?.rightDisplay || I18n.t('Empty')}
             />
           )}
         </UIRight>

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue, JsonSchemaBasicType } from '../../typings';
+import { IFlowConstantRefValue, IFlowRefValue } from '@/typings';
 
 export enum Op {
   EQ = 'eq',
@@ -29,14 +29,14 @@ export interface OpConfig {
   rightDisplay?: string;
 }
 
-export type OpConfigs = Record<Op, OpConfig>;
+export type OpConfigs = Record<string, OpConfig>;
 
-export type IRule = Partial<Record<Op, JsonSchemaBasicType | null>>;
+export type IRule = Partial<Record<string, string | null>>;
 
-export type IRules = Record<JsonSchemaBasicType, IRule>;
+export type IRules = Record<string, IRule>;
 
 export interface ConditionRowValueType {
   left?: IFlowRefValue;
-  operator?: Op;
+  operator?: string;
   right?: IFlowConstantRefValue;
 }