cpk-ui 0.7.0 → 0.8.0-beta.1

package/components/uis/Calendar/useCalendarState.js

@@ -0,0 +1,211 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, AppState } from 'react-native';
+import { addDays, addMonths, fromDayKey, isSameDay, localNoon, startOfWeek, toDateKeyInput, toDayKey, } from './utils';
+/**
+ * Controlled first: the prop wins whenever it is not `undefined`, and the internal
+ * state is only used as the uncontrolled fallback.
+ */
+export function useControllable(controlled, initial) {
+    const [internal, setInternal] = useState(initial);
+    const isControlled = controlled !== undefined;
+    const setValue = useCallback((next) => {
+        if (!isControlled) {
+            setInternal(next);
+        }
+    }, [isControlled]);
+    return [isControlled ? controlled : internal, setValue];
+}
+/**
+ * "Today" as a local noon date that re-arms itself at local midnight and also
+ * refreshes when the app returns to the foreground, so a device that slept through
+ * midnight still moves the highlight.
+ */
+export function useToday(explicit) {
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        if (explicit !== undefined) {
+            return;
+        }
+        let timerId;
+        const refresh = () => {
+            setNow((previous) => {
+                const next = new Date();
+                return isSameDay(previous, next) ? previous : next;
+            });
+        };
+        const armMidnightTimer = () => {
+            const midnight = new Date();
+            midnight.setHours(24, 0, 0, 500);
+            timerId = setTimeout(() => {
+                refresh();
+                armMidnightTimer();
+            }, Math.max(midnight.getTime() - Date.now(), 0));
+        };
+        armMidnightTimer();
+        const subscription = AppState.addEventListener('change', (state) => {
+            if (state === 'active') {
+                refresh();
+            }
+        });
+        return () => {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+            subscription.remove();
+        };
+    }, [explicit]);
+    const source = typeof explicit === 'string' ? fromDayKey(explicit) : (explicit ?? now);
+    return useMemo(() => localNoon(source.getFullYear(), source.getMonth(), source.getDate()), [source]);
+}
+/** Every spring and timing in the component collapses to duration 0 when this is on. */
+export function useReduceMotion() {
+    const [reduceMotion, setReduceMotion] = useState(false);
+    const currentRef = useRef(false);
+    useEffect(() => {
+        let mounted = true;
+        // Only ever schedules a render when the setting actually differs.
+        const apply = (enabled) => {
+            if (!mounted || currentRef.current === enabled) {
+                return;
+            }
+            currentRef.current = enabled;
+            setReduceMotion(enabled);
+        };
+        AccessibilityInfo.isReduceMotionEnabled()
+            .then(apply)
+            .catch(() => undefined);
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', apply);
+        return () => {
+            mounted = false;
+            subscription.remove();
+        };
+    }, []);
+    return reduceMotion;
+}
+let disabledVersionSeq = 0;
+/**
+ * Precedence, first match wins:
+ * `marker.disabled` → `disabledDates` → `minDate`/`maxDate` → `isDateDisabled`.
+ * Range checks are lexicographic string compares, which are allocation free and
+ * timezone proof because `yyyy-MM-dd` sorts chronologically.
+ */
+export function useDisabledState(args) {
+    const { minDate, maxDate, disabledDates, isDateDisabled } = args;
+    const minKey = minDate == null ? null : toDateKeyInput(minDate);
+    const maxKey = maxDate == null ? null : toDateKeyInput(maxDate);
+    const disabledSet = useMemo(() => {
+        if (!disabledDates) {
+            return null;
+        }
+        return Array.isArray(disabledDates)
+            ? new Set(disabledDates)
+            : disabledDates;
+    }, [disabledDates]);
+    const version = useMemo(() => {
+        disabledVersionSeq += 1;
+        return disabledVersionSeq;
+    }, [minKey, maxKey, disabledSet, isDateDisabled]);
+    const resolver = useCallback((day, marker) => {
+        if (marker?.disabled === true) {
+            return true;
+        }
+        if (disabledSet?.has(day.key)) {
+            return true;
+        }
+        if (minKey !== null && day.key < minKey) {
+            return true;
+        }
+        if (maxKey !== null && day.key > maxKey) {
+            return true;
+        }
+        if (isDateDisabled) {
+            return isDateDisabled(day.date, day.key);
+        }
+        return false;
+    }, [disabledSet, isDateDisabled, maxKey, minKey]);
+    return { resolver, version, minKey, maxKey };
+}
+/**
+ * One handler covers the whole grid. Moving past a page edge simply targets a day
+ * outside the mounted page, and the caller pages to it while keeping focus.
+ */
+export function resolveKeyboardAction(args) {
+    const { key, shiftKey, focusedKey, weekStart, isRTL, mode } = args;
+    const focused = fromDayKey(focusedKey);
+    const horizontal = isRTL ? -1 : 1;
+    const move = (date) => ({
+        type: 'move',
+        key: toDayKey(date),
+    });
+    switch (key) {
+        case 'ArrowLeft':
+            return move(addDays(focused, -horizontal));
+        case 'ArrowRight':
+            return move(addDays(focused, horizontal));
+        case 'ArrowUp':
+            return move(addDays(focused, -7));
+        case 'ArrowDown':
+            return move(addDays(focused, 7));
+        case 'Home':
+            return move(startOfWeek(focused, weekStart));
+        case 'End':
+            return move(addDays(startOfWeek(focused, weekStart), 6));
+        case 'PageUp':
+            return shiftKey
+                ? move(addMonths(focused, -12))
+                : move(mode === 'week' ? addDays(focused, -7) : addMonths(focused, -1));
+        case 'PageDown':
+            return shiftKey
+                ? move(addMonths(focused, 12))
+                : move(mode === 'week' ? addDays(focused, 7) : addMonths(focused, 1));
+        case 'Enter':
+        case ' ':
+        case 'Spacebar':
+            return { type: 'select' };
+        default:
+            return null;
+    }
+}
+const isShallowEqual = (a, b) => {
+    if (a === b) {
+        return true;
+    }
+    if (!a || !b) {
+        return false;
+    }
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+        return false;
+    }
+    for (const key of aKeys) {
+        if (a[key] !==
+            b[key]) {
+            return false;
+        }
+    }
+    return true;
+};
+/**
+ * Keeps the previous object for as long as a SHALLOW value compare says nothing
+ * changed.
+ *
+ * `labels`, `styles` and `formatters` are written as inline object literals at
+ * almost every call site — `labels={{today: t('calendar.today')}}` is the only
+ * way to localize the component — and a fresh identity there invalidates
+ * `chrome`, which re-renders all 42 day cells on every parent render. `palette`
+ * already compared by value for exactly this reason; these three did not.
+ *
+ * One level deep only. A caller writing `styles={{dayText: {fontWeight: '600'}}}`
+ * fully inline still allocates a new nested object every render and still pays;
+ * hoist the inner style object or wrap it in `useMemo`.
+ */
+export function useShallowStable(value) {
+    const ref = useRef(value);
+    return useMemo(() => {
+        if (!isShallowEqual(ref.current, value)) {
+            ref.current = value;
+        }
+        return ref.current;
+    }, [value]);
+}

