Add stories for MUI Feedback components

src/components/MUI/DataDisplay/IconButton.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiIconButton, {
+  IconButtonProps as MuiIconButtonProps,
+} from "@mui/material/IconButton";
+
+export type IconButtonProps = MuiIconButtonProps;
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => <MuiIconButton ref={ref} {...props} />,
+);
+
+IconButton.displayName = "IconButton";

src/components/MUI/DataDisplay/Typography.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiTypography, {
+  TypographyProps as MuiTypographyProps,
+} from "@mui/material/Typography";
+
+export type TypographyProps = MuiTypographyProps;
+
+export const Typography = React.forwardRef<HTMLSpanElement, TypographyProps>(
+  (props, ref) => <MuiTypography ref={ref} {...props} />,
+);
+
+Typography.displayName = "Typography";

src/components/MUI/Feedback/Alert.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+import { Button } from "../Inputs/Button";
+import { Stack } from "../Layout/Stack";
+
+const meta: Meta<typeof Alert> = {
+  title: "MUI/Feedback/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    severity: {
+      control: "select",
+      options: ["success", "info", "warning", "error"],
+    },
+    variant: { control: "select", options: ["standard", "outlined", "filled"] },
+    children: { name: "message", control: "text" },
+    icon: { control: false },
+    action: { control: false },
+    onClose: { control: false },
+  },
+  args: {
+    severity: "info",
+    variant: "standard",
+    children: "Alert message",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = { render: (args) => <Alert {...args} /> };
+
+export const Variants: Story = {
+  render: (args) => (
+    <Stack>
+      <Alert {...args} variant="standard">
+        Standard
+      </Alert>
+      <Alert {...args} variant="outlined">
+        Outlined
+      </Alert>
+      <Alert {...args} variant="filled">
+        Filled
+      </Alert>
+    </Stack>
+  ),
+};
+
+export const SeverityLevels: Story = {
+  render: (args) => (
+    <Stack>
+      <Alert {...args} severity="success">
+        This is a success alert
+      </Alert>
+      <Alert {...args} severity="info">
+        This is an info alert
+      </Alert>
+      <Alert {...args} severity="warning">
+        This is a warning alert
+      </Alert>
+      <Alert {...args} severity="error">
+        This is an error alert
+      </Alert>
+    </Stack>
+  ),
+};
+
+export const WithActionAndClose: Story = {
+  render: (args) => (
+    <>
+      <Alert
+        {...args}
+        severity="warning"
+        action={
+          <Button color="inherit" size="small">
+            UNDO
+          </Button>
+        }
+        onClose={() => console.log("alert close")}
+      >
+        Warning with action
+      </Alert>
+    </>
+  ),
+};

src/components/MUI/Feedback/Alert.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert";
+
+export type AlertProps = MuiAlertProps;
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (props, ref) => <MuiAlert ref={ref} {...props} />,
+);
+
+Alert.displayName = "Alert";

src/components/MUI/Feedback/Backdrop.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { Backdrop } from "./Backdrop";
+import { CircularProgress } from "./CircularProgress";
+import { Button } from "../Inputs/Button";
+import { Stack } from "../Layout/Stack";
+
+const meta: Meta<typeof Backdrop> = {
+  title: "MUI/Feedback/Backdrop",
+  component: Backdrop,
+  tags: ["autodocs"],
+  argTypes: {
+    invisible: { control: "boolean" },
+  },
+  args: { invisible: false },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <Stack direction="row">
+        <Backdrop {...args} open={true}>
+          <CircularProgress />
+        </Backdrop>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Click show to open backdrop and click again to close.
+ */
+export const ControlledBackdrop: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <Stack direction="row">
+        <Button onClick={() => setOpen(true)}>Show</Button>
+        <Backdrop {...args} open={open} onClick={() => setOpen(false)}>
+          <CircularProgress />
+        </Backdrop>
+      </Stack>
+    );
+  },
+};

src/components/MUI/Feedback/Backdrop.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiBackdrop, {
+  BackdropProps as MuiBackdropProps,
+} from "@mui/material/Backdrop";
+
+export type BackdropProps = MuiBackdropProps;
+
+export const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(
+  (props, ref) => <MuiBackdrop ref={ref} {...props} />,
+);
+
+Backdrop.displayName = "Backdrop";

