@scripso-homepad/ui 0.4.2 → 0.4.3

package/src/utils/calendarDays.ts

@@ -0,0 +1,273 @@
+export function stripTime(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export type DateRange = {
+  start: Date;
+  end?: Date;
+};
+
+export function normalizeDateRange(range?: DateRange): { start?: Date; end?: Date } {
+  if (!range?.start) {
+    return {};
+  }
+
+  const start = stripTime(range.start);
+
+  if (!range.end) {
+    return { start };
+  }
+
+  const end = stripTime(range.end);
+
+  if (isBeforeDay(end, start)) {
+    return { start: end, end: start };
+  }
+
+  return { start, end };
+}
+
+export function isInDateRange(date: Date, start?: Date, end?: Date): boolean {
+  if (!start) {
+    return false;
+  }
+
+  const day = stripTime(date);
+
+  if (!end) {
+    return isSameDay(day, start);
+  }
+
+  return !isBeforeDay(day, start) && !isAfterDay(day, end);
+}
+
+export function selectRangeDate(clicked: Date, current?: DateRange): DateRange {
+  const clickedDate = stripTime(clicked);
+
+  if (!current?.start || current.end) {
+    return { start: clickedDate };
+  }
+
+  const start = stripTime(current.start);
+
+  if (isSameDay(clickedDate, start)) {
+    return { start, end: clickedDate };
+  }
+
+  if (isBeforeDay(clickedDate, start)) {
+    return { start: clickedDate };
+  }
+
+  return { start, end: clickedDate };
+}
+
+export function isSameDay(left: Date, right: Date): boolean {
+  return (
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate()
+  );
+}
+
+export function isBeforeDay(left: Date, right: Date): boolean {
+  return stripTime(left).getTime() < stripTime(right).getTime();
+}
+
+export function isAfterDay(left: Date, right: Date): boolean {
+  return stripTime(left).getTime() > stripTime(right).getTime();
+}
+
+export function addMonths(date: Date, amount: number): Date {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+
+export function isDateDisabled(
+  date: Date,
+  minDate?: Date,
+  maxDate?: Date,
+): boolean {
+  if (minDate && isBeforeDay(date, minDate)) {
+    return true;
+  }
+
+  if (maxDate && isAfterDay(date, maxDate)) {
+    return true;
+  }
+
+  return false;
+}
+
+export type CalendarDayCell = {
+  date: Date;
+  inCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  isRangeStart: boolean;
+  isRangeEnd: boolean;
+  isInRange: boolean;
+  isPast: boolean;
+  isDisabled: boolean;
+};
+
+const CALENDAR_VISIBLE_DAY_COUNT = 42;
+const MONDAY_WEEK_START = 1;
+
+export function buildCalendarDays({
+  viewDate,
+  selectedDate,
+  selectedRange,
+  today,
+  minDate,
+  maxDate,
+}: {
+  viewDate: Date;
+  selectedDate?: Date;
+  selectedRange?: DateRange;
+  today: Date;
+  minDate?: Date;
+  maxDate?: Date;
+}): CalendarDayCell[] {
+  const { start: rangeStart, end: rangeEnd } = normalizeDateRange(selectedRange);
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const startOffset = (firstOfMonth.getDay() - MONDAY_WEEK_START + 7) % 7;
+  const gridStart = new Date(year, month, 1 - startOffset);
+  const days: CalendarDayCell[] = [];
+
+  for (let index = 0; index < CALENDAR_VISIBLE_DAY_COUNT; index += 1) {
+    const date = new Date(
+      gridStart.getFullYear(),
+      gridStart.getMonth(),
+      gridStart.getDate() + index,
+    );
+    const inCurrentMonth = date.getMonth() === month;
+    const isPast = inCurrentMonth && isBeforeDay(date, today);
+    const isDisabled = isDateDisabled(date, minDate, maxDate);
+    const isRangeStart = rangeStart ? isSameDay(date, rangeStart) : false;
+    const isRangeEnd = rangeEnd ? isSameDay(date, rangeEnd) : false;
+    const inSelectedRange =
+      rangeStart && rangeEnd ? isInDateRange(date, rangeStart, rangeEnd) : false;
+    const isInRange = inSelectedRange && !isRangeStart && !isRangeEnd;
+    const isSelected = selectedDate
+      ? isSameDay(date, selectedDate)
+      : inSelectedRange || Boolean(rangeStart && !rangeEnd && isRangeStart);
+
+    days.push({
+      date,
+      inCurrentMonth,
+      isToday: isSameDay(date, today),
+      isSelected,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+      isPast,
+      isDisabled,
+    });
+  }
+
+  return days;
+}
+
+export function formatCalendarMonthYear(date: Date, locale: string): string {
+  const formatted = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    year: "numeric",
+  }).format(date);
+
+  return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+}
+
+export function formatCalendarYear(year: number, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date(year, 0, 1));
+}
+
+export function getMonthLabels(locale: string): string[] {
+  return Array.from({ length: 12 }, (_, month) => {
+    const label = new Intl.DateTimeFormat(locale, { month: "short" }).format(
+      new Date(2024, month, 1),
+    );
+    const normalized = label.replace(/\./g, "");
+
+    return normalized.charAt(0).toUpperCase() + normalized.slice(1);
+  });
+}
+
+export function getYearPageStart(year: number, yearsPerPage = 12): number {
+  return Math.floor(year / yearsPerPage) * yearsPerPage;
+}
+
+export function isMonthDisabled(
+  year: number,
+  month: number,
+  minDate?: Date,
+  maxDate?: Date,
+): boolean {
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+
+  if (minDate && isBeforeDay(lastDay, minDate)) {
+    return true;
+  }
+
+  if (maxDate && isAfterDay(firstDay, maxDate)) {
+    return true;
+  }
+
+  return false;
+}
+
+export function isYearDisabled(year: number, minDate?: Date, maxDate?: Date): boolean {
+  const firstDay = new Date(year, 0, 1);
+  const lastDay = new Date(year, 11, 31);
+
+  if (minDate && isBeforeDay(lastDay, minDate)) {
+    return true;
+  }
+
+  if (maxDate && isAfterDay(firstDay, maxDate)) {
+    return true;
+  }
+
+  return false;
+}
+
+export function formatCalendarDate(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  }).format(date);
+}
+
+export function formatCalendarDateRange(
+  range: DateRange,
+  locale: string,
+  separator = " – ",
+): string {
+  const { start, end } = normalizeDateRange(range);
+
+  if (!start) {
+    return "";
+  }
+
+  if (!end) {
+    return formatCalendarDate(start, locale);
+  }
+
+  return `${formatCalendarDate(start, locale)}${separator}${formatCalendarDate(end, locale)}`;
+}
+
+/** @deprecated Use `resolveWeekdayLabels` from `calendarLocalization`; calendars are Monday-first. */
+export function getDefaultWeekdayLabels(locale: string): string[] {
+  const labels: string[] = [];
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+
+  for (let index = 0; index < 7; index += 1) {
+    const day = new Date(2024, 0, index + 1);
+    const label = formatter.format(day).replace(/\./g, "").toUpperCase();
+    labels.push(label.slice(0, 2));
+  }
+
+  return labels;
+}

