@lotics/ui 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -104,6 +104,7 @@
     "./page_header": "./src/page_header.tsx",
     "./pager_view": "./src/pager_view.tsx",
     "./date_picker": "./src/date_picker.tsx",
+    "./date_filter": "./src/date_filter.tsx",
     "./time_picker": "./src/time_picker.tsx",
     "./time_field": "./src/time_field.tsx",
     "./date_calendar": "./src/date_calendar.tsx",

package/src/date_filter.tsx

@@ -0,0 +1,389 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { MenuButton } from "./menu_button";
+import { Calendar, CalendarRangeValue, CalendarRef } from "./date_calendar";
+import { TimeField } from "./time_field";
+import { Switch } from "./switch";
+import { useScreenSize } from "./use_screen_size";
+import { SegmentLabels } from "./date_segments";
+import { PresetId, PRESET_IDS, getPresetValue } from "./date_filter_presets";
+
+type SelectionMode = "single" | "range";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface DateFilterValue {
+  start: { date: Date | null; time: string | null };
+  end: { date: Date | null; time: string | null };
+}
+
+/**
+ * Translated labels. Extends `SegmentLabels` (consumed by the time fields);
+ * the rest are the preset names and the range-display strings. The frontend
+ * feeds these from `useDateFilterLabels`; standalone apps pass literals.
+ */
+export interface DateFilterLabels extends SegmentLabels {
+  today: string;
+  yesterday: string;
+  tomorrow: string;
+  thisWeek: string;
+  thisMonth: string;
+  lastMonth: string;
+  custom: string;
+  from: string;
+  to: string;
+  selectDateRange: string;
+  selectDate: string;
+}
+
+const DEFAULT_LABELS: DateFilterLabels = {
+  year: "Year",
+  month: "Month",
+  day: "Day",
+  hour: "Hour",
+  minute: "Minute",
+  dayPeriod: "AM/PM",
+  today: "Today",
+  yesterday: "Yesterday",
+  tomorrow: "Tomorrow",
+  thisWeek: "This week",
+  thisMonth: "This month",
+  lastMonth: "Last month",
+  custom: "Custom",
+  from: "From",
+  to: "To",
+  selectDateRange: "Select date range",
+  selectDate: "Select date",
+};
+
+export interface DateFilterProps {
+  value: DateFilterValue;
+  onValueChange: (value: DateFilterValue) => void;
+  includeTime?: boolean;
+  /** Translated labels. Defaults to English. */
+  labels?: Partial<DateFilterLabels>;
+  /** BCP-47 locale for the calendar and date display. Defaults to "en-US". */
+  locale?: string;
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function presetLabel(id: PresetId, labels: DateFilterLabels): string {
+  switch (id) {
+    case "today":
+      return labels.today;
+    case "yesterday":
+      return labels.yesterday;
+    case "tomorrow":
+      return labels.tomorrow;
+    case "this_week":
+      return labels.thisWeek;
+    case "this_month":
+      return labels.thisMonth;
+    case "last_month":
+      return labels.lastMonth;
+    case "custom":
+      return labels.custom;
+  }
+}
+
+function formatDateDisplay(date: Date | null, locale: string | undefined): string {
+  if (!date) return "";
+  const isoDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    }).format(date);
+  } catch {
+    return isoDate;
+  }
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export function DateFilter(props: DateFilterProps) {
+  const { value, onValueChange, includeTime = false, locale } = props;
+  const labels = useMemo<DateFilterLabels>(
+    () => ({ ...DEFAULT_LABELS, ...props.labels }),
+    [props.labels],
+  );
+  const screenSize = useScreenSize();
+  const calendarRef = useRef<CalendarRef>(null);
+  const [selectionMode, setSelectionMode] = useState<SelectionMode>(() => {
+    if (value.start.date && value.end.date) {
+      if (value.start.date.toDateString() !== value.end.date.toDateString()) {
+        return "range";
+      }
+    }
+    return "single";
+  });
+
+  const calendarValue: CalendarRangeValue = useMemo(
+    () => ({ start: value.start.date, end: value.end.date }),
+    [value.start.date, value.end.date],
+  );
+
+  const handleCalendarChange = useCallback(
+    (newValue: CalendarRangeValue) => {
+      // In single mode, one click selects a single date immediately
+      if (selectionMode === "single" && newValue.start && !newValue.end) {
+        onValueChange({
+          start: { date: newValue.start, time: value.start.time },
+          end: { date: newValue.start, time: value.end.time },
+        });
+        return;
+      }
+      onValueChange({
+        start: { date: newValue.start, time: value.start.time },
+        end: { date: newValue.end, time: value.end.time },
+      });
+    },
+    [onValueChange, value.start.time, value.end.time, selectionMode],
+  );
+
+  const handleModeChange = useCallback(
+    (isRange: boolean) => {
+      const newMode: SelectionMode = isRange ? "range" : "single";
+      setSelectionMode(newMode);
+
+      // Switching to single: collapse range to start date
+      if (newMode === "single" && value.start.date) {
+        onValueChange({
+          start: value.start,
+          end: { date: value.start.date, time: value.start.time },
+        });
+      }
+    },
+    [value, onValueChange],
+  );
+
+  const handleStartTimeChange = useCallback(
+    (time: string) => {
+      onValueChange({ ...value, start: { ...value.start, time: time || null } });
+    },
+    [onValueChange, value],
+  );
+
+  const handleEndTimeChange = useCallback(
+    (time: string) => {
+      onValueChange({ ...value, end: { ...value.end, time: time || null } });
+    },
+    [onValueChange, value],
+  );
+
+  // Which preset (if any) the current value matches.
+  const activePresetId = useMemo((): PresetId | null => {
+    if (!value.start.date && !value.end.date) return null;
+    const now = new Date();
+    for (const id of PRESET_IDS) {
+      const presetValue = getPresetValue(id, now);
+      if (!presetValue) continue; // "custom"
+      if (
+        value.start.date?.toDateString() === presetValue.start.date?.toDateString() &&
+        value.end.date?.toDateString() === presetValue.end.date?.toDateString()
+      ) {
+        return id;
+      }
+    }
+    return "custom";
+  }, [value]);
+
+  const handlePresetSelect = useCallback(
+    (id: PresetId) => {
+      // Re-clicking the active preset clears the filter
+      if (activePresetId === id) {
+        onValueChange({ start: { date: null, time: null }, end: { date: null, time: null } });
+        return;
+      }
+
+      const presetValue = getPresetValue(id, new Date());
+      if (!presetValue) {
+        // "Custom" clears the value so the user can select manually
+        onValueChange({ start: { date: null, time: null }, end: { date: null, time: null } });
+        return;
+      }
+
+      // Auto-switch to range mode for multi-day presets
+      if (presetValue.start.date && presetValue.end.date) {
+        const isSingleDay =
+          presetValue.start.date.toDateString() === presetValue.end.date.toDateString();
+        if (!isSingleDay && selectionMode === "single") setSelectionMode("range");
+      }
+
+      onValueChange(presetValue);
+
+      if (presetValue.start.date) {
+        calendarRef.current?.navigateToMonth(
+          presetValue.start.date.getFullYear(),
+          presetValue.start.date.getMonth(),
+        );
+      }
+    },
+    [onValueChange, activePresetId, selectionMode],
+  );
+
+  const renderPreset = (id: PresetId) => {
+    const isActive = activePresetId === id;
+    return (
+      <MenuButton
+        key={id}
+        title={
+          <Text size="sm" color={isActive ? "inverted" : "default"}>
+            {presetLabel(id, labels)}
+          </Text>
+        }
+        onPress={() => handlePresetSelect(id)}
+        style={[styles.presetItem, isActive && styles.presetItemActive]}
+      />
+    );
+  };
+
+  return (
+    <View style={[styles.container, { flexDirection: screenSize.small ? "column" : "row" }]}>
+      {/* Presets sidebar (desktop only) */}
+      {!screenSize.small && (
+        <View style={styles.presetsSidebar}>{PRESET_IDS.map(renderPreset)}</View>
+      )}
+
+      {/* Calendar and time pickers */}
+      <View style={styles.mainContent}>
+        <Calendar<"range">
+          ref={calendarRef}
+          mode="range"
+          value={calendarValue}
+          onValueChange={handleCalendarChange}
+          locale={locale}
+        />
+
+        {selectionMode === "range" ? (
+          <View style={styles.rangeDisplay}>
+            {value.start.date ? (
+              <View style={styles.rangeItem}>
+                <Text size="xs" color="zinc-500">
+                  {labels.from}
+                </Text>
+                <Text size="sm" weight="medium">
+                  {formatDateDisplay(value.start.date, locale) || labels.selectDate}
+                </Text>
+                {includeTime && (
+                  <View style={{ marginTop: 4 }}>
+                    <TimeField
+                      value={value.start.time || ""}
+                      onChange={handleStartTimeChange}
+                      segmentLabels={labels}
+                      locale={locale}
+                    />
+                  </View>
+                )}
+              </View>
+            ) : (
+              <View style={styles.rangeItem} />
+            )}
+            {value.end.date ? (
+              <View style={styles.rangeItem}>
+                <Text size="xs" color="zinc-500">
+                  {labels.to}
+                </Text>
+                <Text size="sm" weight="medium">
+                  {formatDateDisplay(value.end.date, locale) || labels.selectDate}
+                </Text>
+                {includeTime && value.end.date && (
+                  <View style={{ marginTop: 4 }}>
+                    <TimeField
+                      value={value.end.time || ""}
+                      onChange={handleEndTimeChange}
+                      segmentLabels={labels}
+                      locale={locale}
+                    />
+                  </View>
+                )}
+              </View>
+            ) : (
+              <View style={styles.rangeItem} />
+            )}
+          </View>
+        ) : null}
+
+        <View style={styles.modeToggle}>
+          <Switch value={selectionMode === "range"} onChange={handleModeChange} />
+          <Text size="sm" color="muted">
+            {labels.selectDateRange}
+          </Text>
+        </View>
+      </View>
+
+      {/* Presets (mobile only - below calendar) */}
+      {screenSize.small && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.presetsScrollView}
+          contentContainerStyle={styles.presetsScrollContent}
+        >
+          {PRESET_IDS.map(renderPreset)}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.white,
+    borderRadius: 8,
+    gap: 16,
+  },
+  presetsSidebar: {
+    minWidth: 140,
+  },
+  presetsScrollView: {
+    borderTopWidth: 1,
+    borderTopColor: colors.zinc["200"],
+    paddingTop: 8,
+  },
+  presetsScrollContent: {
+    flexDirection: "row",
+    gap: 4,
+  },
+  presetItem: {
+    marginHorizontal: 0,
+    marginBottom: 2,
+  },
+  presetItemActive: {
+    backgroundColor: colors.zinc["800"],
+  },
+  mainContent: {
+    flex: 1,
+  },
+  modeToggle: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 8,
+  },
+  rangeDisplay: {
+    flexDirection: "row",
+    gap: 16,
+    paddingTop: 8,
+  },
+  rangeItem: {
+    flex: 1,
+    paddingLeft: 8,
+  },
+});

