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

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import z from 'zod';
+
+// Shared extra schema for flow value types
+export const extraSchema = z
+  .object({
+    index: z.number().optional(),
+  })
+  .optional();
+
+export const constantSchema = z.object({
+  type: z.literal('constant'),
+  content: z.any().optional(),
+  schema: z.any().optional(),
+  extra: extraSchema,
+});
+
+export const refSchema = z.object({
+  type: z.literal('ref'),
+  content: z.array(z.string()).optional(),
+  extra: extraSchema,
+});
+
+export const expressionSchema = z.object({
+  type: z.literal('expression'),
+  content: z.string().optional(),
+  extra: extraSchema,
+});
+
+export const templateSchema = z.object({
+  type: z.literal('template'),
+  content: z.string().optional(),
+  extra: extraSchema,
+});

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

@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isArray, isObject, isPlainObject, uniq } from 'lodash-es';
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import { Scope } from '@flowgram.ai/editor';
+
+import {
+  IFlowConstantValue,
+  IFlowRefValue,
+  IFlowExpressionValue,
+  IFlowTemplateValue,
+  IFlowValue,
+  IFlowConstantRefValue,
+  FlowValueType,
+} from '@/typings';
+
+import { constantSchema, refSchema, expressionSchema, templateSchema } from './schema';
+
+export namespace FlowValueUtils {
+  /**
+   * Check if the value is a constant type
+   */
+  export function isConstant(value: any): value is IFlowConstantValue {
+    return constantSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is a reference type
+   */
+  export function isRef(value: any): value is IFlowRefValue {
+    return refSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is an expression type
+   */
+  export function isExpression(value: any): value is IFlowExpressionValue {
+    return expressionSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is a template type
+   */
+  export function isTemplate(value: any): value is IFlowTemplateValue {
+    return templateSchema.safeParse(value).success;
+  }
+
+  /**
+   * Check if the value is either a constant or reference type
+   */
+  export function isConstantOrRef(value: any): value is IFlowConstantRefValue {
+    return isConstant(value) || isRef(value);
+  }
+
+  /**
+   * Check if the value is a valid flow value type
+   */
+  export function isFlowValue(value: any): value is IFlowValue {
+    return isConstant(value) || isRef(value) || isExpression(value) || isTemplate(value);
+  }
+
+  /**
+   * Traverse all flow values in the given value
+   * @param value The value to traverse
+   * @param options The options to traverse
+   * @returns A generator of flow values
+   */
+  export function* traverse(
+    value: any,
+    options: {
+      includeTypes?: FlowValueType[];
+      path?: string;
+    }
+  ): Generator<{ value: IFlowValue; path: string }> {
+    const { includeTypes = ['ref', 'template'], path = '' } = options;
+
+    if (isPlainObject(value)) {
+      if (isRef(value) && includeTypes.includes('ref')) {
+        yield { value, path };
+        return;
+      }
+
+      if (isTemplate(value) && includeTypes.includes('template')) {
+        yield { value, path };
+        return;
+      }
+
+      if (isExpression(value) && includeTypes.includes('expression')) {
+        yield { value, path };
+        return;
+      }
+
+      if (isConstant(value) && includeTypes.includes('constant')) {
+        yield { value, path };
+        return;
+      }
+
+      for (const [_key, _value] of Object.entries(value)) {
+        yield* traverse(_value, { ...options, path: `${path}.${_key}` });
+      }
+      return;
+    }
+
+    if (isArray(value)) {
+      for (const [_idx, _value] of value.entries()) {
+        yield* traverse(_value, { ...options, path: `${path}[${_idx}]` });
+      }
+      return;
+    }
+
+    return;
+  }
+
+  /**
+   * Get all key paths in the template value
+   * @param value The template value
+   * @returns A list of key paths
+   */
+  export function getTemplateKeyPaths(value: IFlowTemplateValue) {
+    // find all keyPath wrapped in {{}}
+    const keyPathReg = /\{\{([^\}\{]+)\}\}/g;
+    return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
+      _keyPath.slice(2, -2).split('.')
+    );
+  }
+
+  /**
+   * Infer the schema of the constant value
+   * @param value
+   * @returns
+   */
+  export function inferConstantJsonSchema(value: IFlowConstantValue): IJsonSchema | undefined {
+    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',
+      };
+    }
+
+    if (isObject(value.content)) {
+      return {
+        type: 'object',
+      };
+    }
+    return undefined;
+  }
+
+  /**
+   * Infer the schema of the flow value
+   * @param values The flow value or object contains flow value
+   * @param scope
+   * @returns
+   */
+  export function inferJsonSchema(values: any, scope: Scope): IJsonSchema | undefined {
+    if (isPlainObject(values)) {
+      if (isConstant(values)) {
+        return inferConstantJsonSchema(values);
+      }
+
+      if (isRef(values)) {
+        const variable = scope.available.getByKeyPath(values?.content);
+        const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : undefined;
+
+        return schema;
+      }
+
+      if (isTemplate(values)) {
+        return { type: 'string' };
+      }
+
+      return {
+        type: 'object',
+        properties: Object.keys(values).reduce((acc, key) => {
+          const schema = inferJsonSchema((values as any)[key], scope);
+          if (schema) {
+            acc[key] = schema;
+          }
+          return acc;
+        }, {} as Record<string, IJsonSchema>),
+      };
+    }
+  }
+}

