@evervault/react-native 2.0.0 → 2.2.0

package/build/index.esm.js

@@ -1,7 +1,7 @@
 import { TurboModuleRegistry, TextInput, Platform, StyleSheet } from 'react-native';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useMemo, useCallback, useContext, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React__default, { createContext, useMemo, useCallback, useContext, forwardRef, useRef, useImperativeHandle, useEffect, useState } from 'react';
 import { WebView } from 'react-native-webview';
 
 const NativeEvervault = TurboModuleRegistry.get("NativeEvervault");
@@ -7164,51 +7164,6 @@ const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidi
 
 function n(r,e){for(var n={};r.length;){var s=r[0],t=s.code,i=s.message,a=s.path.join(".");if(!n[a])if("unionErrors"in s){var u=s.unionErrors[0].errors[0];n[a]={message:u.message,type:u.code};}else n[a]={message:i,type:t};if("unionErrors"in s&&s.unionErrors.forEach(function(e){return e.errors.forEach(function(e){return r.push(e)})}),e){var c=n[a].types,f=c&&c[s.code];n[a]=appendErrors(a,e,n,t,f?[].concat(f,s.message):s.message);}r.shift();}return n}function s(o$1,s,t){return void 0===t&&(t={}),function(i,a,u){try{return Promise.resolve(function(e,n){try{var a=Promise.resolve(o$1["sync"===t.mode?"parse":"parseAsync"](i,s)).then(function(e){return u.shouldUseNativeValidation&&o({},u),{errors:{},values:t.raw?Object.assign({},i):e}});}catch(r){return n(r)}return a&&a.then?a.then(void 0,n):a}(0,function(r){if(function(r){return Array.isArray(null==r?void 0:r.errors)}(r))return {values:{},errors:s$1(n(r.errors,!u.shouldUseNativeValidation&&"all"===u.criteriaMode),u)};throw r}))}catch(r){return Promise.reject(r)}}}
 
