react-native-bikram-sambat 0.1.0

package/src/components/NepaliDatePicker/DatePickerModal.tsx

@@ -0,0 +1,220 @@
+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 { getSafeInitialBSDate } from '../../utils';
+import { NepaliCalendar } from '../NepaliCalendar';
+import type { DatePickerModalProps } from './types';
+
+export function DatePickerModal({
+  visible,
+  value,
+  defaultValue,
+  onChange,
+  onConfirm,
+  onCancel,
+  onClose,
+  locale,
+  numerals,
+  minDate,
+  maxDate,
+  markedDates,
+  disabledDates,
+  weekStartsOn,
+  theme,
+  colorScheme,
+  title = 'Select Date',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  testID,
+}: DatePickerModalProps) {
+  const calendarTheme = useCalendarTheme({ colorScheme, theme });
+
+  const [tempDate, setTempDate] = useState<BSDateValue>(() =>
+    getSafeInitialBSDate(value, defaultValue)
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setTempDate(getSafeInitialBSDate(value, defaultValue));
+    }
+  }, [visible, value, defaultValue]);
+
+  const handleConfirm = useCallback(() => {
+    onConfirm?.(tempDate);
+    onChange?.(tempDate);
+    onClose?.();
+  }, [tempDate, onConfirm, onChange, onClose]);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onClose?.();
+  }, [onCancel, onClose]);
+
+  const handleBackdropPress = useCallback(() => {
+    onCancel?.();
+    onClose?.();
+  }, [onCancel, onClose]);
+
+  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.calendarWrapper}>
+          <NepaliCalendar
+            value={tempDate}
+            onChange={setTempDate}
+            locale={locale}
+            numerals={numerals}
+            minDate={minDate}
+            maxDate={maxDate}
+            markedDates={markedDates}
+            disabledDates={disabledDates}
+            weekStartsOn={weekStartsOn}
+            theme={theme}
+            colorScheme={colorScheme}
+          />
+        </View>
+
+        <View
+          style={[
+            styles.buttonRow,
+            { borderTopColor: calendarTheme.colors.border },
+          ]}
+        >
+          <Pressable
+            style={[styles.button, styles.cancelButton]}
+            onPress={handleCancel}
+            accessibilityRole="button"
+            accessibilityLabel={cancelText}
+          >
+            <Text style={[styles.cancelText, { color: calendarTheme.colors.mutedText }]}>
+              {cancelText}
+            </Text>
+          </Pressable>
+
+          <Pressable
+            style={[styles.button, { backgroundColor: calendarTheme.colors.primary }]}
+            onPress={handleConfirm}
+            accessibilityRole="button"
+            accessibilityLabel="Confirm selected date"
+          >
+            <Text style={[styles.confirmText, { color: calendarTheme.colors.primaryText }]}>
+              {confirmText}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    ),
+    [
+      tempDate,
+      title,
+      locale,
+      numerals,
+      minDate,
+      maxDate,
+      markedDates,
+      disabledDates,
+      weekStartsOn,
+      theme,
+      colorScheme,
+      testID,
+      cancelText,
+      confirmText,
+      calendarTheme,
+      handleCancel,
+      handleConfirm,
+    ]
+  );
+
+  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,
+  },
+  calendarWrapper: {
+    padding: 8,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    minWidth: 80,
+    alignItems: 'center',
+  },
+  cancelButton: {
+    backgroundColor: 'transparent',
+  },
+  cancelText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  confirmText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/NepaliDatePicker/NepaliDatePicker.tsx

