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

package/dist/types/shared/inject-material/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+/**
+ * Creates a material component wrapper with dependency injection support
+ *
+ * This Higher-Order Component (HOC) implements a dynamic component replacement mechanism
+ * for material components. It automatically checks if a custom renderer is registered
+ * in the editor context, using the injected component if available, otherwise
+ * falling back to the default component.
+ *
+ * @example
+ * ```tsx
+ * // 1.Create an injectable material component
+ * const InjectVariableSelector = createInjectMaterial(VariableSelector)
+ *
+ * // 2. Register custom components in editor
+ * // Configure in use-editor-props.tsx:
+ * const editorProps = {
+ *   materials: {
+ *     components: {
+ *       [VariableSelector.renderKey]: YourCustomVariableSelector
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @description
+ * Data flow explanation:
+ * - Register components to FlowRendererRegistry in use-editor-props
+ * - InjectMaterial reads renderers from FlowRendererRegistry
+ * - If registered renderer exists and type is REACT, use injected component
+ * - If not exists or type mismatch, fallback to default component
+ *
+ * @param Component - Default React component
+ * @param params - Optional parameters
+ * @param params.renderKey - Custom render key name, highest priority
+ * @returns Wrapper component with dependency injection support
+ */
+export declare function createInjectMaterial<Props>(Component: React.FC<Props> & {
+    renderKey?: string;
+}, params?: {
+    renderKey?: string;
+}): React.FC<Props>;

package/dist/types/shared/lazy-suspense/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React, { ComponentType, lazy } from 'react';
+export declare function withSuspense<T extends ComponentType<any>>(Component: T, fallback?: React.ReactNode): T;
+export declare function lazySuspense<T extends ComponentType<any>>(params: Parameters<typeof lazy<T>>[0], fallback?: React.ReactNode): React.LazyExoticComponent<T>;

package/dist/types/shared/polyfill-create-root/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+export interface IPolyfillRoot {
+    render(children: React.ReactNode): void;
+    unmount(): void;
+}
+export declare function polyfillCreateRoot(dom: HTMLElement): IPolyfillRoot;
+export declare function unstableSetCreateRoot(createRoot: (dom: HTMLElement) => IPolyfillRoot): void;

package/dist/types/validate/index.d.ts

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

package/dist/types/validate/validate-flow-value/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { FeedbackLevel, FlowNodeEntity } from '@flowgram.ai/editor';
+import { IFlowValue } from '../../shared';
+interface Context {
+    node: FlowNodeEntity;
+    required?: boolean;
+    errorMessages?: {
+        required?: string;
+        unknownVariable?: string;
+    };
+}
+export declare function validateFlowValue(value: IFlowValue | undefined, ctx: Context): {
+    level: FeedbackLevel;
+    message: string;
+} | undefined;
+export {};

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.15",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "import": "./dist/esm/index.js",
-    "require": "./dist/index.js"
+    "types": "./dist/types/index.d.ts",
+    "import": "./dist/esm/index.mjs",
+    "require": "./dist/cjs/index.js"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
   "bin": {
-    "flowgram-form-materials": "./bin/index.ts"
+    "flowgram-form-materials": "./bin/run.sh"
   },
   "files": [
     "dist",
@@ -24,21 +24,18 @@
     "@douyinfe/semi-icons": "^2.80.0",
     "@douyinfe/semi-illustrations": "^2.80.0",
     "@douyinfe/semi-ui": "^2.80.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "nanoid": "^4.0.2",
-    "commander": "^11.0.0",
-    "chalk": "^5.3.0",
-    "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@coze-editor/editor": "0.1.0-alpha.879fbb",
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
-    "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.1.0-alpha.13",
-    "@flowgram.ai/json-schema": "0.1.0-alpha.13"
+    "zod": "^3.24.4",
+    "@flowgram.ai/json-schema": "0.1.0-alpha.15",
+    "@flowgram.ai/coze-editor": "0.1.0-alpha.15",
+    "@flowgram.ai/editor": "0.1.0-alpha.15"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.137",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -48,11 +45,12 @@
     "react": "^18",
     "react-dom": "^18",
     "styled-components": "^5",
-    "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.13",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.13"
+    "@rslib/core": "~0.12.4",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.15",
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.15"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -64,9 +62,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "npm run build:fast -- --dts-resolve",
-    "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
-    "build:watch": "npm run build:fast -- --dts-resolve",
+    "build": "rslib build",
+    "build:fast": "rslib build",
+    "build:watch": "rslib build",
+    "name-export": "node scripts/name-export.js",
     "clean": "rimraf dist",
     "test": "exit 0",
     "test:cov": "exit 0",

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

@@ -8,12 +8,12 @@ import React from 'react';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconMinus } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue } from '@/typings';
+import { IFlowConstantRefValue } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { BlurInput } from '@/components/blur-input';
 
 import { AssignRowProps } from './types';
