@recursica/mui-adapter 0.6.0 → 0.7.0

package/src/components/Menu/Menu.stories.tsx

@@ -1,7 +1,3 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Menu } from "./Menu";
-import { Button } from "../Button";
-
 /**
  * Menu story axes:
  * - trigger: click (default) vs hover behavior
@@ -11,7 +7,13 @@ import { Button } from "../Button";
  * - layer: tested via the global Layer decorator (withLayer/layer args)
  */
 
-const SettingsIcon = () => (
+import React, { useState, useRef, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Menu, MenuItem, MenuDivider } from "./Menu";
+import { Button } from "../Button";
+import { ListSubheader } from "@mui/material";
+
+const SettingsIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -22,13 +24,14 @@ const SettingsIcon = () => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    {...props}
   >
     <circle cx="12" cy="12" r="3" />
-    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
   </svg>
 );
 
-const SearchIcon = () => (
+const SearchIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -39,13 +42,14 @@ const SearchIcon = () => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    {...props}
   >
     <circle cx="11" cy="11" r="8" />
     <line x1="21" y1="21" x2="16.65" y2="16.65" />
   </svg>
 );
 
-const MessageIcon = () => (
+const MessageIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -56,12 +60,13 @@ const MessageIcon = () => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    {...props}
   >
     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
   </svg>
 );
 
-const ImageIcon = () => (
+const ImageIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -72,6 +77,7 @@ const ImageIcon = () => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    {...props}
   >
     <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
     <circle cx="8.5" cy="8.5" r="1.5" />
@@ -79,7 +85,7 @@ const ImageIcon = () => (
   </svg>
 );
 
-const TrashIcon = () => (
+const TrashIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -90,13 +96,14 @@ const TrashIcon = () => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    {...props}
   >
     <polyline points="3 6 5 6 21 6" />
     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
   </svg>
 );
 
-const ArrowsIcon = () => (
+const ArrowsIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -107,6 +114,7 @@ const ArrowsIcon = () => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    {...props}
   >
     <polyline points="17 1 21 5 17 9" />
     <path d="M3 11V9a4 4 0 0 1 4-4h14" />
@@ -115,207 +123,117 @@ const ArrowsIcon = () => (
   </svg>
 );
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type MenuStoryArgs = Record<string, any>;
 
 const meta: Meta = {
   title: "UI-Kit/Menu",
   component: Menu,
   tags: ["autodocs"],
-  argTypes: {
-    trigger: {
-      control: "select",
-      options: ["click", "hover", "click-hover"],
-      description:
-        "Determines how the menu is triggered: click (default), hover, or both.",
-    },
-    position: {
-      control: "select",
-      options: [
-        "bottom",
-        "bottom-start",
-        "bottom-end",
-        "top",
-        "top-start",
-        "top-end",
-        "left",
-        "left-start",
-        "left-end",
-        "right",
-        "right-start",
-        "right-end",
-      ],
-      description: "The position of the dropdown relative to the target.",
-    },
-    withArrow: {
-      control: "boolean",
-      description: "Whether to display an arrow pointing to the target.",
-    },
-    offset: {
-      control: "number",
-      description:
-        "Distance in px between the dropdown and the target element.",
-    },
-    opened: {
-      control: "boolean",
-      description:
-        "Controlled open state. Leave undefined for uncontrolled behavior.",
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Menu\` component combines a list of secondary actions into a single interactive overlay area, wrapping Mantine's composable \`Menu\` while enforcing strict Recursica design token styling.
-
-### Composable API
-
-Menu uses a dot-notation composition pattern:
-- \`<Menu>\` — Root container managing open/close state
-- \`<Menu.Target>\` — Wrapper for the trigger element (must be a single element supporting ref)
-- \`<Menu.Dropdown>\` — The popup panel
-- \`<Menu.Item>\` — An actionable item with optional \`leftSection\` / \`rightSection\`
-- \`<Menu.Divider>\` — A visual separator
-- \`<Menu.Label>\` — A non-interactive section header
-
-### Sub-menus
-Nested menus are supported via \`<Menu.Sub>\`, \`<Menu.Sub.Target>\`, \`<Menu.Sub.Item>\`, and \`<Menu.Sub.Dropdown>\`.
-
-### Design Token Limitations
-Mantine's \`color\` prop on \`Menu.Item\` is stripped in strict mode to enforce design token adherence. Use \`overStyled={true}\` to bypass this restriction.
-        `,
-      },
-    },
-  },
 };
 
 export default meta;
 
 type Story = StoryObj<MenuStoryArgs>;
 
-export const Default: Story = {
-  args: {
-    trigger: "click",
-    position: "bottom-start",
-    withArrow: false,
-    offset: 5,
-    opened: undefined,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
-    return (
-      <Menu {...args}>
-        <Menu.Target>
-          <Button variant="solid">Toggle Menu</Button>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Menu.Label>Application</Menu.Label>
-          <Menu.Item leftSection={<SettingsIcon />}>Settings</Menu.Item>
-          <Menu.Item leftSection={<MessageIcon />}>Messages</Menu.Item>
-          <Menu.Item leftSection={<ImageIcon />}>Gallery</Menu.Item>
-          <Menu.Item leftSection={<SearchIcon />}>Search</Menu.Item>
-
-          <Menu.Divider />
-
-          <Menu.Label>Danger zone</Menu.Label>
-          <Menu.Item leftSection={<ArrowsIcon />}>Transfer my data</Menu.Item>
-          <Menu.Item leftSection={<TrashIcon />}>Delete my account</Menu.Item>
-        </Menu.Dropdown>
+const InteractiveMenu = ({ children, openDelay, ...args }: any) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const open = Boolean(anchorEl) || args.opened;
+
+  useEffect(() => {
+    if (args.opened && buttonRef.current) {
+      setAnchorEl(buttonRef.current);
+    }
+  }, [args.opened]);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button ref={buttonRef} variant="solid" onClick={handleClick}>
+        Toggle Menu
+      </Button>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose} {...args}>
+        {children}
       </Menu>
-    );
-  },
+    </div>
+  );
 };
 
