@recursica/adapter-mui-v7 1.3.2 → 1.3.3

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

@@ -1,402 +0,0 @@
-/**
- * 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)
- */
-
-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";
-import styles from "./Menu.module.css";
-
-const SettingsIcon = (props: React.ComponentProps<"svg">) => (
-  <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"
-    {...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 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 = (props: React.ComponentProps<"svg">) => (
-  <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"
-    {...props}
-  >
-    <circle cx="11" cy="11" r="8" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  </svg>
-);
-
-const MessageIcon = (props: React.ComponentProps<"svg">) => (
-  <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"
-    {...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 = (props: React.ComponentProps<"svg">) => (
-  <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"
-    {...props}
-  >
-    <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 = (props: React.ComponentProps<"svg">) => (
-  <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"
-    {...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 = (props: React.ComponentProps<"svg">) => (
-  <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"
-    {...props}
-  >
-    <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>
-);
-
-const ChevronRightIcon = (props: React.ComponentProps<"svg">) => (
-  <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"
-    {...props}
-  >
-    <polyline points="9 18 15 12 9 6" />
-  </svg>
-);
-
-// adapter-mui-v7's Menu is monolithic (see IMPLEMENTATION_NOTES.md) — there is no
-// Menu.Sub composable, so a submenu is just a MenuItem that anchors its own
-// nested Menu, mirroring how the top-level trigger manages its own anchorEl.
-interface SubMenuTriggerProps {
-  label: string;
-  children: React.ReactNode;
-}
-
-const SubMenuTrigger = ({ label, children }: SubMenuTriggerProps) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  return (
-    <>
-      <MenuItem onClick={(event) => setAnchorEl(event.currentTarget)}>
-        {label}
-        <ChevronRightIcon
-          className={styles.chevron}
-          style={{ marginLeft: "auto", paddingLeft: 8 }}
-        />
-      </MenuItem>
-      <Menu
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={() => setAnchorEl(null)}
-        anchorOrigin={{ vertical: "top", horizontal: "right" }}
-        transformOrigin={{ vertical: "top", horizontal: "left" }}
-      >
-        {children}
-      </Menu>
-    </>
-  );
-};
-
-type MenuStoryArgs = Record<string, unknown>;
-
-const meta: Meta = {
-  title: "UI-Kit/Menu",
-  component: Menu,
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<MenuStoryArgs>;
-
-interface InteractiveMenuProps {
-  children?: React.ReactNode;
-  opened?: boolean;
-  [key: string]: unknown;
-}
-
-const InteractiveMenu = ({ children, ...args }: InteractiveMenuProps) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  const open = Boolean(anchorEl) || Boolean(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 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: {
-    opened: true,
-  },
-};
-
-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: {
-    opened: true,
-  },
-};
-
-export const WithSubmenus: Story = {
-  render: (args) => (
-    <InteractiveMenu {...args}>
-      <MenuItem>Dashboard</MenuItem>
-      <SubMenuTrigger label="Products">
-        <MenuItem>All products</MenuItem>
-        <MenuItem>Categories</MenuItem>
-        <MenuItem>Tags</MenuItem>
-      </SubMenuTrigger>
-      <SubMenuTrigger label="Orders">
-        <MenuItem>Open</MenuItem>
-        <MenuItem>Completed</MenuItem>
-        <MenuItem>Cancelled</MenuItem>
-      </SubMenuTrigger>
-    </InteractiveMenu>
-  ),
-  args: {
-    opened: true,
-  },
-};
-
-export const WithMaxHeight: 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>
-      <MenuItem>
-        <SearchIcon style={{ marginRight: 8 }} /> Search
-      </MenuItem>
-      <MenuItem>
-        <ArrowsIcon style={{ marginRight: 8 }} /> Transfer my data
-      </MenuItem>
-      <MenuItem>
-        <TrashIcon style={{ marginRight: 8 }} /> Delete my account
-      </MenuItem>
-    </InteractiveMenu>
-  ),
-  args: {
-    opened: true,
-    maxHeight: 160,
-  },
-  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.",
-      },
-    },
-  },
-};
-
-// adapter-mui-v7's Menu has no native hover-trigger support (unlike Mantine's `trigger` prop),
-// so this story implements open-on-hover itself: hovering the target opens the menu, and a
-// short close delay (mirroring Mantine's `closeDelay`) keeps it open while the pointer moves
-// from the target into the dropdown, since MUI's Menu renders in a portal outside the
-// wrapper's DOM subtree.
-const HoverMenu = ({ children, ...args }: InteractiveMenuProps) => {
-  const [open, setOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
-
-  const cancelClose = () => {
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-  };
-  const scheduleClose = () => {
-    closeTimer.current = setTimeout(() => setOpen(false), 300);
-  };
-
-  return (
-    <div>
-      <Button
-        ref={buttonRef}
-        variant="solid"
-        onClick={() => setOpen((prev) => !prev)}
-        onMouseEnter={() => {
-          cancelClose();
-          setOpen(true);
-        }}
-        onMouseLeave={scheduleClose}
-      >
-        Hover or Click
-      </Button>
-      <Menu
-        {...args}
-        anchorEl={buttonRef.current}
-        open={open}
-        onClose={() => setOpen(false)}
-        slotProps={{
-          paper: {
-            onMouseEnter: cancelClose,
-            onMouseLeave: scheduleClose,
-          },
-        }}
-      >
-        {children}
-      </Menu>
-    </div>
-  );
-};
-
-export const HoverTrigger: Story = {
-  render: (args) => (
-    <HoverMenu {...args}>
-      <MenuItem>
-        <SettingsIcon style={{ marginRight: 8 }} /> Settings
-      </MenuItem>
-      <MenuItem>
-        <MessageIcon style={{ marginRight: 8 }} /> Messages
-      </MenuItem>
-      <MenuItem>
-        <ImageIcon style={{ marginRight: 8 }} /> Gallery
-      </MenuItem>
-    </HoverMenu>
-  ),
-};

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

@@ -1,105 +0,0 @@
-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/NumberInput/NumberInput.stories.tsx

@@ -1,96 +0,0 @@
-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

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