@evervault/react-native 2.6.0 → 2.6.2

package/src/EvervaultProvider.tsx

@@ -0,0 +1,43 @@
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { type EvervaultContextValue, EvervaultContext } from "./context";
+import { Encrypted, sdk } from "./sdk";
+
+export interface EvervaultProviderProps extends PropsWithChildren {
+  teamId: string;
+  appId: string;
+}
+
+export function EvervaultProvider({
+  teamId,
+  appId,
+  children,
+}: EvervaultProviderProps) {
+  const instanceId = useMemo(
+    () => sdk.initialize(teamId, appId),
+    [teamId, appId]
+  );
+
+  const encrypt = useCallback(
+    function <T>(data: T): Promise<Encrypted<T>> {
+      return sdk.encrypt(instanceId, data);
+    },
+    [instanceId]
+  );
+
+  const context = useMemo<EvervaultContextValue>(
+    () => ({ teamId, appId, encrypt }),
+    [teamId, appId, encrypt]
+  );
+
+  return (
+    <EvervaultContext.Provider value={context}>
+      {children}
+    </EvervaultContext.Provider>
+  );
+}

package/src/Input.test.tsx

@@ -0,0 +1,420 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  userEvent,
+} from "@testing-library/react-native";
+import { EvervaultInput, EvervaultInputContext, mask } from "./Input";
+import { FieldErrors, FormProvider, Resolver, useForm } from "react-hook-form";
+import { PropsWithChildren } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+describe("mask", () => {
+  it("should convert a mask to an array of regex", () => {
+    expect(mask("999-999-9999")).toEqual([
+      /\d/,
+      /\d/,
+      /\d/,
+      "-",
+      /\d/,
+      /\d/,
+      /\d/,
+      "-",
+      /\d/,
+      /\d/,
+      /\d/,
+      /\d/,
+    ]);
+  });
+
+  it("should account for obfuscation", () => {
+    expect(mask("[9999 9999] 9999")).toEqual([
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      " ",
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      " ",
+      /\d/,
+      /\d/,
+      /\d/,
+      /\d/,
+    ]);
+  });
+});
+
+describe("EvervaultInput", () => {
+  const methodMocks = {
+    setValue: vi.fn(),
+    setError: vi.fn(),
+  };
+
+  interface FormProps {
+    resolver?: Resolver<any>;
+  }
+
+  function Form({ children, resolver }: PropsWithChildren<FormProps>) {
+    const methods = useForm({
+      resolver,
+    });
+    const setValue = (...args: Parameters<typeof methods.setValue>) => {
+      methodMocks.setValue(...args);
+      methods.setValue(...args);
+    };
+    const setError = (...args: Parameters<typeof methods.setError>) => {
+      methodMocks.setError(...args);
+      methods.setError(...args);
+    };
+    return (
+      <FormProvider {...methods} setValue={setValue} setError={setError}>
+        {children}
+      </FormProvider>
+    );
+  }
+
+  function createForm(options: FormProps) {
+    return function (props: PropsWithChildren<FormProps>) {
+      return <Form {...options} {...props} />;
+    };
+  }
+
+  it("should render", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+    expect(input).toBeOnTheScreen();
+    expect(input).toHaveProp("id", "phone");
+    expect(input).toHaveProp("value", "");
+    expect(input).toHaveProp("editable", true);
+  });
+
+  it("uses the mask if provided", async () => {
+    render(
+      <EvervaultInput
+        testID="phone"
+        name="phone"
+        mask={mask("999-999-9999")}
+      />,
+      {
+        wrapper: Form,
+      }
+    );
+    const input = screen.getByTestId("phone");
+    const user = userEvent.setup();
+
+    expect(input).toHaveProp("value", "");
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "123-456-7890");
+
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", "1234567890", {
+      shouldDirty: true,
+      shouldValidate: false,
+    });
+  });
+
+  it("dirties the field when the user types", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+    const user = userEvent.setup();
+
+    await user.type(input, "1234567890");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", "1234567890", {
+      shouldDirty: true,
+      shouldValidate: false,
+    });
+  });
+
+  it("dirties and validates the field when the user types if touched", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+
+    // Blur the input to trigger touch
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", undefined, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    const user = userEvent.setup();
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "1234567890");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", "1234567890", {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  });
+
+  it("dirties, touches, and validates the field when blurred", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", undefined, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+  });
+
+  it("only validates the field when blurred if validationMode=onBlur", async () => {
+    render(
+      <EvervaultInputContext.Provider value={{ validationMode: "onBlur" }}>
+        <EvervaultInput testID="phone" name="phone" />
+      </EvervaultInputContext.Provider>,
+      {
+        wrapper: Form,
+      }
+    );
+
+    const input = screen.getByTestId("phone");
+
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", undefined, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    const user = userEvent.setup();
+    await user.type(input, "1234567890", { skipBlur: true });
+    expect(input).toHaveProp("value", "1234567890");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith(
+      "phone",
+      "1234567890",
+      {
+        shouldDirty: true,
+        shouldValidate: false,
+      }
+    );
+  });
+
+  it("only validates the field after first touch if validationMode=onTouched", async () => {
+    render(
+      <EvervaultInputContext.Provider value={{ validationMode: "onTouched" }}>
+        <EvervaultInput testID="phone" name="phone" />
+      </EvervaultInputContext.Provider>,
+      {
+        wrapper: Form,
+      }
+    );
+
+    const input = screen.getByTestId("phone");
+
+    const user = userEvent.setup();
+    await user.type(input, "1234", { skipBlur: true });
+    expect(input).toHaveProp("value", "1234");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", "1234", {
+      shouldDirty: true,
+      shouldValidate: false,
+    });
+
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", "1234", {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    await user.type(input, "567890", { skipBlur: true });
+    expect(input).toHaveProp("value", "1234567890");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith(
+      "phone",
+      "1234567890",
+      { shouldDirty: true, shouldValidate: true }
+    );
+  });
+
+  it("only validates the field when changed if validationMode=onChange and the field is touched", async () => {
+    render(
+      <EvervaultInputContext.Provider value={{ validationMode: "onChange" }}>
+        <EvervaultInput testID="phone" name="phone" />
+      </EvervaultInputContext.Provider>,
+      {
+        wrapper: Form,
+      }
+    );
+
+    const input = screen.getByTestId("phone");
+
+    const user = userEvent.setup();
+    await user.type(input, "1234567890", { skipBlur: true });
+    expect(input).toHaveProp("value", "1234567890");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith(
+      "phone",
+      "1234567890",
+      { shouldDirty: true, shouldValidate: false }
+    );
+
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith(
+      "phone",
+      "1234567890",
+      { shouldDirty: true, shouldTouch: true, shouldValidate: false }
+    );
+
+    await user.type(input, "1", { skipBlur: true });
+    expect(input).toHaveProp("value", "12345678901");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith(
+      "phone",
+      "12345678901",
+      { shouldDirty: true, shouldValidate: true }
+    );
+  });
+
+  it("only validates the field when changed if validationMode=onChange and the field has errors", async () => {
+    render(
+      <EvervaultInputContext.Provider value={{ validationMode: "onChange" }}>
+        <EvervaultInput testID="phone" name="phone" />
+      </EvervaultInputContext.Provider>,
+      {
+        wrapper: createForm({
+          resolver: zodResolver(z.object({ phone: z.string().min(10) })),
+        }),
+      }
+    );
+
+    const input = screen.getByTestId("phone");
+
+    const user = userEvent.setup();
+    await user.type(input, "1234", { skipBlur: true });
+    expect(input).toHaveProp("value", "1234");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", "1234", {
+      shouldDirty: true,
+      shouldValidate: false,
+    });
+
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", "1234", {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: false,
+    });
+
+    await user.type(input, "5", { skipBlur: true });
+    expect(input).toHaveProp("value", "12345");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", "12345", {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  });
+
+  it("validates on blur, touch, and change if validationMode=all", async () => {
+    render(
+      <EvervaultInputContext.Provider value={{ validationMode: "all" }}>
+        <EvervaultInput testID="phone" name="phone" />
+      </EvervaultInputContext.Provider>,
+      {
+        wrapper: createForm({
+          resolver: zodResolver(z.object({ phone: z.string().min(10) })),
+        }),
+      }
+    );
+
+    const input = screen.getByTestId("phone");
+
+    const user = userEvent.setup();
+    await user.type(input, "1234", { skipBlur: true });
+    expect(input).toHaveProp("value", "1234");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", "1234", {
+      shouldDirty: true,
+      shouldValidate: false,
+    });
+
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith("phone", "1234", {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    await user.type(input, "567890", { skipBlur: true });
+    expect(input).toHaveProp("value", "1234567890");
+    expect(methodMocks.setValue).toHaveBeenLastCalledWith(
+      "phone",
+      "1234567890",
+      { shouldDirty: true, shouldValidate: true }
+    );
+  });
+
+  it("should obfuscate the value when obfuscateValue=true", async () => {
+    const phoneMask = mask("[(999) 999]-9999");
+    const { rerender } = render(
+      <EvervaultInput testID="phone" mask={phoneMask} name="phone" />,
+      {
+        wrapper: Form,
+      }
+    );
+
+    const input = screen.getByTestId("phone");
+    const user = userEvent.setup();
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(123) 456-7890");
+
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={phoneMask}
+        name="phone"
+        obfuscateValue
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(•••) •••-7890");
+
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={phoneMask}
+        name="phone"
+        obfuscateValue="#"
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(###) ###-7890");
+
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={phoneMask}
+        name="phone"
+        obfuscateValue="🤔"
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(🤔🤔🤔) 🤔🤔🤔-7890");
+
+    const unobfuscatedMask = mask("(999) 999-9999");
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={unobfuscatedMask}
+        name="phone"
+        obfuscateValue
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(123) 456-7890");
+  });
+});

