@ecohouse/ui 0.1.36 → 0.1.39

package/src/components/Counter/Counter.tsx

@@ -23,6 +23,8 @@ export interface CounterProps extends Omit<ViewProps, "style" | "children"> {
   max?: number;
   step?: number;
   disabled?: boolean;
+  /** Places the value before both controls for use inside input-like fields. */
+  layout?: "controls-around" | "value-first";
   style?: StyleProp<ViewStyle>;
   className?: string;
   hitSlop?: PressableProps["hitSlop"];
@@ -51,6 +53,7 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
     max,
     step = 1,
     disabled = false,
+    layout = "controls-around",
     style,
     className,
     hitSlop,
@@ -78,33 +81,57 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
     onValueChange?.(next);
   };
 
-  return (
-    <View {...rest} ref={setContainerRef} style={[styles.base, style]}>
-      <Pressable
-        disabled={decrementDisabled}
-        hitSlop={hitSlop}
-        onPress={() => updateValue(resolvedValue - step)}
-        accessibilityRole="button"
-        accessibilityLabel="Decrease value"
-        accessibilityState={{ disabled: decrementDisabled }}
-        style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
-      >
-        <MinusIcon />
-      </Pressable>
-
-      <Text style={styles.value}>{resolvedValue}</Text>
+  const decrement = (
+    <Pressable
+      disabled={decrementDisabled}
+      hitSlop={hitSlop}
+      onPress={() => updateValue(resolvedValue - step)}
+      accessibilityRole="button"
+      accessibilityLabel="Decrease value"
+      accessibilityState={{ disabled: decrementDisabled }}
+      style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
+    >
+      <MinusIcon />
+    </Pressable>
+  );
+  const increment = (
+    <Pressable
+      disabled={incrementDisabled}
+      hitSlop={hitSlop}
+      onPress={() => updateValue(resolvedValue + step)}
+      accessibilityRole="button"
+      accessibilityLabel="Increase value"
+      accessibilityState={{ disabled: incrementDisabled }}
+      style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
+    >
+      <PlusIcon />
+    </Pressable>
+  );
+  const valueNode = (
+    <Text style={[styles.value, layout === "value-first" && styles.leadingValue]}>
+      {resolvedValue}
+    </Text>
+  );
 
-      <Pressable
-        disabled={incrementDisabled}
-        hitSlop={hitSlop}
-        onPress={() => updateValue(resolvedValue + step)}
-        accessibilityRole="button"
-        accessibilityLabel="Increase value"
-        accessibilityState={{ disabled: incrementDisabled }}
-        style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
-      >
-        <PlusIcon />
-      </Pressable>
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[styles.base, layout === "value-first" && styles.valueFirst, style]}
+    >
+      {layout === "value-first" ? (
+        <>
+          {valueNode}
+          {decrement}
+          {increment}
+        </>
+      ) : (
+        <>
+          {decrement}
+          {valueNode}
+          {increment}
+        </>
+      )}
     </View>
   );
 });