src/components/MUI/Feedback/CircularProgress.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircularProgress } from "./CircularProgress";
+import { Stack } from "../Layout/Stack";
+import { Typography } from "../DataDisplay/Typography";
+
+const meta: Meta<typeof CircularProgress> = {
+  title: "MUI/Feedback/CircularProgress",
+  component: CircularProgress,
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+        "inherit",
+      ],
+    },
+    variant: { control: "select", options: ["indeterminate", "determinate"] },
+    value: { control: { type: "number", min: 0, max: 100, step: 1 } },
+    size: { control: { type: "number", min: 8, max: 200, step: 2 } },
+    thickness: { control: { type: "number", min: 1, max: 10, step: 0.5 } },
+  },
+  args: {
+    color: "primary",
+    variant: "indeterminate",
+    value: 75,
+    size: 40,
+    thickness: 3.6,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => <CircularProgress {...args} />,
+};
+
+export const Determinate: Story = {
+  args: { variant: "determinate", value: 70 },
+  render: (args) => <CircularProgress {...args} />,
+};
+
+export const DeterminateValues: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={4}>
+      {[0, 25, 50, 75, 100].map((value) => (
+        <Stack key={value} alignItems="center" spacing={1}>
+          <CircularProgress {...args} variant="determinate" value={value} />
+          <Typography variant="caption">{value}%</Typography>
+        </Stack>
+      ))}
+    </Stack>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Circular Progress in different sizes.",
+      },
+    },
+  },
+  render: (args) => (
+    <Stack direction="row" spacing={4}>
+      {[16, 24, 40, 64, 80].map((size) => (
+        <CircularProgress
+          key={size}
+          {...args}
+          variant="determinate"
+          size={size}
+        />
+      ))}
+    </Stack>
+  ),
+};
+
+export const Thickness: Story = {
+  parameters: {},
+  render: (args) => (
+    <Stack direction="row" spacing={4}>
+      {[2, 3.6, 5, 7].map((thickness) => (
+        <CircularProgress
+          key={thickness}
+          {...args}
+          variant="determinate"
+          thickness={thickness}
+        />
+      ))}
+    </Stack>
+  ),
+};

src/components/MUI/Feedback/CircularProgress.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import MuiCircularProgress, {
+  CircularProgressProps as MuiCircularProgressProps,
+} from "@mui/material/CircularProgress";
+
+export type CircularProgressProps = MuiCircularProgressProps;
+
+export const CircularProgress = React.forwardRef<
+  HTMLSpanElement,
+  CircularProgressProps
+>((props, ref) => <MuiCircularProgress ref={ref} {...props} />);
+
+CircularProgress.displayName = "CircularProgress";

src/components/MUI/Feedback/Dialog.stories.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Dialog } from "./Dialog";
+import { Typography } from "../DataDisplay/Typography";
+import { Button } from "../Inputs/Button";
+import { DialogActions } from "./DialogActions";
+import { DialogContent } from "./DialogContent";
+import { DialogTitle } from "./DialogTitle";
+
+const meta: Meta<typeof Dialog> = {
+  title: "MUI/Feedback/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  argTypes: {
+    fullWidth: { control: "boolean" },
+    maxWidth: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl", false],
+    },
+    fullScreen: { control: "boolean" },
+    scroll: { control: "select", options: ["paper", "body"] },
+  },
+  args: { fullWidth: true, maxWidth: "sm", fullScreen: false, scroll: "paper" },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div style={{ display: "flex", gap: 12 }}>
+        <Button onClick={() => setOpen(true)}>Open dialog</Button>
+        <Dialog {...args} open={open} onClose={() => setOpen(false)}>
+          <DialogTitle>Title</DialogTitle>
+          <DialogContent dividers>
+            <Typography variant="body2">Content goes here.</Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpen(false)}>Close</Button>
+            <Button variant="contained">Action</Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const FullScreen: Story = {
+  args: { fullScreen: true },
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div style={{ display: "flex", gap: 12 }}>
+        <Button onClick={() => setOpen(true)}>Open full-screen</Button>
+        <Dialog
+          {...args}
+          open={open}
+          scroll="body"
+          onClose={() => setOpen(false)}
+        >
+          <DialogTitle>Full Screen</DialogTitle>
+          <DialogContent dividers>
+            <Typography>Full-screen content.</Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              variant="contained"
+              size="large"
+              onClick={() => setOpen(false)}
+            >
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  },
+};

src/components/MUI/Feedback/Dialog.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
+
+export type DialogProps = MuiDialogProps;
+
+export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
+  (props, ref) => <MuiDialog ref={ref} {...props} />,
+);
+
+Dialog.displayName = "Dialog";

src/components/MUI/Feedback/DialogActions.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import MuiDialogActions, {
+  DialogActionsProps as MuiDialogActionsProps,
+} from "@mui/material/DialogActions";
+
+export type DialogActionsProps = MuiDialogActionsProps;
+
+export const DialogActions = React.forwardRef<
+  HTMLDivElement,
+  DialogActionsProps
+>((props, ref) => <MuiDialogActions ref={ref} {...props} />);
+
+DialogActions.displayName = "DialogActions";