@ecohouse/ui 0.1.33 → 0.1.35

package/package.json

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

package/src/components/AccordionItem/AccordionItem.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { View } from "react-native";
+import { AccordionItem } from "./AccordionItem";
+
+const meta = {
+  title: "Components/AccordionItem",
+  component: AccordionItem,
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof AccordionItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function FaqListDemo() {
+  const [openId, setOpenId] = useState<string | null>("digitalKey");
+
+  return (
+    <View style={{ width: 560, gap: 20 }}>
+      <AccordionItem
+        title="Ինչպե՞ս է աշխատում թվային բանալին (QR կոդը)"
+        open={openId === "digitalKey"}
+        onOpenChange={(next) => setOpenId(next ? "digitalKey" : null)}
+      >
+        Ամրագրումը հաստատվելուց հետո Ձեր հավելվածում կձևավորվի եզակի QR կոդ։
+      </AccordionItem>
+      <AccordionItem
+        title="Ինչպե՞ս է իրականացվում մուտքը քոթեջ"
+        open={openId === "entry"}
+        onOpenChange={(next) => setOpenId(next ? "entry" : null)}
+      >
+        Մոտեցեք դռան սկաներին և ցույց տվեք QR կոդը։
+      </AccordionItem>
+    </View>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    title: "Ինչպե՞ս է աշխատում թվային բանալին (QR կոդը)",
+    children: "Ամրագրումը հաստատվելուց հետո Ձեր հավելվածում կձևավորվի եզակի QR կոդ։",
+    defaultOpen: true,
+  },
+};
+
+export const ExclusiveList: Story = {
+  args: {
+    title: "Ինչպե՞ս է աշխատում թվային բանալին (QR կոդը)",
+    children: "Ամրագրումը հաստատվելուց հետո Ձեր հավելվածում կձևավորվի եզակի QR կոդ։",
+  },
+  render: () => <FaqListDemo />,
+};

package/src/components/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,223 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from "react";
+import {
+  Animated,
+  Easing,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { ChevronDownIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface AccordionItemProps extends Omit<ViewProps, "style" | "children"> {
+  title: string;
+  /** Expanded body text. */
+  children: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const DESKTOP_MIN_WIDTH = 1024;
+const CHEVRON_SIZE = 24;
+const ANIMATION_DURATION = 280;
+const BODY_GAP = 16;
+const PADDING_X_MOBILE = 12;
+const PADDING_X_DESKTOP = 24;
+const RADIUS_MOBILE = 16;
+const RADIUS_DESKTOP = 24;
+const BODY_SIZE_MOBILE = 12;
+const BODY_SIZE_DESKTOP = 14;
+const BODY_LINE_MOBILE = 16;
+const BODY_LINE_DESKTOP = 18;
+
+/**
+ * FAQ / accordion row — grey700 card.
+ * Mobile: radius 16, padding 16/12, body 12px.
+ * Desktop: radius 24, padding 16/24, body 14px.
+ */
+export const AccordionItem = forwardRef<ComponentRef<typeof View>, AccordionItemProps>(
+  function AccordionItem(
+    {
+      title,
+      children,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const isControlled = openProp !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const open = isControlled ? Boolean(openProp) : uncontrolledOpen;
+    const [contentHeight, setContentHeight] = useState(0);
+    const progress = useRef(new Animated.Value(defaultOpen || openProp ? 1 : 0)).current;
+    const { width: viewportWidth } = useWindowDimensions();
+    const isDesktop = viewportWidth >= DESKTOP_MIN_WIDTH;
+    const paddingX = isDesktop ? PADDING_X_DESKTOP : PADDING_X_MOBILE;
+    const bodyFontSize = isDesktop ? BODY_SIZE_DESKTOP : BODY_SIZE_MOBILE;
+    const bodyLineHeight = isDesktop ? BODY_LINE_DESKTOP : BODY_LINE_MOBILE;
+
+    useApplyWebClassName(containerRef, className);
+
+    useEffect(() => {
+      const animation = Animated.timing(progress, {
+        toValue: open ? 1 : 0,
+        duration: ANIMATION_DURATION,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false,
+      });
+      animation.start();
+      return () => animation.stop();
+    }, [open, progress]);
+
+    const toggle = useCallback(() => {
+      const next = !open;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isControlled, onOpenChange, open]);
+
+    const onBodyLayout = useCallback((event: LayoutChangeEvent) => {
+      const nextHeight = event.nativeEvent.layout.height;
+      setContentHeight((current) => (Math.abs(current - nextHeight) < 0.5 ? current : nextHeight));
+    }, []);
+
+    const bodyHeight = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, Math.max(contentHeight, 0)],
+    });
+
+    const chevronRotate = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0deg", "180deg"],
+    });
+
+    const bodyTextStyle = [styles.body, { fontSize: bodyFontSize, lineHeight: bodyLineHeight }];
+
+    return (
+      <Pressable
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: open }}
+        accessibilityLabel={accessibilityLabel ?? title}
+        onPress={toggle}
+        style={[
+          styles.root,
+          {
+            borderRadius: isDesktop ? RADIUS_DESKTOP : RADIUS_MOBILE,
+            paddingRight: paddingX,
+            paddingLeft: paddingX,
+          },
+          Platform.OS === "web" ? styles.rootWeb : null,
+          style,
+        ]}
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>{title}</Text>
+          <Animated.View style={[styles.chevron, { transform: [{ rotate: chevronRotate }] }]}>
+            <ChevronDownIcon
+              size={CHEVRON_SIZE}
+              color={open ? colors.primary : colors.grey400}
+              strokeWidth={2}
+            />
+          </Animated.View>
+        </View>
+
+        <View
+          style={[styles.measureHidden, { left: paddingX, right: paddingX }]}
+          pointerEvents="none"
+          onLayout={onBodyLayout}
+        >
+          <Text style={bodyTextStyle}>{children}</Text>
+        </View>
+
+        <Animated.View style={[styles.bodyClip, { height: bodyHeight }]} pointerEvents="none">
+          <View style={styles.bodyInner}>
+            <Text style={bodyTextStyle}>{children}</Text>
+          </View>
+        </Animated.View>
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+    paddingTop: 16,
+    paddingBottom: 16,
+    backgroundColor: colors.grey700,
+    opacity: 1,
+    overflow: "hidden",
+  },
+  rootWeb: {
+    cursor: "pointer" as unknown as ViewStyle["cursor"],
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+  },
+  title: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 14,
+    letterSpacing: 0.42,
+    color: colors.white,
+  },
+  chevron: {
+    width: CHEVRON_SIZE,
+    height: CHEVRON_SIZE,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  measureHidden: {
+    position: "absolute",
+    top: 0,
+    opacity: 0,
+    paddingTop: BODY_GAP,
+    zIndex: -1,
+  },
+  bodyClip: {
+    overflow: "hidden",
+  },
+  bodyInner: {
+    paddingTop: BODY_GAP,
+  },
+  body: {
+    fontFamily: fonts.sans,
+    fontWeight: "400",
+    letterSpacing: 0.42,
+    color: colors.lightGrey,
+  },
+});

