@recursica/mantine-adapter 0.10.0 → 0.12.0

package/src/components/Switch/Switch.tsx

@@ -11,15 +11,23 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
+import { type RequireAccessibleLabel } from "../../utils/RequireAccessibleLabel";
+import {
+  FormControlLayout,
+  type FormControlLayoutProps,
+} from "../FormControlLayout/FormControlLayout";
 import styles from "./Switch.module.css";
 
 import { SwitchGroup } from "./SwitchGroup";
 
-export type RecursicaSwitchProps = Omit<
-  MantineSwitchProps,
-  "size" | "color" | "radius" | "variant"
-> &
-  ReadOnlyControlProps;
+export type RecursicaSwitchProps = RequireAccessibleLabel<
+  Omit<MantineSwitchProps, "size" | "color" | "radius" | "variant"> &
+    ReadOnlyControlProps &
+    Pick<
+      FormControlLayoutProps,
+      "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
+    >
+>;
 
 export type SwitchProps = RecursicaOverStyled<RecursicaSwitchProps>;
 
@@ -29,91 +37,132 @@ type SwitchComponent = React.ForwardRefExoticComponent<
   Group: typeof SwitchGroup;
 };
 
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  {
-    overStyled = false,
-    readOnly,
-    readOnlyComponent,
-    disabled,
-    thumbIcon,
-    ...rest
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  function Switch(props, ref) {
+    const {
+      overStyled = false,
+      readOnly,
+      readOnlyComponent,
+      disabled,
+      thumbIcon,
+      formLayout,
+      labelSize,
+      controlMaxWidth,
+      controlMinWidth,
+      ...rest
+    } = props;
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Actively delete dimension bindings that bypass the abstraction
+    delete restRecord["size"];
+    delete restRecord["color"];
+    delete restRecord["radius"];
+    delete restRecord["variant"];
+
+    const mergedClassNames: Partial<Record<string, string>> = {
+      root: styles.root,
+      body: styles.body,
+      track: styles.track,
+      thumb: styles.thumb,
+      trackLabel: styles.trackLabel,
+      labelWrapper: styles.labelWrapper,
+      label: styles.label,
+    };
+
+    const classNamesProp = restRecord.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;
+      mergedClassNames.body = o.body ? `${styles.body} ${o.body}` : styles.body;
+      mergedClassNames.track = o.track
+        ? `${styles.track} ${o.track}`
+        : styles.track;
+      mergedClassNames.thumb = o.thumb
+        ? `${styles.thumb} ${o.thumb}`
+        : styles.thumb;
+      mergedClassNames.trackLabel = o.trackLabel
+        ? `${styles.trackLabel} ${o.trackLabel}`
+        : styles.trackLabel;
+      mergedClassNames.labelWrapper = o.labelWrapper
+        ? `${styles.labelWrapper} ${o.labelWrapper}`
+        : styles.labelWrapper;
+      mergedClassNames.label = o.label
+        ? `${styles.label} ${o.label}`
+        : styles.label;
+    }
+
+    const classNameProp = restRecord.className as string | undefined;
+    const finalClass = classNameProp
+      ? `${styles.root} ${classNameProp}`
+      : styles.root;
+
+    if (readOnly && !!readOnlyComponent) {
+      const isChecked = !!(restRecord.checked ?? restRecord.defaultChecked);
+      const ReadOnlyComp = readOnlyComponent;
+      const roNode = (
+        <ReadOnlyComp
+          {...props}
+          checked={isChecked}
+          label={restRecord.label as React.ReactNode}
+        />
+      );
+
+      if (formLayout) {
+        return (
+          <FormControlLayout
+            formLayout={formLayout}
+            labelSize={labelSize}
+            controlMaxWidth={controlMaxWidth}
+            controlMinWidth={controlMinWidth}
+          >
+            {roNode}
+          </FormControlLayout>
+        );
+      }
+
+      return <>{roNode}</>;
+    }
+
+    const FinalThumbIcon = (
+      <div className={styles.thumbIconWrapper}>
+        <CheckIcon className={styles.checkIcon} />
+        <CloseIcon className={styles.closeIcon} />
+      </div>
+    );
+
+    // We omit Mantine's sizing/coloring so we rely strictly on variables from Switch.module.css
+    const switchNode = (
+      <MantineSwitch
+        ref={ref}
+        className={finalClass}
+        classNames={mergedClassNames}
+        disabled={readOnly || disabled}
+        thumbIcon={thumbIcon ?? FinalThumbIcon}
+        {...(sanitizedProps as unknown as MantineSwitchProps)}
+      />
+    );
+
+    if (formLayout) {
+      return (
+        <FormControlLayout
+          formLayout={formLayout}
+          labelSize={labelSize}
+          controlMaxWidth={controlMaxWidth}
+          controlMinWidth={controlMinWidth}
+        >
+          {switchNode}
+        </FormControlLayout>
+      );
+    }
+
+    return switchNode;
   },
