react-native-bikram-sambat 0.1.0

package/src/components/NepaliCalendar/CalendarGrid.tsx

@@ -0,0 +1,159 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { BSDateValue } from '../../core/types';
+import { compareBS } from '../../core';
+import type { CalendarMonthGrid } from '../../calendar';
+import type { CalendarTheme } from '../../theme/types';
+import type { CalendarLocale } from '../../core/locale';
+import type { CalendarMarkedDate, CalendarDayRenderProps } from './types';
+import type { DateRangeValue } from '../NepaliRangePicker/types';
+import { isRangeStart, isRangeEnd, isDateInRange } from '../NepaliRangePicker/range-utils';
+import { CalendarDay } from './CalendarDay';
+
+type CalendarGridProps = {
+  grid: CalendarMonthGrid;
+  value: BSDateValue | null;
+  today: BSDateValue | null;
+  minDate: BSDateValue | undefined;
+  maxDate: BSDateValue | undefined;
+  numerals: 'latin' | 'devanagari';
+  theme: CalendarTheme;
+  markedDates: Record<string, CalendarMarkedDate> | undefined;
+  disabledDates: string[] | ((date: BSDateValue) => boolean) | undefined;
+  onChange: (date: BSDateValue) => void;
+  renderDay: ((props: CalendarDayRenderProps) => React.ReactNode) | undefined;
+  rangeValue?: DateRangeValue;
+  locale?: CalendarLocale;
+};
+
+export const CalendarGrid = memo(function CalendarGrid({
+  grid,
+  value,
+  today,
+  numerals,
+  theme,
+  markedDates,
+  disabledDates,
+  onChange,
+  renderDay,
+  rangeValue,
+  locale,
+}: CalendarGridProps) {
+  const isDateDisabledByList = useCallback(
+    (date: BSDateValue, dateKey: string): boolean => {
+      if (Array.isArray(disabledDates)) {
+        return disabledDates.includes(dateKey);
+      }
+
+      if (typeof disabledDates === 'function') {
+        return disabledDates(date);
+      }
+
+      return false;
+    },
+    [disabledDates]
+  );
+
+  const rows = useMemo(() => {
+    const hasRange = rangeValue?.start != null;
+
+    return grid.weeks.map((week, weekIndex) => (
+      <View key={weekIndex} style={styles.weekRow}>
+        {week.map((cell) => {
+          const dateKey = cell.key;
+          const isSelected = value !== null && compareBS(cell.date, value) === 0;
+          const isTodayCell = today !== null && compareBS(cell.date, today) === 0;
+          const marked = markedDates?.[dateKey];
+          const explicitlyDisabled = marked?.disabled ?? false;
+          const disabled =
+            explicitlyDisabled ||
+            cell.isDisabled ||
+            isDateDisabledByList(cell.date, dateKey);
+
+          const rangeStart = hasRange && isRangeStart(cell.date, rangeValue!);
+          const rangeEnd = hasRange && isRangeEnd(cell.date, rangeValue!);
+          const inRange = hasRange && isDateInRange(cell.date, rangeValue!);
+
+          const handlePress = () => {
+            if (!disabled) {
+              onChange(cell.date);
+            }
+          };
+
+          const dayProps: CalendarDayRenderProps = {
+            date: cell.date,
+            dateKey,
+            day: cell.day,
+            selected: isSelected,
+            today: isTodayCell,
+            disabled,
+            inCurrentMonth: cell.inCurrentMonth,
+            marked,
+            onPress: handlePress,
+            rangeStart,
+            rangeEnd,
+            inRange,
+          };
+
+          if (renderDay) {
+            return (
+              <View key={dateKey} style={styles.dayCell}>
+                {renderDay(dayProps)}
+              </View>
+            );
+          }
+
+          return (
+            <View key={dateKey} style={styles.dayCell}>
+              <CalendarDay
+                date={cell.date}
+                day={cell.day}
+                selected={isSelected}
+                today={isTodayCell}
+                disabled={disabled}
+                inCurrentMonth={cell.inCurrentMonth}
+                marked={marked}
+                numerals={numerals}
+                theme={theme}
+                onPress={handlePress}
+                rangeStart={rangeStart}
+                rangeEnd={rangeEnd}
+                inRange={inRange}
+                locale={locale}
+              />
+            </View>
+          );
+        })}
+      </View>
+    ));
+  }, [
+    grid.weeks,
+    value,
+    today,
+    numerals,
+    theme,
+    markedDates,
+    isDateDisabledByList,
+    onChange,
+    renderDay,
+    rangeValue,
+    locale,
+  ]);
+
+  return <View style={styles.grid}>{rows}</View>;
+});
+
+const styles = StyleSheet.create({
+  grid: {
+    paddingHorizontal: 8,
+    paddingBottom: 8,
+  },
+  weekRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  dayCell: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});