package/src/components/AccordionItem/index.ts

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

package/src/components/AccountHeader/AccountHeader.tsx

@@ -1,17 +1,18 @@
 import { forwardRef, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
 import {
+  Platform,
   Pressable,
   StyleSheet,
   Text,
   View,
   type StyleProp,
+  type TextStyle,
   type ViewProps,
   type ViewStyle,
 } from "react-native";
-import { BellIcon, ChevronLeftIcon, MenuIcon } from "../../icons";
+import { BellIcon, ChevronLeftIcon, MenuLinesIcon } 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;
@@ -23,6 +24,8 @@ export interface AccountHeaderProps extends Omit<ViewProps, "style" | "children"
   /** When set, shows the 28×28 menu control (mobile account shell). Ignored if `onBackPress` is set. */
   onMenuPress?: () => void;
   onNotificationsPress?: () => void;
+  /** Optional control rendered to the left of notifications (e.g. language switcher). */
+  languageSlot?: ReactNode;
   /** 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"`. */
@@ -31,6 +34,13 @@ export interface AccountHeaderProps extends Omit<ViewProps, "style" | "children"
   menuAccessibilityLabel?: string;
   /** Accessible name for notifications. Defaults to `"Notifications"`. */
   notificationsAccessibilityLabel?: string;
+  /**
+   * Web CSS class for the menu control (hide on desktop via `#account-header-menu` /
+   * `.account-header-menu` while keeping it mounted to avoid a mobile refresh flash).
+   */
+  menuClassName?: string;
+  /** Optional title style override (e.g. mobile 14px from the web app). */
+  titleStyle?: StyleProp<TextStyle>;
   style?: StyleProp<ViewStyle>;
   className?: string;
 }