@@ -116,6 +143,11 @@ const styles = StyleSheet.create({
     alignSelf: "flex-start",
     gap: 17,
   },
+  valueFirst: {
+    alignSelf: "stretch",
+    flex: 1,
+    gap: 6,
+  },
   button: {
     width: BUTTON_SIZE,
     height: BUTTON_SIZE,
@@ -132,4 +164,7 @@ const styles = StyleSheet.create({
     ...counterTypography,
     color: colors.white,
   },
+  leadingValue: {
+    flex: 1,
+  },
 });

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,79 @@
+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 { Drawer } from "./Drawer";
+
+const meta = {
+  title: "Components/Drawer",
+  component: Drawer,
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DrawerDemo() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <View style={styles.page}>
+      <Pressable onPress={() => setOpen(true)} style={styles.openButton}>
+        <Text style={styles.openLabel}>Open drawer</Text>
+      </Pressable>
+
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Չեղարկված ամրագրումներ"
+        closeAccessibilityLabel="Close drawer"
+      >
+        <View style={styles.body}>
+          <Text style={styles.bodyText}>Drawer body content</Text>
+        </View>
+      </Drawer>
+    </View>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onClose: () => undefined,
+    children: null,
+  },
+  render: () => <DrawerDemo />,
+};
+
+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,
+  },
+  body: {
+    flex: 1,
+    padding: 24,
+    gap: 24,
+  },
+  bodyText: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    color: colors.lightGrey,
+  },
+});

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,239 @@
+import { forwardRef, useEffect, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import {
+  Modal as RNModal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { CloseIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface DrawerProps {
+  /** Controls visibility. */
+  open: boolean;
+  /** Called on backdrop press, Escape / Android back, or header close. */
+  onClose: () => void;
+  children: ReactNode;
+  /** Header title. When set, the standard drawer header is rendered. */
+  title?: string;
+  /** Panel width in px. Defaults to `652`. */
+  width?: number;
+  /** Close when the dimmed backdrop is pressed. Defaults to `true`. */
+  closeOnBackdropPress?: boolean;
+  /** Accessible name for the backdrop control. Defaults to `"Close"`. */
+  backdropAccessibilityLabel?: string;
+  /** Accessible name for the header close control. Defaults to `"Close"`. */
+  closeAccessibilityLabel?: string;
+  /** Style for the drawer panel. */
+  style?: StyleProp<ViewStyle>;
+  /** Web CSS class applied to the drawer panel. */
+  className?: string;
+}
+
+const BACKDROP_COLOR = "#09090933";
+const DEFAULT_WIDTH = 652;
+const WEB_Z_INDEX = 500;
+const CLOSE_ICON_SIZE = 24;
+
+/** Plain DOM backdrop — RN StyleSheet often drops `backdrop-filter`. */
+const webBackdropDomStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  backgroundColor: BACKDROP_COLOR,
+  backdropFilter: "blur(18px)",
+  WebkitBackdropFilter: "blur(18px)",
+  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",
+  justifyContent: "flex-end",
+} as const;
+
+export const Drawer = forwardRef<ComponentRef<typeof View>, DrawerProps>(function Drawer(
+  {
+    open,
+    onClose,
+    children,
+    title,
+    width = DEFAULT_WIDTH,
+    closeOnBackdropPress = true,
+    backdropAccessibilityLabel = "Close",
+    closeAccessibilityLabel = "Close",
+    style,
+    className,
+  },
+  forwardedRef,
+) {
+  const panelRef = useRef<ComponentRef<typeof View>>(null);
+  const setPanelRef = useMemo(() => mergeRefs(panelRef, forwardedRef), [forwardedRef]);
+  const resolvedClassName = className?.trim() || undefined;
+
+  useApplyWebClassName(panelRef, 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 header =
+    title != null && title !== "" ? (
+      <View style={styles.header}>
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={closeAccessibilityLabel}
+          hitSlop={8}
+          onPress={onClose}
+          style={styles.closeButton}
+        >
+          <CloseIcon color={colors.white} size={CLOSE_ICON_SIZE} />
+        </Pressable>
+      </View>
+    ) : null;
+
+  const panel = (
+    <View
+      ref={setPanelRef}
+      accessibilityViewIsModal
+      style={[styles.panel, { width }, style]}
+      onStartShouldSetResponder={() => true}
+    >
+      {header}
+      <View style={styles.body}>{children}</View>
+    </View>
+  );
+
+  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,
+            height: "100%",
+            maxWidth: "100%",
+            display: "flex",
+          }}
+        >
+          {panel}
+        </div>
+      </div>,
+      document.body,
+    );
+  }
+
+  return (
+    <RNModal
+      visible={open}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View style={styles.root} accessibilityViewIsModal>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          disabled={!closeOnBackdropPress}
+          onPress={closeOnBackdropPress ? onClose : undefined}
+          style={styles.backdrop}
+        />
+        {panel}
+      </View>
+    </RNModal>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: BACKDROP_COLOR,
+  },
+  panel: {
+    zIndex: 1,
+    height: "100%",
+    maxWidth: "100%",
+    backgroundColor: colors.grey800,
+  },
+  header: {
+    height: 65,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingTop: 20,
+    paddingRight: 24,
+    paddingBottom: 20,
+    paddingLeft: 24,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey650,
+  },
+  title: {
+    flex: 1,
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.white,
+    marginRight: 12,
+  },
+  closeButton: {
+    width: CLOSE_ICON_SIZE,
+    height: CLOSE_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  body: {
+    flex: 1,
+    minHeight: 0,
+  },
+});

package/src/components/Drawer/index.ts

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

