@recursica/mantine-adapter 0.5.0 → 0.7.0

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./TextField";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+const meta: Meta<typeof TextField> = {
+  title: "UI-Kit/TextField",
+  component: TextField,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TextField\` primitive functions as a universal text entry input natively integrated directly into the unified \`FormControlWrapper\` architecture.
+
+### Architectural Decoupling
+Recursica forcibly overrides the internal Mantine \`Input.Wrapper\` defaults injecting an untamed \`<Input>\` layout primitive perfectly mapped back into our rigid design systems. State modifiers (e.g. Focus, Errors) hook flawlessly back onto our CSS module mapping variable colors strictly accurately.
+
+### Examples
+Always structure horizontal architectures via the generic \`formLayout\` parameter.
+\`\`\`tsx
+<TextField 
+  label="Primary Network Socket" 
+  assistiveText="Ensure connections resolve seamlessly." 
+  formLayout="stacked" 
+/>
+\`\`\`
+`,
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+    disabled: {
+      control: "boolean",
+      description:
+        "Maps the formal disabled variable states structurally to the input core.",
+    },
+    error: {
+      control: "text",
+      description:
+        "Applies the strict error string boundary rendering invalid structures seamlessly.",
+    },
+    required: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    assistiveText: {
+      control: "text",
+    },
+    readOnly: {
+      control: "boolean",
+      description:
+        "Toggles structural read-only data presentation explicitly blocking standard component bindings.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    label: "Authentication Token",
+    placeholder: "Enter validation hash...",
+    assistiveText:
+      "Tokens are stored identically locally and strictly ephemeral.",
+  },
+};
+
+export const FormsSideBySide: Story = {
+  args: {
+    label: "Distributed Access Control",
+    placeholder: "admin@node.local",
+    assistiveText:
+      "Specify the exact cluster administrative credentials enforcing strict domain policies. This violently long string tests native textual wrapping safely mapping alongside inputs.",
+    formLayout: "side-by-side",
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  args: {
+    label: "Search Global Context",
+    placeholder: "Search for repositories...",
+    leftSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+    ),
+  },
+};
+
+export const WithTrailingIcon: Story = {
+  args: {
+    label: "Validation URL",
+    placeholder: "https://recursica.dev",
+    rightSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Deployment Node",
+    placeholder: "Disabled primitive map...",
+    disabled: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    label: "Cluster Failure",
+    placeholder: "Failing component instance...",
+    defaultValue: "Invalid Execution Plan",
+    error:
+      "Critical runtime node disconnect detected traversing DOM architecture.",
+    required: true,
+  },
+};
+
+export const StaticReadOnly: Story = {
+  args: {
+    label: "Static ReadOnly Review",
+    placeholder: "Ignored...",
+    value: "Explicitly Uneditable Bound Output",
+    readOnly: true,
+  },
+};
+
+export const EditableReadOnly: Story = {
+  args: {
+    label: "Editable ReadOnly Review",
+    placeholder: "Ignored until active...",
+    defaultValue: "Waiting for Edit Execution",
+    readOnly: true,
+    labelWithEditIcon: true,
+  },
+};

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,138 @@
+import React, { forwardRef } from "react";
+import { Input, type InputProps, type InputWrapperProps } from "@mantine/core";
+import { type ReadOnlyControlProps } from "@recursica/adapter-common";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
+import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
+import styles from "./TextField.module.css";
+
+export interface RecursicaTextFieldProps
+  extends Omit<InputProps, "size" | "variant" | "radius" | "wrapperProps">,
+    Pick<
+      InputWrapperProps,
+      "label" | "error" | "required" | "withAsterisk" | "id"
+    >,
+    Omit<
+      React.ComponentPropsWithoutRef<"input">,
+      "size" | "style" | "className" | "id"
+    >,
+    Omit<
+      RecursicaFormControlWrapperProps,
+      "controlMaxWidth" | "controlMinWidth"
+    >,
+    ReadOnlyControlProps {}
+
+export type TextFieldProps = RecursicaOverStyled<RecursicaTextFieldProps>;
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  function TextField(
+    {
+      overStyled = false,
+      formLayout = "stacked",
+
+      // Label & Wrapper Maps
+      labelSize,
+      labelAlignment,
+      labelOptionalText,
+      labelWithEditIcon,
+      onLabelEditClick,
+
+      label,
+      assistiveText,
+      assistiveWithIcon,
+      error,
+      required,
+      withAsterisk,
+      id,
+      className,
+      style,
+      disabled,
+      readOnly,
+      readOnlyComponent,
+      value,
+      defaultValue,
+      ...rest
+    },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Delete prohibited sizing hooks from bypassing variables natively
+    delete restRecord["size"];
+    delete restRecord["variant"];
+    delete restRecord["radius"];
+
+    // Securely map core native blocks down ensuring nested CSS modules map precisely
+    const mergedClassNames: Partial<Record<string, string>> = {
+      wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+      input: styles.input,
+      section: styles.section,
+    };
+
+    const classNamesProp = restRecord.classNames;
+    if (
+      classNamesProp &&
+      typeof classNamesProp === "object" &&
+      !Array.isArray(classNamesProp)
+    ) {
+      const o = classNamesProp as Partial<Record<string, string>>;
+      mergedClassNames.wrapper = o.wrapper
+        ? `${styles.root} ${o.wrapper}`
+        : styles.root;
+      mergedClassNames.input = o.input
+        ? `${styles.input} ${o.input}`
+        : styles.input;
+      mergedClassNames.section = o.section
+        ? `${styles.section} ${o.section}`
+        : styles.section;
+    }
+
+    return (
+      <WithReadOnlyWrapper
+        className={className}
+        style={style as React.CSSProperties}
+        controlMaxWidth="var(--recursica_ui-kit_components_text-field_properties_max-width)"
+        controlMinWidth="var(--recursica_ui-kit_components_text-field_properties_min-width)"
+        overStyled={overStyled as true}
+        formLayout={formLayout}
+        labelSize={labelSize}
+        labelAlignment={labelAlignment}
+        labelOptionalText={labelOptionalText}
+        labelWithEditIcon={labelWithEditIcon}
+        onLabelEditClick={onLabelEditClick}
+        label={label}
+        assistiveText={assistiveText}
+        assistiveWithIcon={assistiveWithIcon}
+        error={error}
+        required={required}
+        withAsterisk={withAsterisk}
+        id={id}
+        readOnly={readOnly}
+        readOnlyComponent={readOnlyComponent}
+        readOnlyType="text"
+        readOnlyValue={value !== undefined ? value : defaultValue}
+        activeComponent={
+          /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
+          <Input
+            ref={ref}
+            classNames={mergedClassNames}
+            disabled={disabled}
+            value={value}
+            defaultValue={defaultValue}
+            wrapperProps={{
+              "data-disabled": disabled ? "true" : undefined,
+              "data-error": error ? "true" : undefined,
+            }}
+            {...(sanitizedProps as unknown as InputProps)}
+          />
+        }
+      />
+    );
+  },
+);
+
+TextField.displayName = "TextField";

