@flowgram.ai/form-materials 0.1.0-alpha.18 → 0.1.0-alpha.20

package/src/components/json-schema-creator/json-input-modal.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useState } from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
+import { Modal, Typography } from '@douyinfe/semi-ui';
+
+import { jsonToSchema } from './utils/json-to-schema';
+import { JsonCodeEditor } from '../code-editor';
+
+const { Text } = Typography;
+
+interface JsonInputModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onConfirm: (schema: IJsonSchema) => void;
+}
+
+export function JsonInputModal({ visible, onClose, onConfirm }: JsonInputModalProps) {
+  const [jsonInput, setJsonInput] = useState('');
+  const [error, setError] = useState('');
+
+  const handleConfirm = () => {
+    try {
+      const schema = jsonToSchema(jsonInput);
+      onConfirm(schema);
+      setJsonInput('');
+      setError('');
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      onCancel={onClose}
+      onOk={handleConfirm}
+      title={I18n.t('JSON to JSONSchema')}
+      okText={I18n.t('Generate')}
+      cancelText={I18n.t('Cancel')}
+      width={600}
+    >
+      <div style={{ marginBottom: 8 }}>
+        <Text>{I18n.t('Paste JSON data')}：</Text>
+      </div>
+      <div style={{ minHeight: 300 }}>
+        <JsonCodeEditor value={jsonInput} onChange={(value) => setJsonInput(value || '')} />
+      </div>
+      {error && (
+        <div style={{ marginTop: 8 }}>
+          <Text type="danger">{error}</Text>
+        </div>
+      )}
+    </Modal>
+  );
+}

package/src/components/json-schema-creator/json-schema-creator.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useState } from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
+import { Button } from '@douyinfe/semi-ui';
+
+import { JsonInputModal } from './json-input-modal';
+
+export interface JsonSchemaCreatorProps {
+  /** 生成 schema 后的回调 */
+  onSchemaCreate?: (schema: IJsonSchema) => void;
+}
+
+export function JsonSchemaCreator({ onSchemaCreate }: JsonSchemaCreatorProps) {
+  const [visible, setVisible] = useState(false);
+
+  const handleCreate = (schema: IJsonSchema) => {
+    onSchemaCreate?.(schema);
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>{I18n.t('JSON to JSONSchema')}</Button>
+      <JsonInputModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={handleCreate}
+      />
+    </>
+  );
+}

package/src/components/json-schema-creator/utils/json-to-schema.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+
+export function jsonToSchema(jsonString: string): IJsonSchema {
+  // 1. 解析 JSON
+  const data = JSON.parse(jsonString); // 会自动抛出语法错误
+
+  // 2. 生成 schema
+  return generateSchema(data);
+}
+
+function generateSchema(value: any): IJsonSchema {
+  // null
+  if (value === null) {
+    return { type: 'string' };
+  }
+
+  // array
+  if (Array.isArray(value)) {
+    const schema: IJsonSchema = { type: 'array' };
+    if (value.length > 0) {
+      schema.items = generateSchema(value[0]);
+    }
+    return schema;
+  }
+
+  // object
+  if (typeof value === 'object') {
+    const schema: IJsonSchema = {
+      type: 'object',
+      properties: {},
+      required: [],
+    };
+
+    for (const [key, val] of Object.entries(value)) {
+      schema.properties![key] = generateSchema(val);
+      schema.required!.push(key);
+    }
+
+    return schema;
+  }
+
+  // primitive types
+  const type = typeof value;
+  return { type: type as any };
+}

package/src/components/json-schema-editor/default-value.tsx

@@ -10,8 +10,6 @@ import { I18n } from '@flowgram.ai/editor';
 
 import { ConstantInput } from '@/components/constant-input';
 
