@ecohouse/ui 0.1.28 → 0.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

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,
+  },
+});

package/src/components/VerificationCodeInput/VerificationCodeInput.utils.ts

@@ -0,0 +1,34 @@
+export function normalizeVerificationCode(value: string, length: number): string {
+  return value.replace(/\D/g, "").slice(0, Math.max(1, length));
+}
+
+export interface VerificationCodeUpdate {
+  code: string;
+  nextFocus: number;
+}
+
+export function updateVerificationCode(
+  currentCode: string,
+  index: number,
+  input: string,
+  length: number,
+): VerificationCodeUpdate {
+  const safeLength = Math.max(1, length);
+  const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
+  const current = normalizeVerificationCode(currentCode, safeLength);
+  const insertedDigits = normalizeVerificationCode(input, safeLength - safeIndex);
+
+  if (!insertedDigits) {
+    return {
+      code: `${current.slice(0, safeIndex)}${current.slice(safeIndex + 1)}`,
+      nextFocus: safeIndex,
+    };
+  }
+
+  return {
+    code: `${current.slice(0, safeIndex)}${insertedDigits}${current.slice(
+      safeIndex + insertedDigits.length,
+    )}`.slice(0, safeLength),
+    nextFocus: Math.min(safeIndex + insertedDigits.length, safeLength - 1),
+  };
+}

package/src/components/VerificationCodeInput/index.ts

@@ -0,0 +1,5 @@
+export { VerificationCodeInput } from "./VerificationCodeInput";
+export type {
+  VerificationCodeInputHandle,
+  VerificationCodeInputProps,
+} from "./VerificationCodeInput";

package/src/components/index.ts

@@ -34,6 +34,12 @@ export type {
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 
+export { VerificationCodeInput } from "./VerificationCodeInput";
+export type {
+  VerificationCodeInputHandle,
+  VerificationCodeInputProps,
+} from "./VerificationCodeInput";
+
 export { Select } from "./Select";
 export type {
   SelectIcon,

package/src/index.ts

@@ -10,6 +10,7 @@ export {
   Checkbox,
   DatePicker,
   Input,
+  VerificationCodeInput,
   Select,
   Textarea,
   Toggle,
@@ -41,6 +42,8 @@ export type {
   InputIcon,
   InputProps,
   InputSize,
+  VerificationCodeInputHandle,
+  VerificationCodeInputProps,
   SelectIcon,
   SelectOption,
   SelectProps,