@jobber/components-native 0.28.1 → 0.30.0

package/dist/types/src/FormField/FormField.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ControllerRenderProps, FieldError, FieldValues, RegisterOptions } from "react-hook-form";
+interface FormFieldProps<T> {
+    /**
+     * Name of the field.
+     */
+    name: string;
+    /**
+     * The initial value of the form field.
+     */
+    readonly defaultValue?: T;
+    /**
+     * Children to render.
+     */
+    children: (field: ControllerRenderProps<FieldValues, string>, error?: FieldError) => React.ReactNode;
+    /**
+     * Rules for returning an error when validations are violated.
+     * WARNING: This component needs to be nested inside a FormProvider
+     *   for validations to work.
+     */
+    readonly validations?: RegisterOptions;
+}
+export declare function FormField<T>({ name, children, defaultValue: value, validations, }: FormFieldProps<T>): JSX.Element;
+export {};

package/dist/types/src/FormField/index.d.ts

@@ -0,0 +1 @@
+export { FormField } from "./FormField";

package/dist/types/src/InputPassword/InputPassword.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { InputTextProps, InputTextRef } from "../InputText";
+export declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<InputTextRef>>;
+interface InputPasswordProps extends Omit<InputTextProps, "keyboard" | "secureTextEntry" | "textContentType" | "clearable"> {
+    /**
+     * Determines if InputPassword uses privacy eye suffix
+     *
+     * @default true
+     */
+    usePrivacyEye?: boolean;
+}
+export {};

package/dist/types/src/InputPassword/index.d.ts

@@ -0,0 +1 @@
+export { InputPassword } from "./InputPassword";

package/dist/types/src/InputPassword/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    passwordRequired: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/index.d.ts

@@ -12,10 +12,12 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.28.1",
+  "version": "0.30.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -57,5 +57,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "d76f449cc056c3762c282b4872c4066f1f037a31"
+  "gitHead": "362d0d3914aa440bcbb40f9eed388d447cd205e0"
 }

package/src/FormField/FormField.test.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { FormProvider, useForm } from "react-hook-form";
+import { Button } from "react-native";
+import { FormField } from ".";
+import { InputText } from "../InputText";
+
+const mockOnSubmit = jest.fn();
+const inputAccessibilityLabel = "textInput";
+const saveButtonText = "Save Me";
+
+describe("when a component is wrapped in a FormField within a Form", () => {
+  function SimpleFormWithProvider({ children }) {
+    const formMethods = useForm();
+
+    return (
+      <FormProvider {...formMethods}>
+        {children}
+        <Button
+          onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+          title={saveButtonText}
+          accessibilityLabel={saveButtonText}
+        />
+      </FormProvider>
+    );
+  }
+
+  describe("when the component's value is changed", () => {
+    it("updates the form value for that component", async () => {
+      const defaultInputValue = "Sonkey";
+      const newInputValue = "Donic";
+
+      const { getByLabelText } = render(
+        <SimpleFormWithProvider>
+          <FormField name="formTextInput" defaultValue={defaultInputValue}>
+            {field => {
+              return (
+                <InputText
+                  name={field.name}
+                  accessibilityLabel={inputAccessibilityLabel}
+                  value={field.value}
+                  onChangeText={field.onChange}
+                />
+              );
+            }}
+          </FormField>
+        </SimpleFormWithProvider>,
+      );
+      const textInput = getByLabelText(inputAccessibilityLabel);
+      fireEvent.changeText(textInput, newInputValue);
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        formTextInput: newInputValue,
+      });
+    });
+  });
+
+  describe("when the validations of the component are violated", () => {
+    it("returns an error from the FormField wrapper", async () => {
+      const newInputValue = "Exceeding 5 characters";
+      const maxLengthErrorMessage = "error: max length exceeded";
+
+      const { getByLabelText, getAllByText } = render(
+        <SimpleFormWithProvider>
+          <FormField
+            name="formTextInput"
+            validations={{
+              maxLength: {
+                value: 5,
+                message: maxLengthErrorMessage,
+              },
+            }}
+          >
+            {field => {
+              return (
+                <>
+                  <InputText
+                    name={field.name}
+                    accessibilityLabel={inputAccessibilityLabel}
+                    value={field.value}
+                    onChangeText={field.onChange}
+                  />
+                </>
+              );
+            }}
+          </FormField>
+        </SimpleFormWithProvider>,
+      );
+
+      const textInput = getByLabelText(inputAccessibilityLabel);
+      fireEvent.changeText(textInput, newInputValue);
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(
+        getAllByText(maxLengthErrorMessage, { includeHiddenElements: true }),
+      ).toHaveLength(1);
+    });
+  });
+});
+
+describe("when a component is not in a Form with a Form ProviderField within a Form", () => {
+  describe("when the component's value is changed", () => {
+    it("updates the form value for that component", async () => {
+      const defaultInputValue = "Sonkey";
+      const newInputValue = "Donic";
+
+      const { getByDisplayValue, getByLabelText } = render(
+        <FormField name="formTextInput" defaultValue={defaultInputValue}>
+          {field => {
+            return (
+              <InputText
+                name={field.name}
+                accessibilityLabel={inputAccessibilityLabel}
+                value={field.value}
+                onChangeText={field.onChange}
+              />
+            );
+          }}
+        </FormField>,
+      );
+      const textInput = getByLabelText(inputAccessibilityLabel);
+      fireEvent.changeText(textInput, newInputValue);
+      expect(getByDisplayValue(newInputValue)).toBeDefined();
+    });
+  });
+});

