@recursica/mui-adapter 0.2.0 → 0.3.0

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

@@ -1,16 +1,81 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Title } from "./Title";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Layer } from "@recursica/adapter-common";
 
 const meta: Meta<typeof Title> = {
-  title: "UI-Kit/🚧 Title",
+  title: "UI-Kit/Title",
   component: Title,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The semantic `<Title>` abstraction intrinsically links pure `h1-h6` tag generation with exact Recursica design boundaries to preserve SEO and screen reader trees uniformly globally.",
+      },
+    },
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "order",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
+  argTypes: {
+    order: {
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6],
+      description:
+        "Controls the `h` tag and the resultant typographical weighting natively mapped to Recursica.",
+    },
+  },
 };
 
 export default meta;
+
 type Story = StoryObj<typeof Title>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Title" />,
+  args: {
+    order: 1,
+    children: "Semantic H1 Document Boundary",
+  },
+  render: ({ ...args }) => (
+    <Layer layer={0} style={{ padding: "48px" }}>
+      <Title {...args} />
+    </Layer>
+  ),
+};
+
+export const StaticVariations: Story = {
+  args: {},
+  render: () => (
+    <Layer
+      layer={0}
+      style={{
+        padding: "48px",
+        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>
+  ),
 };

package/src/components/Title/Title.tsx

@@ -1,7 +1,31 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { Typography } from "../Typography/Typography";
+import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
+import { type TypographyProps as MuiTypographyProps } from "@mui/material";
 
-export type TitleProps = React.HTMLAttributes<HTMLDivElement>;
-
-export const Title: React.FC<TitleProps> = (props) => {
-  return <div {...props}>Title</div>;
+export type RecursicaTitleProps = Omit<MuiTypographyProps, "variant"> & {
+  order?: 1 | 2 | 3 | 4 | 5 | 6;
+  children?: React.ReactNode;
+  component?: React.ElementType;
 };
+
+export type TitleProps = RecursicaOverStyled<RecursicaTitleProps>;
+
+export const Title = forwardRef<HTMLElement, TitleProps>(function Title(
+  { order = 1, component, ...rest },
+  ref,
+) {
+  const typographyClass = `recursica_brand_typography_h${order}`;
+  const defaultComponent = `h${order}` as React.ElementType;
+
+  return (
+    <Typography
+      ref={ref}
+      typographyClass={typographyClass}
+      component={component || defaultComponent}
+      {...rest}
+    />
+  );
+});
+
+Title.displayName = "Title";

package/src/components/Toast/Toast.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Toast> = {
   title: "UI-Kit/🚧 Toast",
   component: Toast,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Tooltip> = {
   title: "UI-Kit/🚧 Tooltip",
   component: Tooltip,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/TransferList/TransferList.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof TransferList> = {
   title: "UI-Kit/🚧 TransferList",
   component: TransferList,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from "react";
+import {
+  Typography as MuiTypography,
+  type TypographyProps as MuiTypographyProps,
+} from "@mui/material";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+
+export type TypographyProps = RecursicaOverStyled<
+  Omit<MuiTypographyProps, "variant"> & {
+    /**
+     * Internal typography class mapping
+     */
+    typographyClass: string;
+    component?: React.ElementType;
+  }
+>;
+
+export const Typography = forwardRef<HTMLElement, TypographyProps>(
+  function Typography({ typographyClass, overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    const classNameProp = restRecord.className as string | undefined;
+    const finalClass = classNameProp
+      ? `${typographyClass} ${classNameProp}`
+      : typographyClass;
+
+    return (
+      <MuiTypography
+        ref={ref}
+        className={finalClass}
+        variant="inherit"
+        {...sanitizedProps}
+      />
+    );
+  },
+);
+
+Typography.displayName = "Typography";

package/src/utils/ColorSchemeWrapper.tsx

@@ -1,4 +1,3 @@
-import { useMantineColorScheme } from "@mantine/core";
 import { useEffect } from "react";
 import { addons } from "storybook/internal/preview-api";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
@@ -10,18 +9,15 @@ export function ColorSchemeWrapper({
 }: {
   children: React.ReactNode;
 }) {
-  const { setColorScheme } = useMantineColorScheme();
-
   useEffect(() => {
     const handleColorScheme = (value: boolean) => {
       const theme = value ? "dark" : "light";
-      setColorScheme(theme);
       document.documentElement.setAttribute("data-recursica-theme", theme);
     };
 
     channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
     return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
-  }, [setColorScheme]);
+  }, []);
 
   return <>{children}</>;
 }

package/src/utils/filterStylingProps.ts

@@ -89,7 +89,7 @@ const LAYOUT_PROPS = new Set([
   "right",
 ]);
 
-const SPACING_MAP: Record<string, string> = {
+export const SPACING_MAP: Record<string, string> = {
   "rec-none": "var(--recursica_brand_dimensions_general_none)",
   "rec-sm": "var(--recursica_brand_dimensions_general_sm)",
   "rec-default": "var(--recursica_brand_dimensions_general_default)",
@@ -101,6 +101,18 @@ const SPACING_MAP: Record<string, string> = {
 
 export type ForbiddenStyles = { [K in BlockedStylingKeys]?: never };
 
+export type OmitSx<T> = Omit<T, "sx">;
+
+export function filterSxProp<T extends Record<string, unknown>>(
+  props: T,
+): Omit<T, "sx"> {
+  const sanitized = { ...props };
+  if ("sx" in sanitized) {
+    delete sanitized["sx"];
+  }
+  return sanitized as Omit<T, "sx">;
+}
+
 export type RecursicaOverStyled<T> =
   | (Omit<T, BlockedStylingKeys> &
       ForbiddenStyles & { overStyled?: false | undefined })