-  ref,
-) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
-  const restRecord = sanitizedProps as Record<string, unknown>;
-
-  // Actively delete dimension bindings that bypass the abstraction
-  delete restRecord["size"];
-  delete restRecord["color"];
-  delete restRecord["radius"];
-  delete restRecord["variant"];
-
-  if (readOnly && readOnlyComponent) {
-    // Safely fallback explicitly returning mapped elements natively without macro wrappers
-    return <>{readOnlyComponent}</>;
-  }
-
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    body: styles.body,
-    track: styles.track,
-    thumb: styles.thumb,
-    trackLabel: styles.trackLabel,
-    labelWrapper: styles.labelWrapper,
-    label: styles.label,
-  };
-
-  const classNamesProp = restRecord.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;
-    mergedClassNames.body = o.body ? `${styles.body} ${o.body}` : styles.body;
-    mergedClassNames.track = o.track
-      ? `${styles.track} ${o.track}`
-      : styles.track;
-    mergedClassNames.thumb = o.thumb
-      ? `${styles.thumb} ${o.thumb}`
-      : styles.thumb;
-    mergedClassNames.trackLabel = o.trackLabel
-      ? `${styles.trackLabel} ${o.trackLabel}`
-      : styles.trackLabel;
-    mergedClassNames.labelWrapper = o.labelWrapper
-      ? `${styles.labelWrapper} ${o.labelWrapper}`
-      : styles.labelWrapper;
-    mergedClassNames.label = o.label
-      ? `${styles.label} ${o.label}`
-      : styles.label;
-  }
-
-  const classNameProp = restRecord.className as string | undefined;
-  const finalClass = classNameProp
-    ? `${styles.root} ${classNameProp}`
-    : styles.root;
-
-  const FinalThumbIcon = (
-    <div className={styles.thumbIconWrapper}>
-      <CheckIcon className={styles.checkIcon} />
-      <CloseIcon className={styles.closeIcon} />
-    </div>
-  );
-
-  // We omit Mantine's sizing/coloring so we rely strictly on variables from Switch.module.css
-  return (
-    <MantineSwitch
-      ref={ref}
-      className={finalClass}
-      classNames={mergedClassNames}
-      disabled={readOnly || disabled}
-      thumbIcon={thumbIcon ?? FinalThumbIcon}
-      {...(sanitizedProps as unknown as MantineSwitchProps)}
-    />
-  );
-}) as SwitchComponent;
+) as SwitchComponent;
 
 Switch.displayName = "Switch";
 Switch.Group = SwitchGroup;

package/src/components/Switch/SwitchGroup.stories.tsx

