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

package/src/plugins/index.ts

@@ -3,5 +3,14 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './json-schema-preset';
-export * from './disable-declaration-plugin';
+export { createDisableDeclarationPlugin } from './disable-declaration-plugin';
+export {
+  JsonSchemaTypePresetProvider,
+  JsonSchemaUtils,
+  createTypePresetPlugin,
+  type ConstantRendererProps,
+  type IJsonSchema,
+  type JsonSchemaBasicType,
+  type JsonSchemaTypeRegistry,
+  useTypeManager,
+} from './json-schema-preset';

package/src/plugins/json-schema-preset/create-type-preset-plugin.tsx

@@ -10,8 +10,10 @@ import {
 } from '@flowgram.ai/json-schema';
 import { definePluginCreator } from '@flowgram.ai/editor';
 
-import { jsonSchemaTypePreset } from './type-definition';
-import { JsonSchemaTypeRegistry } from './manager';
+import { JsonSchemaTypeRegistry } from './types';
+import { initRegistries, jsonSchemaTypePreset } from './type-definition';
+
+initRegistries();
 
 export const createTypePresetPlugin = definePluginCreator<{
   types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>[];

package/src/plugins/json-schema-preset/index.tsx

@@ -2,40 +2,24 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-import React from 'react';
 
 import {
-  type IJsonSchema,
-  JsonSchemaUtils,
-  useTypeManager as useOriginTypeManager,
-  TypePresetProvider as OriginTypePresetProvider,
-  JsonSchemaTypeManager,
   type JsonSchemaBasicType,
+  JsonSchemaUtils,
+  type IJsonSchema,
 } from '@flowgram.ai/json-schema';
 
-import { jsonSchemaTypePreset } from './type-definition';
-import { type JsonSchemaTypeRegistry, type ConstantRendererProps } from './manager';
+import { type ConstantRendererProps, type JsonSchemaTypeRegistry } from './types';
+import { useTypeManager, JsonSchemaTypePresetProvider } from './react';
 import { createTypePresetPlugin } from './create-type-preset-plugin';
 
-const useTypeManager = () =>
-  useOriginTypeManager() as JsonSchemaTypeManager<IJsonSchema, JsonSchemaTypeRegistry>;
-
-const JsonSchemaTypePresetProvider = ({
-  types = [],
-  children,
-}: React.PropsWithChildren<{ types: JsonSchemaTypeRegistry[] }>) => (
-  <OriginTypePresetProvider types={[...jsonSchemaTypePreset, ...types]}>
-    {children}
-  </OriginTypePresetProvider>
-);
-
 export {
   createTypePresetPlugin,
   useTypeManager,
   JsonSchemaTypePresetProvider,
-  IJsonSchema,
   JsonSchemaUtils,
-  JsonSchemaTypeRegistry,
-  ConstantRendererProps,
-  JsonSchemaBasicType,
+  type IJsonSchema,
+  type JsonSchemaTypeRegistry,
+  type ConstantRendererProps,
+  type JsonSchemaBasicType,
 };

package/src/plugins/json-schema-preset/react.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import {
+  type IJsonSchema,
+  useTypeManager as useOriginTypeManager,
+  TypePresetProvider as OriginTypePresetProvider,
+  JsonSchemaTypeManager,
+} from '@flowgram.ai/json-schema';
+
+import { type JsonSchemaTypeRegistry } from './types';
+import { initRegistries, jsonSchemaTypePreset } from './type-definition';
+
+// If you want to use new type Manager, init registries
+initRegistries();
+
+export const useTypeManager = () =>
+  useOriginTypeManager() as JsonSchemaTypeManager<IJsonSchema, JsonSchemaTypeRegistry>;
+
+export const JsonSchemaTypePresetProvider = ({
+  types = [],
+  children,
+}: React.PropsWithChildren<{ types: JsonSchemaTypeRegistry[] }>) => (
+  <OriginTypePresetProvider types={[...jsonSchemaTypePreset, ...types]}>
+    {children}
+  </OriginTypePresetProvider>
+);

package/src/plugins/json-schema-preset/type-definition/array.tsx

@@ -8,19 +8,28 @@ import React from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
 
-import { CodeEditorMini } from '@/components/code-editor-mini';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+import { JsonCodeEditor } from '@/components/code-editor';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'array',
   ConstantRenderer: (props) => (
-    <CodeEditorMini
+    <JsonCodeEditor
+      mini
       value={props.value}
-      languageId="json"
       onChange={(v) => props.onChange?.(v)}
       placeholder={I18n.t('Please Input Array')}
       readonly={props.readonly}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+    [ConditionPresetOp.CONTAINS]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.NOT_CONTAINS]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.EQ]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.NEQ]: { type: 'array', extra: { weak: true } },