@@ -0,0 +1,171 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { Pressable, Text, StyleSheet } from 'react-native';
+import type { BSDateValue } from '../../core/types';
+import { isValidBSDate, isBSDateInSupportedRange } from '../../core/validation';
+import { useCalendarTheme } from '../../theme';
+import { safeFormatBSDate, warnOutOfRangeInDev, warnMinMaxInDev } from '../../utils';
+import { DatePickerModal } from './DatePickerModal';
+import type { NepaliDatePickerProps } from './types';
+
+export function NepaliDatePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = 'Select date',
+  disabled = false,
+  locale,
+  numerals,
+  displayFormat = 'yyyy-MM-dd',
+  minDate,
+  maxDate,
+  markedDates,
+  disabledDates,
+  weekStartsOn,
+  theme,
+  colorScheme,
+  modalTitle,
+  confirmText,
+  cancelText,
+  onOpen,
+  onClose,
+  testID,
+}: NepaliDatePickerProps) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const calendarTheme = useCalendarTheme({ colorScheme, theme });
+
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState<BSDateValue | null>(
+    defaultValue ?? null
+  );
+
+  useEffect(() => {
+    if (value) {
+      if (!isValidBSDate(value)) {
+        if (__DEV__) {
+          console.warn(
+            'react-native-bikram-sambat: Invalid date value provided to NepaliDatePicker.',
+            value
+          );
+        }
+      } else if (!isBSDateInSupportedRange(value)) {
+        warnOutOfRangeInDev(value, { min: 2000, max: 2090 });
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    warnMinMaxInDev(minDate, maxDate);
+  }, [minDate, maxDate]);
+
+  const currentValue = isControlled
+    ? (value && isValidBSDate(value) && isBSDateInSupportedRange(value) ? value : null)
+    : internalValue;
+
+  const displayText = useMemo(() => {
+    if (!currentValue) return placeholder;
+
+    const formatted = safeFormatBSDate(currentValue, displayFormat, locale, numerals);
+    return formatted ?? placeholder;
+  }, [currentValue, placeholder, displayFormat, locale, numerals]);
+
+  const handleOpen = useCallback(() => {
+    if (disabled) return;
+    setModalVisible(true);
+    onOpen?.();
+  }, [disabled, onOpen]);
+
+  const handleClose = useCallback(() => {
+    setModalVisible(false);
+    onClose?.();
+  }, [onClose]);
+
+  const handleChange = useCallback(
+    (date: BSDateValue) => {
+      if (!isControlled) {
+        setInternalValue(date);
+      }
+      onChange?.(date);
+    },
+    [isControlled, onChange]
+  );
+
+  const accessibilityLabel = useMemo(() => {
+    if (disabled) return `${placeholder}, disabled`;
+    if (currentValue) {
+      const formatted = safeFormatBSDate(currentValue, displayFormat, locale, numerals);
+      return formatted ?? placeholder;
+    }
+    return placeholder;
+  }, [currentValue, placeholder, displayFormat, locale, numerals, disabled]);
+
+  return (
+    <>
+      <Pressable
+        style={[
+          styles.field,
+          {
+            borderColor: calendarTheme.colors.fieldBorder,
+            backgroundColor: calendarTheme.colors.fieldBackground,
+          },
+          disabled && styles.fieldDisabled,
+        ]}
+        onPress={handleOpen}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled }}
+        testID={testID}
+      >
+        <Text
+          style={[
+            styles.fieldText,
+            {
+              color: currentValue
+                ? calendarTheme.colors.text
+                : calendarTheme.colors.placeholderText,
+            },
+          ]}
+        >
+          {displayText}
+        </Text>
+      </Pressable>
+
+      <DatePickerModal
+        visible={modalVisible}
+        value={currentValue}
+        defaultValue={defaultValue}
+        onChange={handleChange}
+        onClose={handleClose}
+        locale={locale}
+        numerals={numerals}
+        minDate={minDate}
+        maxDate={maxDate}
+        markedDates={markedDates}
+        disabledDates={disabledDates}
+        weekStartsOn={weekStartsOn}
+        theme={theme}
+        colorScheme={colorScheme}
+        title={modalTitle}
+        confirmText={confirmText}
+        cancelText={cancelText}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  field: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    alignItems: 'center',
+  },
+  fieldDisabled: {
+    opacity: 0.5,
+  },
+  fieldText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

package/src/components/NepaliDatePicker/index.ts

@@ -0,0 +1,3 @@
+export { NepaliDatePicker } from './NepaliDatePicker';
+export { DatePickerModal } from './DatePickerModal';
+export type { NepaliDatePickerProps, DatePickerModalProps } from './types';

package/src/components/NepaliDatePicker/types.ts

@@ -0,0 +1,70 @@
+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 NepaliDatePickerProps = {
+  value?: BSDateValue | null;
+  defaultValue?: BSDateValue;
+  onChange?: (date: BSDateValue) => void;
+
+  placeholder?: 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;
+
+  theme?: Partial<CalendarTheme>;
+  colorScheme?: 'light' | 'dark' | 'system';
+
+  modalTitle?: string;
+  confirmText?: string;
+  cancelText?: string;
+
+  onOpen?: () => void;
+  onClose?: () => void;
+
+  testID?: string;
+};
+
+export type DatePickerModalProps = {
+  visible: boolean;
+
+  value?: BSDateValue | null;
+  defaultValue?: BSDateValue;
+
+  onChange?: (date: BSDateValue) => void;
+  onConfirm?: (date: BSDateValue) => void;
+  onCancel?: () => void;
+  onClose?: () => 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;
+
+  theme?: Partial<CalendarTheme>;
+  colorScheme?: 'light' | 'dark' | 'system';
+
+  title?: string;
+  confirmText?: string;
+  cancelText?: string;
+
+  testID?: string;
+};

package/src/components/NepaliRangePicker/NepaliRangePicker.tsx

