Reviewed Changes

lowcoder-org · FalkWolsky · May 30, 2025 · May 29, 2025 · May 30, 2025 · May 30, 2025
commit ac418a7089de9426e464a01c56fa53624ee7b3ae
diff --git a/client/package.json b/client/package.json
@@ -72,25 +72,14 @@
     "eslint-plugin-only-ascii@^0.0.0": "patch:eslint-plugin-only-ascii@npm%3A0.0.0#./.yarn/patches/eslint-plugin-only-ascii-npm-0.0.0-29e3417685.patch"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@jsonforms/core": "3.5.1",
-    "@jsonforms/material-renderers": "^3.5.1",
-    "@jsonforms/react": "3.5.1",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@remixicon/react": "^4.1.1",
-    "@rjsf/antd": "^6.0.0-beta.10",
-    "@rjsf/core": "^6.0.0-beta.10",
-    "@rjsf/utils": "^6.0.0-beta.10",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.10",
     "@supabase/supabase-js": "^2.45.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/styled-components": "^5.1.34",
-    "antd": "^5.25.3",
     "antd-mobile": "^5.34.0",
     "chalk": "4",
-    "dayjs": "^1.11.13",
     "flag-icons": "^7.2.1",
     "number-precision": "^1.6.0",
     "react-countup": "^6.5.3",
@@ -99,7 +88,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.22.5",
     "simplebar": "^6.2.5",
-    "styled-components": "^6.1.18",
     "tui-image-editor": "^3.15.3"
   }
 }
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -28,7 +28,7 @@ import {
   SlotLabelContentArg,
   ViewContentArg,
 } from "@fullcalendar/core";
-import { default as Form, FormProps } from "antd/es/form";
+import { default as Form } from "antd/es/form";
 
 type Theme = typeof Theme;
 type EventModalStyleType = typeof EventModalStyleType;
