Added suport for JSONForms through ANTd renderer

Author: kamal-qureshi

client/package.json

@@ -72,14 +72,25 @@
     "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",
@@ -88,6 +99,7 @@
     "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"
   }
 }

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -28,7 +28,7 @@ import {
   SlotLabelContentArg,
   ViewContentArg,
 } from "@fullcalendar/core";
-import { default as Form } from "antd/es/form";
+import { default as Form, FormProps } from "antd/es/form";
 
 type Theme = typeof Theme;
 type EventModalStyleType = typeof EventModalStyleType;
@@ -727,7 +727,7 @@ export const Event = styled.div<{
     margin-left: 15px;
     white-space: pre-wrap;
     word-break: break-word;
-    margin-top: 2px; 
+    margin-top: 2px;
   }
 
   &.small {
@@ -761,10 +761,10 @@ export const Event = styled.div<{
   }
   &.past {
     background-color: ${(props) =>
-    `rgba(${props?.$extendedProps?.color}, 0.3)`};
+      `rgba(${props?.$extendedProps?.color}, 0.3)`};
     &::before {
-    background-color: ${(props) => props?.$extendedProps?.color};
-    opacity: 0.3;
+      background-color: ${(props) => props?.$extendedProps?.color};
+      opacity: 0.3;
     }
     &::before,
     .event-title,
@@ -776,9 +776,11 @@ export const Event = styled.div<{
   }
 `;
 
-export const FormWrapper = styled(Form)<{
-  $modalStyle?: EventModalStyleType
-}>`
+export const FormWrapper = styled(Form)<
+  FormProps & {
+    $modalStyle?: EventModalStyleType;
+  }
+>`
   .ant-form-item-label {
     width: 125px;
     text-align: left;
@@ -787,12 +789,11 @@ 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}
-      
     }
   }
 
@@ -1117,12 +1118,12 @@ export const slotLabelFormat = [
   {
     hour: "2-digit",
     minute: "2-digit",
-  }, 
+  },
 ] as FormatterInput[];
 
 export const slotLabelFormatWeek = [
   { week: "short" },
-  { hour: "2-digit" }, 
+  { hour: "2-digit" },
 ] as FormatterInput[];
 
 export const slotLabelFormatMonth = [

client/packages/lowcoder-design/src/components/Dropdown.tsx

@@ -18,9 +18,9 @@ export const DropdownContainer = styled.div<{ $placement: ControlPlacement }>`
   width: ${(props) =>
     props.$placement === "right"
       ? "calc(100% - 96px)"
-      : "bottom"
-      ? "calc(100% - 112px)"
-      : "calc(100% - 136px"};
+      : props.$placement === "bottom"
+        ? "calc(100% - 112px)"
+        : "calc(100% - 136px)"};
   flex-grow: 1;
 
   .ant-select:not(.ant-select-customize-input) .ant-select-selector {
@@ -124,7 +124,8 @@ const FlexDiv = styled.div`
 
 const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
+  width: ${(props) =>
+    props.$placement === "right" ? "96px" : props.$placement === "bottom" ? "112px" : "136px"};
 `;
 
 export type OptionType = {

client/packages/lowcoder-design/src/components/form.tsx

@@ -1,5 +1,5 @@
-import { default as Form } from "antd/es/form";
-import { default as AntdFormItem, FormItemProps as AntdFormItemProps } from "antd/es/form/FormItem";
+import { default as Form, FormProps } 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";
 import { default as InputNumber, InputNumberProps } from "antd/es/input-number";
@@ -429,7 +429,7 @@ export const FormKeyValueItem = (props: FormItemProps) => (
   </FormItemContain>
 );
 
-export const DatasourceForm = styled(Form)`
+export const DatasourceForm = styled(Form)<FormProps>`
   display: flex;
   flex-direction: column;
   gap: 8px;

client/packages/lowcoder/src/components/JSLibraryTree.tsx

@@ -134,7 +134,11 @@ const JSLibraryCollapse = styled(Collapse)<{ $mode: "row" | "column" }>`
   }
 
   .lib-label-name {
-    ${EllipsisTextCss};
+    ${css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `}
   }
 `;