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

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

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Button, Input } from '@douyinfe/semi-ui';
+import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
+
+import { useList } from './use-list';
+import { PropsType } from './types';
+import { VariableSelector } from '../variable-selector';
+import { UIRow, UIRows } from './styles';
+
+export function BatchOutputs(props: PropsType) {
+  const { readonly, style } = props;
+
+  const { list, add, update, remove } = useList(props);
+
+  return (
+    <div>
+      <UIRows style={style}>
+        {list.map((item) => (
+          <UIRow key={item.id}>
+            <Input
+              style={{ width: 100 }}
+              disabled={readonly}
+              size="small"
+              value={item.key}
+              onChange={(v) => update({ ...item, key: v })}
+            />
+            <VariableSelector
+              style={{ flexGrow: 1 }}
+              readonly={readonly}
+              value={item.value?.content}
+              onChange={(v) =>
+                update({
+                  ...item,
+                  value: {
+                    type: 'ref',
+                    content: v,
+                  },
+                })
+              }
+            />
+            <Button
+              disabled={readonly}
+              icon={<IconDelete />}
+              size="small"
+              onClick={() => remove(item.id)}
+            />
+          </UIRow>
+        ))}
+      </UIRows>
+      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
+        Add
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const UIRows = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+export const UIRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowRefValue } from '../../typings';
+
+export type ValueType = Record<string, IFlowRefValue | undefined>;
+
+export interface OutputItem {
+  id: number;
+  key?: string;
+  value?: IFlowRefValue;
+}
+
+export interface PropsType {
+  value?: ValueType;
+  onChange: (value?: ValueType) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: React.CSSProperties;
+}

package/src/components/batch-outputs/use-list.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useEffect, useState } from 'react';
+
+import { difference } from 'lodash';
+
+import { OutputItem, PropsType } from './types';
+
+let _id = 0;
+function genId() {
+  return _id++;
+}
+
+export function useList({ value, onChange }: PropsType) {
+  const [list, setList] = useState<OutputItem[]>([]);
+
+  useEffect(() => {
+    setList((_prevList) => {
+      const newKeys = Object.keys(value || {});
+      const oldKeys = _prevList.map((item) => item.key).filter(Boolean) as string[];
+      const addKeys = difference(newKeys, oldKeys);
+
+      return _prevList
+        .filter((item) => !item.key || newKeys.includes(item.key))
+        .map((item) => ({
+          id: item.id,
+          key: item.key,
+          value: item.key ? value?.[item.key!] : undefined,
+        }))
+        .concat(
+          addKeys.map((_key) => ({
+            id: genId(),
+            key: _key,
+            value: value?.[_key],
+          }))
+        );
+    });
+  }, [value]);
+
+  const add = () => {
+    setList((prevList) => [
+      ...prevList,
+      {
+        id: genId(),
+      },
+    ]);
+  };
+
+  const update = (item: OutputItem) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === item.id) {
+          return item;
+        }
+        return _item;
+      });
+
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  const remove = (itemId: number) => {
+    setList((prevList) => {
+      const nextList = prevList.filter((_item) => _item.id !== itemId);
+
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  return { list, add, update, remove };
+}

package/src/components/batch-variable-selector/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "batch-variable-selector",
+  "depMaterials": ["variable-selector"],
+  "depPackages": []
+}

package/src/components/batch-variable-selector/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { PrivateScopeProvider } from '@flowgram.ai/editor';
+
+import { VariableSelector, VariableSelectorProps } from '../variable-selector';
+import { IJsonSchema } from '../../typings';
+
+const batchVariableSchema: IJsonSchema = {
+  type: 'array',
+  extra: { weak: true },
+};
+
+export function BatchVariableSelector(props: VariableSelectorProps) {
+  return (
+    <PrivateScopeProvider>
+      <VariableSelector {...props} includeSchema={batchVariableSchema} />
+    </PrivateScopeProvider>
+  );
+}

package/src/components/code-editor/config.json

@@ -0,0 +1,9 @@
+{
+  "name": "code-editor",
+  "depMaterials": [],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
+    "@codemirror/view",
+    "@codemirror/state"
+  ]
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import { ActiveLinePlaceholder, createRenderer, EditorProvider } from '@coze-editor/editor/react';
+import preset, { type EditorAPI } from '@coze-editor/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',
+    },
+  }),
+]);
+
+export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
+  value?: string;
+  onChange?: (value: string) => void;
+  languageId: 'python' | 'typescript' | 'shell' | 'json';
+  theme?: 'dark' | 'light';
+  placeholder?: string;
+  activeLinePlaceholder?: string;
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  languageId = 'python',
+  theme = 'light',
+  children,
+  placeholder,
+  activeLinePlaceholder,
+}: CodeEditorPropsType) {
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  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,
+        }}
+        didMount={(editor: EditorAPI) => {
+          editorRef.current = editor;
+        }}
+        onChange={(e) => onChange?.(e.value)}
+      >
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
+        {children}
+      </OriginCodeEditor>
+    </EditorProvider>
+  );
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * 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';
+
+languages.register('python', python);
+// languages.register('typescript', typescript);
+
+languages.register('json', {
+  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
+  language: mixLanguages({
+    outerLanguage: json.language,
+  }),
+  languageService: json.languageService,
+});
+
+languages.register('shell', shell);

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

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createTheme, tags as t } from '@coze-editor/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',
+};
+
+export const darkTheme: Extension = createTheme({
+  variant: 'dark',
+  settings: {
+    background: colors.background,
+    foreground: '#fff',
+    caret: '#AEAFAD',
+    selection: '#d9d9d942',
+    gutterBackground: colors.background,
+    gutterForeground: '#FFFFFF63',
+    gutterBorderColor: 'transparent',
+    gutterBorderWidth: 0,
+    lineHighlight: '#272e3d36',
+    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    tooltip: {
+      backgroundColor: '#363D4D',
+      color: '#fff',
+      border: 'none',
+    },
+    link: {
+      color: '#4daafc',
+    },
+    completionItemHover: {
+      backgroundColor: '#FFFFFF0F',
+    },
+    completionItemSelected: {
+      backgroundColor: '#FFFFFF17',
+    },
+    completionItemIcon: {
+      color: '#FFFFFFC9',
+    },
+    completionItemLabel: {
+      color: '#FFFFFFC9',
+    },
+    completionItemInfo: {
+      color: '#FFFFFFC9',
+    },
+    completionItemDetail: {
+      color: '#FFFFFF63',
+    },
+  },
+  styles: [
+    // json
+    {
+      tag: t.comment,
+      color: colors.comment,
+    },
+    {
+      tag: [t.propertyName],
+      color: colors.key,
+    },
+    {
+      tag: [t.string],
+      color: colors.string,
+    },
+    {
+      tag: [t.number],
+      color: colors.number,
+    },
+    {
+      tag: [t.bool],
+      color: colors.boolean,
+    },
+    {
+      tag: [t.null],
+      color: colors.null,
+    },
+    {
+      tag: [t.separator],
+      color: colors.separator,
+    },
+
+    // markdown
+    {
+      tag: [t.heading],
+      color: '#6b6bff',
+    },
+    {
+      tag: [t.processingInstruction],
+      color: '#6b6bff',
+    },
+
+    // shell
+    // curl
+    {
+      tag: [t.standard(t.variableName)],
+      color: '#3BEB84',
+    },
+    // -X
+    {
+      tag: [t.attributeName],
+      color: '#FF9933',
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t.special(t.string)],
+      color: '#78B0FF',
+    },
+  ],
+});

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { themes } from '@coze-editor/editor/preset-code';
+
+import { lightTheme } from './light';
+import { darkTheme } from './dark';
+
+themes.register('dark', darkTheme);
+themes.register('light', lightTheme);

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

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
+import { type Extension } from '@codemirror/state';
+
+const colors = {
+  background: '#F7F7FC',
+  // syntax
+  comment: '#000A298A',
+  key: '#00818C',
+  string: '#D1009D',
+  number: '#C74200',
+  boolean: '#2B57D9',
+  null: '#2B57D9',
+  separator: '#0F1529D1',
+};
+
+export const lightTheme: Extension = createTheme({
+  variant: 'light',
+  settings: {
+    background: '#fff',
+    foreground: '#000',
+    caret: '#000',
+    selection: '#d9d9d9',
+    gutterBackground: '#f0f0f0',
+    gutterForeground: '#666',
+    gutterBorderColor: 'transparent',
+    gutterBorderWidth: 0,
+    lineHighlight: '#f0f0f0',
+    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    tooltip: {
+      backgroundColor: '#f0f0f0',
+      color: '#000',
+      border: '1px solid #ccc',
+    },
+    link: {
+      color: '#007bff',
+    },
+    completionItemHover: {
+      backgroundColor: '#f0f0f0',
+    },
+    completionItemSelected: {
+      backgroundColor: '#e0e0e0',
+    },
+    completionItemIcon: {
+      color: '#333',
+    },
+    completionItemLabel: {
+      color: '#333',
+    },
+    completionItemInfo: {
+      color: '#333',
+    },
+    completionItemDetail: {
+      color: '#666',
+    },
+  },
+  styles: [
+    // JSON
+    {
+      tag: t.comment,
+      color: colors.comment,
+    },
+    {
+      tag: [t.propertyName],
+      color: colors.key,
+    },
+    {
+      tag: [t.string],
+      color: colors.string,
+    },
+    {
+      tag: [t.number],
+      color: colors.number,
+    },
+    {
+      tag: [t.bool],
+      color: colors.boolean,
+    },
+    {
+      tag: [t.null],
+      color: colors.null,
+    },
+    {
+      tag: [t.separator],
+      color: colors.separator,
+    },
+
+    // markdown
+    {
+      tag: [t.heading],
+      color: '#3e76ef',
+    },
+    {
+      tag: [t.processingInstruction],
+      color: '#3e76ef',
+    },
+
+    // shell
+    // curl
+    {
+      tag: [t.standard(t.variableName)],
+      color: '#00804A',
+    },
+    // -X
+    {
+      tag: [t.attributeName],
+      color: '#C74200',
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t.special(t.string)],
+      color: '#2B57D9',
+    },
+  ],
+});

package/src/components/code-editor/utils.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export function getSuffixByLanguageId(languageId: string) {
+  if (languageId === 'python') {
+    return '.py';
+  }
+  if (languageId === 'typescript') {
+    return '.ts';
+  }
+  if (languageId === 'shell') {
+    return '.sh';
+  }
+  if (languageId === 'json') {
+    return '.json';
+  }
+  return '';
+}

package/src/components/condition-row/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "condition-row",
+  "depMaterials": ["variable-selector", "dynamic-value-input", "flow-value", "utils/json-schema", "typings/json-schema"],
+  "depPackages": ["@douyinfe/semi-ui", "styled-components"]
+}