@@ -44,6 +54,12 @@ const TITLE_BADGE_GAP = 12;
 const MENU_TITLE_GAP = 16;
 const RIGHT_GAP = 16;
 
+/** RN-web applies `className` on the first paint — avoid post-hydrate class injection. */
+function webClassName(className?: string): { className?: string } {
+  if (Platform.OS !== "web" || !className?.trim()) return {};
+  return { className: className.trim() };
+}
+
 export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeaderProps>(
   function AccountHeader(
     {
@@ -51,10 +67,13 @@ export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeader
       onBackPress,
       onMenuPress,
       onNotificationsPress,
+      languageSlot,
       badge,
       backAccessibilityLabel = "Back",
       menuAccessibilityLabel = "Open menu",
       notificationsAccessibilityLabel = "Notifications",
+      menuClassName,
+      titleStyle,
       style,
       className,
       ...rest
@@ -63,19 +82,16 @@ export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeader
   ) {
     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}
+        {...webClassName(className)}
         ref={setContainerRef}
         accessibilityRole="header"
-        style={[styles.base, isCompact ? styles.compact : styles.desktop, style]}
+        style={[styles.base, style]}
       >
         <View
           style={[
@@ -102,23 +118,24 @@ export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeader
 
           {showMenu ? (
             <Pressable
+              {...webClassName(menuClassName)}
+              id="account-header-menu"
+              nativeID="account-header-menu"
               accessibilityRole="button"
               accessibilityLabel={menuAccessibilityLabel}
               hitSlop={8}
               onPress={onMenuPress}
               style={styles.menuButton}
             >
-              <MenuIcon color={colors.white} size={MENU_ICON_SIZE} strokeWidth={1.5} />
+              <MenuLinesIcon color={colors.white} size={MENU_ICON_SIZE} strokeWidth={2} />
             </Pressable>
           ) : null}
 
           <View style={styles.titleRow}>
             <Text
+              {...webClassName("account-header-title")}
               numberOfLines={1}
-              style={[
-                styles.title,
-                showBack || !isCompact ? styles.titleDesktop : styles.titleCompact,
-              ]}
+              style={[styles.title, titleStyle]}
             >
               {title}
             </Text>
@@ -127,6 +144,7 @@ export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeader
         </View>
 
         <View style={styles.end}>
+          {languageSlot != null ? <View style={styles.languageSlot}>{languageSlot}</View> : null}
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={notificationsAccessibilityLabel}
@@ -141,6 +159,7 @@ export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeader
   },
 );
 
+/** Desktop defaults — mobile padding/title size are overridden from the web app. */
 const styles = StyleSheet.create({
   base: {
     height: HEADER_HEIGHT,
@@ -148,18 +167,16 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: colors.dark,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.grey700,
-  },
-  desktop: {
+    opacity: 1,
     paddingTop: 16,
+    paddingRight: 24,
     paddingBottom: 16,
     paddingLeft: 24,
-    paddingRight: 24,
-  },
-  compact: {
-    padding: 16,
+    backgroundColor: colors.dark,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey700,
+    zIndex: 40,
+    position: "relative",
   },
   start: {
     flex: 1,
@@ -183,6 +200,16 @@ const styles = StyleSheet.create({
   end: {
     flexShrink: 0,
     marginLeft: RIGHT_GAP,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    zIndex: 50,
+    position: "relative",
+  },
+  languageSlot: {
+    flexShrink: 0,
+    zIndex: 50,
+    position: "relative",
   },
   iconButton: {
     width: ICON_BUTTON_SIZE,
@@ -207,16 +234,10 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     fontFamily: fonts.sans,
     fontWeight: "600",
-    letterSpacing: 0,
-    color: colors.white,
-  },
-  titleDesktop: {
     fontSize: 16,
     lineHeight: 22,
-  },
-  titleCompact: {
-    fontSize: 14,
-    lineHeight: 20,
+    letterSpacing: 0,
+    color: colors.white,
   },
   badgeSlot: {
     flexShrink: 0,

package/src/components/Button/Button.stories.tsx

@@ -18,7 +18,7 @@ const meta = {
     onPress: { action: "pressed" },
     variant: {
       control: "select",
-      options: ["primary", "secondary"],
+      options: ["primary", "secondary", "danger"],
     },
     size: {
       control: "select",
@@ -63,16 +63,25 @@ export const WithCustomWidth: Story = {
   },
 };
 
+export const Danger: Story = {
+  args: { variant: "danger", showIcon: false, title: "Delete account" },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <View style={storyStyles.grid}>
       <View style={storyStyles.column}>
         <Button title="Button" variant="primary" showIcon onPress={fn()} />
         <Button title="Button" variant="secondary" showIcon onPress={fn()} />
+        <Button title="Delete account" variant="danger" onPress={fn()} />
       </View>
       <View style={storyStyles.column}>
         <Button title="Button" variant="primary" showIcon disabled onPress={fn()} />
         <Button title="Button" variant="secondary" showIcon disabled onPress={fn()} />
+        <Button title="Delete account" variant="danger" disabled onPress={fn()} />
       </View>
     </View>
   ),

package/src/components/Button/Button.tsx

@@ -12,11 +12,11 @@ import {
   type ViewStyle,
 } from "react-native";
 import { ArrowRightIcon } from "../../icons";
-import { buttonTypography, colors } from "../../theme";
+import { buttonTypography, colors, fonts } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 
-export type ButtonVariant = "primary" | "secondary";
+export type ButtonVariant = "primary" | "secondary" | "danger";
 export type ButtonSize = "lg" | "sm";
 
 export interface ButtonProps extends Omit<
@@ -46,6 +46,8 @@ type VariantStyleSet = {
   iconColor: string;
 };
 
+const DANGER_BG = "#FFFFFF03";
+
 const variantConfig: Record<ButtonVariant, VariantStyleSet> = {
   primary: {
     backgroundColor: colors.primary,
@@ -59,6 +61,12 @@ const variantConfig: Record<ButtonVariant, VariantStyleSet> = {
     iconBadgeBackgroundColor: colors.grey600,
     iconColor: colors.white,
   },
+  danger: {
+    backgroundColor: DANGER_BG,
+    textColor: colors.red,
+    iconBadgeBackgroundColor: DANGER_BG,
+    iconColor: colors.red,
+  },
 };
 
 const sizeConfig = {
@@ -88,6 +96,26 @@ const sizeConfig = {
   },
 } as const satisfies Record<ButtonSize, Record<string, unknown>>;
 
+/** Delete / destructive action — fixed 33px height, 8px radius, red label. */
+const dangerMetrics = {
+  minHeight: 33,
+  borderRadius: 8,
+  paddingVertical: 0,
+  paddingLeft: 12,
+  paddingRightWithIcon: 4,
+  paddingRight: 12,
+  gap: 10,
+  text: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500" as const,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+  iconContainerSize: 20,
+  iconSize: 12,
+} as const;
+
 export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>(
   function Button(
     {
@@ -112,7 +140,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
     const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
     const textRef = useRef<ComponentRef<typeof Text>>(null);
     const preset = variantConfig[variant];
-    const metrics = sizeConfig[size];
+    const metrics = variant === "danger" ? dangerMetrics : sizeConfig[size];
 
     const label = typeof children !== "undefined" ? children : title;
     const hasCustomChildren = typeof children !== "undefined";
@@ -135,6 +163,7 @@ export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonPr
       styles.base,
       {
         minHeight: metrics.minHeight,
+        height: variant === "danger" ? 33 : undefined,
         borderRadius: metrics.borderRadius,
         backgroundColor: preset.backgroundColor,
         paddingTop: metrics.paddingVertical,

package/src/components/ContactInfoCard/ContactInfoCard.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { View } from "react-native";
+import { HeadsetIcon, MailIcon, PhoneIcon } from "../../icons";
+import { ContactInfoCard } from "./ContactInfoCard";
+
+const meta = {
+  title: "Components/ContactInfoCard",
+  component: ContactInfoCard,
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof ContactInfoCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Էլ․ հասցե",
+    value: "info@cortel.am",
+    icon: MailIcon,
+  },
+  render: (args) => (
+    <View style={{ width: 411, gap: 24 }}>
+      <ContactInfoCard {...args} />
+      <ContactInfoCard title="Հեռախոսահամար" value="+374 99 00-00-00" icon={PhoneIcon} />
+      <ContactInfoCard title="Աշխատանքային ժամեր" value="24/7 Աջակցություն" icon={HeadsetIcon} />
+    </View>
+  ),
+};