@ecohouse/ui 0.1.33 → 0.1.35

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { colors, fonts } from "../../theme";
+import { Modal } from "./Modal";
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ModalDemo() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <View style={styles.page}>
+      <Pressable onPress={() => setOpen(true)} style={styles.openButton}>
+        <Text style={styles.openLabel}>Open modal</Text>
+      </Pressable>
+
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <View style={styles.panel}>
+          <Text style={styles.title}>Modal</Text>
+          <Text style={styles.body}>Backdrop uses #09090933 + blur(20px).</Text>
+          <Pressable onPress={() => setOpen(false)} style={styles.closeButton}>
+            <Text style={styles.closeLabel}>Close</Text>
+          </Pressable>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onClose: () => undefined,
+    children: null,
+  },
+  render: () => <ModalDemo />,
+};
+
+const styles = StyleSheet.create({
+  page: {
+    minHeight: 360,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  openButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 40,
+    backgroundColor: colors.primary,
+  },
+  openLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    color: colors.white,
+  },
+  panel: {
+    width: 320,
+    gap: 16,
+    padding: 24,
+    borderRadius: 24,
+    backgroundColor: colors.dark,
+  },
+  title: {
+    fontFamily: fonts.sans,
+    fontSize: 18,
+    fontWeight: "700",
+    color: colors.white,
+  },
+  body: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    lineHeight: 17.5,
+    color: colors.grey100,
+  },
+  closeButton: {
+    alignSelf: "flex-start",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 40,
+    backgroundColor: colors.grey700,
+  },
+  closeLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    color: colors.white,
+  },
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, useEffect, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import {
+  Modal as RNModal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface ModalProps {
+  /** Controls visibility. */
+  open: boolean;
+  /** Called on backdrop press, Escape / Android back, or explicit close. */
+  onClose: () => void;
+  children: ReactNode;
+  /** Close when the dimmed backdrop is pressed. Defaults to `true`. */
+  closeOnBackdropPress?: boolean;
+  /** Accessible name for the backdrop control. Defaults to `"Close"`. */
+  backdropAccessibilityLabel?: string;
+  /** Style for the centered content wrapper around `children`. */
+  contentStyle?: StyleProp<ViewStyle>;
+  /** Web CSS class applied to the content wrapper. */
+  className?: string;
+}
+
+const BACKDROP_COLOR = "#09090933";
+const WEB_Z_INDEX = 500;
+
+/** Plain DOM backdrop — RN StyleSheet / Modal host often drops `backdrop-filter`. */
+const webBackdropDomStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  backgroundColor: BACKDROP_COLOR,
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)",
+  border: "none",
+  padding: 0,
+  margin: 0,
+  cursor: "pointer",
+} as const;
+
+const webRootDomStyle = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: WEB_Z_INDEX,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+} as const;
+
+export const Modal = forwardRef<ComponentRef<typeof View>, ModalProps>(function Modal(
+  {
+    open,
+    onClose,
+    children,
+    closeOnBackdropPress = true,
+    backdropAccessibilityLabel = "Close",
+    contentStyle,
+    className,
+  },
+  forwardedRef,
+) {
+  const contentRef = useRef<ComponentRef<typeof View>>(null);
+  const setContentRef = useMemo(() => mergeRefs(contentRef, forwardedRef), [forwardedRef]);
+  const resolvedClassName = className?.trim() || undefined;
+
+  useApplyWebClassName(contentRef, resolvedClassName, open && Platform.OS === "web");
+
+  useEffect(() => {
+    if (!open || Platform.OS !== "web") return undefined;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onClose]);
+
+  const content = (
+    <View
+      ref={setContentRef}
+      style={[styles.content, contentStyle]}
+      onStartShouldSetResponder={() => true}
+    >
+      {children}
+    </View>
+  );
+
+  // Web: portal + real DOM backdrop so `backdrop-filter` blurs the page behind.
+  if (Platform.OS === "web") {
+    if (!open || typeof document === "undefined") return null;
+
+    return createPortal(
+      <div style={webRootDomStyle} role="presentation">
+        <button
+          type="button"
+          aria-label={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onClick={closeOnBackdropPress ? onClose : undefined}
+          style={webBackdropDomStyle}
+        />
+        <div style={{ position: "relative", zIndex: 1, maxWidth: "100%", maxHeight: "100%" }}>
+          {content}
+        </div>
+      </div>,
+      document.body,
+    );
+  }
+
+  return (
+    <RNModal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View style={styles.root} accessibilityViewIsModal>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onPress={closeOnBackdropPress ? onClose : undefined}
+          style={styles.backdrop}
+        />
+        {content}
+      </View>
+    </RNModal>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: BACKDROP_COLOR,
+  },
+  content: {
+    zIndex: 1,
+    maxWidth: "100%",
+    maxHeight: "100%",
+  },
+});

package/src/components/Modal/index.ts

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

package/src/components/Select/Select.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -64,6 +65,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   /** Override color for the selected value text in the trigger. */
   valueColor?: string;
   style?: StyleProp<ViewStyle>;
+  /** Styles applied to the dropdown menu only (not the trigger). */
+  menuStyle?: StyleProp<ViewStyle>;
   className?: string;
 };
 
