@ecohouse/ui 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",
@@ -26,7 +26,8 @@
       "default": "./src/index.ts"
     },
     "./web/fonts.css": "./src/web/styles/fonts.css",
-    "./web/typography.css": "./src/web/styles/typography.css"
+    "./web/typography.css": "./src/web/styles/typography.css",
+    "./web/account-header.css": "./src/web/styles/account-header.css"
   },
   "files": [
     "dist",
@@ -54,7 +55,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:clean": "rm -rf node_modules/.cache/storybook node_modules/.vite storybook-static && storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "husky"
+    "prepare": "node -e \"if (process.env.CI !== 'true' && process.env.HUSKY !== '0') require('child_process').execSync('husky', { stdio: 'inherit' })\""
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mjs}": [

package/src/components/DatePicker/DatePicker.tsx

@@ -716,9 +716,10 @@ const styles = StyleSheet.create({
   },
   rangeValueRow: {
     minWidth: 0,
+    width: "100%",
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
     flexWrap: "nowrap",
     gap: 10,
   },

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { colors, fonts } from "../../theme";
+import { Drawer } from "./Drawer";
+
+const meta = {
+  title: "Components/Drawer",
+  component: Drawer,
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DrawerDemo() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <View style={styles.page}>
+      <Pressable onPress={() => setOpen(true)} style={styles.openButton}>
+        <Text style={styles.openLabel}>Open drawer</Text>
+      </Pressable>
+
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Չեղարկված ամրագրումներ"
+        closeAccessibilityLabel="Close drawer"
+      >
+        <View style={styles.body}>
+          <Text style={styles.bodyText}>Drawer body content</Text>
+        </View>
+      </Drawer>
+    </View>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onClose: () => undefined,
+    children: null,
+  },
+  render: () => <DrawerDemo />,
+};
+
+const styles = StyleSheet.create({
+  page: {
+    minHeight: 360,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  openButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 40,
+    backgroundColor: colors.primary,
+  },
+  openLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    color: colors.white,
+  },
+  body: {
+    flex: 1,
+    padding: 24,
+    gap: 24,
+  },
+  bodyText: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    color: colors.lightGrey,
+  },
+});

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,392 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+  type TransitionEvent,
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  Animated,
+  Easing,
+  Modal as RNModal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { CloseIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface DrawerProps {
+  /** Controls visibility. */
+  open: boolean;
+  /** Called on backdrop press, Escape / Android back, or header close. */
+  onClose: () => void;
+  children: ReactNode;
+  /** Header title. When set, the standard drawer header is rendered. */
+  title?: string;
+  /** Panel width in px. Defaults to `652`. */
+  width?: number;
+  /** Open/close width transition duration in ms. Defaults to `320`. */
+  animationDuration?: number;
+  /** Close when the dimmed backdrop is pressed. Defaults to `true`. */
+  closeOnBackdropPress?: boolean;
+  /** Accessible name for the backdrop control. Defaults to `"Close"`. */
+  backdropAccessibilityLabel?: string;
+  /** Accessible name for the header close control. Defaults to `"Close"`. */
+  closeAccessibilityLabel?: string;
+  /** Style for the drawer panel. */
+  style?: StyleProp<ViewStyle>;
+  /** Web CSS class applied to the drawer panel. */
+  className?: string;
+}
+
+const BACKDROP_COLOR = "#09090933";
+const DEFAULT_WIDTH = 652;
+const DEFAULT_DURATION = 320;
+const WEB_Z_INDEX = 500;
+const CLOSE_ICON_SIZE = 24;
+
+export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(function Drawer(
+  {
+    open,
+    onClose,
+    children,
+    title,
+    width = DEFAULT_WIDTH,
+    animationDuration = DEFAULT_DURATION,
+    closeOnBackdropPress = true,
+    backdropAccessibilityLabel = "Close",
+    closeAccessibilityLabel = "Close",
+    style,
+    className,
+  },
+  forwardedRef,
+) {
+  const panelRef = useRef<ComponentRef<typeof View>>(null);
+  const setPanelRef = useMemo(() => mergeRefs(panelRef, forwardedRef), [forwardedRef]);
+  const resolvedClassName = className?.trim() || undefined;
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [mounted, setMounted] = useState(open);
+  const [entered, setEntered] = useState(false);
+  const animatedWidth = useRef(new Animated.Value(open ? width : 0)).current;
+  const animatedBackdrop = useRef(new Animated.Value(open ? 1 : 0)).current;
+
+  useApplyWebClassName(panelRef, resolvedClassName, mounted && Platform.OS === "web");
+
+  useEffect(() => {
+    if (!mounted || Platform.OS !== "web") return undefined;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [mounted, onClose]);
+
+  // Web: mount at width 0, then expand; on close collapse then unmount.
+  useEffect(() => {
+    if (Platform.OS !== "web") return undefined;
+
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+
+    if (open) {
+      setMounted(true);
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setEntered(true));
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+
+    setEntered(false);
+    // Fallback if transitionend is skipped (e.g. reduced motion / tab background).
+    closeTimeoutRef.current = setTimeout(() => {
+      setMounted(false);
+      closeTimeoutRef.current = null;
+    }, animationDuration + 50);
+
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    };
+  }, [open, animationDuration]);
+
+  // Native: animate width + backdrop opacity.
+  useEffect(() => {
+    if (Platform.OS === "web") return undefined;
+
+    if (open) {
+      setMounted(true);
+      Animated.parallel([
+        Animated.timing(animatedWidth, {
+          toValue: width,
+          duration: animationDuration,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: false,
+        }),
+        Animated.timing(animatedBackdrop, {
+          toValue: 1,
+          duration: animationDuration,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true,
+        }),
+      ]).start();
+      return undefined;
+    }
+
+    Animated.parallel([
+      Animated.timing(animatedWidth, {
+        toValue: 0,
+        duration: animationDuration,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: false,
+      }),
+      Animated.timing(animatedBackdrop, {
+        toValue: 0,
+        duration: animationDuration,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (finished) setMounted(false);
+    });
+    return undefined;
+  }, [open, width, animationDuration, animatedWidth, animatedBackdrop]);
+
+  const handleWebTransitionEnd = useCallback(
+    (event: TransitionEvent<HTMLDivElement>) => {
+      if (event.target !== event.currentTarget) return;
+      if (event.propertyName !== "width") return;
+      if (!open) {
+        if (closeTimeoutRef.current) {
+          clearTimeout(closeTimeoutRef.current);
+          closeTimeoutRef.current = null;
+        }
+        setMounted(false);
+      }
+    },
+    [open],
+  );
+
+  const header =
+    title != null && title !== "" ? (
+      <View style={styles.header}>
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={closeAccessibilityLabel}
+          hitSlop={8}
+          onPress={onClose}
+          style={styles.closeButton}
+        >
+          <CloseIcon color={colors.white} size={CLOSE_ICON_SIZE} />
+        </Pressable>
+      </View>
+    ) : null;
+
+  const panelContent = (
+    <View
+      ref={setPanelRef}
+      accessibilityViewIsModal
+      style={[styles.panelInner, { width }, style]}
+      onStartShouldSetResponder={() => true}
+    >
+      {header}
+      <View style={styles.body}>{children}</View>
+    </View>
+  );
+
+  if (Platform.OS === "web") {
+    if (!mounted || typeof document === "undefined") return null;
+
+    return createPortal(
+      <div
+        style={{
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: WEB_Z_INDEX,
+          display: "flex",
+          justifyContent: "flex-end",
+          pointerEvents: "auto",
+        }}
+        role="presentation"
+      >
+        <button
+          type="button"
+          aria-label={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onClick={closeOnBackdropPress ? onClose : undefined}
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            backgroundColor: BACKDROP_COLOR,
+            backdropFilter: "blur(18px)",
+            WebkitBackdropFilter: "blur(18px)",
+            border: "none",
+            padding: 0,
+            margin: 0,
+            cursor: closeOnBackdropPress ? "pointer" : "default",
+            opacity: entered ? 1 : 0,
+            transition: `opacity ${animationDuration}ms ease`,
+          }}
+        />
+        {/*
+          Shell width animates 0 ↔ panel width. Inner stays fixed-width and
+          right-aligned so content isn't crushed and appears to slide in.
+          minWidth:0 is required — flex defaults would otherwise lock width to content.
+        */}
+        <div
+          onTransitionEnd={handleWebTransitionEnd}
+          style={{
+            position: "relative",
+            zIndex: 1,
+            height: "100%",
+            width: entered
+              ? Math.min(width, typeof window !== "undefined" ? window.innerWidth : width)
+              : 0,
+            minWidth: 0,
+            maxWidth: "100%",
+            overflow: "hidden",
+            transition: `width ${animationDuration}ms cubic-bezier(0.32, 0.72, 0, 1)`,
+            willChange: "width",
+            boxSizing: "border-box",
+          }}
+        >
+          <div
+            style={{
+              width,
+              maxWidth: "100%",
+              height: "100%",
+              marginLeft: "auto",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            {panelContent}
+          </div>
+        </div>
+      </div>,
+      document.body,
+    );
+  }
+
+  if (!mounted) return null;
+
+  return (
+    <RNModal
+      visible={mounted}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View style={styles.root} accessibilityViewIsModal>
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.backdrop, { opacity: animatedBackdrop }]}
+        />
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onPress={closeOnBackdropPress ? onClose : undefined}
+          style={StyleSheet.absoluteFill}
+        />
+        <Animated.View style={[styles.panelShell, { width: animatedWidth }]}>
+          {panelContent}
+        </Animated.View>
+      </View>
+    </RNModal>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: BACKDROP_COLOR,
+  },
+  panelShell: {
+    zIndex: 1,
+    height: "100%",
+    maxWidth: "100%",
+    overflow: "hidden",
+    alignItems: "flex-end",
+    minWidth: 0,
+  },
+  panelInner: {
+    height: "100%",
+    maxWidth: "100%",
+    backgroundColor: colors.grey800,
+    flexShrink: 0,
+  },
+  header: {
+    height: 65,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingTop: 20,
+    paddingRight: 24,
+    paddingBottom: 20,
+    paddingLeft: 24,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey650,
+  },
+  title: {
+    flex: 1,
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 22,
+    letterSpacing: 0,
+    color: colors.white,
+    marginRight: 12,
+    overflow: "visible",
+  },
+  closeButton: {
+    width: CLOSE_ICON_SIZE,
+    height: CLOSE_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  body: {
+    flex: 1,
+    minHeight: 0,
+  },
+});

package/src/components/Drawer/index.ts

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

package/src/components/StatusBadge/StatusBadge.tsx

@@ -98,7 +98,7 @@ const styles = StyleSheet.create({
   label: {
     fontFamily: fonts.sans,
     fontSize: 12,
-    fontWeight: "600",
+    fontWeight: "700",
     lineHeight: 12,
     letterSpacing: 0,
   },

package/src/components/index.ts

@@ -77,6 +77,9 @@ export type { FloatingActionButtonProps } from "./FloatingActionButton";
 export { Modal } from "./Modal";
 export type { ModalProps } from "./Modal";
 
+export { Drawer } from "./Drawer";
+export type { DrawerProps } from "./Drawer";
+
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 

package/src/icons/CalendarMinus/CalendarMinusIcon.tsx

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

package/src/icons/CalendarMinus/CalendarMinusIcon.web.tsx

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

package/src/icons/CalendarMinus/calendarMinusPath.ts

@@ -0,0 +1,3 @@
+/** Calendar with minus mark — 20×20 viewBox. */
+export const CALENDAR_MINUS_PATH =
+  "M12.5 14.9998H17.5M17.5 9.58317V7.33317C17.5 5.93304 17.5 5.23297 17.2275 4.69819C16.9878 4.22779 16.6054 3.84534 16.135 3.60565C15.6002 3.33317 14.9001 3.33317 13.5 3.33317H6.5C5.09987 3.33317 4.3998 3.33317 3.86502 3.60565C3.39462 3.84534 3.01217 4.22779 2.77248 4.69819C2.5 5.23297 2.5 5.93304 2.5 7.33317V14.3332C2.5 15.7333 2.5 16.4334 2.77248 16.9681C3.01217 17.4386 3.39462 17.821 3.86502 18.0607C4.3998 18.3332 5.09987 18.3332 6.5 18.3332H10.4167M17.5 8.33317H2.5M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984";

package/src/icons/CalendarMinus/index.ts

@@ -0,0 +1 @@
+export { CalendarMinusIcon, CALENDAR_MINUS_PATH } from "./CalendarMinusIcon";

package/src/icons/index.ts

@@ -9,13 +9,13 @@ export { AmenityIcon } from "./Amenity";
 export type { AmenityIconProps, AmenityName } from "./Amenity";
 export { AlertTriangleIcon } from "./AlertTriangle";
 export { AppleIcon } from "./Store";
-export { ArrowLeftIcon } from "./ArrowLeft";
 export { ArrowRightIcon } from "./ArrowRight";
 export { BagIcon } from "./Bag";
 export { BanIcon } from "./Ban";
 export { BellIcon } from "./Bell";
 export { BuildingIcon } from "./Building";
 export { CalendarIcon } from "./Calendar";
+export { CalendarMinusIcon } from "./CalendarMinus";
 export { CalendarOutlineIcon } from "./CalendarOutline";
 export { CameraIcon } from "./Camera";
 export { CameraFilledIcon } from "./CameraFilled";
@@ -25,7 +25,6 @@ export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
-export { CurrentLocationIcon } from "./CurrentLocation";
 export { EditIcon } from "./Edit";
 export {
   BathroomsIcon,

package/src/icons/registry.ts

@@ -1,5 +1,4 @@
 import { ArrowRightIcon } from "./ArrowRight";
-import { ArrowLeftIcon } from "./ArrowLeft";
 import { AlertTriangleIcon } from "./AlertTriangle";
 import { AppleIcon, GooglePlayIcon } from "./Store";
 import { BagIcon } from "./Bag";
@@ -7,6 +6,7 @@ import { BanIcon } from "./Ban";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
 import { CalendarIcon } from "./Calendar";
+import { CalendarMinusIcon } from "./CalendarMinus";
 import { CalendarOutlineIcon } from "./CalendarOutline";
 import { CameraIcon } from "./Camera";
 import { CameraFilledIcon } from "./CameraFilled";
@@ -16,7 +16,6 @@ import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { CloseIcon } from "./Close";
-import { CurrentLocationIcon } from "./CurrentLocation";
 import { EditIcon } from "./Edit";
 import {
   BathroomsIcon,
@@ -87,13 +86,13 @@ export const icons = {
   alertTriangle: AlertTriangleIcon,
   areaExpand: AreaExpandIcon,
   apple: AppleIcon,
-  arrowLeft: ArrowLeftIcon,
   arrowRight: ArrowRightIcon,
   bag: BagIcon,
   ban: BanIcon,
   bell: BellIcon,
   building: BuildingIcon,
   calendar: CalendarIcon,
+  calendarMinus: CalendarMinusIcon,
   calendarOutline: CalendarOutlineIcon,
   camera: CameraIcon,
   cameraFilled: CameraFilledIcon,
@@ -104,7 +103,6 @@ export const icons = {
   chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   close: CloseIcon,
-  currentLocation: CurrentLocationIcon,
   edit: EditIcon,
   clockFilled: ClockFilledIcon,
   copy: CopyIcon,
@@ -176,11 +174,9 @@ export const iconNames = Object.keys(icons) as IconName[];
 
 export const iconGroups = {
   navigation: [
-    "arrowLeft",
     "arrowRight",
     "chevronDown",
     "chevronLeft",
-    "currentLocation",
     "home",
     "listView",
     "locationPin",
@@ -208,6 +204,7 @@ export const iconGroups = {
     "download",
     "search",
     "calendar",
+    "calendarMinus",
     "calendarOutline",
     "close",
     "edit",