package/src/date_filter_presets.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from "vitest";
+import { getPresetValue, PRESET_IDS, type PresetId } from "./date_filter_presets";
+
+// Wednesday, 10 June 2026, 14:30 — a fixed clock so every range is deterministic.
+const NOW = new Date(2026, 5, 10, 14, 30, 0, 0);
+
+function ymd(d: Date | null): string {
+  if (!d) return "null";
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+describe("getPresetValue", () => {
+  it("today spans the start to end of the current day", () => {
+    const v = getPresetValue("today", NOW)!;
+    expect(ymd(v.start.date)).toBe("2026-06-10");
+    expect(ymd(v.end.date)).toBe("2026-06-10");
+    expect(v.start.date!.getHours()).toBe(0);
+    expect(v.start.date!.getMilliseconds()).toBe(0);
+    expect(v.end.date!.getHours()).toBe(23);
+    expect(v.end.date!.getMinutes()).toBe(59);
+    expect(v.end.date!.getMilliseconds()).toBe(999);
+  });
+
+  it("yesterday and tomorrow shift by one day", () => {
+    expect(ymd(getPresetValue("yesterday", NOW)!.start.date)).toBe("2026-06-09");
+    expect(ymd(getPresetValue("yesterday", NOW)!.end.date)).toBe("2026-06-09");
+    expect(ymd(getPresetValue("tomorrow", NOW)!.start.date)).toBe("2026-06-11");
+    expect(ymd(getPresetValue("tomorrow", NOW)!.end.date)).toBe("2026-06-11");
+  });
+
+  it("this_week runs Monday → Sunday around now", () => {
+    const v = getPresetValue("this_week", NOW)!;
+    expect(ymd(v.start.date)).toBe("2026-06-08"); // Monday
+    expect(v.start.date!.getDay()).toBe(1);
+    expect(ymd(v.end.date)).toBe("2026-06-14"); // Sunday
+    expect(v.end.date!.getDay()).toBe(0);
+  });
+
+  it("this_month covers the whole calendar month", () => {
+    const v = getPresetValue("this_month", NOW)!;
+    expect(ymd(v.start.date)).toBe("2026-06-01");
+    expect(ymd(v.end.date)).toBe("2026-06-30");
+  });
+
+  it("last_month covers the previous calendar month", () => {
+    const v = getPresetValue("last_month", NOW)!;
+    expect(ymd(v.start.date)).toBe("2026-05-01");
+    expect(ymd(v.end.date)).toBe("2026-05-31");
+  });
+
+  it("custom carries no range", () => {
+    expect(getPresetValue("custom", NOW)).toBeNull();
+  });
+
+  it("every preset id resolves (only custom is null)", () => {
+    for (const id of PRESET_IDS) {
+      const v = getPresetValue(id as PresetId, NOW);
+      if (id === "custom") expect(v).toBeNull();
+      else expect(v).not.toBeNull();
+    }
+  });
+});

package/src/date_filter_presets.ts

@@ -0,0 +1,100 @@
+import type { DateFilterValue } from "./date_filter";
+
+// Pure preset-range math for DateFilter. Kept free of React/RN so it can be
+// unit-tested deterministically: every range is computed from an injected
+// `now`, never an ambient clock.
+
+export type PresetId =
+  | "custom"
+  | "today"
+  | "yesterday"
+  | "tomorrow"
+  | "this_week"
+  | "this_month"
+  | "last_month";
+
+/** Display order. "custom" carries no range — it clears the value. */
+export const PRESET_IDS: PresetId[] = [
+  "today",
+  "yesterday",
+  "tomorrow",
+  "this_week",
+  "this_month",
+  "last_month",
+  "custom",
+];
+
+function startOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+function endOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(23, 59, 59, 999);
+  return d;
+}
+
+function startOfWeek(date: Date): Date {
+  const d = new Date(date);
+  const day = d.getDay();
+  const diff = d.getDate() - day + (day === 0 ? -6 : 1); // Monday is first day
+  d.setDate(diff);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+function endOfWeek(date: Date): Date {
+  const start = startOfWeek(date);
+  const end = new Date(start);
+  end.setDate(end.getDate() + 6);
+  end.setHours(23, 59, 59, 999);
+  return end;
+}
+
+function startOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function endOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59, 999);
+}
+
+function range(start: Date, end: Date): DateFilterValue {
+  return { start: { date: start, time: null }, end: { date: end, time: null } };
+}
+
+/**
+ * Resolve a preset to a concrete date range relative to `now`. Returns `null`
+ * for "custom" (no range — the caller clears the value so the user picks
+ * manually). The boundary math is identical to the view-page filter so a
+ * resolved range round-trips back to the same preset.
+ */
+export function getPresetValue(id: PresetId, now: Date): DateFilterValue | null {
+  switch (id) {
+    case "today":
+      return range(startOfDay(now), endOfDay(now));
+    case "yesterday": {
+      const d = new Date(now);
+      d.setDate(d.getDate() - 1);
+      return range(startOfDay(d), endOfDay(d));
+    }
+    case "tomorrow": {
+      const d = new Date(now);
+      d.setDate(d.getDate() + 1);
+      return range(startOfDay(d), endOfDay(d));
+    }
+    case "this_week":
+      return range(startOfWeek(now), endOfWeek(now));
+    case "this_month":
+      return range(startOfMonth(now), endOfMonth(now));
+    case "last_month": {
+      const d = new Date(now);
+      d.setMonth(d.getMonth() - 1);
+      return range(startOfMonth(d), endOfMonth(d));
+    }
+    case "custom":
+      return null;
+  }
+}