-import { ConstantInputWrapper } from './styles';
-
 /**
  * Renders the corresponding default value input component based on different data types.
  * @param props - Component properties, including value, type, placeholder, onChange.
@@ -26,7 +24,7 @@ export function DefaultValue(props: {
   const { value, schema, onChange, placeholder } = props;
 
   return (
-    <ConstantInputWrapper>
+    <div className="gedit-m-json-schema-editor-constant-input-wrapper">
       <ConstantInput
         value={value}
         onChange={(_v) => onChange(_v)}
@@ -34,6 +32,6 @@ export function DefaultValue(props: {
         placeholder={placeholder ?? I18n.t('Default value if parameter is not provided')}
         enableMultiLineStr
       />
-    </ConstantInputWrapper>
+    </div>
   );
 }

package/src/components/json-schema-editor/hooks.tsx

@@ -27,6 +27,7 @@ export function usePropertiesEdit(
   const canAddField = typeManager.canAddField(value || {});
 
   const [propertyList, setPropertyList] = useState<PropertyValueType[]>([]);
+  const latestPropertyListRef = useRef(propertyList);
 
   const effectVersion = useRef(0);
   const changeVersion = useRef(0);
@@ -39,77 +40,82 @@ export function usePropertiesEdit(
     effectVersion.current = changeVersion.current;
 
     // If the value is changed, update the property list
-    setPropertyList((_list) => {
-      const newNames = Object.entries(drilldownSchema?.properties || {})
-        .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-        .map(([key]) => key);
-
-      const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
-      const addNames = difference(newNames, oldNames);
-
-      return _list
-        .filter((item) => !item.name || newNames.includes(item.name))
-        .map((item) => ({
-          key: item.key,
-          name: item.name,
-          isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
-          ...(drilldownSchema?.properties?.[item.name || ''] || item || {}),
+    const _list = latestPropertyListRef.current;
+
+    const newNames = Object.entries(drilldownSchema?.properties || {})
+      .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+      .map(([key]) => key);
+
+    const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
+    const addNames = difference(newNames, oldNames);
+
+    const next = _list
+      .filter((item) => !item.name || newNames.includes(item.name))
+      .map((item) => ({
+        key: item.key,
+        name: item.name,
+        isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+        ...(drilldownSchema?.properties?.[item.name || ''] || item || {}),
+      }))
+      .concat(
+        addNames.map((_name) => ({
+          key: genId(),
+          name: _name,
+          isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+          ...(drilldownSchema?.properties?.[_name] || {}),
         }))
-        .concat(
-          addNames.map((_name) => ({
-            key: genId(),
-            name: _name,
-            isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
-            ...(drilldownSchema?.properties?.[_name] || {}),
-          }))
-        );
-    });
+      );
+
+    latestPropertyListRef.current = next;
+
+    setPropertyList(next);
   }, [drilldownSchema]);
 
   const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
     changeVersion.current = changeVersion.current + 1;
 
-    setPropertyList((_list) => {
-      const next = updater(_list);
+    const next = updater(latestPropertyListRef.current);
+    latestPropertyListRef.current = next;
+    setPropertyList(next);
 
-      // onChange to parent
-      const nextProperties: Record<string, IJsonSchema> = {};
-      const nextRequired: string[] = [];
+    // onChange to parent
+    const nextProperties: Record<string, IJsonSchema> = {};
+    const nextRequired: string[] = [];
 
-      for (const _property of next) {
-        if (!_property.name) {
-          continue;
-        }
+    for (const _property of next) {
+      if (!_property.name) {
+        continue;
+      }
 
-        nextProperties[_property.name] = omit(_property, ['key', 'name', 'isPropertyRequired']);
+      nextProperties[_property.name] = omit(_property, ['key', 'name', 'isPropertyRequired']);
 
-        if (_property.isPropertyRequired) {
-          nextRequired.push(_property.name);
-        }
+      if (_property.isPropertyRequired) {
+        nextRequired.push(_property.name);
       }
+    }
 
-      onChange?.(
-        produce(value || {}, (draft) => {
-          const propertiesParent = typeManager.getPropertiesParent(draft);
-
-          if (propertiesParent) {
-            propertiesParent.properties = nextProperties;
-            propertiesParent.required = nextRequired;
-            return;
-          }
-        })
-      );
+    onChange?.(
+      produce(value || {}, (draft) => {
+        const propertiesParent = typeManager.getPropertiesParent(draft);
 
-      return next;
-    });
+        if (propertiesParent) {
+          propertiesParent.properties = nextProperties;
+          propertiesParent.required = nextRequired;
+          return;
+        }
+      })
+    );
   };
 
   const onAddProperty = () => {
-    // set property list only, not trigger updatePropertyList
-    setPropertyList((_list) => [
+    const _list = latestPropertyListRef.current;
+    const next = [
       ..._list,
       { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
-    ]);
+    ];
+
+    latestPropertyListRef.current = next;
+    setPropertyList(next);
   };
 
   const onRemoveProperty = (key: number) => {
@@ -124,6 +130,7 @@ export function usePropertiesEdit(
 
   useEffect(() => {
     if (!canAddField) {
+      latestPropertyListRef.current = [];
       setPropertyList([]);
     }
   }, [canAddField]);

package/src/components/json-schema-editor/icon.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import Icon from '@douyinfe/semi-icons';
+
+const iconAddChildrenSvg = (
+  <svg
+    className="icon-icon icon-icon-coz_add_node "
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+    ></path>
+    <path d="M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"></path>
+  </svg>
+);
+
+export const IconAddChildren = () => <Icon size="small" svg={iconAddChildrenSvg} />;

package/src/components/json-schema-editor/index.tsx

@@ -21,26 +21,12 @@ import { InjectTypeSelector } from '@/components/type-selector';
 import { BlurInput } from '@/components/blur-input';
 
 import { ConfigType, PropertyValueType } from './types';
-import {
-  IconAddChildren,
-  UIActions,
-  UICollapseTrigger,
-  UICollapsible,
-  UIContainer,
-  UIExpandDetail,
-  UILabel,
-  UITreeItems,
-  UITreeItemLeft,
-  UITreeItemMain,
-  UITreeItemRight,
-  UIRequired,
-  UIType,
-} from './styles';
-import { UIName } from './styles';
-import { DefaultValueWrapper, UIRow } from './styles';
+import { IconAddChildren } from './icon';
 import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
 
+import './styles.css';
+
 const DEFAULT = { type: 'object' };
 
 export function JsonSchemaEditor(props: {
@@ -57,8 +43,8 @@ export function JsonSchemaEditor(props: {
   );
 
   return (
-    <UIContainer className={props.className}>
-      <UITreeItems>
+    <div className="gedit-m-json-schema-editor-container">
+      <div className="gedit-m-json-schema-editor-tree-items">
         {propertyList.map((_property) => (
           <PropertyEdit
             readonly={readonly}
@@ -73,7 +59,7 @@ export function JsonSchemaEditor(props: {
             }}
           />
         ))}
-      </UITreeItems>
+      </div>
       <Button
         disabled={readonly}
         size="small"
@@ -83,7 +69,7 @@ export function JsonSchemaEditor(props: {
       >
         {config?.addButtonText ?? I18n.t('Add')}
       </Button>
-    </UIContainer>
+    </div>
   );
 }
 
@@ -119,17 +105,24 @@ function PropertyEdit(props: {
 
   return (
     <>
-      <UITreeItemLeft $isLast={$isLast} $showLine={$level > 0} $showCollapse={showCollapse}>
+      <div
+        className={`gedit-m-json-schema-editor-tree-item-left ${$level > 0 ? 'show-line' : ''} ${
+          $isLast ? 'is-last' : ''
+        } ${showCollapse ? 'show-collapse' : ''}`}
+      >
         {showCollapse && (
-          <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
+          <div
+            className="gedit-m-json-schema-editor-collapse-trigger"
+            onClick={() => setCollapse((_collapse) => !_collapse)}
+          >
             {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
-          </UICollapseTrigger>
+          </div>
         )}
-      </UITreeItemLeft>
-      <UITreeItemRight>
-        <UITreeItemMain>
-          <UIRow>
-            <UIName>
+      </div>
+      <div className="gedit-m-json-schema-editor-tree-item-right">
+        <div className="gedit-m-json-schema-editor-tree-item-main">
+          <div className="gedit-m-json-schema-editor-row">
+            <div className="gedit-m-json-schema-editor-name">
               <BlurInput
                 disabled={readonly}
                 placeholder={config?.placeholder ?? I18n.t('Input Variable Name')}
@@ -137,8 +130,8 @@ function PropertyEdit(props: {
                 value={name}
                 onChange={(value) => onChange('name', value)}
               />
-            </UIName>
-            <UIType>
+            </div>
+            <div className="gedit-m-json-schema-editor-type">
               <InjectTypeSelector
                 value={typeSelectorValue}
                 readonly={readonly}
@@ -149,15 +142,15 @@ function PropertyEdit(props: {
                   });
                 }}
               />
-            </UIType>
-            <UIRequired>
+            </div>
+            <div className="gedit-m-json-schema-editor-required">
               <Checkbox
                 disabled={readonly}
                 checked={isPropertyRequired}
                 onChange={(e) => onChange('isPropertyRequired', e.target.checked)}
               />
-            </UIRequired>
-            <UIActions>
+            </div>
+            <div className="gedit-m-json-schema-editor-actions">
               <IconButton
                 disabled={readonly}
                 size="small"
@@ -186,11 +179,13 @@ function PropertyEdit(props: {
                 icon={<IconMinus size="small" />}
                 onClick={onRemove}
               />
-            </UIActions>
-          </UIRow>
+            </div>
+          </div>
           {expand && (
-            <UIExpandDetail>
-              <UILabel>{config?.descTitle ?? I18n.t('Description')}</UILabel>
+            <div className="gedit-m-json-schema-editor-expand-detail">
+              <div className="gedit-m-json-schema-editor-label">
+                {config?.descTitle ?? I18n.t('Description')}
+              </div>
               <BlurInput
                 disabled={readonly}
                 size="small"
@@ -202,25 +197,25 @@ function PropertyEdit(props: {
               />
               {$level === 0 && (
                 <>
-                  <UILabel style={{ marginTop: 10 }}>
+                  <div className="gedit-m-json-schema-editor-label" style={{ marginTop: 10 }}>
                     {config?.defaultValueTitle ?? I18n.t('Default Value')}
-                  </UILabel>
-                  <DefaultValueWrapper>
+                  </div>
+                  <div className="gedit-m-json-schema-editor-default-value-wrapper">
                     <DefaultValue
                       value={defaultValue}
                       schema={value}
                       placeholder={config?.defaultValuePlaceholder ?? I18n.t('Default Value')}
                       onChange={(value) => onChange('default', value)}
                     />
-                  </DefaultValueWrapper>
+                  </div>
                 </>
               )}
-            </UIExpandDetail>
+            </div>
           )}
-        </UITreeItemMain>
+        </div>
         {showCollapse && (
-          <UICollapsible $collapse={collapse}>
-            <UITreeItems $shrink={true}>
+          <div className={`gedit-m-json-schema-editor-collapsible ${collapse ? 'collapse' : ''}`}>
+            <div className="gedit-m-json-schema-editor-tree-items shrink">
               {propertyList.map((_property, index) => (
                 <PropertyEdit
                   readonly={readonly}
@@ -237,10 +232,10 @@ function PropertyEdit(props: {
                   $isLast={index === propertyList.length - 1}
                 />
               ))}
-            </UITreeItems>
-          </UICollapsible>
+            </div>
+          </div>
         )}
-      </UITreeItemRight>
+      </div>
     </>
   );
 }

package/src/components/json-schema-editor/styles.css

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-json-schema-editor-container {
+  /* & .semi-input {
+    background-color: #fff;
+    border-radius: 6px;
+    height: 24px;
+  } */
+}
+
+.gedit-m-json-schema-editor-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.gedit-m-json-schema-editor-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-json-schema-editor-expand-detail {
+  display: flex;
+  flex-direction: column;
+}
+
+.gedit-m-json-schema-editor-label {
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+  margin-bottom: 2px;
+}
+
+.gedit-m-json-schema-editor-tree-items {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.gedit-m-json-schema-editor-tree-items.shrink {
+  padding-left: 3px;
+  margin-top: 10px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left {
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::before {
+  /* 竖线 */
+  content: "";
+  height: var(--line-height, 100%);
+  position: absolute;
+  left: -14px;
+  top: -16px;
+  width: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::after {
+  /* 横线 */
+  content: "";
+  position: absolute;
+  left: -14px; /* 横线起点和竖线对齐 */
+  top: 8px; /* 跟随你的行高调整 */
+  width: var(--line-width, 30px); /* 横线长度 */
+  height: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.is-last::before {
+  height: 24px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.show-collapse::after {
+  width: 12px;
+}
+
+.gedit-m-json-schema-editor-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.gedit-m-json-schema-editor-tree-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-collapsible {
+  display: none;
+}
+
+.gedit-m-json-schema-editor-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-json-schema-editor-name {
+  flex-grow: 1;
+}
+
+.gedit-m-json-schema-editor-type {
+}
+
+.gedit-m-json-schema-editor-required {
+}
+
+.gedit-m-json-schema-editor-actions {
+  white-space: nowrap;
+}
+
+.gedit-m-json-schema-editor-default-value-wrapper {
+  margin: 0;
+}
+
+.gedit-m-json-schema-editor-constant-input-wrapper {
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+}