@recursica/mantine-adapter 0.9.4 → 0.11.0

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./Label";
+import { TextField } from "../TextField/TextField";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+type LabelStoryProps = React.ComponentProps<typeof Label>;
+
+const meta: Meta<LabelStoryProps> = {
+  title: "UI-Kit/Label",
+  component: Label,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The `Label` component is a strict Recursica-styled wrapper around Mantine's native `Input.Label`. It serves as the primary compositional primitive for all form fields, preserving Mantine's accessibility associations and context while strictly enforcing the Recursica atomic design system.\n\n### Usage with Form Inputs\nWhen working with form structures, render this `Label` component directly above your inputs or supply it to a component's overriding properties. The component automatically maps structural layout dimensions, dynamic alignment (`left` vs `right`), custom indicator gaps, and integrates a customized `optionalText` and `withEditIcon` flow that safely bypasses Mantine's native required asterisk mechanisms.",
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<LabelStoryProps>;
+
+// Utility mapping to pipe raw Label args structurally into TextField accurately
+const renderWithTextField = ({ children, ...args }: LabelStoryProps) => (
+  <TextField
+    label={children as React.ReactNode}
+    placeholder="Form Control primitive mapped..."
+    {...(args as any)}
+  />
+);
+
+export const Default: Story = {
+  args: {
+    children: "Dynamic Label (Controls)",
+
+    labelSize: "default",
+    labelAlignment: "left",
+    required: false,
+    labelOptionalText: "",
+    labelWithEditIcon: false,
+  },
+  render: renderWithTextField,
+};
+
+export const StackedDefault: Story = {
+  args: {
+    children: "Email Address",
+  },
+  render: renderWithTextField,
+};
+
+export const StackedRequired: Story = {
+  args: {
+    children: "Primary Network Node",
+
+    required: true,
+  },
+  render: renderWithTextField,
+};
+
+export const StackedWithEditIcon: Story = {
+  args: {
+    children: "Environment Variables",
+
+    labelWithEditIcon: true,
+  },
+  render: renderWithTextField,
+};
+
+export const SideBySideDefault: Story = {
+  args: {
+    children: "Status",
+
+    labelSize: "default",
+  },
+  render: renderWithTextField,
+};
+
+export const RequiredSuppressesOptionalText: Story = {
+  args: {
+    children: "Full Name",
+
+    required: true,
+    labelOptionalText: "This should not render",
+  },
+  render: renderWithTextField,
+};
+
+export const BooleanOptionalText: Story = {
+  args: {
+    children: "Middle Initial",
+
+    labelOptionalText: true,
+  },
+  render: renderWithTextField,
+};
+
+export const WithEditIcon: Story = {
+  args: {
+    children: "Shipping Address",
+
+    labelWithEditIcon: true,
+  },
+  render: renderWithTextField,
+};
+
+export const LayerOneSideBySide: Story = {
+  args: {
+    children: "Configuration",
+
+    labelWithEditIcon: true,
+  },
+  render: renderWithTextField,
+};

package/src/components/Label/Label.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef } from "react";
+import { Input, type InputLabelProps } from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Label.module.css";
+
+export interface RecursicaLabelProps {
+  /** Specifies the sizing metrics natively mapping the Label boundaries. */
+  labelSize?: "default" | "small" | "md";
+  /** Overall alignment directive for the label strings natively forcing Left/Right justification. */
+  labelAlignment?: "left" | "right";
+  /** Injects an indicator text block alongside the label. Can be boolean (`true` maps to '(Optional)') or custom React nodes. */
+  labelOptionalText?: boolean | React.ReactNode;
+  /** When true, forces the native Edit Icon to replace the standard asterisk visually. */
+  labelWithEditIcon?: boolean;
+  /** Custom action area to render alongside the label instead of the default edit icon. */
+  labelActionArea?: React.ReactNode;
+  /** Interaction hook invoked whenever a generated edit icon block natively triggers a click event. */
+  onLabelEditClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export type LabelProps = RecursicaOverStyled<
+  Omit<InputLabelProps, "size"> & RecursicaLabelProps
+>;
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  {
+    labelSize = "default",
+    labelAlignment,
+    required = false,
+    labelOptionalText,
+    labelWithEditIcon,
+    labelActionArea,
+    onLabelEditClick,
+    children,
+    overStyled = false,
+    ...rest
+  },
+  ref,
+) {
+  const resolvedAlignment = labelAlignment || "left";
+
+  let resolvedOptionalText: React.ReactNode | undefined;
+  if (!required) {
+    if (labelOptionalText === true) resolvedOptionalText = "optional";
+    else if (labelOptionalText) resolvedOptionalText = labelOptionalText;
+  }
+
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames: Partial<Record<string, string>> = {
+    label: styles.root,
+    required: styles.required,
+  };
+
+  const classNamesProp = restRecord.classNames;
+  if (
+    classNamesProp &&
+    typeof classNamesProp === "object" &&
+    !Array.isArray(classNamesProp)
+  ) {
+    const o = classNamesProp as Partial<Record<string, string>>;
+    mergedClassNames.label = o.label
+      ? `${styles.root} ${o.label}`
+      : styles.root;
+    mergedClassNames.required = o.required
+      ? `${styles.required} ${o.required}`
+      : styles.required;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <Input.Label
+      ref={ref}
+      className={finalClass}
+      classNames={mergedClassNames}
+      data-size={labelSize}
+      data-alignment={resolvedAlignment}
+      required={required && !labelWithEditIcon}
+      {...sanitizedProps}
+    >
+      <span className={styles.labelText}>{children}</span>
+      {resolvedOptionalText && (
+        <span className={styles.optionalText}>
+          {typeof resolvedOptionalText === "string"
+            ? `(${resolvedOptionalText})`
+            : resolvedOptionalText}
+        </span>
+      )}
+      {labelActionArea ? (
+        <span className={styles.actionAreaWrapper}>{labelActionArea}</span>
+      ) : labelWithEditIcon ? (
+        <button
+          type="button"
+          className={styles.editIconWrapper}
+          data-replaces-asterisk={required ? "true" : undefined}
+          onClick={onLabelEditClick}
+          aria-label="Edit"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.5303 2.46967C11.8232 2.17678 12.2981 2.17678 12.591 2.46967L13.5303 3.40898C13.8232 3.70188 13.8232 4.17675 13.5303 4.46964L5.61288 12.3871C5.45268 12.5473 5.24434 12.6483 5.01809 12.6766L2.39534 13.0044C2.10091 13.0412 1.83856 12.7789 1.87538 12.4845L2.2032 9.86175C2.23147 9.63551 2.3325 9.42716 2.4927 9.26696L11.5303 2.46967Z"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      ) : null}
+    </Input.Label>
+  );
+});
+
+Label.displayName = "Label";

package/src/components/Label/index.ts

@@ -0,0 +1 @@
+export * from "./Label";

package/src/components/Link/Link.stories.tsx

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

package/src/components/Link/Link.tsx

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

package/src/components/Loader/Loader.module.css

@@ -0,0 +1,60 @@
+.root {
+  /* Default inheritance mapped from component variables if not explicitly overridden by variants */
+  --loader-color: var(
+    --recursica_ui-kit_components_loader_properties_indicator-color,
+    currentColor
+  );
+}
+
+/* data-size mapping */
+
+/* SMALL */
+.root[data-size="small"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_small_properties_size
+  );
+}
+.root[data-size="small"][data-variant="oval"] {
+  border-width: var(
+    --recursica_ui-kit_components_loader_variants_sizes_small_properties_thickness
+  );
+}
+.root[data-size="small"]:not([data-variant="oval"]) span {
+  border-radius: var(
+    --recursica_ui-kit_components_loader_variants_sizes_small_properties_border-radius
+  );
+}
+
+/* DEFAULT */
+.root[data-size="default"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_default_properties_size
+  );
+}
+.root[data-size="default"][data-variant="oval"] {
+  border-width: var(
+    --recursica_ui-kit_components_loader_variants_sizes_default_properties_thickness
+  );
+}
+.root[data-size="default"]:not([data-variant="oval"]) span {
+  border-radius: var(
+    --recursica_ui-kit_components_loader_variants_sizes_default_properties_border-radius
+  );
+}
+
+/* LARGE */
+.root[data-size="large"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_large_properties_size
+  );
+}
+.root[data-size="large"][data-variant="oval"] {
+  border-width: var(
+    --recursica_ui-kit_components_loader_variants_sizes_large_properties_thickness
+  );
+}
+.root[data-size="large"]:not([data-variant="oval"]) span {
+  border-radius: var(
+    --recursica_ui-kit_components_loader_variants_sizes_large_properties_border-radius
+  );
+}

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "./Loader";
+import { Layer } from "@recursica/adapter-common";
+
+type LoaderStoryArgs = React.ComponentProps<typeof Loader> & {
+  layer?: 0 | 1 | 2 | 3;
+};
+
+const meta: Meta<LoaderStoryArgs> = {
+  title: "UI-Kit/Loader",
+  component: Loader as React.ComponentType<LoaderStoryArgs>,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The Loader bridges the Recursica UI-Kit `loader` variables to the generic primitive, rendering deterministic sizes and variants visually mapped strictly from the explicit design boundary tokens.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["oval", "bars", "dots"],
+      description: "The structural layout variant of the loading indicator",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "small", "default", "large"],
+      description:
+        "Scales the dimensional and thickness layout constrained to the explicit UI variables",
+    },
+    color: {
+      control: "color",
+      description:
+        "Optional inline dynamic color override spanning the token defaults",
+    },
+    layer: {
+      control: { type: "range", min: 0, max: 3, step: 1 },
+      description:
+        "Applies a wrapping context to observe rendering logic externally",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<LoaderStoryArgs>;
+
+export const Default: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+    layer: 0,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={layer ?? 0} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
+};
+
+export const StaticOvalDefault: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const StaticBarsLarge: Story = {
+  args: {
+    variant: "bars",
+    size: "large",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const StaticDotsSmall: Story = {
+  args: {
+    variant: "dots",
+    size: "sm",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const LayerTwoOval: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={2} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
+};

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,76 @@
+import { forwardRef } from "react";
+import {
+  Loader as MantineLoader,
+  type LoaderProps as MantineLoaderProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+  type RecursicaSize,
+} from "../../utils/filterStylingProps";
+import styles from "./Loader.module.css";
+
+export interface RecursicaLoaderProps {
+  /** Map to the component styles defined in variables */
+  variant?: "oval" | "bars" | "dots";
+  /** Map to Recursica sizes */
+  size?: "sm" | "md" | "lg" | RecursicaSize;
+}
+
+export type LoaderProps = RecursicaOverStyled<
+  Omit<MantineLoaderProps, "variant" | "size" | "type"> & RecursicaLoaderProps
+>;
+
+export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
+  { variant = "oval", size = "default", overStyled = false, ...rest },
+  ref,
+) {
+  const mapSize = {
+    sm: "small",
+    md: "default",
+    lg: "large",
+    small: "small",
+    default: "default",
+    large: "large",
+  } as const;
+
+  const resolvedSize = mapSize[size] || "default";
+
+  // Strip all visual override injections unless developer has specifically opted into overStyling.
+  // External layout props like margins are safely preserved.
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+  };
+
+  const classNamesProp = (sanitizedProps as Record<string, unknown>).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 = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <MantineLoader
+      ref={ref}
+      type={variant}
+      data-variant={variant}
+      data-size={resolvedSize}
+      {...sanitizedProps}
+      className={finalClass}
+      classNames={mergedClassNames}
+    />
+  );
+});
+
+Loader.displayName = "Loader";

package/src/components/Menu/Menu.stories.tsx

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

package/src/components/Menu/Menu.tsx

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

package/src/components/Modal/Modal.stories.tsx

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

package/src/components/Modal/Modal.tsx

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

package/src/components/NumberInput/NumberInput.stories.tsx

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

package/src/components/NumberInput/NumberInput.tsx

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

package/src/components/Pagination/Pagination.stories.tsx

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

package/src/components/Pagination/Pagination.tsx

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

package/src/components/Panel/Panel.stories.tsx

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

package/src/components/Panel/Panel.tsx

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

package/src/components/Popover/Popover.stories.tsx

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

package/src/components/Popover/Popover.tsx

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