@ecohouse/ui 0.1.6 → 0.1.8

package/package.json

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

package/src/components/CommentCard/CommentCard.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CommentCard } from "./CommentCard";
+
+const meta = {
+  title: "Components/Comment Card",
+  component: CommentCard,
+  args: {
+    userName: "Աննա Սարգսյան",
+    date: "Հուլիս 2026",
+    commentText:
+      "Աննկարագրելի գեղեցիկ և հանգիստ վայր։ QR-ով մուտքն անչափ հարմար էր, իսկ քոթեջի ներսում ամեն ինչ մտածված էր մինչև ամենափոքր մանրուքը։",
+    rating: 4,
+    imageUrl: "https://i.pravatar.cc/150?img=47",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof CommentCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutImage: Story = {
+  args: { imageUrl: undefined },
+};
+
+export const ShortComment: Story = {
+  args: { commentText: "Հիանալի վայր և սպասարկում։" },
+};

package/src/components/CommentCard/CommentCard.tsx

@@ -0,0 +1,209 @@
+import { forwardRef, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Image,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { UserIcon } from "../../icons";
+import { colors, commentCardTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { RatingInput } from "../RatingInput";
+
+export interface CommentCardProps extends Omit<ViewProps, "style" | "children"> {
+  userName: string;
+  date: string;
+  commentText: string;
+  rating: number;
+  imageUrl?: string | null;
+  maxCommentLines?: number;
+  maxCommentLength?: number;
+  readMoreLabel?: string;
+  readLessLabel?: string;
+  onExpandedChange?: (expanded: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  commentStyle?: StyleProp<TextStyle>;
+  className?: string;
+}
+
+const CARD_WIDTH = 370;
+const CARD_MIN_HEIGHT = 173;
+const AVATAR_SIZE = 44;
+
+export const CommentCard = forwardRef<ComponentRef<typeof View>, CommentCardProps>(
+  function CommentCard(
+    {
+      userName,
+      date,
+      commentText,
+      rating,
+      imageUrl,
+      maxCommentLines = 3,
+      maxCommentLength = 111,
+      readMoreLabel = "Դիտել ավելին",
+      readLessLabel = "Փակել",
+      onExpandedChange,
+      style,
+      commentStyle,
+      className,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const [imageFailed, setImageFailed] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const [actionHovered, setActionHovered] = useState(false);
+    const hasImage = Boolean(imageUrl) && !imageFailed;
+    const shouldShowAction = Array.from(commentText).length >= maxCommentLength;
+
+    useApplyWebClassName(containerRef, className);
+
+    useEffect(() => {
+      setImageFailed(false);
+    }, [imageUrl]);
+
+    useEffect(() => {
+      setExpanded(false);
+      setActionHovered(false);
+    }, [commentText, maxCommentLength, maxCommentLines]);
+
+    const toggleExpanded = () => {
+      const next = !expanded;
+      setExpanded(next);
+      onExpandedChange?.(next);
+    };
+
+    return (
+      <View {...rest} ref={setContainerRef} style={[styles.root, style]}>
+        <View style={styles.header}>
+          <View style={styles.avatar}>
+            {hasImage ? (
+              <Image
+                source={{ uri: imageUrl ?? undefined }}
+                style={styles.avatarImage}
+                onError={() => setImageFailed(true)}
+              />
+            ) : (
+              <UserIcon size={20} color={colors.primary} />
+            )}
+          </View>
+
+          <View style={styles.identity}>
+            <Text numberOfLines={1} style={styles.name}>
+              {userName}
+            </Text>
+            <Text numberOfLines={1} style={styles.date}>
+              {date}
+            </Text>
+          </View>
+
+          <RatingInput value={rating} readOnly showValue={false} size={16} />
+        </View>
+
+        <Text
+          numberOfLines={expanded ? undefined : maxCommentLines}
+          style={[styles.comment, commentStyle]}
+        >
+          {commentText}
+        </Text>
+
+        {shouldShowAction ? (
+          <Pressable
+            onPress={toggleExpanded}
+            accessibilityRole="button"
+            accessibilityState={{ expanded }}
+            hitSlop={6}
+            onHoverIn={() => setActionHovered(true)}
+            onHoverOut={() => setActionHovered(false)}
+            style={styles.action}
+          >
+            <Text
+              style={[
+                styles.actionText,
+                expanded && styles.closeActionText,
+                actionHovered &&
+                  (expanded ? styles.closeActionTextHovered : styles.openActionTextHovered),
+              ]}
+            >
+              {expanded ? readLessLabel : readMoreLabel}
+            </Text>
+          </Pressable>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: CARD_WIDTH,
+    minHeight: CARD_MIN_HEIGHT,
+    padding: 16,
+    gap: 12,
+    borderRadius: 12,
+    backgroundColor: colors.grey750,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  avatar: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: AVATAR_SIZE / 2,
+    backgroundColor: colors.grey600,
+  },
+  avatarImage: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE,
+  },
+  identity: {
+    minWidth: 0,
+    flex: 1,
+    gap: 4,
+  },
+  name: {
+    ...commentCardTypography.name,
+    color: colors.white,
+  },
+  date: {
+    ...commentCardTypography.date,
+    color: colors.grey0,
+  },
+  comment: {
+    ...commentCardTypography.comment,
+    color: colors.white,
+  },
+  action: {
+    alignSelf: "flex-start",
+    marginTop: "auto",
+    minHeight: 16,
+    justifyContent: "center",
+  },
+  actionText: {
+    ...commentCardTypography.action,
+    color: colors.white,
+  },
+  closeActionText: {
+    color: colors.primary,
+  },
+  openActionTextHovered: {
+    color: colors.primary,
+  },
+  closeActionTextHovered: {
+    color: colors.white,
+  },
+});

package/src/components/CommentCard/index.ts

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

package/src/components/LanguageSwitcher/LanguageSwitcher.stories.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { View } from "react-native";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+
+const meta = {
+  title: "Components/LanguageSwitcher",
+  component: LanguageSwitcher,
+  args: {
+    defaultValue: "hy",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof LanguageSwitcher>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Open: Story = {
+  args: { defaultOpen: true },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+function ControlledExample() {
+  const [value, setValue] = useState("hy");
+  return <LanguageSwitcher value={value} onValueChange={setValue} />;
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledExample />,
+};
+
+export const CustomLanguages: Story = {
+  render: () => (
+    <View style={{ alignItems: "flex-start" }}>
+      <LanguageSwitcher
+        defaultValue="fr"
+        options={[
+          { value: "fr", label: "Fra" },
+          { value: "de", label: "Deu" },
+          { value: "it", label: "Ita" },
+        ]}
+      />
+    </View>
+  ),
+};

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -0,0 +1,287 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { ChevronDownIcon, GlobeIcon } from "../../icons";
+import { colors, fonts, languageSwitcherTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface LanguageOption {
+  /** Stable locale identifier, such as `hy`, `en`, or `ru`. */
+  value: string;
+  /** Short label shown in the trigger and menu. */
+  label: string;
+}
+
+export interface LanguageSwitcherProps extends Omit<ViewProps, "style" | "children"> {
+  options?: readonly LanguageOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+export const defaultLanguageOptions = [
+  { value: "hy", label: "Հայ" },
+  { value: "en", label: "Eng" },
+  { value: "ru", label: "Рус" },
+] as const satisfies readonly LanguageOption[];
+
+const CONTROL_WIDTH = 90;
+const CONTROL_HEIGHT = 35;
+const ICON_SIZE = 16;
+
+export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSwitcherProps>(
+  function LanguageSwitcher(
+    {
+      options = defaultLanguageOptions,
+      value,
+      defaultValue,
+      onValueChange,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      accessibilityLabel = "Language",
+      style,
+      className,
+      hitSlop = 8,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+    const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const setWrapperRef = useMemo(() => mergeRefs(wrapperRef, forwardedRef), [forwardedRef]);
+    const firstValue = options[0]?.value ?? "";
+    const isValueControlled = value !== undefined;
+    const isOpenControlled = openProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? firstValue);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [triggerHovered, setTriggerHovered] = useState(false);
+    const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+    const selectedValue = isValueControlled ? value : uncontrolledValue;
+    const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
+    const selectedOption =
+      options.find((option) => option.value === selectedValue) ?? options[0] ?? null;
+
+    useApplyWebClassName(wrapperRef, className?.trim() || undefined);
+
+    const setOpen = useCallback(
+      (next: boolean) => {
+        if (disabled || next === isOpen) return;
+        if (!isOpenControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [disabled, isOpen, isOpenControlled, onOpenChange],
+    );
+
+    const closeAndFocusTrigger = useCallback(() => {
+      setOpen(false);
+      const node = triggerRef.current as unknown as { focus?: () => void } | null;
+      node?.focus?.();
+    }, [setOpen]);
+
+    useEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+
+      const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+        const wrapper = wrapperRef.current as unknown as {
+          contains?: (node: Node) => boolean;
+        } | null;
+        const target = event.target;
+        if (wrapper?.contains && target instanceof Node && !wrapper.contains(target)) {
+          setOpen(false);
+        }
+      };
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeAndFocusTrigger();
+        }
+      };
+
+      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("touchstart", handlePointerDown);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("touchstart", handlePointerDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [closeAndFocusTrigger, isOpen, setOpen]);
+
+    const selectLanguage = (nextValue: string) => {
+      if (nextValue !== selectedValue) {
+        if (!isValueControlled) setUncontrolledValue(nextValue);
+        onValueChange?.(nextValue);
+      }
+      closeAndFocusTrigger();
+    };
+
+    return (
+      <View
+        {...rest}
+        ref={setWrapperRef}
+        style={[styles.wrapper, isOpen && styles.wrapperOpen, disabled && styles.disabled, style]}
+      >
+        <Pressable
+          ref={triggerRef}
+          onPress={() => setOpen(!isOpen)}
+          disabled={disabled || options.length === 0}
+          hitSlop={hitSlop}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ disabled, expanded: isOpen }}
+          onHoverIn={() => setTriggerHovered(true)}
+          onHoverOut={() => setTriggerHovered(false)}
+          style={({ pressed }) => [
+            styles.trigger,
+            (triggerHovered || pressed || isOpen) && styles.triggerActive,
+          ]}
+        >
+          <GlobeIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+          <Text style={styles.triggerLabel} numberOfLines={1}>
+            {selectedOption?.label ?? ""}
+          </Text>
+          <View style={[styles.chevron, isOpen && styles.chevronOpen]}>
+            <ChevronDownIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+          </View>
+        </Pressable>
+
+        {isOpen && options.length > 0 ? (
+          <View style={styles.menu} accessibilityRole="menu">
+            {options.map((option) => {
+              const selected = option.value === selectedValue;
+              return (
+                <Pressable
+                  key={option.value}
+                  onPress={() => selectLanguage(option.value)}
+                  accessibilityRole="menuitem"
+                  accessibilityLabel={option.label}
+                  accessibilityState={{ selected }}
+                  onHoverIn={() => setHoveredValue(option.value)}
+                  onHoverOut={() => setHoveredValue(null)}
+                  style={({ pressed }) => [
+                    styles.item,
+                    selected
+                      ? styles.itemSelected
+                      : (hoveredValue === option.value || pressed) && styles.itemHovered,
+                  ]}
+                >
+                  <Text style={[styles.itemLabel, selected && styles.itemLabelSelected]}>
+                    {option.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    width: CONTROL_WIDTH,
+    alignSelf: "flex-start",
+  },
+  wrapperOpen: {
+    zIndex: 20,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  trigger: {
+    width: CONTROL_WIDTH,
+    height: CONTROL_HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 8,
+    borderRadius: 12,
+    backgroundColor: "transparent",
+  },
+  triggerActive: {
+    backgroundColor: colors.grey700,
+  },
+  triggerLabel: {
+    ...languageSwitcherTypography,
+    ...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
+    minWidth: 0,
+    flex: 1,
+    color: colors.white,
+  },
+  chevron: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  chevronOpen: {
+    transform: [{ rotate: "180deg" }],
+  },
+  menu: {
+    position: "absolute",
+    top: CONTROL_HEIGHT + 8,
+    left: 0,
+    width: CONTROL_WIDTH,
+    padding: 8,
+    gap: 8,
+    borderRadius: 12,
+    backgroundColor: colors.grey700,
+    ...Platform.select({
+      web: { boxShadow: `0 8px 24px ${colors.black}73` },
+      default: { elevation: 8 },
+    }),
+  },
+  item: {
+    height: CONTROL_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+  },
+  itemHovered: {
+    backgroundColor: colors.whiteAlpha5,
+  },
+  itemSelected: {
+    backgroundColor: colors.primaryMuted,
+  },
+  itemLabel: {
+    ...languageSwitcherTypography,
+    ...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
+    color: colors.white,
+  },
+  itemLabelSelected: {
+    color: colors.primary,
+  },
+});

package/src/components/LanguageSwitcher/index.ts

@@ -0,0 +1,2 @@
+export { LanguageSwitcher, defaultLanguageOptions } from "./LanguageSwitcher";
+export type { LanguageOption, LanguageSwitcherProps } from "./LanguageSwitcher";

package/src/components/RatingInput/RatingInput.stories.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RatingInput } from "./RatingInput";
+
+const meta = {
+  title: "Components/Rating Input",
+  component: RatingInput,
+  args: {
+    defaultValue: 5,
+    showValue: true,
+    disabled: false,
+  },
+  argTypes: {
+    onValueChange: { action: "valueChange" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof RatingInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithValue: Story = {};
+
+export const WithoutValue: Story = {
+  args: { showValue: false },
+};
+
+export const ReadOnly: Story = {
+  args: { defaultValue: 4, readOnly: true },
+};
+
+function ControlledRatingInput() {
+  const [value, setValue] = useState(3);
+  return <RatingInput value={value} onValueChange={setValue} />;
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledRatingInput />,
+};