@recursica/mantine-adapter 0.5.0 → 0.7.0

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.stories.tsx

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

package/src/components/Loader/Loader.tsx

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

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,22 @@
+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: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+
+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>;
+};

package/src/components/Radio/Radio.stories.tsx

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

package/src/components/Radio/Radio.tsx

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

package/src/components/ReadOnlyField/READ_ONLY_FIELD_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,15 @@
+# ReadOnlyField Implementation Notes
+
+This document acts as a living record tracking edge cases and architectural choices made specific to the `ReadOnlyField` and its internal blocks (like `ReadOnlyTextField`).
+
+## 1. Stripping Mantine Assumptions
+
+Unlike standard input variables, standard HTML output `<p>` tags inherently carry margin and spacing assumptions from core browser stylesheets. To correctly map `ReadOnlyTextField` elements gracefully inside the generic `FormControlWrapper` bounded context, we hardcode resets:
+
+- `margin: 0` explicitly strips block flow gap so `FormControlWrapper` handles vertical rhythm.
+- `min-height`: Native `Input` boxes typically have baseline padding borders. We map directly to `var(--recursica_ui-kit_components_read-only-field_properties_min-height)` to ensure a side-by-side editable `TextField` and `ReadOnlyField` perfectly share roughly identical visual heights.
+
+## 2. Unidirectional Editable Mode
+
+The main wrapper intercepts `readOnly` boolean blocks, maintaining its own `isReadOnly` state. Natively, if a user clicks an exposed 'Edit' action (like our legacy SVG or custom `labelActionArea`), the context permanently switches to active.
+There is intentionally no built-in reverse toggle inside typical field bindings (like input "Blur") to revert state. Parents must pass external controls to `readOnly` forcing the internal hooks to reset via standard `useEffect` propagation.

package/src/components/ReadOnlyField/ReadOnlyField.module.css

@@ -0,0 +1,49 @@
+/* HARDCODED VALUES:
+   - margin: 0; padding: overrides native paragraph margins mapping back to form element flows.
+*/
+.textField {
+  margin: 0; /* HARDCODE: Reset paragraph margin; assume wrapper controls layout */
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  padding: 0; /* HARDCODE: read-only fields have no specific padding defined by tokens, zeroing it. */
+  font-family: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_font-family,
+    inherit
+  );
+  font-size: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_font-size,
+    1rem
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_font-weight,
+    normal
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_letter-spacing,
+    normal
+  );
+  line-height: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_line-height,
+    1.5
+  );
+  font-style: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_font-style,
+    normal
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_text-decoration,
+    none
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_read-only-field_properties_text_text-transform,
+    none
+  );
+  color: var(
+    --recursica_ui-kit_components_read-only-field_properties_colors_text
+  );
+  min-height: var(
+    --recursica_ui-kit_components_read-only-field_properties_min-height,
+    32px
+  );
+}

