MUI Inputs stories

src/components/MUI/Inputs/Autocomplete.stories.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Autocomplete } from "./Autocomplete";
+import { TextField } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+import { AutocompleteRenderInputParams } from "@mui/material/Autocomplete";
+
+const elements = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryllium",
+  "Boron",
+  "Carbon",
+  "Nitrogen",
+  "Oxygen",
+  "Fluorine",
+  "Neon",
+  "Sodium",
+  "Magnesium",
+];
+
+type CommonArgs = ExtraArgs & {
+  options: string[];
+  freeSolo: boolean;
+  disableClearable: boolean;
+  autoHighlight: boolean;
+  autoSelect: boolean;
+  filterSelectedOptions: boolean;
+  size: "small" | "medium";
+  limitTags?: number;
+};
+
+type SingleArgs = CommonArgs & {
+  multiple?: false;
+  defaultValue?: string | null;
+};
+
+type MultipleArgs = CommonArgs & {
+  multiple: true;
+  defaultValue?: string[];
+};
+
+type StoryArgs = SingleArgs | MultipleArgs;
+
+type ExtraArgs = {
+  label: string;
+  placeholder?: string;
+  tfVariant: "outlined" | "filled" | "standard";
+  tfColor: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+};
+
+const meta: Meta<StoryArgs> = {
+  title: "MUI/Inputs/Autocomplete",
+  component: Autocomplete,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    options: { control: "object" },
+    freeSolo: { control: "boolean" },
+    disableClearable: { control: "boolean" },
+    autoHighlight: { control: "boolean" },
+    autoSelect: { control: "boolean" },
+    filterSelectedOptions: { control: "boolean" },
+    size: { control: "select", options: ["small", "medium"] },
+    tfVariant: {
+      name: "TextField variant",
+      control: "select",
+      options: ["outlined", "filled", "standard"],
+    },
+    tfColor: {
+      name: "TextField color",
+      control: "select",
+      options: ["primary", "secondary", "success", "error", "info", "warning"],
+    },
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    defaultValue: { control: false },
+  },
+  args: {
+    options: elements,
+    freeSolo: false,
+    disableClearable: false,
+    autoHighlight: true,
+    autoSelect: false,
+    filterSelectedOptions: true,
+    size: "medium",
+    tfVariant: "outlined",
+    tfColor: "primary",
+    label: "Select element",
+    placeholder: "Type to search…",
+    defaultValue: null,
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const withTextField = (args: StoryArgs) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { defaultValue, ...rest } = args;
+
+  return {
+    ...rest,
+    renderInput: (params: AutocompleteRenderInputParams) => (
+      <TextField
+        {...params}
+        label={args.label}
+        variant={args.tfVariant}
+        color={args.tfColor}
+        placeholder={args.placeholder}
+      />
+    ),
+  };
+};
+
+export const Basic: Story = {
+  render: (args: StoryArgs) => <Autocomplete {...withTextField(args)} />,
+};
+
+export const FreeSoloMode: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Enables freeSolo mode, allowing users to enter values that are not present in the options list. This behaves like a text input with suggestions rather than a strict selector.",
+      },
+    },
+  },
+  args: {
+    freeSolo: true,
+    disableClearable: true,
+  },
+  render: (args: StoryArgs) => <Autocomplete {...withTextField(args)} />,
+};
+
+export const MultipleSelections: StoryObj<MultipleArgs> = {
+  args: {
+    multiple: true,
+    defaultValue: [],
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<string[]>(args.defaultValue ?? []);
+    return (
+      <Autocomplete
+        {...withTextField(args)}
+        multiple
+        value={value}
+        onChange={(_, newValue) => setValue(newValue ?? [])}
+      />
+    );
+  },
+};

src/components/MUI/Inputs/Autocomplete.tsx

@@ -0,0 +1,9 @@
+import MuiAutocomplete from "@mui/material/Autocomplete";
+
+export const Autocomplete = MuiAutocomplete as typeof MuiAutocomplete & {
+  displayName?: string;
+};
+
+Autocomplete.displayName = "Autocomplete";
+
+export type { AutocompleteProps } from "@mui/material/Autocomplete";

