@recursica/mantine-adapter 0.50.2 → 0.50.5

package/src/components/Title/Title.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Title } from "./Title";
-import { Layer } from "@recursica/adapter-common";
 
 const meta: Meta<typeof Title> = {
   title: "UI-Kit/Title",
@@ -33,31 +32,19 @@ export const Default: Story = {
     order: 1,
     children: "Semantic H1 Document Boundary",
   },
-  render: ({ ...args }) => (
-    <Layer layer={0} style={{ padding: "48px" }}>
-      <Title {...args} />
-    </Layer>
-  ),
+  render: ({ ...args }) => <Title {...args} />,
 };
 
 export const StaticVariations: Story = {
   args: {},
   render: () => (
-    <Layer
-      layer={0}
-      style={{
-        padding: "48px",
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-      }}
-    >
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
       <Title order={1}>H1 Title</Title>
       <Title order={2}>H2 Title</Title>
       <Title order={3}>H3 Title</Title>
       <Title order={4}>H4 Title</Title>
       <Title order={5}>H5 Title</Title>
       <Title order={6}>H6 Title</Title>
-    </Layer>
+    </div>
   ),
 };

package/src/components/Title/Title.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Title component tests. Add tests here if/when needed.

package/src/components/Toast/Toast.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Toast component tests. Add tests here if/when needed.

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Tooltip component tests. Add tests here if/when needed.

package/src/components/TransferList/TransferList.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future TransferList component tests. Add tests here if/when needed.

package/src/components/Tree/Tree.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Tree component tests. Add tests here if/when needed.

package/src/utils/filterStylingProps.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from "vitest";
+import {
+  BLOCKED_STYLING_KEYS,
+  SPACING_MAP,
+  filterStylingProps,
+  mapLayoutProps,
+} from "./filterStylingProps";
+
+describe("filterStylingProps", () => {
+  it("strips every blocked styling key by default", () => {
+    const props = Object.fromEntries(
+      BLOCKED_STYLING_KEYS.map((key) => [key, "should-be-removed"]),
+    );
+
+    const sanitized = filterStylingProps(props);
+
+    for (const key of BLOCKED_STYLING_KEYS) {
+      expect(sanitized).not.toHaveProperty(key);
+    }
+  });
+
+  it("keeps props that aren't blocked styling keys", () => {
+    const sanitized = filterStylingProps({
+      disabled: true,
+      "aria-label": "Submit",
+    });
+
+    expect(sanitized).toEqual({ disabled: true, "aria-label": "Submit" });
+  });
+
+  it("keeps layout props (e.g. margin) untouched when not a rec- token", () => {
+    const sanitized = filterStylingProps({ m: "16px" });
+
+    expect(sanitized).toEqual({ m: "16px" });
+  });
+
+  it("maps rec- spacing tokens on layout props to their CSS variable", () => {
+    const sanitized = filterStylingProps({ m: "rec-lg", gap: "rec-sm" });
+
+    expect(sanitized).toEqual({
+      m: SPACING_MAP["rec-lg"],
+      gap: SPACING_MAP["rec-sm"],
+    });
+  });
+
+  it("does not map rec- tokens on props that aren't layout props", () => {
+    const sanitized = filterStylingProps({ "data-testid": "rec-lg" });
+
+    expect(sanitized).toEqual({ "data-testid": "rec-lg" });
+  });
+
+  it("leaves an unrecognized rec- value alone", () => {
+    const sanitized = filterStylingProps({ m: "rec-not-a-real-token" });
+
+    expect(sanitized).toEqual({ m: "rec-not-a-real-token" });
+  });
+
+  it("bypasses all filtering when overStyled is true", () => {
+    const props = { className: "custom", bg: "red", m: "rec-lg" };
+
+    expect(filterStylingProps(props, true)).toEqual(props);
+  });
+
+  it("does not mutate the input props object", () => {
+    const props = { className: "custom", m: "rec-lg" };
+
+    filterStylingProps(props);
+
+    expect(props).toEqual({ className: "custom", m: "rec-lg" });
+  });
+});
+
+describe("mapLayoutProps", () => {
+  it("maps rec- spacing tokens on layout props", () => {
+    expect(mapLayoutProps({ mt: "rec-xl" })).toEqual({
+      mt: SPACING_MAP["rec-xl"],
+    });
+  });
+
+  it("leaves non-layout props untouched even if they look like a token", () => {
+    expect(mapLayoutProps({ variant: "rec-xl" })).toEqual({
+      variant: "rec-xl",
+    });
+  });
+});

package/src/utils/filterStylingProps.ts

@@ -84,6 +84,7 @@ const LAYOUT_PROPS = new Set([
   "gap",
   "rowGap",
   "columnGap",
+  "gutter",
   "top",
   "left",
   "bottom",