-const DEFAULT_ACCEPTED_BRANDS = [];
-const Card$1 = forwardRef(function Card({ children, defaultValues, onChange, acceptedBrands = DEFAULT_ACCEPTED_BRANDS, validationMode = "all", }, ref) {
-    const evervault = useEvervault();
-    const resolver = useMemo(() => {
-        const schema = getCardFormSchema(acceptedBrands);
-        return s(schema);
-    }, [acceptedBrands]);
-    const methods = useForm({
-        defaultValues,
-        resolver,
-        mode: validationMode,
-        shouldUseNativeValidation: false,
-    });
-    useEffect(() => {
-        if (!onChange)
-            return;
-        let abortController;
-        function handleChange(values) {
-            if (abortController) {
-                abortController.abort();
-            }
-            abortController = new AbortController();
-            const signal = abortController.signal;
-            requestAnimationFrame(async () => {
-                const payload = await formatPayload(values, {
-                    encrypt: evervault.encrypt,
-                    form: methods,
-                });
-                if (signal.aborted)
-                    return;
-                onChange?.(payload);
-            });
-        }
-        handleChange(methods.getValues());
-        const subscription = methods.watch(handleChange);
-        return () => subscription.unsubscribe();
-    }, [evervault.encrypt, onChange]);
-    useImperativeHandle(ref, useCallback(() => ({
-        reset() {
-            methods.reset();
-        },
-    }), []));
-    return jsx(FormProvider, { ...methods, children: children });
-});
-
 // Taken from https://github.com/gregberge/react-merge-refs
 function mergeRefs(...refs) {
     return (value) => {
@@ -7408,6 +7363,9 @@ var MaskInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
+const EvervaultInputContext = createContext({
+    validationMode: "all",
+});
 function useForwardedInputRef(ref) {
     const inputRef = useRef(null);
     useImperativeHandle(ref, useCallback(() => ({
@@ -7444,6 +7402,7 @@ function mask(format) {
     });
 }
 const EvervaultInput = forwardRef(function EvervaultInput({ name, mask, ...props }, ref) {
+    const { validationMode } = useContext(EvervaultInputContext);
     const inputRef = useForwardedInputRef(ref);
     const methods = useFormContext();
     return (jsx(Controller, { control: methods.control, name: name, shouldUnregister: true, render: ({ field, fieldState }) => (jsx(MaskInput
@@ -7453,22 +7412,86 @@ const EvervaultInput = forwardRef(function EvervaultInput({ name, mask, ...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: true,
+                    shouldValidate,
                 });
                 props.onBlur?.(evt);
             }, mask: mask, maskAutoComplete: !!mask, 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: !!fieldState.error || fieldState.isTouched,
+                    shouldValidate,
                 });
             }, 
             // Remove unwanted props
             defaultValue: undefined, onChange: undefined })) }));
 });
 
+const DEFAULT_ACCEPTED_BRANDS = [];
+const Card$1 = forwardRef(function Card({ children, defaultValues, onChange, onError, acceptedBrands = DEFAULT_ACCEPTED_BRANDS, validationMode = "all", }, ref) {
+    const evervault = useEvervault();
+    const resolver = useMemo(() => {
+        const schema = getCardFormSchema(acceptedBrands);
+        return s(schema);
+    }, [acceptedBrands]);
+    const methods = useForm({
+        defaultValues,
+        resolver,
+        mode: validationMode,
+        shouldUseNativeValidation: false,
+    });
+    const inputContext = useMemo(() => ({
+        validationMode,
+    }), [validationMode]);
+    // Use refs to prevent closures from being captured
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    useEffect(() => {
+        if (!onChange)
+            return;
+        let abortController;
+        function handleChange(values) {
+            if (abortController) {
+                abortController.abort();
+            }
+            abortController = new AbortController();
+            const signal = abortController.signal;
+            requestAnimationFrame(async () => {
+                try {
+                    const payload = await formatPayload(values, {
+                        encrypt: evervault.encrypt,
+                        form: methods,
+                    });
+                    if (signal.aborted)
+                        return;
+                    onChangeRef.current?.(payload);
+                }
+                catch (error) {
+                    onErrorRef.current?.(error);
+                }
+            });
+        }
+        handleChange(methods.getValues());
+        const subscription = methods.watch(handleChange);
+        return () => subscription.unsubscribe();
+    }, [evervault.encrypt]);
+    useImperativeHandle(ref, useCallback(() => ({
+        reset() {
+            methods.reset();
+        },
+    }), []));
+    return (jsx(FormProvider, { ...methods, children: jsx(EvervaultInputContext.Provider, { value: inputContext, children: children }) }));
+});
+
 const CardHolder = forwardRef(function CardHolder(props, ref) {
     return (jsx(EvervaultInput, { placeholder: "Johnny Appleseed", ...props, ref: ref, name: "name", inputMode: "text", autoComplete: Platform.select({
             ios: "cc-name",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@evervault/react-native",
   "description": "Evervault SDK for React Native",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "source": "./src/index.ts",
   "main": "./build/index.cjs.js",
   "module": "./build/index.esm.js",
@@ -76,6 +76,7 @@
     "@evervault/card-validator": "1.3.0"
   },
   "scripts": {
+    "prebuild": "pnpm codegen",
     "build": "rollup -c",
     "watch": "rollup -c --watch",
     "codegen": "rimraf build android/app && react-native codegen",

package/src/Card/Root.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
 } from "react";
 import { CardBrandName, CardConfig, CardPayload } from "./types";
 import { DeepPartial, FormProvider, useForm } from "react-hook-form";
@@ -12,6 +13,8 @@ import { CardFormValues, getCardFormSchema } from "./schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEvervault } from "../useEvervault";
 import { formatPayload } from "./utils";
+import { EvervaultInputContext, EvervaultInputContextValue } from "../Input";
+import { EvervaultContextValue } from "../context";
 
 const DEFAULT_ACCEPTED_BRANDS: CardBrandName[] = [];
 
@@ -31,6 +34,11 @@ export interface CardProps extends PropsWithChildren, CardConfig {
    */
   onChange?(payload: CardPayload): void;
 
+  /**
+   * Triggered when a native error occurs.
+   */
+  onError?(error: Error): void;
+
   /**
    * The validation mode to use for the form.
    *
@@ -56,6 +64,7 @@ export const Card = forwardRef<Card, CardProps>(function Card(
     children,
     defaultValues,
     onChange,
+    onError,
     acceptedBrands = DEFAULT_ACCEPTED_BRANDS,
     validationMode = "all",
   },
@@ -75,6 +84,19 @@ export const Card = forwardRef<Card, CardProps>(function Card(
     shouldUseNativeValidation: false,
   });
 
+  const inputContext = useMemo<EvervaultInputContextValue>(
+    () => ({
+      validationMode,
+    }),
+    [validationMode]
+  );
+
+  // Use refs to prevent closures from being captured
+  const onChangeRef = useRef<typeof onChange>(onChange);
+  onChangeRef.current = onChange;
+  const onErrorRef = useRef<typeof onError>(onError);
+  onErrorRef.current = onError;
+
   useEffect(() => {
     if (!onChange) return;
 
@@ -88,19 +110,23 @@ export const Card = forwardRef<Card, CardProps>(function Card(
       const signal = abortController.signal;
 
       requestAnimationFrame(async () => {
-        const payload = await formatPayload(values, {
-          encrypt: evervault.encrypt,
-          form: methods,
-        });
-        if (signal.aborted) return;
-        onChange?.(payload);
+        try {
+          const payload = await formatPayload(values, {
+            encrypt: evervault.encrypt,
+            form: methods,
+          });
+          if (signal.aborted) return;
+          onChangeRef.current?.(payload);
+        } catch (error) {
+          onErrorRef.current?.(error as Error);
+        }
       });
     }
 
     handleChange(methods.getValues());
     const subscription = methods.watch(handleChange);
     return () => subscription.unsubscribe();
-  }, [evervault.encrypt, onChange]);
+  }, [evervault.encrypt]);
 
   useImperativeHandle(
     ref,
@@ -114,5 +140,11 @@ export const Card = forwardRef<Card, CardProps>(function Card(
     )
   );
 
-  return <FormProvider {...methods}>{children}</FormProvider>;
+  return (
+    <FormProvider {...methods}>
+      <EvervaultInputContext.Provider value={inputContext}>
+        {children}
+      </EvervaultInputContext.Provider>
+    </FormProvider>
+  );
 });

package/src/Input.test.tsx

@@ -4,10 +4,11 @@ import {
   screen,
   userEvent,
 } from "@testing-library/react-native";
-import { EvervaultInput, mask } from "./Input";
-import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { EvervaultInput, EvervaultInputContext, mask } from "./Input";
+import { FieldErrors, FormProvider, Resolver, useForm } from "react-hook-form";
 import { PropsWithChildren } from "react";
-import { Text, View } from "react-native";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 
 describe("mask", () => {
   it("should convert a mask to an array of regex", () => {
@@ -31,21 +32,38 @@ describe("mask", () => {
 describe("EvervaultInput", () => {
   const methodMocks = {
     setValue: vi.fn(),
+    setError: vi.fn(),
   };
 
-  function Form({ children }: PropsWithChildren) {
-    const methods = useForm();
+  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}>
+      <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,
@@ -135,4 +153,184 @@ describe("EvervaultInput", () => {
       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 }
+    );
+  });
 });

package/src/Input.tsx

@@ -1,10 +1,12 @@
 import {
+  createContext,
   ForwardedRef,
   forwardRef,
   ReactNode,
   Ref,
   RefObject,
   useCallback,
+  useContext,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -13,6 +15,14 @@ import { mergeRefs } from "./utils";
 import { Controller, 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"
@@ -90,6 +100,8 @@ export const EvervaultInput = forwardRef<
   EvervaultInput,
   EvervaultInputProps<Record<string, unknown>>
 >(function EvervaultInput({ name, mask, ...props }, ref) {
+  const { validationMode } = useContext(EvervaultInputContext);
+
   const inputRef = useForwardedInputRef(ref);
 
   const methods = useFormContext();
@@ -108,10 +120,14 @@ export const EvervaultInput = forwardRef<
           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: true,
+              shouldValidate,
             });
             props.onBlur?.(evt);
           }}
@@ -119,9 +135,13 @@ export const EvervaultInput = forwardRef<
           maskAutoComplete={!!mask}
           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: !!fieldState.error || fieldState.isTouched,
+              shouldValidate,
             });
           }}
           // Remove unwanted props