react-native-bikram-sambat 0.1.0

package/src/components/NepaliRangePicker/RangePickerModal.tsx

@@ -0,0 +1,336 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import type { BSDateValue } from '../../core/types';
+import { useCalendarTheme } from '../../theme';
+import { safeFormatBSDate, getSafeInitialBSDate } from '../../utils';
+import { NepaliCalendar } from '../NepaliCalendar';
+import type { RangePickerModalProps, DateRangeValue } from './types';
+import { selectRangeDate } from './range-utils';
+
+function getInitialTempRange(
+  value: DateRangeValue | undefined,
+  defaultValue: DateRangeValue | undefined
+): DateRangeValue {
+  const start = value?.start ? getSafeInitialBSDate(value.start, undefined) : null;
+  const end = value?.end ? getSafeInitialBSDate(value.end, undefined) : null;
+
+  if (start) {
+    return { start, end };
+  }
+
+  const defStart = defaultValue?.start
+    ? getSafeInitialBSDate(defaultValue.start, undefined)
+    : null;
+  const defEnd = defaultValue?.end
+    ? getSafeInitialBSDate(defaultValue.end, undefined)
+    : null;
+
+  if (defStart) {
+    return { start: defStart, end: defEnd };
+  }
+
+  return { start: null, end: null };
+}
+
+export function RangePickerModal({
+  visible,
+  value,
+  defaultValue,
+  onChange,
+  onConfirm,
+  onCancel,
+  onClose,
+  onClear,
+  locale,
+  numerals,
+  minDate,
+  maxDate,
+  markedDates,
+  disabledDates,
+  weekStartsOn,
+  theme,
+  colorScheme,
+  title = 'Select Date Range',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  clearText = 'Clear',
+  allowSameDay = true,
+  testID,
+}: RangePickerModalProps) {
+  const calendarTheme = useCalendarTheme({ colorScheme, theme });
+
+  const [tempRange, setTempRange] = useState<DateRangeValue>(() =>
+    getInitialTempRange(value, defaultValue)
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setTempRange(getInitialTempRange(value, defaultValue));
+    }
+  }, [visible, value, defaultValue]);
+
+  const handleDateSelect = useCallback(
+    (date: BSDateValue) => {
+      setTempRange((prev) => selectRangeDate(prev, date, { allowSameDay }));
+    },
+    [allowSameDay]
+  );
+
+  const handleConfirm = useCallback(() => {
+    if (!tempRange.start) return;
+    onConfirm?.(tempRange);
+    onChange?.(tempRange);
+    onClose?.();
+  }, [tempRange, onConfirm, onChange, onClose]);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onClose?.();
+  }, [onCancel, onClose]);
+
+  const handleClear = useCallback(() => {
+    setTempRange({ start: null, end: null });
+    onClear?.();
+  }, [onClear]);
+
+  const handleBackdropPress = useCallback(() => {
+    onCancel?.();
+    onClose?.();
+  }, [onCancel, onClose]);
+
+  const rangeSummary = useMemo(() => {
+    const startStr = tempRange.start
+      ? safeFormatBSDate(tempRange.start, 'yyyy-MM-dd', locale, numerals)
+      : null;
+    const endStr = tempRange.end
+      ? safeFormatBSDate(tempRange.end, 'yyyy-MM-dd', locale, numerals)
+      : null;
+
+    if (startStr && endStr) return `${startStr} → ${endStr}`;
+    if (startStr) return `${startStr} → ...`;
+    return `... → ...`;
+  }, [tempRange, locale, numerals]);
+
+  const isConfirmDisabled = tempRange.start == null || tempRange.end == null;
+
+  const modalContent = useMemo(
+    () => (
+      <View
+        style={[
+          styles.modalContent,
+          { backgroundColor: calendarTheme.colors.modalBackground },
+        ]}
+        testID={testID}
+      >
+        <Text
+          style={[
+            styles.title,
+            {
+              color: calendarTheme.colors.text,
+              borderBottomColor: calendarTheme.colors.border,
+            },
+          ]}
+        >
+          {title}
+        </Text>
+
+        <View
+          style={[
+            styles.rangeSummary,
+            { borderBottomColor: calendarTheme.colors.border },
+          ]}
+        >
+          <Text style={[styles.rangeText, { color: calendarTheme.colors.primary }]}>
+            {rangeSummary}
+          </Text>
+        </View>
+
+        <View style={styles.calendarWrapper}>
+          <NepaliCalendar
+            value={tempRange.start}
+            onChange={handleDateSelect}
+            locale={locale}
+            numerals={numerals}
+            minDate={minDate}
+            maxDate={maxDate}
+            markedDates={markedDates}
+            disabledDates={disabledDates}
+            weekStartsOn={weekStartsOn}
+            theme={theme}
+            colorScheme={colorScheme}
+            rangeValue={tempRange}
+          />
+        </View>
+
+        <View
+          style={[
+            styles.buttonRow,
+            { borderTopColor: calendarTheme.colors.border },
+          ]}
+        >
+          <Pressable
+            style={[styles.button, styles.clearButton]}
+            onPress={handleClear}
+            accessibilityRole="button"
+            accessibilityLabel="Clear selected date range"
+          >
+            <Text style={[styles.clearText, { color: calendarTheme.colors.danger }]}>
+              {clearText}
+            </Text>
+          </Pressable>
+
+          <Pressable
+            style={[styles.button, styles.cancelButton]}
+            onPress={handleCancel}
+            accessibilityRole="button"
+            accessibilityLabel="Cancel date range selection"
+          >
+            <Text style={[styles.cancelText, { color: calendarTheme.colors.mutedText }]}>
+              {cancelText}
+            </Text>
+          </Pressable>
+
+          <Pressable
+            style={[
+              styles.button,
+              {
+                backgroundColor: isConfirmDisabled
+                  ? calendarTheme.colors.disabledText
+                  : calendarTheme.colors.primary,
+              },
+            ]}
+            onPress={handleConfirm}
+            disabled={isConfirmDisabled}
+            accessibilityRole="button"
+            accessibilityLabel="Confirm selected date range"
+            accessibilityState={{ disabled: isConfirmDisabled }}
+          >
+            <Text
+              style={[
+                styles.confirmText,
+                { color: calendarTheme.colors.primaryText },
+              ]}
+            >
+              {confirmText}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    ),
+    [
+      tempRange,
+      title,
+      rangeSummary,
+      locale,
+      numerals,
+      minDate,
+      maxDate,
+      markedDates,
+      disabledDates,
+      weekStartsOn,
+      theme,
+      colorScheme,
+      testID,
+      clearText,
+      cancelText,
+      confirmText,
+      isConfirmDisabled,
+      calendarTheme,
+      handleClear,
+      handleCancel,
+      handleConfirm,
+      handleDateSelect,
+    ]
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={handleCancel}
+    >
+      <TouchableWithoutFeedback onPress={handleBackdropPress}>
+        <View style={[styles.backdrop, { backgroundColor: calendarTheme.colors.overlay }]}>
+          <TouchableWithoutFeedback>{modalContent}</TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  modalContent: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    width: '100%',
+    maxWidth: 400,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  rangeSummary: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    alignItems: 'center',
+  },
+  rangeText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  calendarWrapper: {
+    padding: 8,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 10,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    minWidth: 70,
+    alignItems: 'center',
+  },
+  clearButton: {
+    backgroundColor: 'transparent',
+  },
+  cancelButton: {
+    backgroundColor: 'transparent',
+  },
+  clearText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  cancelText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  confirmText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+});