@@ -776,11 +776,9 @@ export const Event = styled.div<{
   }
 `;
 
-export const FormWrapper = styled(Form)<
-  FormProps & {
-    $modalStyle?: EventModalStyleType;
-  }
->`
+export const FormWrapper = styled(Form)<{
+  $modalStyle?: EventModalStyleType
+}>`
   .ant-form-item-label {
     width: 125px;
     text-align: left;
@@ -789,12 +787,12 @@ export const FormWrapper = styled(Form)<
     label:not(.ant-form-item-required) {
       margin-left: 2px;
     }
-     label.ant-form-item-required{
+      label.ant-form-item-required{
       margin-left: 2px;
     }
     label span {
       ${UnderlineCss}
-
+      
     }
   }
 

diff --git a/client/packages/lowcoder-design/src/components/form.tsx b/client/packages/lowcoder-design/src/components/form.tsx
@@ -1,4 +1,4 @@
-import { default as Form, FormProps } from "antd/es/form";
+import { default as Form } from "antd/es/form";
 import { default as AntdFormItem, FormItemProps as AntdFormItemProps} from "antd/es/form/FormItem";
 import { default as Input, InputProps } from "antd/es/input";
 import { default as TextArea, TextAreaProps } from "antd/es/input/TextArea";
@@ -429,7 +429,7 @@ export const FormKeyValueItem = (props: FormItemProps) => (
   </FormItemContain>
 );
 
-export const DatasourceForm = styled(Form)<FormProps>`
+export const DatasourceForm = styled(Form)`
   display: flex;
   flex-direction: column;
   gap: 8px;

diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
@@ -24,6 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "latest",
+    "@jsonforms/core": "^3.5.1",
     "@lottiefiles/dotlottie-react": "^0.13.0",
     "@manaflair/redux-batch": "^1.0.0",
     "@rjsf/antd": "^5.24.9",
@@ -45,6 +46,7 @@
     "coolshapes-react": "lowcoder-org/coolshapes-react",
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.25.2",
+    "dayjs": "^1.11.13",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "echarts-wordcloud": "^2.1.0",

diff --git a/client/packages/lowcoder/src/components/JSLibraryTree.tsx b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
@@ -134,11 +134,7 @@ const JSLibraryCollapse = styled(Collapse)<{ $mode: "row" | "column" }>`
   }
 
   .lib-label-name {
-    ${css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `}
+    ${EllipsisTextCss};
   }
 `;
 

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -19,10 +19,12 @@ import { AnimationStyle, CheckboxStyle, CheckboxStyleType, InputFieldStyle, Labe
 import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
 import { ValueFromOption, lightenColor } from "lowcoder-design";
+import { EllipsisTextCss } from "lowcoder-design";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 export const getStyle = (style: CheckboxStyleType) => {
@@ -32,10 +34,7 @@ export const getStyle = (style: CheckboxStyleType) => {
       max-width: calc(100% - 8px);
 
       span:not(.ant-checkbox) {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
+        ${EllipsisTextCss};
       }
 
       .ant-checkbox .ant-checkbox-checked > .ant-checkbox-inner {
@@ -80,6 +79,8 @@ export const getStyle = (style: CheckboxStyleType) => {
         ${style.hoverBackground && `border-color: ${style.hoverBackground}`};
       }
 
+
+
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input:focus + .ant-checkbox-inner {
@@ -93,6 +94,8 @@ export const getStyle = (style: CheckboxStyleType) => {
       }
     }
 
+
+
     .ant-checkbox-group-item {
       font-family:${style.fontFamily};
       font-size:${style.textSize};

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -9,22 +9,22 @@ import {
   SelectInputInvalidConfig,
   useSelectInputValidate,
 } from "./selectInputConstants";
-import { ValueFromOption } from "lowcoder-design";
+import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
     .ant-radio-wrapper:not(.ant-radio-wrapper-disabled) {
       color: ${inputFieldStyle?.staticText};
+      // height: 22px;
       max-width: calc(100% - 8px);
       padding: ${inputFieldStyle?.padding};
       span:not(.ant-radio) {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+        ${EllipsisTextCss};
         font-family:${inputFieldStyle?.fontFamily};
         font-size:${inputFieldStyle?.textSize};
         font-weight:${inputFieldStyle?.textWeight};

diff --git a/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
@@ -11,7 +11,7 @@ import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  ${markdownCompCss as any};
+  ${markdownCompCss};
   max-height: 32px;
 
   > .markdown-body {

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -14,8 +14,10 @@ import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCal
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
+
 import { MarginControl } from "../controls/marginControl";
 import { PaddingControl } from "../controls/paddingControl";
+
 import React, { useContext, useEffect, useRef, useMemo } from "react";
 import { EditorContext } from "comps/editorState";
 import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
@@ -100,7 +102,7 @@ const TextContainer = React.memo(styled.div<{
   `};
   ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
   display: flex;
-  ${markdownCompCss as any};
+  ${markdownCompCss};
   overflow-wrap: anywhere;
   .markdown-body {
     overflow-wrap: anywhere;

diff --git a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
@@ -15,9 +15,7 @@ const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
 `;
 
 const DropDownItemLabel = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
   width: 100%;
   font-size: 13px;
   line-height: 15px;

diff --git a/client/packages/lowcoder/src/comps/queries/esQuery.tsx b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
@@ -10,6 +10,7 @@ import {
 } from "lowcoder-core";
 import {
   Dropdown,
+  EllipsisTextCss,
   QueryConfigItemWrapper,
   QueryConfigLabel,
   QueryConfigWrapper,
@@ -114,9 +115,7 @@ const ReadOnlyField = styled.div`
   height: 32px;
   line-height: 32px;
   width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 const InputField = styled.div`
   flex-grow: 1;
@@ -257,7 +256,7 @@ const EsQueryPropertyView = (props: {
               children.path.propertyView({})
             ) : (
               <ReadOnlyField>
-                {JSON.stringify(children.path.toJsonValue())}
+                <>{children.path.toJsonValue()}</>
               </ReadOnlyField>
             )}
           </InputField>

diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import React, { useContext, useMemo, useState } from "react";
 import { DataSourceTypeInfo } from "api/datasourceApi";
 import styled from "styled-components";
-import { CustomSelect  } from "lowcoder-design";
+import { CustomSelect, EllipsisTextCss } from "lowcoder-design";
 import { DatasourceModal } from "pages/datasource/datasourceModal";
 import { InputStatus } from "antd/es/_util/statusUtils";
 import { getDataSource, getDataSourceTypes } from "redux/selectors/datasourceSelectors";
@@ -30,9 +30,7 @@ const SelectOptionLabel = styled.div`
   font-size: 13px;
   display: inline-block;
   flex-grow: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 const SelectOptionContains = styled.div`
   display: flex;

diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -18,6 +18,7 @@ import React, {
 } from "react";
 import { ResizePayload, useResizeDetector } from "react-resize-detector";
 import styled, { css } from "styled-components";
+import { EllipsisTextCss } from "lowcoder-design";
 import { draggingUtils } from "./draggingUtils";
 import type { ResizeHandleAxis } from "./gridLayoutPropTypes";
 import { isEqual } from "lodash";
@@ -56,9 +57,7 @@ const NameDiv = styled.div<{
 `;
 const NameLabel = styled.span`
   max-width: 208px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 
 export const GRID_ITEM_BORDER_WIDTH = 1.5;

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx
@@ -38,7 +38,7 @@ const FormStyled = styled(Form)`
     font-size: 13px;
     line-height: 19px;
     .has-tip {
-      ${UnderlineCss as any};
+      ${UnderlineCss};
     }
   }
 

diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
@@ -3,7 +3,7 @@ import Header from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { ALL_APPLICATIONS_URL, APPLICATION_VIEW_URL, AUTH_LOGIN_URL } from "constants/routesURL";
 import { User } from "constants/userConstants";
-import { isDarkColor, TacoButton, TextEditIcon } from "lowcoder-design";
+import { EllipsisTextCss, isDarkColor, TacoButton, TextEditIcon } from "lowcoder-design";
 import { useSelector } from "react-redux";
 import { currentApplication, getTemplateId, isPublicApplication } from "redux/selectors/applicationSelector";
 import { getUser, isFetchingUser } from "redux/selectors/usersSelectors";
@@ -38,9 +38,7 @@ const HeaderFont = styled.div<{ $bgColor: string }>`
   margin-right: 8px;
   margin-left: 20px;
   max-width: 264px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 
 const StyledLink = styled.a`

diff --git a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
@@ -4,6 +4,7 @@ import {
   BluePlusIcon,
   CustomModal,
   EditPopover,
+  EllipsisTextCss,
   PointIcon,
   ScrollBar,
   Search,
@@ -123,9 +124,7 @@ const QueryType = styled.div`
   font-size: 13px;
 `;
 const QueryName = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
   font-weight: 500;
   font-size: 13px;
 `;

diff --git a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
@@ -1,8 +1,8 @@
 import styled, { css } from "styled-components";
 import { Table } from "components/Table";
 import { default as Button } from "antd/es/button";
-import { default as Checkbox } from "antd/es/checkbox";
-import { default as Form, FormProps } from "antd/es/form";
+import { default as Checkbox} from "antd/es/checkbox";
+import { default as Form, FormInstance } from "antd/es/form";
 import { UnderlineCss } from "lowcoder-design";
 import Steps from "antd/es/steps";
 
@@ -153,7 +153,7 @@ export const SaveButton = styled(Button)`
   }
 `;
 
-export const FormStyled = styled(Form)<FormProps>`
+export const FormStyled = styled(Form)`
   .ant-form-item-control-input-content > input,
   .ant-input-password {
     &:hover {
@@ -170,10 +170,7 @@ export const FormStyled = styled(Form)<FormProps>`
     font-size: 13px;
     line-height: 19px;
     .has-tip {
-      text-decoration: underline;
-      text-decoration-style: dotted;
-      text-underline-offset: 4px;
-      cursor: help;
+      ${UnderlineCss};
     }
   }