@ecohouse/ui 0.1.6 → 0.1.8

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

@@ -10,6 +10,9 @@ export type { CounterProps } from "./Counter";
 export { SegmentedToggle } from "./SegmentedToggle";
 export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";
 
+export { LanguageSwitcher, defaultLanguageOptions } from "./LanguageSwitcher";
+export type { LanguageOption, LanguageSwitcherProps } from "./LanguageSwitcher";
+
 export { StatCard } from "./StatCard";
 export type { StatCardProps } from "./StatCard";
 
@@ -38,3 +41,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/Globe/GlobeIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { GLOBE_PATH } from "./globePath";
+
+export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={GLOBE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { GLOBE_PATH } from "./globePath";

package/src/icons/Globe/GlobeIcon.web.tsx

@@ -0,0 +1,26 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { GLOBE_PATH } from "./globePath";
+
+export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={GLOBE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { GLOBE_PATH } from "./globePath";

package/src/icons/Globe/globePath.ts

@@ -0,0 +1,3 @@
+/** Globe paths — 20×20 viewBox. */
+export const GLOBE_PATH =
+  "M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667M18.3333 10H1.66667M10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10M10 18.3333C12.0833 16.0511 13.2675 13.0836 13.3333 10C13.2675 6.91643 12.0833 3.94892 10 1.66667M10 18.3333C7.91667 16.0511 6.73248 13.0836 6.66667 10C6.73248 6.91643 7.91667 3.94892 10 1.66667M1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667";

package/src/icons/Globe/index.ts

@@ -0,0 +1,2 @@
+export { GlobeIcon } from "./GlobeIcon";
+export { GLOBE_PATH } from "./globePath";

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

@@ -19,6 +19,7 @@ export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { FacebookIcon } from "./Facebook";
 export { HeartIcon } from "./Heart";
+export { GlobeIcon } from "./Globe";
 export { HelpCircleIcon } from "./HelpCircle";
 export { HomeIcon } from "./Home";
 export { InstagramIcon } from "./Instagram";
@@ -35,6 +36,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

@@ -12,6 +12,7 @@ import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { FacebookIcon } from "./Facebook";
 import { HeartIcon } from "./Heart";
+import { GlobeIcon } from "./Globe";
 import { HelpCircleIcon } from "./HelpCircle";
 import { HomeIcon } from "./Home";
 import { InstagramIcon } from "./Instagram";
@@ -28,6 +29,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";
@@ -48,6 +51,7 @@ export const icons = {
   clock: ClockIcon,
   facebook: FacebookIcon,
   heart: HeartIcon,
+  globe: GlobeIcon,
   helpCircle: HelpCircleIcon,
   home: HomeIcon,
   instagram: InstagramIcon,
@@ -64,6 +68,8 @@ export const icons = {
   settings: SettingsIcon,
   show: ShowIcon,
   sidebar: SidebarIcon,
+  star: StarIcon,
+  starFilled: StarFilledIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon,
@@ -86,13 +92,15 @@ export const iconGroups = {
     "calendar",
     "calendarOutline",
     "heart",
+    "star",
+    "starFilled",
     "minus",
     "plus",
   ],
   objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
-  interface: ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"],
+  interface: ["globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut"],
 } as const satisfies Record<string, readonly IconName[]>;
 
 export type IconGroup = keyof typeof iconGroups;

package/src/index.ts

@@ -3,6 +3,8 @@ export {
   Badge,
   Counter,
   SegmentedToggle,
+  LanguageSwitcher,
+  defaultLanguageOptions,
   StatCard,
   Button,
   Checkbox,
@@ -11,6 +13,8 @@ export {
   Select,
   Textarea,
   Toggle,
+  RatingInput,
+  CommentCard,
 } from "./components";
 export type {
   AvatarProps,
@@ -20,6 +24,8 @@ export type {
   CounterProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
+  LanguageOption,
+  LanguageSwitcherProps,
   StatCardProps,
   ButtonProps,
   ButtonSize,
@@ -38,6 +44,8 @@ export type {
   SelectMultipleProps,
   TextareaProps,
   ToggleProps,
+  RatingInputProps,
+  CommentCardProps,
 } from "./components";
 
 export { MenuItem } from "./primitives";
@@ -64,6 +72,7 @@ export {
   ClockIcon,
   FacebookIcon,
   HeartIcon,
+  GlobeIcon,
   HelpCircleIcon,
   HomeIcon,
   InstagramIcon,
@@ -80,11 +89,20 @@ export {
   SettingsIcon,
   ShowIcon,
   SidebarIcon,
+  StarIcon,
+  StarFilledIcon,
   UserIcon,
   UsersAltIcon,
   VideoIcon,
 } from "./icons";
-export type { IconProps, IconName, IconGroup, IconComponent, IconByNameProps } from "./icons";
+export type {
+  IconProps,
+  IconName,
+  IconGroup,
+  IconComponent,
+  IconByNameProps,
+  StarIconProps,
+} from "./icons";
 
 export {
   colors,
@@ -93,7 +111,10 @@ export {
   badgeTypography,
   statCardTypography,
   segmentedToggleTypography,
+  languageSwitcherTypography,
   counterTypography,
+  ratingTypography,
+  commentCardTypography,
   buttonTypography,
   datePickerTypography,
   inputTypography,

package/src/theme/index.ts

@@ -7,7 +7,10 @@ export {
   badgeTypography,
   statCardTypography,
   segmentedToggleTypography,
+  languageSwitcherTypography,
   counterTypography,
+  ratingTypography,
+  commentCardTypography,
   buttonTypography,
   datePickerTypography,
   inputTypography,

package/src/theme/typography.ts

@@ -47,6 +47,15 @@ export const segmentedToggleTypography = {
   letterSpacing: 0,
 } as const;
 
+/** Language switcher trigger and option labels — SemiBold 14. */
+export const languageSwitcherTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "600" as const,
+  lineHeight: 19,
+  letterSpacing: 0,
+} as const;
+
 /** Counter value — Bold 14, line-height 100%, letter-spacing 0. */
 export const counterTypography = {
   fontFamily: fonts.sans,
@@ -56,6 +65,47 @@ export const counterTypography = {
   letterSpacing: 0,
 } as const;
 
+/** Rating score — Bold 32, line-height 112%, letter-spacing 0. */
+export const ratingTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 32,
+  fontWeight: "700" as const,
+  lineHeight: 35.84,
+  letterSpacing: 0,
+} as const;
+
+/** Comment card identity, body, and action typography. */
+export const commentCardTypography = {
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600" as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+  date: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  comment: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 19,
+    letterSpacing: 0,
+  },
+  action: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "700" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+} as const;
+
 /** Input label / field / hint typography. */
 export const inputTypography = {
   label: {