package/src/components/ReadOnlyField/ReadOnlyField.stories.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReadOnlyField } from "./ReadOnlyField";
+import { EmptyValueRenderer } from "@recursica/adapter-common";
+
+const meta: Meta<typeof ReadOnlyField> = {
+  title: "UI Kit/ReadOnlyField",
+  component: ReadOnlyField,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The ReadOnlyField safely natively wraps data sets bypassing active HTML interaction hooks while natively retaining exact bounding visual layouts defined by internal Design System Tokens. Useful for creating strict data-review profiles or conditional form read-overs.",
+      },
+    },
+  },
+  args: {
+    label: "Read Only Label",
+    value: "Fixed Data Set Value",
+    assistiveText: "Helper description text beneath the node.",
+    type: "text",
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["text", "number"], // Add more as we support them
+    },
+    labelWithEditIcon: {
+      control: "boolean",
+    },
+    // We cannot natively control a React.ElementType through standard primitive storybook panels.
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ReadOnlyField>;
+
+/**
+ * Playground story demonstrating standard structural blocks of the ReadOnlyField module dynamically.
+ */
+export const Default: Story = {
+  args: {},
+};
+
+/**
+ * Shows the default handler replacing missing mapping data directly with 'N/A'.
+ */
+export const EmptyValue: Story = {
+  args: {
+    value: "",
+    label: "Empty String Evaluated Automatically (Default 'N/A')",
+  },
+};
+
+const CustomEmptyTextRenderer: React.FC<{ value?: any }> & {
+  check?: (v: any) => boolean;
+} = (props) => <EmptyValueRenderer {...props} emptyText="No Data Found" />;
+CustomEmptyTextRenderer.check = EmptyValueRenderer.check;
+
+/**
+ * Demonstrates overriding the baseline verbiage internally utilizing the exported `EmptyValueRenderer` while inheriting default evaluation checks.
+ */
+export const CustomEmptyText: Story = {
+  args: {
+    value: null,
+    label: "Custom Empty Text Default",
+    emptyValueComponent: CustomEmptyTextRenderer,
+  },
+};
+
+const CustomEmptyCheckRenderer: React.FC<{ value?: any }> & {
+  check?: (v: any) => boolean;
+} = () => {
+  return <i>Custom HTML Markup Provided</i>;
+};
+CustomEmptyCheckRenderer.check = (val) => val === "EMPTY_MOCK";
+
+/**
+ * Validates a fully overridden emptyValueComponent injecting custom rendering boundaries alongside explicitly tailored validation rules evaluating datasets dynamically.
+ */
+export const CustomEmptyRenderer: Story = {
+  args: {
+    value: "EMPTY_MOCK",
+    label: "Custom Logic Evaluation Binding",
+    emptyValueComponent: CustomEmptyCheckRenderer,
+  },
+};
+
+/**
+ * Validates the core read-only label execution and base default spacing bindings globally.
+ */
+export const StackedDefault: Story = {
+  args: {
+    formLayout: "stacked",
+    value: "Some fixed readable text",
+  },
+};
+
+/**
+ * Binds side-by-side structures globally maintaining correct inline gutter layouts.
+ */
+export const SideBySide: Story = {
+  args: {
+    formLayout: "side-by-side",
+    value: "Some fixed readable text mapping horizontally",
+  },
+};
+
+/**
+ * Tests the fallback structural logic when Edit icon natively overrides required bindings.
+ */
+export const WithEditIcon: Story = {
+  args: {
+    labelWithEditIcon: true,
+    required: true,
+    value: "Editable fixed structure",
+  },
+};

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import {
+  ReadOnlyFieldType,
+  EmptyValueRenderer,
+} from "@recursica/adapter-common";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import {
+  type FormControlWrapperProps,
+  FormControlWrapper,
+} from "../FormControlWrapper/FormControlWrapper";
+import { ReadOnlyTextField } from "./ReadOnlyTextField";
+
+export interface RecursicaReadOnlyFieldProps
+  extends Omit<FormControlWrapperProps, "children" | "overStyled"> {
+  /** The specific value to be rendered in read-only mode explicitly matching the original field input */
+  value?: any;
+  /** The data type formatting rules bounding how the string is presented to the user */
+  type?: ReadOnlyFieldType;
+  /** Custom renderer explicitly responsible for formatting missing/empty value mappings (overriding default 'N/A') */
+  emptyValueComponent?: React.ElementType<{ value?: any }>;
+}
+
+export type ReadOnlyFieldProps =
+  RecursicaOverStyled<RecursicaReadOnlyFieldProps>;
+
+/**
+ * A native generic form control wrapper exclusively responsible for displaying fixed data.
+ * Internally maps to structural ReadOnly primitive blocks bridging standard `FormControlWrapper` layouts natively.
+ */
+export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
+  function ReadOnlyField(
+    { value, type = "text", emptyValueComponent, overStyled = false, ...rest },
+    ref,
+  ) {
+    let content: React.ReactNode = null;
+
+    // We still pass sanitized properties (like className/style/etc) strictly down.
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+
+    const Renderer = emptyValueComponent || EmptyValueRenderer;
+    const isValueEmpty = (Renderer as any).check
+      ? (Renderer as any).check(value)
+      : EmptyValueRenderer.check(value);
+
+    const displayValue = isValueEmpty ? <Renderer value={value} /> : value;
+
+    switch (type) {
+      case "text":
+      default:
+        content = (
+          <ReadOnlyTextField
+            value={displayValue}
+            overStyled={overStyled as true}
+          />
+        );
+        break;
+    }
+
+    return (
+      <FormControlWrapper
+        ref={ref}
+        overStyled={overStyled as true}
+        {...(sanitizedProps as any)}
+      >
+        {content}
+      </FormControlWrapper>
+    );
+  },
+);
+
+ReadOnlyField.displayName = "ReadOnlyField";

