@dotss/ui 0.0.7 → 0.0.8

package/components/Menu/Menu.stories.tsx

@@ -1,743 +0,0 @@
-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
-  }
-};