@recursica/mantine-adapter 0.9.4 → 0.11.0

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,139 @@
+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(props, ref) {
+    const {
+      overStyled = false,
+      formLayout = "stacked",
+
+      // Label & Wrapper Maps
+      labelSize,
+      labelAlignment,
+      labelOptionalText,
+      labelWithEditIcon,
+      onLabelEditClick,
+
+      label,
+      assistiveText,
+      assistiveWithIcon,
+      error,
+      required,
+      withAsterisk,
+      id,
+      className,
+      style,
+      disabled,
+      readOnly,
+      readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
+      ...rest
+    } = props;
+    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}
+        emptyValueComponent={emptyValueComponent}
+        readOnlyType="text"
+        readOnlyValue={value !== undefined ? value : defaultValue}
+        readOnlyNativeProps={props}
+        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,18 @@
+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: {},
+};
+
+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,48 @@
+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 "./Container/Container";
+export * from "./DatePicker/DatePicker";
+export * from "./Dropdown/Dropdown";
+export * from "./FileInput/FileInput";
+export * from "./FileUpload/FileUpload";
+export * from "./Flex/Flex";
+export * from "./FormControlLayout/FormControlLayout";
+export * from "./Group/Group";
+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 "./Radio/RadioGroup";
+export * from "./ReadOnlyField";
+export * from "./Search/Search";
+export * from "./SegmentedControl/SegmentedControl";
+export * from "./Slider/Slider";
+export * from "./Stack/Stack";
+export * from "./Stepper/Stepper";
+export * from "./Switch/Switch";
+export * from "./Switch/SwitchGroup";
+export * from "./Table/Table";
+export * from "./Tabs/Tabs";
+export * from "./Text/Text";
+export * from "./TextArea/TextArea";
+export * from "./TextField/TextField";
+export * from "./TimePicker/TimePicker";
+export * from "./Timeline/Timeline";
+export * from "./Title/Title";
+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}</>;
+}

package/src/utils/RequireAccessibleLabel.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+/**
+ * Enforces accessibility by strictly requiring at least one form of labeling:
+ * either a visual \`label\`, an \`aria-label\`, or an \`aria-labelledby\`.
+ */
+export type RequireAccessibleLabel<T> = T &
+  (
+    | { label: ReactNode; "aria-label"?: string; "aria-labelledby"?: string }
+    | { label?: ReactNode; "aria-label": string; "aria-labelledby"?: string }
+    | { label?: ReactNode; "aria-label"?: string; "aria-labelledby": string }
+  );

package/src/utils/copyToClipboard.ts

@@ -0,0 +1,36 @@
+import React from "react";
+
+/**
+ * Helper function for copy text to clipboard
+ * @param {string} textToCopy The text string for copying to the clipboard
+ * @param {element|node} componentRef The ref of the component that we want to trigger the copy
+ */
+const copyToClipboard = (
+  textToCopy: string,
+  componentRef: React.RefObject<HTMLElement | null>,
+): Promise<void> => {
+  const currentFocus = document.activeElement as HTMLInputElement;
+  return new Promise((resolve, reject) => {
+    if (componentRef && componentRef.current) {
+      const textArea = document.createElement("textarea");
+      textArea.readOnly = true;
+      textArea.defaultValue = textToCopy;
+      componentRef.current.appendChild(textArea);
+      textArea.select();
+      const wasCopied = document.execCommand("copy");
+      componentRef.current.removeChild(textArea);
+      if (currentFocus) {
+        currentFocus.focus();
+      }
+      if (wasCopied) {
+        resolve();
+      } else {
+        reject(new Error("Failed to copy"));
+      }
+    } else {
+      reject(new Error("Copy area reference is not defined"));
+    }
+  });
+};
+
+export { copyToClipboard };