From 93665d6f3c042890ebafa96bfd15d744617aa103 Mon Sep 17 00:00:00 2001
From: Yash Shah <49yash@gmail.com>
Date: Wed, 25 Dec 2024 01:06:00 +0530
Subject: [PATCH] [docs] Add interactive demo for Grid v2 (#44820)

---
 .../components/grid2/InteractiveGrid.js       | 184 ++++++++++++++++
 .../components/grid2/InteractiveGrid.tsx      | 206 ++++++++++++++++++
 docs/data/material/components/grid2/grid2.md  |   6 +
 3 files changed, 396 insertions(+)
 create mode 100644 docs/data/material/components/grid2/InteractiveGrid.js
 create mode 100644 docs/data/material/components/grid2/InteractiveGrid.tsx

diff --git a/docs/data/material/components/grid2/InteractiveGrid.js b/docs/data/material/components/grid2/InteractiveGrid.js
new file mode 100644
index 00000000000000..b3f33df5df6557
--- /dev/null
+++ b/docs/data/material/components/grid2/InteractiveGrid.js
@@ -0,0 +1,184 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid2';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import Paper from '@mui/material/Paper';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+
+export default function InteractiveGrid() {
+  const [direction, setDirection] = React.useState('row');
+  const [justifyContent, setJustifyContent] = React.useState('center');
+  const [alignItems, setAlignItems] = React.useState('center');
+
+  const jsx = `
+<Grid
+  container
+  direction="${direction}"
+  sx={{
+    justifyContent: "${justifyContent}",
+    alignItems: "${alignItems}",
+  }}
+>
+`;
+
+  return (
+    <Grid sx={{ flexGrow: 1 }} container>
+      <Grid size={12}>
+        <Grid
+          container
+          spacing={2}
+          direction={direction}
+          sx={{ alignItems, justifyContent, height: 300, pb: 2 }}
+        >
+          {[0, 1, 2].map((value) => (
+            <Grid key={value}>
+              <Paper
+                sx={(theme) => ({
+                  p: 2,
+                  backgroundColor: '#fff',
+                  height: '100%',
+                  color: 'text.secondary',
+                  pt: `${(value + 1) * 10}px`,
+                  pb: `${(value + 1) * 10}px`,
+                  ...theme.applyStyles('dark', {
+                    backgroundColor: '#1A2027',
+                  }),
+                })}
+              >
+                {`Cell ${value + 1}`}
+              </Paper>
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+      <Grid size={12}>
+        <Paper sx={{ p: 2 }}>
+          <Grid container spacing={3}>
+            <Grid size={12}>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">direction</FormLabel>
+                <RadioGroup
+                  row
+                  name="direction"
+                  aria-label="direction"
+                  value={direction}
+                  onChange={(event) => {
+                    setDirection(event.target.value);
+                  }}
+                >
+                  <FormControlLabel value="row" control={<Radio />} label="row" />
+                  <FormControlLabel
+                    value="row-reverse"
+                    control={<Radio />}
+                    label="row-reverse"
+                  />
+                  <FormControlLabel
+                    value="column"
+                    control={<Radio />}
+                    label="column"
+                  />
+                  <FormControlLabel
+                    value="column-reverse"
+                    control={<Radio />}
+                    label="column-reverse"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid size={12}>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">justifyContent</FormLabel>
+                <RadioGroup
+                  row
+                  name="justifyContent"
+                  aria-label="justifyContent"
+                  value={justifyContent}
+                  onChange={(event) => {
+                    setJustifyContent(event.target.value);
+                  }}
+                >
+                  <FormControlLabel
+                    value="flex-start"
+                    control={<Radio />}
+                    label="flex-start"
+                  />
+                  <FormControlLabel
+                    value="center"
+                    control={<Radio />}
+                    label="center"
+                  />
+                  <FormControlLabel
+                    value="flex-end"
+                    control={<Radio />}
+                    label="flex-end"
+                  />
+                  <FormControlLabel
+                    value="space-between"
+                    control={<Radio />}
+                    label="space-between"
+                  />
+                  <FormControlLabel
+                    value="space-around"
+                    control={<Radio />}
+                    label="space-around"
+                  />
+                  <FormControlLabel
+                    value="space-evenly"
+                    control={<Radio />}
+                    label="space-evenly"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid size={12}>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">alignItems</FormLabel>
+                <RadioGroup
+                  row
+                  name="alignItems"
+                  aria-label="align items"
+                  value={alignItems}
+                  onChange={(event) => {
+                    setAlignItems(event.target.value);
+                  }}
+                >
+                  <FormControlLabel
+                    value="flex-start"
+                    control={<Radio />}
+                    label="flex-start"
+                  />
+                  <FormControlLabel
+                    value="center"
+                    control={<Radio />}
+                    label="center"
+                  />
+                  <FormControlLabel
+                    value="flex-end"
+                    control={<Radio />}
+                    label="flex-end"
+                  />
+                  <FormControlLabel
+                    value="stretch"
+                    control={<Radio />}
+                    label="stretch"
+                  />
+                  <FormControlLabel
+                    value="baseline"
+                    control={<Radio />}
+                    label="baseline"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+      <Grid size={12}>
+        <HighlightedCode code={jsx} language="jsx" />
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/docs/data/material/components/grid2/InteractiveGrid.tsx b/docs/data/material/components/grid2/InteractiveGrid.tsx
new file mode 100644
index 00000000000000..6dabaafb7a974f
--- /dev/null
+++ b/docs/data/material/components/grid2/InteractiveGrid.tsx
@@ -0,0 +1,206 @@
+import * as React from 'react';
+import Grid, { GridDirection } from '@mui/material/Grid2';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import Paper from '@mui/material/Paper';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+
+type GridItemsAlignment =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+
+type GridJustification =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
+export default function InteractiveGrid() {
+  const [direction, setDirection] = React.useState<GridDirection>('row');
+  const [justifyContent, setJustifyContent] =
+    React.useState<GridJustification>('center');
+  const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');
+
+  const jsx = `
+<Grid
+  container
+  direction="${direction}"
+  sx={{
+    justifyContent: "${justifyContent}",
+    alignItems: "${alignItems}",
+  }}
+>
+`;
+
+  return (
+    <Grid sx={{ flexGrow: 1 }} container>
+      <Grid size={12}>
+        <Grid
+          container
+          spacing={2}
+          direction={direction}
+          sx={{ alignItems, justifyContent, height: 300, pb: 2 }}
+        >
+          {[0, 1, 2].map((value) => (
+            <Grid key={value}>
+              <Paper
+                sx={(theme) => ({
+                  p: 2,
+                  backgroundColor: '#fff',
+                  height: '100%',
+                  color: 'text.secondary',
+                  pt: `${(value + 1) * 10}px`,
+                  pb: `${(value + 1) * 10}px`,
+                  ...theme.applyStyles('dark', {
+                    backgroundColor: '#1A2027',
+                  }),
+                })}
+              >
+                {`Cell ${value + 1}`}
+              </Paper>
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+      <Grid size={12}>
+        <Paper sx={{ p: 2 }}>
+          <Grid container spacing={3}>
+            <Grid size={12}>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">direction</FormLabel>
+                <RadioGroup
+                  row
+                  name="direction"
+                  aria-label="direction"
+                  value={direction}
+                  onChange={(event) => {
+                    setDirection(
+                      (event.target as HTMLInputElement).value as GridDirection,
+                    );
+                  }}
+                >
+                  <FormControlLabel value="row" control={<Radio />} label="row" />
+                  <FormControlLabel
+                    value="row-reverse"
+                    control={<Radio />}
+                    label="row-reverse"
+                  />
+                  <FormControlLabel
+                    value="column"
+                    control={<Radio />}
+                    label="column"
+                  />
+                  <FormControlLabel
+                    value="column-reverse"
+                    control={<Radio />}
+                    label="column-reverse"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid size={12}>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">justifyContent</FormLabel>
+                <RadioGroup
+                  row
+                  name="justifyContent"
+                  aria-label="justifyContent"
+                  value={justifyContent}
+                  onChange={(event) => {
+                    setJustifyContent(
+                      (event.target as HTMLInputElement).value as GridJustification,
+                    );
+                  }}
+                >
+                  <FormControlLabel
+                    value="flex-start"
+                    control={<Radio />}
+                    label="flex-start"
+                  />
+                  <FormControlLabel
+                    value="center"
+                    control={<Radio />}
+                    label="center"
+                  />
+                  <FormControlLabel
+                    value="flex-end"
+                    control={<Radio />}
+                    label="flex-end"
+                  />
+                  <FormControlLabel
+                    value="space-between"
+                    control={<Radio />}
+                    label="space-between"
+                  />
+                  <FormControlLabel
+                    value="space-around"
+                    control={<Radio />}
+                    label="space-around"
+                  />
+                  <FormControlLabel
+                    value="space-evenly"
+                    control={<Radio />}
+                    label="space-evenly"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid size={12}>
+              <FormControl component="fieldset">
+                <FormLabel component="legend">alignItems</FormLabel>
+                <RadioGroup
+                  row
+                  name="alignItems"
+                  aria-label="align items"
+                  value={alignItems}
+                  onChange={(event) => {
+                    setAlignItems(
+                      (event.target as HTMLInputElement).value as GridItemsAlignment,
+                    );
+                  }}
+                >
+                  <FormControlLabel
+                    value="flex-start"
+                    control={<Radio />}
+                    label="flex-start"
+                  />
+                  <FormControlLabel
+                    value="center"
+                    control={<Radio />}
+                    label="center"
+                  />
+                  <FormControlLabel
+                    value="flex-end"
+                    control={<Radio />}
+                    label="flex-end"
+                  />
+                  <FormControlLabel
+                    value="stretch"
+                    control={<Radio />}
+                    label="stretch"
+                  />
+                  <FormControlLabel
+                    value="baseline"
+                    control={<Radio />}
+                    label="baseline"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+      <Grid size={12}>
+        <HighlightedCode code={jsx} language="jsx" />
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md
index 5ab1d1f7873a73..aca1e24e0bb535 100644
--- a/docs/data/material/components/grid2/grid2.md
+++ b/docs/data/material/components/grid2/grid2.md
@@ -92,6 +92,12 @@ Responsive values are supported by:
 - `spacing`
 - `offset`
 
+## Interactive
+
+Below is an interactive demo that lets you explore the visual results of the different settings:
+
+{{"demo": "InteractiveGrid.js", "hideToolbar": true, "bg": true}}
+
 ## Auto-layout
 
 The auto-layout feature gives equal space to all items present.