@lotics/ui 1.12.0 → 1.13.0

package/src/date_picker_value.test.ts

@@ -0,0 +1,167 @@
+import { describe, it, expect } from "vitest";
+import {
+  parsePart,
+  partsToIso,
+  parseText,
+  timeText,
+  splitTime,
+  isoToDate,
+  parseTimeString,
+  withCalendarDate,
+  withTimeOfDay,
+  nowIso,
+} from "./date_picker_value";
+
+describe("parsePart", () => {
+  it("parses a plain date", () => {
+    expect(parsePart("2026-05-17")).toEqual({ y: 2026, mo: 5, d: 17, h: 0, mi: 0 });
+  });
+
+  it("parses a datetime with T or space separator", () => {
+    expect(parsePart("2026-05-17T14:30")).toEqual({ y: 2026, mo: 5, d: 17, h: 14, mi: 30 });
+    expect(parsePart("2026-05-17 14:30")).toEqual({ y: 2026, mo: 5, d: 17, h: 14, mi: 30 });
+  });
+
+  it("is lenient on missing leading zeros", () => {
+    expect(parsePart("2026-3-7")).toEqual({ y: 2026, mo: 3, d: 7, h: 0, mi: 0 });
+  });
+
+  it("trims surrounding whitespace", () => {
+    expect(parsePart("  2026-05-17  ")).toEqual({ y: 2026, mo: 5, d: 17, h: 0, mi: 0 });
+  });
+
+  it("rejects impossible calendar dates", () => {
+    expect(parsePart("2026-02-30")).toBeNull();
+    expect(parsePart("2026-13-01")).toBeNull();
+    expect(parsePart("2026-00-10")).toBeNull();
+  });
+
+  it("rejects out-of-range times", () => {
+    expect(parsePart("2026-05-17 24:00")).toBeNull();
+    expect(parsePart("2026-05-17 12:60")).toBeNull();
+  });
+
+  it("rejects malformed input", () => {
+    expect(parsePart("not-a-date")).toBeNull();
+    expect(parsePart("2026/05/17")).toBeNull();
+    expect(parsePart("")).toBeNull();
+  });
+});
+
+describe("partsToIso", () => {
+  it("formats a date without time", () => {
+    expect(partsToIso({ y: 2026, mo: 5, d: 7, h: 0, mi: 0 }, false)).toBe("2026-05-07");
+  });
+
+  it("formats a datetime with zero-padded time", () => {
+    expect(partsToIso({ y: 2026, mo: 5, d: 7, h: 9, mi: 5 }, true)).toBe("2026-05-07T09:05");
+  });
+});
+
+describe("parseText", () => {
+  it("returns empty string for blank input (clear)", () => {
+    expect(parseText("", false)).toBe("");
+    expect(parseText("   ", false)).toBe("");
+  });
+
+  it("parses a single date", () => {
+    expect(parseText("2026-3-7", false)).toBe("2026-03-07");
+  });
+
+  it("drops the time component for date-only formats", () => {
+    expect(parseText("2026-05-17 14:30", false)).toBe("2026-05-17");
+  });
+
+  it("keeps the time component for datetime formats", () => {
+    expect(parseText("2026-05-17 14:30", true)).toBe("2026-05-17T14:30");
+  });
+
+  it("returns null for an unparseable value", () => {
+    expect(parseText("2026-02-30", false)).toBeNull();
+    expect(parseText("garbage", false)).toBeNull();
+  });
+});
+
+describe("timeText", () => {
+  it("extracts HH:mm from a datetime value", () => {
+    expect(timeText("2026-05-17T09:05")).toBe("09:05");
+  });
+
+  it("treats a date-only value as midnight", () => {
+    expect(timeText("2026-05-17")).toBe("00:00");
+  });
+
+  it("returns empty for an unparseable value", () => {
+    expect(timeText("")).toBe("");
+  });
+});
+
+describe("splitTime", () => {
+  it("splits a canonical time string", () => {
+    expect(splitTime("14:30")).toEqual({ h: 14, mi: 30 });
+  });
+
+  it("returns midnight for empty input", () => {
+    expect(splitTime("")).toEqual({ h: 0, mi: 0 });
+  });
+});
+
+describe("isoToDate", () => {
+  it("builds a local Date from an ISO string", () => {
+    const date = isoToDate("2026-05-17T14:30");
+    expect(date?.getFullYear()).toBe(2026);
+    expect(date?.getMonth()).toBe(4);
+    expect(date?.getDate()).toBe(17);
+    expect(date?.getHours()).toBe(14);
+    expect(date?.getMinutes()).toBe(30);
+  });
+
+  it("returns null for an unparseable string", () => {
+    expect(isoToDate("")).toBeNull();
+    expect(isoToDate("2026-02-30")).toBeNull();
+  });
+});
+
+describe("withCalendarDate", () => {
+  const may20 = new Date(2026, 4, 20);
+
+  it("keeps the time carried by the previous value for datetime formats", () => {
+    expect(withCalendarDate(may20, "2026-01-01T14:30", true)).toBe("2026-05-20T14:30");
+  });
+
+  it("defaults to midnight when the previous value has no time", () => {
+    expect(withCalendarDate(may20, "", true)).toBe("2026-05-20T00:00");
+  });
+
+  it("drops the time component for date-only formats", () => {
+    expect(withCalendarDate(may20, "2026-01-01T14:30", false)).toBe("2026-05-20");
+  });
+});
+
+describe("withTimeOfDay", () => {
+  it("keeps the date and applies the new time", () => {
+    expect(withTimeOfDay("2026-05-20", "09:05")).toBe("2026-05-20T09:05");
+    expect(withTimeOfDay("2026-05-20T14:30", "08:00")).toBe("2026-05-20T08:00");
+  });
+});
+
+describe("nowIso", () => {
+  it("produces a canonical date or datetime string", () => {
+    expect(nowIso(false)).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    expect(nowIso(true)).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/);
+  });
+});
+
+describe("parseTimeString", () => {
+  it("parses and zero-pads a valid time", () => {
+    expect(parseTimeString("9:05")).toBe("09:05");
+    expect(parseTimeString("14:30")).toBe("14:30");
+  });
+
+  it("rejects out-of-range or malformed times", () => {
+    expect(parseTimeString("24:00")).toBeNull();
+    expect(parseTimeString("12:60")).toBeNull();
+    expect(parseTimeString("1430")).toBeNull();
+    expect(parseTimeString("")).toBeNull();
+  });
+});