package/src/components/TimePicker/TimePicker.stories.tsx

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

package/src/components/TimePicker/TimePicker.tsx

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

package/src/components/Timeline/Timeline.stories.tsx

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

package/src/components/Timeline/Timeline.tsx

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

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

@@ -0,0 +1,63 @@
+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",
+  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.",
+      },
+    },
+  },
+  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 = {
+  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

@@ -0,0 +1,45 @@
+import { forwardRef } from "react";
+import {
+  Title as MantineTitle,
+  type TitleProps as MantineTitleProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+
+export type RecursicaTitleProps = Omit<MantineTitleProps, "order"> & {
+  /**
+   * Enforces semantic HTML headers (h1-h6) cleanly bound to native typographic scaling variables in the design system.
+   */
+  order?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+export type TitleProps = RecursicaOverStyled<RecursicaTitleProps>;
+
+/**
+ * Enforces highly accessible structural markup utilizing semantic `<h1>` through `<h6>` tags securely bound directly to Recursica typographic scales.
+ */
+export const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
+  { overStyled = false, order = 1, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+
+  const typographyClass = `recursica_brand_typography_h${order}`;
+  const mergedClassName = classNameProp
+    ? `${typographyClass} ${classNameProp}`
+    : typographyClass;
+
+  return (
+    <MantineTitle
+      ref={ref}
+      order={order}
+      className={mergedClassName}
+      {...(sanitizedProps as unknown as MantineTitleProps)}
+    />
+  );
+});
+Title.displayName = "Title";

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

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

package/src/components/Toast/Toast.tsx

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

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

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

package/src/components/Tooltip/Tooltip.tsx

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

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

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

package/src/components/TransferList/TransferList.tsx

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

package/src/components/index.ts

@@ -0,0 +1,39 @@
+export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge/Badge";
+export * from "./Breadcrumb/Breadcrumb";
+export * from "./Button";
+export * from "./Card/Card";
+export * from "./Checkbox/Checkbox";
+export * from "./Checkbox/CheckboxGroup";
+export * from "./Chip/Chip";
+export * from "./DatePicker/DatePicker";
+export * from "./Dropdown/Dropdown";
+export * from "./FileInput/FileInput";
+export * from "./FileUpload/FileUpload";
+export * from "./HoverCard/HoverCard";
+export * from "./Link/Link";
+export * from "./Loader/Loader";
+export * from "./Label";
+export * from "./Menu/Menu";
+export * from "./Modal/Modal";
+export * from "./NumberInput/NumberInput";
+export * from "./Pagination/Pagination";
+export * from "./Panel/Panel";
+export * from "./Popover/Popover";
+export * from "./Radio/Radio";
+export * from "./ReadOnlyField";
+export * from "./Search/Search";
+export * from "./SegmentedControl/SegmentedControl";
+export * from "./Slider/Slider";
+export * from "./Stepper/Stepper";
+export * from "./Switch/Switch";
+export * from "./Table/Table";
+export * from "./Tabs/Tabs";
+export * from "./TextArea/TextArea";
+export * from "./TextField/TextField";
+export * from "./TimePicker/TimePicker";
+export * from "./Timeline/Timeline";
+export * from "./Toast/Toast";
+export * from "./Tooltip/Tooltip";
+export * from "./TransferList/TransferList";

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import "@recursica/adapter-common/style.css";
+export * from "./components";
+export * from "@recursica/adapter-common";

package/src/types/index.ts

@@ -0,0 +1,9 @@
+export interface ComboboxItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  // icon?: IconName;
+  onClick?: () => void;
+}
+
+// Export other shared types here

package/src/types/mantine.d.ts

@@ -0,0 +1,7 @@
+import type { ComboboxItem as RecursicaComboboxItem } from "./index";
+import "@mantine/core";
+
+declare module "@mantine/core" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface ComboboxItem extends RecursicaComboboxItem {}
+}

package/src/types/scss-modules.d.ts

@@ -0,0 +1,9 @@
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.module.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}

package/src/utils/ColorSchemeWrapper.tsx

@@ -0,0 +1,27 @@
+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";
+
+const channel = addons.getChannel();
+
+export function ColorSchemeWrapper({
+  children,
+}: {
+  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}</>;
+}