package/components/uis/Calendar/utils.d.ts

@@ -0,0 +1,114 @@
+import type { CalendarDateKey, CalendarDayModel, CalendarFormatters, CalendarMarker, CalendarMetrics, CalendarMonthKey, CalendarPageKey, CalendarSizeType, CalendarViewMode, WeekStart } from './types';
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Every calendar `Date` in this component is anchored at LOCAL NOON.
+ * Local midnight does not exist in zones whose DST transition happens at 00:00
+ * (America/Santiago, America/Havana, …) and noon is more than 11 hours away from
+ * every real world transition, so no shift can move a date to another calendar day.
+ */
+export declare const localNoon: (year: number, month0: number, day: number) => Date;
+export declare const toDayKey: (date: Date) => CalendarDateKey;
+export declare const toMonthKey: (date: Date) => CalendarMonthKey;
+export declare const isMonthKey: (key: string) => boolean;
+/** Field wise construction. Never `new Date('2026-08-24')`, which ECMA-262 parses as UTC. */
+export declare const fromDayKey: (key: CalendarDateKey) => Date;
+export declare const fromMonthKey: (key: CalendarMonthKey) => Date;
+/** Field arithmetic, so month, year and DST boundaries normalize correctly. */
+export declare const addDays: (date: Date, amount: number) => Date;
+export declare const daysInMonth: (date: Date) => number;
+export declare const startOfMonth: (date: Date) => Date;
+export declare const addMonths: (date: Date, amount: number) => Date;
+export declare const startOfWeek: (date: Date, weekStart: WeekStart) => Date;
+/** The year is compared. Comparing only month and date highlights the same day of any year. */
+export declare const isSameDay: (a: Date, b: Date) => boolean;
+/**
+ * Safe because both dates are local noon: a DST shift of one hour is 0.042 days,
+ * which `Math.round` can never turn into a different day count.
+ */
+export declare const diffInCalendarDays: (a: Date, b: Date) => number;
+export declare const weeksInMonth: (date: Date, weekStart: WeekStart) => number;
+/**
+ * ISO 8601 numbering when `weekStart` is Monday, otherwise the
+ * "the week containing Jan 1 is week 1" convention that US/KR/JP calendars show.
+ */
+export declare const getWeekNumber: (date: Date, weekStart: WeekStart) => number;
+export declare const regionOf: (locale: string) => string;
+export declare const resolveWeekStart: (locale: string) => WeekStart;
+/** Accepts a `Date` or an already canonical key and always answers with a day key. */
+export declare const toDateKeyInput: (value: Date | CalendarDateKey) => CalendarDateKey;
+/**
+ * Resolves a page anchor to the first rendered day of that page.
+ * Month pages anchor on the first of the month, week pages on the week start.
+ */
+export declare const pageFirstDate: (pageKey: CalendarPageKey, mode: CalendarViewMode, weekStart: WeekStart) => Date;
+/** The last day that logically belongs to a page, ignoring the out of month padding. */
+export declare const pageLastDate: (pageKey: CalendarPageKey, mode: CalendarViewMode, weekStart: WeekStart, monthsToShow: number) => Date;
+export declare const toPageKey: (date: Date, mode: CalendarViewMode, weekStart: WeekStart) => CalendarPageKey;
+export declare const normalizePageKey: (value: Date | CalendarPageKey, mode: CalendarViewMode, weekStart: WeekStart, monthsToShow: number) => CalendarPageKey;
+/** Steps a page anchor by `delta` pages: months in month mode, weeks in week mode. */
+export declare const addPages: (pageKey: CalendarPageKey, delta: number, mode: CalendarViewMode, weekStart: WeekStart, monthsToShow: number) => CalendarPageKey;
+export declare function buildMonthGrid(month: Date, weekStart: WeekStart, fixedWeeks: boolean, showWeekNumbers: boolean): readonly CalendarDayModel[];
+export declare function buildWeekGrid(anchor: Date, weekStart: WeekStart, showWeekNumbers: boolean): readonly CalendarDayModel[];
+/**
+ * One rendered week. Frozen and cached, so a row can be compared by identity alone
+ * and the parallel label arrays never have to be re-sliced during a render.
+ */
+export type CalendarGridRow = Readonly<{
+    weekIndex: number;
+    weekNumber: number;
+    days: readonly CalendarDayModel[];
+    dayLabels: readonly string[];
+    a11yLabels: readonly string[];
+}>;
+export type CalendarGrid = Readonly<{
+    days: readonly CalendarDayModel[];
+    rows: readonly CalendarGridRow[];
+    rowCount: number;
+    firstKey: CalendarDateKey;
+    lastKey: CalendarDateKey;
+}>;
+export type CalendarGridRequest = {
+    pageKey: CalendarPageKey;
+    mode: CalendarViewMode;
+    weekStart: WeekStart;
+    fixedWeeks: boolean;
+    showWeekNumbers: boolean;
+    locale: string;
+    formatters: CalendarFormatters;
+    formattersId: string;
+};
+/**
+ * Module level LRU. Re-visiting a page (swiping back and forth) is a `Map.get`,
+ * so `Intl.DateTimeFormat#format` runs at most once per (page, locale) pair.
+ */
+export declare function getCalendarGrid(request: CalendarGridRequest): CalendarGrid;
+/** Test seam. Keeps the LRU from leaking state between test files. */
+export declare const clearCalendarGridCache: () => void;
+/**
+ * True when the row's 7 keys contain `key`.
+ * Keys are sorted and consecutive, so this is two string compares, never a scan.
+ */
+export declare const rowHasKey: (days: readonly CalendarDayModel[], key: string | null) => boolean;
+/** Identity first, then a shallow value compare so a rebuilt but equal marker still bails. */
+export declare function isSameMarker(a?: CalendarMarker, b?: CalendarMarker): boolean;
+type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function parseColor(color: string): Rgb | null;
+/** WCAG relative luminance, or `null` when the colour cannot be parsed. */
+export declare function relativeLuminance(color: string): number | null;
+/**
+ * Picks the readable label colour for a background.
+ * The 0.45 threshold makes a saturated yellow resolve to the dark label.
+ */
+export declare function readableTextOn(background: string, light: string, dark: string): string;
+/**
+ * There is no measure pass in the vertical axis: every value below is a pure
+ * function of `size` and the device font scale, so the grid height is identical
+ * for every month and a swipe causes zero layout thrash.
+ */
+export declare function resolveMetrics(size: CalendarSizeType, fontScale: number, maxFontSizeMultiplier: number): CalendarMetrics;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/components/uis/Calendar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/utils.ts"],"names":[],"mappings":"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"}