Add stories for MUI Feedback components

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert, Button, Stack } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Alert> = {
+  title: "MUI/Feedback/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  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/Backdrop.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { Backdrop, Button, CircularProgress, Stack } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Backdrop> = {
+  title: "MUI/Feedback/Backdrop",
+  component: Backdrop,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  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/CircularProgress.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircularProgress, Stack, Typography } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof CircularProgress> = {
+  title: "MUI/Feedback/CircularProgress",
+  component: CircularProgress,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  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/Dialog.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Dialog> = {
+  title: "MUI/Feedback/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  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 (
+      <Box 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>
+      </Box>
+    );
+  },
+};
+
+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>
+    );
+  },
+};