@@ -0,0 +1,206 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { Pressable, Text, StyleSheet } from 'react-native';
+import { isValidBSDate, isBSDateInSupportedRange } from '../../core/validation';
+import { useCalendarTheme } from '../../theme';
+import { safeFormatBSDate, warnOutOfRangeInDev, warnMinMaxInDev } from '../../utils';
+import { RangePickerModal } from './RangePickerModal';
+import type { NepaliRangePickerProps, DateRangeValue } from './types';
+
+export function NepaliRangePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = 'Select date range',
+  disabled = false,
+  locale,
+  numerals,
+  displayFormat = 'yyyy-MM-dd',
+  minDate,
+  maxDate,
+  markedDates,
+  disabledDates,
+  weekStartsOn,
+  allowSameDay = true,
+  theme,
+  colorScheme,
+  modalTitle,
+  confirmText,
+  cancelText,
+  clearText,
+  onOpen,
+  onClose,
+  testID,
+}: NepaliRangePickerProps) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const calendarTheme = useCalendarTheme({ colorScheme, theme });
+
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState<DateRangeValue>(
+    defaultValue ?? { start: null, end: null }
+  );
+
+  useEffect(() => {
+    if (value?.start) {
+      if (!isValidBSDate(value.start)) {
+        if (__DEV__) {
+          console.warn(
+            'react-native-bikram-sambat: Invalid start date provided to NepaliRangePicker.',
+            value.start
+          );
+        }
+      } else if (!isBSDateInSupportedRange(value.start)) {
+        warnOutOfRangeInDev(value.start, { min: 2000, max: 2090 });
+      }
+    }
+    if (value?.end) {
+      if (!isValidBSDate(value.end)) {
+        if (__DEV__) {
+          console.warn(
+            'react-native-bikram-sambat: Invalid end date provided to NepaliRangePicker.',
+            value.end
+          );
+        }
+      } else if (!isBSDateInSupportedRange(value.end)) {
+        warnOutOfRangeInDev(value.end, { min: 2000, max: 2090 });
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    warnMinMaxInDev(minDate, maxDate);
+  }, [minDate, maxDate]);
+
+  const currentValue = isControlled ? value : internalValue;
+
+  const displayText = useMemo(() => {
+    if (!currentValue || (!currentValue.start && !currentValue.end)) {
+      return placeholder;
+    }
+
+    const startStr = currentValue.start
+      ? safeFormatBSDate(currentValue.start, displayFormat, locale, numerals)
+      : null;
+    const endStr = currentValue.end
+      ? safeFormatBSDate(currentValue.end, displayFormat, locale, numerals)
+      : null;
+
+    if (startStr && endStr) return `${startStr} → ${endStr}`;
+    if (startStr) return `${startStr} → ...`;
+    return placeholder;
+  }, [currentValue, placeholder, displayFormat, locale, numerals]);
+
+  const handleOpen = useCallback(() => {
+    if (disabled) return;
+    setModalVisible(true);
+    onOpen?.();
+  }, [disabled, onOpen]);
+
+  const handleClose = useCallback(() => {
+    setModalVisible(false);
+    onClose?.();
+  }, [onClose]);
+
+  const handleChange = useCallback(
+    (range: DateRangeValue) => {
+      if (!isControlled) {
+        setInternalValue(range);
+      }
+      onChange?.(range);
+    },
+    [isControlled, onChange]
+  );
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue({ start: null, end: null });
+    }
+    onChange?.({ start: null, end: null });
+  }, [isControlled, onChange]);
+
+  const accessibilityLabel = useMemo(() => {
+    if (disabled) return `${placeholder}, disabled`;
+    if (currentValue?.start) {
+      const startStr = safeFormatBSDate(currentValue.start, displayFormat, locale, numerals);
+      const endStr = currentValue.end
+        ? safeFormatBSDate(currentValue.end, displayFormat, locale, numerals)
+        : null;
+      if (startStr && endStr) return `${startStr} to ${endStr}`;
+      if (startStr) return `${startStr}, start date selected`;
+    }
+    return placeholder;
+  }, [currentValue, placeholder, displayFormat, locale, numerals, disabled]);
+
+  return (
+    <>
+      <Pressable
+        style={[
+          styles.field,
+          {
+            borderColor: calendarTheme.colors.fieldBorder,
+            backgroundColor: calendarTheme.colors.fieldBackground,
+          },
+          disabled && styles.fieldDisabled,
+        ]}
+        onPress={handleOpen}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled }}
+        testID={testID}
+      >
+        <Text
+          style={[
+            styles.fieldText,
+            {
+              color: currentValue?.start
+                ? calendarTheme.colors.text
+                : calendarTheme.colors.placeholderText,
+            },
+          ]}
+        >
+          {displayText}
+        </Text>
+      </Pressable>
+
+      <RangePickerModal
+        visible={modalVisible}
+        value={currentValue}
+        defaultValue={defaultValue}
+        onChange={handleChange}
+        onClose={handleClose}
+        onClear={handleClear}
+        locale={locale}
+        numerals={numerals}
+        minDate={minDate}
+        maxDate={maxDate}
+        markedDates={markedDates}
+        disabledDates={disabledDates}
+        weekStartsOn={weekStartsOn}
+        allowSameDay={allowSameDay}
+        theme={theme}
+        colorScheme={colorScheme}
+        title={modalTitle}
+        confirmText={confirmText}
+        cancelText={cancelText}
+        clearText={clearText}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  field: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    alignItems: 'center',
+  },
+  fieldDisabled: {
+    opacity: 0.5,
+  },
+  fieldText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});