@evervault/evervault-react-native 0.2.3 → 0.4.2

package/src/components/useForm.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export interface UseFormReturn<T> {
+  values: T;
+  setValue: <K extends keyof T>(field: K, value: T[K]) => void;
+  setValues: React.Dispatch<React.SetStateAction<T>>;
+  errors: Partial<Record<keyof T, string>> | null;
+  setError: <K extends keyof T>(field: K, error: string | undefined) => void;
+  isValid: boolean;
+  validate: () => void;
+  register: <K extends keyof T>(
+    name: K
+  ) => {
+    onChange: (value: T[K]) => void;
+    //TODO(Mark): Replace with union of React.FocusEvent<HTMLInputElement> and native event
+    onBlur: (event: any) => void;
+  };
+}
+
+interface UseFormOptions<T> {
+  initialValues: T;
+  validate: Record<keyof T, (values: T) => string | undefined>;
+  onChange?: (values: UseFormReturn<T>) => void;
+}
+
+export function useForm<T extends object>({
+  initialValues,
+  validate,
+  onChange,
+}: UseFormOptions<T>): UseFormReturn<T> {
+  const validators = useRef(validate);
+  const triggerChange = useRef(false);
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<UseFormReturn<T>["errors"]>(
+    {} as UseFormReturn<T>["errors"]
+  );
+
+  // keep track of latest validation functions in a ref to prevent
+  // re-renders when the function changes.
+  useEffect(() => {
+    validators.current = validate;
+  }, [validate]);
+
+  const setError = useCallback(
+    <K extends keyof T>(field: K, error: string | undefined) => {
+      if (!error) {
+        setErrors((prev) => {
+          if (!prev) return prev;
+          return Object.keys(prev).reduce((acc, key) => {
+            if (key === field) return acc;
+
+            return {
+              ...acc,
+              [key]: prev?.[key as K],
+            };
+          }, {});
+        });
+        return;
+      }
+
+      setErrors((prev) => ({
+        ...prev,
+        [field]: error,
+      }));
+
+      triggerChange.current = true;
+    },
+    []
+  );
+
+  const setValue = useCallback(
+    <K extends keyof T>(field: K, value: T[K]) => {
+      if (errors?.[field]) {
+        setError(field, undefined);
+      }
+
+      setValues((previous) => ({
+        ...previous,
+        [field]: value,
+      }));
+
+      triggerChange.current = true;
+    },
+    [errors, setError]
+  );
+
+  const isValid = useMemo(
+    () => Object.keys(errors ?? {}).length === 0,
+    [errors]
+  );
+
+  const validateForm = useCallback(() => {
+    const nextErrors = Object.keys(values).reduce((acc, key) => {
+      const validator = validators.current?.[key as keyof T];
+      if (validator) {
+        const error = validator(values);
+        if (error) {
+          return {
+            ...acc,
+            [key]: error,
+          };
+        }
+      }
+
+      return acc;
+    }, {} as Record<keyof T, string>);
+
+    const hasErrors = Object.keys(nextErrors).length > 0;
+    setErrors(hasErrors ? nextErrors : null);
+
+    // iterate over the errors and if any of them are different then we should
+    // trigger a change event.
+    const shouldTriggerChange = Object.keys(nextErrors).some((key) => {
+      const prevError = errors?.[key as keyof T];
+      const nextError = nextErrors[key as keyof T];
+      return prevError !== nextError;
+    });
+
+    triggerChange.current = shouldTriggerChange;
+  }, [errors, values]);
+
+  const validateField = useCallback(
+    <K extends keyof T>(field: K) => {
+      const validator = validators.current?.[field];
+      if (validator) {
+        const error = validator(values);
+        setError(field, error);
+      }
+    },
+    [values, setError]
+  );
+
+  const register = useCallback(
+    <K extends keyof T>(name: K) => {
+      const handleBlur = () => {
+        validateField(name);
+      };
+
+      const handleChange = (value: T[K]) => {
+        setValue(name, value);
+      };
+
+      return {
+        onBlur: handleBlur,
+        onChange: handleChange,
+      };
+    },
+    [setValue, validateField]
+  );
+
+  const form = useMemo(
+    () => ({
+      values,
+      setValue,
+      errors,
+      setError,
+      isValid,
+      register,
+      setValues,
+      validate: validateForm,
+    }),
+    [values, setValue, errors, setError, isValid, register, validateForm]
+  );
+
+  useEffect(() => {
+    if (!triggerChange.current) return;
+    triggerChange.current = false;
+    onChange?.(form);
+  }, [form, onChange]);
+
+  return form;
+}

package/src/index.tsx

