@flowgram.ai/form-materials 0.4.13 → 0.4.14

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

@@ -6,28 +6,45 @@
 import { createTheme, tags as t } from '@flowgram.ai/coze-editor/preset-code';
 import { type Extension } from '@codemirror/state';
 
-const colors = {
-  background: '#0D1117',
-  // syntax - 现代化暗色主题配色
-  comment: '#8B949E',
-  key: '#7DD3FC',
-  variable: '#F472B6',
-  string: '#34D399',
-  number: '#FBBF24',
-  boolean: '#A78BFA',
-  null: '#A78BFA',
-  separator: '#E6EDF3',
+export const colors = {
+  background: '#24292e',
+  foreground: '#d1d5da',
+  selection: '#3392FF44',
+  cursor: '#c8e1ff',
+  dropdownBackground: '#24292e',
+  dropdownBorder: '#1b1f23',
+  activeLine: '#4d566022',
+  matchingBracket: '#888892',
+  keyword: '#9197F1',
+  storage: '#f97583',
+  variable: '#ffab70',
+  variableName: '#D9DCFA',
+  parameter: '#e1e4e8',
+  function: '#FFCA66',
+  string: '#FF9878',
+  constant: '#79b8ff',
+  type: '#79b8ff',
+  class: '#b392f0',
+  number: '#2EC7D9',
+  comment: '#568B2A',
+  heading: '#79b8ff',
+  invalid: '#f97583',
+  regexp: '#9ecbff',
+  propertyName: '#9197F1',
+  separator: '#888892',
+  gutters: '#888892',
+  moduleKeyword: '#CC4FD4',
 };
 
 export const darkTheme: Extension = createTheme({
   variant: 'dark',
   settings: {
     background: colors.background,
-    foreground: '#E6EDF3',
-    caret: '#7DD3FC',
-    selection: '#264F7833',
+    foreground: colors.foreground,
+    caret: colors.cursor,
+    selection: colors.selection,
     gutterBackground: colors.background,
-    gutterForeground: '#6E7681',
+    gutterForeground: colors.foreground,
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
     lineHighlight: '#21262D',
@@ -44,7 +61,8 @@ export const darkTheme: Extension = createTheme({
       backgroundColor: '#21262D',
     },
     completionItemSelected: {
-      backgroundColor: '#1F6EEB',
+      backgroundColor: colors.selection,
+      color: colors.foreground,
     },
     completionItemIcon: {
       color: '#8B949E',
@@ -60,79 +78,46 @@ export const darkTheme: Extension = createTheme({
     },
   },
   styles: [
-    // json
+    { tag: t.keyword, color: colors.keyword },
+    { tag: t.variableName, color: colors.variableName },
     {
-      tag: t.comment,
-      color: colors.comment,
+      tag: [t.name, t.deleted, t.character, t.macroName],
+      color: colors.variable,
     },
+    { tag: [t.propertyName], color: colors.propertyName },
     {
-      tag: [t.propertyName],
-      color: colors.key,
-    },
-    {
-      tag: [t.string],
+      tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
       color: colors.string,
     },
     {
-      tag: [t.number],
-      color: colors.number,
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.labelName],
+      color: colors.function,
     },
     {
-      tag: [t.bool],
-      color: colors.boolean,
+      tag: [t.moduleKeyword, t.controlKeyword],
+      color: colors.moduleKeyword,
     },
     {
-      tag: [t.null],
-      color: colors.null,
+      tag: [t.color, t.constant(t.name), t.standard(t.name)],
+      color: colors.constant,
     },
+    { tag: t.definition(t.name), color: colors.variable },
+    { tag: [t.className], color: colors.class },
     {
-      tag: [t.separator],
-      color: colors.separator,
-    },
-
-    // js
-    {
-      tag: [t.definitionKeyword],
-      color: '#C084FC',
-    },
-    {
-      tag: [t.modifier],
-      color: '#C084FC',
-    },
-    {
-      tag: [t.controlKeyword],
-      color: '#C084FC',
-    },
-    {
-      tag: [t.operatorKeyword],
-      color: '#C084FC',
-    },
-
-    // markdown
-    {
-      tag: [t.heading],
-      color: '#7DD3FC',
-    },
-    {
-      tag: [t.processingInstruction],
-      color: '#7DD3FC',
-    },
-
-    // shell
-    // curl
-    {
-      tag: [t.standard(t.variableName)],
-      color: '#34D399',
-    },
-    // -X
-    {
-      tag: [t.attributeName],
-      color: '#FBBF24',
-    },
-    // url in string (includes quotes), e.g. "https://..."
-    {
-      tag: [t.special(t.string)],
-      color: '#7DD3FC',
+      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.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' },
+    { tag: t.separator, color: colors.separator },
   ],
 });

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

@@ -6,45 +6,61 @@
 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/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>;