@dotss/ui 0.0.4

package/components/Menu/Menu.stories.tsx

@@ -0,0 +1,743 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+
+import Menu from './Menu';
+import MenuBlock from './MenuBlock';
+
+const meta = {
+  title: 'Component/Menu',
+  component: Menu,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    anchorRef: {
+      control: {
+        disable: true
+      }
+    }
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock value={1}>Menu Block</MenuBlock>
+          <MenuBlock value={2} disabled>
+            Menu Block
+          </MenuBlock>
+          <MenuBlock value={3}>Menu Block</MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const StartAdornment: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock startAdornment={<Icon name="ReceiptLine" />} value={1}>
+            Menu Block
+          </MenuBlock>
+          <MenuBlock startAdornment={<Icon name="ReceiptLine" />} value={2} disabled>
+            Menu Block
+          </MenuBlock>
+          <MenuBlock startAdornment={<Icon name="ReceiptLine" />} value={3}>
+            Menu Block
+          </MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const EndAdornment: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock endAdornment={<Icon name="ChevronRightLine" />} value={1}>
+            Menu Block
+          </MenuBlock>
+          <MenuBlock endAdornment={<Icon name="ChevronRightLine" />} value={2} disabled>
+            Menu Block
+          </MenuBlock>
+          <MenuBlock endAdornment={<Icon name="ChevronRightLine" />} value={3}>
+            Menu Block
+          </MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const BothAdornment: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={1}
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={2}
+            disabled
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={3}
+          >
+            Menu Block
+          </MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const VariableWidth: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Variable Width Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={1}
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={2}
+            disabled
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={3}
+          >
+            Menu Block
+          </MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const MaxHeight: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          {Array.from({ length: 20 })
+            .map((_, index) => index)
+            .map((index) => (
+              <MenuBlock
+                key={`menu-block-${index}`}
+                startAdornment={<Icon name="ReceiptLine" />}
+                endAdornment={<Icon name="ChevronRightLine" />}
+                value={index + 1}
+              >
+                Menu Block
+              </MenuBlock>
+            ))}
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const MaxWidth: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={1}
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={2}
+          >
+            Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block
+            Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block
+            Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={3}
+          >
+            Menu Block
+          </MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const ShowDivider: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={1}
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={2}
+            disabled
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={3}
+          >
+            Menu Block
+          </MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: true,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const Placement: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={1}
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={2}
+            disabled
+          >
+            Menu Block
+          </MenuBlock>
+          <MenuBlock
+            startAdornment={<Icon name="ReceiptLine" />}
+            endAdornment={<Icon name="ChevronRightLine" />}
+            value={3}
+          >
+            Menu Block
+          </MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const Custom: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleClose = () => setIsOpen(false);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open Menu
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleClose}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <Button onClick={handleClose}>Close Menu</Button>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};
+
+export const FitToAnchorWidth: Story = {
+  render: (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(1);
+
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+    const handleChange = (newValue?: string | number) => setValue(newValue as number);
+
+    useEffect(() => {
+      setIsOpen(props?.open || false);
+    }, [props?.open]);
+
+    return (
+      <>
+        <Button ref={ref} onClick={handleOpen}>
+          Open
+        </Button>
+        <Menu
+          anchorRef={ref}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChange}
+          value={value}
+          transitionDuration={props?.transitionDuration}
+          spacing={props?.spacing}
+          showDivider={props?.showDivider}
+          placement={props?.placement}
+          disablePadding={props?.disablePadding}
+          width={props?.width}
+          fitToAnchorWidth={props?.fitToAnchorWidth}
+        >
+          <MenuBlock value={1}>Menu Block</MenuBlock>
+          <MenuBlock value={2} disabled>
+            Menu Block
+          </MenuBlock>
+          <MenuBlock value={3}>Menu Block</MenuBlock>
+        </Menu>
+      </>
+    );
+  },
+  args: {
+    anchorRef: null,
+    open: false,
+    transitionDuration: 200,
+    spacing: 4,
+    showDivider: false,
+    placement: 'bottom-center',
+    disablePadding: false,
+    width: 0,
+    fitToAnchorWidth: true
+  }
+};