[Joy UI] Add Modal component

docs/data/joy/components/modal/AlertDialogModal.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import ModalDialogTitle from '@mui/joy/ModalDialogTitle';
+import ModalDialogDescription from '@mui/joy/ModalDialogDescription';
+import DeleteForever from '@mui/icons-material/DeleteForever';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicModalDialog() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button
+        variant="outlined"
+        color="danger"
+        endIcon={<DeleteForever />}
+        onClick={() => setOpen(true)}
+      >
+        Discard
+      </Button>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <ModalDialog variant="outlined" role="alertdialog">
+          <ModalDialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <WarningRoundedIcon />
+            <Typography
+              component="h2"
+              id="modal-title"
+              level="h5"
+              textColor="inherit"
+              fontWeight="lg"
+            >
+              Confirmation
+            </Typography>
+          </ModalDialogTitle>
+          <ModalDialogDescription sx={{ mb: 3 }}>
+            <Typography id="modal-desc" textColor="text.tertiary">
+              Are you sure you want to discard all of your notes?
+            </Typography>
+          </ModalDialogDescription>
+          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+            <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="solid" color="danger" onClick={() => setOpen(false)}>
+              Discard notes
+            </Button>
+          </Box>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/modal/BasicModal.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalClose from '@mui/joy/ModalClose';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+
+export default function BasicModalDialog() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+      >
+        <Sheet
+          aria-labelledby="modal-title"
+          aria-describedby="modal-desc"
+          variant="outlined"
+          sx={{
+            maxWidth: 500,
+            borderRadius: 'md',
+            p: 3,
+            boxShadow: 'lg',
+          }}
+        >
+          <ModalClose
+            variant="outlined"
+            sx={{
+              top: 'calc(-1/4 * var(--IconButton-size))',
+              right: 'calc(-1/4 * var(--IconButton-size))',
+              boxShadow: '0 2px 12px 0 rgba(0 0 0 / 0.2)',
+              borderRadius: '50%',
+              bgcolor: 'background.body',
+            }}
+          />
+          <Typography
+            component="h2"
+            id="modal-title"
+            level="h4"
+            textColor="inherit"
+            fontWeight="lg"
+          >
+            This is the modal title
+          </Typography>
+          <Typography id="modal-desc" textColor="text.tertiary">
+            Make sure to use <code>aria-labelledby</code> on the modal dialog with an
+            optional <code>aria-describedby</code> attribute.
+          </Typography>
+        </Sheet>
+      </Modal>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/modal/BasicModalDialog.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import TextField from '@mui/joy/TextField';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import ModalDialogTitle from '@mui/joy/ModalDialogTitle';
+import ModalDialogDescription from '@mui/joy/ModalDialogDescription';
+import Stack from '@mui/joy/Stack';
+import Add from '@mui/icons-material/Add';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicModalDialog() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button
+        variant="outlined"
+        color="neutral"
+        startIcon={<Add />}
+        onClick={() => setOpen(true)}
+      >
+        New project
+      </Button>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <ModalDialog
+          sx={{
+            maxWidth: 500,
+            borderRadius: 'md',
+            p: 3,
+            boxShadow: 'lg',
+          }}
+        >
+          <ModalDialogTitle>Create new project</ModalDialogTitle>
+          <ModalDialogDescription sx={{ mb: 2 }}>
+            <Typography id="modal-desc" textColor="text.tertiary">
+              Fill in the information of the project.
+            </Typography>
+          </ModalDialogDescription>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              setOpen(false);
+            }}
+          >
+            <Stack spacing={2}>
+              <TextField label="Name" required />
+              <TextField label="Description" required />
+              <Button type="submit">Submit</Button>
+            </Stack>
+          </form>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/modal/KeepMountedModal.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import ModalDialogTitle from '@mui/joy/ModalDialogTitle';
+import ModalDialogDescription from '@mui/joy/ModalDialogDescription';
+
+export default function BasicModalDialog() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Modal keepMounted open={open} onClose={() => setOpen(false)}>
+        <ModalDialog>
+          <ModalDialogTitle>Keep mounted modal</ModalDialogTitle>
+          <ModalDialogDescription>
+            This modal is still in the DOM event though it is closed.
+          </ModalDialogDescription>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/modal/LayoutModalDialog.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Stack from '@mui/joy/Stack';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import ModalDialogTitle from '@mui/joy/ModalDialogTitle';
+import ModalDialogDescription from '@mui/joy/ModalDialogDescription';
+
+export default function LayoutModalDialog() {
+  const [open, setOpen] = React.useState('');
+  return (
+    <React.Fragment>
+      <Stack direction="row" spacing={1}>
+        <Button
+          variant="outlined"
+          color="neutral"
+          onClick={() => setOpen('fullScreen')}
+        >
+          Full screen
+        </Button>
+        <Button variant="outlined" color="neutral" onClick={() => setOpen('center')}>
+          Center
+        </Button>
+      </Stack>
+      <Modal open={!!open} onClose={() => setOpen('')}>
+        <ModalDialog layout={open}>
+          <ModalDialogTitle>Modal dialog</ModalDialogTitle>
+          <ModalDialogDescription>
+            This is a <code>{open}</code> modal dialog. Press <code>esc</code> to
+            close it.
+          </ModalDialogDescription>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/modal/NestedModals.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import ModalDialogTitle from '@mui/joy/ModalDialogTitle';
+import ModalDialogDescription from '@mui/joy/ModalDialogDescription';
+
+function randomBetween(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export default function NestedModals({ random }) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <React.Fragment>
+      <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
+        Open modal
+      </Button>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <ModalDialog
+          layout="center"
+          {...(random && {
+            sx: {
+              top: `${randomBetween(25, 75)}%`,
+              left: `${randomBetween(25, 75)}%`,
+            },
+          })}
+        >
+          <ModalDialogTitle>Infinite modals</ModalDialogTitle>
+          <ModalDialogDescription sx={{ mb: 1 }}>
+            Welcome to the infinite nested modals.
+          </ModalDialogDescription>
+          <NestedModals random />
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/modal/ServerModal.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import ModalDialogTitle from '@mui/joy/ModalDialogTitle';
+import ModalDialogDescription from '@mui/joy/ModalDialogDescription';
+
+export default function ServerModal() {
+  const rootRef = React.useRef(null);
+
+  return (
+    <Box
+      sx={{
+        height: 240,
+        flexGrow: 1,
+        minWidth: 300,
+        transform: 'translateZ(0)',
+        // The position fixed scoping doesn't work in IE11.
+        // Disable this demo to preserve the others.
+        '@media all and (-ms-high-contrast: none)': {
+          display: 'none',
+        },
+      }}
+      ref={rootRef}
+    >
+      <Modal
+        disablePortal
+        disableEnforceFocus
+        disableAutoFocus
+        open
+        container={() => rootRef.current}
+      >
+        <ModalDialog layout="center">
+          <ModalDialogTitle>Server-side modal</ModalDialogTitle>
+          <ModalDialogDescription>
+            If you disable JavaScript, you will still see me.
+          </ModalDialogDescription>
+        </ModalDialog>
+      </Modal>
+    </Box>
+  );
+}

docs/data/joy/components/modal/SizeModalDialog.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Stack from '@mui/joy/Stack';
+import Modal from '@mui/joy/Modal';
+import ModalClose from '@mui/joy/ModalClose';
+import ModalDialog from '@mui/joy/ModalDialog';
+import ModalDialogTitle from '@mui/joy/ModalDialogTitle';
+import ModalDialogDescription from '@mui/joy/ModalDialogDescription';
+
+export default function SizeModalDialog() {
+  const [open, setOpen] = React.useState('');
+  return (
+    <React.Fragment>
+      <Stack direction="row" alignItems="center" spacing={1}>
+        <Button
+          variant="outlined"
+          color="neutral"
+          size="sm"
+          onClick={() => setOpen('sm')}
+        >
+          Small
+        </Button>
+        <Button
+          variant="outlined"
+          color="neutral"
+          size="md"
+          onClick={() => setOpen('md')}
+        >
+          Medium
+        </Button>
+        <Button
+          variant="outlined"
+          color="neutral"
+          size="lg"
+          onClick={() => setOpen('lg')}
+        >
+          Large
+        </Button>
+      </Stack>
+      <Modal open={!!open} onClose={() => setOpen('')}>
+        <ModalDialog size={open}>
+          <ModalClose />
+          <ModalDialogTitle>Modal Dialog</ModalDialogTitle>
+          <ModalDialogDescription>
+            This is a `{open}` modal dialog.
+          </ModalDialogDescription>
+        </ModalDialog>
+      </Modal>
+    </React.Fragment>
+  );
+}