@recursica/adapter-mantine-v8 1.3.4 → 1.3.6

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

@@ -0,0 +1,370 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Menu } from "./Menu";
+import { Button } from "../Button";
+
+/**
+ * Menu story axes:
+ * - trigger: click (default) vs hover behavior
+ * - position: dropdown alignment relative to target
+ * - withArrow: arrow indicator on the dropdown
+ * - content variations: icons, dividers, labels, disabled items, submenus
+ * - layer: tested via the global Layer decorator (withLayer/layer args)
+ */
+
+const SettingsIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <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" />
+  </svg>
+);
+
+const SearchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const MessageIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+    <circle cx="8.5" cy="8.5" r="1.5" />
+    <polyline points="21 15 16 10 5 21" />
+  </svg>
+);
+
+const TrashIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="17 1 21 5 17 9" />
+    <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+    <polyline points="7 23 3 19 7 15" />
+    <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+  </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.",
+    },
+    maxHeight: {
+      control: "number",
+      description:
+        "Overrides the token-driven dropdown max-height with an explicit pixel value.",
+    },
+  },
+  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,
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
+  },
+  // 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>
+      </Menu>
+    );
+  },
+};
+
+export const WithDisabledItems: Story = {
+  args: {
+    position: "bottom-start",
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
+  },
+  // 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>
+    );
+  },
+};
+
+export const WithSubmenus: Story = {
+  args: {
+    position: "bottom-start",
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
+  },
+  // 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>
+    );
+  },
+};
+
+export const WithMaxHeight: Story = {
+  args: {
+    position: "bottom-start",
+    maxHeight: 160,
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`maxHeight` overrides the token-driven dropdown max-height with an explicit pixel value, scrolling the item list once it's exceeded.",
+      },
+    },
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
+    return (
+      <Menu {...args}>
+        <Menu.Target>
+          <Button variant="solid">Menu with maxHeight</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.Item leftSection={<SearchIcon />}>Search</Menu.Item>
+          <Menu.Item leftSection={<ArrowsIcon />}>Transfer my data</Menu.Item>
+          <Menu.Item leftSection={<TrashIcon />}>Delete my account</Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    );
+  },
+};
+
+export const HoverTrigger: Story = {
+  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>
+    );
+  },
+};

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal, type ModalProps } from "./Modal";
+import { Button } from "../Button";
+
+const meta: Meta<typeof Modal> = {
+  title: "UI-Kit/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  argTypes: {
+    opened: { table: { disable: true } },
+    onClose: { table: { disable: true } },
+    defaultChecked: { table: { disable: true } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+const DefaultWrapper = (args: ModalProps) => {
+  // Starts opened so the modal is visible without pressing a button first.
+  const [opened, setOpened] = useState(true);
+  return (
+    <>
+      <Modal {...args} opened={opened} onClose={() => setOpened(false)}>
+        Please log in to continue accessing this feature.
+        <Modal.Footer>
+          <Button variant="outline" onClick={() => setOpened(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => setOpened(false)}>Confirm</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpened(true)}>Open Modal</Button>
+    </>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    title: "Authentication Required",
+  },
+  render: (args) => <DefaultWrapper {...args} />,
+};
+
+const LongTitleWrapper = (args: ModalProps) => {
+  const [opened, setOpened] = useState(true);
+  return (
+    <>
+      <Modal {...args} opened={opened} onClose={() => setOpened(false)}>
+        The title above is longer than the header can display, so it truncates
+        with an ellipsis instead of wrapping onto a second line.
+        <Modal.Footer>
+          <Button onClick={() => setOpened(false)}>Got it</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpened(true)}>Open Modal</Button>
+    </>
+  );
+};
+
+export const LongTitle: Story = {
+  args: {
+    title:
+      "This Modal Title Is Deliberately Long Enough To Exceed The Available Header Width",
+  },
+  render: (args) => <LongTitleWrapper {...args} />,
+};
+
+const ScrollingWrapper = (args: ModalProps) => {
+  // Starts opened so the modal is visible without pressing a button first.
+  const [opened, setOpened] = useState(true);
+  return (
+    <>
+      <Modal {...args} opened={opened} onClose={() => setOpened(false)}>
+        <p>
+          This modal demonstrates the dynamically injected scroll dividers. When
+          this body content overflows, the borders between the Header and Footer
+          automatically appear to define the scrolling boundary.
+        </p>
+        {Array(20)
+          .fill(0)
+          .map((_, i) => (
+            <p key={i}>Scrolling content block {i + 1}...</p>
+          ))}
+        {/* The new Footer abstraction */}
+        <Modal.Footer>
+          <Button variant="outline" onClick={() => setOpened(false)}>
+            Decline
+          </Button>
+          <Button onClick={() => setOpened(false)}>Accept Terms</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpened(true)}>Open Scrolling Modal</Button>
+    </>
+  );
+};
+
+export const ScrollingContent: Story = {
+  args: {
+    title: "Terms and Conditions",
+  },
+  render: (args) => <ScrollingWrapper {...args} />,
+};