package/src/Input.tsx

@@ -0,0 +1,182 @@
+import {
+  createContext,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  Ref,
+  RefObject,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { TextInput, TextInputProps } from "react-native";
+import { mergeRefs } from "./utils";
+import { Controller, useController, useFormContext } from "react-hook-form";
+import MaskInput, { Mask, MaskArray } from "react-native-mask-input";
+
+export interface EvervaultInputContextValue {
+  validationMode: "onChange" | "onBlur" | "onTouched" | "all";
+}
+
+export const EvervaultInputContext = createContext<EvervaultInputContextValue>({
+  validationMode: "all",
+});
+
+export type EvervaultInput = Pick<
+  TextInput,
+  | "isFocused"
+  | "focus"
+  | "blur"
+  | "clear"
+  | "measure"
+  | "measureInWindow"
+  | "measureLayout"
+>;
+
+function useForwardedInputRef(
+  ref: ForwardedRef<EvervaultInput>
+): RefObject<TextInput> {
+  const inputRef = useRef<TextInput>(null);
+
+  useImperativeHandle<EvervaultInput, EvervaultInput>(
+    ref,
+    useCallback(
+      () => ({
+        isFocused() {
+          return inputRef.current?.isFocused() ?? false;
+        },
+        focus() {
+          inputRef.current?.focus();
+        },
+        blur() {
+          inputRef.current?.blur();
+        },
+        clear() {
+          inputRef.current?.clear();
+        },
+        measure(callback) {
+          inputRef.current?.measure(callback);
+        },
+        measureInWindow(callback) {
+          inputRef.current?.measureInWindow(callback);
+        },
+        measureLayout(relativeToNativeComponentRef, onSuccess, onFail) {
+          inputRef.current?.measureLayout(
+            relativeToNativeComponentRef,
+            onSuccess,
+            onFail
+          );
+        },
+      }),
+      [inputRef]
+    )
+  );
+
+  return inputRef;
+}
+
+export type BaseEvervaultInputProps = Omit<
+  TextInputProps,
+  "onChange" | "onChangeText" | "value" | "defaultValue"
+>;
+
+export function mask(format: string): MaskArray {
+  const maskArray: MaskArray = [];
+
+  let isObfuscated = false;
+  format.split("").forEach((char) => {
+    if (char === "[") {
+      isObfuscated = true;
+      return;
+    } else if (char === "]") {
+      isObfuscated = false;
+      return;
+    }
+
+    let value: string | RegExp | [RegExp] = char;
+    if (char === "9") {
+      value = isObfuscated ? [/\d/] : /\d/;
+    }
+    maskArray.push(value);
+  });
+
+  return maskArray;
+}
+
+export interface EvervaultInputProps<Values extends Record<string, unknown>>
+  extends BaseEvervaultInputProps {
+  name: keyof Values;
+  mask?: Mask;
+  obfuscateValue?: boolean | string;
+}
+
+export const EvervaultInput = forwardRef<
+  EvervaultInput,
+  EvervaultInputProps<Record<string, unknown>>
+>(function EvervaultInput({ name, mask, obfuscateValue, ...props }, ref) {
+  const { validationMode } = useContext(EvervaultInputContext);
+
+  const inputRef = useForwardedInputRef(ref);
+
+  const methods = useFormContext();
+
+  const { field, fieldState } = useController({
+    control: methods.control,
+    name,
+    shouldUnregister: true,
+  });
+
+  const obfuscationCharacter = useMemo(() => {
+    if (typeof obfuscateValue === "string") {
+      return obfuscateValue;
+    } else {
+      return "•";
+    }
+  }, [obfuscateValue]);
+
+  return (
+    <MaskInput
+      // Overridable props
+      id={field.name}
+      {...props}
+      // Strict props
+      ref={mergeRefs(inputRef, field.ref)}
+      editable={!field.disabled && (props.editable ?? true)}
+      onBlur={(evt) => {
+        const shouldValidate =
+          validationMode === "onBlur" ||
+          validationMode === "onTouched" ||
+          validationMode === "all";
+        methods.setValue(field.name, field.value, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate,
+        });
+        props.onBlur?.(evt);
+      }}
+      mask={mask}
+      maskAutoComplete={!!mask}
+      obfuscationCharacter={obfuscationCharacter}
+      showObfuscatedValue={!!obfuscateValue}
+      value={field.value}
+      onChangeText={(masked, unmasked) => {
+        const shouldValidate =
+          (validationMode === "onTouched" && fieldState.isTouched) ||
+          ((validationMode === "onChange" || validationMode === "all") &&
+            (!!fieldState.error || fieldState.isTouched));
+        methods.setValue(field.name, unmasked, {
+          shouldDirty: true,
+          shouldValidate,
+        });
+      }}
+      // Remove unwanted props
+      defaultValue={undefined}
+      onChange={undefined}
+    />
+  );
+}) as <Values extends Record<string, unknown>>(
+  props: EvervaultInputProps<Values> & { ref?: Ref<EvervaultInput> }
+) => ReactNode;