+  },
 };

package/src/plugins/json-schema-preset/type-definition/boolean.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { Select } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const booleanRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'boolean',
@@ -30,4 +32,18 @@ export const booleanRegistry: Partial<JsonSchemaTypeRegistry> = {
       />
     );
   },
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'boolean' },
+    [ConditionPresetOp.NEQ]: { type: 'boolean' },
+    [ConditionPresetOp.IS_TRUE]: null,
+    [ConditionPresetOp.IS_FALSE]: null,
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      items: { type: 'boolean' },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      items: { type: 'boolean' },
+    },
+  },
 };

package/src/plugins/json-schema-preset/type-definition/date-time.tsx

@@ -6,20 +6,39 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { format } from 'date-fns';
+import { type DatePickerProps } from '@douyinfe/semi-ui/lib/es/datePicker';
 import { DatePicker } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const dateTimeRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'date-time',
-  ConstantRenderer: (props) => (
+  ConstantRenderer: (props: DatePickerProps & { readonly?: boolean }) => (
     <DatePicker
       size="small"
       type="dateTime"
       density="compact"
+      defaultValue={Date.now()}
       style={{ width: '100%', ...(props.style || {}) }}
       disabled={props.readonly}
       {...props}
+      onChange={(date) => {
+        props.onChange?.(format(date as Date, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"));
+      }}
+      value={props.value}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'date-time' },
+    [ConditionPresetOp.NEQ]: { type: 'date-time' },
+    [ConditionPresetOp.GT]: { type: 'date-time' },
+    [ConditionPresetOp.GTE]: { type: 'date-time' },
+    [ConditionPresetOp.LT]: { type: 'date-time' },
+    [ConditionPresetOp.LTE]: { type: 'date-time' },
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
 };

package/src/plugins/json-schema-preset/type-definition/index.tsx

@@ -8,10 +8,12 @@ import { jsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 import { stringRegistry } from './string';
 import { objectRegistry } from './object';
 import { numberRegistry } from './number';
+import { mapRegistry } from './map';
 import { integerRegistry } from './integer';
 import { dateTimeRegistry } from './date-time';
 import { booleanRegistry } from './boolean';
 import { arrayRegistry } from './array';
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const jsonSchemaTypePreset = [
   stringRegistry,
@@ -20,7 +22,14 @@ export const jsonSchemaTypePreset = [
   integerRegistry,
   booleanRegistry,
   arrayRegistry,
+  mapRegistry,
   dateTimeRegistry,
 ];
 
-jsonSchemaTypePreset.forEach((_type) => jsonSchemaTypeManager.register(_type));
+export const initRegistries = () => {
+  if ((jsonSchemaTypeManager.getTypeByName('string') as JsonSchemaTypeRegistry)?.ConstantRenderer) {
+    return;
+  }
+
+  jsonSchemaTypePreset.forEach((_type) => jsonSchemaTypeManager.register(_type));
+};

package/src/plugins/json-schema-preset/type-definition/integer.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { InputNumber } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const integerRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'integer',
@@ -22,4 +24,20 @@ export const integerRegistry: Partial<JsonSchemaTypeRegistry> = {
       {...props}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'number' },
+    [ConditionPresetOp.NEQ]: { type: 'number' },
+    [ConditionPresetOp.GT]: { type: 'number' },
+    [ConditionPresetOp.GTE]: { type: 'number' },
+    [ConditionPresetOp.LT]: { type: 'number' },
+    [ConditionPresetOp.LTE]: { type: 'number' },
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+  },
 };

package/src/plugins/json-schema-preset/type-definition/map.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+
+import { ConditionPresetOp } from '@/components/condition-context/op';
+import { JsonCodeEditor } from '@/components/code-editor';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const mapRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'map',
+  ConstantRenderer: (props) => (
+    <JsonCodeEditor
+      mini
+      value={props.value}
+      onChange={(v) => props.onChange?.(v)}
+      placeholder={I18n.t('Please Input Map')}
+      readonly={props.readonly}
+    />
+  ),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
+};

package/src/plugins/json-schema-preset/type-definition/number.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { InputNumber } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const numberRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'number',
@@ -22,4 +24,20 @@ export const numberRegistry: Partial<JsonSchemaTypeRegistry> = {
       {...props}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'number' },
+    [ConditionPresetOp.NEQ]: { type: 'number' },
+    [ConditionPresetOp.GT]: { type: 'number' },
+    [ConditionPresetOp.GTE]: { type: 'number' },
+    [ConditionPresetOp.LT]: { type: 'number' },
+    [ConditionPresetOp.LTE]: { type: 'number' },
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+  },
 };