package/src/components/QuantityInput/QuantityInput.stories.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { GuestsIcon } from "../../icons";
+import { QuantityInput } from "./QuantityInput";
+
+const meta = {
+  title: "Components/QuantityInput",
+  component: QuantityInput,
+  args: {
+    label: "Maximum guests",
+    icon: GuestsIcon,
+    defaultValue: 1,
+    min: 1,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof QuantityInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithError: Story = {
+  args: { error: true, hint: "Choose at least one guest" },
+};
+
+function ControlledQuantityInput() {
+  const [value, setValue] = useState(1);
+  return (
+    <QuantityInput
+      icon={GuestsIcon}
+      label="Maximum guests"
+      max={20}
+      min={1}
+      onValueChange={setValue}
+      value={value}
+    />
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledQuantityInput />,
+};

package/src/components/QuantityInput/QuantityInput.tsx

@@ -0,0 +1,153 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent, IconProps } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { Counter } from "../Counter";
+
+export interface QuantityInputProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  error?: boolean;
+  hint?: string;
+  showHint?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+/** Input-like labeled quantity control with an icon and increment/decrement actions. */
+export const QuantityInput = forwardRef<ComponentRef<typeof View>, QuantityInputProps>(
+  function QuantityInput(
+    {
+      label,
+      icon: Icon,
+      iconProps,
+      iconSize = 20,
+      value,
+      defaultValue,
+      onValueChange,
+      min = 1,
+      max,
+      step = 1,
+      disabled = false,
+      error = false,
+      hint,
+      showHint = true,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const rootRef = useRef<ComponentRef<typeof View>>(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(rootRef, className?.trim() || undefined);
+
+    return (
+      <View
+        {...rest}
+        ref={setRootRef}
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ disabled }}
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        <Text style={[styles.label, error && styles.errorText]}>{label}</Text>
+        <View style={[styles.field, error && styles.errorField]}>
+          <View style={styles.iconSlot}>
+            <Icon
+              {...iconProps}
+              color={iconProps?.color ?? (error ? colors.red : colors.grey150)}
+              size={iconSize}
+            />
+          </View>
+          <Counter
+            defaultValue={defaultValue}
+            disabled={disabled}
+            layout="value-first"
+            max={max}
+            min={min}
+            onValueChange={onValueChange}
+            step={step}
+            value={value}
+          />
+        </View>
+        {showHint && hint ? (
+          <Text style={[styles.hint, error && styles.errorText]}>{hint}</Text>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: "stretch",
+    flexDirection: "column",
+    gap: 8,
+    minWidth: 0,
+  },
+  label: {
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    letterSpacing: -0.24,
+    lineHeight: 12,
+  },
+  field: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    backgroundColor: colors.grey700,
+    borderColor: colors.grey700,
+    borderRadius: 60,
+    borderWidth: 1,
+    flexDirection: "row",
+    gap: 10,
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 6,
+    paddingVertical: 5,
+  },
+  iconSlot: {
+    alignItems: "center",
+    flexShrink: 0,
+    height: 20,
+    justifyContent: "center",
+    width: 20,
+  },
+  hint: {
+    color: colors.grey100,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+  },
+  errorField: {
+    borderColor: colors.redMuted,
+  },
+  errorText: {
+    color: colors.red,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/src/components/QuantityInput/index.ts

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

package/src/components/StatusBadge/StatusBadge.tsx

@@ -98,7 +98,7 @@ const styles = StyleSheet.create({
   label: {
     fontFamily: fonts.sans,
     fontSize: 12,
-    fontWeight: "600",
+    fontWeight: "700",
     lineHeight: 12,
     letterSpacing: 0,
   },

package/src/components/index.ts

@@ -28,12 +28,18 @@ export type { ContactInfoCardProps } from "./ContactInfoCard";
 export { AccordionItem } from "./AccordionItem";
 export type { AccordionItemProps } from "./AccordionItem";
 
+export { Accordion } from "./Accordion";
+export type { AccordionProps } from "./Accordion";
+
 export { StepList } from "./StepList";
 export type { StepListProps } from "./StepList";
 
 export { Counter } from "./Counter";
 export type { CounterProps } from "./Counter";
 
+export { QuantityInput } from "./QuantityInput";
+export type { QuantityInputProps } from "./QuantityInput";
+
 export { SegmentedToggle } from "./SegmentedToggle";
 export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";
 
@@ -71,9 +77,15 @@ export type { FloatingActionButtonProps } from "./FloatingActionButton";
 export { Modal } from "./Modal";
 export type { ModalProps } from "./Modal";
 
+export { Drawer } from "./Drawer";
+export type { DrawerProps } from "./Drawer";
+
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 
+export { AutocompleteInput } from "./AutocompleteInput";
+export type { AutocompleteInputProps, AutocompleteOption } from "./AutocompleteInput";
+
 export { VerificationCodeInput } from "./VerificationCodeInput";
 export type {
   VerificationCodeInputHandle,

package/src/icons/ArrowLeft/ArrowLeftIcon.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { ARROW_LEFT_PATH } from "./arrowLeftPath";
+
+describe("ArrowLeftIcon", () => {
+  it("uses the approved 24px path", () => {
+    expect(ARROW_LEFT_PATH).toBe(
+      "M10.1972 6.59961L4.80078 11.9994L10.1972 17.3996M4.80078 11.9965H19.202",
+    );
+  });
+});