@flowgram.ai/form-materials 0.4.5 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -30,13 +30,13 @@
     "chalk": "^5.3.0",
     "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@coze-editor/editor": "0.1.0-alpha.879fbb",
+    "@coze-editor/editor": "0.1.0-alpha.5a549c",
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.4.5",
-    "@flowgram.ai/json-schema": "0.4.5"
+    "@flowgram.ai/editor": "0.4.6",
+    "@flowgram.ai/json-schema": "0.4.6"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -52,8 +52,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/ts-config": "0.4.5",
-    "@flowgram.ai/eslint-config": "0.4.5"
+    "@flowgram.ai/eslint-config": "0.4.6",
+    "@flowgram.ai/ts-config": "0.4.6"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useRef } from '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';
+
+const OriginCodeEditor = createRenderer(preset, [
+  EditorView.theme({
+    '&.cm-focused': {
+      outline: 'none',
+    },
+  }),
+]);
+
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
+
+export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
+  value?: string;
+  onChange?: (value: string) => void;
+  languageId: 'python' | 'typescript' | 'shell' | 'json';
+  theme?: 'dark' | 'light';
+  placeholder?: string;
+  activeLinePlaceholder?: string;
+  readonly?: boolean;
+  options?: Options;
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  languageId = 'python',
+  theme = 'light',
+  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) {
+      editorRef.current?.setValue(String(value || ''));
+    }
+  }, [value]);
+
+  return (
+    <EditorProvider>
+      <OriginCodeEditor
+        defaultValue={String(value || '')}
+        options={{
+          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+          languageId,
+          theme,
+          placeholder,
+          readOnly: readonly,
+          editable: !readonly,
+          ...(options || {}),
+        }}
+        didMount={(editor: EditorAPI) => {
+          editorRef.current = editor;
+        }}
+        onChange={(e) => onChange?.(e.value)}
+      >
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
+        {children}
+      </OriginCodeEditor>
+    </EditorProvider>
+  );
+}

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

@@ -3,94 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useRef } from 'react';
+import { lazy } from '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';
+export const CodeEditor = lazy(() =>
+  import('./editor').then((module) => ({ default: module.CodeEditor }))
+);
 
-import { getSuffixByLanguageId } from './utils';
-import { initTsWorker } from './language-features';
-
-import './theme';
-import './language-features';
-
-const OriginCodeEditor = createRenderer(preset, [
-  EditorView.theme({
-    '&.cm-focused': {
-      outline: 'none',
-    },
-  }),
-]);
-
-type Preset = typeof preset;
-type Options = Partial<InferValues<Preset[number]>>;
-
-export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
-  value?: string;
-  onChange?: (value: string) => void;
-  languageId: 'python' | 'typescript' | 'shell' | 'json';
-  theme?: 'dark' | 'light';
-  placeholder?: string;
-  activeLinePlaceholder?: string;
-  readonly?: boolean;
-  options?: Options;
-}
-
-export function CodeEditor({
-  value,
-  onChange,
-  languageId = 'python',
-  theme = 'light',
-  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) {
-      editorRef.current?.setValue(String(value || ''));
-    }
-  }, [value]);
-
-  return (
-    <EditorProvider>
-      <OriginCodeEditor
-        defaultValue={value}
-        options={{
-          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
-          languageId,
-          theme,
-          placeholder,
-          readOnly: readonly,
-          editable: !readonly,
-          ...(options || {}),
-        }}
-        didMount={(editor: EditorAPI) => {
-          editorRef.current = editor;
-        }}
-        onChange={(e) => onChange?.(e.value)}
-      >
-        {activeLinePlaceholder && (
-          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
-        )}
-        {children}
-      </OriginCodeEditor>
-    </EditorProvider>
-  );
-}
+export type { CodeEditorPropsType } from './editor';

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

@@ -7,11 +7,10 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import { CodeEditor, CodeEditorPropsType } from '@/components/code-editor';
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
 const UIMini = styled.div`
   .ͼ1 .cm-content {
-    padding: 0;
   }
 `;
 