package/src/shared/format-legacy-refs/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isObject } from 'lodash';
+import { isObject } from 'lodash-es';
 
 interface LegacyFlowRefValueSchema {
   type: 'ref';

package/src/shared/index.ts

@@ -5,3 +5,6 @@
 
 export * from './format-legacy-refs';
 export * from './inject-material';
+export * from './flow-value';
+export * from './polyfill-create-root';
+export * from './lazy-suspense';

package/src/shared/lazy-suspense/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { ComponentType, lazy, Suspense } from 'react';
+
+import { Skeleton } from '@douyinfe/semi-ui';
+
+export function withSuspense<T extends ComponentType<any>>(
+  Component: T,
+  fallback?: React.ReactNode
+): T {
+  const WithSuspenseComponent: T = ((props: any) => (
+    <Suspense fallback={fallback || <Skeleton.Paragraph style={{ width: '100%' }} rows={1} />}>
+      <Component {...props} />
+    </Suspense>
+  )) as any;
+
+  return WithSuspenseComponent;
+}
+
+export function lazySuspense<T extends ComponentType<any>>(
+  params: Parameters<typeof lazy<T>>[0],
+  fallback?: React.ReactNode
+) {
+  return withSuspense(lazy(params), fallback);
+}

package/src/shared/polyfill-create-root/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import * as ReactDOM from 'react-dom';
+
+export interface IPolyfillRoot {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+/**
+ * React 18 polyfill
+ * @param dom
+ * @returns
+ */
+let unstableCreateRoot = (dom: HTMLElement): IPolyfillRoot => ({
+  render(children: JSX.Element) {
+    ReactDOM.render(children, dom);
+  },
+  unmount() {
+    ReactDOM.unmountComponentAtNode(dom);
+  },
+});
+
+export function polyfillCreateRoot(dom: HTMLElement): IPolyfillRoot {
+  return unstableCreateRoot(dom);
+}
+
+export function unstableSetCreateRoot(createRoot: (dom: HTMLElement) => IPolyfillRoot) {
+  unstableCreateRoot = createRoot;
+}

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

@@ -9,9 +9,11 @@ export interface IFlowValueExtra {
   index?: number;
 }
 
+export type FlowValueType = 'constant' | 'ref' | 'expression' | 'template';
+
 export interface IFlowConstantValue {
   type: 'constant';
-  content?: string | number | boolean;
+  content?: any;
   schema?: IJsonSchema;
   extra?: IFlowValueExtra;
 }

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

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isNil, uniq } from 'lodash';
+import { isNil } from 'lodash-es';
 import { FeedbackLevel, FlowNodeEntity, getNodeScope } from '@flowgram.ai/editor';
 
-import { IFlowTemplateValue, IFlowValue } from '@/typings';
+import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 interface Context {
   node: FlowNodeEntity;
@@ -43,7 +44,7 @@ export function validateFlowValue(value: IFlowValue | undefined, ctx: Context) {
   }
 
   if (value?.type === 'template') {
-    const allRefs = getTemplateKeyPaths(value);
+    const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
 
     for (const ref of allRefs) {
       const variable = getNodeScope(node).available.getByKeyPath(ref);
@@ -58,16 +59,3 @@ export function validateFlowValue(value: IFlowValue | undefined, ctx: Context) {
 
   return undefined;
 }
-
-/**
- * get template key paths
- * @param value
- * @returns
- */
-function getTemplateKeyPaths(value: IFlowTemplateValue) {
-  // find all keyPath wrapped in {{}}
-  const keyPathReg = /{{(.*?)}}/g;
-  return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
-    _keyPath.slice(2, -2).split('.')
-  );
-}

package/src/components/json-schema-editor/components/blur-input.tsx

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React, { useEffect, useState } from 'react';
-
-import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
-
-export function BlurInput(props: InputProps) {
-  const [value, setValue] = useState('');
-
-  useEffect(() => {
-    setValue(props.value as string);
-  }, [props.value]);
-
-  return (
-    <Input
-      {...props}
-      value={value}
-      onChange={(value) => {
-        setValue(value);
-      }}
-      onBlur={(e) => props.onChange?.(value, e)}
-    />
-  );
-}

package/src/plugins/disable-declaration-plugin/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "disable-declaration-plugin",
-  "depMaterials": [],
-  "depPackages": []
-}

package/src/plugins/json-schema-preset/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "json-schema-preset",
-  "depMaterials": [
-    "components/code-editor-mini"
-  ],
-  "depPackages": [
-    "@flowgram.ai/json-schema"
-  ]
-}