@ecohouse/ui 0.1.28 → 0.1.30

package/package.json

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

package/src/components/AvatarSimple/AvatarSimple.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, View } from "react-native";
+import { AvatarSimple } from "./AvatarSimple";
+
+const meta = {
+  title: "Components/AvatarSimple",
+  component: AvatarSimple,
+  args: {
+    name: "Աննա Հակոբյան",
+    email: "anna.hakobyan@example.com",
+    imageUrl: "https://i.pravatar.cc/150?img=47",
+    onLogOut: fn(),
+    logOutAccessibilityLabel: "Log out",
+    compact: false,
+  },
+  argTypes: {
+    compact: { control: "boolean" },
+    onLogOut: { action: "log out" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof AvatarSimple>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutImage: Story = {
+  args: { imageUrl: undefined },
+};
+
+export const Compact: Story = {
+  args: { compact: true },
+};
+
+export const LongEmail: Story = {
+  args: {
+    email: "anna.hakobyan.very.long.email@example.com",
+  },
+};
+
+export const InSidebarFooter: Story = {
+  render: (args) => (
+    <View style={storyStyles.footer}>
+      <AvatarSimple {...args} />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  footer: {
+    width: 300,
+    height: 80,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "#090909",
+    justifyContent: "center",
+  },
+});

package/src/components/AvatarSimple/AvatarSimple.tsx

@@ -0,0 +1,178 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Image,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { LogOutIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface AvatarSimpleProps extends Omit<ViewProps, "style" | "children"> {
+  /** 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 solid placeholder when missing or when it fails to load. */
+  imageUrl?: string | null;
+  /** Called when the trailing logout control is pressed. */
+  onLogOut?: () => void;
+  /** Accessible label for the logout control. Defaults to `"Log out"`. */
+  logOutAccessibilityLabel?: string;
+  /**
+   * Compact mode — avatar image only (no card chrome, name, email, or logout).
+   * Used by collapsed account sidebars.
+   */
+  compact?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const IMAGE_SIZE = 32;
+const CARD_WIDTH = 268;
+const CARD_HEIGHT = 56;
+const LOG_OUT_SIZE = 16;
+
+export const AvatarSimple = forwardRef<ComponentRef<typeof View>, AvatarSimpleProps>(
+  function AvatarSimple(
+    {
+      name,
+      email,
+      imageUrl,
+      onLogOut,
+      logOutAccessibilityLabel = "Log out",
+      compact = false,
+      style,
+      className,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const [imageFailed, setImageFailed] = useState(false);
+    const showImage = Boolean(imageUrl) && !imageFailed;
+
+    useApplyWebClassName(containerRef, className);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        style={[styles.root, compact ? styles.rootCompact : styles.rootCard, style]}
+        accessibilityRole="summary"
+        accessibilityLabel={`${name}, ${email}`}
+      >
+        <View style={styles.avatar}>
+          {showImage ? (
+            <Image
+              source={{ uri: imageUrl ?? undefined }}
+              style={styles.avatarImage}
+              onError={() => setImageFailed(true)}
+              accessibilityIgnoresInvertColors
+            />
+          ) : null}
+        </View>
+
+        {!compact ? (
+          <View style={styles.details}>
+            <View style={styles.textBlock}>
+              <Text style={styles.name} numberOfLines={1}>
+                {name}
+              </Text>
+              <Text style={styles.email} numberOfLines={1}>
+                {email}
+              </Text>
+            </View>
+
+            <Pressable
+              onPress={onLogOut}
+              accessibilityRole="button"
+              accessibilityLabel={logOutAccessibilityLabel}
+              hitSlop={8}
+              style={styles.logOutButton}
+            >
+              <LogOutIcon color={colors.primary} size={LOG_OUT_SIZE} strokeWidth={2} />
+            </Pressable>
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    overflow: "hidden",
+  },
+  rootCard: {
+    width: CARD_WIDTH,
+    height: CARD_HEIGHT,
+    gap: 12,
+    borderRadius: 12,
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    backgroundColor: colors.grey700,
+  },
+  rootCompact: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: IMAGE_SIZE,
+    backgroundColor: "transparent",
+  },
+  avatar: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: 56,
+    backgroundColor: colors.grey500,
+    overflow: "hidden",
+    flexShrink: 0,
+  },
+  avatarImage: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+  },
+  details: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  textBlock: {
+    flex: 1,
+    minWidth: 0,
+  },
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.white,
+  },
+  email: {
+    marginTop: 2,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.grey0,
+  },
+  logOutButton: {
+    width: LOG_OUT_SIZE,
+    height: LOG_OUT_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+});

package/src/components/AvatarSimple/index.ts

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

package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx

@@ -14,6 +14,12 @@ const optionsWithoutIcons = [
   { value: "second", label: "Label" },
 ] as const;
 
+const threeOptions = [
+  { value: "active", label: "Ակտիվ" },
+  { value: "completed", label: "Ավարտված" },
+  { value: "cancelled", label: "Չեղարկված" },
+] as const;
+
 const multilingualOptions = [
   { value: "daily", label: "Օրավարձ" },
   { value: "overnight", label: "Գիշերակաց երկար տարբերակ" },
@@ -50,6 +56,22 @@ export const WithoutIcons: Story = {
   args: { options: optionsWithoutIcons, defaultValue: "first" },
 };
 
+export const ThreeOptions: Story = {
+  args: {
+    options: threeOptions,
+    defaultValue: "completed",
+    fullWidth: false,
+  },
+};
+
+export const ThreeOptionsFullWidth: Story = {
+  render: () => (
+    <View style={storyStyles.container}>
+      <SegmentedToggle options={threeOptions} defaultValue="active" />
+    </View>
+  ),
+};
+
 export const ContentWidth: Story = {
   args: { fullWidth: false },
 };

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -23,7 +23,13 @@ export interface SegmentedToggleOption {
 }
 
 export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
-  options: readonly [SegmentedToggleOption, SegmentedToggleOption];
+  /**
+   * Segment options. Supports 2 or 3 options (e.g. Active / Completed / Cancelled).
+   * Passing fewer than 2 options is unsupported.
+   */
+  options:
+    | readonly [SegmentedToggleOption, SegmentedToggleOption]
+    | readonly [SegmentedToggleOption, SegmentedToggleOption, SegmentedToggleOption];
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
@@ -40,6 +46,18 @@ const OPTION_HORIZONTAL_PADDING = 16;
 const OPTION_CONTENT_GAP = 12;
 const OPTION_MIN_WIDTH = 97;
 const OPTION_MEASUREMENT_TOLERANCE = 0.5;
+const TRACK_PADDING = 4;
+const OPTION_GAP = 4;
+
+function buildIndicatorOutputRange(optionWidths: number[]): number[] {
+  const outputRange: number[] = [];
+  let offset = 0;
+  for (let index = 0; index < optionWidths.length; index += 1) {
+    outputRange.push(offset);
+    offset += optionWidths[index] + OPTION_GAP;
+  }
+  return outputRange;
+}
 
 export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
   function SegmentedToggle(
@@ -58,6 +76,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     },
     forwardedRef,
   ) {
+    const optionCount = options.length;
     const containerRef = useRef<ComponentRef<typeof View>>(null);
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -69,9 +88,14 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const resolvedClassName = className?.trim() || undefined;
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
-    const [contentWidths, setContentWidths] = useState<[number, number]>([0, 0]);
+    const [contentWidths, setContentWidths] = useState<number[]>(() =>
+      Array.from({ length: optionCount }, () => 0),
+    );
     const [containerWidth, setContainerWidth] = useState(0);
-    const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
+
+    // Track chrome: left+right padding + gaps between options.
+    const trackChrome = TRACK_PADDING * 2 + OPTION_GAP * (optionCount - 1);
+    const availableOptionWidth = Math.max(0, (containerWidth - trackChrome) / optionCount);
     const resolveContentOptionWidth = (contentWidth: number) =>
       contentWidth > 0
         ? Math.max(
@@ -79,17 +103,28 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE,
           )
         : 0;
-    const optionWidths: [number, number] = fullWidth
-      ? [availableOptionWidth, availableOptionWidth]
-      : [resolveContentOptionWidth(contentWidths[0]), resolveContentOptionWidth(contentWidths[1])];
-    const selectedOptionWidth = optionWidths[selectedIndex];
+
+    const optionWidths = fullWidth
+      ? Array.from({ length: optionCount }, () => availableOptionWidth)
+      : contentWidths.map((width) => resolveContentOptionWidth(width));
+
+    const selectedOptionWidth = optionWidths[selectedIndex] ?? 0;
+    const indicatorInputRange = options.map((_, index) => index);
+    const indicatorOutputRange = buildIndicatorOutputRange(optionWidths);
     const indicatorTranslateX = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, optionWidths[0] + 4],
+      inputRange: indicatorInputRange,
+      outputRange: indicatorOutputRange,
     });
 
     useApplyWebClassName(containerRef, resolvedClassName);
 
+    useEffect(() => {
+      setContentWidths((current) => {
+        if (current.length === optionCount) return current;
+        return Array.from({ length: optionCount }, (_, index) => current[index] ?? 0);
+      });
+    }, [optionCount]);
+
     useEffect(() => {
       const animation = Animated.timing(progress, {
         toValue: selectedIndex,
@@ -139,7 +174,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                   const nextWidth = event.nativeEvent.layout.width;
                   setContentWidths((currentWidths) => {
                     if (currentWidths[index] === nextWidth) return currentWidths;
-                    const nextWidths: [number, number] = [currentWidths[0], currentWidths[1]];
+                    const nextWidths = [...currentWidths];
                     nextWidths[index] = nextWidth;
                     return nextWidths;
                   });
@@ -164,6 +199,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
+          const optionWidth = optionWidths[index] ?? 0;
 
           return (
             <Pressable
@@ -178,10 +214,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                 styles.option,
                 fullWidth
                   ? styles.optionFullWidth
-                  : [
-                      styles.optionContentWidth,
-                      optionWidths[index] > 0 && { width: optionWidths[index] },
-                    ],
+                  : [styles.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
               ]}
             >
               <View style={styles.optionContent}>
@@ -209,8 +242,8 @@ const styles = StyleSheet.create({
   base: {
     height: 44,
     flexDirection: "row",
-    padding: 4,
-    gap: 4,
+    padding: TRACK_PADDING,
+    gap: OPTION_GAP,
     borderRadius: 60,
     backgroundColor: colors.grey700,
     overflow: "hidden",
@@ -255,8 +288,8 @@ const styles = StyleSheet.create({
   },
   activeIndicator: {
     position: "absolute",
-    top: 4,
-    left: 4,
+    top: TRACK_PADDING,
+    left: TRACK_PADDING,
     height: 36,
     backgroundColor: colors.grey600,
     borderRadius: 60,

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, View } from "react-native";
+import {
+  CalendarIcon,
+  HeartIcon,
+  HelpCircleIcon,
+  LayoutGridIcon,
+  SettingsIcon,
+  VideoIcon,
+} from "../../icons";
+import { Sidebar } from "./Sidebar";
+
+const defaultItems = [
+  { key: "bookings", label: "Ամրագրումներ", icon: CalendarIcon, active: true, onPress: fn() },
+  { key: "digitalKeys", label: "Թվային բանալիներ", icon: LayoutGridIcon, onPress: fn() },
+  { key: "cameras", label: "Տեսախցիկներ", icon: VideoIcon, onPress: fn() },
+  { key: "favorites", label: "Նախընտրածներ", icon: HeartIcon, onPress: fn() },
+  { key: "support", label: "Աջակցություն", icon: HelpCircleIcon, onPress: fn() },
+  { key: "settings", label: "Կարգավորումներ", icon: SettingsIcon, onPress: fn() },
+] as const;
+
+const meta = {
+  title: "Components/Sidebar",
+  component: Sidebar,
+  args: {
+    items: [...defaultItems],
+    user: {
+      name: "Աննա Հակոբյան",
+      email: "anna.hakobyan@example.com",
+      imageUrl: "https://i.pravatar.cc/150?img=47",
+    },
+    onLogOut: fn(),
+    logoAccessibilityLabel: "Cortel Booking",
+    navigationAccessibilityLabel: "Հաշվի նավիգացիա",
+    collapseAccessibilityLabel: "Թաքցնել կողագոտին",
+    expandAccessibilityLabel: "Բացել կողագոտին",
+    logOutAccessibilityLabel: "Ելք",
+    defaultCollapsed: false,
+  },
+  argTypes: {
+    collapsed: { control: "boolean" },
+    defaultCollapsed: { control: "boolean" },
+    onLogOut: { action: "log out" },
+    onCollapsedChange: { action: "collapsed change" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <View style={storyStyles.frame}>
+        <Story />
+        <View style={storyStyles.content} />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Collapsed: Story = {
+  args: { defaultCollapsed: true },
+};
+
+export const WithoutImage: Story = {
+  args: {
+    user: {
+      name: "Աննա Հակոբյան",
+      email: "anna.hakobyan@example.com",
+      imageUrl: null,
+    },
+  },
+};
+
+function ControlledSidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+  const [activeKey, setActiveKey] = useState("bookings");
+
+  return (
+    <Sidebar
+      collapsed={collapsed}
+      onCollapsedChange={setCollapsed}
+      onLogOut={fn()}
+      user={{
+        name: "Աննա Հակոբյան",
+        email: "anna.hakobyan@example.com",
+        imageUrl: "https://i.pravatar.cc/150?img=47",
+      }}
+      items={defaultItems.map((item) => ({
+        ...item,
+        active: item.key === activeKey,
+        onPress: () => setActiveKey(item.key),
+      }))}
+    />
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledSidebar />,
+};
+
+const storyStyles = StyleSheet.create({
+  frame: {
+    flexDirection: "row",
+    height: 720,
+    width: "100%",
+    backgroundColor: "#000000",
+  },
+  content: {
+    flex: 1,
+    backgroundColor: "#090909",
+  },
+});