@flowgram.ai/form-materials 0.2.32 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.32",
+  "version": "0.3.0",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -34,7 +34,8 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.2.32"
+    "@flowgram.ai/editor": "0.3.0",
+    "@flowgram.ai/json-schema": "0.3.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -50,8 +51,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.32",
-    "@flowgram.ai/ts-config": "0.2.32"
+    "@flowgram.ai/eslint-config": "0.3.0",
+    "@flowgram.ai/ts-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -1,5 +1,9 @@
 {
   "name": "batch-variable-selector",
-  "depMaterials": ["variable-selector"],
-  "depPackages": []
+  "depMaterials": [
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@flowgram.ai/json-schema"
+  ]
 }

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

@@ -5,10 +5,10 @@
 
 import React from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { PrivateScopeProvider } from '@flowgram.ai/editor';
 
 import { VariableSelector, VariableSelectorProps } from '../variable-selector';
-import { IJsonSchema } from '../../typings';
 
 const batchVariableSchema: IJsonSchema = {
   type: 'array',

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

@@ -29,7 +29,7 @@ export const lightTheme: Extension = createTheme({
     gutterForeground: '#666',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#f0f0f0',
+    lineHighlight: '#e1e1e180',
     bracketColors: ['#FFD700', '#DD99FF', '#78B0FF'],
     tooltip: {
       backgroundColor: '#f0f0f0',

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

@@ -0,0 +1,7 @@
+{
+  "name": "code-editor-mini",
+  "depMaterials": [
+    "code-editor"
+  ],
+  "depPackages": []
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { CodeEditor, CodeEditorPropsType } from '../code-editor';
+
+const UIMini = styled.div`
+  .ͼ1 .cm-content {
+    padding: 0;
+  }
+`;
+
+export function CodeEditorMini(props: CodeEditorPropsType) {
+  return (
+    <UIMini>
+      <CodeEditor
+        {...props}
+        options={{
+          lineNumbersGutter: false,
+          foldGutter: false,
+          ...(props.options || {}),
+        }}
+      />
+    </UIMini>
+  );
+}

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

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

package/src/components/condition-row/hooks/useRule.ts

@@ -5,11 +5,11 @@
 
 import { useMemo } from 'react';
 
+import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
 import { rules } from '../constants';
-import { JsonSchemaUtils } from '../../../utils';
-import { IFlowRefValue, JsonSchemaBasicType } from '../../../typings';
+import { IFlowRefValue } from '../../../typings';
 
 export function useRule(left?: IFlowRefValue) {
   const available = useScopeAvailable();

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

@@ -5,6 +5,7 @@
 
 import React, { useMemo } from 'react';
 
+import { JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { Input } from '@douyinfe/semi-ui';
 
 import { ConditionRowValueType, Op } from './types';
@@ -13,7 +14,6 @@ import { useRule } from './hooks/useRule';
 import { useOp } from './hooks/useOp';
 import { VariableSelector } from '../variable-selector';
 import { DynamicValueInput } from '../dynamic-value-input';
-import { JsonSchemaBasicType } from '../../typings';
 
 interface PropTypes {
   value?: ConditionRowValueType;

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

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue, JsonSchemaBasicType } from '../../typings';
+import { JsonSchemaBasicType } from '@flowgram.ai/json-schema';
+
+import { IFlowConstantRefValue, IFlowRefValue } from '../../typings';
 
 export enum Op {
   EQ = 'eq',

package/src/components/constant-input/config.json

@@ -1,6 +1,9 @@
-
 {
   "name": "constant-input",
-  "depMaterials": ["typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui"]
+  "depMaterials": [
+    "shared/json-schema-preset"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui"
+  ]
 }

package/src/components/constant-input/index.tsx

@@ -6,83 +6,22 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 
-import { Input, InputNumber, Select } from '@douyinfe/semi-ui';
+import { Input } from '@douyinfe/semi-ui';
 
-import { PropsType, Strategy } from './types';
-
-const defaultStrategies: Strategy[] = [
-  {
-    hit: (schema) => schema?.type === 'string',
-    Renderer: (props) => (
-      <Input placeholder="Please Input String" size="small" disabled={props.readonly} {...props} />
-    ),
-  },
-  {
-    hit: (schema) => schema?.type === 'number',
-    Renderer: (props) => (
-      <InputNumber
-        placeholder="Please Input Number"
-        size="small"
-        disabled={props.readonly}
-        hideButtons
-        {...props}
-      />
-    ),
-  },
-  {
-    hit: (schema) => schema?.type === 'integer',
-    Renderer: (props) => (
-      <InputNumber
-        placeholder="Please Input Integer"
-        size="small"
-        disabled={props.readonly}
-        hideButtons
-        precision={0}
-        {...props}
-      />
-    ),
-  },
-  {
-    hit: (schema) => schema?.type === 'boolean',
-    Renderer: (props) => {
-      const { value, onChange, ...rest } = props;
-      return (
-        <Select
-          placeholder="Please Select Boolean"
-          size="small"
-          disabled={props.readonly}
-          optionList={[
-            { label: 'True', value: 1 },
-            { label: 'False', value: 0 },
-          ]}
-          value={value ? 1 : 0}
-          onChange={(value) => onChange?.(!!value)}
-          {...rest}
-        />
-      );
-    },
-  },
-];
+import { useTypeManager } from '../../shared';
+import { PropsType } from './types';
 
 export function ConstantInput(props: PropsType) {
-  const {
-    value,
-    onChange,
-    schema,
-    strategies: extraStrategies,
-    fallbackRenderer,
-    readonly,
-    ...rest
-  } = props;
+  const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
 
-  const strategies = useMemo(
-    // user's extraStrategies first
-    () => [...(extraStrategies || []), ...defaultStrategies],
-    [extraStrategies]
-  );
+  const typeManager = useTypeManager();
 
   const Renderer = useMemo(() => {
-    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
+    const strategy = (strategies || []).find((_strategy) => _strategy.hit(schema));
+
+    if (!strategy) {
+      return typeManager.getTypeBySchema(schema)?.ConstantRenderer;
+    }
 
     return strategy?.Renderer;
   }, [strategies, schema]);

package/src/components/constant-input/types.ts

@@ -3,22 +3,18 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IJsonSchema } from '../../typings';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
+import { ConstantRendererProps } from '../../shared';
 
 export interface Strategy<Value = any> {
   hit: (schema: IJsonSchema) => boolean;
-  Renderer: React.FC<RendererProps<Value>>;
-}
-
-export interface RendererProps<Value = any> {
-  value?: Value;
-  onChange?: (value: Value) => void;
-  readonly?: boolean;
+  Renderer: React.FC<ConstantRendererProps<Value>>;
 }
 
-export interface PropsType extends RendererProps {
+export interface PropsType extends ConstantRendererProps {
   schema: IJsonSchema;
   strategies?: Strategy[];
-  fallbackRenderer?: React.FC<RendererProps>;
+  fallbackRenderer?: React.FC<ConstantRendererProps>;
   [key: string]: any;
 }

package/src/components/display-flow-value/config.json

@@ -0,0 +1,8 @@
+{
+  "name": "display-flow-value",
+  "depMaterials": [
+    "components/display-schema-tag",
+    "typings/flow-value"
+  ],
+  "depPackages": []
+}

package/src/components/display-flow-value/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { DisplaySchemaTag } from '../display-schema-tag';
+import { IFlowValue } from '../../typings';
+
+interface PropsType {
+  value?: IFlowValue;
+  title?: JSX.Element | string;
+  showIconInTree?: boolean;
+  typeManager?: JsonSchemaTypeManager;
+}
+
+export function DisplayFlowValue({ value, title, showIconInTree }: PropsType) {
+  const available = useScopeAvailable();
+
+  const variable = value?.type === 'ref' ? available.getByKeyPath(value?.content) : undefined;
+
+  const schema = useMemo(() => {
+    if (value?.type === 'ref') {
+      return JsonSchemaUtils.astToSchema(variable?.type);
+    }
+    if (value?.type === 'template') {
+      return { type: 'string' };
+    }
+    if (value?.type === 'constant') {
+      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' };
+      }
+    }
+
+    return { type: 'unknown' };
+  }, [value, variable?.hash]);
+
+  return (
+    <DisplaySchemaTag
+      title={title}
+      value={schema}
+      showIconInTree={showIconInTree}
+      warning={value?.type === 'ref' && !variable}
+    />
+  );
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "display-outputs",
+  "depMaterials": [
+    "components/display-schema-tag"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui"
+  ]
+}

package/src/components/display-inputs-values/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { DisplayFlowValue } from '../display-flow-value';
+import { IFlowValue } from '../../typings';
+import { DisplayInputsWrapper } from './styles';
+
+interface PropsType {
+  value?: Record<string, IFlowValue | undefined>;
+  showIconInTree?: boolean;
+}
+
+export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
+  const childEntries = Object.entries(value || {});
+
+  return (
+    <DisplayInputsWrapper>
+      {childEntries.map(([key, value]) => (
+        <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
+      ))}
+    </DisplayInputsWrapper>
+  );
+}

package/src/components/display-inputs-values/styles.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const DisplayInputsWrapper = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;

package/src/components/display-outputs/config.json

@@ -0,0 +1,10 @@
+{
+  "name": "display-outputs",
+  "depMaterials": [
+    "components/display-flow-value"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components"
+  ]
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect } from 'react';
+
+import { IJsonSchema, JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
+
+import { DisplaySchemaTag } from '../display-schema-tag';
+import { DisplayOutputsWrapper } from './styles';
+
+interface PropsType {
+  value?: IJsonSchema;
+  showIconInTree?: boolean;
+  displayFromScope?: boolean;
+  typeManager?: JsonSchemaTypeManager;
+}
+
+export function DisplayOutputs({ value, showIconInTree, displayFromScope }: PropsType) {
+  const scope = useCurrentScope();
+  const refresh = useRefresh();
+
+  useEffect(() => {
+    if (!displayFromScope) {
+      return () => null;
+    }
+
+    const disposable = scope.output.onListOrAnyVarChange(() => {
+      refresh();
+    });
+
+    return () => {
+      disposable.dispose();
+    };
+  }, [displayFromScope]);
+
+  const properties: IJsonSchema['properties'] = displayFromScope
+    ? scope.output.variables?.reduce((acm, curr) => {
+        acm = {
+          ...acm,
+          ...(JsonSchemaUtils.astToSchema(curr.type)?.properties || {}),
+        };
+        return acm;
+      }, {})
+    : value?.properties || {};
+
+  const childEntries = Object.entries(properties || {});
+
+  return (
+    <DisplayOutputsWrapper>
+      {childEntries.map(([key, schema]) => (
+        <DisplaySchemaTag key={key} title={key} value={schema} showIconInTree={showIconInTree} />
+      ))}
+    </DisplayOutputsWrapper>
+  );
+}

package/src/components/display-outputs/styles.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const DisplayOutputsWrapper = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;

package/src/components/display-schema-tag/config.json

@@ -0,0 +1,10 @@
+{
+  "name": "display-schema-tag",
+  "depMaterials": [
+    "components/display-schema-tree"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components"
+  ]
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { Popover } from '@douyinfe/semi-ui';
+
+import { DisplaySchemaTree } from '../display-schema-tree';
+import { useTypeManager } from '../../shared';
+import { PopoverContent, StyledTag, TitleSpan } from './styles';
+
+interface PropsType {
+  title?: JSX.Element | string;
+  value?: IJsonSchema;
+  showIconInTree?: boolean;
+  warning?: boolean;
+}
+
+export function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }: PropsType) {
+  const typeManager = useTypeManager();
+  const icon =
+    typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({ type: 'unknown' });
+
+  return (
+    <Popover
+      content={
+        <PopoverContent>
+          <DisplaySchemaTree value={value} typeManager={typeManager} showIcon={showIconInTree} />
+        </PopoverContent>
+      }
+    >
+      <StyledTag color={warning ? 'amber' : 'white'}>
+        {icon &&
+          React.cloneElement(icon, {
+            className: 'tag-icon',
+          })}
+        {title && <TitleSpan>{title}</TitleSpan>}
+      </StyledTag>
+    </Popover>
+  );
+}

package/src/components/display-schema-tag/styles.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+import { Tag } from '@douyinfe/semi-ui';
+
+export const PopoverContent = styled.div`
+  padding: 10px;
+`;
+
+export const StyledTag = styled(Tag)`
+  padding: 4px;
+
+  .tag-icon {
+    width: 12px;
+    height: 12px;
+  }
+`;
+
+export const TitleSpan = styled.span`
+  display: inline-block;
+  margin-left: 4px;
+  margin-top: -1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

package/src/components/display-schema-tree/config.json

@@ -0,0 +1,11 @@
+{
+  "name": "display-schema-tree",
+  "depMaterials": [
+    "shared/json-schema-preset"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components",
+    "@flowgram.ai/json-schema"
+  ]
+}