From c7bddbf001e63a8138ea364b4e95f75e75688fc1 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Sun, 17 Nov 2024 13:09:14 +0100
Subject: [PATCH 1/2] Work in Progress for Responsive Layout

---
 .../ObjectFieldTemplate.tsx                   | 311 +++++++-----------
 .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 132 +++++---
 2 files changed, 214 insertions(+), 229 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
index a852332ff..33751aca8 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
@@ -1,33 +1,14 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Row, Col } from "antd";
-import {
-  ObjectFieldTemplateProps,
-  getTemplate,
-  getUiOptions,
-  descriptionId,
-  titleId,
-  canExpand,
-} from "@rjsf/utils";
-import { ConfigConsumer } from "antd/es/config-provider/context";
+import { Row, Col } from 'antd';
+import { ObjectFieldTemplateProps, getTemplate, getUiOptions, descriptionId, titleId, canExpand } from '@rjsf/utils';
+import { ConfigConsumer } from 'antd/es/config-provider/context';
+import { useContainerWidth } from "./jsonSchemaFormComp";
+import styled from "styled-components";
 
 const DESCRIPTION_COL_STYLE = {
-  paddingBottom: "8px",
+  paddingBottom: '8px',
 };
 
-interface ColSpan {
-  xs: number;
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-}
-
-interface UiOptions {
-  colSpan: ColSpan;
-  rowGutter: number;
-  // other properties...
-}
-
 const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
   const {
     title,
@@ -42,59 +23,62 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
     readonly,
     registry,
   } = props;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-
