@ecohouse/ui 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.7",
+  "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/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,
@@ -68,6 +72,7 @@ export {
   ClockIcon,
   FacebookIcon,
   HeartIcon,
+  GlobeIcon,
   HelpCircleIcon,
   HomeIcon,
   InstagramIcon,
@@ -106,6 +111,7 @@ export {
   badgeTypography,
   statCardTypography,
   segmentedToggleTypography,
+  languageSwitcherTypography,
   counterTypography,
   ratingTypography,
   commentCardTypography,

package/src/theme/index.ts

@@ -7,6 +7,7 @@ export {
   badgeTypography,
   statCardTypography,
   segmentedToggleTypography,
+  languageSwitcherTypography,
   counterTypography,
   ratingTypography,
   commentCardTypography,

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,