@jobber/components-native 0.29.0 → 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/index.d.ts

@@ -12,6 +12,7 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.29.0",
+  "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": "14a9d66cb036dd7cf163774ff1fe980642296b8e"
+  "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/index.ts

@@ -12,6 +12,7 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";