@@ -23,6 +22,7 @@ export function CodeEditorMini(props: CodeEditorPropsType) {
         options={{
           lineNumbersGutter: false,
           foldGutter: false,
+          minHeight: 24,
           ...(props.options || {}),
         }}
       />

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

@@ -15,6 +15,7 @@ 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 { defaultOpConfigs, defaultRules } from './constants';
 
 interface PropTypes {
   value?: ConditionRowValueType;
@@ -96,4 +97,7 @@ export function ConditionRow({
   );
 }
 
+ConditionRow.defaultRules = defaultRules;
+ConditionRow.defaultOpConfigs = defaultOpConfigs;
+
 export { type ConditionRowValueType };

package/src/components/db-condition-row/hooks/use-left.tsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo } from 'react';
+import React from 'react';
+
+import { JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
+import { Icon } from '@douyinfe/semi-ui';
+
+import { ConditionRow } from '@/components';
+
+import { DBConditionOptionType, IRules } from '../types';
+import { UIOptionLabel, UISelect } from '../styles';
+
+const defaultRules = ConditionRow.defaultRules;
+
+interface HookParams {
+  left?: string;
+  options?: DBConditionOptionType[];
+  userRules?: IRules;
+  readonly?: boolean;
+  onChange: (leftKey: string) => void;
+}
+
+export function useLeft({ left, options, userRules, readonly, onChange }: HookParams) {
+  const rules = useMemo(() => ({ ...defaultRules, ...(userRules || {}) }), [userRules]);
+
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
+  const rule = useMemo(() => {
+    if (!left) return undefined;
+
+    const option = options?.find((item) => item.value === left);
+
+    if (!option?.schema?.type) {
+      return undefined;
+    }
+
+    return rules[option.schema.type];
+  }, [left, options, rules]);
+
+  const renderDBOptionSelect = () => (
+    <UISelect
+      disabled={readonly}
+      size="small"
+      style={{ width: '100%' }}
+      value={left}
+      onChange={(v) => onChange(v as string)}
+      optionList={
+        options?.map((item) => ({
+          label: (
+            <UIOptionLabel>
+              <Icon size="small" svg={typeManager.getDisplayIcon(item.schema)} />
+              {item.label}
+            </UIOptionLabel>
+          ),
+          value: item.value,
+        })) || []
+      }
+    />
+  );
+
+  return { rule, renderDBOptionSelect };
+}

package/src/components/db-condition-row/hooks/use-op.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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 { ConditionRow } from '@/components';
+
+import { IRule, OpConfigs } from '../types';
+
+const defaultOpConfigs = ConditionRow.defaultOpConfigs;
+
+interface HookParams {
+  rule?: IRule;
+  op?: string;
+  onChange: (op: string) => void;
+  readonly?: boolean;
+  userOps?: OpConfigs;
+}
+
+export function useOp({ rule, op, onChange, readonly, userOps }: HookParams) {
+  const options = useMemo(
+    () =>
+      Object.keys(rule || {}).map((_op) => ({
+        ...(defaultOpConfigs[_op] || {}),
+        ...(userOps?.[_op] || {}),
+        value: _op,
+        label: I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label),
+      })),
+    [rule, userOps]
+  );
+
+  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 string);
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
+
+  return { renderOpSelect, opConfig };
+}

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

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { Input } from '@douyinfe/semi-ui';
+
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
+import { DBConditionOptionType, DBConditionRowValueType, IRules, OpConfigs } from './types';
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
+import { useOp } from './hooks/use-op';
+import { useLeft } from './hooks/use-left';
+
+interface PropTypes {
+  value?: DBConditionRowValueType;
+  onChange: (value?: DBConditionRowValueType) => void;
+  style?: React.CSSProperties;
+  options?: DBConditionOptionType[];
+  readonly?: boolean;
+  ruleConfig?: {
+    ops?: OpConfigs;
+    rules?: IRules;
+  };
+}
+
+const defaultRuleConfig = {
+  ops: {},
+  rules: {},
+};
+
+export function DBConditionRow({
+  style,
+  value,
+  onChange,
+  readonly,
+  options,
+  ruleConfig = defaultRuleConfig,
+}: PropTypes) {
+  const { left, operator, right } = value || {};
+
+  const { rule, renderDBOptionSelect } = useLeft({
+    left,
+    options,
+    onChange: (leftKey) => onChange({ ...value, left: leftKey }),
+    readonly,
+    userRules: ruleConfig.rules,
+  });
+
+  const { renderOpSelect, opConfig } = useOp({
+    rule,
+    op: operator,
+    onChange: (v) => onChange({ ...value, operator: v }),
+    readonly,
+    userOps: ruleConfig.ops,
+  });
+
+  const targetSchema = useMemo(() => {
+    const targetType: string | null = rule?.[operator || ''] || null;
+    return targetType ? { type: targetType, extra: { weak: true } } : null;
+  }, [rule, opConfig]);
+
+  return (
+    <UIContainer style={style}>
+      <UIOperator>{renderOpSelect()}</UIOperator>
+      <UIValues>
+        <UILeft>{renderDBOptionSelect()}</UILeft>
+        <UIRight>
+          {targetSchema ? (
+            <InjectDynamicValueInput
+              readonly={readonly || !rule}
+              value={right}
+              schema={targetSchema}
+              onChange={(v) => onChange({ ...value, right: v })}
+            />
+          ) : (
+            <Input
+              size="small"
+              disabled
+              style={{ pointerEvents: 'none' }}
+              value={opConfig?.rightDisplay || I18n.t('Empty')}
+            />
+          )}
+        </UIRight>
+      </UIValues>
+    </UIContainer>
+  );
+}
+
+export { type DBConditionRowValueType, type DBConditionOptionType };

