@flowgram.ai/form-materials 0.1.0-alpha.14 → 0.1.0-alpha.16

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

@@ -3,48 +3,64 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
+import { createTheme, tags as t } from '@flowgram.ai/coze-editor/preset-code';
 import { type Extension } from '@codemirror/state';
 
-const colors = {
-  background: '#FFFFFF',
-  comment: '#6B7280',
-  key: '#2563EB',
-  variable: '#DC2626',
-  string: '#059669',
-  number: '#EA580C',
-  boolean: '#7C3AED',
-  null: '#7C3AED',
-  separator: '#374151',
+export const colors = {
+  background: '#f4f5f5',
+  foreground: '#444d56',
+  selection: '#0366d625',
+  cursor: '#044289',
+  dropdownBackground: '#fff',
+  dropdownBorder: '#e1e4e8',
+  activeLine: '#c6c6c622',
+  matchingBracket: '#34d05840',
+  keyword: '#d73a49',
+  storage: '#d73a49',
+  variable: '#e36209',
+  parameter: '#24292e',
+  function: '#005cc5',
+  string: '#032f62',
+  constant: '#005cc5',
+  type: '#005cc5',
+  class: '#6f42c1',
+  number: '#005cc5',
+  comment: '#6a737d',
+  heading: '#005cc5',
+  invalid: '#cb2431',
+  regexp: '#032f62',
 };
 
 export const lightTheme: Extension = createTheme({
   variant: 'light',
   settings: {
-    background: '#FFFFFF',
-    foreground: '#1F2937',
-    caret: '#2563EB',
-    selection: '#E5E7EB',
-    gutterBackground: '#F9FAFB',
-    gutterForeground: '#6B7280',
+    background: colors.background,
+    foreground: colors.foreground,
+    caret: colors.cursor,
+    selection: colors.selection,
+    gutterBackground: colors.background,
+    gutterForeground: colors.foreground,
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#F3F4F680',
+    lineHighlight: colors.background,
     bracketColors: ['#F59E0B', '#8B5CF6', '#06B6D4'],
     tooltip: {
-      backgroundColor: '#FFFFFF',
-      color: '#1F2937',
-      border: '1px solid #E5E7EB',
-      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      backgroundColor: colors.dropdownBackground,
+      color: colors.foreground,
+      border: 'none',
+      boxShadow: '0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1)!important',
+      maxWidth: '400px',
     },
     link: {
       color: '#2563EB',
+      caret: colors.cursor,
     },
     completionItemHover: {
       backgroundColor: '#F3F4F6',
     },
     completionItemSelected: {
-      backgroundColor: '#E5E7EB',
+      backgroundColor: colors.selection,
+      color: colors.foreground,
     },
     completionItemIcon: {
       color: '#4B5563',
@@ -60,84 +76,37 @@ export const lightTheme: Extension = createTheme({
     },
   },
   styles: [
-    // JSON
-    {
-      tag: t.comment,
-      color: colors.comment,
-    },
-    {
-      tag: [t.propertyName],
-      color: colors.key,
-    },
+    { tag: t.keyword, color: colors.keyword },
     {
-      tag: [t.variableName],
+      tag: [t.name, t.deleted, t.character, t.macroName],
       color: colors.variable,
     },
-
+    { tag: [t.propertyName], color: colors.function },
     {
-      tag: [t.string],
+      tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
       color: colors.string,
     },
+    { tag: [t.function(t.variableName), t.labelName], color: colors.function },
     {
-      tag: [t.number],
-      color: colors.number,
-    },
-    {
-      tag: [t.bool],
-      color: colors.boolean,
-    },
-    {
-      tag: [t.null],
-      color: colors.null,
-    },
-    {
-      tag: [t.separator],
-      color: colors.separator,
-    },
-
-    // markdown
-    {
-      tag: [t.heading],
-      color: '#2563EB',
-    },
-    {
-      tag: [t.processingInstruction],
-      color: '#2563EB',
-    },
-
-    // js
-    {
-      tag: [t.definitionKeyword],
-      color: '#9333EA',
-    },
-    {
-      tag: [t.modifier],
-      color: '#9333EA',
-    },
-    {
-      tag: [t.controlKeyword],
-      color: '#9333EA',
+      tag: [t.color, t.constant(t.name), t.standard(t.name)],
+      color: colors.constant,
     },
+    { tag: [t.definition(t.name), t.separator], color: colors.variable },
+    { tag: [t.className], color: colors.class },
     {
-      tag: [t.operatorKeyword],
-      color: '#9333EA',
-    },
-
-    // shell
-    // curl
-    {
-      tag: [t.standard(t.variableName)],
-      color: '#059669',
-    },
-    // -X
-    {
-      tag: [t.attributeName],
-      color: '#EA580C',
-    },
-    // url in string (includes quotes), e.g. "https://..."
-    {
-      tag: [t.special(t.string)],
-      color: '#2563EB',
+      tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+      color: colors.number,
     },
+    { tag: [t.typeName], color: colors.type, fontStyle: colors.type },
+    { tag: [t.operator, t.operatorKeyword], color: colors.keyword },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: colors.regexp },
+    { tag: [t.meta, t.comment], color: colors.comment },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: colors.heading },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: colors.variable },
+    { tag: t.invalid, color: colors.invalid },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
   ],
 });