package/src/FormField/FormField.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {
+  ControllerRenderProps,
+  FieldError,
+  FieldValues,
+  RegisterOptions,
+} from "react-hook-form";
+import { useFormController } from "../hooks";
+
+interface FormFieldProps<T> {
+  /**
+   * Name of the field.
+   */
+  name: string;
+
+  /**
+   * The initial value of the form field.
+   */
+  readonly defaultValue?: T;
+
+  /**
+   * Children to render.
+   */
+  children: (
+    field: ControllerRenderProps<FieldValues, string>,
+    error?: FieldError,
+  ) => React.ReactNode;
+
+  /**
+   * Rules for returning an error when validations are violated.
+   * WARNING: This component needs to be nested inside a FormProvider
+   *   for validations to work.
+   */
+  readonly validations?: RegisterOptions;
+}
+
+export function FormField<T>({
+  name,
+  children,
+  defaultValue: value,
+  validations,
+}: FormFieldProps<T>): JSX.Element {
+  const { error, field } = useFormController({
+    name,
+    value,
+    validations,
+  });
+
+  return <>{children({ ...field }, error)}</>;
+}

package/src/FormField/index.ts

@@ -0,0 +1 @@
+export { FormField } from "./FormField";

package/src/InputPassword/InputPassword.test.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { InputPassword } from "./InputPassword";
+import { messages } from "./messages";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
+
+const MockInputFieldWrapper = jest.fn();
+jest.mock("../InputFieldWrapper", () => ({
+  ...jest.requireActual("../InputFieldWrapper"),
+  InputFieldWrapper: function Mock(props: InputFieldWrapperProps) {
+    MockInputFieldWrapper(props);
+    return jest.requireActual("../InputFieldWrapper").InputFieldWrapper(props);
+  },
+}));
+describe("InputPassword", () => {
+  it("renders an InputPassword", () => {
+    const value = "password";
+    const { getByDisplayValue } = render(<InputPassword value={value} />);
+    expect(getByDisplayValue(value)).toBeTruthy();
+  });
+
+  it("displays the validation message when an invalid password is entered", async () => {
+    const a11yLabel = "InputPasswordTest";
+    const { getByText, getByLabelText } = render(
+      <InputPassword value="" accessibilityLabel={a11yLabel} />,
+    );
+
+    await waitFor(() => {
+      fireEvent(getByLabelText(a11yLabel), "blur");
+    });
+
+    expect(
+      getByText(messages.passwordRequired.defaultMessage, {
+        includeHiddenElements: true,
+      }),
+    ).toBeDefined();
+  });
+
+  describe("InputPassword gets the expected props", () => {
+    it("renders an invalid InputPassword", () => {
+      const props = { invalid: true };
+      render(<InputPassword {...props} />);
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining(props),
+      );
+    });
+  });
+
+  describe("Privacy eye", () => {
+    it("renders when usePrivaryEye is true", () => {
+      const testId = "eye";
+      const { getByTestId } = render(
+        <InputPassword
+          value="password"
+          suffix={{
+            icon: testId,
+          }}
+        />,
+      );
+
+      expect(getByTestId("eye")).toBeDefined();
+    });
+
+    it("does not render when usePrivaryEye is false", () => {
+      const testId = "eye";
+      const { queryByTestId } = render(
+        <InputPassword
+          value="password"
+          usePrivacyEye={false}
+          suffix={{
+            icon: testId,
+          }}
+        />,
+      );
+
+      expect(queryByTestId("eye")).toBeNull();
+    });
+
+    it("obscures the password by default", () => {
+      const { getByDisplayValue } = render(
+        <InputPassword
+          value="password"
+          suffix={{
+            icon: "eye",
+          }}
+        />,
+      );
+
+      expect(getByDisplayValue("password").props.secureTextEntry).toBeTruthy();
+    });
+  });
+});