package/src/date_picker_value.ts

@@ -0,0 +1,128 @@
+// =============================================================================
+// Date picker value logic
+//
+// Values are canonical ISO strings: "YYYY-MM-DD" (date) or "YYYY-MM-DDTHH:mm"
+// (datetime). Range formats store two parts joined by "/".
+//
+// Pure string/Date logic, kept separate from the React component so it can be
+// unit-tested directly.
+// =============================================================================
+
+export type DatePickerFormat = "date" | "datetime" | "date_range" | "datetime_range";
+
+export interface DateParts {
+  y: number;
+  mo: number;
+  d: number;
+  h: number;
+  mi: number;
+}
+
+export function isRangeFormat(format: DatePickerFormat): boolean {
+  return format === "date_range" || format === "datetime_range";
+}
+
+export function hasTimeFormat(format: DatePickerFormat): boolean {
+  return format === "datetime" || format === "datetime_range";
+}
+
+export const pad = (n: number) => String(n).padStart(2, "0");
+
+// Accepts "2026-05-17" and "2026-05-17 14:30" / "2026-05-17T14:30", lenient on
+// leading zeros so partially-typed input still parses on blur.
+const PART_RE = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[ T](\d{1,2}):(\d{2}))?$/;
+
+export function parsePart(input: string): DateParts | null {
+  const match = input.trim().match(PART_RE);
+  if (!match) return null;
+  const y = Number(match[1]);
+  const mo = Number(match[2]);
+  const d = Number(match[3]);
+  const h = match[4] !== undefined ? Number(match[4]) : 0;
+  const mi = match[5] !== undefined ? Number(match[5]) : 0;
+  if (mo < 1 || mo > 12 || d < 1 || d > 31) return null;
+  if (h > 23 || mi > 59) return null;
+  // Reject impossible dates like Feb 30.
+  const probe = new Date(y, mo - 1, d);
+  if (probe.getMonth() !== mo - 1 || probe.getDate() !== d) return null;
+  return { y, mo, d, h, mi };
+}
+
+export function partsToIso(p: DateParts, hasTime: boolean): string {
+  const date = `${p.y}-${pad(p.mo)}-${pad(p.d)}`;
+  return hasTime ? `${date}T${pad(p.h)}:${pad(p.mi)}` : date;
+}
+
+export function isoToDate(iso: string): Date | null {
+  const p = parsePart(iso);
+  return p ? new Date(p.y, p.mo - 1, p.d, p.h, p.mi) : null;
+}
+
+export function dateToParts(d: Date): DateParts {
+  return {
+    y: d.getFullYear(),
+    mo: d.getMonth() + 1,
+    d: d.getDate(),
+    h: d.getHours(),
+    mi: d.getMinutes(),
+  };
+}
+
+/** Parse a typed value back to a canonical ISO string. Returns "" when blank, null when unparseable. */
+export function parseText(text: string, hasTime: boolean): string | null {
+  const trimmed = text.trim();
+  if (trimmed === "") return "";
+  const single = parsePart(trimmed);
+  return single ? partsToIso(single, hasTime) : null;
+}
+
+export function timeText(iso: string): string {
+  const p = parsePart(iso);
+  return p ? `${pad(p.h)}:${pad(p.mi)}` : "";
+}
+
+export function splitTime(time: string): { h: number; mi: number } {
+  if (!time) return { h: 0, mi: 0 };
+  const [h, mi] = time.split(":").map(Number);
+  return { h, mi };
+}
+
+/** Combine a picked calendar date with the time carried by a previous value. */
+export function withCalendarDate(date: Date, prevIso: string, hasTime: boolean): string {
+  const prev = parsePart(prevIso);
+  return partsToIso(
+    {
+      ...dateToParts(date),
+      h: hasTime && prev ? prev.h : 0,
+      mi: hasTime && prev ? prev.mi : 0,
+    },
+    hasTime,
+  );
+}
+
+/** Combine a picked "HH:mm" time with the date carried by a previous value (today if none). */
+export function withTimeOfDay(prevIso: string, time: string): string {
+  const base = parsePart(prevIso) ?? dateToParts(new Date());
+  const { h, mi } = splitTime(time);
+  return partsToIso({ y: base.y, mo: base.mo, d: base.d, h, mi }, true);
+}
+
+/** The current date as a canonical value string. */
+export function nowIso(hasTime: boolean): string {
+  return partsToIso(dateToParts(new Date()), hasTime);
+}
+
+const TIME_RE = /^(\d{1,2}):(\d{2})$/;
+
+/**
+ * Parse a loosely-typed time string into a canonical "HH:mm" string.
+ * Returns null when the input is not a valid time.
+ */
+export function parseTimeString(input: string): string | null {
+  const match = input.trim().match(TIME_RE);
+  if (!match) return null;
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (hour > 23 || minute > 59) return null;
+  return `${pad(hour)}:${match[2]}`;
+}