package/src/utils/calendarLocaleContext.tsx

@@ -0,0 +1,95 @@
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+import { resolveCalendarLocale, type CalendarLocale } from "./calendarLocalization";
+
+const LOCALE_STORAGE_KEY = "homepad.locale";
+const LOCALE_CHANGE_EVENT = "homepad:locale-change";
+const DEFAULT_CALENDAR_LOCALE: CalendarLocale = "hy-AM";
+
+const CalendarLocaleContext = createContext<string | undefined>(undefined);
+
+export type CalendarLocaleProviderProps = {
+  locale: string;
+  children: ReactNode;
+};
+
+export function CalendarLocaleProvider({ locale, children }: CalendarLocaleProviderProps) {
+  return (
+    <CalendarLocaleContext.Provider value={locale}>{children}</CalendarLocaleContext.Provider>
+  );
+}
+
+function normalizeProjectLocale(locale: string | null | undefined): CalendarLocale | null {
+  if (!locale) {
+    return null;
+  }
+
+  return resolveCalendarLocale(locale);
+}
+
+function readBrowserLocale(): CalendarLocale | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  let storedLocale: CalendarLocale | null = null;
+
+  try {
+    storedLocale = normalizeProjectLocale(window.localStorage.getItem(LOCALE_STORAGE_KEY));
+  } catch {
+    storedLocale = null;
+  }
+
+  if (storedLocale) {
+    return storedLocale;
+  }
+
+  const documentLocale = normalizeProjectLocale(window.document?.documentElement.lang);
+  if (documentLocale) {
+    return documentLocale;
+  }
+
+  return normalizeProjectLocale(window.navigator.language);
+}
+
+export function useCalendarLocale(locale?: string): CalendarLocale {
+  const contextLocale = useContext(CalendarLocaleContext);
+  const controlledLocale = locale ?? contextLocale;
+  const [browserLocale, setBrowserLocale] = useState<CalendarLocale>(() =>
+    readBrowserLocale() ?? DEFAULT_CALENDAR_LOCALE,
+  );
+
+  useEffect(() => {
+    if (controlledLocale !== undefined || typeof window === "undefined") {
+      return;
+    }
+
+    const syncLocale = () => {
+      setBrowserLocale(readBrowserLocale() ?? DEFAULT_CALENDAR_LOCALE);
+    };
+
+    const handleLocaleChange = (event: Event) => {
+      const customEvent = event as CustomEvent<string>;
+      const nextLocale = normalizeProjectLocale(customEvent.detail);
+
+      if (nextLocale) {
+        setBrowserLocale(nextLocale);
+        return;
+      }
+
+      syncLocale();
+    };
+
+    window.addEventListener(LOCALE_CHANGE_EVENT, handleLocaleChange);
+    window.addEventListener("storage", syncLocale);
+
+    return () => {
+      window.removeEventListener(LOCALE_CHANGE_EVENT, handleLocaleChange);
+      window.removeEventListener("storage", syncLocale);
+    };
+  }, [controlledLocale]);
+
+  return useMemo(
+    () => normalizeProjectLocale(controlledLocale) ?? browserLocale,
+    [browserLocale, controlledLocale],
+  );
+}

