@multiplatform.one/forms 6.0.0

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -0,0 +1,519 @@
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { type ComponentProps, useCallback, useMemo, useRef, useState } from "react";
+import { AnimatePresence, type Popover, Separator, View, useMedia, useProps } from "tamagui";
+
+import { Button } from "../../Button";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { formCommonColors } from "../../shared/colorRamps";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { FormFieldProps } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { Skeleton } from "../../Skeleton";
+import type { FieldComponentProps, Validator } from "../../types";
+
+import {
+  CalendarHeader,
+  DatePickerInputTrigger,
+  DatePickerPopoverShell,
+  ViewSwitcher,
+  WeekView,
+  isSameDay,
+  toWeeks,
+  useCalendarData,
+  useDateAnimation,
+  useDateNavigation,
+  yearPageSize,
+} from "./parts";
+
+import type { ViewMode } from "./parts";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type MultiDatePickerProps<
+  TParentData = any,
+  TName extends DeepKeys<TParentData> = any,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  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"
+    >
+  > & {
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Max number of dates that can be selected. Defaults to 5. */
+    limit?: number;
+    inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
+    /** When true, renders a skeleton placeholder instead of the multi-date picker */
+    skeleton?: boolean;
+    /** When true, uses compact sizing */
+    compact?: boolean;
+  };
+
+// ---------------------------------------------------------------------------
+// MultiDayGrid — day cells with toggle selection
+// ---------------------------------------------------------------------------
+
+interface MultiDayGridProps {
+  calendarData: ReturnType<typeof useCalendarData>;
+  selectedDates: Date[];
+  onToggleDate: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function MultiDayGrid({
+  calendarData,
+  selectedDates,
+  onToggleDate,
+  minDate,
+  maxDate,
+}: MultiDayGridProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { animation, animationKey } = useDateAnimation(
+    `${calendarData.year}-${calendarData.month}`,
+  );
+  const weeks = toWeeks(calendarData.days);
+
+  return (
+    <AnimatePresence key={animationKey}>
+      <View width="100%" {...knobProps.gap} transition="medium" {...animation}>
+        <WeekView />
+        <View flexDirection="column" gap="$1" width="100%">
+          {weeks.map((week) => (
+            <View
+              key={week[0].toISOString()}
+              flexDirection="row"
+              gap="$1"
+              justifyContent="space-between"
+              width="100%"
+            >
+              {week.map((day) => {
+                const isCurrentMonth = day.getMonth() === calendarData.month;
+                const isSelected = selectedDates.some((d) => isSameDay(d, day));
+                const isToday = isSameDay(calendarData.today, day);
+                const isOutOfRange =
+                  (minDate != null && day < minDate) || (maxDate != null && day > maxDate);
+                const isDisabled = !isCurrentMonth || isOutOfRange;
+
+                return (
+                  <Button
+                    key={day.toISOString()}
+                    chromeless
+                    circular
+                    flex={1}
+                    size={knobProps.sizeToken}
+                    disabled={isDisabled}
+                    onPress={() => !isDisabled && onToggleDate(day)}
+                    backgroundColor={isSelected ? "$background" : "transparent"}
+                    theme={isSelected ? ("accent" as any) : undefined}
+                    opacity={isCurrentMonth ? 1 : 0}
+                    pointerEvents={isCurrentMonth ? "auto" : "none"}
+                    borderWidth={knobProps.borderRadius.borderWidth || 1}
+                    borderColor={isSelected ? "$backgroundStrong" : "transparent"}
+                  >
+                    {isSelected ? (
+                      <Button.Text
+                        key="text-selected"
+                        transition="quicker"
+                        enterStyle={{ opacity: 0, y: 20 }}
+                        exitStyle={{ opacity: 0, y: 20 }}
+                        opacity={1}
+                        fontWeight="bold"
+                      >
+                        {day.getDate()}
+                      </Button.Text>
+                    ) : (
+                      <Button.Text
+                        key="text-normal"
+                        color={
+                          isToday
+                            ? "$accentColor"
+                            : isCurrentMonth
+                              ? formCommonColors.text
+                              : formCommonColors.muted
+                        }
+                      >
+                        {day.getDate()}
+                      </Button.Text>
+                    )}
+                  </Button>
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      </View>
+    </AnimatePresence>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SingleCalendar — one month panel with header + day grid
+// ---------------------------------------------------------------------------
+
+interface SingleCalendarProps {
+  displayDate: Date;
+  selectedDates: Date[];
+  onToggleDate: (date: Date) => void;
+  onNavigateMonth: (months: number) => void;
+  onSetDisplayDate: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  showPrev?: boolean;
+  showNext?: boolean;
+}
+
+function SingleCalendar({
+  displayDate,
+  selectedDates,
+  onToggleDate,
+  onNavigateMonth,
+  onSetDisplayDate,
+  minDate,
+  maxDate,
+  showPrev = true,
+  showNext = true,
+}: SingleCalendarProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [viewMode, setViewMode] = useState<ViewMode>("day");
+  const calendarData = useCalendarData(displayDate);
+  const [yearPageStart, setYearPageStart] = useState(
+    () => calendarData.year - (calendarData.year % yearPageSize),
+  );
+
+  return (
+    <ViewSwitcher
+      calendarData={calendarData}
+      displayDate={displayDate}
+      onSetDisplayDate={onSetDisplayDate}
+      viewMode={viewMode}
+      setViewMode={setViewMode}
+      yearPageStart={yearPageStart}
+      setYearPageStart={setYearPageStart}
+    >
+      <View flexDirection="column" alignItems="center" {...knobProps.gapLg} width="100%">
+        <CalendarHeader
+          year={calendarData.year}
+          monthName={calendarData.monthName}
+          onPrevMonth={() => onNavigateMonth(-1)}
+          onNextMonth={() => onNavigateMonth(1)}
+          showPrev={showPrev}
+          showNext={showNext}
+          onYearPress={() => {
+            setYearPageStart(calendarData.year - (calendarData.year % yearPageSize));
+            setViewMode("year");
+          }}
+          onMonthPress={() => setViewMode("month")}
+        />
+        <MultiDayGrid
+          calendarData={calendarData}
+          selectedDates={selectedDates}
+          onToggleDate={onToggleDate}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </View>
+    </ViewSwitcher>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DualCalendarBody — side-by-side or single calendar depending on screen
+// ---------------------------------------------------------------------------
+
+interface DualCalendarBodyProps {
+  selectedDates: Date[];
+  onToggleDate: (date: Date) => void;
+  displayDate: Date;
+  setDisplayDate: (date: Date) => void;
+  navigateMonth: (direction: "prev" | "next") => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function DualCalendarBody({
+  selectedDates,
+  onToggleDate,
+  displayDate,
+  setDisplayDate,
+  navigateMonth,
+  minDate,
+  maxDate,
+}: DualCalendarBodyProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { gtSm: fullWidthMode } = useMedia();
+
+  const prevMonthDate = useMemo(() => {
+    const date = new Date(displayDate);
+    date.setMonth(date.getMonth() - 1);
+    return date;
+  }, [displayDate]);
+
+  const handleNavigate = useCallback(
+    (months: number) => {
+      navigateMonth(months < 0 ? "prev" : "next");
+    },
+    [navigateMonth],
+  );
+
+  const handleSetDisplayForPrev = useCallback(
+    (date: Date) => {
+      const next = new Date(date);
+      next.setMonth(next.getMonth() + 1);
+      setDisplayDate(next);
+    },
+    [setDisplayDate],
+  );
+
+  if (!fullWidthMode) {
+    return (
+      <View {...knobProps.panelPadding}>
+        <SingleCalendar
+          displayDate={displayDate}
+          selectedDates={selectedDates}
+          onToggleDate={onToggleDate}
+          onNavigateMonth={handleNavigate}
+          onSetDisplayDate={setDisplayDate}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View flexDirection="row" {...knobProps.gap} {...knobProps.panelPadding}>
+      <SingleCalendar
+        displayDate={prevMonthDate}
+        selectedDates={selectedDates}
+        onToggleDate={onToggleDate}
+        onNavigateMonth={handleNavigate}
+        onSetDisplayDate={handleSetDisplayForPrev}
+        minDate={minDate}
+        maxDate={maxDate}
+        showNext={false}
+      />
+      <Separator vertical />
+      <SingleCalendar
+        displayDate={displayDate}
+        selectedDates={selectedDates}
+        onToggleDate={onToggleDate}
+        onNavigateMonth={handleNavigate}
+        onSetDisplayDate={setDisplayDate}
+        minDate={minDate}
+        maxDate={maxDate}
+        showPrev={false}
+      />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// formatMultiDates — display value for multiple selected dates
+// ---------------------------------------------------------------------------
+
+function formatMultiDates(dates: Date[]): string {
+  if (dates.length === 0) return "";
+  if (dates.length === 1) return dates[0].toDateString();
+  return dates
+    .map((d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" }))
+    .join(", ");
+}
+
+// ---------------------------------------------------------------------------
+// MultiDatePicker — main component
+// ---------------------------------------------------------------------------
+
+export function MultiDatePicker<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(props: MultiDatePickerProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    form,
+    inputProps: _inputProps,
+    placeholder = "Select dates",
+    minDate,
+    maxDate,
+    disabled,
+    readOnly,
+    limit = 5,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur: _onBlur,
+    skeleton,
+    compact,
+    id: idProp,
+    ..._restProps
+  } = useProps(props);
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+
+  const [open, setOpen] = useState(false);
+  const [selectedDates, setSelectedDates] = useState<Date[]>([]);
+  const { displayDate, setDisplayDate, navigateMonth } = useDateNavigation();
+  const popoverRef = useRef<Popover>(null);
+
+  const handleToggleDate = useCallback(
+    (date: Date) => {
+      if (minDate && date < minDate) return;
+      if (maxDate && date > maxDate) return;
+
+      setSelectedDates((prev) => {
+        const existing = prev.findIndex((d) => isSameDay(d, date));
+        if (existing >= 0) {
+          return prev.filter((_, i) => i !== existing);
+        }
+        if (prev.length >= limit) return prev;
+        return [...prev, date].sort((a, b) => a.getTime() - b.getTime());
+      });
+    },
+    [minDate, maxDate, limit],
+  );
+
+  const handleClear = useCallback(() => {
+    setSelectedDates([]);
+  }, []);
+
+  const calendarContent = (
+    <DualCalendarBody
+      selectedDates={selectedDates}
+      onToggleDate={handleToggleDate}
+      displayDate={displayDate}
+      setDisplayDate={setDisplayDate}
+      navigateMonth={navigateMonth}
+      minDate={minDate}
+      maxDate={maxDate}
+    />
+  );
+
+  const renderPopover = (hasError?: boolean, blurHandler?: (...args: any[]) => void) => {
+    if (readOnly) {
+      return (
+        <InputParts.Box>
+          <InputParts.Area
+            value={formatMultiDates(selectedDates)}
+            readOnly
+            aria-readonly="true"
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+            placeholder={placeholder}
+          />
+        </InputParts.Box>
+      );
+    }
+    const handleOpenChange = (isOpen: boolean) => {
+      setOpen(isOpen);
+      if (!isOpen) blurHandler?.();
+    };
+    return (
+      <DatePickerPopoverShell
+        open={open}
+        onOpenChange={handleOpenChange}
+        popoverRef={popoverRef}
+        trigger={
+          <DatePickerInputTrigger
+            value={formatMultiDates(selectedDates)}
+            placeholder={placeholder}
+            disabled={disabled}
+            onReset={handleClear}
+            onButtonPress={() => setOpen(true)}
+            error={!!hasError}
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+          />
+        }
+      >
+        {calendarContent}
+      </DatePickerPopoverShell>
+    );
+  };
+
+  // Render skeleton placeholder (after all hooks)
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+      >
+        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, errorProp);
+
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+          >
+            <InputParts size={size || knobProps.sizeToken}>
+              {renderPopover(!!resolvedError, mergeFieldHandler(field, "handleBlur", _onBlur))}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/DatePicker/ThemeRefactor.spec.tsx

@@ -0,0 +1,73 @@
+/**
+ * Theme Refactor Tests for Forms
+ *
+ * Tests covering the theme-system refactor for generic form components:
+ * 1. DatePicker uses premium patterns (Popover, theme tokens)
+ */
+
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("@multiplatform.one/router", () => ({
+  useUrlState: () => [null, () => {}],
+}));
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Calendar: () => null,
+  ChevronLeft: () => null,
+  ChevronRight: () => null,
+  X: () => null,
+}));
+
+vi.mock("react-native-reanimated", () => ({
+  default: {
+    useSharedValue: (init: any) => ({ value: init }),
+    useAnimatedStyle: () => ({}),
+    withTiming: (val: any) => val,
+    withSpring: (val: any) => val,
+    createAnimatedComponent: (component: any) => component,
+    runOnJS: (fn: any) => fn,
+    runOnUI: (fn: any) => fn,
+    useDerivedValue: (fn: () => any) => ({ value: fn() }),
+    useAnimatedRef: () => ({ current: null }),
+    Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
+    FadeIn: { duration: () => ({}) },
+    FadeOut: { duration: () => ({}) },
+    Layout: { duration: () => ({}) },
+    Extrapolation: { CLAMP: "clamp" },
+    measure: () => null,
+    scrollTo: () => {},
+    makeMutable: (init: any) => ({ value: init }),
+  },
+  useSharedValue: (init: any) => ({ value: init }),
+  useAnimatedStyle: () => ({}),
+  withTiming: (val: any) => val,
+  withSpring: (val: any) => val,
+  createAnimatedComponent: (component: any) => component,
+  runOnJS: (fn: any) => fn,
+  runOnUI: (fn: any) => fn,
+  useDerivedValue: (fn: () => any) => ({ value: fn() }),
+  useAnimatedRef: () => ({ current: null }),
+  Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
+  FadeIn: { duration: () => ({}) },
+  FadeOut: { duration: () => ({}) },
+  Layout: { duration: () => ({}) },
+}));
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+
+async function loadDatePicker() {
+  return (await import(".")).DatePicker;
+}
+
+describe("DatePicker uses premium patterns", () => {
+  it("renders with label and input trigger", async () => {
+    const DatePicker = await loadDatePicker();
+
+    const result = renderWithProviders(<DatePicker label="Due Date" placeholder="Select date" />);
+
+    const labelEl = result.findTextElement("Due Date");
+    expect(labelEl).toBeTruthy();
+    const input = result.container.querySelector("input");
+    expect(input?.getAttribute("placeholder")).toBe("Select date");
+  });
+});