@flowgram.ai/form-materials 0.1.0-alpha.15 → 0.1.0-alpha.17

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

@@ -1,134 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import { IRules, Op, OpConfigs } from './types';
-
-export const defaultRules: IRules = {
-  string: {
-    [Op.EQ]: 'string',
-    [Op.NEQ]: 'string',
-    [Op.CONTAINS]: 'string',
-    [Op.NOT_CONTAINS]: 'string',
-    [Op.IN]: 'array',
-    [Op.NIN]: 'array',
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
-  },
-  number: {
-    [Op.EQ]: 'number',
-    [Op.NEQ]: 'number',
-    [Op.GT]: 'number',
-    [Op.GTE]: 'number',
-    [Op.LT]: 'number',
-    [Op.LTE]: 'number',
-    [Op.IN]: 'array',
-    [Op.NIN]: 'array',
-  },
-  integer: {
-    [Op.EQ]: 'number',
-    [Op.NEQ]: 'number',
-    [Op.GT]: 'number',
-    [Op.GTE]: 'number',
-    [Op.LT]: 'number',
-    [Op.LTE]: 'number',
-    [Op.IN]: 'array',
-    [Op.NIN]: 'array',
-  },
-  boolean: {
-    [Op.EQ]: 'boolean',
-    [Op.NEQ]: 'boolean',
-    [Op.IS_TRUE]: null,
-    [Op.IS_FALSE]: null,
-    [Op.IN]: 'array',
-    [Op.NIN]: 'array',
-  },
-  object: {
-    [Op.IS_EMPTY]: null,
-    [Op.IS_NOT_EMPTY]: null,
-  },
-  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,
-    [Op.IS_NOT_EMPTY]: null,
-  },
-  ['date-time']: {
-    [Op.EQ]: 'date-time',
-    [Op.NEQ]: 'date-time',
-    [Op.GT]: 'date-time',
-    [Op.GTE]: 'date-time',
-    [Op.LT]: 'date-time',
-    [Op.LTE]: 'date-time',
-  },
-};
-
-export const defaultOpConfigs: OpConfigs = {
-  [Op.EQ]: {
-    label: 'Equal',
-    abbreviation: '=',
-  },
-  [Op.NEQ]: {
-    label: 'Not Equal',
-    abbreviation: '≠',
-  },
-  [Op.GT]: {
-    label: 'Greater Than',
-    abbreviation: '>',
-  },
-  [Op.GTE]: {
-    label: 'Greater Than or Equal',
-    abbreviation: '>=',
-  },
-  [Op.LT]: {
-    label: 'Less Than',
-    abbreviation: '<',
-  },
-  [Op.LTE]: {
-    label: 'Less Than or Equal',
-    abbreviation: '<=',
-  },
-  [Op.IN]: {
-    label: 'In',
-    abbreviation: '∈',
-  },
-  [Op.NIN]: {
-    label: 'Not In',
-    abbreviation: '∉',
-  },
-  [Op.CONTAINS]: {
-    label: 'Contains',
-    abbreviation: '⊇',
-  },
-  [Op.NOT_CONTAINS]: {
-    label: 'Not Contains',
-    abbreviation: '⊉',
-  },
-  [Op.IS_EMPTY]: {
-    label: 'Is Empty',
-    abbreviation: '=',
-    rightDisplay: 'Empty',
-  },
-  [Op.IS_NOT_EMPTY]: {
-    label: 'Is Not Empty',
-    abbreviation: '≠',
-    rightDisplay: 'Empty',
-  },
-  [Op.IS_TRUE]: {
-    label: 'Is True',
-    abbreviation: '=',
-    rightDisplay: 'True',
-  },
-  [Op.IS_FALSE]: {
-    label: 'Is False',
-    abbreviation: '=',
-    rightDisplay: 'False',
-  },
-};

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