@@ -1,26 +1,10 @@
-import { NativeModules, Platform } from 'react-native';
-
-const LINKING_ERROR =
-  `The package '@evervault/evervault-react-native' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo Go\n';
-
-const EvervaultSdk = NativeModules.EvervaultSdk
-  ? NativeModules.EvervaultSdk
-  : new Proxy(
-      {},
-      {
-        get() {
-          throw new Error(LINKING_ERROR);
-        },
-      }
-    );
-
-export async function init(teamUuid: string, appUuid: string): Promise<void> {
-  return EvervaultSdk.initialize(teamUuid, appUuid);
-}
-
-export async function encrypt(data: any): Promise<string> {
-  return EvervaultSdk.encrypt(data);
-}
+export { type CardProps, Card } from './components/Card';
+export { init, encrypt } from './sdk';
+export type {
+  CardPayload,
+  CardExpiry,
+  CardBrandName,
+  CardConfig,
+  CardForm,
+  CardField,
+} from './components/Card/types';

package/src/native.ts

@@ -0,0 +1,18 @@
+import { NativeModules, Platform } from 'react-native';
+
+const LINKING_ERROR =
+  `The package '@evervault/evervault-react-native' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+export const EvervaultSdk = NativeModules.EvervaultSdk
+  ? NativeModules.EvervaultSdk
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );

package/src/sdk.ts

@@ -0,0 +1,25 @@
+import { Platform } from 'react-native';
+import { EvervaultSdk } from './native';
+
+export async function init(teamUuid: string, appUuid: string): Promise<void> {
+  if (!teamUuid.startsWith('team_')) {
+    throw new Error("Invalid Evervault Team UUID");
+  }
+
+  if (!appUuid.startsWith('app_')) {
+    throw new Error("Invalid Evervault App UUID");
+  }
+
+  return EvervaultSdk.initialize(teamUuid, appUuid);
+}
+
+export async function encrypt(data: any): Promise<string> {
+  if (Platform.OS === 'android' && typeof data !== 'string') {
+    throw new Error(`The Evervault SDK does not currently support encrypting non-string data on Android.
+      If this is required for your use case, please get in touch with us at support@evervault.com. Please do not
+      serialize other data types to strings and pass them to this method as this will result in the data
+      type being returned in it's stringified form when decryption occurs.`);
+  }
+
+  return EvervaultSdk.encrypt(data);
+}

package/lib/commonjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","LINKING_ERROR","Platform","select","ios","default","EvervaultSdk","NativeModules","Proxy","get","Error","init","teamUuid","appUuid","initialize","encrypt","data"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,MAAMC,aAAa,GAChB,4FAA2F,GAC5FC,qBAAQ,CAACC,MAAM,CAAC;EAAEC,GAAG,EAAE,gCAAgC;EAAEC,OAAO,EAAE;AAAG,CAAC,CAAC,GACvE,sDAAsD,GACtD,+BAA+B;AAEjC,MAAMC,YAAY,GAAGC,0BAAa,CAACD,YAAY,GAC3CC,0BAAa,CAACD,YAAY,GAC1B,IAAIE,KAAK,CACP,CAAC,CAAC,EACF;EACEC,GAAGA,CAAA,EAAG;IACJ,MAAM,IAAIC,KAAK,CAACT,aAAa,CAAC;EAChC;AACF,CACF,CAAC;AAEE,eAAeU,IAAIA,CAACC,QAAgB,EAAEC,OAAe,EAAiB;EAC3E,OAAOP,YAAY,CAACQ,UAAU,CAACF,QAAQ,EAAEC,OAAO,CAAC;AACnD;AAEO,eAAeE,OAAOA,CAACC,IAAS,EAAmB;EACxD,OAAOV,YAAY,CAACS,OAAO,CAACC,IAAI,CAAC;AACnC"}

package/lib/module/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["NativeModules","Platform","LINKING_ERROR","select","ios","default","EvervaultSdk","Proxy","get","Error","init","teamUuid","appUuid","initialize","encrypt","data"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,QAAQ,QAAQ,cAAc;AAEtD,MAAMC,aAAa,GAChB,4FAA2F,GAC5FD,QAAQ,CAACE,MAAM,CAAC;EAAEC,GAAG,EAAE,gCAAgC;EAAEC,OAAO,EAAE;AAAG,CAAC,CAAC,GACvE,sDAAsD,GACtD,+BAA+B;AAEjC,MAAMC,YAAY,GAAGN,aAAa,CAACM,YAAY,GAC3CN,aAAa,CAACM,YAAY,GAC1B,IAAIC,KAAK,CACP,CAAC,CAAC,EACF;EACEC,GAAGA,CAAA,EAAG;IACJ,MAAM,IAAIC,KAAK,CAACP,aAAa,CAAC;EAChC;AACF,CACF,CAAC;AAEL,OAAO,eAAeQ,IAAIA,CAACC,QAAgB,EAAEC,OAAe,EAAiB;EAC3E,OAAON,YAAY,CAACO,UAAU,CAACF,QAAQ,EAAEC,OAAO,CAAC;AACnD;AAEA,OAAO,eAAeE,OAAOA,CAACC,IAAS,EAAmB;EACxD,OAAOT,YAAY,CAACQ,OAAO,CAACC,IAAI,CAAC;AACnC"}

package/lib/typescript/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAmBA,wBAAsB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAE3E;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAExD"}