diff --git a/examples/src/examples/ExampleGrid.bs.js b/examples/src/examples/ExampleGrid.bs.js new file mode 100644 index 00000000..1a71b75f --- /dev/null +++ b/examples/src/examples/ExampleGrid.bs.js @@ -0,0 +1,200 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + +import * as Caml_option from "rescript/lib/es6/caml_option.js"; +import Box from "@mui/material/Box"; +import * as JsxRuntime from "react/jsx-runtime"; +import Grid from "@mui/material/Grid"; +import Paper from "@mui/material/Paper"; +import Typography from "@mui/material/Typography"; + +function ExampleGrid$Item(props) { + return JsxRuntime.jsx(Paper, { + sx: [{ + color: "text.secondary", + p: 2, + textAlign: "center" + }], + children: Caml_option.some(props.children) + }); +} + +var Item = { + make: ExampleGrid$Item +}; + +function ExampleGrid(props) { + return JsxRuntime.jsxs(Box, { + children: [ + JsxRuntime.jsx(Typography, { + gutterBottom: true, + variant: "h6", + children: "Basic Grid" + }), + JsxRuntime.jsxs(Grid, { + children: [ + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=8" + })), + item: true, + xs: 8 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=4" + })), + item: true, + xs: 4 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=4" + })), + item: true, + xs: 4 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=8" + })), + item: true, + xs: 8 + }) + ], + container: true, + spacing: 2 + }), + JsxRuntime.jsx("br", {}), + JsxRuntime.jsx(Typography, { + gutterBottom: true, + variant: "h6", + children: "Responsive Grid" + }), + JsxRuntime.jsxs(Grid, { + children: [ + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=6 md=8" + })), + item: true, + md: 8, + xs: 6 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=6 md=4" + })), + item: true, + md: 4, + xs: 6 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=6 md=4" + })), + item: true, + md: 4, + xs: 6 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "xs=6 md=8" + })), + item: true, + md: 8, + xs: 6 + }) + ], + container: true, + spacing: 2 + }), + JsxRuntime.jsx("br", {}), + JsxRuntime.jsx(Typography, { + gutterBottom: true, + variant: "h6", + children: "Grid Direction Column" + }), + JsxRuntime.jsxs(Grid, { + children: [ + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "Column 1" + })), + item: true + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "Column 2" + })), + item: true + }) + ], + container: true, + direction: "column", + spacing: 2 + }), + JsxRuntime.jsx("br", {}), + JsxRuntime.jsx(Typography, { + gutterBottom: true, + variant: "h6", + children: "Alignment - Center" + }), + JsxRuntime.jsx(Grid, { + alignItems: "center", + justifyContent: "center", + children: Caml_option.some(JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "Centered" + })), + item: true + })), + container: true, + spacing: 2, + sx: { + minHeight: "100px" + } + }), + JsxRuntime.jsx("br", {}), + JsxRuntime.jsx(Typography, { + gutterBottom: true, + variant: "h6", + children: "Alignment - Space Between" + }), + JsxRuntime.jsxs(Grid, { + justifyContent: "space-between", + children: [ + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "Left" + })), + item: true, + xs: 5 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid$Item, { + children: "Right" + })), + item: true, + xs: 5 + }) + ], + container: true, + spacing: 2, + sx: { + minHeight: "100px" + } + }) + ], + sx: { + flexGrow: 1 + } + }); +} + +var make = ExampleGrid; + +export { + Item , + make , +} +/* @mui/material/Box Not a pure module */ diff --git a/examples/src/examples/ExampleGrid.res b/examples/src/examples/ExampleGrid.res new file mode 100644 index 00000000..23605765 --- /dev/null +++ b/examples/src/examples/ExampleGrid.res @@ -0,0 +1,91 @@ +open Mui + +module Item = { + @react.component + let make = (~children) => + + children + +} + +@react.component +let make = () => { + + {"Basic Grid"->React.string} + + + {"xs=8"->React.string} + + + {"xs=4"->React.string} + + + {"xs=4"->React.string} + + + {"xs=8"->React.string} + + +
+ {"Responsive Grid"->React.string} + + + {"xs=6 md=8"->React.string} + + + {"xs=6 md=4"->React.string} + + + {"xs=6 md=4"->React.string} + + + {"xs=6 md=8"->React.string} + + +
+ {"Grid Direction Column"->React.string} + + + {"Column 1"->React.string} + + + {"Column 2"->React.string} + + +
+ {"Alignment - Center"->React.string} + + + {"Centered"->React.string} + + +
+ + {"Alignment - Space Between"->React.string} + + + + {"Left"->React.string} + + + {"Right"->React.string} + + + +} diff --git a/examples/src/examples/Examples.bs.js b/examples/src/examples/Examples.bs.js index b8b367df..41483976 100644 --- a/examples/src/examples/Examples.bs.js +++ b/examples/src/examples/Examples.bs.js @@ -2,6 +2,7 @@ import * as ExampleBox from "./ExampleBox.bs.js"; import * as Caml_option from "rescript/lib/es6/caml_option.js"; +import * as ExampleGrid from "./ExampleGrid.bs.js"; import * as ExampleList from "./ExampleList.bs.js"; import * as ExampleTabs from "./ExampleTabs.bs.js"; import * as ExampleIcons from "./ExampleIcons.bs.js"; @@ -41,6 +42,30 @@ function Examples(props) { JsxRuntime.jsx(Divider, {}), JsxRuntime.jsx("br", {}), JsxRuntime.jsx("br", {}), + JsxRuntime.jsxs(Grid, { + alignItems: "center", + children: [ + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(Typography, { + variant: "h5", + children: "Grid" + })), + item: true, + md: 6 + }), + JsxRuntime.jsx(Grid, { + children: Caml_option.some(JsxRuntime.jsx(ExampleGrid.make, {})), + item: true, + md: 6 + }) + ], + container: true + }), + JsxRuntime.jsx("br", {}), + JsxRuntime.jsx("br", {}), + JsxRuntime.jsx(Divider, {}), + JsxRuntime.jsx("br", {}), + JsxRuntime.jsx("br", {}), JsxRuntime.jsxs(Grid, { alignItems: "center", children: [ diff --git a/examples/src/examples/Examples.res b/examples/src/examples/Examples.res index 39361473..dc82caba 100644 --- a/examples/src/examples/Examples.res +++ b/examples/src/examples/Examples.res @@ -12,6 +12,19 @@ let make = () => <>

+ + + {"Grid"->React.string} + + + + + +
+
+ +
+
{"Icons"->React.string} diff --git a/packages/rescript-mui-material/src/types/System.res b/packages/rescript-mui-material/src/types/System.res index 93a65e02..83200301 100644 --- a/packages/rescript-mui-material/src/types/System.res +++ b/packages/rescript-mui-material/src/types/System.res @@ -67,6 +67,7 @@ module Value = { | @as("background.default") BackgroundDefault | @as("background.paper") BackgroundPaper + /* Flexbox and Grid Alignment */ | @as("normal") Normal | @as("stretch") Stretch | @as("center") Center @@ -77,6 +78,22 @@ module Value = { | @as("self-start") SelfStart | @as("self-end") SelfEnd | @as("baseline") Baseline + | @as("space-between") SpaceBetween + | @as("space-around") SpaceAround + | @as("space-evenly") SpaceEvenly + | @as("left") Left + | @as("right") Right + + /* Flexbox direction */ + | @as("row") Row + | @as("row-reverse") RowReverse + | @as("column") Column + | @as("column-reverse") ColumnReverse + + /* Flexbox wrap */ + | @as("nowrap") Nowrap + | @as("wrap") Wrap + | @as("wrap-reverse") WrapReverse /* Overflow */ | @as("auto") Auto @@ -140,6 +157,8 @@ type props = { flexShrink?: Value.t, flexWrap?: Value.t, justifyContent?: Value.t, + justifyItems?: Value.t, + justifySelf?: Value.t, order?: Value.t, gap?: Value.t, columnGap?: Value.t,