package/src/plugins/json-schema-preset/type-definition/object.tsx

@@ -8,19 +8,24 @@ import React from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
 
-import { CodeEditorMini } from '@/components/code-editor-mini';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+import { JsonCodeEditor } from '@/components/code-editor';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const objectRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'object',
   ConstantRenderer: (props) => (
-    <CodeEditorMini
+    <JsonCodeEditor
+      mini
       value={props.value}
       onChange={(v) => props.onChange?.(v)}
-      languageId="json"
       placeholder={I18n.t('Please Input Object')}
       readonly={props.readonly}
     />
   ),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
 };

package/src/plugins/json-schema-preset/type-definition/string.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { Input, TextArea } from '@douyinfe/semi-ui';
 
-import { type JsonSchemaTypeRegistry } from '../manager';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
 
 export const stringRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'string',
@@ -30,4 +32,20 @@ export const stringRegistry: Partial<JsonSchemaTypeRegistry> = {
         {...props}
       />
     ),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'string' },
+    [ConditionPresetOp.NEQ]: { type: 'string' },
+    [ConditionPresetOp.CONTAINS]: { type: 'string' },
+    [ConditionPresetOp.NOT_CONTAINS]: { type: 'string' },
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      items: { type: 'string' },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      items: { type: 'string' },
+    },
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
 };

package/src/plugins/json-schema-preset/{manager.ts → types.ts}

@@ -5,6 +5,8 @@
 
 import { JsonSchemaTypeRegistry as OriginJsonSchemaTypeRegistry } from '@flowgram.ai/json-schema';
 
+import { IConditionRule, IConditionRuleFactory } from '@/components/condition-context/types';
+
 export interface ConstantRendererProps<Value = any> {
   value?: Value;
   onChange?: (value: Value) => void;
@@ -16,4 +18,9 @@ export interface JsonSchemaTypeRegistry<Value = any> extends OriginJsonSchemaTyp
    * Render Constant Input
    */
   ConstantRenderer: React.FC<ConstantRendererProps<Value>>;
+
+  /**
+   * Condition Rules
+   */
+  conditionRule?: IConditionRule | IConditionRuleFactory;
 }

package/src/shared/flow-value/index.ts

@@ -3,4 +3,14 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './utils';
+export { FlowValueUtils } from './utils';
+export {
+  type IFlowValueExtra,
+  type FlowValueType,
+  type IFlowValue,
+  type IFlowConstantValue,
+  type IFlowRefValue,
+  type IFlowExpressionValue,
+  type IFlowTemplateValue,
+  type IFlowConstantRefValue,
+} from './types';

package/src/shared/flow-value/utils.ts

