@ecohouse/ui 0.1.31 → 0.1.32

package/package.json

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

@@ -22,6 +22,7 @@ import { colors, datePickerTypography } from "../../theme";
 import {
   addMonths,
   formatDate,
+  formatDateDayShortMonth,
   getMonthMatrix,
   isBefore,
   isDateDisabled,
@@ -137,9 +138,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,7 +171,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       defaultVisibleMonth,
       monthNames = DEFAULT_MONTH_NAMES,
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
-      formatValue = formatDate,
+      formatValue: formatValueProp,
       weekStartsOn = 1,
       calendarStyle,
       style,
@@ -188,6 +187,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);
@@ -347,7 +350,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
@@ -641,7 +643,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     gap: 8,
     paddingVertical: 12,
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
   },
   rangeLabel: {
     ...datePickerTypography.rangeLabel,
@@ -651,13 +653,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,

package/src/components/FloatingActionButton/FloatingActionButton.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, View } from "react-native";
+import { FloatingActionButton } from "./FloatingActionButton";
+
+const meta = {
+  title: "Components/FloatingActionButton",
+  component: FloatingActionButton,
+  args: {
+    onPress: fn(),
+    accessibilityLabel: "Նոր ամրագրում",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof FloatingActionButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <FloatingActionButton {...args} style={styles.fab} />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    position: "relative",
+    width: 390,
+    height: 640,
+    backgroundColor: "#090909",
+  },
+  fab: {
+    position: "absolute",
+    right: 12,
+    bottom: 20,
+  },
+});

package/src/components/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  type GestureResponderEvent,
+  type StyleProp,
+  type TouchableOpacityProps,
+  type ViewStyle,
+} from "react-native";
+import { PlusIcon } from "../../icons";
+import { colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface FloatingActionButtonProps extends Omit<
+  TouchableOpacityProps,
+  "onPress" | "disabled" | "style" | "children"
+> {
+  onPress: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  /** Defaults to a 24×24 white plus icon. */
+  icon?: ReactNode;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const SIZE = 48;
+const PADDING = 12;
+const ICON_SIZE = 24;
+const RADIUS = 64;
+
+export const FloatingActionButton = forwardRef<
+  ComponentRef<typeof TouchableOpacity>,
+  FloatingActionButtonProps
+>(function FloatingActionButton(
+  { onPress, disabled = false, icon, accessibilityLabel = "Add", style, className, ...rest },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const resolvedClassName = className?.trim() || undefined;
+
+  useApplyWebClassName(containerRef, resolvedClassName);
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      ref={setContainerRef}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      style={[styles.base, disabled && styles.disabled, style]}
+    >
+      {icon ?? <PlusIcon color={colors.white} size={ICON_SIZE} strokeWidth={2} />}
+    </TouchableOpacity>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    width: SIZE,
+    height: SIZE,
+    padding: PADDING,
+    borderRadius: RADIUS,
+    backgroundColor: colors.primary,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/src/components/FloatingActionButton/index.ts

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

package/src/components/InfoTile/InfoTile.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { NoSmokingIcon, PawIcon, QuietHoursIcon, TrashIcon } from "../../icons";
+import { InfoTile } from "./InfoTile";
+
+const meta = {
+  title: "Components/InfoTile",
+  component: InfoTile,
+  args: {
+    title: "Լռության ժամեր",
+    description: "23:00 - 08:00",
+    icon: QuietHoursIcon,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof InfoTile>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <InfoTile {...args} />
+    </View>
+  ),
+};
+
+export const HouseRulesGrid: Story = {
+  render: () => (
+    <View style={styles.grid}>
+      <InfoTile
+        title="Լռության ժամեր"
+        description="23:00 - 08:00"
+        icon={QuietHoursIcon}
+        style={styles.tile}
+      />
+      <InfoTile
+        title="Ծխելը արգելված է"
+        description="Տան ներսում խստիվ արգելվում է"
+        icon={NoSmokingIcon}
+        style={styles.tile}
+      />
+      <InfoTile
+        title="Ընտանի կենդանիներ"
+        description="Թույլատրված չեն"
+        icon={PawIcon}
+        style={styles.tile}
+      />
+      <InfoTile
+        title="Աղբի հեռացում"
+        description="Խնդրում ենք աղբը թողնել դրսի աղբամանում"
+        icon={TrashIcon}
+        style={styles.tile}
+      />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    padding: 24,
+    backgroundColor: "#090909",
+    maxWidth: 420,
+  },
+  grid: {
+    padding: 24,
+    backgroundColor: "#090909",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    maxWidth: 720,
+  },
+  tile: {
+    flexGrow: 1,
+    flexBasis: "45%",
+    minWidth: 280,
+  },
+});