@ecohouse/ui 0.1.7 → 0.1.9

package/package.json

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

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/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";
 

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/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";

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";
@@ -50,6 +51,7 @@ export const icons = {
   clock: ClockIcon,
   facebook: FacebookIcon,
   heart: HeartIcon,
+  globe: GlobeIcon,
   helpCircle: HelpCircleIcon,
   home: HomeIcon,
   instagram: InstagramIcon,
@@ -98,7 +100,7 @@ export const iconGroups = {
   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,
@@ -22,6 +24,8 @@ export type {
   CounterProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
+  LanguageOption,
+  LanguageSwitcherProps,
   StatCardProps,
   ButtonProps,
   ButtonSize,
@@ -44,8 +48,14 @@ export type {
   CommentCardProps,
 } from "./components";
 
-export { MenuItem } from "./primitives";
-export type { MenuItemProps } from "./primitives";
+export {
+  BrandLogo,
+  BRAND_LOGO_COLORS,
+  BRAND_LOGO_DEFAULT_HEIGHT,
+  BRAND_LOGO_DEFAULT_WIDTH,
+  MenuItem,
+} from "./primitives";
+export type { BrandLogoProps, BrandLogoVariant, MenuItemProps } from "./primitives";
 
 export {
   Icon,
@@ -68,6 +78,7 @@ export {
   ClockIcon,
   FacebookIcon,
   HeartIcon,
+  GlobeIcon,
   HelpCircleIcon,
   HomeIcon,
   InstagramIcon,
@@ -106,6 +117,7 @@ export {
   badgeTypography,
   statCardTypography,
   segmentedToggleTypography,
+  languageSwitcherTypography,
   counterTypography,
   ratingTypography,
   commentCardTypography,

package/src/primitives/BrandLogo/BrandLogo.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { BrandLogo } from "./BrandLogo";
+
+const meta = {
+  title: "Primitives/BrandLogo",
+  component: BrandLogo,
+  args: {
+    variant: "white",
+    width: 62,
+    height: 86,
+  },
+  argTypes: {
+    variant: { control: "radio", options: ["white", "brand"] },
+    width: { control: { type: "number", min: 1 } },
+    height: { control: { type: "number", min: 1 } },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof BrandLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const White: Story = {};
+
+export const Brand: Story = {
+  args: { variant: "brand" },
+  parameters: { backgrounds: { default: "white" } },
+};
+
+export const CustomWidth: Story = {
+  render: () => <BrandLogo variant="brand" width={124} />,
+  parameters: { backgrounds: { default: "white" } },
+};
+
+export const BothVariants: Story = {
+  render: () => (
+    <View style={styles.row}>
+      <View style={[styles.surface, styles.darkSurface]}>
+        <BrandLogo variant="white" />
+      </View>
+      <View style={[styles.surface, styles.lightSurface]}>
+        <BrandLogo variant="brand" />
+      </View>
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    gap: 24,
+  },
+  surface: {
+    padding: 24,
+  },
+  darkSurface: {
+    backgroundColor: "#000000",
+  },
+  lightSurface: {
+    backgroundColor: "#FFFFFF",
+  },
+});

package/src/primitives/BrandLogo/BrandLogo.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import {
+  BRAND_LOGO_DEFAULT_HEIGHT,
+  BRAND_LOGO_DEFAULT_WIDTH,
+  resolveBrandLogoSize,
+} from "./BrandLogo.types";
+
+describe("resolveBrandLogoSize", () => {
+  it("uses the original dimensions by default", () => {
+    expect(resolveBrandLogoSize()).toEqual({
+      width: BRAND_LOGO_DEFAULT_WIDTH,
+      height: BRAND_LOGO_DEFAULT_HEIGHT,
+    });
+  });
+
+  it("preserves the aspect ratio when only width is supplied", () => {
+    expect(resolveBrandLogoSize(124)).toEqual({ width: 124, height: 172 });
+  });
+
+  it("preserves the aspect ratio when only height is supplied", () => {
+    const size = resolveBrandLogoSize(undefined, 172);
+    expect(size.width).toBeCloseTo(124);
+    expect(size.height).toBe(172);
+  });
+
+  it("respects both explicit dimensions", () => {
+    expect(resolveBrandLogoSize(100, 100)).toEqual({ width: 100, height: 100 });
+  });
+});

package/src/primitives/BrandLogo/BrandLogo.tsx

@@ -0,0 +1,31 @@
+import Svg, { Path } from "react-native-svg";
+import { BRAND_LOGO_PATHS, BRAND_LOGO_VIEW_BOX } from "./brandLogoPaths";
+import { BRAND_LOGO_COLORS, resolveBrandLogoSize, type BrandLogoProps } from "./BrandLogo.types";
+
+/** Native Cortel Booking brand mark. */
+export function BrandLogo({
+  variant = "white",
+  width,
+  height,
+  accessibilityLabel = "Cortel Booking",
+}: BrandLogoProps) {
+  const size = resolveBrandLogoSize(width, height);
+  const fill = BRAND_LOGO_COLORS[variant];
+
+  return (
+    <Svg
+      width={size.width}
+      height={size.height}
+      viewBox={BRAND_LOGO_VIEW_BOX}
+      preserveAspectRatio="none"
+      fill="none"
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel}
+    >
+      {BRAND_LOGO_PATHS.map((path, index) => (
+        <Path key={index} d={path} fill={fill} />
+      ))}
+    </Svg>
+  );
+}

package/src/primitives/BrandLogo/BrandLogo.types.ts

@@ -0,0 +1,45 @@
+export type BrandLogoVariant = "white" | "brand";
+
+export interface BrandLogoProps {
+  /** White for dark surfaces, or the Cortel brand color for light surfaces. */
+  variant?: BrandLogoVariant;
+  /** Rendered width. Defaults to 62; setting only width preserves the original ratio. */
+  width?: number;
+  /** Rendered height. Defaults to 86; setting only height preserves the original ratio. */
+  height?: number;
+  /** Accessible name announced for the logo. */
+  accessibilityLabel?: string;
+}
+
+export const BRAND_LOGO_DEFAULT_WIDTH = 62;
+export const BRAND_LOGO_DEFAULT_HEIGHT = 86;
+
+export const BRAND_LOGO_COLORS = {
+  white: "#FFFFFF",
+  brand: "#B76533",
+} as const satisfies Record<BrandLogoVariant, string>;
+
+export function resolveBrandLogoSize(
+  width?: number,
+  height?: number,
+): { width: number; height: number } {
+  if (width != null && height != null) {
+    return { width, height };
+  }
+
+  if (width != null) {
+    return {
+      width,
+      height: width * (BRAND_LOGO_DEFAULT_HEIGHT / BRAND_LOGO_DEFAULT_WIDTH),
+    };
+  }
+
+  if (height != null) {
+    return {
+      width: height * (BRAND_LOGO_DEFAULT_WIDTH / BRAND_LOGO_DEFAULT_HEIGHT),
+      height,
+    };
+  }
+
+  return { width: BRAND_LOGO_DEFAULT_WIDTH, height: BRAND_LOGO_DEFAULT_HEIGHT };
+}