-import { BlurInput } from './components/blur-input';
 
 export function AssignRow(props: AssignRowProps) {
   const {
@@ -81,4 +81,4 @@ export function AssignRow(props: AssignRowProps) {
   );
 }
 
-export { AssignValueType } from './types';
+export { type AssignValueType } from './types';

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue, IFlowValue } from '@/typings';
+import { IFlowRefValue, IFlowValue } from '@/shared';
 
 export type AssignValueType =
   | {

package/src/components/batch-outputs/index.tsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
@@ -46,8 +47,8 @@ export function BatchOutputs(props: PropsType) {
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
-        Add
+      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
+        {I18n.t('Add')}
       </Button>
     </div>
   );

package/src/components/batch-outputs/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 export type ValueType = Record<string, IFlowRefValue | undefined>;
 

package/src/components/code-editor/editor.tsx

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import {
+  ActiveLinePlaceholder,
+  createRenderer,
+  EditorProvider,
+  InferValues,
+} from '@flowgram.ai/coze-editor/react';
+import preset, { type EditorAPI } from '@flowgram.ai/coze-editor/preset-code';
+import { EditorView } from '@codemirror/view';
+
+import { getSuffixByLanguageId } from './utils';
+
+import './theme';
+import './language-features';
+
+const OriginCodeEditor = createRenderer(preset, [
+  EditorView.theme({
+    '&.cm-focused': {
+      outline: 'none',
+    },
+  }),
+]);
+
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
+
+export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
+  value?: string;
+  onChange?: (value: string) => void;
+  languageId: 'python' | 'typescript' | 'shell' | 'json';
+  theme?: 'dark' | 'light';
+  placeholder?: string;
+  activeLinePlaceholder?: string;
+  readonly?: boolean;
+  options?: Options;
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  languageId = 'python',
+  theme = 'light',
+  children,
+  placeholder,
+  activeLinePlaceholder,
+  options,
+  readonly,
+}: CodeEditorPropsType) {
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  useEffect(() => {
+    // listen to value change
+    if (editorRef.current?.getValue() !== value) {
+      editorRef.current?.setValue(String(value || ''));
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (languageId === 'typescript') {
+      import('./init-worker').then((module) => {
+        module.initTsWorker();
+      });
+    }
+  }, [languageId]);
+
+  return (
+    <EditorProvider>
+      <OriginCodeEditor
+        defaultValue={String(value || '')}
+        options={{
+          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+          languageId,
+          theme,
+          placeholder,
+          readOnly: readonly,
+          editable: !readonly,
+          ...(options || {}),
+        }}
+        didMount={(editor: EditorAPI) => {
+          editorRef.current = editor;
+        }}
+        onChange={(e) => onChange?.(e.value)}
+      >
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
+        {children}
+      </OriginCodeEditor>
+    </EditorProvider>
+  );
+}

package/src/components/code-editor/index.tsx

@@ -3,94 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useRef } from 'react';
+import { lazySuspense } from '@/shared';
 
