@ecohouse/ui 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.2",
+  "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";