Fix/container props and test improvements

examples/react/src/basic-ui/components/Containers/FormField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export const FormField = ({ children, ...props }: any) => {
-    return <div {...props}>{children}</div>;
+    return <div data-test-id="FormField" {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export const FormSectionContainer = ({ children, ...props }: any) => {
-    return <div style={{ marginBottom: '24px' }} {...props}>{children}</div>;
+    return <div data-test-id="FormSectionContainer" style={{ marginBottom: '24px' }} {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export const FormSectionGroup = ({ children, columns, ...props }: any) => {
     const gridColumns = columns || 'repeat(auto-fit, minmax(200px, 1fr))';
-    return <div style={{ display: 'grid', gridTemplateColumns: gridColumns, gap: '16px' }} {...props}>{children}</div>;
+    return <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: gridColumns, gap: '16px' }} {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export const FormSectionGroupContainer = ({ children, ...props }: any) => {
-    return <div {...props}>{children}</div>;
+    return <div data-test-id="FormSectionGroupContainer" {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export const FormSectionTitle = ({ 'x-content': content, children, ...props }: any) => {
-    return <h2 style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333' }} {...props}>{content || children}</h2>;
+    return <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333' }} {...props}>{content || children}</h2>;
   };

examples/react/src/basic-ui/pages/BasicFormPage.tsx

@@ -22,12 +22,12 @@ export function BasicFormPage() {
     <>
       <Paper elevation={2} sx={{ p: 3 }}>
         <Tabs value={tabValue} onChange={handleTabChange} aria-label="basic tabs">
-          <Tab label="Simple Form (Native)" />
-          <Tab label="Complex Form (Native)" />
-          <Tab label="Modal Form" />
-          <Tab label="with React Hook Form" />
-          <Tab label="with Formik" />
-          <Tab label="Expressions Example" />
+          <Tab data-test-id="simple-form-tab" label="Simple Form (Native)" />
+          <Tab data-test-id="complex-form-tab" label="Complex Form (Native)" />
+          <Tab data-test-id="modal-form-tab" label="Modal Form" />
+          <Tab data-test-id="rhf-form-tab" label="with React Hook Form" />
+          <Tab data-test-id="formik-form-tab" label="with Formik" />
+          <Tab data-test-id="expressions-example-tab" label="Expressions Example" />
         </Tabs>
 
         <TabPanel value={tabValue} index={0}>

examples/react/src/chakra-ui/components/Containers/FormField.tsx

@@ -2,5 +2,5 @@ import React from "react";
 import { Box } from "@chakra-ui/react";
 
 export const FormField = ({ children, ...props }: any) => {
-    return <Box {...props}>{children}</Box>;
+    return <Box data-test-id="FormField" {...props}>{children}</Box>;
   };

examples/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx

@@ -1,15 +1,13 @@
 import React from "react";
-import { Grid, GridItem } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
 
 export const FormSectionGroup = ({ children, 'x-component-props': xComponentProps, ...props }: any) => {
     const columns = xComponentProps?.columns || '1fr 1fr';
     const gridColumns = columns === '1fr' ? 1 : 2;
 
     return (
-      <Grid templateColumns={`repeat(${gridColumns}, 1fr)`} gap={4} {...props}>
-        {React.Children.map(children, (child, index) => (
-          <GridItem key={index}>{child}</GridItem>
-        ))}
+      <Grid data-test-id="FormSectionGroup" templateColumns={`repeat(${gridColumns}, 1fr)`} gap={4} {...props}>
+        {children}
       </Grid>
     );
   };

examples/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx

@@ -2,5 +2,5 @@ import React from "react";
 import { Box } from "@chakra-ui/react";
 
 export const FormSectionGroupContainer = ({ children, ...props }: any) => {
-    return <Box {...props}>{children}</Box>;
+    return <Box data-test-id="FormSectionGroupContainer" {...props}>{children}</Box>;
   };

examples/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx

@@ -2,12 +2,12 @@ import React from "react";
 import { Checkbox } from "@chakra-ui/react";
 
 export const InputCheckbox = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, checked, onChange, ...rest } = props;
+    const { label, name, value, onChange, ...rest } = props;
     return (
       <Checkbox
         ref={ref}
         name={name}
-        isChecked={checked || false}
+        isChecked={value || false}
         onChange={(e) => onChange?.(e.target.checked)}
         data-test-id={name}
         {...rest}

examples/react/src/index.css

@@ -12,3 +12,7 @@ code {
     monospace;
 }
 
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+

examples/react/src/material-ui/components/Containers/FormField.tsx

@@ -2,5 +2,5 @@ import React from "react";
 import { Box } from "@mui/material";
 
 export const FormField = ({ children, ...props }: any) => {
-  return <Box {...props}>{children}</Box>;
+  return <Box data-test-id="FormField" {...props}>{children}</Box>;
 };

examples/react/src/material-ui/components/Containers/FormSectionGroup.tsx

@@ -1,29 +1,23 @@
 import React from "react";
-import { Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 
 export const FormSectionGroup = ({
   children,
   "x-component-props": xComponentProps,
   ...props
 }: any) => {
   const columns = xComponentProps?.columns || "1fr 1fr";
-  const gridColumns = columns === "1fr" ? 12 : 6;
+  const gridColumns = columns === "1fr" ? 1 : 2;
 
   return (
-    <Grid
-      container
-      spacing={2}
+    <Box
+      data-test-id="FormSectionGroup"
+      display="grid"
+      gridTemplateColumns={`repeat(${gridColumns}, 1fr)`}
+      gap={4}
       {...props}
     >
-      {React.Children.map(children, (child) => (
-        <Grid
-          item
-          xs={12}
-          sm={gridColumns}
-        >
-          {child}
-        </Grid>
-      ))}
-    </Grid>
+      {children}
+    </Box>
   );
 };

examples/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx

@@ -2,5 +2,5 @@ import React from "react";
 import { Box } from "@mui/material";
 
 export const FormSectionGroupContainer = ({ children, ...props }: any) => {
-  return <Box {...props}>{children}</Box>;
+  return <Box data-test-id="FormSectionGroupContainer" {...props}>{children}</Box>;
 };

examples/react/src/material-ui/components/Inputs/InputCheckbox.tsx

@@ -4,14 +4,14 @@ import { Checkbox } from "@mui/material";
 
 export const InputCheckbox = React.forwardRef<HTMLInputElement, any>(
   (props, ref) => {
-    const { label, name, checked, onChange, ...rest } = props;
+    const { label, name, value, onChange, ...rest } = props;
     return (
       <FormControlLabel
         control={
           <Checkbox
             inputRef={ref}
             name={name}
-            checked={checked || false}
+            checked={value || false}
             onChange={(e) => onChange?.(e.target.checked)}
             data-test-id={name}
             {...rest}

instances/form/complex-form.json

@@ -23,15 +23,12 @@
             "basicInfo": {
               "type": "object",
               "x-component": "FormSectionGroup",
-              "x-component-props": {
-                "columns": "1fr 1fr"
-              },
               "properties": {
                 "email": {
                   "type": "object",
                   "x-component": "FormField",
                   "x-ui": {
-                    "order": 1
+                    "order": 3
                   },
                   "properties": {
                     "email": {
@@ -40,27 +37,27 @@
                       "x-component-props": {
                         "type": "email",
                         "label": "Email Address",
-                        "placeholder": "example@email.com"
-                      },
-                      "x-rules": {
+                        "placeholder": "example@email.com",
                         "required": true
                       }
+
                     }
                   }
                 },
                 "phone": {
                   "type": "object",
                   "x-component": "FormField",
                   "x-ui": {
-                    "order": 2
+                    "order": 4
                   },
                   "properties": {
                     "phone": {
                       "type": "string",
                       "x-component": "InputPhone",
                       "x-component-props": {
                         "label": "Phone Number",
-                        "placeholder": "(123) 456-7890"
+                        "placeholder": "(123) 456-7890",
+                        "required": true
                       }
                     }
                   }
@@ -90,10 +87,43 @@
             "basicInfo": {
               "type": "object",
               "x-component": "FormSectionGroup",
-              "x-component-props": {
-                "columns": "1fr 1fr"
-              },
               "properties": {
+                "firstName": {
+                  "type": "object",
+                  "x-component": "FormField",
+                  "x-ui": {
+                    "order": 1
+                  },
+                  "properties": {
+                    "firstName": {
+                      "type": "string",
+                      "x-component": "InputText",
+                      "x-component-props": {
+                        "label": "First Name",
+                        "placeholder": "Enter your first name",
+                        "required": true
+                      }
+                    }
+                  }
+                },
+                "lastName": {
+                  "type": "object",
+                  "x-component": "FormField",
+                  "x-ui": {
+                    "order": 2
+                  },
+                  "properties": {
+                    "lastName": {
+                      "type": "string",
+                      "x-component": "InputText",
+                      "x-component-props": {
+                        "label": "Last Name",
+                        "placeholder": "Enter your last name",
+                        "required": true
+                      }
+                    }
+                  }
+                },
                 "userType": {
                   "type": "object",
                   "x-component": "FormField",
@@ -136,9 +166,6 @@
             "additionalInfo": {
               "type": "object",
               "x-component": "FormSectionGroup",
-              "x-component-props": {
-                "columns": "1fr"
-              },
               "properties": {
                 "bio": {
                   "type": "object",
@@ -157,28 +184,15 @@
                     }
                   }
                 },
-                "age": {
-                  "type": "object",
-                  "x-component": "FormField",
-                  "x-ui": {
-                    "order": 6
-                  },
-                  "properties": {
-                    "age": {
-                      "type": "number",
-                      "x-component": "InputNumber",
-                      "x-component-props": {
-                        "label": "Age",
-                        "placeholder": "Enter your age",
-                        "min": 0,
-                        "max": 120
-                      }
-                    }
-                  }
-                },
                 "acceptTerms": {
                   "type": "object",
                   "x-component": "FormField",
+                  "x-component-props": {
+                   "style": {
+                    "display": "flex",
+                    "alignItems": "center"
+                   } 
+                  },
                   "x-ui": {
                     "order": 7
                   },

packages/core/src/registry/renderer-registry.ts

@@ -37,7 +37,9 @@ export const defaultTypeRenderers: Record<ComponentType, RendererFn> = {
     return runtime.create(spec, propsWithChildren);
   },
   'container': (spec, props, runtime, children) => {
-    const sanitized = sanitizePropsForDOM(props);
+    const xComponentProps = props['x-component-props'] || {};
+    const mergedProps = { ...props, ...xComponentProps };
+    const sanitized = sanitizePropsForDOM(mergedProps);
     const propsWithChildren = children && children.length > 0 
       ? { ...sanitized, children }
       : sanitized;