Add stories for MUI Surface components

.storybook/muiDocsParameters.ts

@@ -0,0 +1,14 @@
+export const muiDocsText = `
+  These components are Material UI (MUI) components.
+  
+  For full API documentation, examples, and usage guidelines, see:
+  https://v7.mui.com/material-ui/all-components
+        `;
+
+export const muiDocsParameters = {
+  docs: {
+    description: {
+      component: muiDocsText,
+    },
+  },
+};

src/components/MUI/MuiWrapped.tsx

@@ -1,7 +1,82 @@
 import MuiWrapper from "./MuiWrapper";
 
-import MuiChip, { ChipProps as MuiChipProps } from "@mui/material/Chip";
+import MuiAccordion, {
+  AccordionProps as MuiAccordionProps,
+} from "@mui/material/Accordion";
+import MuiAccordionDetails, {
+  AccordionDetailsProps as MuiAccordionDetailsProps,
+} from "@mui/material/AccordionDetails";
+import MuiAccordionSummary, {
+  AccordionSummaryProps as MuiAccordionSummaryProps,
+} from "@mui/material/AccordionSummary";
 import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import MuiButton, { ButtonProps as MuiButtonProps } from "@mui/material/Button";
+import MuiCard, { CardProps as MuiCardProps } from "@mui/material/Card";
+import MuiCardActions, {
+  CardActionsProps as MuiCardActionsProps,
+} from "@mui/material/CardActions";
+import MuiCardContent, {
+  CardContentProps as MuiCardContentProps,
+} from "@mui/material/CardContent";
+import MuiCardMedia, {
+  CardMediaProps as MuiCardMediaProps,
+} from "@mui/material/CardMedia";
+import MuiChip, { ChipProps as MuiChipProps } from "@mui/material/Chip";
+import MuiIconButton, {
+  IconButtonProps as MuiIconButtonProps,
+} from "@mui/material/IconButton";
+import MuiPaper, { PaperProps as MuiPaperProps } from "@mui/material/Paper";
+import MuiStack, { StackProps as MuiStackProps } from "@mui/material/Stack";
+import MuiToolbar, {
+  ToolbarProps as MuiToolbarProps,
+} from "@mui/material/Toolbar";
+import MuiTypography, {
+  TypographyProps as MuiTypographyProps,
+} from "@mui/material/Typography";
 
-export const Chip = MuiWrapper<MuiChipProps>(MuiChip, "Chip");
+import MuiExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import MuiMenuIcon from "@mui/icons-material/Menu";
+
+export const Accordion = MuiWrapper<MuiAccordionProps>(
+  MuiAccordion,
+  "Accordion",
+);
+export const AccordionDetails = MuiWrapper<MuiAccordionDetailsProps>(
+  MuiAccordionDetails,
+  "AccordionDetails",
+);
+export const AccordionSummary = MuiWrapper<MuiAccordionSummaryProps>(
+  MuiAccordionSummary,
+  "AccordionSummary",
+);
 export const Alert = MuiWrapper<MuiAlertProps>(MuiAlert, "Alert");
+export const AppBar = MuiWrapper<MuiAppBarProps>(MuiAppBar, "AppBar");
+export const Button = MuiWrapper<MuiButtonProps>(MuiButton, "Button");
+export const Card = MuiWrapper<MuiCardProps>(MuiCard, "Card");
+export const CardActions = MuiWrapper<MuiCardActionsProps>(
+  MuiCardActions,
+  "CardActions",
+);
+export const CardContent = MuiWrapper<MuiCardContentProps>(
+  MuiCardContent,
+  "CardContent",
+);
+export const CardMedia = MuiWrapper<MuiCardMediaProps>(
+  MuiCardMedia,
+  "CardMedia",
+);
+export const Chip = MuiWrapper<MuiChipProps>(MuiChip, "Chip");
+export const ExpandMoreIcon = MuiWrapper(MuiExpandMoreIcon, "ExpandMoreIcon");
+export const IconButton = MuiWrapper<MuiIconButtonProps>(
+  MuiIconButton,
+  "IconButton",
+);
+export const MenuIcon = MuiWrapper(MuiMenuIcon, "MenuIcon");
+export const Paper = MuiWrapper<MuiPaperProps>(MuiPaper, "Paper");
+export const Stack = MuiWrapper<MuiStackProps>(MuiStack, "Stack");
+export const Toolbar = MuiWrapper<MuiToolbarProps>(MuiToolbar, "Toolbar");
+export const Typography = MuiWrapper<MuiTypographyProps>(
+  MuiTypography,
+  "Typography",
+);