-export const WithDisabledItems: Story = {
+export const Default: Story = {
+  render: (args) => (
+    <InteractiveMenu {...args}>
+      <ListSubheader>Application</ListSubheader>
+      <MenuItem>
+        <SettingsIcon style={{ marginRight: 8 }} /> Settings
+      </MenuItem>
+      <MenuItem>
+        <MessageIcon style={{ marginRight: 8 }} /> Messages
+      </MenuItem>
+      <MenuItem>
+        <ImageIcon style={{ marginRight: 8 }} /> Gallery
+      </MenuItem>
+      <MenuItem>
+        <SearchIcon style={{ marginRight: 8 }} /> Search
+      </MenuItem>
+      <MenuDivider />
+      <ListSubheader>Danger zone</ListSubheader>
+      <MenuItem>
+        <ArrowsIcon style={{ marginRight: 8 }} /> Transfer my data
+      </MenuItem>
+      <MenuItem>
+        <TrashIcon style={{ marginRight: 8 }} /> Delete my account
+      </MenuItem>
+    </InteractiveMenu>
+  ),
   args: {
-    position: "bottom-start",
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
-    return (
-      <Menu {...args}>
-        <Menu.Target>
-          <Button variant="solid">Menu with Disabled</Button>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Menu.Item leftSection={<SettingsIcon />}>Settings</Menu.Item>
-          <Menu.Item leftSection={<SearchIcon />} disabled>
-            Search (disabled)
-          </Menu.Item>
-          <Menu.Item leftSection={<MessageIcon />}>Messages</Menu.Item>
-          <Menu.Item leftSection={<TrashIcon />} disabled>
-            Delete (disabled)
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    );
+    opened: true,
   },
 };
 
-export const WithSubmenus: Story = {
+export const WithDisabledItems: Story = {
+  render: (args) => (
+    <InteractiveMenu {...args}>
+      <MenuItem>
+        <SettingsIcon style={{ marginRight: 8 }} /> Settings
+      </MenuItem>
+      <MenuItem disabled>
+        <SearchIcon style={{ marginRight: 8 }} /> Search (disabled)
+      </MenuItem>
+      <MenuItem>
+        <MessageIcon style={{ marginRight: 8 }} /> Messages
+      </MenuItem>
+      <MenuItem disabled>
+        <TrashIcon style={{ marginRight: 8 }} /> Delete (disabled)
+      </MenuItem>
+    </InteractiveMenu>
+  ),
   args: {
-    position: "bottom-start",
-    width: 200,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
-    return (
-      <Menu {...args}>
-        <Menu.Target>
-          <Button variant="solid">Menu with Submenus</Button>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Menu.Item>Dashboard</Menu.Item>
-          <Menu.Sub>
-            <Menu.Sub.Target>
-              <Menu.Sub.Item>Products</Menu.Sub.Item>
-            </Menu.Sub.Target>
-            <Menu.Sub.Dropdown>
-              <Menu.Item>All products</Menu.Item>
-              <Menu.Item>Categories</Menu.Item>
-              <Menu.Item>Tags</Menu.Item>
-            </Menu.Sub.Dropdown>
-          </Menu.Sub>
-          <Menu.Sub>
-            <Menu.Sub.Target>
-              <Menu.Sub.Item>Orders</Menu.Sub.Item>
-            </Menu.Sub.Target>
-            <Menu.Sub.Dropdown>
-              <Menu.Item>Open</Menu.Item>
-              <Menu.Item>Completed</Menu.Item>
-              <Menu.Item>Cancelled</Menu.Item>
-            </Menu.Sub.Dropdown>
-          </Menu.Sub>
-        </Menu.Dropdown>
-      </Menu>
-    );
+    opened: true,
   },
 };
 
 export const HoverTrigger: Story = {
+  render: (args) => (
+    <InteractiveMenu {...args}>
+      <MenuItem>
+        <SettingsIcon style={{ marginRight: 8 }} /> Settings
+      </MenuItem>
+      <MenuItem>
+        <MessageIcon style={{ marginRight: 8 }} /> Messages
+      </MenuItem>
+      <MenuItem>
+        <ImageIcon style={{ marginRight: 8 }} /> Gallery
+      </MenuItem>
+    </InteractiveMenu>
+  ),
   args: {
-    trigger: "click-hover",
-    position: "bottom-start",
-    openDelay: 100,
-    closeDelay: 400,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
-    return (
-      <Menu {...args}>
-        <Menu.Target>
-          <Button variant="solid">Hover or Click</Button>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Menu.Item leftSection={<SettingsIcon />}>Settings</Menu.Item>
-          <Menu.Item leftSection={<MessageIcon />}>Messages</Menu.Item>
-          <Menu.Item leftSection={<ImageIcon />}>Gallery</Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    );
+    opened: true,
   },
 };