@@ -268,6 +271,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       emptyText = "No results",
       valueColor,
       style,
+      menuStyle,
       className,
       accessibilityLabel,
       // Pulled out only to keep them off `rest` (which is spread onto the root View);
@@ -297,6 +301,10 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+    /** Web: flip menu to the trigger's right edge when it would overflow the viewport. */
+    const [menuAlignEnd, setMenuAlignEnd] = useState(false);
+    /** Web: open above the trigger when there isn't enough space below. */
+    const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
 
     const selectedValues = useMemo(() => {
       const current = isValueControlled
@@ -330,6 +338,25 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     useApplyWebClassName(rootRef, className);
 
+    const resolvedMenuWidth = useMemo(() => {
+      const flat = StyleSheet.flatten(menuStyle);
+      const width = flat?.width;
+      if (typeof width === "number") return width;
+      const minWidth = flat?.minWidth;
+      if (typeof minWidth === "number") return minWidth;
+      return null;
+    }, [menuStyle]);
+
+    const estimatedMenuHeight = useMemo(() => {
+      const searchBlock = showSearch ? 40 + 8 : 0;
+      const optionCount = Math.max(filteredOptions.length, 1);
+      const listHeight = Math.min(
+        optionCount * 43 + Math.max(0, optionCount - 1) * 8,
+        MENU_MAX_LIST_HEIGHT,
+      );
+      return 24 + searchBlock + listHeight;
+    }, [filteredOptions.length, showSearch]);
+
     const setOpen = useCallback(
       (next: boolean) => {
         if (!isOpenControlled) setUncontrolledOpen(next);
@@ -341,6 +368,8 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
         } else {
           setSearchQuery("");
           setHoveredValue(null);
+          setMenuAlignEnd(false);
+          setMenuPlaceAbove(false);
           // Let the parent reset its externally fetched options.
           onSearchChange?.("");
         }
@@ -348,6 +377,38 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       [isOpenControlled, onOpenChange, onSearchChange, selectedValues],
     );
 
+    // Prefer start (left) / below; flip when the menu would overflow the viewport (web).
+    useLayoutEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+
+      const updateMenuPlacement = () => {
+        const trigger = triggerRef.current as unknown as {
+          getBoundingClientRect?: () => DOMRect;
+        } | null;
+        const rect = trigger?.getBoundingClientRect?.();
+        if (!rect) return;
+
+        const viewportPadding = 8;
+        const gap = 8;
+        const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        setMenuAlignEnd(overflowsRight);
+
+        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
+        const spaceAbove = rect.top - viewportPadding;
+        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        setMenuPlaceAbove(needsAbove);
+      };
+
+      updateMenuPlacement();
+      window.addEventListener("resize", updateMenuPlacement);
+      window.addEventListener("scroll", updateMenuPlacement, true);
+      return () => {
+        window.removeEventListener("resize", updateMenuPlacement);
+        window.removeEventListener("scroll", updateMenuPlacement, true);
+      };
+    }, [estimatedMenuHeight, isOpen, resolvedMenuWidth]);
+
     const handleSearchChange = (text: string) => {
       setSearchQuery(text);
       onSearchChange?.(text);
@@ -583,7 +644,14 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
           </Pressable>
 
           {isOpen ? (
-            <View style={styles.menu}>
+            <View
+              style={[
+                styles.menu,
+                menuAlignEnd ? styles.menuAlignEnd : styles.menuAlignStart,
+                menuPlaceAbove ? styles.menuAbove : styles.menuBelow,
+                menuStyle,
+              ]}
+            >
               {showSearch ? (
                 <View style={styles.searchField}>
                   <View style={styles.iconSlot}>
@@ -777,10 +845,7 @@ const styles = StyleSheet.create({
   },
   menu: {
     position: "absolute",
-    top: "100%",
-    left: 0,
-    right: 0,
-    marginTop: 8,
+    minWidth: "100%",
     zIndex: 10,
     borderRadius: MENU_RADIUS,
     padding: 12,
@@ -795,6 +860,26 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto",
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0,
+  },
+  menuBelow: {
+    top: "100%",
+    bottom: "auto",
+    marginTop: 8,
+    marginBottom: 0,
+  },
+  menuAbove: {
+    top: "auto",
+    bottom: "100%",
+    marginTop: 0,
+    marginBottom: 8,
+  },
   optionList: {
     maxHeight: MENU_MAX_LIST_HEIGHT,
   },

package/src/components/Sidebar/Sidebar.tsx

@@ -18,7 +18,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import type { IconComponent } from "../../icons";
-import { SidebarIcon } from "../../icons";
+import { CloseIcon, SidebarIcon } from "../../icons";
 import { BrandLogo, MenuItem } from "../../primitives";
 import { colors, fonts } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
@@ -61,6 +61,10 @@ export interface SidebarProps extends Omit<ViewProps, "style" | "children"> {
   onCollapsedChange?: (collapsed: boolean) => void;
   /** When false, hides the expand/collapse control. Defaults to `true`. */
   showCollapseToggle?: boolean;
+  /** When set, shows a close control in the header (e.g. mobile drawer). */
+  onClose?: () => void;
+  /** Accessible label for the close control. Defaults to `"Close"`. */
+  closeAccessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   className?: string;
 }
@@ -89,6 +93,8 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
     defaultCollapsed = false,
     onCollapsedChange,
     showCollapseToggle = true,
+    onClose,
+    closeAccessibilityLabel = "Close",
     style,
     className,
     ...rest
@@ -143,7 +149,7 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
         style={[
           styles.header,
           collapsed ? styles.headerCollapsed : styles.headerExpanded,
-          !showCollapseToggle ? styles.headerNoToggle : null,
+          !showCollapseToggle && !onClose ? styles.headerNoToggle : null,
         ]}
       >
         <Animated.View
@@ -166,7 +172,17 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
           />
         </Animated.View>
 
-        {showCollapseToggle ? (
+        {onClose ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={closeAccessibilityLabel}
+            hitSlop={8}
+            onPress={onClose}
+            style={styles.toggleButton}
+          >
+            <CloseIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
+          </Pressable>
+        ) : showCollapseToggle ? (
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,7 @@
-import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import { forwardRef, useId, useMemo, useRef, useState, type ComponentRef } from "react";
 import {
   Platform,
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
@@ -132,6 +133,8 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
   const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const reactId = useId();
+  const inputDomId = `eh-textarea-${reactId.replace(/:/g, "")}`;
 
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
@@ -141,28 +144,40 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
   const chrome = chromeFor(visualState);
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? undefined : label);
 
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
 
   return (
     <View ref={rootRef} style={[styles.root, disabled && styles.disabled, style]}>
       {showLabel && label ? (
-        <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+        <Pressable disabled={disabled} onPress={focusInput} style={styles.labelPressable}>
+          <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+        </Pressable>
       ) : null}
 
-      <View
+      <Pressable
+        accessibilityRole="none"
+        disabled={disabled}
+        onPress={focusInput}
         style={[
           styles.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor,
           },
+          Platform.OS === "web" ? styles.fieldWeb : null,
           fieldStyle,
         ]}
       >
         <TextInput
           ref={setInputRef}
           {...textInputProps}
+          nativeID={inputDomId}
           multiline
           textAlignVertical="top"
           value={isControlled ? value : undefined}
@@ -193,7 +208,7 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
           accessibilityLabel={resolvedAccessibilityLabel}
           accessibilityState={{ disabled }}
         />
-      </View>
+      </Pressable>
 
       {showHint && hint ? (
         <Text style={[styles.hint, { color: chrome.hintColor }]}>{hint}</Text>
@@ -211,6 +226,9 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.6,
   },
+  labelPressable: {
+    alignSelf: "flex-start",
+  },
   label: {
     ...textareaTypography.label,
   },
@@ -223,14 +241,21 @@ const styles = StyleSheet.create({
     paddingLeft: FIELD_PADDING_HORIZONTAL,
     paddingRight: FIELD_PADDING_HORIZONTAL,
   },
+  fieldWeb: {
+    cursor: "text" as unknown as ViewStyle["cursor"],
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0,
   },
   inputWeb: {
     outlineStyle: "none",
     resize: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text" as unknown as TextStyle["cursor"],
   } as TextStyle,
   inputAndroid: {
     includeFontPadding: false,

package/src/components/ToggleRow/ToggleRow.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet } from "react-native";
+import { ToggleRow } from "./ToggleRow";
+
+const meta = {
+  title: "Components/ToggleRow",
+  component: ToggleRow,
+  args: {
+    label: "Bookings and digital key",
+    defaultValue: false,
+    onValueChange: fn(),
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof ToggleRow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Active: Story = {
+  args: { defaultValue: true },
+};
+
+export const Stack: Story = {
+  render: () => (
+    <View style={styles.stack}>
+      <ToggleRow label="Bookings and digital key" defaultValue={false} onValueChange={fn()} />
+      <ToggleRow
+        label="Email notifications"
+        defaultValue={false}
+        onValueChange={fn()}
+        showBorder={false}
+      />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    width: 462,
+  },
+});