@flowgram.ai/form-materials 0.2.32 → 0.3.0

package/src/components/display-schema-tree/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
+
+import { useTypeManager } from '../../shared';
+import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
+
+interface PropsType {
+  value?: IJsonSchema;
+  parentKey?: string;
+  depth?: number;
+  drilldown?: boolean;
+  showIcon?: boolean;
+  typeManager?: JsonSchemaTypeManager;
+}
+
+export function DisplaySchemaTree(props: Omit<PropsType, 'parentKey' | 'depth'>) {
+  return <SchemaTree {...props} />;
+}
+
+function SchemaTree(props: PropsType) {
+  const {
+    value: schema = {},
+    drilldown = true,
+    depth = 0,
+    showIcon = true,
+    parentKey = '',
+  } = props || {};
+
+  const typeManager = useTypeManager();
+
+  const config = typeManager.getTypeBySchema(schema);
+  const title = typeManager.getComplexText(schema);
+  const icon = typeManager?.getDisplayIcon(schema);
+  let properties: IJsonSchema['properties'] =
+    drilldown && config ? config.getTypeSchemaProperties(schema) : {};
+  const childEntries = Object.entries(properties || {});
+
+  return (
+    <TreeItem depth={depth} key={parentKey || 'root'}>
+      <TreeRow>
+        {depth !== 0 && <HorizontalLine />}
+        {showIcon &&
+          icon &&
+          React.cloneElement(icon, {
+            className: 'tree-icon',
+          })}
+        <TreeTitle>
+          {parentKey ? (
+            <>
+              {`${parentKey} (`}
+              {title}
+              {')'}
+            </>
+          ) : (
+            title
+          )}
+        </TreeTitle>
+      </TreeRow>
+      {childEntries?.length ? (
+        <TreeLevel>
+          {childEntries.map(([key, value]) => (
+            <SchemaTree key={key} {...props} parentKey={key} value={value} depth={depth + 1} />
+          ))}
+        </TreeLevel>
+      ) : null}
+    </TreeItem>
+  );
+}

package/src/components/display-schema-tree/styles.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled, { css } from 'styled-components';
+
+export const TreeRow = styled.div`
+  display: flex;
+  align-items: center;
+
+  .tree-icon {
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+  }
+
+  height: 27px;
+  white-space: nowrap;
+`;
+
+export const HorizontalLine = styled.div`
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &::after {
+    top: 0px;
+    right: 6px;
+    width: 15px;
+    height: 1px;
+  }
+`;
+
+export const TreeTitle = styled.div`
+  // overflow: hidden;
+  // text-overflow: ellipsis;
+`;
+
+export const TreeLevel = styled.div`
+  padding-left: 30px;
+  position: relative;
+
+  /* &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+    top: 0px;
+    bottom: 0px;
+    left: -22px;
+    width: 1px;
+  } */
+`;
+
+export const TreeItem = styled.div<{ depth: number }>`
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &:not(:last-child)::before {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: -22px;
+  }
+
+  &:last-child::before {
+    width: 1px;
+    top: 0;
+    height: 14px;
+    left: -22px;
+  }
+
+  ${(props) =>
+    props.depth === 0 &&
+    css`
+      &::before {
+        width: 0px !important;
+      }
+    `}
+`;

package/src/components/dynamic-value-input/config.json

@@ -1,5 +1,14 @@
 {
   "name": "dynamic-value-input",
-  "depMaterials": ["flow-value", "constant-input", "variable-selector"],
-  "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons", "styled-components"]
+  "depMaterials": [
+    "flow-value",
+    "constant-input",
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "@douyinfe/semi-icons",
+    "styled-components",
+    "@flowgram.ai/json-schema"
+  ]
 }

