@ecohouse/ui 0.1.31 → 0.1.33

package/package.json

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

package/src/components/AccountHeader/AccountHeader.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, View } from "react-native";
+import { StatusBadge } from "../StatusBadge";
+import { AccountHeader } from "./AccountHeader";
+
+const meta = {
+  title: "Components/AccountHeader",
+  component: AccountHeader,
+  args: {
+    title: "Իմ ամրագրումները",
+    onNotificationsPress: fn(),
+    notificationsAccessibilityLabel: "Ծանուցումներ",
+    menuAccessibilityLabel: "Բացել ընտրացանկը",
+  },
+  argTypes: {
+    onMenuPress: { action: "menu press" },
+    onNotificationsPress: { action: "notifications press" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof AccountHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  render: (args) => (
+    <View style={styles.desktopFrame}>
+      <AccountHeader {...args} />
+    </View>
+  ),
+};
+
+export const Mobile: Story = {
+  args: {
+    onMenuPress: fn(),
+  },
+  render: (args) => (
+    <View style={styles.mobileFrame}>
+      <AccountHeader {...args} />
+    </View>
+  ),
+};
+
+export const WithBackAndStatus: Story = {
+  args: {
+    title: "Ամրագրում #BK-9087",
+    onBackPress: fn(),
+  },
+  render: (args) => (
+    <View style={styles.desktopFrame}>
+      <AccountHeader {...args} badge={<StatusBadge label="Ակտիվ" tone="active" />} />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  desktopFrame: {
+    width: "100%",
+    maxWidth: 960,
+    backgroundColor: "#090909",
+  },
+  mobileFrame: {
+    width: 390,
+    backgroundColor: "#090909",
+  },
+});

package/src/components/AccountHeader/AccountHeader.tsx

@@ -0,0 +1,224 @@
+import { forwardRef, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { BellIcon, ChevronLeftIcon, MenuIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface AccountHeaderProps extends Omit<ViewProps, "style" | "children"> {
+  title: string;
+  /**
+   * When set, shows a 32×32 back control (takes priority over `onMenuPress`).
+   * Used on nested account pages such as booking details.
+   */
+  onBackPress?: () => void;
+  /** When set, shows the 28×28 menu control (mobile account shell). Ignored if `onBackPress` is set. */
+  onMenuPress?: () => void;
+  onNotificationsPress?: () => void;
+  /** Optional status chip (or other accessory) rendered after the title with a 12px gap. */
+  badge?: ReactNode;
+  /** Accessible name for the back control. Defaults to `"Back"`. */
+  backAccessibilityLabel?: string;
+  /** Accessible name for the menu control. Defaults to `"Open menu"`. */
+  menuAccessibilityLabel?: string;
+  /** Accessible name for notifications. Defaults to `"Notifications"`. */
+  notificationsAccessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const HEADER_HEIGHT = 64;
+const MENU_ICON_SIZE = 28;
+const ICON_BUTTON_SIZE = 32;
+const ICON_BUTTON_ICON_SIZE = 16;
+const BACK_TITLE_GAP = 12;
+const TITLE_BADGE_GAP = 12;
+const MENU_TITLE_GAP = 16;
+const RIGHT_GAP = 16;
+
+export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeaderProps>(
+  function AccountHeader(
+    {
+      title,
+      onBackPress,
+      onMenuPress,
+      onNotificationsPress,
+      badge,
+      backAccessibilityLabel = "Back",
+      menuAccessibilityLabel = "Open menu",
+      notificationsAccessibilityLabel = "Notifications",
+      style,
+      className,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const resolvedClassName = className?.trim() || undefined;
+    const showBack = onBackPress != null;
+    const showMenu = !showBack && onMenuPress != null;
+    const isCompact = showMenu;
+
+    useApplyWebClassName(containerRef, resolvedClassName);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="header"
+        style={[styles.base, isCompact ? styles.compact : styles.desktop, style]}
+      >
+        <View
+          style={[
+            styles.start,
+            showBack ? styles.startWithBack : null,
+            showMenu ? styles.startWithMenu : null,
+          ]}
+        >
+          {showBack ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={backAccessibilityLabel}
+              hitSlop={8}
+              onPress={onBackPress}
+              style={styles.iconButton}
+            >
+              <ChevronLeftIcon
+                color={colors.white}
+                size={ICON_BUTTON_ICON_SIZE}
+                strokeWidth={1.5}
+              />
+            </Pressable>
+          ) : null}
+
+          {showMenu ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={menuAccessibilityLabel}
+              hitSlop={8}
+              onPress={onMenuPress}
+              style={styles.menuButton}
+            >
+              <MenuIcon color={colors.white} size={MENU_ICON_SIZE} strokeWidth={1.5} />
+            </Pressable>
+          ) : null}
+
+          <View style={styles.titleRow}>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.title,
+                showBack || !isCompact ? styles.titleDesktop : styles.titleCompact,
+              ]}
+            >
+              {title}
+            </Text>
+            {badge != null ? <View style={styles.badgeSlot}>{badge}</View> : null}
+          </View>
+        </View>
+
+        <View style={styles.end}>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={notificationsAccessibilityLabel}
+            onPress={onNotificationsPress}
+            style={styles.iconButton}
+          >
+            <BellIcon color={colors.white} size={ICON_BUTTON_ICON_SIZE} strokeWidth={1.5} />
+          </Pressable>
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  base: {
+    height: HEADER_HEIGHT,
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: colors.dark,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey700,
+  },
+  desktop: {
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingLeft: 24,
+    paddingRight: 24,
+  },
+  compact: {
+    padding: 16,
+  },
+  start: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  startWithBack: {
+    gap: BACK_TITLE_GAP,
+  },
+  startWithMenu: {
+    gap: MENU_TITLE_GAP,
+  },
+  titleRow: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: TITLE_BADGE_GAP,
+  },
+  end: {
+    flexShrink: 0,
+    marginLeft: RIGHT_GAP,
+  },
+  iconButton: {
+    width: ICON_BUTTON_SIZE,
+    height: ICON_BUTTON_SIZE,
+    padding: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5,
+    backgroundColor: colors.grey800,
+    borderWidth: 1,
+    borderColor: colors.grey700,
+    flexShrink: 0,
+  },
+  menuButton: {
+    width: MENU_ICON_SIZE,
+    height: MENU_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  title: {
+    flexShrink: 1,
+    fontFamily: fonts.sans,
+    fontWeight: "600",
+    letterSpacing: 0,
+    color: colors.white,
+  },
+  titleDesktop: {
+    fontSize: 16,
+    lineHeight: 22,
+  },
+  titleCompact: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  badgeSlot: {
+    flexShrink: 0,
+  },
+});

package/src/components/AccountHeader/index.ts

@@ -0,0 +1,2 @@
+export { AccountHeader } from "./AccountHeader";
+export type { AccountHeaderProps } from "./AccountHeader";

package/src/components/AvatarSimple/AvatarSimple.tsx

@@ -83,10 +83,10 @@ export const AvatarSimple = forwardRef<ComponentRef<typeof View>, AvatarSimplePr
         {!compact ? (
           <View style={styles.details}>
             <View style={styles.textBlock}>
-              <Text style={styles.name} numberOfLines={1}>
+              <Text style={styles.name} numberOfLines={1} ellipsizeMode="tail">
                 {name}
               </Text>
-              <Text style={styles.email} numberOfLines={1}>
+              <Text style={styles.email} numberOfLines={1} ellipsizeMode="tail">
                 {email}
               </Text>
             </View>

package/src/components/Button/Button.tsx

@@ -31,6 +31,8 @@ export interface ButtonProps extends Omit<
   size?: ButtonSize;
   showIcon?: boolean;
   icon?: ReactNode;
+  /** Overrides the trailing icon badge fill (defaults to the variant preset). */
+  iconBadgeBackgroundColor?: string;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   className?: string;
@@ -97,6 +99,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
       size = "lg",
       showIcon = false,
       icon,
+      iconBadgeBackgroundColor,
       style,
       textStyle,
       className,
@@ -182,7 +185,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
                 width: metrics.iconContainerSize,
                 height: metrics.iconContainerSize,
                 borderRadius: metrics.iconContainerSize / 2,
-                backgroundColor: preset.iconBadgeBackgroundColor,
+                backgroundColor: iconBadgeBackgroundColor ?? preset.iconBadgeBackgroundColor,
               },
             ]}
           >

package/src/components/DatePicker/DatePicker.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -22,6 +23,7 @@ import { colors, datePickerTypography } from "../../theme";
 import {
   addMonths,
   formatDate,
+  formatDateDayShortMonth,
   getMonthMatrix,
   isBefore,
   isDateDisabled,
@@ -92,6 +94,11 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   weekStartsOn?: 0 | 1;
   /** Styles the calendar popup independently from the trigger width. */
   calendarStyle?: StyleProp<ViewStyle>;
+  /**
+   * When true, only the calendar panel is rendered (no field/trigger).
+   * Use with controlled `open` for icon-button / popover hosts.
+   */
+  hideTrigger?: boolean;
   style?: StyleProp<ViewStyle>;
   className?: string;
 };
@@ -137,9 +144,7 @@ function RangeTriggerField({
         {label}
       </Text>
       <View style={styles.rangeValueRow}>
-        <Text numberOfLines={1} style={styles.rangeDate}>
-          {value}
-        </Text>
+        <Text style={styles.rangeDate}>{value}</Text>
         {time ? (
           <View style={styles.rangeTimeWrap}>
             <ClockFilledIcon color={colors.lightGrey} size={16} />
@@ -172,9 +177,10 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       defaultVisibleMonth,
       monthNames = DEFAULT_MONTH_NAMES,
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
-      formatValue = formatDate,
+      formatValue: formatValueProp,
       weekStartsOn = 1,
       calendarStyle,
+      hideTrigger = false,
       style,
       className,
       accessibilityLabel,
@@ -188,6 +194,10 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
     } = props;
 
     const isRange = props.range === true;
+    const usesRangeTrigger = isRange && variant !== "default";
+    const formatValue =
+      formatValueProp ??
+      (usesRangeTrigger ? (date: Date) => formatDateDayShortMonth(date, monthNames) : formatDate);
     const valueProp = props.value;
     const rootRef = useRef<ComponentRef<typeof View>>(null);
     const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
@@ -204,6 +214,8 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
     );
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [hoveredDayKey, setHoveredDayKey] = useState<number | null>(null);
+    /** Web: flip calendar to the trigger's right edge when it would overflow the viewport. */
+    const [menuAlignEnd, setMenuAlignEnd] = useState(false);
 
     const rangeValue: DateRange = isRange
       ? isValueControlled
@@ -218,6 +230,13 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
 
     const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
 
+    const defaultMenuWidth = usesRangeTrigger ? RANGE_TRIGGER_WIDTH : DEFAULT_WIDTH;
+    const resolvedMenuWidth = useMemo(() => {
+      const flat = StyleSheet.flatten(calendarStyle);
+      const width = flat?.width;
+      return typeof width === "number" ? width : defaultMenuWidth;
+    }, [calendarStyle, defaultMenuWidth]);
+
     const [visibleMonth, setVisibleMonth] = useState(() => {
       const anchor =
         defaultVisibleMonth ?? (isRange ? rangeValue.start : singleValue) ?? new Date();
@@ -235,11 +254,33 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
           setVisibleMonth(new Date(anchor.getFullYear(), anchor.getMonth(), 1));
         } else {
           setHoveredDayKey(null);
+          setMenuAlignEnd(false);
         }
       },
       [isOpenControlled, isRange, onOpenChange, rangeValue.start, singleValue],
     );
 
+    // Prefer left alignment; flip to right when the menu would overflow the viewport (web).
+    useLayoutEffect(() => {
+      if (Platform.OS !== "web" || !isOpen || hideTrigger) return;
+
+      const updateMenuAlign = () => {
+        const trigger = triggerRef.current as unknown as {
+          getBoundingClientRect?: () => DOMRect;
+        } | null;
+        const rect = trigger?.getBoundingClientRect?.();
+        if (!rect) return;
+
+        const viewportPadding = 8;
+        const overflowsRight = rect.left + resolvedMenuWidth > window.innerWidth - viewportPadding;
+        setMenuAlignEnd(overflowsRight);
+      };
+
+      updateMenuAlign();
+      window.addEventListener("resize", updateMenuAlign);
+      return () => window.removeEventListener("resize", updateMenuAlign);
+    }, [hideTrigger, isOpen, resolvedMenuWidth]);
+
     // Close on outside click (web only; native has no document-level events).
     useEffect(() => {
       if (Platform.OS !== "web" || !isOpen) return;
@@ -347,7 +388,6 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         ? formatValue(singleValue)
         : placeholder;
 
-    const usesRangeTrigger = isRange && variant !== "default";
     const usesVerticalRangeTrigger = usesRangeTrigger && variant === "range-vertical";
     const triggerBorderColor = usesRangeTrigger
       ? isOpen
@@ -369,6 +409,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         style={[
           styles.root,
           usesRangeTrigger && styles.rangeRoot,
+          hideTrigger && styles.rootHideTrigger,
           isOpen && styles.rootOpen,
           disabled && styles.disabled,
           style,
@@ -376,52 +417,65 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         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,
-              usesRangeTrigger && styles.rangeTrigger,
-              usesRangeTrigger &&
-                (usesVerticalRangeTrigger
-                  ? styles.rangeTriggerVertical
-                  : styles.rangeTriggerHorizontal),
-              {
-                borderColor: triggerBorderColor,
-                backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700,
-              },
-            ]}
-          >
-            {usesRangeTrigger ? (
-              <>
-                <RangeTriggerField label={startLabel} time={startTime} value={startValue} />
-                <View
-                  style={
-                    usesVerticalRangeTrigger
-                      ? styles.rangeDividerVertical
-                      : styles.rangeDividerHorizontal
-                  }
-                />
-                <RangeTriggerField label={endLabel} time={endTime} value={endValue} />
-              </>
-            ) : (
-              <>
-                <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
-                  {triggerLabel}
-                </Text>
-                <View style={styles.iconSlot}>
-                  <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
-                </View>
-              </>
-            )}
-          </Pressable>
+          {hideTrigger ? null : (
+            <Pressable
+              ref={triggerRef}
+              onPress={handleTriggerPress}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityLabel={resolvedAccessibilityLabel}
+              accessibilityState={{ disabled, expanded: isOpen }}
+              style={[
+                styles.trigger,
+                usesRangeTrigger && styles.rangeTrigger,
+                usesRangeTrigger &&
+                  (usesVerticalRangeTrigger
+                    ? styles.rangeTriggerVertical
+                    : styles.rangeTriggerHorizontal),
+                {
+                  borderColor: triggerBorderColor,
+                  backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700,
+                },
+              ]}
+            >
+              {usesRangeTrigger ? (
+                <>
+                  <RangeTriggerField label={startLabel} time={startTime} value={startValue} />
+                  <View
+                    style={
+                      usesVerticalRangeTrigger
+                        ? styles.rangeDividerVertical
+                        : styles.rangeDividerHorizontal
+                    }
+                  />
+                  <RangeTriggerField label={endLabel} time={endTime} value={endValue} />
+                </>
+              ) : (
+                <>
+                  <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, usesRangeTrigger && styles.rangeMenu, calendarStyle]}>
+            <View
+              style={[
+                styles.menu,
+                usesRangeTrigger && styles.rangeMenu,
+                hideTrigger
+                  ? styles.menuInline
+                  : menuAlignEnd
+                    ? styles.menuAlignEnd
+                    : styles.menuAlignStart,
+                calendarStyle,
+              ]}
+            >
               <View style={styles.calendarHeader}>
                 <Pressable
                   onPress={handlePrevMonth}
@@ -588,6 +642,10 @@ const styles = StyleSheet.create({
     gap: 8,
     alignSelf: "flex-start",
   },
+  rootHideTrigger: {
+    width: "auto",
+    gap: 0,
+  },
   rootOpen: {
     zIndex: 30,
   },
@@ -641,7 +699,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     gap: 8,
     paddingVertical: 12,
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
   },
   rangeLabel: {
     ...datePickerTypography.rangeLabel,
@@ -651,13 +709,16 @@ const styles = StyleSheet.create({
     minWidth: 0,
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
-    gap: 12,
+    justifyContent: "flex-start",
+    flexWrap: "nowrap",
+    gap: 10,
   },
   rangeDate: {
     ...datePickerTypography.rangeDate,
-    flexShrink: 1,
+    flexShrink: 0,
     color: colors.white,
+    // @ts-expect-error RN Web — keep the full date on one line
+    whiteSpace: "nowrap",
   },
   rangeTimeWrap: {
     flexShrink: 0,
@@ -689,7 +750,6 @@ const styles = StyleSheet.create({
   menu: {
     position: "absolute",
     top: "100%",
-    left: 0,
     width: DEFAULT_WIDTH,
     marginTop: 8,
     zIndex: 10,
@@ -706,6 +766,21 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto",
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0,
+  },
+  menuInline: {
+    position: "relative",
+    top: "auto",
+    left: "auto",
+    right: "auto",
+    marginTop: 0,
+  },
   rangeMenu: {
     width: RANGE_TRIGGER_WIDTH,
   },