@jobber/components-native 0.84.3 → 0.84.4-CLEANUPre-eb76ad2.29

package/src/Form/hooks/useScrollToError/useScrollToError.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { useScrollToError } from "./useScrollToError";
 
 const mockFormState = {
@@ -25,6 +25,7 @@ jest.mock("../../../ErrorMessageWrapper", () => ({
       el: {
         measure: jest.fn((_, callback) => callback()),
         hasErrorMessage: true,
+        accessibilityFocus: jest.fn(),
       },
     },
     register: jest.fn(),

package/src/Form/types.ts

@@ -1,17 +1,16 @@
 import type { MutableRefObject, RefObject } from "react";
 import type {
   ControllerProps,
-  DeepPartial,
+  DefaultValues,
   FieldPath,
   FieldValues,
   Mode,
-  UnpackNestedValue,
   UseFormReturn,
 } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 
@@ -109,7 +108,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    * The initial values of the form inputs
    * This should be available as soon as initialLoading is set to false
    */
-  initialValues?: FormValues<DeepPartial<T>>;
+  initialValues?: DefaultValues<T>;
 
   /**
    * When the validation should happen.

package/src/FormatFile/FormatFile.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert } from "react-native";
+import { Host } from "react-native-portalize";
 import type { File } from ".";
 import { FormatFile } from ".";
 import {
@@ -117,12 +117,12 @@ function basicRenderTestWithValue() {
       );
     });
 
-    it("renders ProgressBar state advancing with the upload percentage", () => {
+    it("renders ProgressBar state advancing with the upload percentage", async () => {
       jest.useFakeTimers();
       const { getByTestId } = renderFormatFile(file);
       jest.advanceTimersByTime(progressBarAnimationTime);
-      const formatFileInnerProgressBar = getByTestId(
-        "format-file-inner-progress-bar",
+      const formatFileInnerProgressBar = await waitFor(() =>
+        getByTestId("format-file-inner-progress-bar"),
       );
       const innerProgressBarWidth = parseInt(
         formatFileInnerProgressBar.props.style.width,
@@ -226,7 +226,7 @@ function basicRenderTestWithValue() {
       });
 
       it("creates a thumbnail when a media file is used", () => {
-        const expectedCalls = testId.includes("image") ? 2 : 0;
+        const expectedCalls = testId.includes("image") ? 1 : 0;
         expect(mockCreateThumbnail).toHaveBeenCalledTimes(expectedCalls);
       });
     },

package/src/FormatFile/utils/createUseCreateThumbnail.ts

@@ -1,4 +1,4 @@
-import { useIsMounted } from "@jobber/hooks/useIsMounted";
+import { useIsMounted } from "@jobber/hooks";
 import { useCallback, useEffect, useState } from "react";
 import type { UseCreateThumbnail } from "../context/types";
 import type { CreateThumbnail, FormattedFile } from "../types";

package/src/Icon/__snapshots__/Icon.test.tsx.snap

@@ -433,6 +433,13 @@ exports[`renders thumbsDown icon 1`] = `
     ]
   }
   testID="thumbsDown"
+  transform={
+    [
+      {
+        "scaleY": -1,
+      },
+    ]
+  }
   vbHeight={24}
   vbWidth={24}
 >

package/src/InputCurrency/InputCurrency.tsx

@@ -80,6 +80,56 @@ const getKeyboard = (props: InputCurrencyProps) => {
   }
 };
 
+const computeDisplayFromNumericInput = (
+  numberedValue: number,
+  decimalNumbers: string,
+  decimalCount: number,
+  maxLength: number,
+  maxDecimalPlaces: number,
+  decimalPlaces: number,
+  formatNumber: (
+    value: number,
+    opts?: FormatNumberOptions | undefined,
+  ) => string,
+): {
+  onChangeValue: number | string;
+  displayValue: string;
+} => {
+  const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
+  const stringValue =
+    decimalNumbers !== ""
+      ? transformedValue.toString() + "." + decimalNumbers.slice(1)
+      : transformedValue.toString();
+
+  if (checkLastChar(stringValue)) {
+    const roundedDecimal = configureDecimal(
+      decimalCount,
+      maxDecimalPlaces,
+      stringValue,
+      decimalPlaces,
+    );
+    const internationalizedValueToDisplay = formatNumber(roundedDecimal, {
+      maximumFractionDigits: maxDecimalPlaces,
+    });
+
+    return {
+      onChangeValue: roundedDecimal,
+      displayValue: internationalizedValueToDisplay,
+    };
+  } else {
+    const internationalizedValueToDisplay =
+      formatNumber(transformedValue, {
+        maximumFractionDigits: maxDecimalPlaces,
+      }) + decimalNumbers;
+
+    return {
+      onChangeValue:
+        transformedValue.toString() + "." + decimalNumbers.slice(1),
+      displayValue: internationalizedValueToDisplay,
+    };
+  }
+};
+
 export function InputCurrency(props: InputCurrencyProps): JSX.Element {
   const {
     showCurrencySymbol = true,
@@ -99,54 +149,6 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
     internalValue,
   );
 
-  const setOnChangeAndDisplayValues = (
-    onChangeValue: number | string | undefined,
-    valueToDisplay: string | undefined,
-  ) => {
-    props.onChange?.(onChangeValue);
-    setDisplayValue(valueToDisplay);
-  };
-
-  const checkDecimalAndI18nOfDisplayValue = (
-    numberedValue: number,
-    decimalNumbers: string,
-    decimalCount: number,
-  ) => {
-    const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
-    const stringValue =
-      decimalNumbers !== ""
-        ? transformedValue.toString() + "." + decimalNumbers.slice(1)
-        : transformedValue.toString();
-
-    if (checkLastChar(stringValue)) {
-      const roundedDecimal = configureDecimal(
-        decimalCount,
-        maxDecimalPlaces,
-        stringValue,
-        decimalPlaces,
-      );
-      const internationalizedValueToDisplay = intl.formatNumber(
-        roundedDecimal,
-        {
-          maximumFractionDigits: maxDecimalPlaces,
-        },
-      );
-      setOnChangeAndDisplayValues(
-        roundedDecimal,
-        internationalizedValueToDisplay,
-      );
-    } else {
-      const internationalizedValueToDisplay =
-        intl.formatNumber(transformedValue, {
-          maximumFractionDigits: maxDecimalPlaces,
-        }) + decimalNumbers;
-      setOnChangeAndDisplayValues(
-        transformedValue.toString() + "." + decimalNumbers.slice(1),
-        internationalizedValueToDisplay,
-      );
-    }
-  };
-
   const handleChange = (newValue: string | undefined) => {
     const [decimalCount, wholeIntegerValue, decimalNumbers] = parseGivenInput(
       newValue,
@@ -158,19 +160,37 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
       : wholeIntegerValue;
 
     if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
-      checkDecimalAndI18nOfDisplayValue(
+      const result = computeDisplayFromNumericInput(
         numberedValue,
         decimalNumbers,
         decimalCount,
+        maxLength,
+        maxDecimalPlaces,
+        decimalPlaces,
+        intl.formatNumber,
       );
+      const { onChangeValue, displayValue: valueToDisplay } = result;
+      props.onChange?.(onChangeValue);
+      setDisplayValue(valueToDisplay);
     } else {
       const value = numberedValue?.toString() + decimalNumbers;
-      setOnChangeAndDisplayValues(value, value);
+      props.onChange?.(value);
+      setDisplayValue(value);
     }
   };
 
   const { t } = useAtlantisI18n();
 
+  const defaultValidations = {
+    pattern: {
+      value: NUMBER_VALIDATION_REGEX,
+      message: t("errors.notANumber"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -187,13 +207,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
             .replace(floatSeparators.decimal, ".");
         },
       }}
-      validations={{
-        pattern: {
-          value: NUMBER_VALIDATION_REGEX,
-          message: t("errors.notANumber"),
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
       onBlur={() => {
         props.onBlur?.();
 

package/src/InputEmail/InputEmail.tsx

@@ -2,11 +2,25 @@ import type { Ref } from "react";
 import React, { forwardRef } from "react";
 import type { InputTextProps, InputTextRef } from "../InputText";
 import { InputText } from "../InputText";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export const InputEmail = forwardRef(InputEmailInternal);
 type InputEmailProps = Omit<InputTextProps, "keyboard">;
 
 function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
+  const { t } = useAtlantisI18n();
+
+  const defaultValidations = {
+    pattern: {
+      value:
+        /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
+      message: t("InputEmail.enterEmail"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -14,14 +28,7 @@ function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
       autoCapitalize="none"
       autoCorrect={false}
       keyboard={"email-address"}
-      validations={{
-        pattern: {
-          value:
-            /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
-          message: "Enter a valid email address (email@example.com)",
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
     />
   );
 }

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -43,6 +43,7 @@ export const useStyles = buildThemedStyles(tokens => {
       right: 0,
       bottom: 0,
       left: 0,
+      zIndex: 1,
     },
 
     miniLabel: {
@@ -53,7 +54,6 @@ export const useStyles = buildThemedStyles(tokens => {
       maxHeight:
         (typographyStyles.defaultSize.lineHeight || 0) +
         tokens["space-smaller"],
-      zIndex: 1,
     },
     // Prevents the miniLabel from cutting off the ClearAction button
     miniLabelShowClearAction: {

package/src/InputFieldWrapper/components/Prefix/Prefix.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { render, renderHook } from "@testing-library/react-native";
+import { render, renderHook, screen } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
 import type { ReactTestInstance } from "react-test-renderer";
+import { Path } from "react-native-svg";
 import type { PrefixIconProps, PrefixLabelProps } from "./Prefix";
 import {
   PrefixIcon,
@@ -12,9 +13,6 @@ import {
 import { useTypographyStyles } from "../../../Typography";
 import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
-import * as IconComponent from "../../../Icon/Icon";
-
-const iconSpy = jest.spyOn(IconComponent, "Icon");
 
 const mockLabel = "$";
 
@@ -180,13 +178,9 @@ describe("Prefix", () => {
       setupIcon({
         disabled: true,
       });
-      expect(iconSpy).toHaveBeenCalledWith(
-        {
-          customColor: tokens["color-disabled"],
-          name: "invoice",
-        },
-        {},
-      );
+      const icon = screen.getByTestId("invoice");
+      const path = icon.findByType(Path);
+      expect(path.props.fill).toEqual(tokens["color-disabled"]);
     });
   });
 

package/src/InputNumber/InputNumber.tsx

@@ -46,6 +46,16 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
   const { inputTransform: convertToString, outputTransform: convertToNumber } =
     useNumberTransform(props.value);
 
+  const defaultValidations = {
+    pattern: {
+      value: NUMBER_VALIDATION_REGEX,
+      message: t("errors.notANumber"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -58,13 +68,7 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
       value={props.value?.toString()}
       defaultValue={props.defaultValue?.toString()}
       onChangeText={handleChange}
-      validations={{
-        pattern: {
-          value: NUMBER_VALIDATION_REGEX,
-          message: t("errors.notANumber"),
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
     />
   );
 }

package/src/InputSearch/InputSearch.tsx

@@ -1,7 +1,7 @@
 import type { Ref } from "react";
 import React, { forwardRef, useEffect } from "react";
 import { View } from "react-native";
-import { useDebounce } from "@jobber/hooks/useDebounce";
+import { useDebounce } from "@jobber/hooks";
 import { styles } from "./InputSearch.style";
 import type { InputTextProps, InputTextRef } from "../InputText";
 import { InputText } from "../InputText";

package/src/InputText/InputText.tsx

@@ -8,10 +8,9 @@ import React, {
   useState,
 } from "react";
 import type {
-  NativeSyntheticEvent,
+  FocusEvent,
   ReturnKeyTypeOptions,
   StyleProp,
-  TextInputFocusEventData,
   TextInputProps,
   TextStyle,
 } from "react-native";
@@ -113,9 +112,7 @@ export interface InputTextProps
    * Callback that is called when the text input is focused
    * @param event
    */
-  readonly onFocus?: (
-    event?: NativeSyntheticEvent<TextInputFocusEventData>,
-  ) => void;
+  readonly onFocus?: (event?: FocusEvent) => void;
 
   /**
    * Callback that is called when the text input is blurred

package/src/ThumbnailList/ThumbnailList.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { ThumbnailList } from "./ThumbnailList";
 import type { File } from "../FormatFile/types";
@@ -61,15 +61,15 @@ beforeEach(() => {
 });
 
 it("renders a thumbnail component with attachments", () => {
-  const tree = setup(true);
-  expect(tree.toJSON()).toMatchSnapshot();
+  setup(true);
+  expect(screen.toJSON()).toMatchSnapshot();
 });
 
 describe("when a an array of files is provided", () => {
   it("calls the previewImages util on pressing a valid file", () => {
-    const { getByLabelText } = setup();
+    setup();
     fireEvent.press(
-      getByLabelText(files[0].fileName ? files[0].fileName : "file"),
+      screen.getByLabelText(files[0].fileName ? files[0].fileName : "file"),
     );
     expect(onOpenFile).toHaveBeenCalledTimes(1);
   });

package/src/hooks/useAtlantisI18n/locales/en.json

@@ -18,6 +18,7 @@
   "goBack": "Go back",
   "InputFieldWrapper.clear": "Clear input",
   "InputPassword.enterPassword": "Enter a password",
+  "InputEmail.enterEmail": "Enter a valid email address (email@example.com)",
   "loading": "Loading",
   "menu": "Menu",
   "more": "More",

package/src/hooks/useAtlantisI18n/locales/es.json

@@ -18,6 +18,7 @@
   "goBack": "Volver",
   "InputFieldWrapper.clear": "Borrar",
   "InputPassword.enterPassword": "Escriba una contraseña",
+  "InputEmail.enterEmail": "Introduzca una dirección de correo electrónico válida (email@example.com)",
   "loading": "Cargando",
   "menu": "Menú",
   "more": "Más",

package/src/hooks/useFormController.ts

@@ -4,7 +4,7 @@ import type {
   RegisterOptions,
   UseControllerReturn,
 } from "react-hook-form";
-import { useController, useForm, useFormContext } from "react-hook-form";
+import { get, useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 
 interface UseFormControllerProps<T> {
@@ -44,18 +44,11 @@ export function useFormController<T>({
   });
 
   // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".
-  // This corresponds to the structure of the error object, e.g. { emails: { 0: { description: "foobar" } } }
-  // We assume here that fields will either follow this period-delimited three-part convention, or else that they are simple and indivisible (e.g. "city").
-  // TODO: Add support for two-part identifiers (e.g. "property.province")
-  const fieldIdentifiers = fieldName.split(".");
-  let error: FieldError | undefined;
-
-  if (fieldIdentifiers.length === 3) {
-    const [section, item, identifier] = fieldIdentifiers;
-    error = errors[section]?.[item]?.[identifier];
-  } else {
-    error = errors[fieldName];
-  }
+  // Preserve original behavior: only treat three-part names as nested paths.
+  // For anything else, perform a flat lookup to avoid behavioral changes.
+  const identifiers = fieldName.split(".");
+  const error =
+    identifiers.length === 3 ? get(errors, fieldName) : errors[fieldName];
 
   return { error, field };
 }