package/src/components/NepaliRangePicker/index.ts

@@ -0,0 +1,11 @@
+export { NepaliRangePicker } from './NepaliRangePicker';
+export { RangePickerModal } from './RangePickerModal';
+export type { NepaliRangePickerProps, RangePickerModalProps, DateRangeValue } from './types';
+export {
+  isDateInRange,
+  isRangeStart,
+  isRangeEnd,
+  normalizeRange,
+  selectRangeDate,
+  getRangeDateKey,
+} from './range-utils';

package/src/components/NepaliRangePicker/range-utils.ts

@@ -0,0 +1,75 @@
+import type { BSDateValue } from '../../core/types';
+import { compareBS } from '../../core';
+import type { DateRangeValue } from './types';
+
+export function isDateInRange(
+  date: BSDateValue,
+  range: DateRangeValue
+): boolean {
+  if (!range.start || !range.end) return false;
+  const cmpStart = compareBS(date, range.start);
+  const cmpEnd = compareBS(date, range.end);
+  return cmpStart >= 0 && cmpEnd <= 0;
+}
+
+export function isRangeStart(
+  date: BSDateValue,
+  range: DateRangeValue
+): boolean {
+  if (!range.start) return false;
+  return compareBS(date, range.start) === 0;
+}
+
+export function isRangeEnd(
+  date: BSDateValue,
+  range: DateRangeValue
+): boolean {
+  if (!range.end) return false;
+  return compareBS(date, range.end) === 0;
+}
+
+export function normalizeRange(
+  start: BSDateValue,
+  end: BSDateValue,
+  options?: { allowSameDay?: boolean }
+): DateRangeValue {
+  const allowSameDay = options?.allowSameDay ?? true;
+
+  if (!allowSameDay && compareBS(start, end) === 0) {
+    return { start, end: null };
+  }
+
+  if (compareBS(start, end) <= 0) {
+    return { start, end };
+  }
+
+  return { start: end, end: start };
+}
+
+export function selectRangeDate(
+  currentRange: DateRangeValue,
+  date: BSDateValue,
+  options?: { allowSameDay?: boolean }
+): DateRangeValue {
+  const allowSameDay = options?.allowSameDay ?? true;
+
+  if (!currentRange.start) {
+    return { start: date, end: null };
+  }
+
+  if (!currentRange.end) {
+    return normalizeRange(currentRange.start, date, { allowSameDay });
+  }
+
+  return { start: date, end: null };
+}
+
+export function getRangeDateKey(
+  range: DateRangeValue,
+  date: BSDateValue
+): 'start' | 'end' | 'in-range' | 'none' {
+  if (isRangeStart(date, range)) return 'start';
+  if (isRangeEnd(date, range)) return 'end';
+  if (isDateInRange(date, range)) return 'in-range';
+  return 'none';
+}