package/src/components/db-condition-row/styles.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+import { Select } from '@douyinfe/semi-ui';
+
+export const UIContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const UIOperator = styled.div``;
+
+export const UILeft = styled.div`
+  width: 100%;
+`;
+
+export const UIRight = styled.div`
+  width: 100%;
+`;
+
+export const UIValues = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const UIOptionLabel = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const UISelect = styled(Select)`
+  & .semi-select-selection {
+    margin-left: 5px;
+  }
+`;

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

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
+import { IFlowConstantRefValue } from '@/typings';
+
+export interface OpConfig {
+  label: string;
+  abbreviation: string;
+  // When right is not a value, display this text
+  rightDisplay?: string;
+}
+
+export type OpConfigs = Record<string, OpConfig>;
+
+export type IRule = Partial<Record<string, string | null>>;
+
+export type IRules = Record<string, IRule>;
+
+export interface DBConditionRowValueType {
+  left?: string;
+  schema?: IJsonSchema;
+  operator?: string;
+  right?: IFlowConstantRefValue;
+}
+
+export interface DBConditionOptionType {
+  label: string | JSX.Element;
+  value: string;
+  schema: IJsonSchema;
+}

package/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './batch-variable-selector';
 export * from './constant-input';
 export * from './dynamic-value-input';
 export * from './condition-row';
+export * from './db-condition-row';
 export * from './batch-outputs';
 export * from './prompt-editor';
 export * from './prompt-editor-with-variables';

package/src/components/json-editor-with-variables/editor.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { transformerCreator } from '@coze-editor/editor/preset-code';
+import { Text } from '@coze-editor/editor/language-json';
+
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
+import { VariableTree } from './extensions/variable-tree';
+import { VariableTagInject } from './extensions/variable-tag';
+
+type Match = { match: string; range: [number, number] };
+function findAllMatches(inputString: string, regex: RegExp): Match[] {
+  const globalRegex = new RegExp(
+    regex,
+    regex.flags.includes('g') ? regex.flags : regex.flags + 'g'
+  );
+  let match;
+  const matches: Match[] = [];
+
+  while ((match = globalRegex.exec(inputString)) !== null) {
+    if (match.index === globalRegex.lastIndex) {
+      globalRegex.lastIndex++;
+    }
+    matches.push({
+      match: match[0],
+      range: [match.index, match.index + match[0].length],
+    });
+  }
+
+  return matches;
+}
+
+const transformer = transformerCreator((text: Text) => {
+  const originalSource = text.toString();
+  const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+
+  if (matches.length > 0) {
+    matches.forEach(({ range }) => {
+      text.replaceRange(range[0], range[1], 'null');
+    });
+  }
+
+  return text;
+});
+
+export interface JsonEditorWithVariablesProps extends Omit<CodeEditorPropsType, 'languageId'> {}
+
+export function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {
+  return (
+    <CodeEditor
+      languageId="json"
+      activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
+      {...props}
+      options={{
+        transformer,
+        ...(props.options || {}),
+      }}
+    >
+      <VariableTree />
+      <VariableTagInject />
+    </CodeEditor>
+  );
+}