@multiplatform.one/forms 6.0.0

package/src/fields/DatePicker/parts.tsx

@@ -0,0 +1,603 @@
+import { Calendar, ChevronLeft, ChevronRight, X } from "@tamagui/lucide-icons-2";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { AnimatePresence, Text, View } from "tamagui";
+
+import { Button } from "../../Button";
+import { FloatingPanel } from "../../FloatingPanel";
+import { Input as InputParts } from "../../InputParts";
+import { formCommonColors } from "../../shared/colorRamps";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ViewMode = "day" | "month" | "year";
+
+export interface CalendarData {
+  year: number;
+  month: number;
+  monthName: string;
+  days: Date[];
+  today: Date;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+export const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+export const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+export const yearPageSize = 12;
+
+// ---------------------------------------------------------------------------
+// Styled sub-components
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// useDateAnimation — smooth directional transitions
+// ---------------------------------------------------------------------------
+
+export function useDateAnimation(current: string | number) {
+  const prev = useRef<string | number | null>(null);
+
+  const direction = useMemo(() => {
+    if (prev.current === null) return 0;
+    return current > prev.current ? 1 : current < prev.current ? -1 : 0;
+  }, [current]);
+
+  useEffect(() => {
+    prev.current = current;
+  }, [current]);
+
+  const animation = useMemo(
+    () => ({
+      enterStyle: { opacity: 0, x: direction * 15 },
+      exitStyle: { opacity: 0, x: direction * -15 },
+    }),
+    [direction],
+  );
+
+  return { animation, animationKey: current };
+}
+
+// ---------------------------------------------------------------------------
+// useCalendarData — compute calendar grid for a given month
+// ---------------------------------------------------------------------------
+
+export function useCalendarData(displayDate: Date): CalendarData {
+  return useMemo(() => {
+    const year = displayDate.getFullYear();
+    const month = displayDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - firstDay.getDay());
+    const endDate = new Date(lastDay);
+    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
+
+    const days: Date[] = [];
+    const current = new Date(startDate);
+    while (current <= endDate) {
+      days.push(new Date(current));
+      current.setDate(current.getDate() + 1);
+    }
+
+    return {
+      year,
+      month,
+      monthName: displayDate.toLocaleDateString("en-US", { month: "long" }),
+      days,
+      today: new Date(),
+    };
+  }, [displayDate]);
+}
+
+// ---------------------------------------------------------------------------
+// useDateNavigation — shared month/display date management
+// ---------------------------------------------------------------------------
+
+export function useDateNavigation(initialDate?: Date) {
+  const [displayDate, setDisplayDate] = useState<Date>(initialDate ?? new Date());
+
+  const navigateMonth = useCallback((direction: "prev" | "next") => {
+    setDisplayDate((prev) => {
+      const next = new Date(prev);
+      next.setMonth(next.getMonth() + (direction === "prev" ? -1 : 1));
+      return next;
+    });
+  }, []);
+
+  return { displayDate, setDisplayDate, navigateMonth };
+}
+
+// ---------------------------------------------------------------------------
+// toWeeks — split days array into 7-day rows
+// ---------------------------------------------------------------------------
+
+export function toWeeks(days: Date[]): Date[][] {
+  const result: Date[][] = [];
+  for (let i = 0; i < days.length; i += 7) {
+    result.push(days.slice(i, i + 7));
+  }
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// isSameDay — date comparison utility
+// ---------------------------------------------------------------------------
+
+export function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {
+  if (!a || !b) return false;
+  return a.toDateString() === b.toDateString();
+}
+
+// ---------------------------------------------------------------------------
+// WeekView — weekday header row
+// ---------------------------------------------------------------------------
+
+export function WeekView() {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <View flexDirection="row" {...knobProps.gap} width="100%">
+      {weekdays.map((day) => (
+        <Text
+          key={day}
+          flex={1}
+          textAlign="center"
+          fontSize={knobProps.sizeToken}
+          color="$placeholderColor"
+          {...knobProps.body}
+          {...knobProps.textWeight}
+        >
+          {day}
+        </Text>
+      ))}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CalendarHeader — clickable year + month with nav arrows
+// ---------------------------------------------------------------------------
+
+interface CalendarHeaderProps {
+  year: number;
+  monthName: string;
+  onPrevMonth?: () => void;
+  onNextMonth?: () => void;
+  onYearPress: () => void;
+  onMonthPress: () => void;
+  showPrev?: boolean;
+  showNext?: boolean;
+}
+
+export function CalendarHeader({
+  year,
+  monthName,
+  onPrevMonth,
+  onNextMonth,
+  onYearPress,
+  onMonthPress,
+  showPrev = true,
+  showNext = true,
+}: CalendarHeaderProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <View flexDirection="row" width="100%" alignItems="center" justifyContent="space-between">
+      {showPrev && onPrevMonth ? (
+        <Button
+          circular
+          size={knobProps.sizeToken}
+          chromeless
+          scaleIcon={1.5}
+          onPress={onPrevMonth}
+        >
+          <Button.Icon>
+            <ChevronLeft />
+          </Button.Icon>
+        </Button>
+      ) : (
+        <View width="$3" />
+      )}
+
+      <View flexDirection="column" alignItems="center">
+        <Button onPress={onYearPress} chromeless padding={0}>
+          <Text
+            fontSize={knobProps.sizeToken}
+            color="$placeholderColor"
+            {...knobProps.body}
+            {...knobProps.textWeight}
+          >
+            {year}
+          </Text>
+        </Button>
+        <Button onPress={onMonthPress} chromeless padding={0}>
+          <Text
+            fontSize={knobProps.sizeToken}
+            color="$color"
+            {...knobProps.body}
+            {...knobProps.textWeight}
+          >
+            {monthName}
+          </Text>
+        </Button>
+      </View>
+
+      {showNext && onNextMonth ? (
+        <Button
+          circular
+          size={knobProps.sizeToken}
+          chromeless
+          scaleIcon={1.5}
+          onPress={onNextMonth}
+        >
+          <Button.Icon>
+            <ChevronRight />
+          </Button.Icon>
+        </Button>
+      ) : (
+        <View width="$3" />
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MonthGrid — 4x3 month selector
+// ---------------------------------------------------------------------------
+
+interface MonthGridProps {
+  currentYear: number;
+  selectedMonth: number;
+  onSelectMonth: (month: number) => void;
+}
+
+export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGridProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { animation, animationKey } = useDateAnimation(currentYear);
+
+  return (
+    <AnimatePresence key={animationKey}>
+      <View
+        {...animation}
+        transition="quick"
+        flexDirection="row"
+        flexWrap="wrap"
+        {...knobProps.gap}
+        width="100%"
+      >
+        {months.map((name, index) => {
+          const isSelected = selectedMonth === index;
+          return (
+            <Button
+              key={name}
+              theme={isSelected ? ("accent" as any) : undefined}
+              borderRadius={knobProps.borderRadius.borderRadius}
+              flexBasis="30%"
+              flexGrow={1}
+              backgroundColor={isSelected ? "$background" : "transparent"}
+              chromeless
+              padding={0}
+              onPress={() => onSelectMonth(index)}
+            >
+              <Text
+                color={isSelected ? "$color" : formCommonColors.text}
+                fontWeight={isSelected ? "bold" : "400"}
+              >
+                {name.slice(0, 3)}
+              </Text>
+            </Button>
+          );
+        })}
+      </View>
+    </AnimatePresence>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// YearGrid — paginated year selector with range slider
+// ---------------------------------------------------------------------------
+
+interface YearGridProps {
+  yearPageStart: number;
+  selectedYear: number;
+  onSelectYear: (year: number) => void;
+  onPrevPage: () => void;
+  onNextPage: () => void;
+}
+
+export function YearGrid({
+  yearPageStart,
+  selectedYear,
+  onSelectYear,
+  onPrevPage,
+  onNextPage,
+}: YearGridProps) {
+  const { knobProps } = useResolvedKnobs();
+  const years = useMemo(() => {
+    const result: number[] = [];
+    for (let i = 0; i < yearPageSize; i++) {
+      result.push(yearPageStart + i);
+    }
+    return result;
+  }, [yearPageStart]);
+
+  const { animation, animationKey } = useDateAnimation(yearPageStart);
+
+  return (
+    <View width="100%" {...knobProps.gapLg}>
+      <View flexDirection="row" width="100%" alignItems="center" justifyContent="space-between">
+        <Button circular size={knobProps.sizeToken} chromeless scaleIcon={1.5} onPress={onPrevPage}>
+          <Button.Icon>
+            <ChevronLeft />
+          </Button.Icon>
+        </Button>
+        <Text fontSize={knobProps.sizeToken} {...knobProps.body} {...knobProps.textWeight}>
+          {years[0]} – {years[years.length - 1]}
+        </Text>
+        <Button circular size={knobProps.sizeToken} chromeless scaleIcon={1.5} onPress={onNextPage}>
+          <Button.Icon>
+            <ChevronRight />
+          </Button.Icon>
+        </Button>
+      </View>
+
+      <AnimatePresence key={animationKey}>
+        <View
+          {...animation}
+          transition="quick"
+          flexDirection="row"
+          flexWrap="wrap"
+          {...knobProps.gap}
+          width="100%"
+        >
+          {years.map((year) => {
+            const isSelected = year === selectedYear;
+            return (
+              <Button
+                key={year}
+                theme={isSelected ? ("accent" as any) : undefined}
+                borderRadius={knobProps.borderRadius.borderRadius}
+                flexBasis="30%"
+                flexGrow={1}
+                backgroundColor={isSelected ? "$background" : "transparent"}
+                chromeless
+                padding={0}
+                onPress={() => onSelectYear(year)}
+              >
+                <Text
+                  color={isSelected ? "$color" : formCommonColors.text}
+                  fontWeight={isSelected ? "bold" : "400"}
+                >
+                  {year}
+                </Text>
+              </Button>
+            );
+          })}
+        </View>
+      </AnimatePresence>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DatePickerInputTrigger — compound input with calendar/clear icon
+// ---------------------------------------------------------------------------
+
+interface DatePickerInputTriggerProps {
+  value: string;
+  placeholder: string;
+  disabled?: boolean;
+  onReset: () => void;
+  onButtonPress: () => void;
+  error?: boolean;
+  "aria-required"?: boolean;
+  "aria-invalid"?: boolean;
+}
+
+export const DatePickerInputTrigger = InputParts.Area.styleable<DatePickerInputTriggerProps>(
+  (triggerProps, ref) => {
+    const { value, onButtonPress, onReset, disabled, placeholder, error, ...props } = triggerProps;
+    return (
+      <View cursor="pointer" onPress={disabled ? undefined : onButtonPress}>
+        <InputParts.Box
+          theme={error ? "red" : undefined}
+          {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
+        >
+          <InputParts.Section>
+            <InputParts.Area
+              readOnly
+              value={value}
+              ref={ref}
+              placeholder={placeholder}
+              disabled={disabled}
+              color={formCommonColors.text}
+              {...(props as any)}
+            />
+          </InputParts.Section>
+          <InputParts.Section>
+            {value ? (
+              <InputParts.Button
+                onPress={(e) => {
+                  e.stopPropagation();
+                  onReset();
+                }}
+              >
+                <InputParts.Icon>
+                  <X />
+                </InputParts.Icon>
+              </InputParts.Button>
+            ) : (
+              <InputParts.Icon adornment="trailing">
+                <Calendar />
+              </InputParts.Icon>
+            )}
+          </InputParts.Section>
+        </InputParts.Box>
+      </View>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// DatePickerPopoverShell — Popover + Adapt/Sheet wrapper
+// ---------------------------------------------------------------------------
+
+interface DatePickerPopoverShellProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger: ReactNode;
+  children: ReactNode;
+  popoverRef?: RefObject<any>;
+}
+
+export function DatePickerPopoverShell({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+}: DatePickerPopoverShellProps) {
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      scrollable
+      sizing="fill"
+      fitContent
+    >
+      {children}
+    </FloatingPanel>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ViewSwitcher — orchestrates day/month/year view modes
+// ---------------------------------------------------------------------------
+
+interface ViewSwitcherProps {
+  calendarData: CalendarData;
+  displayDate: Date;
+  onSetDisplayDate: (date: Date) => void;
+  viewMode: ViewMode;
+  setViewMode: (mode: ViewMode) => void;
+  yearPageStart: number;
+  setYearPageStart: (fn: (s: number) => number) => void;
+  children: ReactNode;
+}
+
+export function ViewSwitcher({
+  calendarData,
+  displayDate,
+  onSetDisplayDate,
+  viewMode,
+  setViewMode,
+  yearPageStart,
+  setYearPageStart,
+  children,
+}: ViewSwitcherProps) {
+  const { knobProps } = useResolvedKnobs();
+  const handleSelectMonth = useCallback(
+    (month: number) => {
+      const newDate = new Date(displayDate);
+      newDate.setMonth(month);
+      onSetDisplayDate(newDate);
+      setViewMode("day");
+    },
+    [displayDate, onSetDisplayDate, setViewMode],
+  );
+
+  const handleSelectYear = useCallback(
+    (year: number) => {
+      const newDate = new Date(displayDate);
+      newDate.setFullYear(year);
+      onSetDisplayDate(newDate);
+      setViewMode("month");
+    },
+    [displayDate, onSetDisplayDate, setViewMode],
+  );
+
+  if (viewMode === "month") {
+    return (
+      <View
+        flexDirection="column"
+        alignItems="center"
+        {...knobProps.gapLg}
+        width="100%"
+        {...knobProps.panelPadding}
+      >
+        <Text
+          fontSize={knobProps.sizeToken}
+          alignSelf="center"
+          {...knobProps.body}
+          {...knobProps.textWeight}
+        >
+          Select a month
+        </Text>
+        <MonthGrid
+          currentYear={calendarData.year}
+          selectedMonth={calendarData.month}
+          onSelectMonth={handleSelectMonth}
+        />
+      </View>
+    );
+  }
+
+  if (viewMode === "year") {
+    return (
+      <View
+        flexDirection="column"
+        alignItems="center"
+        {...knobProps.gapLg}
+        width="100%"
+        {...knobProps.panelPadding}
+      >
+        <YearGrid
+          yearPageStart={yearPageStart}
+          selectedYear={calendarData.year}
+          onSelectYear={handleSelectYear}
+          onPrevPage={() => setYearPageStart((s) => s - yearPageSize)}
+          onNextPage={() => setYearPageStart((s) => s + yearPageSize)}
+        />
+      </View>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+// ---------------------------------------------------------------------------
+// formatDateDisplay — shared date formatting
+// ---------------------------------------------------------------------------
+
+export function formatDateDisplay(date: Date | null): string {
+  if (!date) return "";
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}

package/src/fields/DatePicker/utils.ts

@@ -0,0 +1,30 @@
+/**
+ * Coerce an arbitrary input (Date | string | number | null | undefined) into
+ * a valid Date or null. Used by DatePicker / DatetimePicker / DateRangePicker /
+ * MultiDatePicker to initialize internal state from `value`/`defaultValue` in
+ * standalone mode.
+ *
+ * ISO date-only strings ("YYYY-MM-DD") parse as UTC midnight by default, so
+ * `toLocaleDateString` shifts them by one day in negative-offset timezones.
+ * We construct them as local midnight so the day component round-trips.
+ */
+const ISO_DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+export function coerceToDate(input: unknown): Date | null {
+  if (input == null || input === "") return null;
+  if (input instanceof Date) return Number.isNaN(input.getTime()) ? null : input;
+  if (typeof input === "string") {
+    const m = ISO_DATE_ONLY.exec(input);
+    if (m) {
+      const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+      return Number.isNaN(d.getTime()) ? null : d;
+    }
+    const d = new Date(input);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  if (typeof input === "number") {
+    const d = new Date(input);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  return null;
+}

package/src/fields/Duration/Duration.spec.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { Duration } from "./index";
+
+describe("Duration", () => {
+  describe("without form context", () => {
+    it("renders with label and placeholder", () => {
+      const result = renderWithProviders(
+        <Duration label="Duration" name="dur" placeholder="Select duration" />,
+      );
+      expect(result.findTextElement("Duration")).toBeDefined();
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("placeholder")).toBe("Select duration");
+    });
+
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(<Duration label="Required" name="req" required />);
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("renders with helper text", () => {
+      const result = renderWithProviders(
+        <Duration label="Time" name="t" helperText="In seconds" />,
+      );
+      expect(result.findTextElement("In seconds")).toBeDefined();
+    });
+
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(<Duration label="Loading" name="l" skeleton />);
+      expect(result.container.querySelector("input")).toBeNull();
+    });
+
+    it("renders disabled state", () => {
+      const result = renderWithProviders(<Duration label="Disabled" name="d" disabled />);
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("aria-disabled")).toBe("true");
+    });
+
+    it("renders readOnly with formatted value", () => {
+      const result = renderWithProviders(
+        <Duration label="ReadOnly" name="r" readOnly value={3661} />,
+      );
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("aria-readonly")).toBe("true");
+    });
+  });
+
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { dur: 0 } }} submitText="Submit">
+          <Duration name="dur" label="Duration" />
+        </Form>,
+      );
+      expect(result.findTextElement("Duration")).toBeDefined();
+    });
+  });
+});