@recursica/mui-adapter 0.5.0 → 0.7.0

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

@@ -1,35 +1,239 @@
+/**
+ * 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 } from "./Menu";
-import { ComingSoon } from "@recursica/storybook-template";
+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"
+    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: any) => (
+  <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: any) => (
+  <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: any) => (
+  <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: any) => (
+  <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 meta: Meta<typeof Menu> = {
-  title: "UI-Kit/🚧 Menu",
+const ArrowsIcon = (props: any) => (
+  <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>
+);
+
+type MenuStoryArgs = Record<string, any>;
+
+const meta: Meta = {
+  title: "UI-Kit/Menu",
   component: Menu,
   tags: ["autodocs"],
-  parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
-  },
 };
 
 export default meta;
-type Story = StoryObj<typeof Menu>;
+
+type Story = StoryObj<MenuStoryArgs>;
+
+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 Default: Story = {
-  render: () => <ComingSoon componentName="Menu" />,
+  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 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: {
+    opened: true,
+  },
 };

package/src/components/Menu/Menu.tsx

@@ -1,8 +1,75 @@
-import React from "react";
-import "./Menu.module.css";
+import { forwardRef } from "react";
+import {
+  Menu as MuiMenu,
+  type MenuProps as MuiMenuProps,
+  MenuItem as MuiMenuItem,
+  type MenuItemProps as MuiMenuItemProps,
+  Divider as MuiDivider,
+  type DividerProps as MuiDividerProps,
+} from "@mui/material";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Menu.module.css";
 
-export type MenuProps = React.HTMLAttributes<HTMLDivElement>;
+import { type RecursicaMenuProps } from "@recursica/adapter-common";
 
-export const Menu: React.FC<MenuProps> = (props) => {
-  return <div {...props}>Menu</div>;
-};
+export type MenuProps = RecursicaOverStyled<MuiMenuProps & RecursicaMenuProps>;
+
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
+  { overStyled = false, className, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+
+  return (
+    <MuiMenu
+      ref={ref}
+      className={`${styles.dropdown} ${className || ""}`}
+      classes={{
+        paper: styles.dropdown,
+        list: styles.dropdown,
+      }}
+      {...(sanitizedProps as MuiMenuProps)}
+    />
+  );
+});
+
+Menu.displayName = "Menu";
+
+export type MenuItemProps = RecursicaOverStyled<MuiMenuItemProps>;
+
+export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  function MenuItem({ overStyled = false, className, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+
+    return (
+      <MuiMenuItem
+        ref={ref}
+        className={`${styles.item} ${className || ""}`}
+        {...(sanitizedProps as MuiMenuItemProps)}
+      />
+    );
+  },
+);
+
+MenuItem.displayName = "MenuItem";
+
+export type MenuDividerProps = RecursicaOverStyled<MuiDividerProps>;
+
+export const MenuDivider = forwardRef<HTMLHRElement, MenuDividerProps>(
+  function MenuDivider({ overStyled = false, className, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+
+    return (
+      <MuiDivider
+        ref={ref}
+        className={`${styles.divider} ${className || ""}`}
+        {...(sanitizedProps as MuiDividerProps)}
+      />
+    );
+  },
+);
+
+MenuDivider.displayName = "MenuDivider";

package/src/components/Modal/Modal.module.css

@@ -1,36 +1,172 @@
 /* EXEMPTIONS:
-   This component is a placeholder stub. Once fully implemented, its specific
-   tokens will be fully wired up to direct styles. */
-
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_button-gap */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_content */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_scroll-divider */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_title */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontFamily */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontSize */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontStyle */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontWeight */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_letterSpacing */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_lineHeight */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_textCase */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_textDecoration */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_elevation */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontFamily */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontSize */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontStyle */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontWeight */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_letterSpacing */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_lineHeight */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_textCase */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_textDecoration */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_max-height */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_max-width */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_min-height */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_min-width */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_scroll-divider-thickness */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_vertical-padding */
+   - content-style and header-style parent variables represent raw JSON styling objects rather than 
+     direct CSS variables and cannot be applied directly in standard CSS files.
+     Sub-properties are fully and individually mapped to elements natively. */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style */
+
+.root {
+}
+
+.inner {
+  /* Mantine applies padding to inner to keep modal away from edges. We rely on content constraints. */
+}
+
+.content {
+  /* Geometric Bounds */
+  min-width: var(--recursica_ui-kit_components_modal_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_modal_properties_max-width);
+  min-height: var(--recursica_ui-kit_components_modal_properties_min-height);
+
+  /* Restrict max-height to either the UI Kit max or the viewport bounds to force internal scrolling */
+  max-height: min(
+    var(--recursica_ui-kit_components_modal_properties_max-height),
+    calc(100vh - 4rem)
+  );
+  overflow: hidden;
+
+  /* Box model */
+  border-radius: var(
+    --recursica_ui-kit_components_modal_properties_border-radius
+  );
+  border-width: var(--recursica_ui-kit_components_modal_properties_border-size);
+  border-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_border-color
+  );
+  border-style: solid;
+
+  /* Appearance */
+  background-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_background
+  );
+  box-shadow: var(--recursica_ui-kit_components_modal_properties_elevation);
+
+  /* Internal Flex container to trap header and let body scroll */
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
+    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  background-color: transparent; /* Inherit from content */
+}
+
+.title {
+  color: var(--recursica_ui-kit_components_modal_properties_colors_title);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_modal_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_modal_properties_header-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_modal_properties_header-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_modal_properties_header-style_textDecoration
+  );
+}
+
+.bodyWrapper {
+  /* This is the container that overrides Mantine's native Body. It strips padding and acts as a flex column. */
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: hidden;
+  min-height: 0; /* Critical for flex child scrolling constraint */
+}
+
+.scrollArea {
+  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
+    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+
+  /* Internal scrolling */
+  flex: 1 1 auto;
+  overflow-y: auto;
+  min-height: 0; /* Critical for flex child scrolling constraint */
+
+  color: var(--recursica_ui-kit_components_modal_properties_colors_content);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_modal_properties_content-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_modal_properties_content-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_modal_properties_content-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_modal_properties_content-style_textDecoration
+  );
+
+  /* Ensure button gap token is easily usable if developers use standard spacing */
+  --modal-button-gap: var(
+    --recursica_ui-kit_components_modal_properties_button-gap
+  );
+
+  /* Smooth divider transitions */
+  transition: border-color 0.15s ease;
+  border-top: var(
+      --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
+    )
+    solid transparent;
+  border-bottom: var(
+      --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
+    )
+    solid transparent;
+}
+
+.scrollArea[data-scrolled-top] {
+  border-top-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_scroll-divider
+  );
+}
+
+.scrollArea[data-scrolled-bottom] {
+  border-bottom-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_scroll-divider
+  );
+}
+
+.footer {
+  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
+    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  background-color: transparent;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--recursica_ui-kit_components_modal_properties_button-gap);
+}
+
+.close {
+  /* Inherits standard icon button tokens natively, but we can override if required */
+}

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

@@ -1,35 +1,79 @@
+import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Modal } from "./Modal";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Modal, type ModalProps } from "./Modal";
+import { Button } from "../Button";
 
 const meta: Meta<typeof Modal> = {
-  title: "UI-Kit/🚧 Modal",
+  title: "UI-Kit/Modal",
   component: Modal,
   tags: ["autodocs"],
-  parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
+  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) => {
+  const [opened, setOpened] = useState(false);
+  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 = {
-  render: () => <ComingSoon componentName="Modal" />,
+  args: {
+    title: "Authentication Required",
+  },
+  render: (args) => <DefaultWrapper {...args} />,
+};
+
+const ScrollingWrapper = (args: ModalProps) => {
+  const [opened, setOpened] = useState(false);
+  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} />,
 };