@ecohouse/ui 0.1.38 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "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/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,239 @@
+import { forwardRef, useEffect, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import {
+  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;
+  /** 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 WEB_Z_INDEX = 500;
+const CLOSE_ICON_SIZE = 24;
+
+/** Plain DOM backdrop — RN StyleSheet often drops `backdrop-filter`. */
+const webBackdropDomStyle = {
+  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: "pointer",
+} as const;
+
+const webRootDomStyle = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: WEB_Z_INDEX,
+  display: "flex",
+  justifyContent: "flex-end",
+} as const;
+
+export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(function Drawer(
+  {
+    open,
+    onClose,
+    children,
+    title,
+    width = DEFAULT_WIDTH,
+    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;
+
+  useApplyWebClassName(panelRef, resolvedClassName, open && Platform.OS === "web");
+
+  useEffect(() => {
+    if (!open || 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);
+    };
+  }, [open, onClose]);
+
+  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 panel = (
+    <View
+      ref={setPanelRef}
+      accessibilityViewIsModal
+      style={[styles.panel, { width }, style]}
+      onStartShouldSetResponder={() => true}
+    >
+      {header}
+      <View style={styles.body}>{children}</View>
+    </View>
+  );
+
+  if (Platform.OS === "web") {
+    if (!open || typeof document === "undefined") return null;
+
+    return createPortal(
+      <div style={webRootDomStyle} role="presentation">
+        <button
+          type="button"
+          aria-label={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onClick={closeOnBackdropPress ? onClose : undefined}
+          style={webBackdropDomStyle}
+        />
+        <div
+          style={{
+            position: "relative",
+            zIndex: 1,
+            height: "100%",
+            maxWidth: "100%",
+            display: "flex",
+          }}
+        >
+          {panel}
+        </div>
+      </div>,
+      document.body,
+    );
+  }
+
+  return (
+    <RNModal
+      visible={open}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View style={styles.root} accessibilityViewIsModal>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onPress={closeOnBackdropPress ? onClose : undefined}
+          style={styles.backdrop}
+        />
+        {panel}
+      </View>
+    </RNModal>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: BACKDROP_COLOR,
+  },
+  panel: {
+    zIndex: 1,
+    height: "100%",
+    maxWidth: "100%",
+    backgroundColor: colors.grey800,
+  },
+  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: 16,
+    letterSpacing: 0,
+    color: colors.white,
+    marginRight: 12,
+  },
+  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

@@ -16,6 +16,7 @@ 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";

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",

package/src/index.ts

@@ -23,6 +23,7 @@ export {
   DatePicker,
   FloatingActionButton,
   Modal,
+  Drawer,
   Input,
   AutocompleteInput,
   VerificationCodeInput,
@@ -73,6 +74,7 @@ export type {
   DateRange,
   FloatingActionButtonProps,
   ModalProps,
+  DrawerProps,
   InputIcon,
   InputProps,
   InputSize,
@@ -133,6 +135,7 @@ export {
   BellIcon,
   BuildingIcon,
   CalendarIcon,
+  CalendarMinusIcon,
   CalendarOutlineIcon,
   CameraIcon,
   CameraFilledIcon,

package/src/theme/colors.ts

@@ -20,6 +20,7 @@ export type GreyStep = keyof typeof grey;
 
 export const colors = {
   primary: "#B46436",
+  primaryLight: "#E38E5E",
   black: "#000000",
   white: "#ffffff",
   whiteAlpha86: "#FFFFFFDB",

package/src/web/styles/account-header.css

@@ -0,0 +1,22 @@
+/**
+ * AccountHeader (web) — keep the menu control mounted to avoid a mobile refresh flash,
+ * but hide it on desktop (≥1024px) where the persistent sidebar is shown.
+ *
+ * Requires `menuClassName="account-header-menu"` (or rely on `#account-header-menu`).
+ */
+@media (min-width: 1024px) {
+  #account-header-menu,
+  .account-header-menu {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    position: absolute !important;
+  }
+}