@ecohouse/ui 0.1.3 → 0.1.4

package/package.json

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

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet } from "react-native";
+import { Avatar, type AvatarMenuItem } from "./Avatar";
+import {
+  CalendarIcon,
+  HeartIcon,
+  HelpCircleIcon,
+  LayoutGridIcon,
+  LogOutIcon,
+  SettingsIcon,
+  VideoIcon,
+} from "../../icons";
+import { colors } from "../../theme";
+
+const accountMenuItems: AvatarMenuItem[] = [
+  { label: "Bookings", icon: <CalendarIcon size={16} />, onPress: fn() },
+  { label: "Digital keys", icon: <LayoutGridIcon size={16} />, onPress: fn() },
+  { label: "Cameras", icon: <VideoIcon size={16} />, onPress: fn() },
+  { label: "Favorites", icon: <HeartIcon size={16} />, onPress: fn() },
+  { label: "Support", icon: <HelpCircleIcon size={16} />, onPress: fn() },
+  { label: "Settings", icon: <SettingsIcon size={16} />, onPress: fn() },
+  {
+    label: "Log out",
+    icon: <LogOutIcon size={16} />,
+    onPress: fn(),
+    backgroundColor: colors.redMuted,
+    hoverColor: colors.redHover,
+  },
+];
+
+const meta = {
+  title: "Components/Avatar",
+  component: Avatar,
+  args: {
+    name: "Աննա Հակոբյան",
+    email: "anna.hakobyan@example.com",
+    imageUrl: "https://i.pravatar.cc/150?img=47",
+    showChevron: true,
+    disabled: false,
+    onPress: fn(),
+  },
+  argTypes: {
+    disabled: { control: "boolean" },
+    showChevron: { control: "boolean" },
+    onPress: { action: "pressed" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** No `imageUrl` — falls back to the placeholder person icon. */
+export const WithoutImage: Story = {
+  args: { imageUrl: undefined },
+};
+
+/** A broken/unreachable URL also falls back to the placeholder icon once it fails to load. */
+export const BrokenImage: Story = {
+  args: { imageUrl: "https://example.invalid/does-not-exist.png" },
+};
+
+export const WithoutEmail: Story = {
+  args: { email: undefined },
+};
+
+export const WithoutChevron: Story = {
+  args: { showChevron: false },
+};
+
+export const NotInteractive: Story = {
+  args: { onPress: undefined },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const LongContent: Story = {
+  args: {
+    name: "Alexandra Konstantinopoulos-Harutyunyan",
+    email: "alexandra.konstantinopoulos.harutyunyan@example.com",
+  },
+};
+
+/** Options — icon, label, action, and per-item colors — come entirely from the consumer. */
+export const WithMenu: Story = {
+  args: {
+    menuItems: accountMenuItems,
+    defaultOpen: true,
+  },
+};
+
+export const WithMenuClosed: Story = {
+  name: "With Menu / Closed",
+  args: {
+    menuItems: accountMenuItems,
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Avatar
+        name="Աննա Հակոբյան"
+        email="anna.hakobyan@example.com"
+        imageUrl="https://i.pravatar.cc/150?img=47"
+        onPress={fn()}
+      />
+      <Avatar name="Աննա Հակոբյան" email="anna.hakobyan@example.com" onPress={fn()} />
+      <Avatar
+        name="Աննա Հակոբյան"
+        email="anna.hakobyan@example.com"
+        imageUrl="https://i.pravatar.cc/150?img=47"
+        disabled
+        onPress={fn()}
+      />
+      <Avatar name="Աննա Հակոբյան" showChevron={false} onPress={fn()} />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 16,
+    alignItems: "flex-start",
+  },
+});

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,389 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { ChevronDownIcon, UserIcon } from "../../icons";
+import { avatarTypography, colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface AvatarMenuItem {
+  /** Stable identity for React keys / hover tracking; falls back to `label`. */
+  key?: string;
+  /** Leading icon, e.g. `<CalendarIcon />` — pass it pre-colored. */
+  icon?: ReactNode;
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  /** Row background at rest. Defaults to transparent. */
+  backgroundColor?: string;
+  /** Row background on hover/press. Defaults to `colors.grey600`. */
+  hoverColor?: string;
+}
+
+export interface AvatarProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  /** Logged-in user's display name. */
+  name: string;
+  /** Shown under the name, e.g. the user's email. */
+  email?: string;
+  /** Photo URL; falls back to a placeholder icon when missing or when it fails to load. */
+  imageUrl?: string | null;
+  /** Called on every press, in addition to any menu toggling driven by `menuItems`. */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** External — non-interactive. */
+  disabled?: boolean;
+  /** Trailing chevron, typically used to hint a dropdown/menu. */
+  showChevron?: boolean;
+  /**
+   * Account-menu options, supplied entirely by the consumer (icon, label,
+   * action, and per-item colors). When set, pressing the chip opens a
+   * dropdown listing them.
+   */
+  menuItems?: AvatarMenuItem[];
+  /** Controlled open state for the menu. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Fixed menu width; defaults to matching the chip's width. */
+  menuWidth?: number;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const IMAGE_SIZE = 48;
+const CONTAINER_RADIUS = 71;
+const CHEVRON_SIZE = 20;
+const FALLBACK_ICON_SIZE = 20;
+const MENU_RADIUS = 16;
+const MENU_ITEM_RADIUS = 12;
+const MENU_ITEM_ICON_SIZE = 16;
+
+export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(function Avatar(
+  {
+    name,
+    email,
+    imageUrl,
+    onPress,
+    disabled = false,
+    showChevron = true,
+    menuItems,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    menuWidth,
+    style,
+    className,
+    accessibilityLabel,
+    hitSlop = 8,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const [imageFailed, setImageFailed] = useState(false);
+  const [hoveredKey, setHoveredKey] = useState<string | null>(null);
+
+  const hasMenu = Boolean(menuItems && menuItems.length > 0);
+  const isInteractive = onPress != null || hasMenu;
+  const isOpenControlled = typeof openProp === "boolean";
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isOpen = hasMenu && (isOpenControlled ? openProp : uncontrolledOpen);
+
+  useApplyWebClassName(containerRef, className);
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isOpenControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+      if (!next) setHoveredKey(null);
+    },
+    [isOpenControlled, onOpenChange],
+  );
+
+  const focusTrigger = useCallback(() => {
+    const node = containerRef.current as unknown as { focus?: () => void } | null;
+    node?.focus?.();
+  }, []);
+
+  const closeAndFocusTrigger = useCallback(() => {
+    setOpen(false);
+    focusTrigger();
+  }, [focusTrigger, setOpen]);
+
+  const handlePress = (event: GestureResponderEvent) => {
+    onPress?.(event);
+    if (hasMenu) setOpen(!isOpen);
+  };
+
+  const handleItemPress = useCallback(
+    (item: AvatarMenuItem) => {
+      if (item.disabled) return;
+      item.onPress();
+      closeAndFocusTrigger();
+    },
+    [closeAndFocusTrigger],
+  );
+
+  // 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 wrapper = wrapperRef.current as unknown as {
+        contains?: (node: Node) => boolean;
+      } | null;
+      const target = event.target;
+      if (wrapper?.contains && target instanceof Node && !wrapper.contains(target)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+    };
+  }, [isOpen, setOpen]);
+
+  // Escape closes the menu 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 hasImage = Boolean(imageUrl) && !imageFailed;
+  const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
+
+  return (
+    <View ref={wrapperRef} style={[styles.wrapper, isOpen && styles.wrapperOpen]}>
+      <Pressable
+        {...rest}
+        ref={setContainerRef}
+        onPress={handlePress}
+        disabled={disabled || !isInteractive}
+        hitSlop={isInteractive ? hitSlop : undefined}
+        accessibilityRole={isInteractive ? "button" : undefined}
+        accessibilityLabel={resolvedAccessibilityLabel}
+        accessibilityState={
+          isInteractive ? { disabled, expanded: hasMenu ? isOpen : undefined } : undefined
+        }
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        <View style={styles.imageWrap}>
+          {hasImage ? (
+            <Image
+              source={{ uri: imageUrl ?? undefined }}
+              style={styles.image}
+              onError={() => setImageFailed(true)}
+            />
+          ) : (
+            <View style={styles.imageFallback}>
+              <UserIcon size={FALLBACK_ICON_SIZE} color={colors.primary} />
+            </View>
+          )}
+        </View>
+
+        <View style={styles.textColumn}>
+          <Text style={styles.name} numberOfLines={1}>
+            {name}
+          </Text>
+          {email ? (
+            <Text style={styles.email} numberOfLines={1}>
+              {email}
+            </Text>
+          ) : null}
+        </View>
+
+        {showChevron ? (
+          <View style={[styles.chevronSlot, isOpen && styles.chevronOpen]}>
+            <ChevronDownIcon size={CHEVRON_SIZE} color={isOpen ? colors.primary : colors.grey100} />
+          </View>
+        ) : null}
+      </Pressable>
+
+      {hasMenu && isOpen ? (
+        <View style={[styles.menu, menuWidth != null && { right: undefined, width: menuWidth }]}>
+          {menuItems!.map((item) => {
+            const itemKey = item.key ?? item.label;
+            const isHovered = hoveredKey === itemKey;
+            const backgroundColor = isHovered
+              ? (item.hoverColor ?? colors.grey600)
+              : (item.backgroundColor ?? "transparent");
+
+            return (
+              <Pressable
+                key={itemKey}
+                onPress={() => handleItemPress(item)}
+                disabled={item.disabled}
+                onHoverIn={() => setHoveredKey(itemKey)}
+                onHoverOut={() =>
+                  setHoveredKey((current) => (current === itemKey ? null : current))
+                }
+                onPressIn={() => setHoveredKey(itemKey)}
+                onPressOut={() =>
+                  setHoveredKey((current) => (current === itemKey ? null : current))
+                }
+                accessibilityRole="menuitem"
+                accessibilityState={{ disabled: item.disabled }}
+                style={[
+                  styles.menuItem,
+                  { backgroundColor },
+                  item.disabled && styles.menuItemDisabled,
+                ]}
+              >
+                {item.icon ? <View style={styles.menuItemIcon}>{item.icon}</View> : null}
+                <Text style={styles.menuItemLabel} numberOfLines={1}>
+                  {item.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    alignSelf: "flex-start",
+  },
+  wrapperOpen: {
+    zIndex: 20,
+  },
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 12,
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingLeft: 4,
+    paddingRight: 12,
+    borderRadius: CONTAINER_RADIUS,
+    backgroundColor: colors.grey700,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  imageWrap: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: IMAGE_SIZE / 2,
+    overflow: "hidden",
+    flexShrink: 0,
+  },
+  image: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+  },
+  imageFallback: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: colors.grey600,
+  },
+  textColumn: {
+    minWidth: 0,
+    flexShrink: 1,
+    gap: 3,
+  },
+  name: {
+    ...avatarTypography.name,
+    color: colors.white,
+  },
+  email: {
+    ...avatarTypography.email,
+    color: colors.grey0,
+  },
+  chevronSlot: {
+    width: CHEVRON_SIZE,
+    height: CHEVRON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  chevronOpen: {
+    transform: [{ rotate: "180deg" }],
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 8,
+    zIndex: 10,
+    borderRadius: MENU_RADIUS,
+    padding: 8,
+    gap: 8,
+    backgroundColor: colors.grey700,
+    ...Platform.select({
+      web: {
+        boxShadow: `0 8px 24px ${colors.black}73`,
+      },
+      default: {
+        elevation: 8,
+      },
+    }),
+  },
+  menuItem: {
+    minHeight: 40,
+    borderRadius: MENU_ITEM_RADIUS,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  menuItemDisabled: {
+    opacity: 0.5,
+  },
+  menuItemIcon: {
+    width: MENU_ITEM_ICON_SIZE,
+    height: MENU_ITEM_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  menuItemLabel: {
+    ...avatarTypography.menuItem,
+    color: colors.white,
+    flex: 1,
+  },
+});

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from "./Avatar";
+export type { AvatarProps, AvatarMenuItem } from "./Avatar";

package/src/components/Select/Select.tsx

@@ -575,7 +575,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
             </View>
 
             <View style={[styles.iconSlot, isOpen && styles.chevronOpen]}>
-              <ChevronDownIcon size={ICON_SIZE} color={colors.grey100} />
+              <ChevronDownIcon size={ICON_SIZE} color={isOpen ? colors.primary : colors.grey100} />
             </View>
           </Pressable>
 

package/src/components/index.ts

@@ -1,3 +1,6 @@
+export { Avatar } from "./Avatar";
+export type { AvatarProps, AvatarMenuItem } from "./Avatar";
+
 export { Button } from "./Button";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
 

package/src/icons/Calendar/CalendarIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { CALENDAR_PATH } from "./calendarPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CALENDAR_PATH } from "./calendarPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function CalendarIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={CALENDAR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Calendar/CalendarIcon.web.tsx

@@ -0,0 +1,27 @@
+import { CALENDAR_PATH } from "./calendarPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function CalendarIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CALENDAR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CALENDAR_PATH } from "./calendarPath";

package/src/icons/Calendar/calendarPath.ts

@@ -0,0 +1,3 @@
+/** Calendar icon path — 16×16 viewBox. */
+export const CALENDAR_PATH =
+  "M14 6.66668H2M14 8.33334V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667H8M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M9.66667 12.6667L11 14L14 11";

package/src/icons/Calendar/index.ts

@@ -0,0 +1 @@
+export { CalendarIcon, CALENDAR_PATH } from "./CalendarIcon";

package/src/icons/Heart/HeartIcon.tsx

@@ -0,0 +1,23 @@
+import Svg, { Path } from "react-native-svg";
+import { HEART_PATH } from "./heartPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { HEART_PATH } from "./heartPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function HeartIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={HEART_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+}

package/src/icons/Heart/HeartIcon.web.tsx

@@ -0,0 +1,29 @@
+import { HEART_PATH } from "./heartPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function HeartIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={HEART_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+export { HEART_PATH } from "./heartPath";

package/src/icons/Heart/heartPath.ts

@@ -0,0 +1,3 @@
+/** Heart icon path — 16×16 viewBox. */
+export const HEART_PATH =
+  "M7.99547 3.42388C6.66257 1.8656 4.43987 1.44643 2.76984 2.87334C1.0998 4.30026 0.864686 6.68598 2.17617 8.3736C3.26659 9.77674 6.56656 12.7361 7.64811 13.6939C7.76911 13.801 7.82961 13.8546 7.90018 13.8757C7.96178 13.8941 8.02917 13.8941 8.09077 13.8757C8.16134 13.8546 8.22184 13.801 8.34284 13.6939C9.42439 12.7361 12.7244 9.77674 13.8148 8.3736C15.1263 6.68598 14.9199 4.28525 13.2211 2.87334C11.5224 1.46144 9.32838 1.8656 7.99547 3.42388Z";

package/src/icons/Heart/index.ts

@@ -0,0 +1 @@
+export { HeartIcon, HEART_PATH } from "./HeartIcon";