@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -0,0 +1,332 @@
+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,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuPopup,
+  MenuRoot,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+} from "../../components";
+
+/**
+ * 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: "Components/Menu",
+  component: Menu,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    trigger: (
+      <Button variant="ghost" size="icon">
+        <MoreHorizontal />
+      </Button>
+    ),
+  },
+  argTypes: {
+    classNames: { control: false },
+  },
+};
+
+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") },
+      ]}
+    />
+  ),
+};
+
+/**
+ * `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 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") },
+      ]}
+    />
+  ),
+};
+
+/**
+ * `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: "Open",
+          shortcut: "Ctrl+O",
+          onSelect: action("open"),
+        },
+        {
+          type: "item",
+          label: "Save",
+          shortcut: "Ctrl+S",
+          onSelect: action("save"),
+        },
+        { type: "separator" },
+        {
+          type: "item",
+          label: "Close",
+          shortcut: "Ctrl+W",
+          onSelect: action("close"),
+        },
+      ]}
+    />
+  ),
+};
+
+/**
+ * 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}
+        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" },
+            ],
+          },
+        ]}
+      />
+    );
+  },
+};
+
+/**
+ * `"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 = {
+  render: () => (
+    <MenuRoot>
+      <MenuTrigger
+        render={
+          <Button variant="ghost" size="icon">
+            <MoreHorizontal />
+          </Button>
+        }
+      />
+      <MenuPopup className="w-56">
+        <MenuGroup>
+          <MenuLabel>Workspace</MenuLabel>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuGroup>
+          <MenuItem onSelect={action("tasks")}>All Tasks</MenuItem>
+          <MenuItem onSelect={action("completed")}>Completed</MenuItem>
+          <MenuItem onSelect={action("upcoming")}>Upcoming</MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <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 onSelect={action("settings")}>
+          Settings
+          <MenuShortcut>Ctrl+,</MenuShortcut>
+        </MenuItem>
+        <MenuItem disabled onSelect={action("archived")}>
+          Archived
+        </MenuItem>
+      </MenuPopup>
+    </MenuRoot>
+  ),
+};

package/src/components/menu/menu.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Menu } from "../../components";
+
+const openMenu = async (label = "Open") => {
+  await userEvent.click(screen.getByRole("button", { name: label }));
+};
+
+describe("Menu trigger", () => {
+  it("renders trigger without opening popup", () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Copy" }]}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Open" })).toBeInTheDocument();
+  });
+});
+
+describe("Menu item types", () => {
+  it("opens and renders 'item' label", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Copy" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Copy")).toBeInTheDocument();
+  });
+
+  it("renders item shortcut when provided", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Copy", shortcut: "⌘C" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("⌘C")).toBeInTheDocument();
+  });
+
+  it("renders 'separator' between items", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          { type: "item", label: "Alpha" },
+          { type: "separator" },
+          { type: "item", label: "Beta" },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Beta")).toBeInTheDocument();
+  });
+
+  it("renders 'label' item", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "label", label: "Section" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Section")).toBeInTheDocument();
+  });
+
+  it("renders 'checkbox' item", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "checkbox", label: "Bold", checked: true }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Bold")).toBeInTheDocument();
+  });
+
+  it("renders 'group' with label and nested items", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          {
+            type: "group",
+            label: "Actions",
+            items: [{ type: "item", label: "Delete" }],
+          },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Actions")).toBeInTheDocument();
+    expect(screen.getByText("Delete")).toBeInTheDocument();
+  });
+
+  it("renders 'radio-group' with radio items", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          {
+            type: "radio-group",
+            value: "a",
+            items: [
+              { type: "radio", label: "Option A", value: "a" },
+              { type: "radio", label: "Option B", value: "b" },
+            ],
+          },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Option A")).toBeInTheDocument();
+    expect(screen.getByText("Option B")).toBeInTheDocument();
+  });
+
+  it("renders 'submenu' trigger label", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          {
+            type: "submenu",
+            label: "More",
+            items: [{ type: "item", label: "Sub item" }],
+          },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("More")).toBeInTheDocument();
+  });
+});
+
+describe("Menu classNames", () => {
+  it("applies classNames.popup to popup content", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "X" }]}
+        classNames={{ popup: "popup-cls" }}
+      />,
+    );
+    await openMenu();
+    await screen.findByText("X");
+    expect(document.querySelector('[data-slot="menu-content"]')).toHaveClass(
+      "popup-cls",
+    );
+  });
+
+  it("fires onOpenChange when menu opens", async () => {
+    // Menu uses MenuRoot which proxies Base UI Root — just ensure no crash
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Y" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Y")).toBeInTheDocument();
+  });
+});

package/src/components/menu/menu.tsx

@@ -0,0 +1,188 @@
+"use client";
+import * as React from "react";
+import { cn } from "../../lib";
+import {
+  MenuCheckboxItem,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuPopup,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRoot,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+} from "./menu-primitives";
+
+type MenuItemItem = {
+  type: "item";
+  label: React.ReactNode;
+  shortcut?: string;
+} & Omit<React.ComponentProps<typeof MenuItem>, "children" | "label">;
+
+type MenuItemCheckbox = {
+  type: "checkbox";
+  label: React.ReactNode;
+  shortcut?: string;
+} & Omit<React.ComponentProps<typeof MenuCheckboxItem>, "children" | "label">;
+
+type MenuItemRadio = {
+  type: "radio";
+  label: React.ReactNode;
+  shortcut?: string;
+} & Omit<React.ComponentProps<typeof MenuRadioItem>, "children" | "label">;
+
+type MenuItemRadioGroup = {
+  type: "radio-group";
+  value?: string;
+  onValueChange?: (value: string) => void;
+  items: MenuItemRadio[];
+};
+
+type MenuItemLabel = {
+  type: "label";
+  label: React.ReactNode;
+} & Omit<React.ComponentProps<typeof MenuLabel>, "children">;
+
+type MenuItemSeparator = {
+  type: "separator";
+} & React.ComponentProps<typeof MenuSeparator>;
+
+type MenuItemGroup = {
+  type: "group";
+  label?: React.ReactNode;
+  items: MenuItemType[];
+};
+
+type MenuItemSubmenu = {
+  type: "submenu";
+  label: React.ReactNode;
+  items: MenuItemType[];
+} & Omit<React.ComponentProps<typeof MenuSubTrigger>, "children" | "label">;
+
+export type MenuItemType =
+  | MenuItemItem
+  | MenuItemCheckbox
+  | MenuItemRadio
+  | MenuItemRadioGroup
+  | MenuItemLabel
+  | MenuItemSeparator
+  | MenuItemGroup
+  | MenuItemSubmenu;
+
+function renderItem(item: MenuItemType, index: number): React.ReactNode {
+  switch (item.type) {
+    case "item": {
+      const { type: _, label, shortcut, ...props } = item;
+      return (
+        <MenuItem key={index} {...props}>
+          {label}
+          {shortcut && <MenuShortcut>{shortcut}</MenuShortcut>}
+        </MenuItem>
+      );
+    }
+    case "checkbox": {
+      const { type: _, label, shortcut, ...props } = item;
+      return (
+        <MenuCheckboxItem key={index} {...props}>
+          {label}
+          {shortcut && <MenuShortcut>{shortcut}</MenuShortcut>}
+        </MenuCheckboxItem>
+      );
+    }
+    case "radio": {
+      const { type: _, label, shortcut, ...props } = item;
+      return (
+        <MenuRadioItem key={index} {...props}>
+          {label}
+          {shortcut && <MenuShortcut>{shortcut}</MenuShortcut>}
+        </MenuRadioItem>
+      );
+    }
+    case "radio-group": {
+      const { type: _, value, onValueChange, items } = item;
+      return (
+        <MenuRadioGroup key={index} value={value} onValueChange={onValueChange}>
+          {items.map((subItem, i) => renderItem(subItem, i))}
+        </MenuRadioGroup>
+      );
+    }
+    case "label": {
+      const { type: _, label, ...props } = item;
+      return (
+        <MenuGroup key={index}>
+          <MenuLabel {...props}>{label}</MenuLabel>
+        </MenuGroup>
+      );
+    }
+    case "separator": {
+      const { type: _, ...props } = item;
+      return <MenuSeparator key={index} {...props} />;
+    }
+    case "group": {
+      const { type: _, label, items } = item;
+      return (
+        <MenuGroup key={index}>
+          {label && <MenuLabel>{label}</MenuLabel>}
+          {items.map((subItem, i) => renderItem(subItem, i))}
+        </MenuGroup>
+      );
+    }
+    case "submenu": {
+      const { type: _, label, items, ...props } = item;
+      return (
+        <MenuSub key={index}>
+          <MenuSubTrigger {...props}>{label}</MenuSubTrigger>
+          <MenuSubContent>
+            {items.map((subItem, i) => renderItem(subItem, i))}
+          </MenuSubContent>
+        </MenuSub>
+      );
+    }
+  }
+}
+
+export interface MenuProps {
+  trigger: React.ReactElement;
+  items: MenuItemType[];
+  className?: string;
+  side?: React.ComponentProps<typeof MenuPopup>["side"];
+  align?: React.ComponentProps<typeof MenuPopup>["align"];
+  offset?: React.ComponentProps<typeof MenuPopup>["sideOffset"];
+  alignOffset?: React.ComponentProps<typeof MenuPopup>["alignOffset"];
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Popup panel that opens below the trigger. */
+    popup?: string;
+  };
+}
+
+export const Menu = ({
+  trigger,
+  items,
+  className,
+  side = "bottom",
+  align = "start",
+  offset,
+  alignOffset,
+  classNames,
+}: MenuProps) => {
+  return (
+    <MenuRoot>
+      <MenuTrigger render={trigger} />
+      <MenuPopup
+        className={cn(classNames?.popup, className)}
+        side={side}
+        align={align}
+        sideOffset={offset}
+        alignOffset={alignOffset}
+      >
+        {items.map((item, index) => renderItem(item, index))}
+      </MenuPopup>
+    </MenuRoot>
+  );
+};

package/src/components/number-input/index.ts

@@ -0,0 +1 @@
+export * from "./number-input";