-import {
-  ActiveLinePlaceholder,
-  createRenderer,
-  EditorProvider,
-  InferValues,
-} from '@coze-editor/editor/react';
-import preset, { type EditorAPI } from '@coze-editor/editor/preset-code';
-import { EditorView } from '@codemirror/view';
+export const CodeEditor = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.CodeEditor }))
+);
 
-import { getSuffixByLanguageId } from './utils';
-import { initTsWorker } from './language-features';
-
-import './theme';
-import './language-features';
-
-const OriginCodeEditor = createRenderer(preset, [
-  EditorView.theme({
-    '&.cm-focused': {
-      outline: 'none',
-    },
-  }),
-]);
-
-type Preset = typeof preset;
-type Options = Partial<InferValues<Preset[number]>>;
-
-export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
-  value?: string;
-  onChange?: (value: string) => void;
-  languageId: 'python' | 'typescript' | 'shell' | 'json';
-  theme?: 'dark' | 'light';
-  placeholder?: string;
-  activeLinePlaceholder?: string;
-  readonly?: boolean;
-  options?: Options;
-}
-
-export function CodeEditor({
-  value,
-  onChange,
-  languageId = 'python',
-  theme = 'light',
-  children,
-  placeholder,
-  activeLinePlaceholder,
-  options,
-  readonly,
-}: CodeEditorPropsType) {
-  const editorRef = useRef<EditorAPI | null>(null);
-
-  useEffect(() => {
-    if (languageId === 'typescript') {
-      initTsWorker();
-    }
-  }, [languageId]);
-
-  useEffect(() => {
-    // listen to value change
-    if (editorRef.current?.getValue() !== value) {
-      editorRef.current?.setValue(String(value || ''));
-    }
-  }, [value]);
-
-  return (
-    <EditorProvider>
-      <OriginCodeEditor
-        defaultValue={value}
-        options={{
-          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
-          languageId,
-          theme,
-          placeholder,
-          readOnly: readonly,
-          editable: !readonly,
-          ...(options || {}),
-        }}
-        didMount={(editor: EditorAPI) => {
-          editorRef.current = editor;
-        }}
-        onChange={(e) => onChange?.(e.value)}
-      >
-        {activeLinePlaceholder && (
-          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
-        )}
-        {children}
-      </OriginCodeEditor>
-    </EditorProvider>
-  );
-}
+export type { CodeEditorPropsType } from './editor';

package/src/components/code-editor/init-worker.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { typescript } from '@flowgram.ai/coze-editor/language-typescript';
+
+let tsWorkerInit = false;
+
+export const initTsWorker = () => {
+  if (tsWorkerInit) {
+    return;
+  }
+  tsWorkerInit = true;
+
+  const tsWorker = new Worker(
+    new URL(`@flowgram.ai/coze-editor/language-typescript/worker`, import.meta.url),
+    { type: 'module' }
+  );
+  typescript.languageService.initialize(tsWorker, {
+    compilerOptions: {
+      // eliminate Promise error
+      lib: ['es2015', 'dom'],
+      noImplicitAny: false,
+    },
+  });
+};

package/src/components/code-editor/language-features.ts

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { languages } from '@coze-editor/editor/preset-code';
-import { typescript } from '@coze-editor/editor/language-typescript';
-import { shell } from '@coze-editor/editor/language-shell';
-import { python } from '@coze-editor/editor/language-python';
-import { json } from '@coze-editor/editor/language-json';
-import { mixLanguages } from '@coze-editor/editor';
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+import { typescript } from '@flowgram.ai/coze-editor/language-typescript';
+import { shell } from '@flowgram.ai/coze-editor/language-shell';
+import { python } from '@flowgram.ai/coze-editor/language-python';
+import { json } from '@flowgram.ai/coze-editor/language-json';
+import { mixLanguages } from '@flowgram.ai/coze-editor';
 
 languages.register('python', python);
 languages.register('shell', shell);