package/src/utils/calendarLocalization.ts

@@ -0,0 +1,187 @@
+export type CalendarLocale = "hy-AM" | "en-US" | "ru-RU";
+
+export type CalendarTranslationKey =
+  | "datePlaceholder"
+  | "rangePlaceholder"
+  | "previousMonth"
+  | "nextMonth"
+  | "previousYear"
+  | "nextYear"
+  | "previousYears"
+  | "nextYears"
+  | "selectMonth"
+  | "selectYear"
+  | "closeCalendar";
+
+export type CalendarTranslations = Record<CalendarTranslationKey, string> & {
+  /** Weekday labels in Monday-first order. */
+  weekdays: string[];
+  /** Short month labels used in compact calendar headers and month picker cells. */
+  monthsShort: string[];
+  /** Full month labels available for consumers that need long-form display. */
+  monthsLong: string[];
+};
+
+export const calendarTranslations: Record<CalendarLocale, CalendarTranslations> = {
+  "hy-AM": {
+    weekdays: ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"],
+    monthsShort: [
+      "Հնվ",
+      "Փտվ",
+      "Մրտ",
+      "Ապր",
+      "Մյս",
+      "Հուն",
+      "Հուլ",
+      "Օգս",
+      "Սեպ",
+      "Հոկ",
+      "Նոյ",
+      "Դեկ",
+    ],
+    monthsLong: [
+      "Հունվար",
+      "Փետրվար",
+      "Մարտ",
+      "Ապրիլ",
+      "Մայիս",
+      "Հունիս",
+      "Հուլիս",
+      "Օգոստոս",
+      "Սեպտեմբեր",
+      "Հոկտեմբեր",
+      "Նոյեմբեր",
+      "Դեկտեմբեր",
+    ],
+    datePlaceholder: "Ընտրել ամսաթիվ",
+    rangePlaceholder: "Ընտրել ժամանակահատված",
+    previousMonth: "Նախորդ ամիս",
+    nextMonth: "Հաջորդ ամիս",
+    previousYear: "Նախորդ տարի",
+    nextYear: "Հաջորդ տարի",
+    previousYears: "Նախորդ տարիներ",
+    nextYears: "Հաջորդ տարիներ",
+    selectMonth: "Ընտրել ամիս",
+    selectYear: "Ընտրել տարի",
+    closeCalendar: "Փակել օրացույցը",
+  },
+  "en-US": {
+    weekdays: ["MO", "TU", "WE", "TH", "FR", "SA", "SU"],
+    monthsShort: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+    monthsLong: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+    datePlaceholder: "Select date",
+    rangePlaceholder: "Select date range",
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+    previousYear: "Previous year",
+    nextYear: "Next year",
+    previousYears: "Previous years",
+    nextYears: "Next years",
+    selectMonth: "Select month",
+    selectYear: "Select year",
+    closeCalendar: "Close calendar",
+  },
+  "ru-RU": {
+    weekdays: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
+    monthsShort: [
+      "Янв",
+      "Фев",
+      "Мар",
+      "Апр",
+      "Май",
+      "Июн",
+      "Июл",
+      "Авг",
+      "Сен",
+      "Окт",
+      "Ноя",
+      "Дек",
+    ],
+    monthsLong: [
+      "Январь",
+      "Февраль",
+      "Март",
+      "Апрель",
+      "Май",
+      "Июнь",
+      "Июль",
+      "Август",
+      "Сентябрь",
+      "Октябрь",
+      "Ноябрь",
+      "Декабрь",
+    ],
+    datePlaceholder: "Выбрать дату",
+    rangePlaceholder: "Выбрать период",
+    previousMonth: "Предыдущий месяц",
+    nextMonth: "Следующий месяц",
+    previousYear: "Предыдущий год",
+    nextYear: "Следующий год",
+    previousYears: "Предыдущие годы",
+    nextYears: "Следующие годы",
+    selectMonth: "Выбрать месяц",
+    selectYear: "Выбрать год",
+    closeCalendar: "Закрыть календарь",
+  },
+};
+
+export function resolveCalendarLocale(locale: string): CalendarLocale {
+  const normalizedLocale = locale.toLowerCase();
+
+  if (normalizedLocale.startsWith("hy")) {
+    return "hy-AM";
+  }
+
+  if (normalizedLocale.startsWith("ru")) {
+    return "ru-RU";
+  }
+
+  return "en-US";
+}
+
+export function getCalendarTranslations(locale: string): CalendarTranslations {
+  return calendarTranslations[resolveCalendarLocale(locale)];
+}
+
+export function resolveWeekdayLabels(locale: string): string[] {
+  return getCalendarTranslations(locale).weekdays;
+}
+
+export function getCalendarMonthLabels(
+  locale: string,
+  width: "short" | "long" = "short",
+): string[] {
+  const translations = getCalendarTranslations(locale);
+
+  return width === "short" ? translations.monthsShort : translations.monthsLong;
+}
+
+export function formatLocalizedCalendarMonthYear(date: Date, locale: string): string {
+  return `${getCalendarMonthLabels(locale)[date.getMonth()]} ${date.getFullYear()}`;
+}

