@boxcustodia/library 2.0.0-alpha.12 → 2.0.0-alpha.14

package/src/components/menu/menu.stories.tsx

@@ -1,11 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MoreHorizontal } from "lucide-react";
+import { useState } from "react";
+import { action } from "storybook/actions";
 import {
   Button,
   Menu,
-  MenuContent,
   MenuGroup,
   MenuItem,
   MenuLabel,
-  MenuPortal,
+  MenuPopup,
   MenuRoot,
   MenuSeparator,
   MenuShortcut,
@@ -14,190 +17,317 @@ import {
   MenuSubTrigger,
   MenuTrigger,
 } from "../../components";
-import { createToastManager, ToastProvider } from "../toast";
-
-const toastManager = createToastManager();
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  Archive,
-  Bell,
-  Calendar,
-  CheckCircle,
-  Clipboard,
-  LogOut,
-  PlusCircle,
-  Settings,
-  Tag,
-  Trash2,
-} from "lucide-react";
-import { useMemo, useState } from "react";
-import { MenuItemType } from ".";
 
+/**
+ * Data-driven dropdown menu. Pass an `items` array to declaratively render all
+ * supported types: `"item"`, `"checkbox"`, `"radio"`, `"radio-group"`, `"group"`,
+ * `"label"`, `"separator"`, `"submenu"`. Primitives are also exported for direct
+ * composition — see the `Primitive` story.
+ */
 const meta: Meta<typeof Menu> = {
-  title: "Data display/Menu",
+  title: "Components/Menu",
   component: Menu,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    trigger: (
+      <Button variant="ghost" size="icon">
+        <MoreHorizontal />
+      </Button>
+    ),
+  },
+  argTypes: {
+    classNames: { control: false },
+  },
+  tags: ["beta"],
 };
 
 export default meta;
 type Story = StoryObj<typeof Menu>;
 
+export const Default: Story = {
+  render: (args) => (
+    <Menu
+      {...args}
+      items={[
+        { type: "item", label: "Profile", onSelect: action("profile") },
+        { type: "item", label: "Settings", onSelect: action("settings") },
+        { type: "separator" },
+        { type: "item", label: "Log out", onSelect: action("logout") },
+      ]}
+    />
+  ),
+};
+
 /**
- * ```tsx
- * type ItemType = "item" | "checkbox" | "radio" | "label" | "separator" | "submenu"
- * ```
+ * `className` estila el popup. `classNames` expone el slot `popup` con la
+ * misma semántica — usá uno o el otro, lo que sea más cómodo.
  */