package/src/components/dynamic-value-input/hooks.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo, useState } from 'react';
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { IFlowConstantRefValue } from '../../typings/flow-value';
+
+export function useRefVariable(value?: IFlowConstantRefValue) {
+  const available = useScopeAvailable();
+  const refVariable = useMemo(() => {
+    if (value?.type === 'ref') {
+      return available.getByKeyPath(value.content);
+    }
+  }, [value, available]);
+
+  return refVariable;
+}
+
+export function useSelectSchema(
+  schemaFromProps?: IJsonSchema,
+  constantProps?: {
+    schema?: IJsonSchema;
+  },
+  value?: IFlowConstantRefValue
+) {
+  let defaultSelectSchema = schemaFromProps || constantProps?.schema || { type: 'string' };
+  if (value?.type === 'constant') {
+    defaultSelectSchema = value?.schema || defaultSelectSchema;
+  }
+
+  const [selectSchema, setSelectSchema] = useState(defaultSelectSchema);
+
+  return [selectSchema, setSelectSchema] as const;
+}
+
+export function useIncludeSchema(schemaFromProps?: IJsonSchema) {
+  const includeSchema = useMemo(() => {
+    if (!schemaFromProps) {
+      return;
+    }
+    if (schemaFromProps?.type === 'number') {
+      return [schemaFromProps, { type: 'integer' }];
+    }
+    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
+  }, [schemaFromProps]);
+
+  return includeSchema;
+}

package/src/components/dynamic-value-input/index.tsx

@@ -3,20 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useMemo, useState } from 'react';
+import React from 'react';
 
-import { useScopeAvailable } from '@flowgram.ai/editor';
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
+import { VariableSelector } from '../variable-selector';
+import { TypeSelector } from '../type-selector';
 import { Strategy } from '../constant-input/types';
 import { ConstantInput } from '../constant-input';
-import { JsonSchemaUtils } from '../../utils';
 import { IFlowConstantRefValue } from '../../typings/flow-value';
 import { UIContainer, UIMain, UITrigger, UIType } from './styles';
