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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.12",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -33,7 +33,9 @@
     "@coze-editor/editor": "0.1.0-alpha.879fbb",
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
-    "@flowgram.ai/editor": "0.1.0-alpha.10"
+    "typescript": "^5.8.3",
+    "@flowgram.ai/editor": "0.1.0-alpha.12",
+    "@flowgram.ai/json-schema": "0.1.0-alpha.12"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -47,10 +49,10 @@
     "react-dom": "^18",
     "styled-components": "^5",
     "tsup": "^8.0.1",
-    "typescript": "^5.0.4",
+    "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.10",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.10"
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.12",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.12"
   },
   "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/batch-outputs/config.json

@@ -2,7 +2,8 @@
   "name": "batch-outputs",
   "depMaterials": [
     "flow-value",
-    "variable-selector"
+    "variable-selector",
+    "use-object-list"
   ],
   "depPackages": [
     "@douyinfe/semi-ui",

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

@@ -8,15 +8,15 @@ import React from 'react';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
-import { useList } from './use-list';
 import { PropsType } from './types';
 import { VariableSelector } from '../variable-selector';
+import { useObjectList } from '../../hooks';
 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 +28,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
               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-variable-selector/config.json

@@ -1,5 +1,9 @@
 {
   "name": "batch-variable-selector",
-  "depMaterials": ["variable-selector"],
-  "depPackages": []
+  "depMaterials": [
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@flowgram.ai/json-schema"
+  ]
 }

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';
 
 const batchVariableSchema: IJsonSchema = {
   type: 'array',

package/src/components/code-editor/config.json

@@ -4,6 +4,7 @@
   "depPackages": [
     "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
-    "@codemirror/state"
+    "@codemirror/state",
+    "typescript"
   ]
 }

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

@@ -5,11 +5,17 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import { ActiveLinePlaceholder, createRenderer, EditorProvider } from '@coze-editor/editor/react';
+import {
+  ActiveLinePlaceholder,
+  createRenderer,
+  EditorProvider,
+  InferValues,
+} from '@coze-editor/editor/react';
 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';
@@ -22,6 +28,9 @@ const OriginCodeEditor = createRenderer(preset, [
   }),
 ]);
 
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
+
 export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
   value?: string;
   onChange?: (value: string) => void;
@@ -29,6 +38,8 @@ export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
   theme?: 'dark' | 'light';
   placeholder?: string;
   activeLinePlaceholder?: string;
+  readonly?: boolean;
+  options?: Options;
 }
 
 export function CodeEditor({
@@ -39,9 +50,17 @@ export function CodeEditor({
   children,
   placeholder,
   activeLinePlaceholder,
+  options,
+  readonly,
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
+  useEffect(() => {
+    if (languageId === 'typescript') {
+      initTsWorker();
+    }
+  }, [languageId]);
+
   useEffect(() => {
     // listen to value change
     if (editorRef.current?.getValue() !== value) {
@@ -58,6 +77,9 @@ export function CodeEditor({
           languageId,
           theme,
           placeholder,
+          readOnly: readonly,
+          editable: !readonly,
+          ...(options || {}),
         }}
         didMount={(editor: EditorAPI) => {
           editorRef.current = editor;

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

@@ -4,14 +4,15 @@
  */
 
 import { languages } from '@coze-editor/editor/preset-code';
-// import { typescript } from '@coze-editor/editor/language-typescript';
+import { typescript } from '@coze-editor/editor/language-typescript';
 import { shell } from '@coze-editor/editor/language-shell';
 import { python } from '@coze-editor/editor/language-python';
 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,4 +22,23 @@ languages.register('json', {
   languageService: json.languageService,
 });
 
-languages.register('shell', shell);
+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,8 +29,8 @@ export const lightTheme: Extension = createTheme({
     gutterForeground: '#666',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#f0f0f0',
-    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    lineHighlight: '#e1e1e180',
+    bracketColors: ['#FFD700', '#DD99FF', '#78B0FF'],
     tooltip: {
       backgroundColor: '#f0f0f0',
       color: '#000',

package/src/components/code-editor-mini/config.json

@@ -0,0 +1,7 @@
+{
+  "name": "code-editor-mini",
+  "depMaterials": [
+    "code-editor"
+  ],
+  "depPackages": []
+}

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 '../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/config.json

@@ -1,5 +1,13 @@
 {
   "name": "condition-row",
-  "depMaterials": ["variable-selector", "dynamic-value-input", "flow-value", "utils/json-schema", "typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui", "styled-components"]
+  "depMaterials": [
+    "variable-selector",
+    "dynamic-value-input",
+    "flow-value"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components",
+    "@flowgram.ai/json-schema"
+  ]
 }

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

@@ -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,

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

@@ -15,9 +15,10 @@ interface HookParams {
   rule?: IRule;
   op?: Op;
   onChange: (op: Op) => void;
+  readonly?: boolean;
 }
 
-export function useOp({ rule, op, onChange }: HookParams) {
+export function useOp({ rule, op, onChange, readonly }: HookParams) {
   const options = useMemo(
     () =>
       Object.keys(rule || {}).map((_op) => ({
@@ -32,6 +33,7 @@ export function useOp({ rule, op, onChange }: HookParams) {
   const renderOpSelect = () => (
     <Select
       style={{ height: 22 }}
+      disabled={readonly}
       size="small"
       value={op}
       optionList={options}

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

@@ -5,11 +5,11 @@
 
 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) {
   const available = useScopeAvailable();

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

@@ -5,6 +5,7 @@
 
 import React, { useMemo } from 'react';
 
+import { JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { Input } from '@douyinfe/semi-ui';
 
 import { ConditionRowValueType, Op } from './types';
@@ -13,7 +14,6 @@ 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;
@@ -29,6 +29,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
     rule,
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v }),
+    readonly,
   });
 
   const targetSchema = useMemo(() => {

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

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue, JsonSchemaBasicType } from '../../typings';
+import { JsonSchemaBasicType } from '@flowgram.ai/json-schema';
+
+import { IFlowConstantRefValue, IFlowRefValue } from '../../typings';
 
 export enum Op {
   EQ = 'eq',

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

@@ -1,6 +1,9 @@
-
 {
   "name": "constant-input",
-  "depMaterials": ["typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui"]
+  "depMaterials": [
+    "plugins/json-schema-preset"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui"
+  ]
 }