package/src/components/NepaliRangePicker/types.ts

@@ -0,0 +1,84 @@
+import type { BSDateValue } from '../../core/types';
+import type { LocaleCode, CalendarLocale, NumeralSystem } from '../../core/locale';
+import type { CalendarTheme } from '../../theme/types';
+import type { CalendarMarkedDate } from '../NepaliCalendar/types';
+
+export type DateRangeValue = {
+  start: BSDateValue | null;
+  end: BSDateValue | null;
+};
+
+export type NepaliRangePickerProps = {
+  value?: DateRangeValue;
+  defaultValue?: DateRangeValue;
+  onChange?: (range: DateRangeValue) => void;
+
+  placeholder?: string;
+  startPlaceholder?: string;
+  endPlaceholder?: string;
+  disabled?: boolean;
+
+  locale?: LocaleCode | CalendarLocale;
+  numerals?: NumeralSystem;
+
+  displayFormat?: string;
+
+  minDate?: BSDateValue;
+  maxDate?: BSDateValue;
+
+  markedDates?: Record<string, CalendarMarkedDate>;
+  disabledDates?: string[] | ((date: BSDateValue) => boolean);
+
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  allowSameDay?: boolean;
+
+  theme?: Partial<CalendarTheme>;
+  colorScheme?: 'light' | 'dark' | 'system';
+
+  modalTitle?: string;
+  confirmText?: string;
+  cancelText?: string;
+  clearText?: string;
+
+  onOpen?: () => void;
+  onClose?: () => void;
+
+  testID?: string;
+};
+
+export type RangePickerModalProps = {
+  visible: boolean;
+
+  value?: DateRangeValue;
+  defaultValue?: DateRangeValue;
+
+  onChange?: (range: DateRangeValue) => void;
+  onConfirm?: (range: DateRangeValue) => void;
+  onCancel?: () => void;
+  onClose?: () => void;
+  onClear?: () => void;
+
+  locale?: LocaleCode | CalendarLocale;
+  numerals?: NumeralSystem;
+
+  minDate?: BSDateValue;
+  maxDate?: BSDateValue;
+
+  markedDates?: Record<string, CalendarMarkedDate>;
+  disabledDates?: string[] | ((date: BSDateValue) => boolean);
+
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  allowSameDay?: boolean;
+
+  theme?: Partial<CalendarTheme>;
+  colorScheme?: 'light' | 'dark' | 'system';
+
+  title?: string;
+  confirmText?: string;
+  cancelText?: string;
+  clearText?: string;
+
+  testID?: string;
+};

package/src/core/arithmetic.ts

