@ecohouse/ui 0.1.4 → 0.1.6

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,628 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { CalendarOutlineIcon, ChevronLeftIcon } from "../../icons";
+import { colors, datePickerTypography } from "../../theme";
+import {
+  addMonths,
+  formatDate,
+  getMonthMatrix,
+  isBefore,
+  isDateDisabled,
+  isSameDay,
+  isSameMonth,
+  isWithinRange,
+  startOfDay,
+} from "../../utils/dateUtils";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+/** Monday-first — override via `monthNames` for other locales. */
+const DEFAULT_MONTH_NAMES = [
+  "Հունվար",
+  "Փետրվար",
+  "Մարտ",
+  "Ապրիլ",
+  "Մայիս",
+  "Հունիս",
+  "Հուլիս",
+  "Օգոստոս",
+  "Սեպտեմբեր",
+  "Հոկտեմբեր",
+  "Նոյեմբեր",
+  "Դեկտեմբեր",
+];
+/** Monday-first — override via `weekdayLabels` for other locales. */
+const DEFAULT_WEEKDAY_LABELS = ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"];
+
+export type DateRange = { start: Date | null; end: Date | null };
+
+const EMPTY_RANGE: DateRange = { start: null, end: null };
+
+type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
+  placeholder?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  /**
+   * When true (default), the calendar closes after a complete selection —
+   * a single date, or both ends of a range. Set false to keep it open.
+   */
+  closeOnSelect?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  /** First visible month when the calendar opens; defaults to the selected value's month, else today. */
+  defaultVisibleMonth?: Date;
+  /** Monday-first full month names. Defaults to Armenian. */
+  monthNames?: string[];
+  /** Weekday abbreviations, ordered starting from `weekStartsOn`. Defaults to Armenian, Monday-first. */
+  weekdayLabels?: string[];
+  /** Formats a selected date for the trigger and day accessibility labels. Defaults to "DD.MM.YYYY". */
+  formatValue?: (date: Date) => string;
+  /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
+  weekStartsOn?: 0 | 1;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+};
+
+export type DatePickerSingleProps = DatePickerBaseProps & {
+  range?: false;
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (value: Date | null) => void;
+};
+
+export type DatePickerRangeProps = DatePickerBaseProps & {
+  range: true;
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onValueChange?: (value: DateRange) => void;
+};
+
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+
+const DEFAULT_WIDTH = 380;
+const TRIGGER_HEIGHT = 44;
+const TRIGGER_RADIUS = 60;
+const MENU_RADIUS = 20;
+const ICON_SIZE = 20;
+const NAV_ICON_SIZE = 20;
+const DAY_CELL_HEIGHT = 44;
+const DAY_CIRCLE_SIZE = 44;
+
+export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>(
+  function DatePicker(props, forwardedRef) {
+    const {
+      placeholder = "Select date",
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      closeOnSelect = true,
+      minDate,
+      maxDate,
+      defaultVisibleMonth,
+      monthNames = DEFAULT_MONTH_NAMES,
+      weekdayLabels = DEFAULT_WEEKDAY_LABELS,
+      formatValue = formatDate,
+      weekStartsOn = 1,
+      style,
+      className,
+      accessibilityLabel,
+      // Pulled out only to keep them off `rest` (which is spread onto the root View);
+      // the real values are read from `props` directly below to preserve discriminated typing.
+      range: _range,
+      value: _value,
+      defaultValue: _defaultValue,
+      onValueChange: _onValueChange,
+      ...rest
+    } = props;
+
+    const isRange = props.range === true;
+    const valueProp = props.value;
+    const rootRef = useRef<ComponentRef<typeof View>>(null);
+    const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+
+    const isOpenControlled = typeof openProp === "boolean";
+    const isValueControlled = valueProp !== undefined;
+
+    const [uncontrolledSingle, setUncontrolledSingle] = useState<Date | null>(
+      !isRange ? ((props as DatePickerSingleProps).defaultValue ?? null) : null,
+    );
+    const [uncontrolledRange, setUncontrolledRange] = useState<DateRange>(
+      isRange ? ((props as DatePickerRangeProps).defaultValue ?? EMPTY_RANGE) : EMPTY_RANGE,
+    );
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [hoveredDayKey, setHoveredDayKey] = useState<number | null>(null);
+
+    const rangeValue: DateRange = isRange
+      ? isValueControlled
+        ? ((valueProp as DateRange) ?? EMPTY_RANGE)
+        : uncontrolledRange
+      : EMPTY_RANGE;
+    const singleValue: Date | null = !isRange
+      ? isValueControlled
+        ? ((valueProp as Date | null) ?? null)
+        : uncontrolledSingle
+      : null;
+
+    const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
+
+    const [visibleMonth, setVisibleMonth] = useState(() => {
+      const anchor =
+        defaultVisibleMonth ?? (isRange ? rangeValue.start : singleValue) ?? new Date();
+      return new Date(anchor.getFullYear(), anchor.getMonth(), 1);
+    });
+
+    useApplyWebClassName(rootRef, className);
+
+    const setOpen = useCallback(
+      (next: boolean) => {
+        if (!isOpenControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        if (next) {
+          const anchor = (isRange ? rangeValue.start : singleValue) ?? new Date();
+          setVisibleMonth(new Date(anchor.getFullYear(), anchor.getMonth(), 1));
+        } else {
+          setHoveredDayKey(null);
+        }
+      },
+      [isOpenControlled, isRange, onOpenChange, rangeValue.start, singleValue],
+    );
+
+    // Close on outside click (web only; native has no document-level events).
+    useEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+
+      const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+        const root = rootRef.current as unknown as { contains?: (node: Node) => boolean } | null;
+        const target = event.target;
+        if (root?.contains && target instanceof Node && !root.contains(target)) {
+          setOpen(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("touchstart", handlePointerDown);
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("touchstart", handlePointerDown);
+      };
+    }, [isOpen, setOpen]);
+
+    const focusTrigger = useCallback(() => {
+      const node = triggerRef.current as unknown as { focus?: () => void } | null;
+      node?.focus?.();
+    }, []);
+
+    const closeAndFocusTrigger = useCallback(() => {
+      setOpen(false);
+      focusTrigger();
+    }, [focusTrigger, setOpen]);
+
+    // Escape closes the calendar and returns focus to the trigger (web only).
+    useEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeAndFocusTrigger();
+        }
+      };
+
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, closeAndFocusTrigger]);
+
+    const handleTriggerPress = () => {
+      if (disabled) return;
+      setOpen(!isOpen);
+    };
+
+    const handleDayPress = useCallback(
+      (day: Date) => {
+        if (disabled || isDateDisabled(day, minDate, maxDate)) return;
+        const picked = startOfDay(day);
+
+        if (!isRange) {
+          if (!isValueControlled) setUncontrolledSingle(picked);
+          (props as DatePickerSingleProps).onValueChange?.(picked);
+          if (closeOnSelect) setOpen(false);
+          return;
+        }
+
+        const { start, end } = rangeValue;
+        const startingNewRange = !start || (start && end);
+        const nextRange: DateRange = startingNewRange
+          ? { start: picked, end: null }
+          : isBefore(picked, start)
+            ? { start: picked, end: null }
+            : { start, end: picked };
+
+        if (!isValueControlled) setUncontrolledRange(nextRange);
+        (props as DatePickerRangeProps).onValueChange?.(nextRange);
+        if (closeOnSelect && nextRange.start && nextRange.end) setOpen(false);
+      },
+      [
+        closeOnSelect,
+        disabled,
+        isRange,
+        isValueControlled,
+        maxDate,
+        minDate,
+        props,
+        rangeValue,
+        setOpen,
+      ],
+    );
+
+    const handlePrevMonth = () => setVisibleMonth((current) => addMonths(current, -1));
+    const handleNextMonth = () => setVisibleMonth((current) => addMonths(current, 1));
+
+    const weeks = useMemo(
+      () => getMonthMatrix(visibleMonth, weekStartsOn),
+      [visibleMonth, weekStartsOn],
+    );
+    const today = useMemo(() => startOfDay(new Date()), []);
+
+    const hasValue = isRange ? rangeValue.start != null : singleValue != null;
+    const triggerLabel = isRange
+      ? rangeValue.start && rangeValue.end
+        ? `${formatValue(rangeValue.start)} - ${formatValue(rangeValue.end)}`
+        : rangeValue.start
+          ? `${formatValue(rangeValue.start)} - ...`
+          : placeholder
+      : singleValue
+        ? formatValue(singleValue)
+        : placeholder;
+
+    const triggerBorderColor = isOpen ? colors.primaryMuted : colors.grey700;
+    const triggerTextColor = hasValue ? colors.white : colors.grey100;
+
+    const resolvedAccessibilityLabel = accessibilityLabel ?? placeholder;
+
+    return (
+      <View
+        {...rest}
+        ref={setRootRef}
+        style={[styles.root, isOpen && styles.rootOpen, disabled && styles.disabled, style]}
+        accessibilityState={{ disabled, expanded: isOpen }}
+      >
+        <View style={[styles.triggerWrap, isOpen && styles.triggerWrapOpen]}>
+          <Pressable
+            ref={triggerRef}
+            onPress={handleTriggerPress}
+            disabled={disabled}
+            accessibilityRole="button"
+            accessibilityLabel={resolvedAccessibilityLabel}
+            accessibilityState={{ disabled, expanded: isOpen }}
+            style={[
+              styles.trigger,
+              { borderColor: triggerBorderColor, backgroundColor: colors.grey700 },
+            ]}
+          >
+            <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
+              {triggerLabel}
+            </Text>
+            <View style={styles.iconSlot}>
+              <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
+            </View>
+          </Pressable>
+
+          {isOpen ? (
+            <View style={styles.menu}>
+              <View style={styles.calendarHeader}>
+                <Pressable
+                  onPress={handlePrevMonth}
+                  hitSlop={8}
+                  accessibilityRole="button"
+                  accessibilityLabel="Previous month"
+                  style={styles.navButton}
+                >
+                  <ChevronLeftIcon size={NAV_ICON_SIZE} color={colors.white} />
+                </Pressable>
+
+                <Text style={styles.monthHeading}>
+                  {monthNames[visibleMonth.getMonth()]} {visibleMonth.getFullYear()}
+                </Text>
+
+                <Pressable
+                  onPress={handleNextMonth}
+                  hitSlop={8}
+                  accessibilityRole="button"
+                  accessibilityLabel="Next month"
+                  style={styles.navButton}
+                >
+                  <View style={styles.navIconMirror}>
+                    <ChevronLeftIcon size={NAV_ICON_SIZE} color={colors.white} />
+                  </View>
+                </Pressable>
+              </View>
+
+              <View>
+                <View style={styles.weekdayRow}>
+                  {weekdayLabels.map((weekdayLabel, index) => (
+                    <View key={`${weekdayLabel}-${index}`} style={styles.dayCellWrap}>
+                      <Text style={styles.weekdayText}>{weekdayLabel}</Text>
+                    </View>
+                  ))}
+                </View>
+
+                {weeks.map((week, weekIndex) => {
+                  let rangeHighlightStyle: { left: `${number}%`; width: `${number}%` } | null =
+                    null;
+
+                  if (isRange && rangeValue.start && rangeValue.end) {
+                    const rangeIndices = week.reduce<number[]>((acc, day, index) => {
+                      if (isWithinRange(day, rangeValue.start as Date, rangeValue.end as Date)) {
+                        acc.push(index);
+                      }
+                      return acc;
+                    }, []);
+
+                    if (rangeIndices.length > 0) {
+                      const first = rangeIndices[0];
+                      const last = rangeIndices[rangeIndices.length - 1];
+                      const startsHere = isSameDay(week[first], rangeValue.start);
+                      const endsHere = isSameDay(week[last], rangeValue.end);
+                      // Half a cell so the bar meets the circle center, not past it.
+                      const cellPct = 100 / 7;
+                      const halfCellPct = cellPct / 2;
+                      let leftPct = first * cellPct;
+                      let widthPct = (last - first + 1) * cellPct;
+                      if (startsHere) {
+                        leftPct += halfCellPct;
+                        widthPct -= halfCellPct;
+                      }
+                      if (endsHere) {
+                        widthPct -= halfCellPct;
+                      }
+                      // Same-day range: only the circle, no connector bar.
+                      if (widthPct > 0) {
+                        rangeHighlightStyle = {
+                          left: `${leftPct}%`,
+                          width: `${widthPct}%`,
+                        };
+                      }
+                    }
+                  }
+
+                  return (
+                    <View
+                      key={weekIndex}
+                      style={[styles.weekRow, weekIndex > 0 && styles.weekRowSpaced]}
+                    >
+                      {rangeHighlightStyle ? (
+                        <View
+                          pointerEvents="none"
+                          style={[styles.rangeHighlight, rangeHighlightStyle]}
+                        />
+                      ) : null}
+
+                      {week.map((day, dayIndex) => {
+                        const inCurrentMonth = isSameMonth(day, visibleMonth);
+                        const isToday = isSameDay(day, today);
+                        const isSelectedSingle = !isRange && isSameDay(day, singleValue);
+                        const isRangeStart = isRange && isSameDay(day, rangeValue.start);
+                        const isRangeEnd = isRange && isSameDay(day, rangeValue.end);
+                        const isSelectedEndpoint = isSelectedSingle || isRangeStart || isRangeEnd;
+                        const dayDisabled = disabled || isDateDisabled(day, minDate, maxDate);
+                        const dayKey = startOfDay(day).getTime();
+                        const isHovered =
+                          !dayDisabled && !isSelectedEndpoint && hoveredDayKey === dayKey;
+
+                        const dayTextColor = isSelectedEndpoint
+                          ? colors.white
+                          : dayDisabled
+                            ? colors.grey400
+                            : isToday
+                              ? colors.primary
+                              : !inCurrentMonth
+                                ? colors.grey300
+                                : colors.white;
+
+                        return (
+                          <Pressable
+                            key={dayIndex}
+                            onPress={() => handleDayPress(day)}
+                            disabled={dayDisabled}
+                            onHoverIn={() => setHoveredDayKey(dayKey)}
+                            onHoverOut={() =>
+                              setHoveredDayKey((current) => (current === dayKey ? null : current))
+                            }
+                            onPressIn={() => setHoveredDayKey(dayKey)}
+                            onPressOut={() =>
+                              setHoveredDayKey((current) => (current === dayKey ? null : current))
+                            }
+                            style={styles.dayCellWrap}
+                            accessibilityRole="button"
+                            accessibilityLabel={formatValue(day)}
+                            accessibilityState={{
+                              disabled: dayDisabled,
+                              selected: isSelectedEndpoint,
+                            }}
+                          >
+                            <View
+                              style={[
+                                styles.dayCircle,
+                                isSelectedEndpoint && styles.dayCircleSelected,
+                                isHovered && styles.dayCircleHovered,
+                              ]}
+                            >
+                              <Text style={[styles.dayText, { color: dayTextColor }]}>
+                                {day.getDate()}
+                              </Text>
+                            </View>
+                            {isToday && !isSelectedEndpoint ? (
+                              <View style={styles.todayDot} />
+                            ) : null}
+                          </Pressable>
+                        );
+                      })}
+                    </View>
+                  );
+                })}
+              </View>
+            </View>
+          ) : null}
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH,
+    gap: 8,
+    alignSelf: "flex-start",
+  },
+  rootOpen: {
+    zIndex: 30,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  triggerWrap: {
+    position: "relative",
+    zIndex: 1,
+  },
+  triggerWrapOpen: {
+    zIndex: 20,
+  },
+  trigger: {
+    height: TRIGGER_HEIGHT,
+    borderRadius: TRIGGER_RADIUS,
+    borderWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    overflow: "hidden",
+  },
+  triggerText: {
+    ...datePickerTypography.field,
+    flex: 1,
+    minWidth: 0,
+  },
+  iconSlot: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 8,
+    zIndex: 10,
+    borderRadius: MENU_RADIUS,
+    padding: 12,
+    gap: 0,
+    backgroundColor: colors.grey700,
+    ...Platform.select({
+      web: {
+        boxShadow: `0 8px 24px ${colors.black}73`,
+      },
+      default: {
+        elevation: 8,
+      },
+    }),
+  },
+  calendarHeader: {
+    height: 36,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  navButton: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  navIconMirror: {
+    transform: [{ scaleX: -1 }],
+  },
+  monthHeading: {
+    ...datePickerTypography.monthHeading,
+    color: colors.white,
+    textAlign: "center",
+  },
+  weekdayRow: {
+    flexDirection: "row",
+  },
+  weekdayText: {
+    ...datePickerTypography.weekday,
+    color: colors.grey300,
+    textAlign: "center",
+    textTransform: "uppercase",
+  },
+  weekRow: {
+    flexDirection: "row",
+    position: "relative",
+  },
+  weekRowSpaced: {
+    marginTop: 8,
+  },
+  rangeHighlight: {
+    position: "absolute",
+    top: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
+    bottom: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
+    borderRadius: DAY_CIRCLE_SIZE / 2,
+    backgroundColor: colors.primaryHover,
+  },
+  dayCellWrap: {
+    flex: 1,
+    height: DAY_CELL_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dayCircle: {
+    width: DAY_CIRCLE_SIZE,
+    height: DAY_CIRCLE_SIZE,
+    borderRadius: DAY_CIRCLE_SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dayCircleSelected: {
+    backgroundColor: colors.primary,
+  },
+  dayCircleHovered: {
+    backgroundColor: colors.grey600,
+  },
+  dayText: {
+    ...datePickerTypography.day,
+  },
+  todayDot: {
+    position: "absolute",
+    bottom: 2,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: colors.primary,
+  },
+});

package/src/components/DatePicker/index.ts

@@ -0,0 +1,7 @@
+export { DatePicker } from "./DatePicker";
+export type {
+  DatePickerProps,
+  DatePickerSingleProps,
+  DatePickerRangeProps,
+  DateRange,
+} from "./DatePicker";

package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { LayoutGridIcon } from "../../icons";
+import { SegmentedToggle } from "./SegmentedToggle";
+
+const optionsWithIcons = [
+  { value: "grid", label: "Label", icon: LayoutGridIcon },
+  { value: "list", label: "Label", icon: LayoutGridIcon },
+] as const;
+
+const optionsWithoutIcons = [
+  { value: "first", label: "Label" },
+  { value: "second", label: "Label" },
+] as const;
+
+const meta = {
+  title: "Components/SegmentedToggle",
+  component: SegmentedToggle,
+  args: {
+    options: optionsWithIcons,
+    defaultValue: "grid",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof SegmentedToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithIcons: Story = {};
+
+export const WithoutIcons: Story = {
+  args: { options: optionsWithoutIcons, defaultValue: "first" },
+};
+
+export const ContentWidth: Story = {
+  args: { fullWidth: false },
+};
+
+export const In400PixelContainer: Story = {
+  render: () => (
+    <View style={storyStyles.container}>
+      <SegmentedToggle options={optionsWithIcons} defaultValue="grid" />
+    </View>
+  ),
+};
+
+function ControlledSegmentedToggle() {
+  const [value, setValue] = useState("grid");
+  return <SegmentedToggle options={optionsWithIcons} value={value} onValueChange={setValue} />;
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledSegmentedToggle />,
+};
+
+const storyStyles = StyleSheet.create({
+  container: {
+    width: 400,
+  },
+});