@recursica/adapter-mui-v7 1.3.2 → 1.3.4

package/src/components/Chip/Chip.stories.tsx

@@ -1,154 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Chip } from "./Chip";
-
-type ChipStoryProps = React.ComponentProps<typeof Chip>;
-
-const meta: Meta<ChipStoryProps> = {
-  title: "UI-Kit/Chip",
-  component: Chip,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The Chip component is used to represent interactive selections, descriptive tags, or dynamic filters natively bounded to Recursica variables. It can be used as a toggleable input, can render a custom leading `icon`, and handles close constraints automatically via the `onDelete` property.",
-      },
-    },
-  },
-  argTypes: {
-    error: {
-      control: "boolean",
-      description: "Applies the error state styling dynamically.",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Applies disabled token states.",
-    },
-    checked: {
-      control: "boolean",
-      description: "Forces the visual selected state.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ChipStoryProps>;
-
-// The Default story exposing native properties for the playground.
-export const Default: Story = {
-  args: {
-    children: "Default Chip",
-    error: false,
-    disabled: false,
-    checked: false,
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} />,
-};
-
-// Static Stories for Regression Snapshots
-export const Unselected: Story = {
-  args: {
-    children: "Unselected",
-    checked: false,
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} />,
-};
-
-export const Selected: Story = {
-  args: {
-    children: "Selected",
-    checked: true,
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} onChange={() => {}} />,
-};
-
-export const ErrorState: Story = {
-  args: {
-    children: "Error",
-    error: true,
-    checked: false,
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} />,
-};
-
-export const ErrorSelected: Story = {
-  args: {
-    children: "Error Selected",
-    error: true,
-    checked: true,
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} onChange={() => {}} />,
-};
-
-export const Removable: Story = {
-  args: {
-    children: "Dismissible",
-    checked: false,
-    onDelete: () => console.log("Removal Action Triggered"),
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} />,
-};
-
-export const WithLeadingIcon: Story = {
-  args: {
-    children: "Leading Icon",
-    checked: false,
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="12" cy="12" r="10"></circle>
-        <path d="M12 8v4"></path>
-        <path d="M12 16h.01"></path>
-      </svg>
-    ),
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} />,
-};
-
-// Selecting a chip with a leading icon swaps in the checkmark rather than showing both — this
-// was already MUI-adapter's native behavior; the story exists to keep parity with mantine-adapter.
-export const WithLeadingIconSelected: Story = {
-  args: {
-    ...WithLeadingIcon.args,
-    children: "Leading Icon Selected",
-    checked: true,
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} onChange={() => {}} />,
-};
-
-// A label long enough to exceed the chip's own max-width token — should stay a single line and
-// truncate with an ellipsis, never wrap, even with both a leading icon and a dismiss button
-// competing for space.
-export const MaxWidthEllipsis: Story = {
-  args: {
-    children:
-      "A very long chip label that exceeds the maximum width and should truncate with an ellipsis",
-    checked: false,
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="12" cy="12" r="10"></circle>
-        <path d="M12 8v4"></path>
-        <path d="M12 16h.01"></path>
-      </svg>
-    ),
-    onDelete: () => console.log("Removal Action Triggered"),
-  },
-  render: (args: ChipStoryProps) => <Chip {...args} />,
-};

package/src/components/Container/Container.stories.tsx

