Adding layout components

Author: williamneto

js/src/index.js

@@ -5,7 +5,10 @@ import TextField from '@mui/material/TextField';
 import Checkbox from '@mui/material/Checkbox';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
+
+import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
+import Container from '@mui/material/Container';
 
 import React from "react";
 import ReactDOM from "react-dom";
@@ -60,4 +63,20 @@ export function MDGrid({ children, ...attrs}) {
       {children}
     </Grid>
   );
+}
+
+export function MDContainer({ children, ...attrs}) {
+  return (
+    <Container {...attrs}>
+      {children}
+    </Container>
+  );
+}
+
+export function MDBox({ children, ...attrs}) {
+  return (
+    <Box {...attrs}>
+      {children}
+    </Box>
+  );
 }

reactpy_material/__init__.py

@@ -1,13 +1,15 @@
 __version__ = "0.0.1"
 
 from .core.components import button, button_group, autocomplete, checkbox, select
-from .core.layout import grid
+from .core.layout import grid, container, box
 
 __all__ = [
     "button",
     "button_group",
     "autocomplete",
     "checkbox",
     "select",
-    "grid"
+    "grid",
+    "container",
+    "box"
 ]

reactpy_material/core/layout.py

@@ -12,6 +12,8 @@
 )
 
 md_grid = export(_js_module, "MDGrid")
+md_container = export(_js_module, "MDContainer")
+md_box = export(_js_module, "MDBox")
 
 @component
 def grid(*children: VdomChild, attrs: Any = {}):    
@@ -23,3 +25,26 @@ def grid(*children: VdomChild, attrs: Any = {}):
             children_items += (c, )
 
     return md_grid(attrs, children_items)
+
+@component
+def container(*children: VdomChild, attrs: Any = {}):
+    children_items = ()
+    for c in children:
+        if isinstance(c, Component):
+            children_items += (c.render(), )
+        else:
+            children_items += (c, )
+
+    return md_container(attrs, children_items)
+
+@component
+def box(*children: VdomChild, attrs: Any = {}):
+    children_items = ()
+    for c in children:
+        if isinstance(c, Component):
+            children_items += (c.render(), )
+        else:
+            children_items += (c, )
+
+    return md_box(attrs, children_items)
+