@recursica/mui-adapter 0.34.0 → 0.34.3

package/src/components/Stack/Stack.stories.tsx

@@ -19,12 +19,12 @@ const meta: Meta<StackStoryProps> = {
     },
   },
   args: {
-    gap: "rec-default",
-    align: "stretch",
-    justify: "flex-start",
+    spacing: "rec-default",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
   },
   argTypes: {
-    gap: {
+    spacing: {
       control: "select",
       options: [
         "rec-none",
@@ -40,14 +40,14 @@ const meta: Meta<StackStoryProps> = {
         "lg",
         "xl",
       ],
-      description: "Gap between elements",
+      description: "Space between elements",
     },
-    align: {
+    alignItems: {
       control: "select",
       options: ["flex-start", "center", "flex-end", "stretch"],
       description: "Align-items property",
     },
-    justify: {
+    justifyContent: {
       control: "select",
       options: [
         "flex-start",
@@ -81,7 +81,7 @@ export const Default: Story = {
 
 export const StaticGapSmall: Story = {
   args: {
-    gap: "rec-sm",
+    spacing: "rec-sm",
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
   render: ({ withLayer, layer, ...args }: any) => (
@@ -95,7 +95,7 @@ export const StaticGapSmall: Story = {
 
 export const StaticGapLarge: Story = {
   args: {
-    gap: "rec-xl",
+    spacing: "rec-xl",
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
   render: ({ withLayer, layer, ...args }: any) => (

package/src/components/Stack/Stack.test.tsx

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

package/src/components/Stack/Stack.tsx

@@ -1,3 +1,10 @@
+/**
+ * Stack layout wrapper.
+ *
+ * MUI has a native `Stack`, so this simply passes through its own props (`direction`,
+ * `spacing`, `alignItems`, `justifyContent`, etc.) with no Recursica renaming — only
+ * `spacing` gains `rec-*` token support via `WithRecursicaSpacing`.
+ */
 import { forwardRef } from "react";
 import {
   Stack as MUIStack,
@@ -10,29 +17,23 @@ import {
   type WithRecursicaSpacing,
 } from "../../utils/filterStylingProps";
 
-import { type RecursicaStackProps } from "@recursica/adapter-common";
-
-export type StackProps = WithRecursicaSpacing<
-  OmitSx<Omit<MUIStackProps, "spacing"> & RecursicaStackProps>
->;
+export type StackProps = WithRecursicaSpacing<OmitSx<MUIStackProps>>;
 
 export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
-  { children, gap = "rec-default", align, justify, ...rest },
+  { children, spacing = "rec-default", ...rest },
   ref,
 ) {
   const safeProps = filterSxProp(rest as Record<string, unknown>);
-  const resolvedGap =
-    typeof gap === "string" && gap in SPACING_MAP
-      ? SPACING_MAP[gap as keyof typeof SPACING_MAP]
-      : gap;
+  const resolvedSpacing =
+    typeof spacing === "string" && spacing in SPACING_MAP
+      ? SPACING_MAP[spacing as keyof typeof SPACING_MAP]
+      : spacing;
 
   return (
     <MUIStack
       ref={ref}
-      {...safeProps}
-      spacing={resolvedGap}
-      alignItems={align}
-      justifyContent={justify}
+      {...(safeProps as unknown as MUIStackProps)}
+      spacing={resolvedSpacing}
     >
       {children}
     </MUIStack>

package/src/components/Stack/USAGE.md

@@ -20,7 +20,7 @@ import { Stack } from "@recursica/mui-adapter";
 
 export default function Demo() {
   return (
-    <Stack gap="md" align="stretch">
+    <Stack spacing="md" alignItems="stretch">
       <Text>Item 1</Text>
       <Text>Item 2</Text>
     </Stack>

package/src/components/Stepper/Stepper.test.tsx

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

package/src/components/Switch/Switch.stories.tsx

@@ -77,7 +77,7 @@ export const SideBySideLayout: Story = {
 export const StaticVariations: Story = {
   args: {},
   render: () => (
-    <Stack gap="xl">
+    <Stack spacing="xl">
       <Switch label="Default Unchecked State" />
       <Switch label="Checked State" defaultChecked />
       <Switch label="Disabled Unchecked" disabled />

package/src/components/Switch/Switch.test.tsx

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

package/src/components/Table/Table.test.tsx

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

package/src/components/Tabs/Tabs.test.tsx

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

package/src/components/Text/Text.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "./Text";
-import { Layer } from "@recursica/adapter-common";
 
 const meta: Meta<typeof Text> = {
   title: "UI-Kit/Text",
@@ -46,25 +45,13 @@ export const Default: Story = {
     children:
       "This is standard body typography controlled by the central UI-kit boundaries exclusively.",
   },
-  render: ({ ...args }) => (
-    <Layer layer={0} style={{ padding: "48px" }}>
-      <Text {...args} />
-    </Layer>
-  ),
+  render: ({ ...args }) => <Text {...args} />,
 };
 
 export const StaticVariations: Story = {
   args: {},
   render: () => (
-    <Layer
-      layer={0}
-      style={{
-        padding: "48px",
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-      }}
-    >
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
       <Text variant="body">
         Body (Base paragraph and generic information flow)
       </Text>
@@ -83,6 +70,6 @@ export const StaticVariations: Story = {
       <Text variant="subtitle-small">
         Subtitle Small (Section anchors deep in hierarchy)
       </Text>
-    </Layer>
+    </div>
   ),
 };

package/src/components/Text/Text.test.tsx

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

package/src/components/TextArea/TextArea.test.tsx

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

package/src/components/TextField/TextField.test.tsx

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

package/src/components/TimePicker/TimePicker.test.tsx

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

package/src/components/Timeline/Timeline.test.tsx

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

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/components/Typography/Typography.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Typography 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,
+  filterSxProp,
+} 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", sx: { color: "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("filterSxProp", () => {
+  it("removes only the sx prop", () => {
+    const sanitized = filterSxProp({ sx: { color: "red" }, disabled: true });
+
+    expect(sanitized).toEqual({ disabled: true });
+  });
+
+  it("is a no-op when sx isn't present", () => {
+    const props = { disabled: true };
+
+    expect(filterSxProp(props)).toEqual(props);
+  });
+});