package/src/utils/countryDropdownScrollStyles.ts

@@ -2,51 +2,91 @@ import { Platform } from "react-native";
 import { colors } from "../theme/tokens";
 
 export const COUNTRY_DROPDOWN_SCROLL_CLASS = "hp-country-dropdown-scroll";
+export const SELECT_DROPDOWN_SCROLL_CLASS = "hp-select-dropdown-scroll";
 
-const STYLE_ID = "hp-country-dropdown-scroll-styles";
+const STYLE_ID = "hp-dropdown-scroll-styles";
 
-export const countryDropdownScrollCss = `
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS} {
+function createDropdownScrollCss(className: string): string {
+  return `
+  .${className} {
     scrollbar-width: thin;
     scrollbar-color: ${colors.stormGray300} transparent;
     overflow-y: auto;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar {
+  .${className}::-webkit-scrollbar {
     width: 4px;
+    -webkit-appearance: none;
+    appearance: none;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-corner {
+  .${className}::-webkit-scrollbar-corner {
     background: transparent;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:single-button,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:start:decrement,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:end:increment {
+  .${className}::-webkit-scrollbar-button,
+  .${className}::-webkit-scrollbar-button:single-button,
+  .${className}::-webkit-scrollbar-button:double-button,
+  .${className}::-webkit-scrollbar-button:horizontal:decrement,
+  .${className}::-webkit-scrollbar-button:horizontal:increment,
+  .${className}::-webkit-scrollbar-button:horizontal:start:decrement,
+  .${className}::-webkit-scrollbar-button:horizontal:end:increment,
+  .${className}::-webkit-scrollbar-button:vertical:decrement,
+  .${className}::-webkit-scrollbar-button:vertical:increment,
+  .${className}::-webkit-scrollbar-button:vertical:start:decrement,
+  .${className}::-webkit-scrollbar-button:vertical:end:increment,
+  .${className}::-webkit-scrollbar-button:start:decrement,
+  .${className}::-webkit-scrollbar-button:end:increment,
+  .${className}::-webkit-scrollbar-button:decrement,
+  .${className}::-webkit-scrollbar-button:increment {
     display: none;
     width: 0;
     height: 0;
+    max-width: 0;
+    max-height: 0;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: transparent;
     -webkit-appearance: none;
     appearance: none;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-track {
+  .${className}::-webkit-scrollbar-track {
     background: transparent;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-thumb {
+  .${className}::-webkit-scrollbar-thumb {
     background-color: ${colors.stormGray300};
     border-radius: 9999px;
   }
 `;
+}
 
-export function ensureCountryDropdownScrollStyles(): void {
+export const dropdownScrollCss = [
+  createDropdownScrollCss(COUNTRY_DROPDOWN_SCROLL_CLASS),
+  createDropdownScrollCss(SELECT_DROPDOWN_SCROLL_CLASS),
+].join("\n");
+
+/** @deprecated Use `dropdownScrollCss` */
+export const countryDropdownScrollCss = dropdownScrollCss;
+
+export function ensureDropdownScrollStyles(): void {
   if (Platform.OS !== "web" || typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) return;
 
   const style = document.createElement("style");
   style.id = STYLE_ID;
-  style.textContent = countryDropdownScrollCss;
+  style.textContent = dropdownScrollCss;
   document.head.appendChild(style);
 }
+
+export function ensureCountryDropdownScrollStyles(): void {
+  ensureDropdownScrollStyles();
+}
+
+export function ensureSelectDropdownScrollStyles(): void {
+  ensureDropdownScrollStyles();
+}