@ecohouse/ui 0.1.52 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/DatePicker/DatePicker.tsx

@@ -53,6 +53,21 @@ const DEFAULT_MONTH_NAMES = [
 /** Monday-first — override via `weekdayLabels` for other locales. */
 const DEFAULT_WEEKDAY_LABELS = ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"];
 
+function rangeIncludesUnavailable(
+  start: Date,
+  end: Date,
+  isUnavailable: (day: Date) => boolean,
+): boolean {
+  const cursor = startOfDay(start);
+  const last = startOfDay(end);
+  const step = isBefore(last, cursor) ? -1 : 1;
+  while (true) {
+    if (isUnavailable(cursor)) return true;
+    if (isSameDay(cursor, last)) return false;
+    cursor.setDate(cursor.getDate() + step);
+  }
+}
+
 export type DateRange = { start: Date | null; end: Date | null };
 export type DatePickerVariant = "default" | "range-horizontal" | "range-vertical";
 
@@ -82,6 +97,15 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   closeOnSelect?: boolean;
   minDate?: Date;
   maxDate?: Date;
+  /** Calendar days that cannot be selected, such as dates already booked. */
+  unavailableDates?: readonly Date[];
+  /**
+   * When true, unavailable days cannot be selected and a range cannot include them.
+   * Defaults to false so booked days can stay visual-only.
+   */
+  blockUnavailableDates?: boolean;
+  /** Accessibility label for an unavailable day. */
+  unavailableDateLabel?: string;
   /** 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. */
@@ -183,6 +207,9 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       closeOnSelect = true,
       minDate,
       maxDate,
+      unavailableDates,
+      unavailableDateLabel = "Booked",
+      blockUnavailableDates = false,
       defaultVisibleMonth,
       monthNames = DEFAULT_MONTH_NAMES,
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
@@ -202,6 +229,19 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       ...rest
     } = props;
 
+    const unavailableDayKeys = useMemo(() => {
+      const keys = new Set<number>();
+      for (const date of unavailableDates ?? []) {
+        keys.add(startOfDay(date).getTime());
+      }
+      return keys;
+    }, [unavailableDates]);
+
+    const isUnavailable = useCallback(
+      (day: Date) => unavailableDayKeys.has(startOfDay(day).getTime()),
+      [unavailableDayKeys],
+    );
+
     const isRange = props.range === true;
     const usesRangeTrigger = isRange && variant !== "default";
     const formatValue =