package/src/components/NepaliCalendar/CalendarHeader.tsx

@@ -0,0 +1,126 @@
+import React, { memo, useCallback } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import type { NumeralSystem, CalendarLocale } from '../../core/locale';
+import { formatBS } from '../../core/format';
+import { toNepaliNumerals } from '../../core/numerals';
+import { clampBSDateToSupportedRange } from '../../core/validation';
+import type { CalendarTheme } from '../../theme/types';
+import {
+  HEADER_PREV_MONTH_LABEL,
+  HEADER_NEXT_MONTH_LABEL,
+} from '../../accessibility';
+
+type CalendarHeaderProps = {
+  year: number;
+  month: number;
+  locale: CalendarLocale;
+  numerals: NumeralSystem;
+  theme: CalendarTheme;
+  onPrevMonth: () => void;
+  onNextMonth: () => void;
+  canGoPrev: boolean;
+  canGoNext: boolean;
+};
+
+function safeFormatHeader(
+  year: number,
+  month: number,
+  locale: CalendarLocale,
+  numerals: NumeralSystem
+): string {
+  const safeDate = clampBSDateToSupportedRange({
+    calendar: 'BS',
+    year,
+    month: Math.max(1, Math.min(12, month)),
+    day: 1,
+  });
+
+  try {
+    return formatBS(safeDate, 'MMMM yyyy', { locale, numerals });
+  } catch {
+    const monthName =
+      safeDate.month >= 1 && safeDate.month <= 12
+        ? locale.months[safeDate.month - 1]
+        : `Month ${safeDate.month}`;
+    const yearStr = numerals === 'devanagari' ? toNepaliNumerals(safeDate.year) : String(safeDate.year);
+    return `${monthName} ${yearStr}`;
+  }
+}
+
+export const CalendarHeader = memo(function CalendarHeader({
+  year,
+  month,
+  locale,
+  numerals,
+  theme,
+  onPrevMonth,
+  onNextMonth,
+  canGoPrev,
+  canGoNext,
+}: CalendarHeaderProps) {
+  const title = safeFormatHeader(year, month, locale, numerals);
+
+  const handlePrev = useCallback(() => {
+    if (canGoPrev) onPrevMonth();
+  }, [canGoPrev, onPrevMonth]);
+
+  const handleNext = useCallback(() => {
+    if (canGoNext) onNextMonth();
+  }, [canGoNext, onNextMonth]);
+
+  return (
+    <View style={styles.header}>
+      <Pressable
+        style={[styles.navButton, !canGoPrev && styles.navButtonDisabled]}
+        onPress={handlePrev}
+        disabled={!canGoPrev}
+        accessibilityRole="button"
+        accessibilityLabel={HEADER_PREV_MONTH_LABEL}
+      >
+        <Text style={[styles.navText, { color: theme.colors.text }]}>‹</Text>
+      </Pressable>
+
+      <Text style={[styles.title, { color: theme.colors.text }]}>{title}</Text>
+
+      <Pressable
+        style={[styles.navButton, !canGoNext && styles.navButtonDisabled]}
+        onPress={handleNext}
+        disabled={!canGoNext}
+        accessibilityRole="button"
+        accessibilityLabel={HEADER_NEXT_MONTH_LABEL}
+      >
+        <Text style={[styles.navText, { color: theme.colors.text }]}>›</Text>
+      </Pressable>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    flex: 1,
+    textAlign: 'center',
+  },
+  navButton: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 20,
+  },
+  navButtonDisabled: {
+    opacity: 0.3,
+  },
+  navText: {
+    fontSize: 24,
+    fontWeight: '400',
+  },
+});

