@flowgram.ai/form-materials 0.5.5 → 0.5.7

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

@@ -11,7 +11,7 @@ import {
   useTypeManager,
 } from '@flowgram.ai/json-schema';
 
-import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
+import './styles.css';
 
 interface PropsType {
   value?: IJsonSchema;
@@ -45,15 +45,15 @@ function SchemaTree(props: PropsType) {
   const childEntries = Object.entries(properties || {});
 
   return (
-    <TreeItem depth={depth} key={parentKey || 'root'}>
-      <TreeRow>
-        {depth !== 0 && <HorizontalLine />}
+    <div className={`gedit-m-display-schema-tree-item depth-${depth}`} key={parentKey || 'root'}>
+      <div className="gedit-m-display-schema-tree-row">
+        {depth !== 0 && <div className="gedit-m-display-schema-tree-horizontal-line" />}
         {showIcon &&
           icon &&
           React.cloneElement(icon, {
             className: 'tree-icon',
           })}
-        <TreeTitle>
+        <div className="gedit-m-display-schema-tree-title">
           {parentKey ? (
             <>
               {`${parentKey} (`}
@@ -63,15 +63,15 @@ function SchemaTree(props: PropsType) {
           ) : (
             title
           )}
-        </TreeTitle>
-      </TreeRow>
+        </div>
+      </div>
       {childEntries?.length ? (
-        <TreeLevel>
+        <div className="gedit-m-display-schema-tree-level">
           {childEntries.map(([key, value]) => (
             <SchemaTree key={key} {...props} parentKey={key} value={value} depth={depth + 1} />
           ))}
-        </TreeLevel>
+        </div>
       ) : null}
-    </TreeItem>
+    </div>
   );
 }

package/src/components/display-schema-tree/{styles.tsx → styles.css}

@@ -3,13 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled, { css } from 'styled-components';
-
-export const TreeRow = styled.div`
+.gedit-m-display-schema-tree-row {
   display: flex;
   align-items: center;
 
-  .tree-icon {
+  & .tree-icon {
     margin-right: 8px;
     width: 14px;
     height: 14px;
@@ -17,14 +15,14 @@ export const TreeRow = styled.div`
 
   height: 27px;
   white-space: nowrap;
-`;
+}
 
-export const HorizontalLine = styled.div`
+.gedit-m-display-schema-tree-horizontal-line {
   position: relative;
 
   &::before,
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     background-color: var(--semi-color-text-3);
   }
@@ -35,14 +33,14 @@ export const HorizontalLine = styled.div`
     width: 15px;
     height: 1px;
   }
-`;
+}
 
-export const TreeTitle = styled.div`
-  // overflow: hidden;
-  // text-overflow: ellipsis;
-`;
+.gedit-m-display-schema-tree-title {
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+}
 
-export const TreeLevel = styled.div`
+.gedit-m-display-schema-tree-level {
   padding-left: 30px;
   position: relative;
 
@@ -55,13 +53,13 @@ export const TreeLevel = styled.div`
     left: -22px;
     width: 1px;
   } */
-`;
+}
 
-export const TreeItem = styled.div<{ depth: number }>`
+.gedit-m-display-schema-tree-item {
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     background-color: var(--semi-color-text-3);
   }
@@ -80,11 +78,7 @@ export const TreeItem = styled.div<{ depth: number }>`
     left: -22px;
   }
 
-  ${(props) =>
-    props.depth === 0 &&
-    css`
-      &::before {
-        width: 0px !important;
-      }
-    `}
-`;
+  &.depth-0::before {
+    width: 0px !important;
+  }
+}

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

@@ -20,7 +20,7 @@ import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';
 import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
 
