Add stories for MUI surface components

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/Inputs/Button.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import MuiButton, { ButtonProps as MuiButtonProps } from "@mui/material/Button";
+
+export type ButtonProps = MuiButtonProps;
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...rest }, ref) => (
+    <MuiButton ref={ref} {...rest}>
+      {children}
+    </MuiButton>
+  ),
+);
+
+Button.displayName = "Button";

src/components/MUI/Inputs/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/Layout/Stack.tsx

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

src/components/MUI/Layout/Toolbar.tsx

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

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./Accordion";
+import { AccordionDetails } from "./AccordionDetails";
+import { AccordionSummary } from "./AccordionSummary";
+import { ExpandMoreIcon } from "./Icons/ExpandMoreIcon";
+import { Stack } from "../Layout/Stack";
+import { Typography } from "../DataDisplay/Typography";
+
+const meta: Meta<typeof Accordion> = {
+  title: "MUI/Surfaces/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  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/Accordion.tsx

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

src/components/MUI/Surfaces/AccordionDetails.tsx

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

src/components/MUI/Surfaces/AccordionSummary.tsx

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

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppBar } from "./AppBar";
+import { Toolbar } from "../Layout/Toolbar";
+import { Typography } from "../DataDisplay/Typography";
+import { IconButton } from "../Inputs/IconButton";
+import { Button } from "../Inputs/Button";
+import { MenuIcon } from "./Icons/MenuIcon";
+
+const meta: Meta<typeof AppBar> = {
+  title: "MUI/Surfaces/AppBar",
+  component: AppBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  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/AppBar.tsx

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

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./Card";
+import { Typography } from "../DataDisplay/Typography";
+import { Button } from "../Inputs/Button";
+import { CardContent } from "./CardContent";
+import { CardActions } from "./CardActions";
+import { CardMedia } from "./CardMedia";
+import Diamond from "../../../public/images/diamond.jpg";
+
+const meta: Meta<typeof Card> = {
+  title: "MUI/Surfaces/Card",
+  component: Card,
+  tags: ["autodocs"],
+  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>
+  ),
+};

src/components/MUI/Surfaces/Card.tsx

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

src/components/MUI/Surfaces/CardActions.tsx

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

src/components/MUI/Surfaces/CardContent.tsx

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

src/components/MUI/Surfaces/CardMedia.tsx

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