@@ -1,56 +0,0 @@
-/**
- * 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 { IRule, OpConfigs } from '../types';
-import { defaultOpConfigs } from '../constants';
-
-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/condition-row/hooks/useRule.ts

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import { useMemo } from 'react';
-
-import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
-import { useScopeAvailable } from '@flowgram.ai/editor';
-
-import { IFlowRefValue } from '@/shared';
-
-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);
-  }, [available, left]);
-
-  const rule = useMemo(() => {
-    if (!variable) return undefined;
-
-    const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
-
-    return rules[schema?.type as JsonSchemaBasicType];
-  }, [variable?.type, rules]);
-
-  return { rule };
-}

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

@@ -1,66 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-/**
- * 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/json-editor-with-variables/extensions/variable-tag.tsx

@@ -1,174 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React, { useLayoutEffect } from 'react';
-
-import { isEqual, last } from 'lodash-es';
-import {
-  BaseVariableField,
-  Disposable,
-  DisposableCollection,
-  Scope,
-  useCurrentScope,
-} from '@flowgram.ai/editor';
-import { useInjector } from '@flowgram.ai/coze-editor/react';
-import { Popover } from '@douyinfe/semi-ui';
-import { IconIssueStroked } from '@douyinfe/semi-icons';
-import {
-  Decoration,
-  DecorationSet,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  WidgetType,
-} from '@codemirror/view';
-
-import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
-
-import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
-
-class VariableTagWidget extends WidgetType {
-  keyPath?: string[];
-
-  toDispose = new DisposableCollection();
-
-  scope: Scope;
-
-  root: IPolyfillRoot;
-
-  constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
-    super();
-
-    this.keyPath = keyPath;
-    this.scope = scope;
-  }
-
-  renderIcon = (icon: string | JSX.Element) => {
-    if (typeof icon === 'string') {
-      return <img style={{ marginRight: 8 }} width={12} height={12} src={icon} />;
-    }
-
-    return icon;
-  };
-
-  renderVariable(v?: BaseVariableField) {
-    if (!v) {
-      this.root.render(
-        <UITag prefixIcon={<IconIssueStroked />} color="amber">
-          Unknown
-        </UITag>
-      );
-      return;
-    }
-
-    const rootField = last(v.parentFields);
-
-    const rootTitle = (
-      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>
-    );
-    const rootIcon = this.renderIcon(rootField?.meta.icon);
-
-    this.root.render(
-      <Popover
-        content={
-          <UIPopoverContent>
-            {rootIcon}
-            {rootTitle}
-            <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>
-          </UIPopoverContent>
-        }
-      >
-        <UITag prefixIcon={rootIcon}>
-          {rootTitle}
-          <UIVarName>{v?.key}</UIVarName>
-        </UITag>
-      </Popover>
-    );
-  }
-
-  toDOM(view: EditorView): HTMLElement {
-    const dom = document.createElement('span');
-
-    this.root = polyfillCreateRoot(dom);
-
-    this.toDispose.push(
-      Disposable.create(() => {
-        this.root.unmount();
-      })
-    );
-
-    this.toDispose.push(
-      this.scope.available.trackByKeyPath(
-        this.keyPath,
-        (v) => {
-          this.renderVariable(v);
-        },
-        { triggerOnInit: false }
-      )
-    );
-
-    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
-
-    return dom;
-  }
-
-  eq(other: VariableTagWidget) {
-    return isEqual(this.keyPath, other.keyPath);
-  }
-
-  ignoreEvent(): boolean {
-    return false;
-  }
-
-  destroy(dom: HTMLElement): void {
-    this.toDispose.dispose();
-  }
-}
-
-export function VariableTagInject() {
-  const injector = useInjector();
-
-  const scope = useCurrentScope();
-
-  // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染
-  useLayoutEffect(() => {
-    const atMatcher = new MatchDecorator({
-      regexp: /\{\{([^\}\{]+)\}\}/g,
-      decoration: (match) =>
-        Decoration.replace({
-          widget: new VariableTagWidget({
-            keyPath: match[1]?.split('.') ?? [],
-            scope,
-          }),
-        }),
-    });
-
-    return injector.inject([
-      ViewPlugin.fromClass(
-        class {
-          decorations: DecorationSet;
-
-          constructor(private view: EditorView) {
-            this.decorations = atMatcher.createDeco(view);
-          }
-
-          update() {
-            this.decorations = atMatcher.createDeco(this.view);
-          }
-        },
-        {
-          decorations: (p) => p.decorations,
-          provide(p) {
-            return EditorView.atomicRanges.of(
-              (view) => view.plugin(p)?.decorations ?? Decoration.none
-            );
-          },
-        }
-      ),
-    ]);
-  }, [injector]);
-
-  return null;
-}

package/src/components/json-editor-with-variables/extensions/variable-tree.tsx

@@ -1,83 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React, { useEffect, useState } from 'react';
-
-import {
-  Mention,
-  MentionOpenChangeEvent,
-  getCurrentMentionReplaceRange,
-  useEditor,
-  PositionMirror,
-} from '@flowgram.ai/coze-editor/react';
-import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
-import { Popover, Tree } from '@douyinfe/semi-ui';
-
-import { useVariableTree } from '@/components/variable-selector';
-
-export function VariableTree() {
-  const [posKey, setPosKey] = useState('');
-  const [visible, setVisible] = useState(false);
-  const [position, setPosition] = useState(-1);
-  const editor = useEditor<EditorAPI>();
-
-  function insert(variablePath: string) {
-    const range = getCurrentMentionReplaceRange(editor.$view.state);
-
-    if (!range) {
-      return;
-    }
-
-    editor.replaceText({
-      ...range,
-      text: '{{' + variablePath + '}}',
-    });
-
-    setVisible(false);
-  }
-
-  function handleOpenChange(e: MentionOpenChangeEvent) {
-    setPosition(e.state.selection.main.head);
-    setVisible(e.value);
-  }
-
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-  }, [editor, visible]);
-
-  const treeData = useVariableTree({});
-
-  return (
-    <>
-      <Mention triggerCharacters={['@']} onOpenChange={handleOpenChange} />
-
-      <Popover
-        visible={visible}
-        trigger="custom"
-        position="topLeft"
-        rePosKey={posKey}
-        content={
-          <div style={{ width: 300 }}>
-            <Tree
-              treeData={treeData}
-              onSelect={(v) => {
-                insert(v);
-              }}
-            />
-          </div>
-        }
-      >
-        {/* PositionMirror allows the Popover to appear at the specified cursor position */}
-        <PositionMirror
-          position={position}
-          // When Doc scroll, update position
-          onChange={() => setPosKey(String(Math.random()))}
-        />
-      </Popover>
-    </>
-  );
-}

