@ecohouse/ui 0.1.36 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.36",
+  "version": "0.1.39",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",
@@ -26,7 +26,8 @@
       "default": "./src/index.ts"
     },
     "./web/fonts.css": "./src/web/styles/fonts.css",
-    "./web/typography.css": "./src/web/styles/typography.css"
+    "./web/typography.css": "./src/web/styles/typography.css",
+    "./web/account-header.css": "./src/web/styles/account-header.css"
   },
   "files": [
     "dist",
@@ -54,7 +55,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:clean": "rm -rf node_modules/.cache/storybook node_modules/.vite storybook-static && storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "husky"
+    "prepare": "node -e \"if (process.env.CI !== 'true' && process.env.HUSKY !== '0') require('child_process').execSync('husky', { stdio: 'inherit' })\""
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mjs}": [

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Text, TextInput, View } from "react-native";
+import { colors } from "../../theme";
+import { Accordion } from "./Accordion";
+
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion,
+  args: {
+    title: "Russian",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Closed: Story = {
+  args: {
+    children: <Text style={{ color: colors.white }}>Translated content</Text>,
+  },
+};
+
+function InteractiveContent() {
+  const [name, setName] = useState("");
+  return (
+    <View style={{ gap: 16 }}>
+      <Text style={{ color: colors.white }}>Cottage name</Text>
+      <TextInput
+        onChangeText={setName}
+        placeholder="e.g., Alpine Eco Retreat"
+        style={{ backgroundColor: colors.grey700, color: colors.white, padding: 12 }}
+        value={name}
+      />
+    </View>
+  );
+}
+
+export const WithInteractiveContent: Story = {
+  args: {
+    children: <InteractiveContent />,
+    defaultOpen: true,
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,165 @@
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { ChevronDownIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface AccordionProps extends Omit<ViewProps, "style" | "children"> {
+  title: string;
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  error?: boolean;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const DESKTOP_MIN_WIDTH = 1024;
+const CHEVRON_SIZE = 24;
+
+/** Expandable surface for arbitrary interactive content such as form fields. */
+export const Accordion = forwardRef<ComponentRef<typeof View>, AccordionProps>(function Accordion(
+  {
+    title,
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+    error = false,
+    style,
+    contentStyle,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
+  const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+  const controlled = openProp !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = controlled ? Boolean(openProp) : uncontrolledOpen;
+  const { width } = useWindowDimensions();
+  const desktop = width >= DESKTOP_MIN_WIDTH;
+  const horizontalPadding = desktop ? 24 : 16;
+
+  useApplyWebClassName(rootRef, className?.trim() || undefined);
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const next = !open;
+    if (!controlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }, [controlled, disabled, onOpenChange, open]);
+
+  return (
+    <View
+      {...rest}
+      ref={setRootRef}
+      style={[
+        styles.root,
+        { borderRadius: desktop ? 24 : 20 },
+        error && styles.error,
+        disabled && styles.disabled,
+        style,
+      ]}
+    >
+      <Pressable
+        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityRole="button"
+        accessibilityState={{ disabled, expanded: open }}
+        disabled={disabled}
+        onPress={toggle}
+        style={[styles.header, { paddingHorizontal: horizontalPadding }]}
+      >
+        <Text style={[styles.title, desktop ? styles.titleDesktop : styles.titleMobile]}>
+          {title}
+        </Text>
+        <View style={[styles.chevron, open && styles.chevronOpen]}>
+          <ChevronDownIcon color={open ? colors.primary : colors.grey400} size={CHEVRON_SIZE} />
+        </View>
+      </Pressable>
+      {open ? (
+        <View style={[styles.content, { paddingHorizontal: horizontalPadding }, contentStyle]}>
+          {children}
+        </View>
+      ) : null}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: "stretch",
+    backgroundColor: colors.whiteAlpha1,
+    borderColor: "transparent",
+    borderWidth: 1,
+    overflow: "hidden",
+    width: "100%",
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 16,
+    minHeight: 64,
+    paddingVertical: 16,
+    width: "100%",
+  },
+  title: {
+    color: colors.white,
+    flex: 1,
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    letterSpacing: 0,
+    lineHeight: 18,
+    minWidth: 0,
+  },
+  titleMobile: {
+    fontWeight: "500",
+  },
+  titleDesktop: {
+    fontWeight: "600",
+  },
+  chevron: {
+    alignItems: "center",
+    flexShrink: 0,
+    height: CHEVRON_SIZE,
+    justifyContent: "center",
+    transform: [{ rotate: "0deg" }],
+    width: CHEVRON_SIZE,
+  },
+  chevronOpen: {
+    transform: [{ rotate: "180deg" }],
+  },
+  content: {
+    paddingBottom: 16,
+  },
+  error: {
+    borderColor: colors.redMuted,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/src/components/Accordion/index.ts

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

package/src/components/AutocompleteInput/AutocompleteInput.stories.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SearchIcon } from "../../icons";
+import { AutocompleteInput, type AutocompleteOption } from "./AutocompleteInput";
+
+const locations: AutocompleteOption[] = [
+  { value: "yerevan", label: "Yerevan", description: "Armenia" },
+  { value: "gyumri", label: "Gyumri", description: "Shirak, Armenia" },
+  { value: "dilijan", label: "Dilijan", description: "Tavush, Armenia" },
+];
+
+const meta = {
+  title: "Components/AutocompleteInput",
+  component: AutocompleteInput,
+  parameters: { backgrounds: { default: "black" } },
+} satisfies Meta<typeof AutocompleteInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledExample() {
+  const [value, setValue] = useState("");
+  const [options, setOptions] = useState(locations);
+  return (
+    <AutocompleteInput
+      label="Address"
+      leftIcon={SearchIcon}
+      options={options}
+      placeholder="Search address..."
+      showHint={false}
+      showLeftIcon
+      value={value}
+      onChangeText={(query) => {
+        setValue(query);
+        setOptions(
+          locations.filter((option) =>
+            option.label.toLowerCase().includes(query.trim().toLowerCase()),
+          ),
+        );
+      }}
+      onOptionSelect={(option) => setValue(option.label)}
+    />
+  );
+}
+
+export const Default: Story = {
+  args: {
+    options: locations,
+    value: "",
+    onChangeText: () => undefined,
+    onOptionSelect: () => undefined,
+  },
+  render: () => <ControlledExample />,
+};
+
+export const Loading: Story = {
+  args: {
+    defaultOpen: true,
+    label: "Address",
+    loading: true,
+    options: [],
+    placeholder: "Search address...",
+    value: "Yere",
+    onChangeText: () => undefined,
+    onOptionSelect: () => undefined,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    defaultOpen: true,
+    emptyText: "No addresses found",
+    label: "Address",
+    options: [],
+    placeholder: "Search address...",
+    value: "Unknown",
+    onChangeText: () => undefined,
+    onOptionSelect: () => undefined,
+  },
+};

package/src/components/AutocompleteInput/AutocompleteInput.tsx

@@ -0,0 +1,313 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { Input, type InputProps } from "../Input";
+import { colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface AutocompleteOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+export interface AutocompleteInputProps extends Omit<
+  InputProps,
+  "value" | "onChangeText" | "onSubmitEditing"
+> {
+  value: string;
+  options: AutocompleteOption[];
+  onChangeText: (value: string) => void;
+  onOptionSelect: (option: AutocompleteOption) => void;
+  onSubmit?: (firstOption?: AutocompleteOption) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  loading?: boolean;
+  loadingText?: string;
+  emptyText?: string;
+  showEmpty?: boolean;
+  renderOption?: (option: AutocompleteOption, highlighted: boolean) => ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  menuStyle?: StyleProp<ViewStyle>;
+  containerClassName?: string;
+  menuClassName?: string;
+}
+
+const MENU_MAX_HEIGHT = 248;
+const BLUR_CLOSE_DELAY_MS = 120;
+const AUTOCOMPLETE_ROOT_Z_INDEX = 1100;
+const AUTOCOMPLETE_MENU_Z_INDEX = 1101;
+
+export const AutocompleteInput = forwardRef<ComponentRef<typeof View>, AutocompleteInputProps>(
+  function AutocompleteInput(
+    {
+      value,
+      options,
+      onChangeText,
+      onOptionSelect,
+      onSubmit,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      loading = false,
+      loadingText = "Loading...",
+      emptyText = "No results",
+      showEmpty = true,
+      renderOption,
+      containerStyle,
+      menuStyle,
+      containerClassName,
+      menuClassName,
+      disabled = false,
+      onFocus,
+      onBlur,
+      ...inputProps
+    },
+    forwardedRef,
+  ) {
+    const rootRef = useRef<ComponentRef<typeof View>>(null);
+    const menuRef = useRef<ComponentRef<typeof View>>(null);
+    const blurTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+    const controlled = typeof openProp === "boolean";
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const open = controlled ? openProp : uncontrolledOpen;
+
+    useApplyWebClassName(rootRef, containerClassName);
+    useApplyWebClassName(menuRef, menuClassName, open);
+
+    const setOpen = useCallback(
+      (nextOpen: boolean) => {
+        if (!controlled) setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+        if (!nextOpen) setHighlightedIndex(0);
+      },
+      [controlled, onOpenChange],
+    );
+
+    useEffect(() => {
+      if (highlightedIndex < options.length) return;
+      setHighlightedIndex(Math.max(0, options.length - 1));
+    }, [highlightedIndex, options.length]);
+
+    useEffect(() => {
+      if (Platform.OS !== "web" || !open) return;
+      const closeOnOutsidePress = (event: MouseEvent | TouchEvent) => {
+        const root = rootRef.current as unknown as { contains?: (node: Node) => boolean } | null;
+        if (event.target instanceof Node && root?.contains && !root.contains(event.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", closeOnOutsidePress);
+      document.addEventListener("touchstart", closeOnOutsidePress);
+      return () => {
+        document.removeEventListener("mousedown", closeOnOutsidePress);
+        document.removeEventListener("touchstart", closeOnOutsidePress);
+      };
+    }, [open, setOpen]);
+
+    useEffect(
+      () => () => {
+        if (blurTimerRef.current) clearTimeout(blurTimerRef.current);
+      },
+      [],
+    );
+
+    const selectOption = (option: AutocompleteOption) => {
+      if (disabled) return;
+      if (blurTimerRef.current) clearTimeout(blurTimerRef.current);
+      onOptionSelect(option);
+      setOpen(false);
+    };
+
+    const submit = () => {
+      const highlighted = options[highlightedIndex] ?? options[0];
+      if (open && highlighted) {
+        selectOption(highlighted);
+        return;
+      }
+      onSubmit?.(options[0]);
+    };
+
+    const showMenu = open && !disabled && (loading || options.length > 0 || showEmpty);
+
+    return (
+      <View
+        ref={setRootRef}
+        style={[styles.root, open && styles.rootOpen, containerStyle]}
+        accessibilityState={{ disabled, expanded: open }}
+      >
+        <Input
+          {...inputProps}
+          disabled={disabled}
+          value={value}
+          onChangeText={(nextValue) => {
+            onChangeText(nextValue);
+            setHighlightedIndex(0);
+            setOpen(true);
+          }}
+          onFocus={(event) => {
+            if (blurTimerRef.current) clearTimeout(blurTimerRef.current);
+            setOpen(true);
+            onFocus?.(event);
+          }}
+          onBlur={(event) => {
+            blurTimerRef.current = setTimeout(() => setOpen(false), BLUR_CLOSE_DELAY_MS);
+            onBlur?.(event);
+          }}
+          onKeyPress={(event) => {
+            const key = event.nativeEvent.key;
+            if (key === "ArrowDown" && options.length > 0) {
+              setHighlightedIndex((current) => Math.min(current + 1, options.length - 1));
+            } else if (key === "ArrowUp" && options.length > 0) {
+              setHighlightedIndex((current) => Math.max(current - 1, 0));
+            } else if (key === "Escape") {
+              setOpen(false);
+            }
+            inputProps.onKeyPress?.(event);
+          }}
+          onSubmitEditing={submit}
+        />
+
+        {showMenu ? (
+          <View ref={menuRef} style={[styles.menu, menuStyle]}>
+            {loading ? (
+              <View style={styles.statusRow}>
+                <ActivityIndicator color={colors.primary} size="small" />
+                <Text style={styles.statusText}>{loadingText}</Text>
+              </View>
+            ) : options.length === 0 ? (
+              <View style={styles.statusRow}>
+                <Text style={styles.statusText}>{emptyText}</Text>
+              </View>
+            ) : (
+              <ScrollView
+                keyboardShouldPersistTaps="handled"
+                nestedScrollEnabled
+                showsVerticalScrollIndicator
+                style={styles.list}
+              >
+                {options.map((option, index) => {
+                  const highlighted = index === highlightedIndex;
+                  return (
+                    <Pressable
+                      accessibilityRole="button"
+                      key={option.value}
+                      onHoverIn={() => setHighlightedIndex(index)}
+                      onPress={() => selectOption(option)}
+                      style={[styles.option, highlighted && styles.optionHighlighted]}
+                    >
+                      {renderOption ? (
+                        renderOption(option, highlighted)
+                      ) : (
+                        <>
+                          <Text numberOfLines={1} style={styles.optionLabel}>
+                            {option.label}
+                          </Text>
+                          {option.description ? (
+                            <Text numberOfLines={1} style={styles.optionDescription}>
+                              {option.description}
+                            </Text>
+                          ) : null}
+                        </>
+                      )}
+                    </Pressable>
+                  );
+                })}
+              </ScrollView>
+            )}
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    position: "relative",
+    width: 308,
+  },
+  rootOpen: {
+    zIndex: AUTOCOMPLETE_ROOT_Z_INDEX,
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    zIndex: AUTOCOMPLETE_MENU_Z_INDEX,
+    marginTop: 4,
+    padding: 4,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: colors.grey700,
+    borderRadius: 16,
+    backgroundColor: colors.grey700,
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.4,
+    shadowRadius: 18,
+    elevation: 12,
+  },
+  list: {
+    maxHeight: MENU_MAX_HEIGHT,
+  },
+  option: {
+    minHeight: 48,
+    justifyContent: "center",
+    gap: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 12,
+  },
+  optionHighlighted: {
+    backgroundColor: colors.grey600,
+  },
+  optionLabel: {
+    color: colors.white,
+    fontSize: 12,
+    lineHeight: 18,
+    fontWeight: "600",
+  },
+  optionDescription: {
+    color: colors.grey100,
+    fontSize: 11,
+    lineHeight: 16,
+  },
+  statusRow: {
+    minHeight: 48,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  statusText: {
+    color: colors.grey100,
+    fontSize: 12,
+    lineHeight: 18,
+  },
+});

package/src/components/AutocompleteInput/index.ts

@@ -0,0 +1,2 @@
+export { AutocompleteInput } from "./AutocompleteInput";
+export type { AutocompleteInputProps, AutocompleteOption } from "./AutocompleteInput";