@multiplatform.one/forms 6.0.0

package/src/fields/Stepper/index.tsx

@@ -0,0 +1,408 @@
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
+import { isWeb, useProps } from "tamagui";
+import { Input as TamaguiInput } from "tamagui";
+
+type InputProps = ComponentProps<typeof TamaguiInput>;
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import { useWheelIncrement } from "../../shared/useWheelIncrement";
+import type { FormFieldProps } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { ControlGroup } from "../../ControlGroup";
+import { Minus, Plus } from "@tamagui/lucide-icons-2";
+import { Button } from "../../Button";
+import type { FieldComponentProps, Validator } from "../../types";
+
+const repeatDelay = 400;
+const repeatInterval = 80;
+
+function useRepeatAction(action: () => void) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const actionRef = useRef(action);
+  actionRef.current = action;
+
+  const stop = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const start = useCallback(() => {
+    stop();
+    actionRef.current();
+    timerRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(() => actionRef.current(), repeatInterval);
+    }, repeatDelay);
+  }, [stop]);
+
+  useEffect(() => stop, [stop]);
+
+  return { onPressIn: start, onPressOut: stop };
+}
+
+export type StepperProps<
+  TParentData = any,
+  TName extends DeepKeys<TParentData> = any,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator = any,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+      "children"
+    >
+  > & {
+    readOnly?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    showButtons?: boolean;
+    buttonPosition?: "left" | "right" | "both";
+    allowEmpty?: boolean;
+    placeholder?: string;
+    inputProps?: Omit<InputProps, "value" | "onChangeText" | "ref">;
+    /** When true, renders a skeleton placeholder instead of the stepper */
+    skeleton?: boolean;
+    /** When true, uses compact sizing */
+    compact?: boolean;
+  };
+
+export function Stepper<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator = any,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(props: StepperProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    form,
+    inputProps,
+    min,
+    max,
+    step = 1,
+    precision = 0,
+    showButtons = true,
+    buttonPosition = "both",
+    allowEmpty = false,
+    placeholder,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    skeleton,
+    compact,
+    id: idProp,
+    ...restProps
+  } = useProps(props);
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+
+  // Initialize inputValue from defaultValue for standalone mode
+  const [inputValue, setInputValue] = useState<string>(() => {
+    if (defaultValue !== undefined && defaultValue !== null) {
+      return precision > 0 ? (defaultValue as number).toFixed(precision) : String(defaultValue);
+    }
+    return "";
+  });
+  const incrementRef = useRef<() => void>(() => {});
+  const decrementRef = useRef<() => void>(() => {});
+  const repeatIncrement = useRepeatAction(() => incrementRef.current());
+  const repeatDecrement = useRepeatAction(() => decrementRef.current());
+
+  // Format number to string with precision
+  const formatValue = useCallback(
+    (value: number | null): string => {
+      if (value === null || value === undefined) return "";
+      return precision > 0 ? value.toFixed(precision) : value.toString();
+    },
+    [precision],
+  );
+
+  // Parse string to number
+  const parseValue = useCallback(
+    (value: string): number | null => {
+      if (value === "" && allowEmpty) return null;
+      const parsed = Number.parseFloat(value);
+      return Number.isNaN(parsed) ? null : parsed;
+    },
+    [allowEmpty],
+  );
+
+  // Clamp value within min/max bounds
+  const clampValue = useCallback(
+    (value: number | null): number | null => {
+      if (value === null) return null;
+      if (min !== undefined && value < min) return min;
+      if (max !== undefined && value > max) return max;
+      return value;
+    },
+    [min, max],
+  );
+
+  // Increment value
+  const increment = useCallback(() => {
+    const currentValue = parseValue(inputValue) || 0;
+    const newValue = clampValue(currentValue + step);
+    if (newValue !== null) {
+      setInputValue(formatValue(newValue));
+    }
+  }, [inputValue, parseValue, clampValue, step, formatValue]);
+
+  // Decrement value
+  const decrement = useCallback(() => {
+    const currentValue = parseValue(inputValue) || 0;
+    const newValue = clampValue(currentValue - step);
+    if (newValue !== null) {
+      setInputValue(formatValue(newValue));
+    }
+  }, [inputValue, parseValue, clampValue, step, formatValue]);
+
+  incrementRef.current = increment;
+  decrementRef.current = decrement;
+
+  const { wheelProps } = useWheelIncrement({
+    onIncrement: increment,
+    onDecrement: decrement,
+    disabled,
+    readOnly,
+  });
+
+  // Handle input change
+  const handleInputChange = useCallback(
+    (text: string) => {
+      // Allow empty string
+      if (text === "" && allowEmpty) {
+        setInputValue("");
+        return;
+      }
+
+      // Only allow valid number characters
+      const cleanText = text.replace(/[^0-9.-]/g, "");
+
+      // Prevent multiple decimal points
+      if (precision === 0 && cleanText.includes(".")) {
+        return;
+      }
+
+      setInputValue(cleanText);
+    },
+    [allowEmpty, precision],
+  );
+
+  const renderNumberRow = (
+    onBlurHandler?: () => void,
+    onFocusHandler?: () => void,
+    hasError?: boolean,
+  ) => {
+    const controlGroup = (
+      <ControlGroup>
+        {showButtons && !readOnly && (buttonPosition === "left" || buttonPosition === "both") && (
+          <Button
+            size={knobProps.sizeToken}
+            disabled={disabled}
+            tabIndex={-1}
+            aria-label="Decrease"
+            onPressIn={repeatDecrement.onPressIn}
+            onPressOut={repeatDecrement.onPressOut}
+            icon={Minus}
+          />
+        )}
+
+        <InputParts.Area
+          value={inputValue}
+          placeholder={placeholder}
+          keyboardType="numeric"
+          disabled={disabled}
+          readOnly={!!readOnly}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          aria-readonly={readOnly || undefined}
+          onChangeText={readOnly ? undefined : handleInputChange}
+          textAlign="center"
+          {...(onBlurHandler ? { onBlur: onBlurHandler } : undefined)}
+          {...(onFocusHandler ? { onFocus: onFocusHandler } : undefined)}
+          {...(inputProps as any)}
+        />
+
+        {showButtons && !readOnly && (buttonPosition === "right" || buttonPosition === "both") && (
+          <Button
+            size={knobProps.sizeToken}
+            disabled={disabled}
+            tabIndex={-1}
+            aria-label="Increase"
+            onPressIn={repeatIncrement.onPressIn}
+            onPressOut={repeatIncrement.onPressOut}
+            icon={Plus}
+          />
+        )}
+      </ControlGroup>
+    );
+
+    // Wrap with wheel handler on web
+    if (isWeb && !disabled && !readOnly) {
+      return <div {...wheelProps}>{controlGroup}</div>;
+    }
+    return controlGroup;
+  };
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    return (
+      <InputParts size={size || knobProps.sizeToken}>
+        {label && <Skeleton variant="text" width="30%" height={14} />}
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </InputParts>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+      >
+        <InputParts size={size || knobProps.sizeToken}>
+          {renderNumberRow(undefined, undefined, !!errorProp)}
+        </InputParts>
+      </FieldLayout>
+    );
+  }
+
+  // Works with TanStack Form context
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => (
+        <StepperFieldRenderer
+          field={field}
+          fieldProps={{
+            label,
+            labelProps,
+            error: errorProp,
+            helperText,
+            required,
+            size,
+            readOnly,
+            onBlur,
+            ...restProps,
+          }}
+          id={id}
+          inputValue={inputValue}
+          setInputValue={setInputValue}
+          formatValue={formatValue}
+          parseValue={parseValue}
+          clampValue={clampValue}
+          knobProps={knobProps}
+          renderNumberRow={renderNumberRow}
+        />
+      )}
+    </Field>
+  );
+}
+
+function StepperFieldRenderer<TData>({
+  field,
+  fieldProps,
+  id,
+  inputValue,
+  setInputValue,
+  formatValue,
+  parseValue,
+  clampValue,
+  knobProps,
+  renderNumberRow,
+}: any) {
+  const isFieldUpdateRef = useRef(false);
+
+  useEffect(() => {
+    const fieldValue = field.state.value as number | null;
+    if (fieldValue !== undefined && fieldValue !== null) {
+      const formatted = formatValue(fieldValue);
+      if (formatted !== inputValue) {
+        isFieldUpdateRef.current = true;
+        setInputValue(formatted);
+      }
+    } else if (fieldValue === null && inputValue !== "") {
+      isFieldUpdateRef.current = true;
+      setInputValue("");
+    }
+  }, [field.state.value, formatValue, setInputValue]);
+
+  useEffect(() => {
+    if (isFieldUpdateRef.current) {
+      isFieldUpdateRef.current = false;
+      return;
+    }
+    const parsedValue = parseValue(inputValue);
+    const clampedValue = clampValue(parsedValue);
+    if (clampedValue !== field.state.value) {
+      field.handleChange(clampedValue as TData);
+    }
+  }, [inputValue, parseValue, clampValue, field.handleChange, field.state.value]);
+
+  const error = getFieldError(field, fieldProps.error);
+
+  return (
+    <FieldLayout
+      id={id}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      size={fieldProps.size}
+      knobProps={knobProps}
+      onBlur={mergeFieldHandler(field, "handleBlur", fieldProps.onBlur)}
+    >
+      <InputParts size={fieldProps.size || knobProps.sizeToken}>
+        {renderNumberRow(
+          undefined,
+          () => field.handleChange(parseValue(inputValue) as TData),
+          !!error,
+        )}
+      </InputParts>
+    </FieldLayout>
+  );
+}