@@ -15,8 +15,7 @@ import {
   IFlowValue,
   IFlowConstantRefValue,
   FlowValueType,
-} from '@/typings';
-
+} from './types';
 import { constantSchema, refSchema, expressionSchema, templateSchema } from './schema';
 
 export namespace FlowValueUtils {
@@ -71,42 +70,55 @@ export namespace FlowValueUtils {
   export function* traverse(
     value: any,
     options: {
-      includeTypes?: FlowValueType[];
+      includeTypes: FlowValueType[];
       path?: string;
+      pathArr?: string[];
     }
-  ): Generator<{ value: IFlowValue; path: string }> {
-    const { includeTypes = ['ref', 'template'], path = '' } = options;
+  ): Generator<{ value: IFlowValue; path: string; pathArr: string[] }> {
+    const {
+      includeTypes = ['ref', 'template', 'expression', 'constant'],
+      path = '',
+      pathArr = [],
+    } = options || {};
 
     if (isPlainObject(value)) {
       if (isRef(value) && includeTypes.includes('ref')) {
-        yield { value, path };
+        yield { value, path, pathArr };
         return;
       }
 
       if (isTemplate(value) && includeTypes.includes('template')) {
-        yield { value, path };
+        yield { value, path, pathArr };
         return;
       }
 
       if (isExpression(value) && includeTypes.includes('expression')) {
-        yield { value, path };
+        yield { value, path, pathArr };
         return;
       }
 
       if (isConstant(value) && includeTypes.includes('constant')) {
-        yield { value, path };
+        yield { value, path, pathArr };
         return;
       }
 
       for (const [_key, _value] of Object.entries(value)) {
-        yield* traverse(_value, { ...options, path: `${path}.${_key}` });
+        yield* traverse(_value, {
+          ...options,
+          path: path ? `${path}.${_key}` : _key,
+          pathArr: [...pathArr, _key],
+        });
       }
       return;
     }
 
     if (isArray(value)) {
       for (const [_idx, _value] of value.entries()) {
-        yield* traverse(_value, { ...options, path: `${path}[${_idx}]` });
+        yield* traverse(_value, {
+          ...options,
+          path: path ? `${path}[${_idx}]` : `[${_idx}]`,
+          pathArr: [...pathArr, `[${_idx}]`],
+        });
       }
       return;
     }

package/src/shared/index.ts

@@ -3,8 +3,29 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './format-legacy-refs';
-export * from './inject-material';
-export * from './flow-value';
-export * from './polyfill-create-root';
-export * from './lazy-suspense';
+export {
+  FlowValueUtils,
+  type FlowValueType,
+  type IFlowConstantRefValue,
+  type IFlowConstantValue,
+  type IFlowExpressionValue,
+  type IFlowRefValue,
+  type IFlowTemplateValue,
+  type IFlowValue,
+  type IFlowValueExtra,
+} from './flow-value';
+export {
+  formatLegacyRefOnInit,
+  formatLegacyRefOnSubmit,
+  formatLegacyRefToNewRef,
+  formatNewRefToLegacyRef,
+  isLegacyFlowRefValueSchema,
+  isNewFlowRefValueSchema,
+} from './format-legacy-refs';
+export { createInjectMaterial } from './inject-material';
+export { lazySuspense, withSuspense } from './lazy-suspense';
+export {
+  polyfillCreateRoot,
+  unstableSetCreateRoot,
+  type IPolyfillRoot,
+} from './polyfill-create-root';

package/src/shared/inject-material/index.tsx

@@ -11,6 +11,8 @@ import {
   usePlaygroundContainer,
 } from '@flowgram.ai/editor';
 
+type WithRenderKey<T> = T & { renderKey?: string };
+
 /**
  * Creates a material component wrapper with dependency injection support
  *
@@ -48,12 +50,15 @@ import {
  * @returns Wrapper component with dependency injection support
  */
 export function createInjectMaterial<Props>(
-  Component: React.FC<Props> & { renderKey?: string },
+  Component: WithRenderKey<React.FC<Props> | React.ExoticComponent<Props>>,
   params?: {
     renderKey?: string;
   }
-): React.FC<Props> {
-  const InjectComponent: React.FC<Props> = (props) => {
+): WithRenderKey<React.FC<Props>> {
+  // Determine render key: prioritize param specified, then component renderKey, finally component name
+  const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
+
+  const InjectComponent: WithRenderKey<React.FC<Props>> = (props) => {
     const container = usePlaygroundContainer();
 
     // Check if renderer registry is bound in container
@@ -65,9 +70,6 @@ export function createInjectMaterial<Props>(
     // Get renderer registry instance
     const rendererRegistry = container.get(FlowRendererRegistry);
 
-    // Determine render key: prioritize param specified, then component renderKey, finally component name
-    const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
-
     // Get corresponding renderer from registry
     const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
 
@@ -83,5 +85,7 @@ export function createInjectMaterial<Props>(
     });
   };
 
+  InjectComponent.renderKey = renderKey;
+
   return InjectComponent;
 }

package/src/validate/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { validateFlowValue } from './validate-flow-value';

package/src/validate/validate-flow-value/index.tsx

@@ -6,8 +6,7 @@
 import { isNil } from 'lodash-es';
 import { FeedbackLevel, FlowNodeEntity, getNodeScope } from '@flowgram.ai/editor';
 
-import { IFlowValue } from '@/typings';
-import { FlowValueUtils } from '@/shared';
+import { type IFlowValue, FlowValueUtils } from '@/shared';
 
 interface Context {
   node: FlowNodeEntity;