src/components/MUI/Surfaces/Accordion.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  ExpandMoreIcon,
+  Stack,
+  Typography,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Accordion> = {
+  title: "MUI/Surfaces/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    disabled: { control: "boolean" },
+    disableGutters: { control: "boolean" },
+    square: { control: "boolean" },
+    defaultExpanded: { control: "boolean" },
+    expanded: { control: false },
+    onChange: { control: false },
+    sx: { control: false },
+  },
+  args: {
+    disabled: false,
+    disableGutters: false,
+    square: false,
+    defaultExpanded: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Summary</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>Details</Typography>
+      </AccordionDetails>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: (args) => (
+    <Stack spacing={1.5}>
+      <Accordion {...args}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography>Item 1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>Content 1</Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion {...args}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography>Item 2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>Content 2</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </Stack>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Disabled</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>Cannot expand</Typography>
+      </AccordionDetails>
+    </Accordion>
+  ),
+};
+
+export const DefaultExpanded: Story = {
+  args: { defaultExpanded: true },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Expanded by default</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>Initial content is visible</Typography>
+      </AccordionDetails>
+    </Accordion>
+  ),
+};

src/components/MUI/Surfaces/AppBar.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  AppBar,
+  Button,
+  IconButton,
+  MenuIcon,
+  Toolbar,
+  Typography,
+} from "../MuiWrapped";
+import {
+  muiDocsParameters,
+  muiDocsText,
+} from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof AppBar> = {
+  title: "MUI/Surfaces/AppBar",
+  component: AppBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    ...muiDocsParameters,
+    docs: {
+      description: {
+        component: `
+${muiDocsText}
+Not to be confused with custom [AppTitleBar component](?path=/docs/navigation-apptitlebar--docs)  (opens in this tab).  
+`,
+      },
+    },
+  },
+
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["fixed", "absolute", "sticky", "static", "relative"],
+    },
+    color: {
+      control: "select",
+      options: ["default", "primary", "secondary", "inherit", "transparent"],
+    },
+    elevation: {
+      control: { type: "number", min: 0, max: 24, step: 1 },
+    },
+    sx: { control: false },
+  },
+  args: {
+    position: "static",
+    color: "primary",
+    elevation: 4,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <AppBar {...args}>
+      <Toolbar>
+        <IconButton size="large" edge="start" color="inherit" aria-label="menu">
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          Application title
+        </Typography>
+        <Button color="inherit">Login</Button>
+      </Toolbar>
+    </AppBar>
+  ),
+};

src/components/MUI/Surfaces/Card.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Diamond from "../../../public/images/diamond.jpg";
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Typography,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Card> = {
+  title: "MUI/Surfaces/Card",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["elevation", "outlined"],
+    },
+    raised: { control: "boolean" },
+    elevation: {
+      control: { type: "number", min: 0, max: 24, step: 1 },
+    },
+    sx: { control: false },
+  },
+  args: {
+    variant: "elevation",
+    raised: false,
+    elevation: 1,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Card {...args} sx={{ maxWidth: 345 }}>
+      <CardMedia component="img" image={Diamond} />
+      <CardContent>
+        <Typography gutterBottom variant="h6" component="div">
+          Diamond Light Source
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Diamond Light Source is the UK’s national synchrotron serving
+          scientists and researchers from around the world.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Share</Button>
+        <Button size="small">Learn more</Button>
+      </CardActions>
+    </Card>
+  ),
+};
+
+export const Outlined: Story = {
+  args: {
+    variant: "outlined",
+    elevation: 0,
+  },
+  render: (args) => (
+    <Card {...args} sx={{ maxWidth: 345 }}>
+      <CardContent>
+        <Typography variant="h6">Outlined card</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Uses the outlined variant with zero elevation.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Action</Button>
+      </CardActions>
+    </Card>
+  ),
+};