-import { UIContainer, UIMain, UITrigger, UIType } from './styles';
+import './styles.css';
 import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
 interface PropsType {
@@ -144,11 +144,11 @@ export function DynamicValueInput({
   );
 
   return (
-    <UIContainer style={style}>
-      <UIType>{renderTypeSelector()}</UIType>
-      <UIMain>{renderMain()}</UIMain>
-      <UITrigger>{renderTrigger()}</UITrigger>
-    </UIContainer>
+    <div className="gedit-m-dynamic-value-input-container" style={style}>
+      <div className="gedit-m-dynamic-value-input-type">{renderTypeSelector()}</div>
+      <div className="gedit-m-dynamic-value-input-main">{renderMain()}</div>
+      <div className="gedit-m-dynamic-value-input-trigger">{renderTrigger()}</div>
+    </div>
   );
 }
 

package/src/components/dynamic-value-input/{styles.tsx → styles.css}

@@ -3,21 +3,17 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIContainer = styled.div`
+.gedit-m-dynamic-value-input-container {
   display: flex;
   align-items: center;
   border-radius: 4px;
   border: 1px solid var(--semi-color-border);
   line-height: normal;
-
   overflow: hidden;
-
   background-color: var(--semi-color-fill-0);
-`;
+}
 
-export const UIMain = styled.div`
+.gedit-m-dynamic-value-input-main {
   flex-grow: 1;
   overflow: hidden;
   min-width: 0;
@@ -48,16 +44,16 @@ export const UIMain = styled.div`
     border-radius: 0;
     word-break: break-all;
   }