package/src/components/NepaliCalendar/CalendarWeekdays.tsx

@@ -0,0 +1,49 @@
+import React, { memo, useMemo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { CalendarLocale } from '../../core/locale';
+import type { CalendarTheme } from '../../theme/types';
+
+type CalendarWeekdaysProps = {
+  locale: CalendarLocale;
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  theme: CalendarTheme;
+};
+
+export const CalendarWeekdays = memo(function CalendarWeekdays({
+  locale,
+  weekStartsOn,
+  theme,
+}: CalendarWeekdaysProps) {
+  const weekdays = useMemo(() => {
+    const ordered = [...locale.weekdaysShort];
+    return ordered.slice(weekStartsOn).concat(ordered.slice(0, weekStartsOn));
+  }, [locale.weekdaysShort, weekStartsOn]);
+
+  return (
+    <View style={styles.weekdaysRow}>
+      {weekdays.map((day, index) => (
+        <Text
+          key={index}
+          style={[styles.weekdayText, { color: theme.colors.mutedText }]}
+        >
+          {day}
+        </Text>
+      ))}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  weekdaysRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingHorizontal: 8,
+    paddingBottom: 8,
+  },
+  weekdayText: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+});

package/src/components/NepaliCalendar/NepaliCalendar.tsx

@@ -0,0 +1,279 @@
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { BSDateValue } from '../../core/types';
+import {
+  getBSMonthLength,
+  todayBS,
+  compareBS,
+  isBSDateInSupportedRange,
+  getSafeCalendarMonth,
+  getDefaultSupportedBSDate,
+} from '../../core';
+import { getCalendarMonthGrid } from '../../calendar';
+import { EN_LOCALE, NE_LOCALE } from '../../core/locale';
+import type { LocaleCode, CalendarLocale } from '../../core/locale';
+import { useCalendarTheme } from '../../theme';
+import { warnOutOfRangeInDev, warnMinMaxInDev, createDateAccessibilityLabel } from '../../utils';
+import type { NepaliCalendarProps } from './types';
+import { CalendarHeader } from './CalendarHeader';
+import { CalendarWeekdays } from './CalendarWeekdays';
+import { CalendarGrid } from './CalendarGrid';
+
+function getPreviousBSMonth(
+  year: number,
+  month: number
+): { year: number; month: number } {
+  if (month === 1) return { year: year - 1, month: 12 };
+  return { year, month: month - 1 };
+}
+
+function getNextBSMonth(
+  year: number,
+  month: number
+): { year: number; month: number } {
+  if (month === 12) return { year: year + 1, month: 1 };
+  return { year, month: month + 1 };
+}
+
+function resolveLocale(
+  locale: LocaleCode | CalendarLocale | undefined
+): CalendarLocale {
+  if (!locale) return EN_LOCALE;
+  if (typeof locale === 'string') {
+    return locale === 'ne' ? NE_LOCALE : EN_LOCALE;
+  }
+  return locale;
+}
+
+export function NepaliCalendar({
+  value,
+  defaultValue,
+  onChange,
+  year,
+  month,
+  defaultYear,
+  defaultMonth,
+  minDate,
+  maxDate,
+  locale,
+  numerals = 'latin',
+  weekStartsOn = 0,
+  markedDates,
+  theme,
+  colorScheme = 'system',
+  disabledDates,
+  onMonthChange,
+  renderDay,
+  rangeValue,
+  testID,
+}: NepaliCalendarProps) {
+  const resolvedLocale = useMemo(() => resolveLocale(locale), [locale]);
+  const calendarTheme = useCalendarTheme({ colorScheme, theme });
+
+  useEffect(() => {
+    if (value && !isBSDateInSupportedRange(value)) {
+      warnOutOfRangeInDev(value, { min: 2000, max: 2090 });
+    }
+    if (defaultValue && !isBSDateInSupportedRange(defaultValue)) {
+      warnOutOfRangeInDev(defaultValue, { min: 2000, max: 2090 });
+    }
+  }, [value, defaultValue]);
+
+  useEffect(() => {
+    warnMinMaxInDev(minDate, maxDate);
+  }, [minDate, maxDate]);
+
+  const safeDisplay = useMemo(() => {
+    const fallback = getDefaultSupportedBSDate();
+
+    if (value && isBSDateInSupportedRange(value)) {
+      return { year: value.year, month: value.month };
+    }
+
+    if (defaultValue && isBSDateInSupportedRange(defaultValue)) {
+      return { year: defaultValue.year, month: defaultValue.month };
+    }
+
+    if (year != null && month != null) {
+      const safe = getSafeCalendarMonth({ year, month });
+      return safe;
+    }
+
+    if (defaultYear != null && defaultMonth != null) {
+      return getSafeCalendarMonth({ year: defaultYear, month: defaultMonth });
+    }
+
+    try {
+      const today = todayBS();
+      if (isBSDateInSupportedRange(today)) {
+        return { year: today.year, month: today.month };
+      }
+    } catch {
+      // fall through
+    }
+
+    return { year: fallback.year, month: fallback.month };
+  }, [value, defaultValue, year, month, defaultYear, defaultMonth]);
+
+  const [internalYear, setInternalYear] = useState(safeDisplay.year);
+  const [internalMonth, setInternalMonth] = useState(safeDisplay.month);
+
+  const wasControlledRef = useRef(year !== undefined && month !== undefined);
+
+  useEffect(() => {
+    const isControlled = year !== undefined && month !== undefined;
+    if (isControlled) {
+      wasControlledRef.current = true;
+      const safe = getSafeCalendarMonth({ year, month });
+      setInternalYear(safe.year);
+      setInternalMonth(safe.month);
+    } else if (wasControlledRef.current) {
+      wasControlledRef.current = false;
+      const safe = getSafeCalendarMonth({
+        year: defaultYear,
+        month: defaultMonth,
+        value,
+        defaultValue,
+      });
+      setInternalYear(safe.year);
+      setInternalMonth(safe.month);
+    }
+  }, [year, month, defaultYear, defaultMonth, value, defaultValue]);
+
+  const controlledYear = year !== undefined ? getSafeCalendarMonth({ year, month: month ?? 1 }).year : internalYear;
+  const controlledMonth = year !== undefined ? getSafeCalendarMonth({ year, month: month ?? 1 }).month : internalMonth;
+
+  const handlePrevMonth = useCallback(() => {
+    const prev = getPreviousBSMonth(controlledYear, controlledMonth);
+    if (year === undefined) {
+      const safe = getSafeCalendarMonth({ year: prev.year, month: prev.month });
+      setInternalYear(safe.year);
+      setInternalMonth(safe.month);
+    }
+    onMonthChange?.(prev);
+  }, [controlledYear, controlledMonth, year, onMonthChange]);
+
+  const handleNextMonth = useCallback(() => {
+    const next = getNextBSMonth(controlledYear, controlledMonth);
+    if (year === undefined) {
+      const safe = getSafeCalendarMonth({ year: next.year, month: next.month });
+      setInternalYear(safe.year);
+      setInternalMonth(safe.month);
+    }
+    onMonthChange?.(next);
+  }, [controlledYear, controlledMonth, year, onMonthChange]);
+
+  const today = useMemo(() => {
+    try {
+      const t = todayBS();
+      return isBSDateInSupportedRange(t) ? t : null;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const grid = useMemo(() => {
+    try {
+      return getCalendarMonthGrid({
+        year: controlledYear,
+        month: controlledMonth,
+        weekStartsOn,
+        minDate,
+        maxDate,
+        today: today ?? undefined,
+      });
+    } catch {
+      return {
+        year: controlledYear,
+        month: controlledMonth,
+        weeks: [],
+      };
+    }
+  }, [controlledYear, controlledMonth, weekStartsOn, minDate, maxDate, today]);
+
+  const canGoPrev = useMemo(() => {
+    const prev = getPreviousBSMonth(controlledYear, controlledMonth);
+    try {
+      getBSMonthLength(prev.year, prev.month);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [controlledYear, controlledMonth]);
+
+  const canGoNext = useMemo(() => {
+    const next = getNextBSMonth(controlledYear, controlledMonth);
+    try {
+      getBSMonthLength(next.year, next.month);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [controlledYear, controlledMonth]);
+
+  const resolvedValue = value && isBSDateInSupportedRange(value) ? value : null;
+
+  const handleDayPress = useCallback(
+    (date: BSDateValue) => {
+      onChange?.(date);
+    },
+    [onChange]
+  );
+
+  const accessibilityLabel = useMemo(() => {
+    if (!resolvedValue) return undefined;
+    return createDateAccessibilityLabel(resolvedValue, resolvedLocale, {
+      selected: true,
+      today: today !== null && compareBS(resolvedValue, today) === 0,
+    });
+  }, [resolvedValue, resolvedLocale, today]);
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: calendarTheme.colors.background }]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <CalendarHeader
+        year={controlledYear}
+        month={controlledMonth}
+        locale={resolvedLocale}
+        numerals={numerals}
+        theme={calendarTheme}
+        onPrevMonth={handlePrevMonth}
+        onNextMonth={handleNextMonth}
+        canGoPrev={canGoPrev}
+        canGoNext={canGoNext}
+      />
+
+      <CalendarWeekdays
+        locale={resolvedLocale}
+        weekStartsOn={weekStartsOn}
+        theme={calendarTheme}
+      />
+
+      <CalendarGrid
+        grid={grid}
+        value={resolvedValue}
+        today={today}
+        minDate={minDate}
+        maxDate={maxDate}
+        numerals={numerals}
+        theme={calendarTheme}
+        markedDates={markedDates}
+        disabledDates={disabledDates}
+        onChange={handleDayPress}
+        renderDay={renderDay}
+        rangeValue={rangeValue}
+        locale={resolvedLocale}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+});

package/src/components/NepaliCalendar/index.ts

@@ -0,0 +1,6 @@
+export { NepaliCalendar } from './NepaliCalendar';
+export type {
+  NepaliCalendarProps,
+  CalendarMarkedDate,
+  CalendarDayRenderProps,
+} from './types';

package/src/components/NepaliCalendar/types.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import type { BSDateValue } from '../../core/types';
+import type { LocaleCode, CalendarLocale, NumeralSystem } from '../../core/locale';
+import type { CalendarTheme } from '../../theme/types';
+import type { DateRangeValue } from '../NepaliRangePicker/types';
+
+export type CalendarMarkedDate = {
+  type?: 'dot' | 'holiday' | 'event' | 'disabled';
+  label?: string;
+  color?: string;
+  textColor?: string;
+  disabled?: boolean;
+};
+
+export type CalendarDayRenderProps = {
+  date: BSDateValue;
+  dateKey: string;
+  day: number;
+  selected: boolean;
+  today: boolean;
+  disabled: boolean;
+  inCurrentMonth: boolean;
+  marked?: CalendarMarkedDate;
+  onPress: () => void;
+  rangeStart?: boolean;
+  rangeEnd?: boolean;
+  inRange?: boolean;
+};
+
+export type NepaliCalendarProps = {
+  value?: BSDateValue | null;
+  defaultValue?: BSDateValue;
+  onChange?: (date: BSDateValue) => void;
+
+  year?: number;
+  month?: number;
+  defaultYear?: number;
+  defaultMonth?: number;
+
+  minDate?: BSDateValue;
+  maxDate?: BSDateValue;
+
+  locale?: LocaleCode | CalendarLocale;
+  numerals?: NumeralSystem;
+
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  markedDates?: Record<string, CalendarMarkedDate>;
+
+  theme?: Partial<CalendarTheme>;
+  colorScheme?: 'light' | 'dark' | 'system';
+
+  disabledDates?: string[] | ((date: BSDateValue) => boolean);
+
+  onMonthChange?: (value: { year: number; month: number }) => void;
+
+  renderDay?: (props: CalendarDayRenderProps) => ReactNode;
+
+  rangeValue?: DateRangeValue;
+
+  testID?: string;
+};