package/src/components/NativeInputA11y.dom.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { Checkbox } from "./Checkbox/Checkbox";
+import { Radio } from "./Radio/Radio";
+import { Switch } from "./Switch/Switch";
+import { MantineProvider } from "@mantine/core";
+const wrap = (n: React.ReactElement) => <MantineProvider>{n}</MantineProvider>;
+
+// Where the naming attributes land matters, not just that they render: a screen reader reads
+// the native <input>, so aria-* on a wrapper leaves the control unnamed.
+function render(node: React.ReactElement): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  flushSync(() => createRoot(container).render(wrap(node)));
+  return container;
+}
+
+const controls = [
+  ["Checkbox", Checkbox],
+  ["Radio", Radio],
+  ["Switch", Switch],
+] as const;
+
+describe.each(controls)("%s accessible name", (_name, Control) => {
+  // The union type under test is already enforced at compile time; cast to exercise each branch.
+  const C = Control as unknown as React.ComponentType<Record<string, unknown>>;
+
+  it("puts aria-label on the native input only", () => {
+    const c = render(<C aria-label="Select all" />);
+    expect(c.querySelector("input")!.getAttribute("aria-label")).toBe(
+      "Select all",
+    );
+    expect(c.querySelectorAll("[aria-label]")).toHaveLength(1);
+  });
+
+  it("puts aria-labelledby and aria-describedby on the native input only", () => {
+    const c = render(<C aria-labelledby="a" aria-describedby="b" />);
+    const input = c.querySelector("input")!;
+    expect(input.getAttribute("aria-labelledby")).toBe("a");
+    expect(input.getAttribute("aria-describedby")).toBe("b");
+    expect(c.querySelectorAll("[aria-labelledby]")).toHaveLength(1);
+    expect(c.querySelectorAll("[aria-describedby]")).toHaveLength(1);
+  });
+
+  it("links a visible label to the input without a caller-supplied id", () => {
+    const c = render(<C label="Hello" />);
+    const input = c.querySelector("input")!;
+    const label = c.querySelector("label")!;
+    expect(input.id).not.toBe("");
+    expect(label.getAttribute("for")).toBe(input.id);
+  });
+
+  it("keeps a caller-supplied id", () => {
+    const c = render(<C label="Hello" id="mine" />);
+    expect(c.querySelector("input")!.id).toBe("mine");
+    expect(c.querySelector("label")!.getAttribute("for")).toBe("mine");
+  });
+});

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberInput } from "./NumberInput";
+
+const meta: Meta<typeof NumberInput> = {
+  title: "UI-Kit/NumberInput",
+  component: NumberInput,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    assistiveText: { control: "text" },
+    disabled: { control: "boolean" },
+    error: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    required: { control: "boolean" },
+    hideControls: { control: "boolean" },
+    formLayout: {
+      control: "select",
+      options: ["stacked", "side-by-side"],
+    },
+    labelSize: {
+      control: "select",
+      options: ["small", "default", "large"],
+    },
+    assistiveWithIcon: { table: { disable: true } },
+    labelOptionalText: { table: { disable: true } },
+    labelWithEditIcon: { table: { disable: true } },
+    onLabelEditClick: { table: { disable: true } },
+    emptyValueComponent: { table: { disable: true } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NumberInput>;
+
+export const Default: Story = {
+  args: {
+    label: "Amount",
+    placeholder: "Enter an amount",
+    assistiveText: "Must be greater than 0",
+    defaultValue: 10,
+    min: 0,
+    max: 100,
+  },
+};
+
+export const SideBySideLayout: Story = {
+  args: {
+    ...Default.args,
+    formLayout: "side-by-side",
+  },
+};
+
+export const States: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        maxWidth: 400,
+      }}
+    >
+      <NumberInput label="Default" placeholder="Enter a number" />
+      <NumberInput label="Disabled" placeholder="Disabled input" disabled />
+      <NumberInput label="Error" placeholder="Error state" error />
+      <NumberInput label="Read Only" value={42} readOnly />
+      <NumberInput label="Required" required />
+    </div>
+  ),
+};
+
+export const WithLeftIcon: Story = {
+  args: {
+    label: "Price",
+    placeholder: "0.00",
+    leftSection: <span>$</span>,
+  },
+};
+
+export const WithRightIcon: Story = {
+  args: {
+    label: "Percentage",
+    placeholder: "0",
+    rightSection: <span>%</span>,
+    hideControls: true, // Typically hiding controls if rightSection is occupied
+  },
+};
+
+export const HiddenControls: Story = {
+  args: {
+    label: "Zip Code",
+    placeholder: "Enter zip code",
+    hideControls: true,
+  },
+};

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from "./Pagination";
+
+const meta: Meta<typeof Pagination> = {
+  title: "UI-Kit/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  argTypes: {
+    total: { control: "number" },
+    withEdges: { control: "boolean" },
+    withControls: { control: "boolean" },
+    disabled: { control: "boolean" },
+    withLabels: {
+      control: "boolean",
+      description: "Toggle text labels alongside icons",
+    },
+    defaultChecked: { table: { disable: true } },
+  },
+  args: {
+    total: 10,
+    withEdges: false,
+    withControls: true,
+    withLabels: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <Pagination {...args} />;
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {};
+
+export const WithEdges: Story = {
+  args: {
+    withEdges: true,
+  },
+};
+
+export const WithTextLabels: Story = {
+  args: {
+    withEdges: true,
+    withLabels: true,
+  },
+};