@@ -39,6 +39,23 @@ export default meta;
 type Story = StoryObj<typeof SwitchGroup>;
 
 export const Default: Story = {
+  args: {
+    formLayout: "stacked",
+    label: "Standard Group",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <SwitchGroup {...args} value={value} onChange={setValue}>
+        <Switch value="1" label="Option 1" />
+        <Switch value="2" label="Option 2" />
+      </SwitchGroup>
+    );
+  },
+};
+
+export const StackedLayout: Story = {
   args: {
     formLayout: "stacked",
     label: "Notification Settings",
@@ -47,7 +64,8 @@ export const Default: Story = {
     error: "",
     required: true,
   },
-  render: function DefaultRender(args) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
     const [value, setValue] = useState<string[]>(["email"]);
     return (
       <SwitchGroup {...args} value={value} onChange={setValue}>
@@ -61,12 +79,13 @@ export const Default: Story = {
 
 export const SideBySideLayout: Story = {
   args: {
-    ...Default.args,
+    ...StackedLayout.args,
     formLayout: "side-by-side",
     labelSize: "default",
     labelAlignment: "left",
   },
-  render: function SideBySideRender(args) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
     const [value, setValue] = useState<string[]>([]);
     return (
       <SwitchGroup {...args} value={value} onChange={setValue}>
@@ -83,7 +102,8 @@ export const SolitaryFormControl: Story = {
     label: "Enable Backups",
     description: "Automatically back up your data nightly.",
   },
-  render: function SolitaryRender(args) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
     const [value, setValue] = useState<string[]>(["auto"]);
     return (
       <SwitchGroup {...args} value={value} onChange={setValue}>
@@ -93,13 +113,13 @@ export const SolitaryFormControl: Story = {
   },
 };
 
-export const GroupReadOnly: Story = {
+export const ReadOnly: Story = {
   args: {
-    ...Default.args,
+    ...StackedLayout.args,
     readOnly: true,
-    readOnlyComponent: <span>2 Notifications Enabled</span>,
   },
-  render: function ReadOnlyRender(args) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
     const [value, setValue] = useState<string[]>(["email", "sms"]);
     return (
       <SwitchGroup {...args} value={value} onChange={setValue}>

package/src/components/Switch/SwitchGroup.tsx

@@ -9,10 +9,8 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import {
-  FormControlWrapper,
-  type RecursicaFormControlWrapperProps,
-} from "../FormControlWrapper/FormControlWrapper";
+import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
+import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Switch.module.css";
 
 export interface RecursicaSwitchGroupProps
@@ -26,8 +24,8 @@ export interface RecursicaSwitchGroupProps
 export type SwitchGroupProps = RecursicaOverStyled<RecursicaSwitchGroupProps>;
 
 export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
-  function SwitchGroup(
-    {
+  function SwitchGroup(props, ref) {
+    const {
       overStyled = false,
       formLayout = "stacked",
 
@@ -52,47 +50,19 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
       children,
       readOnly,
       readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
       ...rest
-    },
-    ref,
-  ) {
+    } = props;
     const sanitizedProps = filterStylingProps(rest, overStyled);
     const restRecord = sanitizedProps as Record<string, unknown>;
 
     // Delete prohibited sizing hooks from bypassing the variables
     delete restRecord["size"];
 
-    if (readOnly && readOnlyComponent) {
-      return (
-        <FormControlWrapper
-          className={className}
-          style={style as React.CSSProperties}
-          controlMaxWidth="var(--recursica_ui-kit_components_switch_properties_max-width)"
-          controlMinWidth={undefined}
-          overStyled={overStyled as true}
-          labelElement="div"
-          formLayout={formLayout}
-          labelSize={labelSize}
-          labelAlignment={labelAlignment}
-          labelOptionalText={labelOptionalText}
-          labelWithEditIcon={labelWithEditIcon}
-          onLabelEditClick={onLabelEditClick}
-          label={label}
-          description={description}
-          assistiveText={assistiveText}
-          assistiveWithIcon={assistiveWithIcon}
-          error={error}
-          required={required}
-          withAsterisk={withAsterisk}
-          id={id}
-        >
-          {readOnlyComponent}
-        </FormControlWrapper>
-      );
-    }
-
     return (
-      <FormControlWrapper
+      <WithReadOnlyWrapper
         className={className}
         style={style as React.CSSProperties}
         controlMaxWidth="var(--recursica_ui-kit_components_switch_properties_max-width)"
@@ -113,24 +83,34 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
         required={required}
         withAsterisk={withAsterisk}
         id={id}
-      >
-        <MantineSwitch.Group
-          ref={ref}
-          /* Natively bind local disabled lock dynamically */
-          {...(sanitizedProps as unknown as MantineSwitchGroupProps)}
-        >
-          <div className={styles.groupRoot} data-layout={formLayout}>
-            {React.Children.map(children, (child) => {
-              if (React.isValidElement(child)) {
-                return React.cloneElement(child as React.ReactElement<any>, {
-                  disabled: readOnly || (child.props as any).disabled,
-                });
-              }
-              return child;
-            })}
-          </div>
-        </MantineSwitch.Group>
-      </FormControlWrapper>
+        readOnly={readOnly && !!readOnlyComponent}
+        readOnlyComponent={readOnlyComponent}
+        emptyValueComponent={emptyValueComponent}
+        readOnlyType="text"
+        readOnlyValue={value !== undefined ? value : defaultValue}
+        readOnlyNativeProps={props}
+        activeComponent={
+          <MantineSwitch.Group
+            ref={ref}
+            /* Natively bind local disabled lock dynamically */
+            {...(sanitizedProps as unknown as MantineSwitchGroupProps)}
+            disabled={readOnly || (restRecord as any).disabled}
+            value={value}
+            defaultValue={defaultValue}
+          >
+            <div className={styles.groupRoot}>
+              {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                  return React.cloneElement(child as React.ReactElement<any>, {
+                    disabled: readOnly || (child.props as any).disabled,
+                  });
+                }
+                return child;
+              })}
+            </div>
+          </MantineSwitch.Group>
+        }
+      />
     );
   },
 );

package/src/components/TextArea/TextArea.stories.tsx

@@ -27,9 +27,6 @@ const meta: Meta<TextAreaStoryProps> = {
   },
   argTypes: {
     ...formControlArgTypes,
-    disabled: {
-      control: "boolean",
-    },
     readOnly: {
       control: "boolean",
     },

package/src/components/TextArea/TextArea.tsx

@@ -40,8 +40,8 @@ export interface RecursicaTextAreaProps
 export type TextAreaProps = RecursicaOverStyled<RecursicaTextAreaProps>;
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  function TextArea(
-    {
+  function TextArea(props, ref) {
+    const {
       overStyled = false,
       formLayout = "stacked",
 
@@ -64,12 +64,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       disabled,
       readOnly,
       readOnlyComponent,
+      emptyValueComponent,
       value,
       defaultValue,
       ...rest
-    },
-    ref,
-  ) {
+    } = props;
     const sanitizedProps = filterStylingProps(rest, overStyled);
     const restRecord = sanitizedProps as Record<string, unknown>;
 
@@ -121,8 +120,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         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 */
           <MantineTextarea

package/src/components/TextField/TextField.tsx

@@ -28,8 +28,8 @@ export interface RecursicaTextFieldProps
 export type TextFieldProps = RecursicaOverStyled<RecursicaTextFieldProps>;
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  function TextField(
-    {
+  function TextField(props, ref) {
+    const {
       overStyled = false,
       formLayout = "stacked",
 
@@ -52,12 +52,11 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       disabled,
       readOnly,
       readOnlyComponent,
+      emptyValueComponent,
       value,
       defaultValue,
       ...rest
-    },
-    ref,
-  ) {
+    } = props;
     const sanitizedProps = filterStylingProps(rest, overStyled);
     const restRecord = sanitizedProps as Record<string, unknown>;
 
@@ -113,8 +112,10 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         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

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

@@ -6,11 +6,7 @@ const meta: Meta<typeof TimePicker> = {
   title: "UI-Kit/🚧 TimePicker",
   component: TimePicker,
   tags: ["autodocs"],
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-  },
+  argTypes: {},
 };
 
 export default meta;

package/src/components/index.ts

@@ -13,6 +13,7 @@ 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";

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 }
+  );