package/src/date_segments.test.ts

@@ -0,0 +1,206 @@
+import { describe, it, expect } from "vitest";
+import {
+  getDateLayout,
+  getTimeLayout,
+  fieldOrder,
+  to12h,
+  from12h,
+  typeDigit,
+  incrementSegment,
+  setHourField,
+  withDayPeriod,
+  displayValue,
+  valueToSegments,
+  segmentsToValue,
+  isBufferEmpty,
+  placeholderFor,
+} from "./date_segments";
+
+const empty = { year: null, month: null, day: null, hour: null, minute: null };
+
+describe("getDateLayout / fieldOrder", () => {
+  it("derives m/d/y and 12h for en-US", () => {
+    expect(fieldOrder(getDateLayout("en-US", false))).toEqual(["month", "day", "year"]);
+    const dt = getDateLayout("en-US", true);
+    expect(fieldOrder(dt)).toEqual(["month", "day", "year", "hour", "minute", "dayPeriod"]);
+    expect(dt.hour12).toBe(true);
+  });
+
+  it("derives d/m/y, 24h, and time-first datetime for vi-VN", () => {
+    expect(fieldOrder(getDateLayout("vi-VN", false))).toEqual(["day", "month", "year"]);
+    const dt = getDateLayout("vi-VN", true);
+    // Vietnamese leads with the time ("HH:mm dd/MM/yyyy") — we follow the locale.
+    expect(fieldOrder(dt)).toEqual(["hour", "minute", "day", "month", "year"]);
+    expect(dt.hour12).toBe(false);
+  });
+
+  it("derives d/m/y for en-GB and y/m/d for ja-JP", () => {
+    expect(fieldOrder(getDateLayout("en-GB", false))).toEqual(["day", "month", "year"]);
+    expect(fieldOrder(getDateLayout("ja-JP", false))).toEqual(["year", "month", "day"]);
+  });
+
+  it("emits literal separators between fields", () => {
+    const literals = getDateLayout("en-US", false).segments.filter((s) => s.kind === "literal");
+    expect(literals.length).toBeGreaterThan(0);
+  });
+});
+
+describe("to12h / from12h", () => {
+  it("maps 24h to 12h", () => {
+    expect(to12h(0)).toEqual({ h12: 12, pm: false });
+    expect(to12h(12)).toEqual({ h12: 12, pm: true });
+    expect(to12h(13)).toEqual({ h12: 1, pm: true });
+    expect(to12h(23)).toEqual({ h12: 11, pm: true });
+  });
+
+  it("maps 12h back to 24h", () => {
+    expect(from12h(12, false)).toBe(0);
+    expect(from12h(12, true)).toBe(12);
+    expect(from12h(1, true)).toBe(13);
+    expect(from12h(11, false)).toBe(11);
+  });
+});
+
+describe("typeDigit", () => {
+  it("waits for a second digit when one could still fit", () => {
+    expect(typeDigit("month", "", "1", false)).toEqual({ text: "1", value: 1, complete: false });
+    expect(typeDigit("day", "", "3", false)).toEqual({ text: "3", value: 3, complete: false });
+    expect(typeDigit("minute", "", "5", false)).toEqual({ text: "5", value: 5, complete: false });
+  });
+
+  it("auto-advances when no second digit could keep it in range", () => {
+    expect(typeDigit("month", "", "2", false)).toEqual({ text: "2", value: 2, complete: true });
+    expect(typeDigit("day", "", "4", false)).toEqual({ text: "4", value: 4, complete: true });
+    expect(typeDigit("minute", "", "6", false)).toEqual({ text: "6", value: 6, complete: true });
+    expect(typeDigit("hour", "", "3", false)).toEqual({ text: "3", value: 3, complete: true });
+    expect(typeDigit("hour", "", "2", true)).toEqual({ text: "2", value: 2, complete: true });
+  });
+
+  it("completes on the second digit", () => {
+    expect(typeDigit("month", "1", "2", false)).toEqual({ text: "12", value: 12, complete: true });
+    expect(typeDigit("minute", "5", "9", false)).toEqual({ text: "59", value: 59, complete: true });
+  });
+
+  it("restarts when the accumulated value overflows", () => {
+    expect(typeDigit("month", "1", "5", false)).toEqual({ text: "5", value: 5, complete: true });
+    expect(typeDigit("hour", "2", "5", false)).toEqual({ text: "5", value: 5, complete: true });
+  });
+
+  it("accumulates up to four digits for the year", () => {
+    expect(typeDigit("year", "", "2", false)).toEqual({ text: "2", value: 2, complete: false });
+    expect(typeDigit("year", "202", "6", false)).toEqual({
+      text: "2026",
+      value: 2026,
+      complete: true,
+    });
+    expect(typeDigit("year", "2026", "7", false)).toEqual({
+      text: "0267",
+      value: 267,
+      complete: true,
+    });
+  });
+});
+
+describe("incrementSegment", () => {
+  it("wraps within range", () => {
+    expect(incrementSegment("month", 12, 1, false)).toBe(1);
+    expect(incrementSegment("month", 1, -1, false)).toBe(12);
+    expect(incrementSegment("minute", 59, 1, false)).toBe(0);
+    expect(incrementSegment("hour", 23, 1, false)).toBe(0);
+    expect(incrementSegment("hour", 12, 1, true)).toBe(1);
+  });
+
+  it("starts from an end when empty", () => {
+    expect(incrementSegment("day", null, 1, false)).toBe(1);
+    expect(incrementSegment("day", null, -1, false)).toBe(31);
+  });
+
+  it("clamps the year instead of wrapping", () => {
+    expect(incrementSegment("year", 2026, 1, false)).toBe(2027);
+    expect(incrementSegment("year", 9999, 1, false)).toBe(9999);
+    expect(incrementSegment("year", 1, -1, false)).toBe(1);
+  });
+});
+
+describe("setHourField / withDayPeriod", () => {
+  it("keeps AM/PM when typing the hour in 12h mode", () => {
+    expect(setHourField({ ...empty, hour: 14 }, 9, true)).toBe(21); // 9 PM
+    expect(setHourField({ ...empty, hour: 9 }, 11, true)).toBe(11); // 11 AM
+  });
+
+  it("returns the typed hour as-is in 24h mode", () => {
+    expect(setHourField({ ...empty, hour: null }, 18, false)).toBe(18);
+  });
+
+  it("toggles half-day while preserving the 12h value", () => {
+    expect(withDayPeriod({ ...empty, hour: 9 }, true)).toBe(21);
+    expect(withDayPeriod({ ...empty, hour: 21 }, false)).toBe(9);
+  });
+});
+
+describe("displayValue", () => {
+  const en = getDateLayout("en-US", true);
+  const vn = getDateLayout("vi-VN", true);
+
+  it("renders the 12h hour and AM/PM for en-US", () => {
+    const buffer = { year: 2026, month: 5, day: 17, hour: 14, minute: 30 };
+    expect(displayValue("hour", buffer, en)).toBe("02");
+    expect(displayValue("dayPeriod", buffer, en)).toBe(en.pmText);
+    expect(displayValue("minute", buffer, en)).toBe("30");
+  });
+
+  it("renders the 24h hour for vi-VN", () => {
+    const buffer = { year: 2026, month: 5, day: 17, hour: 14, minute: 30 };
+    expect(displayValue("hour", buffer, vn)).toBe("14");
+  });
+
+  it("returns null for unset fields", () => {
+    expect(displayValue("year", empty, en)).toBeNull();
+    expect(displayValue("hour", empty, en)).toBeNull();
+  });
+});
+
+describe("valueToSegments / segmentsToValue round-trip", () => {
+  it("round-trips a date", () => {
+    const buffer = valueToSegments("2026-05-17", false);
+    expect(buffer).toEqual({ year: 2026, month: 5, day: 17, hour: null, minute: null });
+    expect(segmentsToValue(buffer, false)).toBe("2026-05-17");
+  });
+
+  it("round-trips a datetime", () => {
+    const buffer = valueToSegments("2026-05-17T14:30", true);
+    expect(buffer).toEqual({ year: 2026, month: 5, day: 17, hour: 14, minute: 30 });
+    expect(segmentsToValue(buffer, true)).toBe("2026-05-17T14:30");
+  });
+
+  it("returns null for incomplete buffers", () => {
+    expect(segmentsToValue({ ...empty, year: 2026, month: 5 }, false)).toBeNull();
+    expect(segmentsToValue({ year: 2026, month: 5, day: 17, hour: 14, minute: null }, true)).toBeNull();
+  });
+
+  it("rejects impossible calendar dates", () => {
+    expect(segmentsToValue({ ...empty, year: 2026, month: 2, day: 30 }, false)).toBeNull();
+  });
+
+  it("yields an empty buffer for an unparseable value", () => {
+    expect(valueToSegments("", false)).toEqual(empty);
+    expect(isBufferEmpty(valueToSegments("garbage", false), false)).toBe(true);
+  });
+});
+
+describe("placeholderFor", () => {
+  it("gives per-type placeholders", () => {
+    expect(placeholderFor("year")).toBe("yyyy");
+    expect(placeholderFor("month")).toBe("mm");
+    expect(placeholderFor("dayPeriod")).toBe("--");
+  });
+});
+
+describe("getTimeLayout", () => {
+  it("is hour/minute(+AM/PM) only, locale-driven", () => {
+    expect(fieldOrder(getTimeLayout("en-US"))).toEqual(["hour", "minute", "dayPeriod"]);
+    const vn = getTimeLayout("vi-VN");
+    expect(fieldOrder(vn)).toEqual(["hour", "minute"]);
+    expect(vn.hour12).toBe(false);
+  });
+});