@@ -343,6 +383,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
     const handleDayPress = useCallback(
       (day: Date) => {
         if (disabled || isDateDisabled(day, minDate, maxDate)) return;
+        if (blockUnavailableDates && isUnavailable(day)) return;
         const picked = startOfDay(day);
 
         if (!isRange) {
@@ -360,14 +401,25 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
             ? { start: picked, end: null }
             : { start, end: picked };
 
+        if (
+          blockUnavailableDates &&
+          nextRange.start &&
+          nextRange.end &&
+          rangeIncludesUnavailable(nextRange.start, nextRange.end, isUnavailable)
+        ) {
+          return;
+        }
+
         if (!isValueControlled) setUncontrolledRange(nextRange);
         (props as DatePickerRangeProps).onValueChange?.(nextRange);
         if (closeOnSelect && nextRange.start && nextRange.end) setOpen(false);
       },
       [
+        blockUnavailableDates,
         closeOnSelect,
         disabled,
         isRange,
+        isUnavailable,
         isValueControlled,
         maxDate,
         minDate,
@@ -483,6 +535,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                     ? styles.menuAlignEnd
                     : styles.menuAlignStart,
                 calendarStyle,
+                styles.menuFitContent,
               ]}
             >
               <View style={styles.calendarHeader}>
@@ -513,7 +566,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                 </Pressable>
               </View>
 
-              <View>
+              <View style={styles.calendarGrid}>
                 <View style={styles.weekdayRow}>
                   {weekdayLabels.map((weekdayLabel, index) => (
                     <View key={`${weekdayLabel}-${index}`} style={styles.weekdayCell}>
@@ -582,10 +635,15 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                         const isRangeStart = isRange && isSameDay(day, rangeValue.start);
                         const isRangeEnd = isRange && isSameDay(day, rangeValue.end);
                         const isSelectedEndpoint = isSelectedSingle || isRangeStart || isRangeEnd;
+                        const dayUnavailable = isUnavailable(day);
+                        const dayBlocked = blockUnavailableDates && dayUnavailable;
                         const dayDisabled = disabled || isDateDisabled(day, minDate, maxDate);
                         const dayKey = startOfDay(day).getTime();
                         const isHovered =
-                          !dayDisabled && !isSelectedEndpoint && hoveredDayKey === dayKey;
+                          !dayDisabled &&
+                          !dayBlocked &&
+                          !isSelectedEndpoint &&
+                          hoveredDayKey === dayKey;
 
                         const dayTextColor = isSelectedEndpoint
                           ? colors.white
@@ -601,7 +659,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                           <Pressable
                             key={dayIndex}
                             onPress={() => handleDayPress(day)}
-                            disabled={dayDisabled}
+                            disabled={dayDisabled || dayBlocked}
                             onHoverIn={() => setHoveredDayKey(dayKey)}
                             onHoverOut={() =>
                               setHoveredDayKey((current) => (current === dayKey ? null : current))
@@ -612,9 +670,13 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                             }
                             style={styles.dayCellWrap}
                             accessibilityRole="button"
-                            accessibilityLabel={formatValue(day)}
+                            accessibilityLabel={
+                              dayUnavailable
+                                ? `${formatValue(day)}, ${unavailableDateLabel}`
+                                : formatValue(day)
+                            }
                             accessibilityState={{
-                              disabled: dayDisabled,
+                              disabled: dayDisabled || dayBlocked,
                               selected: isSelectedEndpoint,
                             }}
                           >
@@ -622,10 +684,17 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                               style={[
                                 styles.dayCircle,
                                 isSelectedEndpoint && styles.dayCircleSelected,
+                                dayUnavailable && styles.dayCircleBooked,
                                 isHovered && styles.dayCircleHovered,
                               ]}
                             >
-                              <Text style={[styles.dayText, { color: dayTextColor }]}>
+                              <Text
+                                style={[
+                                  styles.dayText,
+                                  { color: dayTextColor },
+                                  dayUnavailable && styles.dayTextBooked,
+                                ]}
+                              >
                                 {day.getDate()}
                               </Text>
                             </View>
@@ -762,7 +831,7 @@ const styles = StyleSheet.create({
   menu: {
     position: "absolute",
     top: "100%",
-    width: DEFAULT_WIDTH,
+    alignSelf: "flex-start",
     height: DEFAULT_MENU_HEIGHT,
     marginTop: 8,
     zIndex: 10,
@@ -796,10 +865,26 @@ const styles = StyleSheet.create({
     right: "auto",
     marginTop: 0,
   },
-  rangeMenu: {
-    width: RANGE_TRIGGER_WIDTH,
+  rangeMenu: {},
+  menuFitContent: {
+    width: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    maxWidth: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    alignSelf: "flex-start",
+    alignItems: "flex-start",
+    ...(Platform.select({
+      web: {
+        width: "fit-content",
+        maxWidth: "fit-content",
+      },
+      default: {},
+    }) as ViewStyle),
+  },
+  calendarGrid: {
+    width: MENU_CONTENT_WIDTH,
+    alignSelf: "flex-start",
   },
   calendarHeader: {
+    width: MENU_CONTENT_WIDTH,
     height: HEADER_HEIGHT,
     paddingTop: 8,
     paddingBottom: 8,
@@ -833,9 +918,8 @@ const styles = StyleSheet.create({
   weekdayCell: {
     width: DAY_CELL_WIDTH,
     height: WEEKDAY_ROW_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
   },
@@ -863,9 +947,8 @@ const styles = StyleSheet.create({
   dayCellWrap: {
     width: DAY_CELL_WIDTH,
     height: DAY_CELL_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
     opacity: 1,
@@ -882,6 +965,12 @@ const styles = StyleSheet.create({
   dayCircleSelected: {
     backgroundColor: colors.primary,
   },
+  dayCircleBooked: {
+    backgroundColor: colors.grey700,
+  },
+  dayTextBooked: {
+    textDecorationLine: "line-through",
+  },
   dayCircleHovered: {
     backgroundColor: colors.grey600,
   },