@@ -21,24 +21,3 @@ languages.register('json', {
   }),
   languageService: json.languageService,
 });
-
-let tsWorkerInit = false;
-
-export const initTsWorker = () => {
-  if (tsWorkerInit) {
-    return;
-  }
-  tsWorkerInit = true;
-
-  const tsWorker = new Worker(
-    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
-    { type: 'module' }
-  );
-  typescript.languageService.initialize(tsWorker, {
-    compilerOptions: {
-      // eliminate Promise error
-      lib: ['es2015', 'dom'],
-      noImplicitAny: false,
-    },
-  });
-};

package/src/components/code-editor/theme/dark.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: '#151B27',
-  // syntax
-  comment: '#FFFFFF63',
-  key: '#39E5D7',
-  string: '#FF94D2',
-  number: '#FF9933',
-  boolean: '#78B0FF',
-  null: '#78B0FF',
-  separator: '#FFFFFFC9',
+  background: '#0D1117',
+  // syntax - 现代化暗色主题配色
+  comment: '#8B949E',
+  key: '#7DD3FC',
+  variable: '#F472B6',
+  string: '#34D399',
+  number: '#FBBF24',
+  boolean: '#A78BFA',
+  null: '#A78BFA',
+  separator: '#E6EDF3',
 };
 
 export const darkTheme: Extension = createTheme({
   variant: 'dark',
   settings: {
     background: colors.background,
-    foreground: '#fff',
-    caret: '#AEAFAD',
-    selection: '#d9d9d942',
+    foreground: '#E6EDF3',
+    caret: '#7DD3FC',
+    selection: '#264F7833',
     gutterBackground: colors.background,
-    gutterForeground: '#FFFFFF63',
+    gutterForeground: '#6E7681',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#272e3d36',
-    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    lineHighlight: '#21262D',
+    bracketColors: ['#FBBF24', '#A78BFA', '#7DD3FC'],
     tooltip: {
-      backgroundColor: '#363D4D',
-      color: '#fff',
-      border: 'none',
+      backgroundColor: '#21262D',
+      color: '#E6EDF3',
+      border: '1px solid #30363D',
     },
     link: {
-      color: '#4daafc',
+      color: '#58A6FF',
     },
     completionItemHover: {
-      backgroundColor: '#FFFFFF0F',
+      backgroundColor: '#21262D',
     },
     completionItemSelected: {
-      backgroundColor: '#FFFFFF17',
+      backgroundColor: '#1F6EEB',
     },
     completionItemIcon: {
-      color: '#FFFFFFC9',
+      color: '#8B949E',
     },
     completionItemLabel: {
-      color: '#FFFFFFC9',
+      color: '#E6EDF3',
     },
     completionItemInfo: {
-      color: '#FFFFFFC9',
+      color: '#8B949E',
     },
     completionItemDetail: {
-      color: '#FFFFFF63',
+      color: '#6E7681',
     },
   },
   styles: [
@@ -89,31 +90,49 @@ export const darkTheme: Extension = createTheme({
       color: colors.separator,
     },
 
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.modifier],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.controlKeyword],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: '#C084FC',
+    },
+
     // markdown
     {
       tag: [t.heading],
-      color: '#6b6bff',
+      color: '#7DD3FC',
     },
     {
       tag: [t.processingInstruction],
-      color: '#6b6bff',
+      color: '#7DD3FC',
     },
 
     // shell
     // curl
     {
       tag: [t.standard(t.variableName)],
-      color: '#3BEB84',
+      color: '#34D399',
     },
     // -X
     {
       tag: [t.attributeName],
-      color: '#FF9933',
+      color: '#FBBF24',
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t.special(t.string)],
-      color: '#78B0FF',
+      color: '#7DD3FC',
     },
   ],
 });

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { themes } from '@coze-editor/editor/preset-code';
+import { themes } from '@flowgram.ai/coze-editor/preset-code';
 
 import { lightTheme } from './light';
 import { darkTheme } from './dark';