@scripso-homepad/ui 0.4.2 → 0.4.4

package/src/components/Calendar.tsx

@@ -0,0 +1,441 @@
+import { useMemo, useRef, useState, type ComponentRef } from "react";
+import { Pressable, Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons/ChevronNavIcons";
+import {
+  CALENDAR_NAV_ICON_COLOR,
+  CALENDAR_NAV_ICON_SIZE,
+  CALENDAR_YEARS_PER_PAGE,
+  calendarDropdownMetrics,
+} from "../theme/calendar";
+import {
+  addMonths,
+  buildCalendarDays,
+  formatCalendarYear,
+  getYearPageStart,
+  isMonthDisabled,
+  isYearDisabled,
+  selectRangeDate,
+  type CalendarDayCell,
+  type DateRange,
+} from "../utils/calendarDays";
+import {
+  formatLocalizedCalendarMonthYear,
+  getCalendarMonthLabels,
+  getCalendarTranslations,
+  resolveWeekdayLabels,
+  type CalendarTranslations,
+} from "../utils/calendarLocalization";
+import { useCalendarLocale } from "../utils/calendarLocaleContext";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+
+export type { DateRange };
+
+export type CalendarLabels = Partial<Pick<CalendarTranslations, CalendarTranslationKey>> & {
+  weekdays?: string[];
+  formatMonthYear?: (date: Date) => string;
+};
+
+type CalendarTranslationKey =
+  | "previousMonth"
+  | "nextMonth"
+  | "previousYear"
+  | "nextYear"
+  | "previousYears"
+  | "nextYears"
+  | "selectMonth"
+  | "selectYear"
+  | "closeCalendar";
+
+type CalendarPickerView = "days" | "months" | "years";
+
+type CalendarBaseProps = {
+  viewDate?: Date;
+  defaultViewDate?: Date;
+  onViewDateChange?: (date: Date) => void;
+  locale?: string;
+  labels?: CalendarLabels;
+  minDate?: Date;
+  maxDate?: Date;
+  today?: Date;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+};
+
+export type CalendarSingleProps = CalendarBaseProps & {
+  mode?: "single";
+  value?: Date;
+  onChange?: (date: Date) => void;
+};
+
+export type CalendarRangeProps = CalendarBaseProps & {
+  mode: "range";
+  value?: DateRange;
+  onChange?: (range: DateRange) => void;
+};
+
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+
+function resolveDayCellStyle(day: CalendarDayCell): StyleProp<ViewStyle> {
+  if (day.isDisabled) {
+    return [calendarDropdownMetrics.dayCell];
+  }
+
+  if (day.isSelected) {
+    return [calendarDropdownMetrics.dayCell, calendarDropdownMetrics.dayCellSelected];
+  }
+
+  return [
+    calendarDropdownMetrics.dayCell,
+    day.inCurrentMonth && day.isPast && !day.isToday
+      ? calendarDropdownMetrics.dayCellPast
+      : null,
+  ];
+}
+
+function resolveDayLabelStyle(day: CalendarDayCell): StyleProp<TextStyle> {
+  if (day.isDisabled) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelDisabled];
+  }
+
+  if (day.isSelected) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelSelected];
+  }
+
+  if (!day.inCurrentMonth) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelOutsideMonth];
+  }
+
+  if (day.isToday) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
+  }
+
+  if (day.isPast) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
+  }
+
+  return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelFuture];
+}
+
+export function Calendar(props: CalendarProps) {
+  const rangeProps = props.mode === "range" ? (props as CalendarRangeProps) : null;
+  const singleProps = props.mode === "range" ? null : (props as CalendarSingleProps);
+  const {
+    viewDate,
+    defaultViewDate,
+    onViewDateChange,
+    locale,
+    labels,
+    minDate,
+    maxDate,
+    today = new Date(),
+    style,
+    className,
+  } = props;
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
+  const [internalViewDate, setInternalViewDate] = useState(() => {
+    if (defaultViewDate) {
+      return defaultViewDate;
+    }
+
+    if (rangeProps) {
+      return rangeProps.value?.start ?? today;
+    }
+
+    return singleProps?.value ?? today;
+  });
+  const activeViewDate = viewDate ?? internalViewDate;
+  const [pickerView, setPickerView] = useState<CalendarPickerView>("days");
+  const [pickerYear, setPickerYear] = useState(() => activeViewDate.getFullYear());
+  const [yearPageStart, setYearPageStart] = useState(() =>
+    getYearPageStart(activeViewDate.getFullYear(), CALENDAR_YEARS_PER_PAGE),
+  );
+  const customWeekdayLabels = labels?.weekdays;
+  const formatMonthYearLabel = labels?.formatMonthYear;
+  const resolvedLocale = useCalendarLocale(locale);
+  const translations = useMemo(
+    () => getCalendarTranslations(resolvedLocale),
+    [resolvedLocale],
+  );
+
+  useApplyWebClassName(rootRef, className);
+
+  const weekdayLabels = useMemo(
+    () => customWeekdayLabels ?? resolveWeekdayLabels(resolvedLocale),
+    [customWeekdayLabels, resolvedLocale],
+  );
+
+  const monthLabels = useMemo(() => getCalendarMonthLabels(resolvedLocale), [resolvedLocale]);
+
+  const monthYearLabel = useMemo(() => {
+    if (formatMonthYearLabel) {
+      return formatMonthYearLabel(activeViewDate);
+    }
+
+    return formatLocalizedCalendarMonthYear(activeViewDate, resolvedLocale);
+  }, [activeViewDate, formatMonthYearLabel, resolvedLocale]);
+
+  const headerLabel = useMemo(() => {
+    if (pickerView === "months") {
+      return formatCalendarYear(pickerYear, resolvedLocale);
+    }
+
+    if (pickerView === "years") {
+      const endYear = yearPageStart + CALENDAR_YEARS_PER_PAGE - 1;
+      return `${yearPageStart} – ${endYear}`;
+    }
+
+    return monthYearLabel;
+  }, [monthYearLabel, pickerView, pickerYear, resolvedLocale, yearPageStart]);
+
+  const days = useMemo(
+    () =>
+      buildCalendarDays({
+        viewDate: activeViewDate,
+        selectedDate: singleProps?.value,
+        selectedRange: rangeProps?.value,
+        today,
+        minDate,
+        maxDate,
+      }),
+    [activeViewDate, maxDate, minDate, rangeProps?.value, singleProps?.value, today],
+  );
+
+  const yearOptions = useMemo(
+    () =>
+      Array.from({ length: CALENDAR_YEARS_PER_PAGE }, (_, index) => yearPageStart + index),
+    [yearPageStart],
+  );
+
+  function getLabel(key: CalendarTranslationKey): string {
+    return labels?.[key] ?? translations[key];
+  }
+
+  function setViewDate(nextDate: Date) {
+    if (viewDate === undefined) {
+      setInternalViewDate(nextDate);
+    }
+
+    onViewDateChange?.(nextDate);
+  }
+
+  function handlePrevious() {
+    if (pickerView === "months") {
+      setPickerYear((year) => year - 1);
+      return;
+    }
+
+    if (pickerView === "years") {
+      setYearPageStart((start) => start - CALENDAR_YEARS_PER_PAGE);
+      return;
+    }
+
+    setViewDate(addMonths(activeViewDate, -1));
+  }
+
+  function handleNext() {
+    if (pickerView === "months") {
+      setPickerYear((year) => year + 1);
+      return;
+    }
+
+    if (pickerView === "years") {
+      setYearPageStart((start) => start + CALENDAR_YEARS_PER_PAGE);
+      return;
+    }
+
+    setViewDate(addMonths(activeViewDate, 1));
+  }
+
+  function handleHeaderPress() {
+    if (pickerView === "days") {
+      setPickerYear(activeViewDate.getFullYear());
+      setPickerView("months");
+      return;
+    }
+
+    if (pickerView === "months") {
+      setYearPageStart(getYearPageStart(pickerYear, CALENDAR_YEARS_PER_PAGE));
+      setPickerView("years");
+    }
+  }
+
+  function handleMonthSelect(month: number) {
+    setViewDate(new Date(pickerYear, month, 1));
+    setPickerView("days");
+  }
+
+  function handleYearSelect(year: number) {
+    setPickerYear(year);
+    setPickerView("months");
+  }
+
+  function handleDayPress(date: Date) {
+    if (rangeProps) {
+      rangeProps.onChange?.(selectRangeDate(date, rangeProps.value));
+      return;
+    }
+
+    singleProps?.onChange?.(date);
+  }
+
+  const headerIsPressable = pickerView === "days" || pickerView === "months";
+
+  return (
+    <View ref={rootRef} style={[calendarDropdownMetrics.panel, style]}>
+      <View style={calendarDropdownMetrics.header}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={
+            pickerView === "months"
+              ? getLabel("previousYear")
+              : pickerView === "years"
+                ? getLabel("previousYears")
+                : getLabel("previousMonth")
+          }
+          onPress={handlePrevious}
+          style={calendarDropdownMetrics.navButton}
+        >
+          <ChevronLeftIcon size={CALENDAR_NAV_ICON_SIZE} color={CALENDAR_NAV_ICON_COLOR} />
+        </Pressable>
+
+        {headerIsPressable ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={
+              pickerView === "days" ? getLabel("selectMonth") : getLabel("selectYear")
+            }
+            onPress={handleHeaderPress}
+            style={calendarDropdownMetrics.headerTitlePressable}
+          >
+            <Text style={calendarDropdownMetrics.headerTitle}>{headerLabel}</Text>
+          </Pressable>
+        ) : (
+          <View style={calendarDropdownMetrics.headerTitlePressable}>
+            <Text style={calendarDropdownMetrics.headerTitle}>{headerLabel}</Text>
+          </View>
+        )}
+
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={
+            pickerView === "months"
+              ? getLabel("nextYear")
+              : pickerView === "years"
+                ? getLabel("nextYears")
+                : getLabel("nextMonth")
+          }
+          onPress={handleNext}
+          style={calendarDropdownMetrics.navButton}
+        >
+          <ChevronRightIcon size={CALENDAR_NAV_ICON_SIZE} color={CALENDAR_NAV_ICON_COLOR} />
+        </Pressable>
+      </View>
+
+      {pickerView === "days" ? (
+        <>
+          <View style={calendarDropdownMetrics.weekdayRow}>
+            {weekdayLabels.map((weekday) => (
+              <View key={weekday} style={calendarDropdownMetrics.weekdayCell}>
+                <Text style={calendarDropdownMetrics.weekdayLabel}>{weekday}</Text>
+              </View>
+            ))}
+          </View>
+
+          <View style={calendarDropdownMetrics.dayGrid}>
+            {days.map((day) => (
+              <Pressable
+                key={day.date.toISOString()}
+                accessibilityRole="button"
+                accessibilityState={{
+                  selected: day.isSelected,
+                  disabled: day.isDisabled,
+                }}
+                disabled={day.isDisabled}
+                onPress={() => handleDayPress(day.date)}
+                style={resolveDayCellStyle(day)}
+              >
+                <Text style={resolveDayLabelStyle(day)}>{day.date.getDate()}</Text>
+                {day.isToday && day.inCurrentMonth && !day.isSelected ? (
+                  <View style={calendarDropdownMetrics.todayDot} />
+                ) : null}
+              </Pressable>
+            ))}
+          </View>
+        </>
+      ) : (
+        <View style={calendarDropdownMetrics.pickerBody}>
+          <View style={calendarDropdownMetrics.pickerGrid}>
+            {pickerView === "months"
+              ? monthLabels.map((monthLabel, month) => {
+                  const isSelected =
+                    activeViewDate.getFullYear() === pickerYear &&
+                    activeViewDate.getMonth() === month;
+                  const isCurrent =
+                    today.getFullYear() === pickerYear && today.getMonth() === month;
+                  const disabled = isMonthDisabled(pickerYear, month, minDate, maxDate);
+
+                  return (
+                    <Pressable
+                      key={monthLabel}
+                      accessibilityRole="button"
+                      accessibilityState={{ selected: isSelected, disabled }}
+                      disabled={disabled}
+                      onPress={() => handleMonthSelect(month)}
+                      style={[
+                        calendarDropdownMetrics.pickerCell,
+                        isSelected ? calendarDropdownMetrics.pickerCellSelected : null,
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          calendarDropdownMetrics.pickerLabel,
+                          isSelected ? calendarDropdownMetrics.pickerLabelSelected : null,
+                          !isSelected && isCurrent
+                            ? calendarDropdownMetrics.pickerLabelCurrent
+                            : null,
+                          disabled ? calendarDropdownMetrics.pickerLabelDisabled : null,
+                        ]}
+                      >
+                        {monthLabel}
+                      </Text>
+                    </Pressable>
+                  );
+                })
+              : yearOptions.map((year) => {
+                  const isSelected = activeViewDate.getFullYear() === year;
+                  const isCurrent = today.getFullYear() === year;
+                  const disabled = isYearDisabled(year, minDate, maxDate);
+
+                  return (
+                    <Pressable
+                      key={year}
+                      accessibilityRole="button"
+                      accessibilityState={{ selected: isSelected, disabled }}
+                      disabled={disabled}
+                      onPress={() => handleYearSelect(year)}
+                      style={[
+                        calendarDropdownMetrics.pickerCell,
+                        isSelected ? calendarDropdownMetrics.pickerCellSelected : null,
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          calendarDropdownMetrics.pickerLabel,
+                          isSelected ? calendarDropdownMetrics.pickerLabelSelected : null,
+                          !isSelected && isCurrent
+                            ? calendarDropdownMetrics.pickerLabelCurrent
+                            : null,
+                          disabled ? calendarDropdownMetrics.pickerLabelDisabled : null,
+                        ]}
+                      >
+                        {year}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/DatePicker.stories.tsx

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { formatLocalizedCalendarMonthYear } from "../utils/calendarLocalization";
+import { DatePicker, type CalendarLabels, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange } from "./DatePicker";
+
+const figmaViewDate = new Date(2026, 5, 1);
+const figmaSampleDate = new Date(2026, 5, 25);
+
+function getCurrentMonthStart() {
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), 1);
+}
+
+function getSampleRange(): DateRange {
+  const now = new Date();
+  return {
+    start: new Date(now.getFullYear(), now.getMonth(), 20),
+    end: new Date(now.getFullYear(), now.getMonth(), 28),
+  };
+}
+
+const figmaLabels: CalendarLabels = {
+  weekdays: ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"],
+  formatMonthYear: (date) => formatLocalizedCalendarMonthYear(date, "hy-AM"),
+};
+
+const sharedDatePickerArgs = {
+  mode: "single" as const,
+  placeholder: "Ընտրել ամսաթիվ",
+  locale: "hy-AM" as const,
+  defaultViewDate: getCurrentMonthStart(),
+  defaultOpen: false,
+};
+
+const meta = {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  parameters: {
+    layout: "centered",
+  },
+  args: sharedDatePickerArgs,
+} satisfies Meta<DatePickerSingleProps>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default — closed field; click input to open calendar. */
+export const Default: Story = {
+  render: function DefaultDatePickerStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.field}>
+        <DatePicker {...sharedDatePickerArgs} value={value} onChange={setValue} />
+      </View>
+    );
+  },
+};
+
+export const WithSelectedDate: Story = {
+  render: function SelectedDatePickerStory() {
+    const [value, setValue] = useState<Date | undefined>(figmaSampleDate);
+
+    return (
+      <View style={styles.field}>
+        <DatePicker
+          {...sharedDatePickerArgs}
+          labels={figmaLabels}
+          defaultViewDate={figmaViewDate}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const Open: Story = {
+  render: function OpenDatePickerStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.canvas}>
+        <DatePicker {...sharedDatePickerArgs} defaultOpen value={value} onChange={setValue} />
+      </View>
+    );
+  },
+};
+
+export const WithLabel: Story = {
+  render: function LabeledDatePickerStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.field}>
+        <DatePicker {...sharedDatePickerArgs} label="Ամսաթիվ" value={value} onChange={setValue} />
+      </View>
+    );
+  },
+};
+
+export const WithError: Story = {
+  render: function ErrorDatePickerStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.field}>
+        <DatePicker
+          {...sharedDatePickerArgs}
+          error="Խնդրում ենք ընտրել ամսաթիվ"
+          invalid
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: function DisabledDatePickerStory() {
+    return (
+      <View style={styles.field}>
+        <DatePicker {...sharedDatePickerArgs} disabled value={figmaSampleDate} />
+      </View>
+    );
+  },
+};
+
+export const Range = {
+  render: function RangeDatePickerStory() {
+    const [value, setValue] = useState<DateRange | undefined>(getSampleRange);
+
+    return (
+      <View style={styles.field}>
+        <DatePicker
+          mode="range"
+          placeholder="Ընտրել ժամանակահատված"
+          locale="hy-AM"
+          defaultViewDate={getCurrentMonthStart()}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+} satisfies StoryObj<DatePickerRangeProps>;
+
+export const RangeOpen = {
+  render: function RangeOpenDatePickerStory() {
+    const [value, setValue] = useState<DateRange | undefined>(getSampleRange);
+
+    return (
+      <View style={styles.canvas}>
+        <DatePicker
+          mode="range"
+          locale="en-US"
+          defaultViewDate={getCurrentMonthStart()}
+          defaultOpen
+          closeOnRangeComplete={false}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+} satisfies StoryObj<DatePickerRangeProps>;
+
+export const RussianLocale: Story = {
+  render: function RussianDatePickerStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.field}>
+        <DatePicker
+          mode="single"
+          locale="ru-RU"
+          defaultViewDate={getCurrentMonthStart()}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const RangeInteractive = {
+  render: function RangeInteractiveDatePickerStory() {
+    const [value, setValue] = useState<DateRange | undefined>(getSampleRange);
+
+    return (
+      <View style={styles.canvas}>
+        <DatePicker
+          mode="range"
+          placeholder="Ընտրել ժամանակահատված"
+          locale="hy-AM"
+          defaultViewDate={getCurrentMonthStart()}
+          defaultOpen
+          closeOnRangeComplete={false}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+} satisfies StoryObj<DatePickerRangeProps>;
+
+const styles = StyleSheet.create({
+  field: {
+    width: 296,
+    maxWidth: "100%",
+  },
+  canvas: {
+    width: 296,
+    maxWidth: "100%",
+    minHeight: 520,
+  },
+});