package/src/components/code-editor/utils.ts

@@ -16,5 +16,9 @@ export function getSuffixByLanguageId(languageId: string) {
   if (languageId === 'json') {
     return '.json';
   }
+  if (languageId === 'sql') {
+    return '.sql';
+  }
+
   return '';
 }

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

@@ -14,6 +14,9 @@ const UIMini = styled.div`
   }
 `;
 
+/**
+ * @deprecated use mini in CodeEditorPropsType instead
+ */
 export function CodeEditorMini(props: CodeEditorPropsType) {
   return (
     <UIMini>

package/src/components/condition-context/context.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { createContext, useContext } from 'react';
+
+import { IConditionRule, ConditionOpConfigs } from './types';
+import { defaultConditionOpConfigs } from './op';
+
+interface ContextType {
+  rules?: Record<string, IConditionRule>;
+  ops?: ConditionOpConfigs;
+}
+
+export const ConditionContext = createContext<ContextType>({
+  rules: {},
+  ops: defaultConditionOpConfigs,
+});
+
+export const ConditionProvider = (props: React.PropsWithChildren<ContextType>) => {
+  const { rules, ops } = props;
+  return (
+    <ConditionContext.Provider value={{ rules, ops }}>{props.children}</ConditionContext.Provider>
+  );
+};
+
+export const useConditionContext = () => useContext(ConditionContext);

package/src/components/condition-context/hooks/use-condition.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo } from 'react';
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
+
+import { useTypeManager } from '@/plugins';
+
+import { IConditionRule, ConditionOpConfigs } from '../types';
+import { useConditionContext } from '../context';
+
+interface HooksParams {
+  leftSchema?: IJsonSchema;
+  operator?: string;
+
+  /**
+   * custom rule config
+   */
+  ruleConfig?: {
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
+  };
+}
+
+export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams) {
+  const typeManager = useTypeManager();
+  const { rules: contextRules, ops: contextOps } = useConditionContext();
+
+  // 合并用户规则和上下文规则
+  const userRules = useMemo(
+    () => ruleConfig?.rules || contextRules || {},
+    [contextRules, ruleConfig?.rules]
+  );
+
+  // 合并用户操作符和上下文操作符
+  const allOps = useMemo(() => ruleConfig?.ops || contextOps || {}, [contextOps, ruleConfig?.ops]);
+
+  // 获取类型配置
+  const config = useMemo(
+    () => (leftSchema ? typeManager.getTypeBySchema(leftSchema) : undefined),
+    [leftSchema, typeManager]
+  );
+
+  // 计算规则
+  const rule = useMemo(() => {
+    if (!config) {
+      return undefined;
+    }
+    if (userRules[config.type]) {
+      return userRules[config.type];
+    }
+    if (typeof config.conditionRule === 'function') {
+      return config.conditionRule(leftSchema);
+    }
+    return config.conditionRule;
+  }, [userRules, leftSchema, config]);
+
+  // 计算操作符选项列表
+  const opOptionList = useMemo(
+    () =>
+      Object.keys(rule || {})
+        .filter((_op) => allOps[_op])
+        .map((_op) => ({
+          ...(allOps?.[_op] || {}),
+          value: _op,
+          label: I18n.t(allOps?.[_op]?.label || _op),
+        })),
+    [rule, allOps]
+  );
+
+  // get target schema
+  const targetSchema = useMemo(() => {
+    const targetType: string | IJsonSchema | null = rule?.[operator || ''] || null;
+
+    if (!targetType) {
+      return undefined;
+    }
+
+    if (typeof targetType === 'string') {
+      return { type: targetType, extra: { weak: true } };
+    }
+
+    return targetType;
+  }, [rule, operator]);
+
+  // get current operator config
+  const opConfig = useMemo(() => allOps[operator || ''], [operator, allOps]);
+
+  return {
+    rule,
+    opConfig,
+    opOptionList,
+    targetSchema,
+  };
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export {
+  type IConditionRule,
+  type IConditionRuleFactory,
+  type ConditionOpConfigs,
+  type ConditionOpConfig,
+} from './types';
+export { ConditionPresetOp } from './op';
+export { ConditionProvider, useConditionContext } from './context';
+export { useCondition } from './hooks/use-condition';

package/src/components/condition-context/op.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ConditionOpConfigs } from './types';
+
+export enum ConditionPresetOp {
+  EQ = 'eq',
+  NEQ = 'neq',
+  GT = 'gt',
+  GTE = 'gte',
+  LT = 'lt',
+  LTE = 'lte',
+  IN = 'in',
+  NIN = 'nin',
+  CONTAINS = 'contains',
+  NOT_CONTAINS = 'not_contains',
+  IS_EMPTY = 'is_empty',
+  IS_NOT_EMPTY = 'is_not_empty',
+  IS_TRUE = 'is_true',
+  IS_FALSE = 'is_false',
+}
+
+export const defaultConditionOpConfigs: ConditionOpConfigs = {
+  [ConditionPresetOp.EQ]: {
+    label: 'Equal',
+    abbreviation: '=',
+  },
+  [ConditionPresetOp.NEQ]: {
+    label: 'Not Equal',
+    abbreviation: '≠',
+  },
+  [ConditionPresetOp.GT]: {
+    label: 'Greater Than',
+    abbreviation: '>',
+  },
+  [ConditionPresetOp.GTE]: {
+    label: 'Greater Than or Equal',
+    abbreviation: '>=',
+  },
+  [ConditionPresetOp.LT]: {
+    label: 'Less Than',
+    abbreviation: '<',
+  },
+  [ConditionPresetOp.LTE]: {
+    label: 'Less Than or Equal',
+    abbreviation: '<=',
+  },
+  [ConditionPresetOp.IN]: {
+    label: 'In',
+    abbreviation: '∈',
+  },
+  [ConditionPresetOp.NIN]: {
+    label: 'Not In',
+    abbreviation: '∉',
+  },
+  [ConditionPresetOp.CONTAINS]: {
+    label: 'Contains',
+    abbreviation: '⊇',
+  },
+  [ConditionPresetOp.NOT_CONTAINS]: {
+    label: 'Not Contains',
+    abbreviation: '⊉',
+  },
+  [ConditionPresetOp.IS_EMPTY]: {
+    label: 'Is Empty',
+    abbreviation: '=',
+    rightDisplay: 'Empty',
+  },
+  [ConditionPresetOp.IS_NOT_EMPTY]: {
+    label: 'Is Not Empty',
+    abbreviation: '≠',
+    rightDisplay: 'Empty',
+  },
+  [ConditionPresetOp.IS_TRUE]: {
+    label: 'Is True',
+    abbreviation: '=',
+    rightDisplay: 'True',
+  },
+  [ConditionPresetOp.IS_FALSE]: {
+    label: 'Is False',
+    abbreviation: '=',
+    rightDisplay: 'False',
+  },
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type IJsonSchema } from '@flowgram.ai/json-schema';
+
+export interface ConditionOpConfig {
+  label: string;
+  abbreviation: string;
+  // When right is not a value, display this text
+  rightDisplay?: string;
+}
+
+export type OpKey = string;
+
+export type ConditionOpConfigs = Record<OpKey, ConditionOpConfig>;
+
+export type IConditionRule = Record<OpKey, string | IJsonSchema | null>;
+export type IConditionRuleFactory = (
+  schema?: IJsonSchema
+) => Record<OpKey, string | IJsonSchema | null>;

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