-`;
+}
 
-export const UIType = styled.div`
+.gedit-m-dynamic-value-input-type {
   & .semi-button {
     border-radius: 0;
   }
-`;
+}
 
-export const UITrigger = styled.div`
+.gedit-m-dynamic-value-input-trigger {
   & .semi-button {
     border-radius: 0;
   }
-`;
+}

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

@@ -15,7 +15,7 @@ import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 import { BlurInput } from '@/components/blur-input';
 
 import { PropsType } from './types';
-import { UIRow, UIRows } from './styles';
+import './styles.css';
 
 export function InputsValues({
   value,
@@ -34,9 +34,9 @@ export function InputsValues({
 
   return (
     <div>
-      <UIRows style={style}>
+      <div className="gedit-m-inputs-values-rows" style={style}>
         {list.map((item) => (
-          <UIRow key={item.id}>
+          <div className="gedit-m-inputs-values-row" key={item.id}>
             <BlurInput
               style={{ width: 100, minWidth: 100, maxWidth: 100 }}
               disabled={readonly}
@@ -64,9 +64,9 @@ export function InputsValues({
               size="small"
               onClick={() => remove(item.id)}
             />
-          </UIRow>
+          </div>
         ))}
-      </UIRows>
+      </div>
       <Button
         disabled={readonly}
         icon={<IconPlus />}

package/src/components/inputs-values/{styles.tsx → styles.css}

@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIRows = styled.div`
+.gedit-m-inputs-values-rows {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 10px;
-`;
+}
 
-export const UIRow = styled.div`
+.gedit-m-inputs-values-row {
   display: flex;
   align-items: flex-start;
   gap: 5px;
-`;
+}

package/src/components/inputs-values-tree/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/inputs-values-tree/index.tsx

@@ -13,7 +13,7 @@ import { FlowValueUtils, IFlowValue, IInputsValues } from '@/shared';
 import { useObjectList } from '@/hooks';
 
 import { PropsType } from './types';
-import { UITreeItems } from './styles';
+import './styles.css';
 import { InputValueRow } from './row';
 
 export function InputsValuesTree(props: PropsType) {
@@ -29,7 +29,7 @@ export function InputsValuesTree(props: PropsType) {
 
   return (
     <div>
-      <UITreeItems>
+      <div className="gedit-m-inputs-values-tree-tree-items">
         {list.map((item) => (
           <InputValueRow
             key={item.id}
@@ -43,7 +43,7 @@ export function InputsValuesTree(props: PropsType) {
             constantProps={constantProps}
           />
         ))}
-      </UITreeItems>
+      </div>
       <Button
         style={{ marginTop: 10, marginLeft: 16 }}
         disabled={readonly}

package/src/components/inputs-values-tree/row.tsx

@@ -13,20 +13,11 @@ import { IFlowConstantValue } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 import { PropsType } from './types';
-import {
-  IconAddChildren,
-  UIActions,
-  UICollapseTrigger,
-  UICollapsible,
-  UIRow,
-  UITreeItemLeft,
-  UITreeItemMain,
-  UITreeItemRight,
-  UITreeItems,
-} from './styles';
+import './styles.css';
 import { useChildList } from './hooks/use-child-list';
 import { InjectDynamicValueInput } from '../dynamic-value-input';
 import { BlurInput } from '../blur-input';
+import { IconAddChildren } from './icon';
 
 const AddObjectChildStrategy: ConstantInputStrategy = {
   hit: (schema) => schema.type === 'object',
@@ -88,16 +79,23 @@ export function InputValueRow(
 
   return (
     <>
-      <UITreeItemLeft $isLast={$isLast} $showLine={$level > 0} $showCollapse={hasChildren}>
+      <div
+        className={`gedit-m-inputs-values-tree-tree-item-left ${$level > 0 ? 'show-line' : ''} ${
+          $isLast ? 'is-last' : ''
+        } ${hasChildren ? 'show-collapse' : ''}`}
+      >
         {hasChildren && (
-          <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
+          <div
+            className="gedit-m-inputs-values-tree-collapse-trigger"
+            onClick={() => setCollapse((_collapse) => !_collapse)}
+          >
             {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
-          </UICollapseTrigger>
+          </div>
         )}
-      </UITreeItemLeft>
-      <UITreeItemRight>
-        <UITreeItemMain>
-          <UIRow>
+      </div>
+      <div className="gedit-m-inputs-values-tree-tree-item-right">
+        <div className="gedit-m-inputs-values-tree-tree-item-main">
+          <div className="gedit-m-inputs-values-tree-row">
             <BlurInput
               style={{ width: 100, minWidth: 100, maxWidth: 100 }}
               disabled={readonly}
@@ -117,7 +115,7 @@ export function InputValueRow(
                 strategies,
               }}
             />
-            <UIActions>
+            <div className="gedit-m-inputs-values-tree-actions">
               {canAddField && (
                 <IconButton
                   disabled={readonly}
@@ -141,12 +139,12 @@ export function InputValueRow(
                 size="small"
                 onClick={() => onRemove?.()}
               />
-            </UIActions>
-          </UIRow>
-        </UITreeItemMain>
+            </div>
+          </div>
+        </div>
         {hasChildren && (
-          <UICollapsible $collapse={collapse}>
-            <UITreeItems $shrink={true}>
+          <div className={`gedit-m-inputs-values-tree-collapsible ${collapse ? 'collapse' : ''}`}>
+            <div className="gedit-m-inputs-values-tree-tree-items shrink">
               {list.map((_item, index) => (
                 <InputValueRow
                   readonly={readonly}
@@ -168,10 +166,10 @@ export function InputValueRow(
                   $isLast={index === list.length - 1}
                 />
               ))}
-            </UITreeItems>
-          </UICollapsible>
+            </div>
+          </div>
         )}
-      </UITreeItemRight>
+      </div>
     </>
   );
 }

package/src/components/inputs-values-tree/styles.css

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-inputs-values-tree-container {
+}
+
+.gedit-m-inputs-values-tree-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+}
+
+.gedit-m-inputs-values-tree-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-inputs-values-tree-tree-items {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.gedit-m-inputs-values-tree-tree-items.shrink {
+  padding-left: 3px;
+  margin-top: 10px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left {
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+}
+
+.gedit-m-inputs-values-tree-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-inputs-values-tree-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-inputs-values-tree-tree-item-left.show-line.is-last::before {
+  height: 24px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left.show-line.show-collapse::after {
+  width: 12px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.gedit-m-inputs-values-tree-tree-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.gedit-m-inputs-values-tree-collapsible {
+  display: none;
+}
+
+.gedit-m-inputs-values-tree-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-inputs-values-tree-actions {
+  white-space: nowrap;
+}

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/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} />;