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

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+import { DatePicker } from '@douyinfe/semi-ui';
+
+import { type JsonSchemaTypeRegistry } from '../manager';
+
+export const dateTimeRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'date-time',
+  ConstantRenderer: (props) => (
+    <DatePicker
+      size="small"
+      type="dateTime"
+      density="compact"
+      style={{ width: '100%', ...(props.style || {}) }}
+      disabled={props.readonly}
+      {...props}
+    />
+  ),
+};

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

@@ -9,6 +9,7 @@ import { stringRegistry } from './string';
 import { objectRegistry } from './object';
 import { numberRegistry } from './number';
 import { integerRegistry } from './integer';
+import { dateTimeRegistry } from './date-time';
 import { booleanRegistry } from './boolean';
 import { arrayRegistry } from './array';
 
@@ -19,6 +20,7 @@ export const jsonSchemaTypePreset = [
   integerRegistry,
   booleanRegistry,
   arrayRegistry,
+  dateTimeRegistry,
 ];
 
 jsonSchemaTypePreset.forEach((_type) => jsonSchemaTypeManager.register(_type));

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

@@ -7,18 +7,27 @@
 import React from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
-import { Input } from '@douyinfe/semi-ui';
+import { Input, TextArea } from '@douyinfe/semi-ui';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
 
 export const stringRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'string',
-  ConstantRenderer: (props) => (
-    <Input
-      placeholder={I18n.t('Please Input String')}
-      size="small"
-      disabled={props.readonly}
-      {...props}
-    />
-  ),
+  ConstantRenderer: (props) =>
+    props?.enableMultiLineStr ? (
+      <TextArea
+        autosize
+        rows={1}
+        placeholder={I18n.t('Please Input String')}
+        disabled={props.readonly}
+        {...props}
+      />
+    ) : (
+      <Input
+        size="small"
+        placeholder={I18n.t('Please Input String')}
+        disabled={props.readonly}
+        {...props}
+      />
+    ),
 };

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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/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/{typings/flow-value/index.ts → shared/flow-value/types.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/shared/flow-value/utils.ts

@@ -0,0 +1,200 @@
+/**
+ * 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 './types';
+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

@@ -3,5 +3,29 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './format-legacy-refs';
-export * from './inject-material';
+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/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/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

@@ -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 '@/shared';
+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/bin/index.ts

@@ -1,91 +0,0 @@
-#!/usr/bin/env -S npx tsx@latest
-
-import inquirer from 'inquirer';
-import { Command } from 'commander';
-import chalk from 'chalk';
-
-import { getProjectInfo, installDependencies, ProjectInfo } from './project.js';
-import { copyMaterial, listAllMaterials, Material } from './materials.js';
-
-const program = new Command();
-
-program
-  .version('1.0.1')
-  .description('Add official materials to your project')
-  .argument('[materialName]', 'Optional material name to skip selection (format: type/name)')
-  .action(async (materialName?: string) => {
-    // materialName can be undefined
-    console.log(chalk.bgGreenBright('Welcome to @flowgram.ai/form-materials CLI!'));
-
-    const projectInfo: ProjectInfo = getProjectInfo();
-
-    console.log(chalk.bold('Project Info:'));
-    console.log(chalk.black(`  - Flowgram Version: ${projectInfo.flowgramVersion}`));
-    console.log(chalk.black(`  - Project Path: ${projectInfo.projectPath}`));
-
-    const materials: Material[] = listAllMaterials();
-
-    let material: Material | undefined; // material can be undefined
-
-    // Check if materialName is provided and exists in materials
-    if (materialName) {
-      const selectedMaterial = materials.find((m) => `${m.type}/${m.name}` === materialName);
-      if (selectedMaterial) {
-        material = selectedMaterial;
-        console.log(chalk.green(`Using material: ${materialName}`));
-      } else {
-        console.log(
-          chalk.yellow(`Material "${materialName}" not found. Please select from the list:`)
-        );
-      }
-    }
-
-    // If material not found or materialName not provided, prompt user to select
-    if (!material) {
-      // User select one component
-      const result = await inquirer.prompt<{
-        material: Material; // Specify type for prompt result
-      }>([
-        {
-          type: 'list',
-          name: 'material',
-          message: 'Select one material to add:',
-          choices: [
-            ...materials.map((_material) => ({
-              name: `${_material.type}/${_material.name}`,
-              value: _material,
-            })),
-          ],
-        },
-      ]);
-      material = result.material;
-    }
-    // Ensure material is defined before proceeding
-    if (!material) {
-      console.error(chalk.red('No material selected. Exiting.'));
-      process.exit(1);
-    }
-
-    // 4. Copy the materials to the project
-    console.log(chalk.bold('The following materials will be added to your project'));
-    console.log(material);
-    let { packagesToInstall } = copyMaterial(material, projectInfo);
-
-    // 4. Install the dependencies
-    packagesToInstall = packagesToInstall.map((_pkg) => {
-      if (
-        _pkg.startsWith(`@flowgram.ai/`) &&
-        projectInfo.flowgramVersion !== 'workspace:*' &&
-        !_pkg.endsWith(`@${projectInfo.flowgramVersion}`)
-      ) {
-        return `${_pkg}@${projectInfo.flowgramVersion}`;
-      }
-      return _pkg;
-    });
-
-    console.log(chalk.bold('These npm dependencies will be added to your project'));
-    console.log(packagesToInstall);
-    installDependencies(packagesToInstall, projectInfo);
-  });
-
-program.parse(process.argv);