-  // Monitor the container's width
-  useEffect(() => {
-    const updateWidth = () => {
-      if (containerRef.current) {
-        setContainerWidth(containerRef.current.offsetWidth);
-      }
-    };
-
-    // Create a ResizeObserver to watch for width changes
-    const resizeObserver = new ResizeObserver(() => {
-      updateWidth();
-    });
-
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-
-    // Initial update
-    updateWidth();
-
-    // Cleanup observer on unmount
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
+  const containerWidth = useContainerWidth();
 
   const uiOptions = getUiOptions(uiSchema);
-  const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
 
-  const defaultResponsiveColSpan = (width: number) => {
-    if (width > 1200) return 8; // Wide screens
-    if (width > 768) return 12; // Tablets
-    return 24; // Mobile
+  // Define responsive column spans based on the ui:props or fallback to defaults
+  const defaultResponsiveColSpan = {
+    xs: 24, // Extra small devices
+    sm: 24, // Small devices
+    md: 12, // Medium devices
+    lg: 12, // Large devices
+    xl: 8,  // Extra large devices
   };
 
-  const { rowGutter = 4 } = uiSchema?.["ui:props"] || {};
-
-  const calculateResponsiveColSpan = (element: any): { span: number } => {
+  const { rowGutter = 4 } = uiSchema?.['ui:props'] || {};
+
+  const calculateResponsiveColSpan = (element: any, level: number): { span: number } => {
+
+    console.log("Calculating span for", element.name, "at level", level);
+
+    // root level
+    if (level === 0) return { span: 24 };
+
+    // Check if the element has a layout definition in ui:grid
+    const gridColSpan = uiSchema?.['ui:grid']
+      ?.find((row: Record<string, any>) => row[element.name])
+      ?. [element.name];
+
+    if (gridColSpan) {
+      if (typeof gridColSpan === "number") {
+        return { span: gridColSpan };
+      } else if (typeof gridColSpan === "object") {
+        if (containerWidth > 1200 && gridColSpan.xl !== undefined) {
+          return { span: gridColSpan.xl };
+        } else if (containerWidth > 992 && gridColSpan.lg !== undefined) {
+          return { span: gridColSpan.lg };
+        } else if (containerWidth > 768 && gridColSpan.md !== undefined) {
+          return { span: gridColSpan.md };
+        } else if (containerWidth > 576 && gridColSpan.sm !== undefined) {
+          return { span: gridColSpan.sm };
+        } else if (gridColSpan.xs !== undefined) {
+          return { span: gridColSpan.xs };
+        }
+      }
+    }
 
+    // Fallback to default colSpan or ui:props.colSpan
     const uiSchemaProps = getUiOptions(element.content.props.uiSchema)?.["ui:props"] as
       | { colSpan?: Record<string, number> | number }
       | undefined;
 
     const uiSchemaColSpan = uiSchemaProps?.colSpan;
-    const defaultSpan = containerWidth > 1200 ? 8 : containerWidth > 768 ? 12 : 24;
 
     if (uiSchemaColSpan) {
       if (typeof uiSchemaColSpan === "number") {
@@ -114,133 +98,94 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
       }
     }
 
+    // Default responsive behavior
+    const defaultSpan = containerWidth > 1200 ? 8 : containerWidth > 768 ? 12 : 24;
     return { span: defaultSpan };
   };
 
-  const renderSectionLayout = (properties: any[], uiGrid: any, section: string) => {
-
-    if (uiGrid && Array.isArray(uiGrid)) {
-      return (
-        <Row gutter={rowGutter} key={section}>
-          {uiGrid.map((ui_row: Record<string, any>) =>
-            Object.keys(ui_row).map((row_item) => {
-              const element = properties.find((p) => p.name === row_item);
-              if (element) {
-                const span = calculateResponsiveColSpan(element).span;
-                return (
-                  <Col key={element.name} span={span}>
-                    {element.content}
-                  </Col>
-                );
-              }
-              return null;
-            })
-          )}
-        </Row>
-      );
-    }
-
-    // Default layout if no grid is provided
+  const renderProperties = (properties: any[], level: number) => {
+    console.log("Rendering level:", level); // Debugging level
     return (
-      <Row gutter={rowGutter} key={section}>
-        {properties.map((element) => (
-          <Col key={element.name} {...calculateResponsiveColSpan(element)}>
-            {element.content}
-          </Col>
-        ))}
+      <Row
+        gutter={rowGutter}
+        style={level === 0 ? { width: "100%" } : { marginLeft: -8, marginRight: -8 }}
+      >
+        {properties.map((element) => {
+          const span = calculateResponsiveColSpan(element, level);
+  
+          // Check if the element is an object or array and has nested properties
+          if (element.content?.props?.schema?.type === "object" && element.content.props.properties) {
+            // Render nested objects with an incremented level
+            return (
+              <Col key={element.name} span={24}>
+                <fieldset>
+                  <legend>{element.content.props.title || element.name}</legend>
+                  {renderProperties(element.content.props.properties, level + 1)}
+                </fieldset>
+              </Col>
+            );
+          }
+  
+          // Render normal elements
+          return (
+            <Col key={element.name} span={span.span}>
+              {element.content}
+            </Col>
+          );
+        })}
       </Row>
     );
   };
-
-  const renderCustomLayout = () => {
-    const schemaType = schema.type as string;
-    switch (schemaType) {
-      case "Group":
-        return (
-          <div style={{ border: "1px solid #ccc", padding: "15px", marginBottom: "10px" }}>
-            <h3>{schema.label || "Group"}</h3>
-            {renderSectionLayout(properties, uiSchema?.["ui:grid"], schema.label)}
-          </div>
-        );
-      case "HorizontalLayout":
-        return (
-          <Row gutter={rowGutter} style={{ display: "flex", gap: "10px" }}>
-            {properties.map((element) => (
-              <Col key={element.name} {...calculateResponsiveColSpan(element)}>
-                {element.content}
-              </Col>
-            ))}
-          </Row>
-        );
-      case "VerticalLayout":
-        return (
-          <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
-            {properties.map((element) => (
-              <div key={element.name}>{element.content}</div>
-            ))}
-          </div>
-        );
-      default:
-        return null; // Fall back to default rendering if no match
-    }
-  };
-
-  // Check if the schema is a custom layout type
-  const schemaType = schema.type as string; // Extract schema type safely
-  const isCustomLayout = ["Group", "HorizontalLayout", "VerticalLayout"].includes(schemaType);
-
+  
   return (
-    <div ref={containerRef}>
-      <ConfigConsumer>
-        {(configProps) => (
-          <fieldset id={idSchema.$id} className="form-section">
-            {!isCustomLayout && (
-              <>
-                {schema.type === "object" && title && (
-                  <legend>
-                    <title>Codestin Search App</title>
-          <Form
-            validator={validator}
-            schema={props.schema}
-            uiSchema={props.uiSchema}
-            formData={convertData(props.schema, props.data.value)}
-            onSubmit={() => onSubmit(props)}
-            onChange={(e) => props.data.onChange(e.formData)}
-            transformErrors={(errors) => transformErrors(errors)}
-            templates={{
-              ObjectFieldTemplate: ObjectFieldTemplate,
-              ArrayFieldTemplate: ArrayFieldTemplate,
-              // FieldTemplate: LayoutFieldTemplate,
-            }}
-            widgets={{ searchableSelect: SearchableSelectWidget }}
-            // ErrorList={ErrorList}
-            children={
-              <Button
-                hidden={buttonOptions?.norender}
-                disabled={buttonOptions?.props?.disabled}
-                className={buttonOptions?.props?.className}
-                type="primary"
-                htmlType="submit"
-                style={{ float: "right" }}
-              >
-                {buttonOptions?.submitText ?? trans("event.submit")}
-              </Button>
-            }
-          />
-        </ErrorBoundary>
-        </ScrollBar>
-      </Container>
+      <ContainerWidthContext.Provider value={containerWidth}>
+        <Container $style={props.style} $animationStyle={props.animationStyle} ref={containerRef}>
+          <ScrollBar
+              style={{
+                height: props.autoHeight ? "auto" : "100%",
+                margin: "0px",
+                padding: "0px",
+              }}
+              overflow={"hidden"}
+              hideScrollbar={!props.showVerticalScrollbar}
+            >
+          <ErrorBoundary>
+            <title>Codestin Search App</title>
+            <Form
+              validator={validator}
+              schema={props.schema}
+              uiSchema={props.uiSchema}
+              formData={convertData(props.schema, props.data.value)}
+              onSubmit={() => onSubmit(props)}
+              onChange={(e) => props.data.onChange(e.formData)}
+              transformErrors={(errors) => transformErrors(errors)}
+              templates={{
+                ObjectFieldTemplate: ObjectFieldTemplate,
+                ArrayFieldTemplate: ArrayFieldTemplate,
+                // FieldTemplate: LayoutFieldTemplate,
+              }}
+              widgets={{ searchableSelect: SearchableSelectWidget }}
+              // ErrorList={ErrorList}
+              children={
+                <Button
+                  hidden={buttonOptions?.norender}
+                  disabled={buttonOptions?.props?.disabled}
+                  className={buttonOptions?.props?.className}
+                  type="primary"
+                  htmlType="submit"
+                  style={{ float: "right" }}
+                >
+                  {buttonOptions?.submitText ?? trans("event.submit")}
+                </Button>
+              }
+            />
+          </ErrorBoundary>
+          </ScrollBar>
+        </Container>
+      </ContainerWidthContext.Provider>
     );
   })
     .setPropertyViewFn((children) => {
@@ -445,3 +484,4 @@ FormTmpComp = withMethodExposing(FormTmpComp, [
 ]);
 
 export const JsonSchemaFormComp = FormTmpComp;
+export { FormTmpComp, useContainerWidth };

From fd94adc0f8f703cebf621784144edbecaa5f04ba Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Mon, 18 Nov 2024 15:21:07 +0100
Subject: [PATCH 2/2] Enable Responsiveness for JSON Schema Form

---
 .../jsonSchemaFormComp/ArrayFieldTemplate.tsx | 148 ++++++----
 .../ObjectFieldTemplate.tsx                   | 258 ++++++++++++------
 2 files changed, 275 insertions(+), 131 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ArrayFieldTemplate.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ArrayFieldTemplate.tsx
index 5af2ba32d..6a652d45e 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ArrayFieldTemplate.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ArrayFieldTemplate.tsx
@@ -1,60 +1,114 @@
 import React from 'react';
 import { Button, Row, Col } from 'antd';
-import { ArrayFieldTemplateProps } from '@rjsf/utils';
+import { ArrayFieldTemplateProps, getUiOptions, RJSFSchema } from '@rjsf/utils';
 import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import ObjectFieldTemplate from './ObjectFieldTemplate'; // Ensure this is correctly imported
+
+const DEFAULT_RESPONSIVE_COL_SPAN = {
+  xs: 24,
+  sm: 24,
+  md: 12,
+  lg: 8,
+  xl: 6,
+};
+
+type UiProps = {
+  rowGutter?: number;
+  colSpan?: number | Record<string, number>;
+};
 
 const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
-  const { items, canAdd, onAddClick, title } = props;
+  const { items, canAdd, onAddClick, title, uiSchema, registry } = props;
 
-  return (
-    <fieldset>
-      {title && <legend>{title}</legend>}
-      <Row gutter={[0, 0]}>
-        {items.map((element: any) => (
-          <Col key={element.index} span={24} style={{ display: 'flex', alignItems: 'center' }}>
-            {/* Content container for the array item */}
-            <div style={{ flexGrow: 1 }}>
-              {element.children}
-            </div>
+  // Get UI schema configuration
+  const { rowGutter = 8, colSpan = DEFAULT_RESPONSIVE_COL_SPAN } = getUiOptions(uiSchema)?.["ui:props"] as UiProps || {};
 
-            {/* Container for the control buttons with vertical alignment */}
-            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', paddingTop: "58px" }}>
-              {/* Move down button */}
-              {element.hasMoveDown && (
-                <Button
-                  type="default"
-                  icon={<ArrowDownOutlined />}
-                  onClick={element.onReorderClick(element.index, element.index + 1)}
-                  style={{ marginLeft: '4px' }}
-                />
-              )}
+  const calculateResponsiveColSpan = (): { span: number } => {
+    if (typeof colSpan === 'number') {
+      return { span: colSpan };
+    } else if (typeof colSpan === 'object') {
+      // Return span based on screen width
+      const width = window.innerWidth;
+      if (width > 1200 && colSpan.xl !== undefined) return { span: colSpan.xl };
+      if (width > 992 && colSpan.lg !== undefined) return { span: colSpan.lg };
+      if (width > 768 && colSpan.md !== undefined) return { span: colSpan.md };
+      if (width > 576 && colSpan.sm !== undefined) return { span: colSpan.sm };
+      return { span: colSpan.xs || DEFAULT_RESPONSIVE_COL_SPAN.xs };
+    }
+    return { span: DEFAULT_RESPONSIVE_COL_SPAN.xs };
+  };
 
-              {/* Move up button */}
-              {element.hasMoveUp && (
-                <Button
-                  type="default"
-                  icon={<ArrowUpOutlined />}
-                  onClick={element.onReorderClick(element.index, element.index - 1)}
-                  style={{ marginLeft: '4px' }}
-                />
-              )}
+  const renderItems = () => {
+    return items.map((element) => {
+      const { schema, uiSchema, formData, idSchema, name } = element.children.props;
 
-              {/* Remove button */}
-              {element.hasRemove && (
-                <Button
-                  type="default"
-                  icon={<DeleteOutlined />}
-                  danger
-                  onClick={element.onDropIndexClick(element.index)}
-                  style={{ marginLeft: '4px' }}
-                />
-              )}
-            </div>
-          </Col>
-        ))}
-        {/* Add button for the array */}
+      return (
+        <Col key={element.index} span={24}>
+          {/* Use ObjectFieldTemplate to render each array item */}
+          <ObjectFieldTemplate
+            title=""
+            description={schema.description}
+            properties={[
+              {
+                content: element.children,
+                name,
+                readonly: element.children.props.readonly,
+                disabled: element.children.props.disabled,
+                hidden: false
+              },
+            ]}
+            schema={schema}
+            uiSchema={uiSchema}
+            formData={formData}
+            idSchema={idSchema}
+            registry={registry}
+            readonly={element.children.props.readonly}
+            disabled={element.children.props.disabled} 
+            onAddClick={function (schema: RJSFSchema): () => void {
+              throw new Error('Function not implemented.');
+            } }
+          />
+
+          {/* Control buttons */}
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '8px' }}>
+            {element.hasMoveDown && (
+              <Button
+                type="default"
+                icon={<ArrowDownOutlined />}
+                onClick={element.onReorderClick(element.index, element.index + 1)}
+                style={{ marginLeft: '4px' }}
+              />
+            )}
+            {element.hasMoveUp && (
+              <Button
+                type="default"
+                icon={<ArrowUpOutlined />}
+                onClick={element.onReorderClick(element.index, element.index - 1)}
+                style={{ marginLeft: '4px' }}
+              />
+            )}
+            {element.hasRemove && (
+              <Button
+                type="default"
+                icon={<DeleteOutlined />}
+                danger
+                onClick={element.onDropIndexClick(element.index)}
+                style={{ marginLeft: '4px' }}
+              />
+            )}
+          </div>
+        </Col>
+      );
+    });
+  };
+
+  return (
+    <fieldset>
+      
+      <Row gutter={rowGutter}>
+        {renderItems()} {/* Render items */}
         {canAdd && (
-          <Col span={24} style={{ textAlign: 'center' }}>
+          <Col span={24} style={{ textAlign: 'center', marginTop: '16px' }}>
             <Button type="dashed" onClick={onAddClick} icon={<PlusOutlined />}>
               Add Item
             </Button>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
index 33751aca8..fecde5c57 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
@@ -25,6 +25,8 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
   } = props;
   const containerWidth = useContainerWidth();
 
+  // console.log("ObjectFieldTemplate Props", props);
+
   const uiOptions = getUiOptions(uiSchema);
   const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
   const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
@@ -43,103 +45,188 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
 
   const { rowGutter = 4 } = uiSchema?.['ui:props'] || {};
 
-  const calculateResponsiveColSpan = (element: any, level: number): { span: number } => {
-
-    console.log("Calculating span for", element.name, "at level", level);
-
-    // root level
-    if (level === 0) return { span: 24 };
-
-    // Check if the element has a layout definition in ui:grid
-    const gridColSpan = uiSchema?.['ui:grid']
-      ?.find((row: Record<string, any>) => row[element.name])
-      ?. [element.name];
-
-    if (gridColSpan) {
-      if (typeof gridColSpan === "number") {
-        return { span: gridColSpan };
-      } else if (typeof gridColSpan === "object") {
-        if (containerWidth > 1200 && gridColSpan.xl !== undefined) {
-          return { span: gridColSpan.xl };
-        } else if (containerWidth > 992 && gridColSpan.lg !== undefined) {
-          return { span: gridColSpan.lg };
-        } else if (containerWidth > 768 && gridColSpan.md !== undefined) {
-          return { span: gridColSpan.md };
-        } else if (containerWidth > 576 && gridColSpan.sm !== undefined) {
-          return { span: gridColSpan.sm };
-        } else if (gridColSpan.xs !== undefined) {
-          return { span: gridColSpan.xs };
-        }
-      }
+  const getLegendStyle = (level: number): React.CSSProperties => {
+    switch (level) {
+      case 0:
+        return { fontSize: "16px", fontWeight: "bold", marginBottom: "8px" }; // Form Title
+      case 1:
+        return { fontSize: "14px", fontWeight: "600", marginBottom: "6px" }; // Section Title
+      default:
+        return { fontSize: "12px", fontWeight: "normal", marginBottom: "4px" }; // Field Title
     }
+  };
 
-    // Fallback to default colSpan or ui:props.colSpan
-    const uiSchemaProps = getUiOptions(element.content.props.uiSchema)?.["ui:props"] as
-      | { colSpan?: Record<string, number> | number }
-      | undefined;
-
-    const uiSchemaColSpan = uiSchemaProps?.colSpan;
-
-    if (uiSchemaColSpan) {
-      if (typeof uiSchemaColSpan === "number") {
-        return { span: uiSchemaColSpan };
-      } else if (typeof uiSchemaColSpan === "object") {
-        if (containerWidth > 1200 && uiSchemaColSpan.xl !== undefined) {
-          return { span: uiSchemaColSpan.xl };
-        } else if (containerWidth > 992 && uiSchemaColSpan.lg !== undefined) {
-          return { span: uiSchemaColSpan.lg };
-        } else if (containerWidth > 768 && uiSchemaColSpan.md !== undefined) {
-          return { span: uiSchemaColSpan.md };
-        } else if (containerWidth > 576 && uiSchemaColSpan.sm !== undefined) {
-          return { span: uiSchemaColSpan.sm };
-        } else if (uiSchemaColSpan.xs !== undefined) {
-          return { span: uiSchemaColSpan.xs };
-        }
+  const calculateResponsiveColSpan = (uiSchema: any = {}): { span: number } => {
+    const colSpan = uiSchema?.["ui:colSpan"] || {
+      xs: 24,
+      sm: 24,
+      md: 12,
+      lg: 12,
+      xl: 8,
+    };
+  
+    if (typeof colSpan === "number") {
+      return { span: colSpan };
+    } else if (typeof colSpan === "object") {
+      if (containerWidth > 1200 && colSpan.xl !== undefined) {
+        return { span: colSpan.xl };
+      } else if (containerWidth > 992 && colSpan.lg !== undefined) {
+        return { span: colSpan.lg };
+      } else if (containerWidth > 768 && colSpan.md !== undefined) {
+        return { span: colSpan.md };
+      } else if (containerWidth > 576 && colSpan.sm !== undefined) {
+        return { span: colSpan.sm };
+      } else if (colSpan.xs !== undefined) {
+        return { span: colSpan.xs };
       }
     }
-
-    // Default responsive behavior
-    const defaultSpan = containerWidth > 1200 ? 8 : containerWidth > 768 ? 12 : 24;
-    return { span: defaultSpan };
+    return { span: 24 }; // Default span
   };
-
-  const renderProperties = (properties: any[], level: number) => {
-    console.log("Rendering level:", level); // Debugging level
-    return (
-      <Row
-        gutter={rowGutter}
-        style={level === 0 ? { width: "100%" } : { marginLeft: -8, marginRight: -8 }}
-      >
-        {properties.map((element) => {
-          const span = calculateResponsiveColSpan(element, level);
   
-          // Check if the element is an object or array and has nested properties
-          if (element.content?.props?.schema?.type === "object" && element.content.props.properties) {
-            // Render nested objects with an incremented level
+  const getFieldRenderer = (type: string) => {
+    const typeMap: Record<string, string> = {
+      string: "StringField",        // Handles strings
+      number: "NumberField",        // Handles floating-point numbers
+      integer: "NumberField",       // Handles integers (mapped to NumberField)
+      boolean: "BooleanField",      // Handles true/false values
+      object: "ObjectField",        // Handles nested objects
+      array: "ArrayField",          // Handles arrays
+      null: "NullField",            // Handles null values
+      anyOf: "AnyOfField",          // Handles anyOf schemas
+      oneOf: "OneOfField",          // Handles oneOf schemas
+      schema: "SchemaField",
+    };
+  
+    const fieldName = typeMap[type];
+    return fieldName ? registry.fields[fieldName] : undefined;
+  };
+  
+  const renderFieldsFromSection = (section: any, level: number = 0) => {
+    const { formData, schema, uiSchema } = section.content.props;
+  
+    if (schema.type === "object" && schema.properties) {
+      // Render fields for objects
+      const fieldKeys = Object.keys(schema.properties);
+  
+      return (
+        <Row gutter={rowGutter} style={level === 0 ? { marginBottom: "36px" } : { marginLeft: -8, marginRight: -8, marginBottom: "16px" }}>
+          {fieldKeys.map((fieldKey) => {
+            const fieldSchema = schema.properties[fieldKey];
+            const fieldUiSchema = uiSchema?.[fieldKey] || {};
+            const fieldFormData = formData ? formData[fieldKey] : undefined;
+            const span = calculateResponsiveColSpan(fieldUiSchema);
+  
+            const FieldRenderer = getFieldRenderer(fieldSchema.type);
+  
+            if (!FieldRenderer) {
+              console.error(`No renderer found for field type: ${fieldSchema.type}`);
+              return (
+                <Col key={fieldKey} span={span.span}>
+                  <div>Unsupported field type: {fieldSchema.type}</div>
+                </Col>
+              );
+            }
+  
             return (
-              <Col key={element.name} span={24}>
+              <Col key={fieldKey} span={span.span} style={{marginTop : "12px"}}>
                 <fieldset>
-                  <legend>{element.content.props.title || element.name}</legend>
-                  {renderProperties(element.content.props.properties, level + 1)}
+                  <legend style={getLegendStyle(level)}>{fieldSchema.title || fieldKey}</legend>
+                  <FieldRenderer
+                    schema={fieldSchema}
+                    uiSchema={fieldUiSchema}
+                    formData={fieldFormData}
+                    registry={registry}
+                    idSchema={section.content.props.idSchema[fieldKey]}
+                    name={fieldKey}
+                    required={schema.required?.includes(fieldKey)}
+                    disabled={section.content.props.disabled}
+                    readonly={section.content.props.readonly}
+                    onChange={(value: any) => {
+                      section.content.props.onChange({
+                        ...formData,
+                        [fieldKey]: value,
+                      });
+                    }}
+                    onBlur={section.content.props.onBlur}
+                    onFocus={section.content.props.onFocus}
+                  />
                 </fieldset>
               </Col>
             );
-          }
+          })}
+        </Row>
+      );
+    } else if (schema.type === "array" && schema.items) {
+      // Render fields for arrays
+      const FieldRenderer = getFieldRenderer(schema.type);
   
-          // Render normal elements
-          return (
-            <Col key={element.name} span={span.span}>
-              {element.content}
-            </Col>
-          );
-        })}
-      </Row>
-    );
-  };
+      if (!FieldRenderer) {
+        console.error(`No renderer found for field type: ${schema.type}`);
+        return (
+          <div>
+            <p>Unsupported field type: {schema.type}</p>
+          </div>
+        );
+      }
+  
+      return (
+        <fieldset>
+          <FieldRenderer
+            schema={schema}
+            uiSchema={uiSchema}
+            formData={formData}
+            registry={registry}
+            idSchema={section.content.props.idSchema}
+            name={section.name}
+            required={section.required}
+            disabled={section.content.props.disabled}
+            readonly={section.content.props.readonly}
+            onChange={section.content.props.onChange}
+            onBlur={section.content.props.onBlur}
+            onFocus={section.content.props.onFocus}
+          />
+        </fieldset>
+      );
+    }
   
+    // Log error for unsupported or missing schema types
+    console.error("Unsupported or missing schema type in section:", section);
+    return null;
+  };  
+
+  const renderSections = (properties: any[], level: number) => {
+    return properties.map((section) => {
+        const schema = section.content.props.schema;
+        const isArray = typeof section.content.props.index === 'number';
+        const sectionTitle = schema.title || section.name;
+
+        console.log("Section", sectionTitle, isArray, section);
+
+        return (
+            <Row
+                key={section.name}
+                gutter={rowGutter}
+                style={{ marginBottom: "16px", width: "100%" }}
+            >
+                <Col span={24}>
+                    <fieldset>
+                        {/* Always render the legend for the section itself */}
+                        {level === 0 && !isArray ? (
+                            <legend style={getLegendStyle(level)}>{sectionTitle}</legend>
+                        ) : null}
+
+                        {/* Render the section content */}
+                        {renderFieldsFromSection(section, level + 1)}
+                    </fieldset>
+                </Col>
+            </Row>
+        );
+    });
+  };
+
   return (
     <ConfigConsumer>
-      {(configProps) => (
+      {() => (
         <fieldset id={idSchema.$id} className="form-section">
           {/* Render Title */}
           {schema.type === "object" && title && (
@@ -154,6 +241,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
               />
             </legend>
           )}
+
           {/* Render Description */}
           {description && (
             <Row>
@@ -168,8 +256,10 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
               </Col>
             </Row>
           )}
-          {/* Render Properties */}
-          {renderProperties(properties, 0)}
+
+          {/* Render Sections */}
+          {renderSections(properties,0)}
+
           {/* Expand Button */}
           {canExpand(schema, uiSchema, formData) && (
             <Row justify="end" style={{ width: "100%", marginTop: "24px" }}>