package/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx

@@ -1,94 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React, { useEffect, useState } from 'react';
-
-import {
-  Mention,
-  MentionOpenChangeEvent,
-  getCurrentMentionReplaceRange,
-  useEditor,
-  PositionMirror,
-} from '@flowgram.ai/coze-editor/react';
-import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
-import { Popover } from '@douyinfe/semi-ui';
-
-import { IFlowValue } from '@/shared';
-
-import { InputsPicker } from '../inputs-picker';
-
-export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlowValue> }) {
-  const [posKey, setPosKey] = useState('');
-  const [visible, setVisible] = useState(false);
-  const [position, setPosition] = useState(-1);
-  const editor = useEditor<EditorAPI>();
-
-  function insert(variablePath: string) {
-    const range = getCurrentMentionReplaceRange(editor.$view.state);
-
-    if (!range) {
-      return;
-    }
-
-    /**
-     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}
-     */
-    let { from, to } = range;
-    while (editor.$view.state.doc.sliceString(from - 1, from) === '{') {
-      from--;
-    }
-    while (editor.$view.state.doc.sliceString(to, to + 1) === '}') {
-      to++;
-    }
-
-    editor.replaceText({
-      ...range,
-      text: '{{' + variablePath + '}}',
-    });
-
-    setVisible(false);
-  }
-
-  function handleOpenChange(e: MentionOpenChangeEvent) {
-    setPosition(e.state.selection.main.head);
-    setVisible(e.value);
-  }
-
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-  }, [editor, visible]);
-
-  return (
-    <>
-      <Mention triggerCharacters={['{', '{}', '@']} onOpenChange={handleOpenChange} />
-
-      <Popover
-        visible={visible}
-        trigger="custom"
-        position="topLeft"
-        rePosKey={posKey}
-        content={
-          <div style={{ width: 300 }}>
-            <InputsPicker
-              inputsValues={inputsValues}
-              onSelect={(v) => {
-                insert(v);
-              }}
-            />
-          </div>
-        }
-      >
-        {/* PositionMirror allows the Popover to appear at the specified cursor position */}
-        <PositionMirror
-          position={position}
-          // When Doc scroll, update position
-          onChange={() => setPosKey(String(Math.random()))}
-        />
-      </Popover>
-    </>
-  );
-}