package/src/components/ReadOnlyField/ReadOnlyTextField.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { Box } from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./ReadOnlyField.module.css";
+
+export interface RecursicaReadOnlyTextFieldProps {
+  /** The value strictly rendered as text output */
+  value?: any;
+}
+
+export type ReadOnlyTextFieldProps =
+  RecursicaOverStyled<RecursicaReadOnlyTextFieldProps>;
+
+export const ReadOnlyTextField: React.FC<ReadOnlyTextFieldProps> = ({
+  value,
+  overStyled = false,
+  ...rest
+}) => {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+
+  return (
+    <Box
+      component="p"
+      className={
+        classNameProp
+          ? `${styles.textField} ${classNameProp}`
+          : styles.textField
+      }
+      {...sanitizedProps}
+    >
+      {value != null
+        ? React.isValidElement(value)
+          ? value
+          : String(value)
+        : ""}
+    </Box>
+  );
+};
+
+ReadOnlyTextField.displayName = "ReadOnlyTextField";

package/src/components/ReadOnlyField/WithReadOnlyWrapper.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import { type ReadOnlyFieldType } from "@recursica/adapter-common";
+import {
+  FormControlWrapper,
+  type FormControlWrapperProps,
+} from "../FormControlWrapper/FormControlWrapper";
+import { ReadOnlyField } from "./ReadOnlyField";
+
+export interface WithReadOnlyWrapperProps
+  extends Omit<FormControlWrapperProps, "children" | "overStyled"> {
+  /** Injects whether the field defaults to reading mode natively */
+  readOnly?: boolean;
+  /** Explicit React component directly overtaking the baseline text renderer when read-only mode is active */
+  readOnlyComponent?: React.ReactNode;
+  /** Instructs the underlying generic ReadOnlyField which raw visual structure to bridge automatically */
+  readOnlyType?: ReadOnlyFieldType;
+  /** The isolated raw data value intercepted explicitly into the ReadOnly formatters */
+  readOnlyValue?: any;
+  /** Safely enables deep Mantine overrides transparently bypassing block filters */
+  overStyled?: boolean;
+  /** The nested active node dynamically exposed exclusively when read-only bounds are disabled */
+  activeComponent: React.ReactNode;
+}
+
+/**
+ * Universal execution barrier trapping readOnly states globally.
+ * Natively delegates active logic down avoiding duplicative internal component bindings dynamically.
+ */
+export const WithReadOnlyWrapper = forwardRef<
+  HTMLDivElement,
+  WithReadOnlyWrapperProps
+>(function WithReadOnlyWrapper(
+  {
+    readOnly,
+    readOnlyComponent,
+    readOnlyType = "text",
+    readOnlyValue,
+    activeComponent,
+    overStyled,
+    onLabelEditClick,
+    ...wrapperProps
+  },
+  ref,
+) {
+  if (readOnly) {
+    if (readOnlyComponent) {
+      return (
+        <FormControlWrapper
+          ref={ref}
+          {...wrapperProps}
+          onLabelEditClick={onLabelEditClick}
+          overStyled={overStyled as true}
+        >
+          {readOnlyComponent}
+        </FormControlWrapper>
+      );
+    }
+
+    return (
+      <ReadOnlyField
+        ref={ref}
+        type={readOnlyType}
+        value={readOnlyValue}
+        onLabelEditClick={onLabelEditClick}
+        overStyled={overStyled as true}
+        {...wrapperProps}
+      />
+    );
+  }
+
+  // Active Standard Execution natively forwarding bound children implicitly
+  return (
+    <FormControlWrapper
+      ref={ref}
+      {...wrapperProps}
+      onLabelEditClick={onLabelEditClick}
+      overStyled={overStyled as true}
+    >
+      {activeComponent}
+    </FormControlWrapper>
+  );
+});
+
+WithReadOnlyWrapper.displayName = "WithReadOnlyWrapper";

package/src/components/ReadOnlyField/index.ts

@@ -0,0 +1,3 @@
+export * from "./ReadOnlyField";
+export * from "./WithReadOnlyWrapper";
+export * from "./ReadOnlyTextField";

package/src/components/Search/Search.stories.tsx

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