@@ -1,118 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Container } from "./Container";
-import { Text } from "../Text/Text";
-
-type ContainerStoryProps = React.ComponentProps<typeof Container>;
-
-const meta: Meta<ContainerStoryProps> = {
-  title: "UI-Kit/Container",
-  component: Container,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Container is a generic layout wrapper that safely maps to Mantine's Container, standardizing maximum content widths across the application.",
-      },
-    },
-  },
-  args: {
-    size: "md",
-    fluid: false,
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "rec-sm",
-        "rec-default",
-        "rec-md",
-        "rec-lg",
-        "rec-xl",
-        "rec-2xl",
-      ],
-      description:
-        "Maximum width defined by Mantine system sizes or Recursica sizes",
-    },
-    fluid: {
-      control: "boolean",
-      description: "If true, overrides size and sets max-width to 100%",
-    },
-    defaultChecked: {
-      table: { disable: true },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ContainerStoryProps>;
-
-export const Default: Story = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <div style={{ backgroundColor: "#f0f0f0", padding: "16px" }}>
-      <Container
-        {...args}
-        style={{
-          backgroundColor: "white",
-          padding: "16px",
-          border: "1px solid #ccc",
-        }}
-      >
-        <Text>
-          This is a Container holding centered content. The background and
-          border are added just to demonstrate the layout bounds visually.
-        </Text>
-      </Container>
-    </div>
-  ),
-};
-
-export const SmallContainer: Story = {
-  args: {
-    size: "sm",
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <div style={{ backgroundColor: "#f0f0f0", padding: "16px" }}>
-      <Container
-        {...args}
-        style={{
-          backgroundColor: "white",
-          padding: "16px",
-          border: "1px solid #ccc",
-        }}
-      >
-        <Text>Small Container Layout</Text>
-      </Container>
-    </div>
-  ),
-};
-
-export const FluidContainer: Story = {
-  args: {
-    fluid: true,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <div style={{ backgroundColor: "#f0f0f0", padding: "16px" }}>
-      <Container
-        {...args}
-        style={{
-          backgroundColor: "white",
-          padding: "16px",
-          border: "1px solid #ccc",
-        }}
-      >
-        <Text>Fluid Container Layout</Text>
-      </Container>
-    </div>
-  ),
-};

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,163 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { DatePicker } from "./DatePicker";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-
-const meta: Meta<typeof DatePicker> = {
-  title: "UI-Kit/DatePicker",
-  component: DatePicker,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`DatePicker\` primitive provides a unified calendar date selection input integrated directly into the \`FormControlWrapper\` architecture.
-
-### Architectural Decoupling
-Recursica overrides MUI X's \`DatePicker\` field/popover defaults, safely injecting the date picker into our rigid structural layout systems. State modifiers (e.g. Focus, Errors, ReadOnly) hook seamlessly back onto our native CSS mapping architecture.
-
-### Examples
-Always structure horizontal architectures via the generic \`formLayout\` parameter.
-\`\`\`tsx
-<DatePicker 
-  label="Start Date" 
-  assistiveText="Select the deployment kick-off date." 
-  formLayout="stacked" 
-/>
-\`\`\`
-`,
-      },
-    },
-  },
-  argTypes: {
-    ...formControlArgTypes,
-    disabled: {
-      control: "boolean",
-      description:
-        "Maps the formal disabled variable states structurally to the input core.",
-    },
-    error: {
-      control: "text",
-      description:
-        "Applies the strict error string boundary rendering invalid structures seamlessly.",
-    },
-    required: {
-      control: "boolean",
-    },
-    label: {
-      control: "text",
-    },
-    assistiveText: {
-      control: "text",
-    },
-    readOnly: {
-      control: "boolean",
-      description:
-        "Toggles structural read-only data presentation explicitly blocking standard component bindings.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DatePicker>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    label: "Project Deadline",
-    assistiveText: "Specify the absolute cutoff for code submission.",
-  },
-};
-
-export const FormsSideBySide: Story = {
-  args: {
-    label: "Incident Start Date",
-    assistiveText: "When did the incident originally occur?",
-    formLayout: "side-by-side",
-  },
-};
-
-function CustomLeadingIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-      <line x1="16" y1="2" x2="16" y2="6"></line>
-      <line x1="8" y1="2" x2="8" y2="6"></line>
-      <line x1="3" y1="10" x2="21" y2="10"></line>
-    </svg>
-  );
-}
-
-export const WithLeadingIcon: Story = {
-  args: {
-    label: "Launch Date",
-    slots: { openPickerIcon: CustomLeadingIcon },
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: "Disabled Date Range",
-    disabled: true,
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    label: "Execution Date",
-    error: "The chosen date conflicts with an existing deployment freeze.",
-    required: true,
-  },
-};
-
-export const OpenedCalendar: Story = {
-  args: {
-    label: "Meeting Date",
-    assistiveText: "Calendar rendered open by default for styling review.",
-    // MUI X's DatePicker supports a controlled `open` prop directly; pairing it with a
-    // no-op `onClose` keeps the calendar open with no click interaction needed — same
-    // intent as the mantine-adapter's `OpenedCalendar` story.
-    open: true,
-    onClose: () => {},
-    // Fixed (not computed) so the selected-day fill is visible on load, alongside the
-    // today marker, for styling review. Local-component constructor, not an ISO date
-    // string — `new Date("2026-08-26")` parses as UTC midnight, which renders as the
-    // 25th in any timezone behind UTC.
-    defaultValue: new Date(2026, 7, 26),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The calendar dropdown renders open by default so its styling can be reviewed without a click interaction.",
-      },
-    },
-  },
-};
-
-export const StaticReadOnly: Story = {
-  args: {
-    label: "Static ReadOnly Review",
-    value: new Date("2026-05-21"),
-    readOnly: true,
-  },
-};
-
-export const EditableReadOnly: Story = {
-  args: {
-    label: "Editable ReadOnly Review",
-    defaultValue: new Date("2026-06-01"),
-    readOnly: true,
-    labelWithEditIcon: true,
-  },
-};

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,252 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Dropdown } from "./Dropdown";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-import { renderRichOptionContent } from "../../utils/renderRichOption";
-import styles from "./Dropdown.module.css";
-
-type DropdownStoryProps = React.ComponentProps<typeof Dropdown>;
-
-const meta: Meta<DropdownStoryProps> = {
-  title: "UI-Kit/Dropdown",
-  component: Dropdown,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Dropdown provides a selectable list of options, mapping natively over Mantine's Select component encapsulated within the standardized FormControlWrapper.",
-      },
-    },
-  },
-  args: {
-    label: "Country Selection",
-    assistiveText: "Select your country of origin.",
-    placeholder: "Pick value",
-    data: ["United States", "Canada", "Mexico", "United Kingdom", "France"],
-    disabled: false,
-    required: false,
-    readOnly: false,
-    clearable: false,
-  },
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    ...formControlArgTypes,
-    readOnly: {
-      control: "boolean",
-    },
-    clearable: {
-      control: "boolean",
-    },
-    wrapItemText: {
-      control: "boolean",
-      description:
-        "Wraps option label/supportingText onto additional lines instead of truncating with an ellipsis.",
-    },
-    containerWidth: {
-      table: { disable: true },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<DropdownStoryProps>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Clearable: Story = {
-  args: {
-    label: "Clearable Options",
-    clearable: true,
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  args: {
-    label: "Destination",
-    startAdornment: (
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-        <circle cx="12" cy="10" r="3"></circle>
-      </svg>
-    ),
-  },
-};
-
-const UserIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-    <circle cx="12" cy="7" r="4"></circle>
-  </svg>
-);
-
-export const WithRichOptions: Story = {
-  args: {
-    label: "Assignee",
-    placeholder: "Pick a team member",
-    assistiveText:
-      "Each option can show a leading icon and supporting text — see MANTINE_ADAPTER_RICH_OPTION_DATA.md.",
-    data: [
-      {
-        value: "jdoe",
-        label: "Jane Doe",
-        leadingIcon: UserIcon,
-        supportingText: "jane.doe@example.com",
-      },
-      {
-        value: "asmith",
-        label: "Alex Smith",
-        leadingIcon: UserIcon,
-        supportingText: "alex.smith@example.com",
-      },
-      { value: "unassigned", label: "Unassigned" },
-    ],
-  },
-};
-
-export const WithRichOptionsWrapped: Story = {
-  args: {
-    label: "Assignee",
-    placeholder: "Pick a team member",
-    wrapItemText: true,
-    data: [
-      {
-        value: "jdoe",
-        label: "Jane Doe, Senior Staff Engineer, Platform Infrastructure",
-        leadingIcon: UserIcon,
-        supportingText:
-          "jane.doe@example.com — Platform Infrastructure team, on-call rotation lead",
-      },
-      { value: "unassigned", label: "Unassigned" },
-    ],
-    assistiveText:
-      "wrapItemText=true — long label/supportingText wrap instead of truncating.",
-  },
-};
-
-const optionRowPreviewClassNames = {
-  optionContent: styles.optionContent,
-  optionIcon: styles.optionIcon,
-  optionText: styles.optionText,
-  optionTextWrap: styles.optionTextWrap,
-  optionSupportingText: styles.optionSupportingText,
-};
-
-const OPTION_ROW_PREVIEW_ITEMS = [
-  {
-    value: "icon-and-supporting",
-    label: "Jane Doe",
-    leadingIcon: UserIcon,
-    supportingText: "jane.doe@example.com",
-  },
-  {
-    value: "no-icon",
-    label: "Alex Smith",
-    supportingText:
-      "No leadingIcon — label/supportingText shift left, no reserved icon space",
-  },
-  {
-    value: "no-supporting-text",
-    label: "Taylor Rivera",
-    leadingIcon: UserIcon,
-  },
-  {
-    value: "plain",
-    label: "Plain option — no leadingIcon, no supportingText",
-  },
-  {
-    value: "long-text",
-    label:
-      "A very long option label that, with wrapItemText, wraps onto a second line instead of overflowing the fixed-width dropdown — otherwise it truncates with an ellipsis",
-    leadingIcon: UserIcon,
-    supportingText:
-      "A similarly long supporting text string, to confirm the same wrap-or-truncate behavior applies to it too",
-  },
-];
-
-// Renders the option row content directly — outside the MUI Menu portal — inside a container
-// sized to Dropdown's own max-width token. Spacing between rows, icon/supportingText presence-
-// or-absence alignment, and long-text wrapping/truncation are all much easier to inspect this way
-// than by opening the real (portal-rendered) MUI Select menu. See
-// MANTINE_ADAPTER_RICH_OPTION_DATA.md.
-const renderOptionRowPreview = (wrapItemText: boolean) => (
-  <div
-    className={styles.dropdown}
-    style={{
-      width:
-        "var(--recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_max-width)",
-    }}
-  >
-    {OPTION_ROW_PREVIEW_ITEMS.map((item) => (
-      <div key={item.value} className={styles.option}>
-        {renderRichOptionContent(
-          item,
-          optionRowPreviewClassNames,
-          wrapItemText,
-        )}
-      </div>
-    ))}
-  </div>
-);
-
-// Default: `wrapItemText` is false — label/supportingText truncate to a single line with an
-// ellipsis instead of wrapping.
-export const RichOptionRowPreview: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render: () => renderOptionRowPreview(false),
-};
-
-// `wrapItemText: true` — label/supportingText wrap onto additional lines instead of truncating.
-export const RichOptionRowPreviewWrapped: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render: () => renderOptionRowPreview(true),
-};
-
-export const StaticError: Story = {
-  args: {
-    error: "You must choose a valid destination.",
-    value: "Invalid Island",
-  },
-};
-
-export const StaticDisabled: Story = {
-  args: {
-    disabled: true,
-    value: "United States",
-  },
-};
-
-export const StaticReadOnly: Story = {
-  args: {
-    label: "Read Only View",
-    readOnly: true,
-    value: "Canada",
-  },
-};