fix(materials): json schema title & variable selector long text style (#438)

* fix: json schema title

* fix: variable selector style

* feat: add missing license header

* feat: add doc build in gitignore

.gitignore

@@ -1,5 +1,6 @@
 # e2e results
 test-results/
+doc_build/
 
 # Logs
 *.log

apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useVariableTree } from '@flowgram.ai/form-materials';
 import { Tree } from '@douyinfe/semi-ui';
 

apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useEffect } from 'react';
 
 import { JsonSchemaEditor, JsonSchemaUtils } from '@flowgram.ai/form-materials';

apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/index.module.less

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 .panel-wrapper {
   position: relative;
   z-index: 9999;

apps/demo-fixed-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useState } from 'react';
 
 import { Button, Collapsible, Tabs, Tooltip } from '@douyinfe/semi-ui';

apps/demo-fixed-layout/src/plugins/variable-panel-plugin/index.ts

@@ -1 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { createVariablePanelPlugin } from './variable-panel-plugin';

apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { domUtils, injectable, Layer } from '@flowgram.ai/fixed-layout-editor';
 
 import { VariablePanel } from './components/variable-panel';

apps/demo-fixed-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { JsonSchemaUtils } from '@flowgram.ai/form-materials';
 import { ASTFactory, definePluginCreator, GlobalScope } from '@flowgram.ai/fixed-layout-editor';
 

apps/demo-free-layout/src/plugins/variable-panel-plugin/components/full-variable-list.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useVariableTree } from '@flowgram.ai/form-materials';
 import { Tree } from '@douyinfe/semi-ui';
 

apps/demo-free-layout/src/plugins/variable-panel-plugin/components/global-variable-editor.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useEffect } from 'react';
 
 import {

apps/demo-free-layout/src/plugins/variable-panel-plugin/components/index.module.less

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 .panel-wrapper {
   position: relative;
 }

apps/demo-free-layout/src/plugins/variable-panel-plugin/components/variable-panel.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useState } from 'react';
 
 import { Button, Collapsible, Tabs, Tooltip } from '@douyinfe/semi-ui';

apps/demo-free-layout/src/plugins/variable-panel-plugin/index.ts

@@ -1 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { createVariablePanelPlugin } from './variable-panel-plugin';

apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-layer.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { domUtils, injectable, Layer } from '@flowgram.ai/free-layout-editor';
 
 import { VariablePanel } from './components/variable-panel';

apps/demo-free-layout/src/plugins/variable-panel-plugin/variable-panel-plugin.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { ASTFactory, definePluginCreator, GlobalScope } from '@flowgram.ai/free-layout-editor';
 import { JsonSchemaUtils } from '@flowgram.ai/form-materials';
 

packages/materials/form-materials/src/components/dynamic-value-input/index.tsx

@@ -50,6 +50,7 @@ export function DynamicValueInput({
       // Display Variable Or Delete
       return (
         <VariableSelector
+          style={{ width: '100%' }}
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
           includeSchema={includeSchema}

packages/materials/form-materials/src/components/dynamic-value-input/styles.tsx

@@ -13,6 +13,8 @@ export const UIContainer = styled.div`
 
 export const UIMain = styled.div`
   flex-grow: 1;
+  overflow: hidden;
+  min-width: 0;
 
   & .semi-tree-select,
   & .semi-input-number,

packages/materials/form-materials/src/components/variable-selector/index.tsx

@@ -11,7 +11,7 @@ import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
 import { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
-import { UIRootTitle, UITag, UITreeSelect } from './styles';
+import { UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 
 interface PropTypes {
   value?: string[];
@@ -102,7 +102,7 @@ export const VariableSelector = ({
               <UIRootTitle>
                 {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
               </UIRootTitle>
-              {_option.label}
+              <UIVarName>{_option.label}</UIVarName>
             </UITag>
           );
         }}

packages/materials/form-materials/src/components/variable-selector/styles.tsx

@@ -6,11 +6,22 @@
 import styled from 'styled-components';
 import { Tag, TreeSelect } from '@douyinfe/semi-ui';
 
-export const UIRootTitle = styled.span`
+export const UIRootTitle = styled.div`
   margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--semi-color-text-2);
 `;
 
+export const UIVarName = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 50%;
+`;
+
 export const UITag = styled(Tag)`
   width: 100%;
   display: flex;

packages/materials/form-materials/src/utils/json-schema/index.ts

@@ -42,7 +42,10 @@ export namespace JsonSchemaUtils {
             .map(([key, _property]) => ({
               key,
               type: schemaToAST(_property),
-              meta: { description: _property.description },
+              meta: {
+                title: _property.title,
+                description: _property.description,
+              },
             })),
         });
       case 'array':
@@ -114,7 +117,18 @@ export namespace JsonSchemaUtils {
         type: 'object',
         properties: drilldown
           ? Object.fromEntries(
-              typeAST.properties.map((property) => [property.key, astToSchema(property.type)!])
+              typeAST.properties.map((property) => {
+                const schema = astToSchema(property.type);
+
+                if (property.meta?.title && schema) {
+                  schema.title = property.meta.title;
+                }
+                if (property.meta?.description && schema) {
+                  schema.description = property.meta.description;
+                }
+
+                return [property.key, schema!];
+              })
             )
           : {},
       };