@flowgram.ai/form-materials 0.1.0-alpha.10

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

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IRules, Op, OpConfigs } from './types';
+
+export const rules: IRules = {
+  string: {
+    [Op.EQ]: 'string',
+    [Op.NEQ]: 'string',
+    [Op.CONTAINS]: 'string',
+    [Op.NOT_CONTAINS]: 'string',
+    [Op.IN]: 'array',
+    [Op.NIN]: 'array',
+    [Op.IS_EMPTY]: 'string',
+    [Op.IS_NOT_EMPTY]: 'string',
+  },
+  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',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  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',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  boolean: {
+    [Op.EQ]: 'boolean',
+    [Op.NEQ]: 'boolean',
+    [Op.IS_TRUE]: null,
+    [Op.IS_FALSE]: null,
+    [Op.IN]: 'array',
+    [Op.NIN]: 'array',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  object: {
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  array: {
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  map: {
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+};
+
+export const opConfigs: 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

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { Button, Select } from '@douyinfe/semi-ui';
+import { IconChevronDownStroked } from '@douyinfe/semi-icons';
+
+import { IRule, Op } from '../types';
+import { opConfigs } from '../constants';
+
+interface HookParams {
+  rule?: IRule;
+  op?: Op;
+  onChange: (op: Op) => void;
+}
+
+export function useOp({ rule, op, onChange }: HookParams) {
+  const options = useMemo(
+    () =>
+      Object.keys(rule || {}).map((_op) => ({
+        ...(opConfigs[_op as Op] || {}),
+        value: _op,
+      })),
+    [rule]
+  );
+
+  const opConfig = useMemo(() => opConfigs[op as Op], [op]);
+
+  const renderOpSelect = () => (
+    <Select
+      style={{ height: 22 }}
+      size="small"
+      value={op}
+      optionList={options}
+      onChange={(v) => {
+        onChange(v as Op);
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
+
+  return { renderOpSelect, opConfig };
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo } from 'react';
+
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { rules } from '../constants';
+import { JsonSchemaUtils } from '../../../utils';
+import { IFlowRefValue, JsonSchemaBasicType } from '../../../typings';
+
+export function useRule(left?: IFlowRefValue) {
+  const available = useScopeAvailable();
+
+  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]);
+
+  return { rule };
+}

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

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { Input } from '@douyinfe/semi-ui';
+
+import { ConditionRowValueType, Op } from './types';
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
+import { useRule } from './hooks/useRule';
+import { useOp } from './hooks/useOp';
+import { VariableSelector } from '../variable-selector';
+import { DynamicValueInput } from '../dynamic-value-input';
+import { JsonSchemaBasicType } from '../../typings';
+
+interface PropTypes {
+  value?: ConditionRowValueType;
+  onChange: (value?: ConditionRowValueType) => void;
+  style?: React.CSSProperties;
+  readonly?: boolean;
+}
+
+export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
+  const { left, operator, right } = value || {};
+  const { rule } = useRule(left);
+  const { renderOpSelect, opConfig } = useOp({
+    rule,
+    op: operator,
+    onChange: (v) => onChange({ ...value, operator: v }),
+  });
+
+  const targetSchema = useMemo(() => {
+    const targetType: JsonSchemaBasicType | null = rule?.[operator as Op] || null;
+    return targetType ? { type: targetType, extra: { weak: true } } : null;
+  }, [rule, opConfig]);
+
+  return (
+    <UIContainer style={style}>
+      <UIOperator>{renderOpSelect()}</UIOperator>
+      <UIValues>
+        <UILeft>
+          <VariableSelector
+            readonly={readonly}
+            style={{ width: '100%' }}
+            value={left?.content}
+            onChange={(v) =>
+              onChange({
+                ...value,
+                left: {
+                  type: 'ref',
+                  content: v,
+                },
+              })
+            }
+          />
+        </UILeft>
+        <UIRight>
+          {targetSchema ? (
+            <DynamicValueInput
+              readonly={readonly || !rule}
+              value={right}
+              schema={targetSchema}
+              onChange={(v) => onChange({ ...value, right: v })}
+            />
+          ) : (
+            <Input
+              size="small"
+              disabled
+              style={{ pointerEvents: 'none' }}
+              value={opConfig?.rightDisplay || 'Empty'}
+            />
+          )}
+        </UIRight>
+      </UIValues>
+    </UIContainer>
+  );
+}
+
+export { type ConditionRowValueType };

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+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;
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowConstantRefValue, IFlowRefValue, JsonSchemaBasicType } 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<Op, OpConfig>;
+
+export type IRule = Partial<Record<Op, JsonSchemaBasicType | null>>;
+
+export type IRules = Record<JsonSchemaBasicType, IRule>;
+
+export interface ConditionRowValueType {
+  left?: IFlowRefValue;
+  operator?: Op;
+  right?: IFlowConstantRefValue;
+}

package/src/components/constant-input/config.json

@@ -0,0 +1,6 @@
+
+{
+  "name": "constant-input",
+  "depMaterials": ["typings/json-schema"],
+  "depPackages": ["@douyinfe/semi-ui"]
+}

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

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
+
+import { Input, InputNumber, Select } from '@douyinfe/semi-ui';
+
+import { PropsType, Strategy } from './types';
+
+const defaultStrategies: Strategy[] = [
+  {
+    hit: (schema) => schema?.type === 'string',
+    Renderer: (props) => (
+      <Input placeholder="Please Input String" size="small" disabled={props.readonly} {...props} />
+    ),
+  },
+  {
+    hit: (schema) => schema?.type === 'number',
+    Renderer: (props) => (
+      <InputNumber
+        placeholder="Please Input Number"
+        size="small"
+        disabled={props.readonly}
+        hideButtons
+        {...props}
+      />
+    ),
+  },
+  {
+    hit: (schema) => schema?.type === 'integer',
+    Renderer: (props) => (
+      <InputNumber
+        placeholder="Please Input Integer"
+        size="small"
+        disabled={props.readonly}
+        hideButtons
+        precision={0}
+        {...props}
+      />
+    ),
+  },
+  {
+    hit: (schema) => schema?.type === 'boolean',
+    Renderer: (props) => {
+      const { value, onChange, ...rest } = props;
+      return (
+        <Select
+          placeholder="Please Select Boolean"
+          size="small"
+          disabled={props.readonly}
+          optionList={[
+            { label: 'True', value: 1 },
+            { label: 'False', value: 0 },
+          ]}
+          value={value ? 1 : 0}
+          onChange={(value) => onChange?.(!!value)}
+          {...rest}
+        />
+      );
+    },
+  },
+];
+
+export function ConstantInput(props: PropsType) {
+  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+
+  const strategies = useMemo(
+    () => [...defaultStrategies, ...(extraStrategies || [])],
+    [extraStrategies]
+  );
+
+  const Renderer = useMemo(() => {
+    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
+
+    return strategy?.Renderer;
+  }, [strategies, schema]);
+
+  if (!Renderer) {
+    return <Input size="small" disabled placeholder="Unsupported type" />;
+  }
+
+  return <Renderer value={value} onChange={onChange} readonly={readonly} {...rest} />;
+}

package/src/components/constant-input/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '../../typings';
+
+export interface Strategy<Value = any> {
+  hit: (schema: IJsonSchema) => boolean;
+  Renderer: React.FC<RendererProps<Value>>;
+}
+
+export interface RendererProps<Value = any> {
+  value?: Value;
+  onChange?: (value: Value) => void;
+  readonly?: boolean;
+}
+
+export interface PropsType extends RendererProps {
+  schema: IJsonSchema;
+  strategies?: Strategy[];
+  [key: string]: any;
+}

package/src/components/dynamic-value-input/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "dynamic-value-input",
+  "depMaterials": ["flow-value", "constant-input", "variable-selector"],
+  "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons", "styled-components"]
+}

package/src/components/dynamic-value-input/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { IconButton } from '@douyinfe/semi-ui';
+import { IconSetting } from '@douyinfe/semi-icons';
+
+import { Strategy } from '../constant-input/types';
+import { ConstantInput } from '../constant-input';
+import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { UIContainer, UIMain, UITrigger } from './styles';
+import { VariableSelector } from '../variable-selector';
+import { IJsonSchema } from '../../typings';
+
+interface PropsType {
+  value?: IFlowConstantRefValue;
+  onChange: (value?: IFlowConstantRefValue) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: React.CSSProperties;
+  schema?: IJsonSchema;
+  constantProps?: {
+    strategies?: Strategy[];
+    schema?: IJsonSchema; // set schema of constant input only
+    [key: string]: any;
+  };
+}
+
+export function DynamicValueInput({
+  value,
+  onChange,
+  readonly,
+  style,
+  schema,
+  constantProps,
+}: PropsType) {
+  // When is number type, include integer as well
+  const includeSchema = useMemo(() => {
+    if (schema?.type === 'number') {
+      return [schema, { type: 'integer' }];
+    }
+    return schema;
+  }, [schema]);
+
+  const renderMain = () => {
+    if (value?.type === 'ref') {
+      // Display Variable Or Delete
+      return (
+        <VariableSelector
+          style={{ width: '100%' }}
+          value={value?.content}
+          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+          includeSchema={includeSchema}
+          readonly={readonly}
+        />
+      );
+    }
+
+    return (
+      <ConstantInput
+        value={value?.content}
+        onChange={(_v) => onChange({ type: 'constant', content: _v })}
+        schema={schema || { type: 'string' }}
+        readonly={readonly}
+        {...constantProps}
+      />
+    );
+  };
+
+  const renderTrigger = () => (
+    <VariableSelector
+      style={{ width: '100%' }}
+      value={value?.type === 'ref' ? value?.content : undefined}
+      onChange={(_v) => onChange({ type: 'ref', content: _v })}
+      includeSchema={includeSchema}
+      readonly={readonly}
+      triggerRender={() => (
+        <IconButton disabled={readonly} size="small" icon={<IconSetting size="small" />} />
+      )}
+    />
+  );
+
+  return (
+    <UIContainer style={style}>
+      <UIMain>{renderMain()}</UIMain>
+      <UITrigger>{renderTrigger()}</UITrigger>
+    </UIContainer>
+  );
+}

package/src/components/dynamic-value-input/styles.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const UIContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export const UIMain = styled.div`
+  flex-grow: 1;
+  overflow: hidden;
+  min-width: 0;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;
+
+export const UITrigger = styled.div``;

package/src/components/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './variable-selector';
+export * from './type-selector';
+export * from './json-schema-editor';
+export * from './batch-variable-selector';
+export * from './constant-input';
+export * from './dynamic-value-input';
+export * from './condition-row';
+export * from './batch-outputs';
+export * from './prompt-editor';
+export * from './prompt-editor-with-variables';
+export * from './prompt-editor-with-inputs';
+export * from './code-editor';
+export * from './json-editor-with-variables';

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

@@ -0,0 +1,13 @@
+{
+  "name": "json-editor-with-variables",
+  "depMaterials": [
+    "variable-selector",
+    "code-editor"
+  ],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
+    "@codemirror/view",
+    "styled-components",
+    "@douyinfe/semi-ui"
+  ]
+}