package/src/fields/Switch/Switch.spec.tsx

@@ -0,0 +1,160 @@
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { YStack } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Switch } from "./index";
+
+describe("Switch", () => {
+  describe("without form context", () => {
+    it("should render with label and helper text correctly", () => {
+      const result = renderWithProviders(
+        <Switch
+          label="Enable notifications"
+          helperText="Receive push notifications"
+          name="notifications"
+          defaultValue={false}
+        />,
+      );
+      const switchElement = result.getSwitch();
+
+      expect(switchElement?.getAttribute("aria-checked")).toBe("false");
+      expect(switchElement?.hasAttribute("disabled")).toBeFalsy();
+    });
+
+    it("should render required label with asterisk", () => {
+      const result = renderWithProviders(<Switch label="Required Switch" name="switch" required />);
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("Required Switch");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("should handle custom id prop", () => {
+      const customId = "custom-switch-id";
+      const result = renderWithProviders(
+        <Switch id={customId} label="Test" defaultValue={false} />,
+      );
+      const switchElement = result.getSwitch();
+      expect(switchElement?.id).toBe(customId);
+    });
+
+    it("should handle state transitions", async () => {
+      const onCheckedChange = vi.fn();
+      const result = renderWithProviders(
+        <Switch name="switch" defaultValue={false} onCheckedChange={onCheckedChange} />,
+      );
+      const switchElement = result.getSwitch();
+      await act(async () => {
+        if (switchElement) fireEvent.click(switchElement);
+      });
+      expect(onCheckedChange).toHaveBeenCalledWith(true);
+      if (switchElement) fireEvent.click(switchElement);
+      expect(onCheckedChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe("with form context", () => {
+    const FormExample = ({
+      defaultValue = false,
+      name = "switch",
+      onSubmit = async (_value: any) => {},
+    }) => {
+      return (
+        <Form
+          formOptions={{
+            defaultValues: {
+              [name]: defaultValue,
+            },
+          }}
+          onSubmit={async (value) => {
+            await onSubmit(value);
+          }}
+        >
+          <Switch label="Test Switch" name={name} />
+          <Button action="submit">Submit</Button>
+        </Form>
+      );
+    };
+
+    it("should render with form context and handle form submission", async () => {
+      const onSubmit = vi.fn();
+      const result = renderWithProviders(
+        <YStack>
+          <FormExample onSubmit={onSubmit} />
+        </YStack>,
+      );
+      const switchElement = result.getSwitch();
+      const submitButton = result.getSubmitButton();
+      expect(switchElement?.getAttribute("aria-checked")).toBe("false");
+      await act(async () => {
+        if (submitButton) fireEvent.click(submitButton);
+      });
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalledWith({ switch: false });
+      });
+      await act(async () => {
+        if (switchElement) fireEvent.click(switchElement);
+        if (submitButton) fireEvent.click(submitButton);
+      });
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalledWith({ switch: true });
+      });
+    });
+
+    it("should handle disabled state in form context", async () => {
+      const onCheckedChange = vi.fn();
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { switch: false } }}>
+          <Switch label="Test Switch" name="switch" disabled onCheckedChange={onCheckedChange} />
+        </Form>,
+      );
+      const switchElement = result.getSwitch();
+      await act(async () => {
+        if (switchElement) fireEvent.click(switchElement);
+      });
+      expect(onCheckedChange).not.toHaveBeenCalled();
+      expect(switchElement?.getAttribute("aria-checked")).toBe("false");
+      expect(switchElement?.getAttribute("aria-disabled")).toBe("true");
+    });
+  });
+
+  describe("with useForm hook directly", () => {
+    it("should handle form submission with useForm", async () => {
+      const onSubmitMock = vi.fn();
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: {
+            notifications: false,
+          },
+          onSubmit: async ({ value }) => {
+            onSubmitMock(value);
+          },
+        });
+        return (
+          <Form form={form}>
+            <Switch label="Enable Notifications" name="notifications" />
+            <Button action="submit">Submit</Button>
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      const switchElement = result.getSwitch();
+      const submitButton = result.getSubmitButton();
+      await act(async () => {
+        if (submitButton) fireEvent.click(submitButton);
+      });
+      await waitFor(() => {
+        expect(onSubmitMock).toHaveBeenCalledWith({ notifications: false });
+      });
+      await act(async () => {
+        if (switchElement) fireEvent.click(switchElement);
+        if (submitButton) fireEvent.click(submitButton);
+      });
+      await waitFor(() => {
+        expect(onSubmitMock).toHaveBeenCalledWith({ notifications: true });
+      });
+    });
+  });
+});