@ecohouse/ui 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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/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 />,
+};

package/src/components/RatingInput/RatingInput.tsx

@@ -0,0 +1,168 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { StarFilledIcon, StarIcon } from "../../icons";
+import { colors, ratingTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+const STAR_COUNT = 5;
+const BASE_ITEM_SIZE = 16;
+const ICON_WIDTH_RATIO = 12.57 / BASE_ITEM_SIZE;
+const ICON_HEIGHT_RATIO = 11.98 / BASE_ITEM_SIZE;
+const STAR_GAP_RATIO = 2 / BASE_ITEM_SIZE;
+
+export interface RatingInputProps extends Omit<ViewProps, "style" | "children"> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  showValue?: boolean;
+  precision?: number;
+  /** Star item size. Glyph dimensions and default spacing scale with it. */
+  size?: number;
+  /** Overrides the proportional spacing between star items. */
+  starGap?: number;
+  readOnly?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  valueStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+  accessibilityLabel?: string;
+}
+
+function clamp(value: number) {
+  return Math.max(0, Math.min(value, STAR_COUNT));
+}
+
+export const RatingInput = forwardRef<ComponentRef<typeof View>, RatingInputProps>(
+  function RatingInput(
+    {
+      value,
+      defaultValue = 0,
+      onValueChange,
+      showValue = true,
+      precision = 1,
+      size = 20,
+      starGap,
+      readOnly = false,
+      disabled = false,
+      style,
+      valueStyle,
+      className,
+      hitSlop = 6,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => clamp(defaultValue));
+    const selectedValue = clamp(isControlled ? value : uncontrolledValue);
+    const selectedStarCount = Math.round(selectedValue);
+    const iconWidth = size * ICON_WIDTH_RATIO;
+    const iconHeight = size * ICON_HEIGHT_RATIO;
+    const resolvedStarGap = starGap ?? size * STAR_GAP_RATIO;
+    const resolvedAccessibilityLabel =
+      accessibilityLabel ?? (readOnly ? `${selectedValue} out of ${STAR_COUNT} stars` : "Rating");
+
+    useApplyWebClassName(containerRef, className);
+
+    const selectValue = (nextValue: number) => {
+      if (disabled || nextValue === selectedValue) return;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        {showValue ? (
+          <Text numberOfLines={1} style={[styles.value, valueStyle]}>
+            {selectedValue.toFixed(precision)}
+          </Text>
+        ) : null}
+
+        <View
+          accessibilityRole={readOnly ? "image" : "radiogroup"}
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessibilityState={{ disabled }}
+          style={[styles.stars, { gap: resolvedStarGap }]}
+        >
+          {Array.from({ length: STAR_COUNT }, (_, index) => {
+            const starValue = index + 1;
+            const isSelected = starValue <= selectedStarCount;
+            const icon = isSelected ? (
+              <StarFilledIcon size={iconWidth} height={iconHeight} />
+            ) : (
+              <StarIcon size={iconWidth} height={iconHeight} />
+            );
+            const itemStyle = [styles.starItem, { width: size, height: size }];
+
+            if (readOnly) {
+              return (
+                <View key={starValue} style={itemStyle}>
+                  {icon}
+                </View>
+              );
+            }
+
+            return (
+              <Pressable
+                key={starValue}
+                disabled={disabled}
+                hitSlop={hitSlop}
+                onPress={() => selectValue(starValue)}
+                accessibilityRole="radio"
+                accessibilityLabel={`${starValue} star${starValue === 1 ? "" : "s"}`}
+                accessibilityState={{ checked: isSelected, disabled }}
+                style={itemStyle}
+              >
+                {icon}
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    alignSelf: "flex-start",
+    gap: 16,
+  },
+  stars: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  starItem: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  value: {
+    ...ratingTypography,
+    color: colors.white,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/components/RatingInput/index.ts

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

package/src/components/index.ts

@@ -38,3 +38,9 @@ export type { TextareaProps } from "./Textarea";
 
 export { Toggle } from "./Toggle";
 export type { ToggleProps } from "./Toggle";
+
+export { RatingInput } from "./RatingInput";
+export type { RatingInputProps } from "./RatingInput";
+
+export { CommentCard } from "./CommentCard";
+export type { CommentCardProps } from "./CommentCard";

package/src/icons/Star/StarIcon.tsx

@@ -0,0 +1,35 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import { STAR_PATH } from "./starPath";
+import type { IconProps } from "../types";
+
+export interface StarIconProps extends IconProps {
+  active?: boolean;
+  height?: number;
+}
+
+/** Native — active is solid orange; inactive is a grey outline. */
+export function StarIcon({
+  active = false,
+  size = 28,
+  height,
+  color,
+  strokeWidth = 2,
+}: StarIconProps) {
+  const resolvedColor = color ?? (active ? "#E38E5E" : colors.grey150);
+
+  return (
+    <Svg width={size} height={height ?? (size * 26) / 28} viewBox="0 0 28 26" fill="none">
+      <Path
+        d={STAR_PATH}
+        fill={active ? resolvedColor : "none"}
+        stroke={resolvedColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { STAR_PATH } from "./starPath";

package/src/icons/Star/StarIcon.web.tsx

@@ -0,0 +1,41 @@
+import { colors } from "../../theme";
+import { STAR_PATH } from "./starPath";
+import type { IconProps } from "../types";
+
+export interface StarIconProps extends IconProps {
+  active?: boolean;
+  height?: number;
+}
+
+/** Web / Storybook — active is solid orange; inactive is a grey outline. */
+export function StarIcon({
+  active = false,
+  size = 28,
+  height,
+  color,
+  strokeWidth = 2,
+}: StarIconProps) {
+  const resolvedColor = color ?? (active ? "#E38E5E" : colors.grey150);
+
+  return (
+    <svg
+      width={size}
+      height={height ?? (size * 26) / 28}
+      viewBox="0 0 28 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={STAR_PATH}
+        fill={active ? resolvedColor : "none"}
+        stroke={resolvedColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { STAR_PATH } from "./starPath";

package/src/icons/Star/index.ts

@@ -0,0 +1,2 @@
+export { StarIcon, STAR_PATH } from "./StarIcon";
+export type { StarIconProps } from "./StarIcon";

package/src/icons/Star/starPath.ts

@@ -0,0 +1,3 @@
+/** Star icon path — 28×26 viewBox. */
+export const STAR_PATH =
+  "M12.6112 2.09824C12.9186 1.47565 13.0722 1.16436 13.2808 1.0649C13.4623 0.978367 13.6732 0.978367 13.8546 1.0649C14.0632 1.16436 14.2169 1.47565 14.5242 2.09824L17.4398 8.00486C17.5305 8.18866 17.5759 8.28056 17.6422 8.35192C17.7009 8.41509 17.7713 8.46628 17.8495 8.50264C17.9378 8.54371 18.0392 8.55854 18.242 8.58818L24.7637 9.54142C25.4505 9.6418 25.7938 9.69199 25.9528 9.85973C26.091 10.0057 26.156 10.2062 26.1297 10.4055C26.0995 10.6346 25.8509 10.8767 25.3537 11.361L20.6363 15.9557C20.4893 16.0989 20.4157 16.1706 20.3683 16.2558C20.3263 16.3312 20.2993 16.4141 20.2889 16.4998C20.2772 16.5966 20.2945 16.6978 20.3292 16.9001L21.4423 23.39C21.5597 24.0745 21.6184 24.4167 21.5081 24.6198C21.4121 24.7965 21.2415 24.9205 21.0438 24.9571C20.8165 24.9992 20.5092 24.8376 19.8945 24.5144L14.0642 21.4483C13.8826 21.3527 13.7917 21.305 13.696 21.2862C13.6113 21.2696 13.5242 21.2696 13.4394 21.2862C13.3437 21.305 13.2529 21.3527 13.0713 21.4483L7.24094 24.5144C6.62626 24.8376 6.31892 24.9992 6.09167 24.9571C5.89395 24.9205 5.72334 24.7965 5.62736 24.6198C5.51704 24.4167 5.57574 24.0745 5.69314 23.39L6.80622 16.9001C6.84092 16.6978 6.85828 16.5966 6.84653 16.4998C6.83614 16.4141 6.80919 16.3312 6.76718 16.2558C6.71974 16.1706 6.64621 16.0989 6.49916 15.9557L1.78179 11.361C1.28459 10.8767 1.03599 10.6346 1.00574 10.4055C0.979423 10.2062 1.04445 10.0057 1.18271 9.85973C1.34162 9.69199 1.685 9.6418 2.37177 9.54142L8.89346 8.58818C9.09627 8.55854 9.19768 8.54371 9.286 8.50264C9.36419 8.46628 9.43459 8.41509 9.49329 8.35192C9.55958 8.28056 9.60495 8.18866 9.69567 8.00486L12.6112 2.09824Z";

package/src/icons/StarFilled/StarFilledIcon.tsx

@@ -0,0 +1,28 @@
+import Svg, { Path } from "react-native-svg";
+import { STAR_PATH } from "../Star/starPath";
+import type { IconProps } from "../types";
+
+interface StarFilledIconProps extends IconProps {
+  height?: number;
+}
+
+/** Native — supplied solid orange 28×26 star icon. */
+export function StarFilledIcon({
+  size = 28,
+  height,
+  color = "#E38E5E",
+  strokeWidth = 2,
+}: StarFilledIconProps) {
+  return (
+    <Svg width={size} height={height ?? (size * 26) / 28} viewBox="0 0 28 26" fill={color}>
+      <Path
+        d={STAR_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/StarFilled/StarFilledIcon.web.tsx

@@ -0,0 +1,34 @@
+import { STAR_PATH } from "../Star/starPath";
+import type { IconProps } from "../types";
+
+interface StarFilledIconProps extends IconProps {
+  height?: number;
+}
+
+/** Web / Storybook — supplied solid orange 28×26 star icon. */
+export function StarFilledIcon({
+  size = 28,
+  height,
+  color = "#E38E5E",
+  strokeWidth = 2,
+}: StarFilledIconProps) {
+  return (
+    <svg
+      width={size}
+      height={height ?? (size * 26) / 28}
+      viewBox="0 0 28 26"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={STAR_PATH}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/StarFilled/index.ts

@@ -0,0 +1 @@
+export { StarFilledIcon } from "./StarFilledIcon";

package/src/icons/index.ts

@@ -35,6 +35,9 @@ export { SearchIcon } from "./Search";
 export { SettingsIcon } from "./Settings";
 export { ShowIcon } from "./Show";
 export { SidebarIcon } from "./Sidebar";
+export { StarIcon } from "./Star";
+export { StarFilledIcon } from "./StarFilled";
 export { UserIcon } from "./User";
 export { UsersAltIcon } from "./UsersAlt";
 export { VideoIcon } from "./Video";
+export type { StarIconProps } from "./Star";

package/src/icons/registry.ts

@@ -28,6 +28,8 @@ import { SearchIcon } from "./Search";
 import { SettingsIcon } from "./Settings";
 import { ShowIcon } from "./Show";
 import { SidebarIcon } from "./Sidebar";
+import { StarIcon } from "./Star";
+import { StarFilledIcon } from "./StarFilled";
 import { UserIcon } from "./User";
 import { UsersAltIcon } from "./UsersAlt";
 import { VideoIcon } from "./Video";
@@ -64,6 +66,8 @@ export const icons = {
   settings: SettingsIcon,
   show: ShowIcon,
   sidebar: SidebarIcon,
+  star: StarIcon,
+  starFilled: StarFilledIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon,
@@ -86,6 +90,8 @@ export const iconGroups = {
     "calendar",
     "calendarOutline",
     "heart",
+    "star",
+    "starFilled",
     "minus",
     "plus",
   ],