-import { VariableSelector } from '../variable-selector';
-import { TypeSelector } from '../type-selector';
-import { IJsonSchema } from '../../typings';
+import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
 interface PropsType {
   value?: IFlowConstantRefValue;
@@ -40,16 +39,9 @@ export function DynamicValueInput({
   schema: schemaFromProps,
   constantProps,
 }: PropsType) {
-  const available = useScopeAvailable();
-  const refVariable = useMemo(() => {
-    if (value?.type === 'ref') {
-      return available.getByKeyPath(value.content);
-    }
-  }, [value, available]);
-
-  const [selectSchema, setSelectSchema] = useState(
-    schemaFromProps || constantProps?.schema || { type: 'string' }
-  );
+  const refVariable = useRefVariable(value);
+  const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
+  const includeSchema = useIncludeSchema(schemaFromProps);
 
   const renderTypeSelector = () => {
     if (schemaFromProps) {
@@ -65,23 +57,33 @@ export function DynamicValueInput({
     return (
       <TypeSelector
         value={selectSchema}
-        onChange={(_v) => setSelectSchema(_v || { type: 'string' })}
+        onChange={(_v) => {
+          setSelectSchema(_v || { type: 'string' });
+          let content;
+
+          if (_v?.type === 'object') {
+            content = '{}';
+          }
+
+          if (_v?.type === 'array') {
+            content = '[]';
+          }
+
+          if (_v?.type === 'boolean') {
+            content = false;
+          }
+
+          onChange({
+            type: 'constant',
+            content,
+            schema: _v || { type: 'string' },
+          });
+        }}
         readonly={readonly}
       />
     );
   };
 
-  // When is number type, include integer as well
-  const includeSchema = useMemo(() => {
-    if (!schemaFromProps) {
-      return;
-    }
-    if (schemaFromProps?.type === 'number') {
-      return [schemaFromProps, { type: 'integer' }];
-    }
-    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
-  }, [schemaFromProps]);
-
   const renderMain = () => {
     if (value?.type === 'ref') {
       // Display Variable Or Delete

package/src/components/index.ts

@@ -15,5 +15,11 @@ export * from './prompt-editor';
 export * from './prompt-editor-with-variables';
 export * from './prompt-editor-with-inputs';
 export * from './code-editor';
+export * from './code-editor-mini';
 export * from './json-editor-with-variables';
 export * from './inputs-values';
+export * from './display-schema-tree';
+export * from './display-outputs';
+export * from './display-schema-tag';
+export * from './display-flow-value';
+export * from './display-inputs-values';

package/src/components/inputs-values/config.json

@@ -7,6 +7,7 @@
   "depPackages": [
     "@douyinfe/semi-ui",
     "@douyinfe/semi-icons",
-    "styled-components"
+    "styled-components",
+    "@flowgram.ai/json-schema"
   ]
 }

package/src/components/inputs-values/types.ts

@@ -3,8 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
 import { Strategy } from '../constant-input/types';
-import { IFlowValue, IJsonSchema } from '../../typings';
+import { IFlowValue } from '../../typings';
 
 export interface PropsType {
   value?: Record<string, IFlowValue | undefined>;

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

@@ -2,12 +2,12 @@
   "name": "json-schema-editor",
   "depMaterials": [
     "type-selector",
-    "typings/json-schema",
-    "constant-inputs"
+    "constant-inputs",
   ],
   "depPackages": [
     "@douyinfe/semi-ui",
     "@douyinfe/semi-icons",
-    "styled-components"
+    "styled-components",
+    "@flowgram.ai/json-schema"
   ]
 }

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

@@ -5,6 +5,7 @@
 
 import React, { useRef, useState, useCallback } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
 import { IconBrackets } from '@douyinfe/semi-icons';
 
@@ -17,7 +18,6 @@ import {
   JSONViewerWrapper,
 } from './styles';
 import { ConstantInput } from '../constant-input';
-import { IJsonSchema } from '../../typings';
 
 /**
  * 根据不同的数据类型渲染对应的默认值输入组件。

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

@@ -6,8 +6,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { omit } from 'lodash';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { IJsonSchema } from '../../typings';
 import { PropertyValueType } from './types';
 
 let _id = 0;

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

@@ -5,6 +5,7 @@
 
 import React, { useMemo, useState } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';
 import {
   IconExpand,
@@ -16,7 +17,6 @@ import {
 } from '@douyinfe/semi-icons';
 
 import { TypeSelector } from '../type-selector';
-import { IJsonSchema } from '../../typings';
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,

package/src/components/json-schema-editor/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IJsonSchema } from '../../typings';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 
 export interface PropertyValueType extends IJsonSchema {
   name?: string;

package/src/components/type-selector/config.json

@@ -1,5 +1,9 @@
 {
   "name": "type-selector",
-  "depMaterials": ["typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons"]
+  "depMaterials": [],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "@douyinfe/semi-icons",
+    "@flowgram.ai/json-schema"
+  ]
 }

package/src/components/type-selector/index.tsx

@@ -5,10 +5,10 @@
 
 import React, { useMemo } from 'react';
 
-import { Cascader, IconButton } from '@douyinfe/semi-ui';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
-import { IJsonSchema } from '../../typings';
-import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constants';
+import { useTypeManager } from '../../shared';
 
 interface PropTypes {
   value?: Partial<IJsonSchema>;
@@ -21,6 +21,10 @@ interface PropTypes {
   style?: React.CSSProperties;
 }
 
+const labelStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 5 };
+
+const firstUppercase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
 export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
   if (value?.type === 'array' && value?.items) {
     return [value.type, ...(getTypeSelectValue(value.items) || [])];
@@ -44,17 +48,51 @@ export function TypeSelector(props: PropTypes) {
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
+  const typeManager = useTypeManager();
+
+  const icon = typeManager.getDisplayIcon(value || {});
+
+  const options = useMemo(
+    () =>
+      typeManager.getTypeRegistriesWithParentType().map((_type) => {
+        const isArray = _type.type === 'array';
+
+        return {
+          label: (
+            <div style={labelStyle}>
+              <Icon size="small" svg={_type.icon} />
+              {firstUppercase(_type.type)}
+            </div>
+          ),
+          value: _type.type,
+          children: isArray
+            ? typeManager.getTypeRegistriesWithParentType('array').map((_type) => ({
+                label: (
+                  <div style={labelStyle}>
+                    <Icon
+                      size="small"
+                      svg={typeManager.getDisplayIcon({
+                        type: 'array',
+                        items: { type: _type.type },
+                      })}
+                    />
+                    {firstUppercase(_type.type)}
+                  </div>
+                ),
+                value: _type.type,
+              }))
+            : [],
+        };
+      }),
+    []
+  );
+
   return (
     <Cascader
       disabled={readonly || disabled}
       size="small"
       triggerRender={() => (
-        <IconButton
-          size="small"
-          style={style}
-          disabled={readonly || disabled}
-          icon={getSchemaIcon(value)}
-        />
+        <IconButton size="small" style={style} disabled={readonly || disabled} icon={icon} />
       )}
       treeData={options}
       value={selectValue}
@@ -65,5 +103,3 @@ export function TypeSelector(props: PropTypes) {
     />
   );
 }
-
-export { VariableTypeIcons, ArrayIcons, getSchemaIcon };

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

@@ -1,5 +1,9 @@
 {
   "name": "variable-selector",
-  "depMaterials": ["type-selector", "utils/json-schema", "typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui", "styled-components"]
+  "depMaterials": [],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components",
+    "@flowgram.ai/json-schema"
+  ]
 }

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

@@ -5,12 +5,12 @@
 
 import React, { useMemo } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
-import { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
 import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 

package/src/components/variable-selector/use-variable-tree.tsx

@@ -5,15 +5,18 @@
 
 import React, { useCallback } from 'react';
 
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
-import { JsonSchemaUtils } from '../../utils/json-schema';
-import { IJsonSchema } from '../../typings/json-schema';
+import { useTypeManager } from '../../shared';
 
-type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
+type VariableField = BaseVariableField<{
+  icon?: string | JSX.Element;
+  title?: string;
+  disabled?: boolean;
+}>;
 
 export function useVariableTree(params: {
   includeSchema?: IJsonSchema | IJsonSchema[];
@@ -22,6 +25,7 @@ export function useVariableTree(params: {
 }): TreeNodeData[] {
   const { includeSchema, excludeSchema, customSkip } = params;
 
+  const typeManager = useTypeManager();
   const variables = useAvailableVariables();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {
@@ -33,22 +37,9 @@ export function useVariableTree(params: {
       return variable.meta.icon;
     }
 
-    const _type = variable.type;
+    const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldownObject: false });
 
-    if (ASTMatch.isArray(_type)) {
-      return (
-        <Icon
-          size="small"
-          svg={ArrayIcons[_type.items?.kind.toLowerCase()] || VariableTypeIcons.array}
-        />
-      );
-    }
-
-    if (ASTMatch.isCustomType(_type)) {
-      return <Icon size="small" svg={VariableTypeIcons[_type.typeName.toLowerCase()]} />;
-    }
-
-    return <Icon size="small" svg={VariableTypeIcons[variable.type?.kind.toLowerCase()]} />;
+    return <Icon size="small" svg={typeManager.getDisplayIcon(schema || {})} />;
   }, []);
 
   const renderVariable = (
@@ -80,7 +71,10 @@ export function useVariableTree(params: {
       : false;
     const isCustomSkip = customSkip ? customSkip(variable) : false;
 
-    const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip;
+    // disabled in meta when created
+    const isMetaDisabled = variable.meta?.disabled;
+
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip && !isMetaDisabled;
 
     // If not match, and no children, return null
     if (!isSchemaMatch && !children?.length) {

package/src/effects/provide-json-schema-outputs/config.json

@@ -1,8 +1,7 @@
 {
   "name": "provide-json-schema-outputs",
-  "depMaterials": [
-    "typings/json-schema",
-    "utils/json-schema"
-  ],
-  "depPackages": []
+  "depMaterials": [],
+  "depPackages": [
+    "@flowgram.ai/json-schema"
+  ]
 }

package/src/effects/provide-json-schema-outputs/index.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,
   EffectOptions,
@@ -11,9 +12,6 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { JsonSchemaUtils } from '../../utils';
-import { IJsonSchema } from '../../typings';
-
 export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: IJsonSchema, ctx) => [
     ASTFactory.createVariableDeclaration({

package/src/effects/sync-variable-title/index.ts

@@ -18,6 +18,7 @@ export const syncVariableTitle: EffectOptions[] = [
       context.node.getData(FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
+            ...(_var.meta || {}),
             title: value || context.node.id,
             icon: context.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
           });