-export const Generic: Story = {
-  decorators: [
-    (Story) => (
-      <ToastProvider toastManager={toastManager}>
-        <Story />
-      </ToastProvider>
-    ),
-  ],
-  render: (args) => {
-    const [autosave, setAutosave] = useState<boolean>(true);
+export const WithClassNames: Story = {
+  render: (args) => (
+    <Menu
+      {...args}
+      classNames={{ popup: "w-56" }}
+      items={[
+        { type: "item", label: "Profile", onSelect: action("profile") },
+        { type: "item", label: "Settings", onSelect: action("settings") },
+      ]}
+    />
+  ),
+};
 
-    const items: MenuItemType[] = useMemo(
-      () => [
-        { type: "item", label: "File" },
+/**
+ * `shortcut` is display-only — rendered as a `MenuShortcut` span with no keyboard binding.
+ */
+export const Shortcuts: Story = {
+  render: (args) => (
+    <Menu
+      {...args}
+      items={[
+        {
+          type: "item",
+          label: "New",
+          shortcut: "Ctrl+N",
+          onSelect: action("new"),
+        },
         {
           type: "item",
-          label: "New File",
+          label: "Open",
           shortcut: "Ctrl+O",
-          onShortcut: () =>
-            toastManager.add({
-              variant: "success",
-              description: "New file created successfully",
-            }),
+          onSelect: action("open"),
         },
-        { type: "item", label: "Open File..." },
-        { type: "separator" },
         {
-          type: "checkbox",
-          label: "Autosave",
-          checked: autosave,
-          onCheckedChange: setAutosave,
+          type: "item",
+          label: "Save",
+          shortcut: "Ctrl+S",
+          onSelect: action("save"),
         },
         { type: "separator" },
         {
-          type: "submenu",
-          label: "Export",
-          items: [
-            { type: "item", label: "PDF" },
-            { type: "item", label: "Word Document" },
-          ],
+          type: "item",
+          label: "Close",
+          shortcut: "Ctrl+W",
+          onSelect: action("close"),
         },
-      ],
-      [autosave],
+      ]}
+    />
+  ),
+};
+
+/**
+ * Checkbox items are controlled — pass `checked` and `onCheckedChange` per item.
+ */
+export const Checkboxes: Story = {
+  render: (args) => {
+    const [notifications, setNotifications] = useState(true);
+    const [autosave, setAutosave] = useState(false);
+    const [spellcheck, setSpellcheck] = useState(true);
+
+    return (
+      <Menu
+        {...args}
+        items={[
+          { type: "label", label: "Editor" },
+          {
+            type: "checkbox",
+            label: "Notifications",
+            checked: notifications,
+            onCheckedChange: setNotifications,
+          },
+          {
+            type: "checkbox",
+            label: "Autosave",
+            checked: autosave,
+            onCheckedChange: setAutosave,
+          },
+          {
+            type: "checkbox",
+            label: "Spell check",
+            checked: spellcheck,
+            onCheckedChange: setSpellcheck,
+          },
+        ]}
+      />
     );
+  },
+};
+
+/**
+ * Radio items must be wrapped in a `"radio-group"` entry. Controlled via `value` and
+ * `onValueChange` on the group — not per item.
+ */
+export const RadioGroup: Story = {
+  render: (args) => {
+    const [theme, setTheme] = useState("system");
 
     return (
-      <Menu {...args} trigger={<Button>Open Menu</Button>} items={items} />
+      <Menu
+        {...args}
+        items={[
+          { type: "label", label: "Appearance" },
+          {
+            type: "radio-group",
+            value: theme,
+            onValueChange: setTheme,
+            items: [
+              { type: "radio", label: "Light", value: "light" },
+              { type: "radio", label: "Dark", value: "dark" },
+              { type: "radio", label: "System", value: "system" },
+            ],
+          },
+        ]}
+      />
     );
   },
 };
 
 /**
- * Se exportan los primitivos para poder construir cualquier tipo de Menu
+ * `"group"` wraps related items under an optional label rendered as `MenuLabel`.
+ */
+export const Groups: Story = {
+  render: (args) => (
+    <Menu
+      {...args}
+      items={[
+        {
+          type: "group",
+          label: "Clipboard",
+          items: [
+            {
+              type: "item",
+              label: "Cut",
+              shortcut: "Ctrl+X",
+              onSelect: action("cut"),
+            },
+            {
+              type: "item",
+              label: "Copy",
+              shortcut: "Ctrl+C",
+              onSelect: action("copy"),
+            },
+            {
+              type: "item",
+              label: "Paste",
+              shortcut: "Ctrl+V",
+              onSelect: action("paste"),
+            },
+          ],
+        },
+        { type: "separator" },
+        {
+          type: "group",
+          label: "Selection",
+          items: [
+            {
+              type: "item",
+              label: "Select All",
+              shortcut: "Ctrl+A",
+              onSelect: action("select-all"),
+            },
+            { type: "item", label: "Deselect", onSelect: action("deselect") },
+          ],
+        },
+      ]}
+    />
+  ),
+};
+
+export const Submenu: Story = {
+  render: (args) => (
+    <Menu
+      {...args}
+      items={[
+        { type: "item", label: "Copy link", onSelect: action("copy-link") },
+        {
+          type: "submenu",
+          label: "Export as",
+          items: [
+            { type: "item", label: "PDF", onSelect: action("export-pdf") },
+            { type: "item", label: "CSV", onSelect: action("export-csv") },
+            { type: "item", label: "JSON", onSelect: action("export-json") },
+          ],
+        },
+      ]}
+    />
+  ),
+};
+
+/**
+ * `variant="error"` applies destructive styling via `data-[variant=error]` on the item.
+ */
+export const Error: Story = {
+  render: (args) => (
+    <Menu
+      {...args}
+      items={[
+        { type: "item", label: "Profile", onSelect: action("profile") },
+        { type: "item", label: "Billing", onSelect: action("billing") },
+        { type: "separator" },
+        {
+          type: "item",
+          label: "Delete account",
+          variant: "error",
+          onSelect: action("delete"),
+        },
+      ]}
+    />
+  ),
+};
+
+/**
+ * Direct primitive composition for fully custom menu layouts.
+ *
+ * ```tsx
+ * <MenuRoot>
+ *   <MenuTrigger render={<Button variant="ghost" size="icon"><MoreHorizontal /></Button>} />
+ *   <MenuPopup>
+ *     <MenuGroup>
+ *       <MenuLabel>Section</MenuLabel>
+ *       <MenuItem onSelect={() => {}}>Item</MenuItem>
+ *     </MenuGroup>
+ *   </MenuPopup>
+ * </MenuRoot>
+ * ```
  */
 export const Primitive: Story = {
-  decorators: [
-    (Story) => (
-      <ToastProvider toastManager={toastManager}>
-        <Story />
-      </ToastProvider>
-    ),
-  ],
   render: () => (
     <MenuRoot>
-      <MenuTrigger asChild>
-        <Button variant="outline">Menu</Button>
-      </MenuTrigger>
-      <MenuContent className="w-56">
-        <MenuLabel>Task Manager</MenuLabel>
-        <MenuSeparator />
+      <MenuTrigger
+        render={
+          <Button variant="ghost" size="icon">
+            <MoreHorizontal />
+          </Button>
+        }
+      />
+      <MenuPopup className="w-56">
         <MenuGroup>
-          <MenuItem>
-            <Clipboard className="mr-2 h-4 w-4" />
-            <span>All Tasks</span>
-          </MenuItem>
-          <MenuItem>
-            <CheckCircle className="mr-2 h-4 w-4" />
-            <span>Completed</span>
-          </MenuItem>
-          <MenuItem>
-            <Calendar className="mr-2 h-4 w-4" />
-            <span>Upcoming</span>
-          </MenuItem>
+          <MenuLabel>Workspace</MenuLabel>
         </MenuGroup>
         <MenuSeparator />
         <MenuGroup>
-          <MenuSub>
-            <MenuSubTrigger>
-              <Tag className="mr-2 h-4 w-4" />
-              <span>Categories</span>
-            </MenuSubTrigger>
-            <MenuPortal>
-              <MenuSubContent>
-                <MenuItem>
-                  <Tag className="mr-2 h-4 w-4" />
-                  <span>Work</span>
-                </MenuItem>
-                <MenuItem>
-                  <Tag className="mr-2 h-4 w-4" />
-                  <span>Personal</span>
-                </MenuItem>
-                <MenuItem>
-                  <Tag className="mr-2 h-4 w-4" />
-                  <span>Shopping</span>
-                </MenuItem>
-                <MenuItem>
-                  <PlusCircle className="mr-2 h-4 w-4" />
-                  <span>Create category</span>
-                </MenuItem>
-              </MenuSubContent>
-            </MenuPortal>
-          </MenuSub>
-          <MenuItem>
-            <PlusCircle className="mr-2 h-4 w-4" />
-            <span>Add Task</span>
-            <MenuShortcut
-              keys="ctrl+b"
-              handler={() =>
-                toastManager.add({
-                  variant: "success",
-                  description: "Creando tarea...",
-                })
-              }
-            >
-              Ctrl+B
-            </MenuShortcut>
-          </MenuItem>
+          <MenuItem onSelect={action("tasks")}>All Tasks</MenuItem>
+          <MenuItem onSelect={action("completed")}>Completed</MenuItem>
+          <MenuItem onSelect={action("upcoming")}>Upcoming</MenuItem>
         </MenuGroup>
         <MenuSeparator />
-        <MenuItem>
-          <Bell className="mr-2 h-4 w-4" />
-          <span>Notifications</span>
-        </MenuItem>
-        <MenuItem>
-          <Settings className="mr-2 h-4 w-4" />
-          <span>Settings</span>
-        </MenuItem>
-        <MenuItem>
-          <Trash2 className="mr-2 h-4 w-4" />
-          <span>Trash</span>
-        </MenuItem>
-        <MenuItem disabled>
-          <Archive className="mr-2 h-4 w-4" />
-          <span>Archived</span>
-        </MenuItem>
+        <MenuSub>
+          <MenuSubTrigger>Categories</MenuSubTrigger>
+          <MenuSubContent>
+            <MenuItem onSelect={action("work")}>Work</MenuItem>
+            <MenuItem onSelect={action("personal")}>Personal</MenuItem>
+            <MenuItem onSelect={action("shopping")}>Shopping</MenuItem>
+          </MenuSubContent>
+        </MenuSub>
         <MenuSeparator />
-        <MenuItem>
-          <LogOut className="mr-2 h-4 w-4" />
-          <span>Log out</span>
+        <MenuItem onSelect={action("settings")}>
+          Settings
+          <MenuShortcut>Ctrl+,</MenuShortcut>
+        </MenuItem>
+        <MenuItem disabled onSelect={action("archived")}>
+          Archived
         </MenuItem>
-      </MenuContent>
+      </MenuPopup>
     </MenuRoot>
   ),
 };