@ecohouse/ui 0.1.28 → 0.1.30

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,305 @@
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent } from "../../icons";
+import { SidebarIcon } from "../../icons";
+import { BrandLogo, MenuItem } from "../../primitives";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { AvatarSimple } from "../AvatarSimple";
+
+export interface SidebarItem {
+  /** Stable identity for React keys. */
+  key: string;
+  label: string;
+  /** Icon component — colored by the sidebar based on active state. */
+  icon: IconComponent;
+  /** Marks the current route / selection. */
+  active?: boolean;
+  onPress?: () => void;
+}
+
+export interface SidebarUser {
+  name: string;
+  email: string;
+  imageUrl?: string | null;
+}
+
+export interface SidebarProps extends Omit<ViewProps, "style" | "children"> {
+  items: readonly SidebarItem[];
+  user: SidebarUser;
+  onLogOut?: () => void;
+  /** Accessible name for the brand mark. Defaults to `"Cortel Booking"`. */
+  logoAccessibilityLabel?: string;
+  /** Accessible name for the nav landmark. Defaults to `"Account navigation"`. */
+  navigationAccessibilityLabel?: string;
+  /** Accessible label when the sidebar is expanded. Defaults to `"Collapse sidebar"`. */
+  collapseAccessibilityLabel?: string;
+  /** Accessible label when the sidebar is collapsed. Defaults to `"Expand sidebar"`. */
+  expandAccessibilityLabel?: string;
+  /** Accessible label for the logout control. Defaults to `"Log out"`. */
+  logOutAccessibilityLabel?: string;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const SIDEBAR_WIDTH = 300;
+const SIDEBAR_COLLAPSED_WIDTH = 72;
+const HEADER_HEIGHT = 64;
+const LOGO_WIDTH = 31;
+const LOGO_HEIGHT = 44;
+const TOGGLE_SIZE = 20;
+const MENU_ICON_SIZE = 16;
+const PROFILE_SECTION_HEIGHT = 80;
+const SIDEBAR_TRANSITION_MS = 300;
+
+export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(function Sidebar(
+  {
+    items,
+    user,
+    onLogOut,
+    logoAccessibilityLabel = "Cortel Booking",
+    navigationAccessibilityLabel = "Account navigation",
+    collapseAccessibilityLabel = "Collapse sidebar",
+    expandAccessibilityLabel = "Expand sidebar",
+    logOutAccessibilityLabel = "Log out",
+    collapsed: collapsedProp,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    style,
+    className,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+  const collapsed = collapsedProp ?? uncontrolledCollapsed;
+  const widthAnim = useRef(
+    new Animated.Value(collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH),
+  ).current;
+  const labelOpacity = useRef(new Animated.Value(collapsed ? 0 : 1)).current;
+
+  useApplyWebClassName(containerRef, className);
+
+  useEffect(() => {
+    const nextWidth = collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH;
+    const nextOpacity = collapsed ? 0 : 1;
+    const timing = {
+      duration: SIDEBAR_TRANSITION_MS,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false,
+    };
+
+    const widthAnimation = Animated.timing(widthAnim, { ...timing, toValue: nextWidth });
+    const opacityAnimation = Animated.timing(labelOpacity, { ...timing, toValue: nextOpacity });
+
+    Animated.parallel([widthAnimation, opacityAnimation]).start();
+    return () => {
+      widthAnimation.stop();
+      opacityAnimation.stop();
+    };
+  }, [collapsed, labelOpacity, widthAnim]);
+
+  const setCollapsed = (next: boolean) => {
+    onCollapsedChange?.(next);
+    if (collapsedProp === undefined) {
+      setUncontrolledCollapsed(next);
+    }
+  };
+
+  return (
+    <Animated.View
+      {...rest}
+      ref={setContainerRef}
+      style={[styles.root, { width: widthAnim }, style]}
+      accessibilityRole="menu"
+    >
+      <View style={[styles.header, collapsed ? styles.headerCollapsed : styles.headerExpanded]}>
+        <Animated.View
+          pointerEvents={collapsed ? "none" : "auto"}
+          style={[
+            styles.logoSlot,
+            {
+              opacity: labelOpacity,
+              maxWidth: collapsed ? 0 : LOGO_WIDTH,
+            },
+          ]}
+          accessibilityElementsHidden={collapsed}
+          importantForAccessibility={collapsed ? "no-hide-descendants" : "auto"}
+        >
+          <BrandLogo
+            accessibilityLabel={logoAccessibilityLabel}
+            height={LOGO_HEIGHT}
+            variant="brand"
+            width={LOGO_WIDTH}
+          />
+        </Animated.View>
+
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
+          accessibilityState={{ expanded: !collapsed }}
+          hitSlop={8}
+          onPress={() => setCollapsed(!collapsed)}
+          style={styles.toggleButton}
+        >
+          <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
+        </Pressable>
+      </View>
+
+      <View
+        accessibilityLabel={navigationAccessibilityLabel}
+        accessibilityRole="menu"
+        style={styles.nav}
+      >
+        {items.map((item) => {
+          const isActive = Boolean(item.active);
+          const iconColor = isActive ? colors.primary : colors.grey300;
+          const Icon = item.icon;
+          const iconNode: ReactNode = (
+            <Icon color={iconColor} size={MENU_ICON_SIZE} strokeWidth={1.5} />
+          );
+
+          return (
+            <MenuItem
+              key={item.key}
+              icon={iconNode}
+              label={item.label}
+              accessibilityLabel={item.label}
+              backgroundColor={isActive ? colors.grey700 : "transparent"}
+              hoverColor={colors.grey700}
+              onPress={item.onPress}
+              labelStyle={[
+                styles.menuLabel,
+                { color: isActive ? colors.white : colors.grey200 },
+                collapsed ? styles.menuLabelCollapsed : styles.menuLabelExpanded,
+              ]}
+              style={[styles.menuItem, collapsed ? styles.menuItemCollapsed : null]}
+            />
+          );
+        })}
+      </View>
+
+      <View style={[styles.footer, collapsed ? styles.footerCollapsed : styles.footerExpanded]}>
+        <AvatarSimple
+          name={user.name}
+          email={user.email}
+          imageUrl={user.imageUrl}
+          onLogOut={onLogOut}
+          logOutAccessibilityLabel={logOutAccessibilityLabel}
+          compact={collapsed}
+        />
+      </View>
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    height: "100%",
+    flexShrink: 0,
+    backgroundColor: colors.dark,
+    borderRightWidth: 1,
+    borderRightColor: colors.grey700,
+    overflow: "hidden",
+  },
+  header: {
+    zIndex: 1,
+    height: HEADER_HEIGHT,
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey700,
+    backgroundColor: colors.dark,
+  },
+  headerExpanded: {
+    justifyContent: "space-between",
+    paddingHorizontal: 24,
+  },
+  headerCollapsed: {
+    justifyContent: "center",
+    paddingHorizontal: 0,
+  },
+  logoSlot: {
+    minWidth: 0,
+    height: LOGO_HEIGHT,
+    flexShrink: 0,
+    overflow: "hidden",
+  },
+  toggleButton: {
+    width: TOGGLE_SIZE,
+    height: TOGGLE_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  nav: {
+    flex: 1,
+    width: "100%",
+    padding: 16,
+    gap: 10,
+  },
+  menuItem: {
+    gap: 8,
+  },
+  menuItemCollapsed: {
+    gap: 0,
+  },
+  menuLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  menuLabelExpanded: {
+    flexGrow: 1,
+    flexShrink: 1,
+    opacity: 1,
+  },
+  menuLabelCollapsed: {
+    flexGrow: 0,
+    flexShrink: 0,
+    width: 0,
+    maxWidth: 0,
+    opacity: 0,
+    overflow: "hidden",
+  },
+  footer: {
+    height: PROFILE_SECTION_HEIGHT,
+    width: "100%",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+  },
+  footerExpanded: {
+    paddingHorizontal: 16,
+  },
+  footerCollapsed: {
+    paddingHorizontal: 0,
+  },
+});

package/src/components/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from "./Sidebar";
+export type { SidebarProps, SidebarItem, SidebarUser } from "./Sidebar";

package/src/components/VerificationCodeInput/VerificationCodeInput.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { fn } from "storybook/test";
+import { colors } from "../../theme";
+import { VerificationCodeInput } from "./VerificationCodeInput";
+
+const meta = {
+  title: "Components/VerificationCodeInput",
+  component: VerificationCodeInput,
+  args: {
+    length: 6,
+    defaultValue: "",
+    error: false,
+    disabled: false,
+    onValueChange: fn(),
+    onComplete: fn(),
+    getDigitAccessibilityLabel: (index: number) => `Verification code digit ${index + 1}`,
+  },
+  argTypes: {
+    length: { control: { type: "number", min: 1, max: 8 } },
+    error: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+} satisfies Meta<typeof VerificationCodeInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Filled: Story = {
+  args: { value: "222222" },
+};
+
+export const Error: Story = {
+  args: { value: "222222", error: true },
+};
+
+export const Disabled: Story = {
+  args: { value: "123456", disabled: true },
+};
+
+function InteractiveExample() {
+  const [value, setValue] = useState("");
+
+  return (
+    <View style={storyStyles.column}>
+      <VerificationCodeInput value={value} onValueChange={setValue} />
+      <Text style={storyStyles.caption}>{value || "Enter or paste a six-digit code"}</Text>
+    </View>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveExample />,
+};
+
+export const Responsive: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <View style={storyStyles.desktopWidth}>
+        <VerificationCodeInput value="123456" />
+      </View>
+      <View style={storyStyles.mobileWidth}>
+        <VerificationCodeInput
+          inputStyle={storyStyles.mobileCell}
+          style={storyStyles.mobileCode}
+          value="123456"
+        />
+      </View>
+    </View>
+  ),
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <VerificationCodeInput />
+      <VerificationCodeInput value="222222" />
+      <VerificationCodeInput value="222222" error />
+      <VerificationCodeInput value="123456" disabled />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    width: "100%",
+    maxWidth: 480,
+    gap: 24,
+    alignItems: "center",
+  },
+  desktopWidth: {
+    width: 420,
+  },
+  mobileWidth: {
+    width: 326,
+  },
+  mobileCode: {
+    width: 320,
+    gap: 4,
+  },
+  mobileCell: {
+    width: 50,
+    height: 68,
+  },
+  caption: {
+    color: colors.grey100,
+    fontSize: 12,
+  },
+});

package/src/components/VerificationCodeInput/VerificationCodeInput.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { normalizeVerificationCode, updateVerificationCode } from "./VerificationCodeInput.utils";
+
+describe("normalizeVerificationCode", () => {
+  it("keeps digits only and respects the configured length", () => {
+    expect(normalizeVerificationCode("12a 34-567", 6)).toBe("123456");
+  });
+
+  it("supports non-default code lengths", () => {
+    expect(normalizeVerificationCode("123456", 4)).toBe("1234");
+  });
+});
+
+describe("updateVerificationCode", () => {
+  it("distributes a pasted code from the selected cell", () => {
+    expect(updateVerificationCode("", 0, "12 34-56", 6)).toEqual({
+      code: "123456",
+      nextFocus: 5,
+    });
+  });
+
+  it("replaces a selected digit without growing the code", () => {
+    expect(updateVerificationCode("123456", 2, "9", 6)).toEqual({
+      code: "129456",
+      nextFocus: 3,
+    });
+  });
+
+  it("removes a cleared digit", () => {
+    expect(updateVerificationCode("123456", 2, "", 6)).toEqual({
+      code: "12456",
+      nextFocus: 2,
+    });
+  });
+
+  it("ignores non-numeric input", () => {
+    expect(updateVerificationCode("123", 2, "abc", 6)).toEqual({
+      code: "12",
+      nextFocus: 2,
+    });
+  });
+});

package/src/components/VerificationCodeInput/VerificationCodeInput.tsx

@@ -0,0 +1,255 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ComponentRef,
+} from "react";
+import {
+  Platform,
+  StyleSheet,
+  TextInput,
+  useWindowDimensions,
+  View,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type TextInputKeyPressEventData,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { normalizeVerificationCode, updateVerificationCode } from "./VerificationCodeInput.utils";
+
+const DEFAULT_LENGTH = 6;
+const DESKTOP_CELL_WIDTH = 54;
+const MOBILE_CELL_WIDTH = 50;
+const CELL_HEIGHT = 68;
+const DESKTOP_GAP = 12;
+const MOBILE_GAP = 4;
+const MOBILE_BREAKPOINT = 640;
+
+export interface VerificationCodeInputHandle {
+  clear: () => void;
+  focus: (index?: number) => void;
+}
+
+export interface VerificationCodeInputProps extends Omit<ViewProps, "children" | "style"> {
+  /** Number of numeric cells. */
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called whenever every cell contains a digit. */
+  onComplete?: (value: string) => void;
+  /** Called when Enter/submit is pressed from a cell. */
+  onSubmit?: (value: string) => void;
+  error?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  /** Localized accessible name for each zero-based cell index. */
+  getDigitAccessibilityLabel?: (index: number) => string;
+  style?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  className?: string;
+}
+
+export const VerificationCodeInput = forwardRef<
+  VerificationCodeInputHandle,
+  VerificationCodeInputProps
+>(function VerificationCodeInput(
+  {
+    length = DEFAULT_LENGTH,
+    value,
+    defaultValue = "",
+    onValueChange,
+    onComplete,
+    onSubmit,
+    error = false,
+    disabled = false,
+    autoFocus = false,
+    getDigitAccessibilityLabel,
+    style,
+    inputStyle,
+    className,
+    ...viewProps
+  },
+  forwardedRef,
+) {
+  const safeLength = Math.max(1, Math.floor(length));
+  const isControlled = typeof value === "string";
+  const [uncontrolledValue, setUncontrolledValue] = useState(() =>
+    normalizeVerificationCode(defaultValue, safeLength),
+  );
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const { width: viewportWidth } = useWindowDimensions();
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
+  const inputRefs = useRef<Array<ComponentRef<typeof TextInput> | null>>([]);
+  const currentCode = normalizeVerificationCode(
+    isControlled ? value : uncontrolledValue,
+    safeLength,
+  );
+
+  useApplyWebClassName(rootRef, className);
+
+  const focus = useCallback(
+    (index = 0) => {
+      const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
+      inputRefs.current[safeIndex]?.focus();
+    },
+    [safeLength],
+  );
+
+  const commit = useCallback(
+    (nextValue: string) => {
+      const normalized = normalizeVerificationCode(nextValue, safeLength);
+
+      if (!isControlled) {
+        setUncontrolledValue(normalized);
+      }
+
+      onValueChange?.(normalized);
+
+      if (normalized.length === safeLength) {
+        onComplete?.(normalized);
+      }
+    },
+    [isControlled, onComplete, onValueChange, safeLength],
+  );
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      clear: () => {
+        commit("");
+        focus(0);
+      },
+      focus,
+    }),
+    [commit, focus],
+  );
+
+  const handleChange = (index: number, input: string) => {
+    const update = updateVerificationCode(currentCode, index, input, safeLength);
+    commit(update.code);
+    focus(update.nextFocus);
+  };
+
+  const handleKeyPress = (
+    index: number,
+    event: NativeSyntheticEvent<TextInputKeyPressEventData>,
+  ) => {
+    const key = event.nativeEvent.key;
+
+    if (key === "Backspace" && !currentCode[index] && index > 0) {
+      const update = updateVerificationCode(currentCode, index - 1, "", safeLength);
+      commit(update.code);
+      focus(index - 1);
+      return;
+    }
+
+    if (key === "ArrowLeft" && index > 0) {
+      focus(index - 1);
+    }
+
+    if (key === "ArrowRight" && index < safeLength - 1) {
+      focus(index + 1);
+    }
+  };
+
+  const mobile = viewportWidth < MOBILE_BREAKPOINT;
+  const cellWidth = mobile ? MOBILE_CELL_WIDTH : DESKTOP_CELL_WIDTH;
+  const cellGap = mobile ? MOBILE_GAP : DESKTOP_GAP;
+  const rootWidth = cellWidth * safeLength + cellGap * Math.max(0, safeLength - 1);
+
+  return (
+    <View
+      {...viewProps}
+      ref={rootRef}
+      style={[
+        styles.root,
+        { width: rootWidth, maxWidth: "100%", gap: cellGap },
+        disabled && styles.disabled,
+        style,
+      ]}
+    >
+      {Array.from({ length: safeLength }, (_, index) => {
+        const active = focusedIndex === index;
+        const borderColor = error ? colors.redHover : active ? colors.primary : colors.grey600;
+
+        return (
+          <TextInput
+            ref={(element) => {
+              inputRefs.current[index] = element;
+            }}
+            accessibilityLabel={
+              getDigitAccessibilityLabel?.(index) ?? `Verification code digit ${index + 1}`
+            }
+            accessibilityState={{ disabled }}
+            autoComplete={index === 0 ? "one-time-code" : "off"}
+            autoFocus={autoFocus && index === 0}
+            caretHidden={Platform.OS !== "web"}
+            editable={!disabled}
+            inputMode="numeric"
+            key={index}
+            keyboardType="number-pad"
+            maxLength={safeLength}
+            onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
+            onChangeText={(text) => handleChange(index, text)}
+            onFocus={() => setFocusedIndex(index)}
+            onKeyPress={(event) => handleKeyPress(index, event)}
+            onSubmitEditing={() => onSubmit?.(currentCode)}
+            selectTextOnFocus
+            style={[
+              styles.cell,
+              {
+                width: cellWidth,
+                height: CELL_HEIGHT,
+                borderColor,
+                color: error ? colors.red : colors.white,
+              },
+              Platform.OS === "web" ? styles.cellWeb : null,
+              Platform.OS === "android" ? styles.cellAndroid : null,
+              inputStyle,
+            ]}
+            value={currentCode[index] ?? ""}
+          />
+        );
+      })}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    minWidth: 0,
+    alignSelf: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  cell: {
+    minWidth: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    borderWidth: 1,
+    borderRadius: 16,
+    padding: 0,
+    margin: 0,
+    textAlign: "center",
+    fontFamily: fonts.sans,
+    fontSize: 22,
+    fontWeight: "600",
+    lineHeight: 22,
+  },
+  cellWeb: {
+    outlineStyle: "none",
+  } as TextStyle,
+  cellAndroid: {
+    includeFontPadding: false,
+  },
+});