@@ -0,0 +1,34 @@
+import type { BSDateValue } from './types';
+import { toAD, toBS } from './conversion';
+import { adDateToEpochDay, epochDayToADDate, jsDateToEpochDay } from './epochDay';
+import { isValidBSDate } from './validation';
+
+export function compareBS(a: BSDateValue, b: BSDateValue): number {
+  if (a.year !== b.year) return a.year - b.year;
+  if (a.month !== b.month) return a.month - b.month;
+  return a.day - b.day;
+}
+
+export function addBSDays(date: BSDateValue, days: number): BSDateValue {
+  if (!isValidBSDate(date)) {
+    throw new RangeError(`Invalid BS date.`);
+  }
+
+  const ad = toAD(date);
+  const epochDay = adDateToEpochDay(ad) + days;
+  const newAD = epochDayToADDate(epochDay);
+
+  return toBS(newAD);
+}
+
+export function subBSDays(date: BSDateValue, days: number): BSDateValue {
+  return addBSDays(date, -days);
+}
+
+export function todayBS(): BSDateValue {
+  const now = new Date();
+  const epochDay = jsDateToEpochDay(now);
+  const ad = epochDayToADDate(epochDay);
+
+  return toBS(ad);
+}

package/src/core/bsData.ts

@@ -0,0 +1,115 @@
+import type { ADDateValue, BSDateValue } from './types';
+import { adDateToEpochDay } from './epochDay';
+
+export type BSYearMonthLengths = readonly [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+];
+
+export type BSCalendarData = {
+  readonly anchorBS: BSDateValue;
+  readonly anchorAD: ADDateValue;
+  readonly monthLengthsByYear: Readonly<Record<number, BSYearMonthLengths>>;
+};
+
+export type BSYearOffset = {
+  readonly year: number;
+  readonly startEpochDay: number;
+  readonly totalDays: number;
+};
+
+// TODO(verified-data): Replace this tiny anchor window with a sourced,
+// verified BS month-length table before claiming full calendar accuracy.
+// This placeholder exists only to prove the conversion architecture.
+export const BS_CALENDAR_DATA: BSCalendarData = {
+  anchorBS: { calendar: 'BS', year: 2081, month: 1, day: 1 },
+  anchorAD: { calendar: 'AD', year: 2024, month: 4, day: 13 },
+  monthLengthsByYear: {
+    2081: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
+  },
+};
+
+export const BS_YEAR_OFFSETS: readonly BSYearOffset[] =
+  createBSYearOffsets(BS_CALENDAR_DATA);
+
+export function createBSYearOffsets(data: BSCalendarData): readonly BSYearOffset[] {
+  assertSupportedAnchor(data);
+
+  let startEpochDay = adDateToEpochDay(data.anchorAD);
+  let expectedYear = data.anchorBS.year;
+
+  return Object.entries(data.monthLengthsByYear)
+    .map(([year, monthLengths]) => ({
+      year: Number(year),
+      monthLengths,
+    }))
+    .sort((a, b) => a.year - b.year)
+    .map(({ year, monthLengths }) => {
+      if (year !== expectedYear) {
+        throw new Error(
+          `BS month data must start at ${data.anchorBS.year} and be contiguous.`
+        );
+      }
+
+      assertMonthLengths(year, monthLengths);
+
+      const totalDays = monthLengths.reduce((sum, days) => sum + days, 0);
+      const offset = { year, startEpochDay, totalDays };
+      startEpochDay += totalDays;
+      expectedYear += 1;
+
+      return offset;
+    });
+}
+
+export function getSupportedBSYearRange(): { min: number; max: number } {
+  const years = Object.keys(BS_CALENDAR_DATA.monthLengthsByYear).map(Number);
+
+  return {
+    min: Math.min(...years),
+    max: Math.max(...years),
+  };
+}
+
+export const SUPPORTED_BS_START_YEAR = getSupportedBSYearRange().min;
+export const SUPPORTED_BS_END_YEAR = getSupportedBSYearRange().max;
+
+export function getSupportedBSRange(): { start: number; end: number } {
+  const range = getSupportedBSYearRange();
+  return { start: range.min, end: range.max };
+}
+
+function assertSupportedAnchor(data: BSCalendarData): void {
+  if (data.anchorBS.month !== 1 || data.anchorBS.day !== 1) {
+    throw new Error(
+      `BS calendar data anchor must be the first day of a BS year.`
+    );
+  }
+}
+
+function assertMonthLengths(
+  year: number,
+  monthLengths: BSYearMonthLengths
+): void {
+  if (monthLengths.length !== 12) {
+    throw new Error(`BS year ${year} must contain 12 month lengths.`);
+  }
+
+  monthLengths.forEach((days, monthIndex) => {
+    if (!Number.isInteger(days) || days < 1) {
+      throw new Error(
+        `BS year ${year} month ${monthIndex + 1} has an invalid length.`
+      );
+    }
+  });
+}