src/components/MUI/Inputs/Button.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  AddIcon,
+  Box,
+  Button,
+  DeleteIcon,
+  SaveIcon,
+  SendIcon,
+  Stack,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Button> = {
+  title: "MUI/Inputs/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["text", "contained", "outlined"],
+    },
+    color: {
+      control: "select",
+      options: [
+        "inherit",
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+      ],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"],
+    },
+    href: { control: "text" },
+    rel: { control: "text" },
+    children: { name: "label", control: "text" },
+  },
+  args: {
+    children: "Button",
+    variant: "contained",
+    color: "primary",
+    size: "medium",
+    disabled: false,
+    disableElevation: false,
+    fullWidth: false,
+    href: "",
+    rel: "",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Button {...args} href={args.href || undefined} rel={args.rel || undefined}>
+      {args.children}
+    </Button>
+  ),
+};
+
+export const Variants: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={1}>
+      <Button variant="text">Text</Button>
+      <Button variant="contained">Contained</Button>
+      <Button variant="outlined">Outlined</Button>
+    </Stack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={1}>
+      <Button size="small" variant="contained">
+        Small
+      </Button>
+      <Button size="medium" variant="contained">
+        Medium
+      </Button>
+      <Button size="large" variant="contained">
+        Large
+      </Button>
+    </Stack>
+  ),
+};
+
+export const Colours: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={1}>
+      <Button color="primary" variant="contained">
+        Primary
+      </Button>
+      <Button color="secondary" variant="contained">
+        Secondary
+      </Button>
+      <Button color="success" variant="contained">
+        Success
+      </Button>
+      <Button color="error" variant="contained">
+        Error
+      </Button>
+      <Button color="info" variant="contained">
+        Info
+      </Button>
+      <Button color="warning" variant="contained">
+        Warning
+      </Button>
+    </Stack>
+  ),
+};
+
+export const WithStartIcon: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={1}>
+      <Button startIcon={<SaveIcon />} variant="contained">
+        Save
+      </Button>
+      <Button startIcon={<AddIcon />} color="success" variant="contained">
+        Add
+      </Button>
+    </Stack>
+  ),
+};
+
+export const WithEndIcon: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={1}>
+      <Button endIcon={<SendIcon />} variant="contained">
+        Send
+      </Button>
+      <Button endIcon={<DeleteIcon />} color="error" variant="contained">
+        Delete
+      </Button>
+    </Stack>
+  ),
+};
+
+export const States: Story = {
+  render: (_args) => (
+    <Stack spacing={1} sx={{ maxWidth: 480 }}>
+      <Box>
+        <Button disabled variant="contained">
+          Disabled
+        </Button>
+      </Box>
+      <Box>
+        <Button disableElevation variant="contained">
+          No elevation
+        </Button>
+      </Box>
+      <Box>
+        <Button
+          variant="contained"
+          href="https://mui.com/"
+          rel="noopener noreferrer"
+        >
+          Link example
+        </Button>
+      </Box>
+      <Button variant="contained" fullWidth>
+        Full width
+      </Button>
+    </Stack>
+  ),
+};

src/components/MUI/Inputs/ButtonGroup.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, ButtonGroup } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: "MUI/Inputs/ButtonGroup",
+  component: ButtonGroup,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    variant: { control: "select", options: ["text", "outlined", "contained"] },
+    color: {
+      control: "select",
+      options: [
+        "inherit",
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+      ],
+    },
+    size: { control: "select", options: ["small", "medium", "large"] },
+    orientation: { control: "select", options: ["horizontal", "vertical"] },
+    disabled: { control: "boolean" },
+    fullWidth: { control: "boolean" },
+  },
+  args: {
+    variant: "contained",
+    color: "primary",
+    size: "medium",
+    orientation: "horizontal",
+    disabled: false,
+    fullWidth: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  args: { orientation: "vertical" },
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button>Top</Button>
+      <Button>Middle</Button>
+      <Button>Bottom</Button>
+    </ButtonGroup>
+  ),
+};