package/src/InputPassword/InputPassword.tsx

@@ -0,0 +1,68 @@
+import React, { Ref, forwardRef, useState } from "react";
+import { useIntl } from "react-intl";
+import { IconNames } from "@jobber/design";
+import { messages } from "./messages";
+import { InputText, InputTextProps, InputTextRef } from "../InputText";
+
+export const InputPassword = forwardRef(InputPasswordInternal);
+
+interface InputPasswordProps
+  extends Omit<
+    InputTextProps,
+    "keyboard" | "secureTextEntry" | "textContentType" | "clearable"
+  > {
+  /**
+   * Determines if InputPassword uses privacy eye suffix
+   *
+   * @default true
+   */
+  usePrivacyEye?: boolean;
+}
+
+function InputPasswordInternal(
+  { usePrivacyEye = true, ...props }: InputPasswordProps,
+  ref: Ref<InputTextRef>,
+): JSX.Element {
+  const { formatMessage } = useIntl();
+  const [passwordHidden, setPasswordHidden] = useState(true);
+  const [privacyEye, setPrivacyEye] = useState<IconNames>("eye");
+
+  const handleOnPress = () => {
+    if (privacyEye === "eye") {
+      setPrivacyEye("eyeCrossed");
+      setPasswordHidden(false);
+    } else if (privacyEye === "eyeCrossed") {
+      setPrivacyEye("eye");
+      setPasswordHidden(true);
+    }
+  };
+
+  const privacyEyeSuffix = () => {
+    if (usePrivacyEye === true) {
+      return {
+        icon: privacyEye,
+        onPress: handleOnPress,
+      };
+    }
+    return undefined;
+  };
+
+  return (
+    <InputText
+      {...props}
+      ref={ref}
+      keyboard="default"
+      secureTextEntry={passwordHidden}
+      textContentType="password"
+      clearable="never"
+      suffix={privacyEyeSuffix()}
+      validations={{
+        required: {
+          value: true,
+          message: formatMessage(messages.passwordRequired),
+        },
+        ...props.validations,
+      }}
+    />
+  );
+}

package/src/InputPassword/index.ts

@@ -0,0 +1 @@
+export { InputPassword } from "./InputPassword";

package/src/InputPassword/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  passwordRequired: {
+    id: "passwordRequired",
+    defaultMessage: "Enter a password",
+    description: "Validation error message for missing password",
+  },
+});

package/src/index.ts

@@ -12,10 +12,12 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";