@@ -5,17 +5,17 @@
 
 import React, { useMemo } from 'react';
 
-import { I18n } from '@flowgram.ai/editor';
-import { Input } from '@douyinfe/semi-ui';
+import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import { I18n, useScopeAvailable } from '@flowgram.ai/editor';
+import { Button, Input, Select } from '@douyinfe/semi-ui';
+import { IconChevronDownStroked } from '@douyinfe/semi-icons';
 
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { IConditionRule, ConditionOpConfigs, useCondition } from '@/components/condition-context';
 
-import { ConditionRowValueType, IRules, OpConfigs } from './types';
+import { ConditionRowValueType } 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;
@@ -23,8 +23,8 @@ interface PropTypes {
   style?: React.CSSProperties;
   readonly?: boolean;
   ruleConfig?: {
-    ops?: OpConfigs;
-    rules?: IRules;
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
   };
 }
 
@@ -41,19 +41,44 @@ export function ConditionRow({
   ruleConfig = defaultRuleConfig,
 }: PropTypes) {
   const { left, operator, right } = value || {};
-  const { rule } = useRule(left, ruleConfig.rules);
-  const { renderOpSelect, opConfig } = useOp({
-    rule,
-    op: operator,
-    onChange: (v) => onChange({ ...value, operator: v }),
-    readonly,
-    userOps: ruleConfig.ops,
+
+  const available = useScopeAvailable();
+
+  const variable = useMemo(() => {
+    if (!left) return undefined;
+    return available.getByKeyPath(left.content);
+  }, [available, left]);
+
+  const leftSchema = useMemo(() => {
+    if (!variable) return undefined;
+    return JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+  }, [variable?.type?.hash]);
+
+  const { rule, opConfig, opOptionList, targetSchema } = useCondition({
+    leftSchema,
+    operator,
   });
 
-  const targetSchema = useMemo(() => {
-    const targetType: string | null = rule?.[operator || ''] || null;
-    return targetType ? { type: targetType, extra: { weak: true } } : null;
-  }, [rule, opConfig]);
+  const renderOpSelect = () => (
+    <Select
+      style={{ height: 22 }}
+      disabled={readonly}
+      size="small"
+      value={operator}
+      optionList={opOptionList}
+      onChange={(v) => {
+        onChange({
+          ...value,
+          operator: v as string,
+        });
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
 
   return (
     <UIContainer style={style}>
@@ -97,7 +122,4 @@ export function ConditionRow({
   );
 }
 
-ConditionRow.defaultRules = defaultRules;
-ConditionRow.defaultOpConfigs = defaultOpConfigs;
-
 export { type ConditionRowValueType };

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

@@ -3,37 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue } from '@/typings';
-
-export enum Op {
-  EQ = 'eq',
-  NEQ = 'neq',
-  GT = 'gt',
-  GTE = 'gte',
-  LT = 'lt',
-  LTE = 'lte',
-  IN = 'in',
-  NIN = 'nin',
-  CONTAINS = 'contains',
-  NOT_CONTAINS = 'not_contains',
-  IS_EMPTY = 'is_empty',
-  IS_NOT_EMPTY = 'is_not_empty',
-  IS_TRUE = 'is_true',
-  IS_FALSE = 'is_false',
-}
-
-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>;
+import { IFlowConstantRefValue, IFlowRefValue } from '@/shared';
 
 export interface ConditionRowValueType {
   left?: IFlowRefValue;

package/src/components/constant-input/index.tsx

@@ -12,7 +12,7 @@ import { useTypeManager } from '@/plugins';
 
 import { PropsType, Strategy as ConstantInputStrategy } from './types';
 
-export { ConstantInputStrategy };
+export { type ConstantInputStrategy };
 
 export function ConstantInput(props: PropsType) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;