@scripso-homepad/ui 0.4.1 → 0.4.3

package/src/theme/select.ts

@@ -0,0 +1,249 @@
+import { Dimensions, Platform, StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import {
+  resolveInputVisualState,
+  type InputStateFlags,
+  type InputVisualState,
+} from "./input";
+import { colors, fonts, fontSize, fontWeight, radii, spacing } from "./tokens";
+
+export const SELECT_HEIGHT = 52;
+export const SELECT_PADDING = 16;
+export const SELECT_INNER_GAP = 10;
+export const SELECT_ICON_SIZE = 20;
+export const SELECT_LABEL_GAP = spacing.sm;
+export const SELECT_DROPDOWN_GAP = spacing.sm;
+export const SELECT_DROPDOWN_PADDING = spacing.sm;
+export const SELECT_DROPDOWN_MAX_HEIGHT = 317;
+export const SELECT_OPTION_HEIGHT = 43;
+export const SELECT_OPTION_GAP = spacing.sm;
+export const SELECT_CHEVRON_SIZE = 20;
+export const SELECT_CHEVRON_COLOR = colors.stormGray150;
+export const SELECT_CHEVRON_ROTATION_MS = 200;
+
+export { resolveInputVisualState };
+export type { InputStateFlags, InputVisualState };
+
+export const selectLabelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0,
+  color: colors.slateBlue,
+} as const;
+
+export const selectValueTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.md,
+  fontWeight: fontWeight.regular,
+  lineHeight: fontSize.md,
+  letterSpacing: 0,
+  textAlign: "left",
+} as const;
+
+interface SelectFieldStyleSet {
+  container: ViewStyle;
+  outline: ViewStyle;
+  value: TextStyle;
+  placeholder: string;
+  icon: string;
+}
+
+const INPUT_OUTLINE_WIDTH = 2;
+
+function createOutlineStyle(ringColor: string): ViewStyle {
+  return {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderColor: ringColor,
+    padding: 0,
+    backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
+  };
+}
+
+const defaultOutline = createOutlineStyle(colors.transparent);
+
+export function getSelectFieldStyles(state: InputVisualState): SelectFieldStyleSet {
+  const containerBase: ViewStyle = {
+    borderRadius: radii.lg,
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
+  };
+
+  const valueBase: TextStyle = {
+    ...selectValueTypography,
+    color: colors.slateBlue,
+  };
+
+  switch (state) {
+    case "disabled":
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.stormGray50,
+        },
+        value: { ...valueBase, color: colors.stormGray300 },
+        placeholder: colors.stormGray300,
+        icon: colors.stormGray150,
+      };
+    case "error":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineError),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.inputError,
+          backgroundColor: colors.white,
+        },
+        value: { ...valueBase, color: colors.inputError },
+        placeholder: colors.stormGray200,
+        icon: colors.inputError,
+      };
+    case "focused":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineFocus),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white,
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.navy,
+      };
+    default:
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white,
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150,
+      };
+  }
+}
+
+export const selectFieldMetrics = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: SELECT_HEIGHT,
+    minHeight: SELECT_HEIGHT,
+    maxHeight: SELECT_HEIGHT,
+    borderRadius: radii.lg,
+    padding: SELECT_PADDING,
+    gap: SELECT_INNER_GAP,
+    ...(Platform.OS === "web"
+      ? ({
+          boxSizing: "border-box",
+        } as ViewStyle)
+      : null),
+  },
+  value: {
+    flex: 1,
+    minWidth: 0,
+    ...selectValueTypography,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    ...(Platform.OS === "android" ? { includeFontPadding: false } : null),
+    ...(Platform.OS === "web"
+      ? ({
+          outlineStyle: "none",
+        } as TextStyle)
+      : null),
+  },
+});
+
+export const selectDropdownMetrics = StyleSheet.create({
+  menu: {
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: SELECT_DROPDOWN_PADDING,
+    overflow: "hidden",
+  },
+  option: {
+    width: "100%",
+    height: SELECT_OPTION_HEIGHT,
+    minHeight: SELECT_OPTION_HEIGHT,
+    maxHeight: SELECT_OPTION_HEIGHT,
+    paddingTop: 12,
+    paddingRight: spacing.sm,
+    paddingBottom: 12,
+    paddingLeft: spacing.sm,
+    justifyContent: "center",
+    alignItems: "flex-start",
+  },
+  optionLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.md,
+    letterSpacing: 0,
+    textAlign: "left",
+    color: colors.slateBlue,
+    width: "100%",
+  },
+  optionLabelSelected: {
+    fontWeight: fontWeight.medium,
+    color: colors.slateBlue,
+  },
+  optionSelected: {
+    opacity: 1,
+    borderRadius: radii.sm,
+    paddingTop: 12,
+    paddingRight: spacing.sm,
+    paddingBottom: 12,
+    paddingLeft: spacing.sm,
+    backgroundColor: colors.countrySelectorSelectedBg,
+  },
+  optionHighlighted: {
+    backgroundColor: colors.stormGray0,
+  },
+});
+
+export function resolveSelectDropdownHeight(optionCount: number): number {
+  const contentHeight =
+    optionCount * SELECT_OPTION_HEIGHT +
+    Math.max(0, optionCount - 1) * SELECT_OPTION_GAP +
+    SELECT_DROPDOWN_PADDING * 2;
+
+  return Math.min(contentHeight, SELECT_DROPDOWN_MAX_HEIGHT);
+}
+
+export function resolveSelectDropdownTop(
+  anchor: { y: number; height: number },
+  dropdownHeight: number,
+): number {
+  const windowHeight = Dimensions.get("window").height;
+  const spaceBelow = windowHeight - (anchor.y + anchor.height + SELECT_DROPDOWN_GAP);
+  const spaceAbove = anchor.y - SELECT_DROPDOWN_GAP;
+  const topBelow = anchor.y + anchor.height + SELECT_DROPDOWN_GAP;
+  const topAbove = anchor.y - SELECT_DROPDOWN_GAP - dropdownHeight;
+
+  if (spaceBelow >= dropdownHeight) {
+    return topBelow;
+  }
+
+  if (spaceAbove >= dropdownHeight) {
+    return topAbove;
+  }
+
+  if (spaceAbove > spaceBelow) {
+    return Math.max(0, topAbove);
+  }
+
+  return Math.max(0, Math.min(topBelow, windowHeight - dropdownHeight));
+}

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],
+  );
+}