@recursica/mantine-adapter 0.6.0 → 0.8.0

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

@@ -0,0 +1,115 @@
+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 `onRemove` 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,
+    onRemove: () => 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} />,
+};

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,143 @@
+import React, { forwardRef } from "react";
+import {
+  Chip as MantineChip,
+  type ChipProps as MantineChipProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Chip.module.css";
+
+export interface RecursicaChipProps {
+  /** Enables the error state styling */
+  error?: boolean;
+
+  /** Leading icon content */
+  icon?: React.ReactNode;
+
+  /** Called when the remove (X) icon is clicked. If provided, the remove icon will be displayed. */
+  onRemove?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+
+  /** Screen reader label for the remove button. Defaults to 'Remove' */
+  removeLabel?: string;
+}
+
+export type ChipProps = RecursicaOverStyled<
+  Omit<MantineChipProps, "variant" | "size" | "color" | "radius"> &
+    RecursicaChipProps
+>;
+
+function CloseIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <line x1="18" y1="6" x2="6" y2="18"></line>
+      <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+  );
+}
+
+export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
+  {
+    error = false,
+    icon,
+    onRemove,
+    removeLabel = "Remove",
+    children,
+    overStyled = false,
+    ...rest
+  },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+    label: styles.label,
+    input: styles.input,
+    iconWrapper: styles.mantineIconWrapper,
+    checkIcon: styles.checkIcon,
+  };
+
+  const classNamesProp = restRecord.classNames;
+  if (
+    classNamesProp &&
+    typeof classNamesProp === "object" &&
+    !Array.isArray(classNamesProp)
+  ) {
+    const o = classNamesProp as Partial<Record<string, string>>;
+    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+    mergedClassNames.label = o.label
+      ? `${styles.label} ${o.label}`
+      : styles.label;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  // Determine state
+  const dataError = error ? "" : undefined;
+  const isIconOnly = !children && (!!icon || !!onRemove);
+
+  return (
+    <MantineChip
+      ref={ref}
+      className={finalClass}
+      classNames={mergedClassNames}
+      {...(dataError !== undefined ? { "data-error": "" } : {})}
+      {...(isIconOnly ? { "data-icon-only": "" } : {})}
+      {...sanitizedProps}
+    >
+      <span className={styles.innerWrapper}>
+        {icon && (
+          <span className={styles.leadingIcon} aria-hidden>
+            {icon}
+          </span>
+        )}
+
+        <span className={styles.children}>{children}</span>
+
+        {onRemove && (
+          <span
+            role="button"
+            className={styles.removeIcon}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemove(e);
+            }}
+            aria-label={removeLabel}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemove(
+                  e as unknown as React.MouseEvent<HTMLSpanElement, MouseEvent>,
+                );
+              }
+            }}
+            tabIndex={0}
+          >
+            <CloseIcon />
+          </span>
+        )}
+      </span>
+    </MantineChip>
+  );
+});
+
+Chip.displayName = "Chip";

package/src/components/Container/CONTAINER_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,4 @@
+# Container Implementation Notes
+
+The `Container` component is a generic layout wrapper mapped directly to Mantine's `Container`.
+It serves to provide standardized centered max-width bounds around content. Mantine handles the width boundaries inherently based on size properties.

package/src/components/Container/Container.module.css

@@ -0,0 +1,7 @@
+/* HARDCODED VALUES:
+ * None. This is a generic layout wrapper.
+ */
+
+.root {
+  /* Mantine handles container constraints natively. */
+}

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

@@ -0,0 +1,102 @@
+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"],
+      description: "Maximum width defined by Mantine system 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 = {
+  render: (args) => (
+    <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",
+  },
+  render: (args) => (
+    <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,
+  },
+  render: (args) => (
+    <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/Container/Container.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from "react";
+import {
+  Container as MantineContainer,
+  type ContainerProps as MantineContainerProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Container.module.css";
+
+export interface RecursicaContainerProps {
+  /**
+   * Children components inside the layout container
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Container layout wrapper
+ */
+export type ContainerProps = RecursicaOverStyled<
+  MantineContainerProps & RecursicaContainerProps
+>;
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  function Container({ children, overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    const mergedClassNames: Partial<Record<string, string>> = {
+      root: styles.root,
+    };
+
+    const classNamesProp = restRecord.classNames;
+    if (
+      classNamesProp &&
+      typeof classNamesProp === "object" &&
+      !Array.isArray(classNamesProp)
+    ) {
+      const o = classNamesProp as Partial<Record<string, string>>;
+      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+    }
+
+    const classNameProp = restRecord.className as string | undefined;
+    const finalClass = classNameProp
+      ? `${styles.root} ${classNameProp}`
+      : styles.root;
+
+    return (
+      <MantineContainer
+        ref={ref}
+        className={finalClass}
+        classNames={mergedClassNames}
+        {...sanitizedProps}
+      >
+        {children}
+      </MantineContainer>
+    );
+  },
+);
+
+Container.displayName = "Container";

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DatePicker } from "./DatePicker";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "UI-Kit/🚧 DatePicker",
+  component: DatePicker,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="DatePicker" />,
+};

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type DatePickerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const DatePicker: React.FC<DatePickerProps> = (props) => {
+  return <div {...props}>DatePicker</div>;
+};

package/src/components/Dropdown/DROPDOWN_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,7 @@
+# Dropdown Implementation Notes
+
+The `Dropdown` component is mapped explicitly to Mantine's `<Select>` following the exact same strict encapsulation rules as `TextField`.
+
+1. **Naked Primitive Mapping:** Mantine's `Select` natively executes macro-label generation. To decouple it, we explicitly disable internal labels (`label={undefined}`) and inject it purely inside our generic `FormControlWrapper`.
+2. **Strict Dropdown Design Tokens:** The adapter implements strictly sandboxed styling utilizing only `--recursica_ui-kit_components_dropdown_...` variables. It explicitly does NOT inherit general `text-field` tokens despite geometric similarities, ensuring dropdown menus can be themed independently.
+3. **Dropdown Appendages:** To correctly map Mantine's detached Popover `.dropdown` and list `.option` items, we targeted focus and geometric bindings appending standard padding structures matched to the dropdown height overrides dynamically into our `Dropdown.module.css`.