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

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

@@ -3,59 +3,60 @@
  * 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: '#F7F7FC',
-  // syntax
-  comment: '#000A298A',
-  key: '#00818C',
-  string: '#D1009D',
-  number: '#C74200',
-  boolean: '#2B57D9',
-  null: '#2B57D9',
-  separator: '#0F1529D1',
+  background: '#FFFFFF',
+  comment: '#6B7280',
+  key: '#2563EB',
+  variable: '#DC2626',
+  string: '#059669',
+  number: '#EA580C',
+  boolean: '#7C3AED',
+  null: '#7C3AED',
+  separator: '#374151',
 };
 
 export const lightTheme: Extension = createTheme({
   variant: 'light',
   settings: {
-    background: '#fff',
-    foreground: '#000',
-    caret: '#000',
-    selection: '#d9d9d9',
-    gutterBackground: '#f0f0f0',
-    gutterForeground: '#666',
+    background: '#FFFFFF',
+    foreground: '#1F2937',
+    caret: '#2563EB',
+    selection: '#E5E7EB',
+    gutterBackground: '#F9FAFB',
+    gutterForeground: '#6B7280',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#e1e1e180',
-    bracketColors: ['#FFD700', '#DD99FF', '#78B0FF'],
+    lineHighlight: '#F3F4F680',
+    bracketColors: ['#F59E0B', '#8B5CF6', '#06B6D4'],
     tooltip: {
-      backgroundColor: '#f0f0f0',
-      color: '#000',
-      border: '1px solid #ccc',
+      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)',
     },
     link: {
-      color: '#007bff',
+      color: '#2563EB',
     },
     completionItemHover: {
-      backgroundColor: '#f0f0f0',
+      backgroundColor: '#F3F4F6',
     },
     completionItemSelected: {
-      backgroundColor: '#e0e0e0',
+      backgroundColor: '#E5E7EB',
     },
     completionItemIcon: {
-      color: '#333',
+      color: '#4B5563',
     },
     completionItemLabel: {
-      color: '#333',
+      color: '#1F2937',
     },
     completionItemInfo: {
-      color: '#333',
+      color: '#4B5563',
     },
     completionItemDetail: {
-      color: '#666',
+      color: '#6B7280',
     },
   },
   styles: [
@@ -68,6 +69,11 @@ export const lightTheme: Extension = createTheme({
       tag: [t.propertyName],
       color: colors.key,
     },
+    {
+      tag: [t.variableName],
+      color: colors.variable,
+    },
+
     {
       tag: [t.string],
       color: colors.string,
@@ -92,28 +98,46 @@ export const lightTheme: Extension = createTheme({
     // markdown
     {
       tag: [t.heading],
-      color: '#3e76ef',
+      color: '#2563EB',
     },
     {
       tag: [t.processingInstruction],
-      color: '#3e76ef',
+      color: '#2563EB',
+    },
+
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.modifier],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.controlKeyword],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: '#9333EA',
     },
 
     // shell
     // curl
     {
       tag: [t.standard(t.variableName)],
-      color: '#00804A',
+      color: '#059669',
     },
     // -X
     {
       tag: [t.attributeName],
-      color: '#C74200',
+      color: '#EA580C',
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t.special(t.string)],
-      color: '#2B57D9',
+      color: '#2563EB',
     },
   ],
 });

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/constants.ts

@@ -60,6 +60,14 @@ export const defaultRules: IRules = {
     [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 = {

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

@@ -8,7 +8,7 @@ import { useMemo } from 'react';
 import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 import { IRules } from '../types';
 import { defaultRules } from '../constants';

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/condition-row/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowRefValue } from '@/shared';
 
 export enum Op {
   EQ = 'eq',

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;

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 '@/shared';
+
+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/display-flow-value/index.tsx

@@ -8,7 +8,8 @@ import React, { useMemo } from 'react';
 import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowValue } from '@/typings';
+import { IFlowValue } from '@/shared';
+import { FlowValueUtils } from '@/shared';
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
@@ -31,18 +32,7 @@ export function DisplayFlowValue({ value, title, showIconInTree }: PropsType) {
       return { type: 'string' };
     }
     if (value?.type === 'constant') {
-      if (value?.schema) {
-        return value?.schema;
-      }
-      if (typeof value?.content === 'string') {
-        return { type: 'string' };
-      }
-      if (typeof value?.content === 'number') {
-        return { type: 'number' };
-      }
-      if (typeof value?.content === 'boolean') {
-        return { type: 'boolean' };
-      }
+      return FlowValueUtils.inferConstantJsonSchema(value);
     }
 
     return { type: 'unknown' };

package/src/components/display-inputs-values/index.tsx

@@ -3,15 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { IFlowValue } from '@/typings';
+import { isPlainObject } from 'lodash-es';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
 import { DisplayInputsWrapper } from './styles';
+import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: Record<string, IFlowValue | undefined>;
+  value?: any;
   showIconInTree?: boolean;
 }
 
@@ -20,9 +24,43 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
 
   return (
     <DisplayInputsWrapper>
-      {childEntries.map(([key, value]) => (
-        <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
-      ))}
+      {childEntries.map(([key, value]) => {
+        if (FlowValueUtils.isFlowValue(value)) {
+          return (
+            <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
+          );
+        }
+
+        if (isPlainObject(value)) {
+          return (
+            <DisplayInputsValueAllInTag
+              key={key}
+              title={key}
+              value={value}
+              showIconInTree={showIconInTree}
+            />
+          );
+        }
+
+        return null;
+      })}
     </DisplayInputsWrapper>
   );
 }
+
+export function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree,
+}: PropsType & {
+  title: string;
+}) {
+  const available = useScopeAvailable();
+
+  const schema = useMemo(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+
+  return <DisplaySchemaTag title={title} value={schema} showIconInTree={showIconInTree} />;
+}

package/src/components/dynamic-value-input/hooks.ts

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowConstantRefValue } from '@/typings/flow-value';
+import { IFlowConstantRefValue } from '@/shared';
 
 export function useRefVariable(value?: IFlowConstantRefValue) {
   const available = useScopeAvailable();
@@ -33,9 +33,30 @@ export function useSelectSchema(
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
 
+  const changeVersion = useRef(0);
+  const effectVersion = useRef(0);
+
   const [selectSchema, setSelectSchema] = useState(defaultSelectSchema);
 
-  return [selectSchema, setSelectSchema] as const;
+  useEffect(() => {
+    effectVersion.current += 1;
+    if (changeVersion.current === effectVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+
+    if (value?.type === 'constant' && value?.schema) {
+      setSelectSchema(value?.schema);
+      return;
+    }
+  }, [value]);
+
+  const setSelectSchemaWithVersionUpdate = (schema: IJsonSchema) => {
+    setSelectSchema(schema);
+    changeVersion.current += 1;
+  };
+
+  return [selectSchema, setSelectSchemaWithVersionUpdate] as const;
 }
 
 export function useIncludeSchema(schemaFromProps?: IJsonSchema) {
@@ -46,7 +67,7 @@ export function useIncludeSchema(schemaFromProps?: IJsonSchema) {
     if (schemaFromProps?.type === 'number') {
       return [schemaFromProps, { type: 'integer' }];
     }
-    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
+    return { ...schemaFromProps, extra: { weak: true, ...schemaFromProps?.extra } };
   }, [schemaFromProps]);
 
   return includeSchema;