@evervault/react-native 2.5.1 → 2.6.0

package/src/EvervaultProvider.tsx

@@ -1,43 +0,0 @@
-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

@@ -1,420 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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;