@jobber/components-native 0.84.2-CLEANUPus-25aa17e.18 → 0.84.2-JOB-131715-ce60f9e.1

package/dist/tsconfig.json

@@ -8,8 +8,11 @@
         "declarationDir": "./dist/types",
         "resolveJsonModule": true,
         "paths": {
+            "@jobber/hooks": [
+                "../hooks/src/index.ts"
+            ],
             "@jobber/hooks/*": [
-                "../../packages/hooks/src/*"
+                "../hooks/src/*"
             ]
         },
         "types": [
@@ -29,12 +32,8 @@
         "node_modules",
         "dist/**/*",
         "tsconfig.eslint.json",
+        "**/*.stories.tsx",
         "**/*.test.ts",
         "**/*.test.tsx",
-    ],
-    "references": [
-        {
-            "path": "../hooks"
-        }
     ]
 }

package/dist/types/src/Banner/components/BannerIcon/BannerIcon.style.d.ts

@@ -12,4 +12,7 @@ export declare const useStyles: () => {
     notice: {
         backgroundColor: string;
     };
+    success: {
+        backgroundColor: string;
+    };
 };

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

@@ -1,7 +1,7 @@
 import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 export interface BannerStyleProps {
     /**
      * Styles applied to the main view of the banner. Styles are grabbed from Banner.style.ts file

package/dist/types/src/Form/components/FormCache/FormCache.d.ts

@@ -1,9 +1,9 @@
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 interface FormCacheProps<T extends FieldValues> {
     readonly localCacheId?: string | string[];
     readonly localCacheKey?: string;
     readonly localCacheExclude?: string[];
-    readonly setLocalCache: (data: T) => void;
+    readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 export declare function FormCache<T extends FieldValues>({ localCacheExclude, localCacheKey, setLocalCache, }: FormCacheProps<T>): JSX.Element;
 export {};

package/dist/types/src/Form/context/types.d.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from "react";
-import type { FieldValues, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 export interface UseConfirmBeforeBackProps {
     alwaysPreventBack: boolean;
     onAcceptEvent?: () => void;
@@ -18,7 +18,7 @@ interface LocalCacheOptions {
 export interface AtlantisFormContextProps {
     useConfirmBeforeBack: (props: UseConfirmBeforeBackProps) => MutableRefObject<() => void>;
     useInternalFormLocalCache: <TData extends FieldValues>(formMethods: UseFormReturn<TData>, cacheKey?: string, options?: LocalCacheOptions) => {
-        setLocalCache: (data: TData) => void;
+        setLocalCache: (data: DeepPartial<TData>) => void;
         removeLocalCache: () => void;
     };
 }

package/dist/types/src/Form/hooks/useInternalForm.d.ts

@@ -1,4 +1,4 @@
-import type { FieldValues, UseFormHandleSubmit, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormHandleSubmit, UseFormReturn } from "react-hook-form";
 import type { MutableRefObject, RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import type { InternalFormProps } from "../types";
@@ -13,7 +13,7 @@ interface UseInternalForm<T extends FieldValues> {
     readonly isSubmitting: boolean;
     readonly isDirty: boolean;
     readonly removeListenerRef: MutableRefObject<() => void>;
-    readonly setLocalCache: (data: T) => void;
+    readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 export declare function useInternalForm<T extends FieldValues, SubmitResponseType>({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T>;
 export {};

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

@@ -1,8 +1,8 @@
 import type { MutableRefObject, RefObject } from "react";
-import type { ControllerProps, DeepPartial, FieldPath, FieldValues, Mode, UnpackNestedValue, UseFormReturn } from "react-hook-form";
+import type { ControllerProps, DefaultValues, FieldPath, FieldValues, Mode, 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;
 export declare enum FormSubmitErrorType {
@@ -81,7 +81,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.
      * Possible values are "onBlur", "onChange", "onSubmit", "onTouched", and "all".

package/dist/types/src/InputFieldWrapper/InputFieldWrapper.style.d.ts

@@ -23,6 +23,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
+        zIndex: number;
     };
     miniLabel: {
         top: number;
@@ -30,7 +31,6 @@ export declare const useStyles: () => {
         backgroundColor: string;
         marginRight: number;
         maxHeight: number;
-        zIndex: number;
     };
     miniLabelShowClearAction: {
         backgroundColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.84.2-CLEANUPus-25aa17e.18+25aa17e57",
+  "version": "0.84.2-JOB-131715-ce60f9e.1+ce60f9ee0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -32,8 +32,10 @@
     "build": "npm run build:clean && npm run compile",
     "bootstrap": "npm run build",
     "prepack": "npm run build",
-    "compile": "tsc -b",
-    "build:clean": "rm -rf ./dist"
+    "compile": "tsc -p tsconfig.build.json",
+    "build:clean": "rm -rf ./dist",
+    "storybook": "storybook dev -p 6008 --disable-telemetry",
+    "storybook:build": "storybook build --disable-telemetry"
   },
   "dependencies": {
     "@react-native-clipboard/clipboard": "^1.11.2",
@@ -41,7 +43,7 @@
     "autolinker": "^4.0.0",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
-    "react-hook-form": "^7.30.0",
+    "react-hook-form": "^7.52.0",
     "react-intl": "^6.4.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modalize": "^2.0.13",
@@ -51,6 +53,10 @@
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
+    "@react-native-community/datetimepicker": "^7.1.0",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/react": "^9.1.2",
+    "@storybook/react-native-web-vite": "^9.1.2",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^12.0.1",
     "@types/lodash.chunk": "^4.2.7",
@@ -58,8 +64,18 @@
     "@types/lodash.identity": "^3.0.7",
     "@types/react": "^18.0.28",
     "@types/react-native-uuid": "^1.4.0",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "metro-react-native-babel-preset": "^0.76.0",
-    "react-test-renderer": "^18.2.0"
+    "react-native": "^0.77.0",
+    "react-native-gesture-handler": "^2.10.2",
+    "react-native-modal-datetime-picker": "^15.0.1",
+    "react-native-reanimated": "^3.7.1",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-svg": "^15.1.0",
+    "react-native-web": "^0.20.0",
+    "react-test-renderer": "^18.2.0",
+    "storybook": "^9.1.2"
   },
   "peerDependencies": {
     "@babel/core": "^7.4.5",
@@ -79,5 +95,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "25aa17e577de48cee529c707be8c057a0cb8f605"
+  "gitHead": "ce60f9ee02282bd47a7403980d0780ff4398ca08"
 }

package/src/Banner/Banner.test.tsx

@@ -35,6 +35,18 @@ describe("Banner", () => {
       expect(getByText("Notice me")).toBeDefined();
       expect(icon.props.children.props.name).toBe("starburst");
     });
+
+    it("renders a success Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="success">
+          <Text>Your import is complete</Text>
+        </Banner>,
+      );
+
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("Your import is complete")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("checkmark");
+    });
   });
 
   describe("Children", () => {

package/src/Banner/Banner.tsx

@@ -97,5 +97,7 @@ function getBannerIcon(type: BannerTypes): IconNames | undefined {
       return "help";
     case "error":
       return "alert";
+    case "success":
+      return "checkmark";
   }
 }

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -15,5 +15,8 @@ export const useStyles = buildThemedStyles(tokens => {
     notice: {
       backgroundColor: tokens["color-informative"],
     },
+    success: {
+      backgroundColor: tokens["color-success"],
+    },
   };
 });

package/src/Banner/types.ts

@@ -2,7 +2,7 @@ import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 
 export interface BannerStyleProps {
   /**

package/src/Button/Button.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { fn } from "storybook/test";
+import { Button } from "@jobber/components-native";
+
+const meta = {
+  title: "Components/Actions/Button",
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BasicTemplate = (args: Story["args"]) => <Button {...args} />;
+
+export const Basic: Story = {
+  render: BasicTemplate,
+  args: {
+    label: "New Job",
+    onPress: fn(),
+  },
+};
+
+export const Cancel: Story = {
+  render: BasicTemplate,
+  args: {
+    label: "Cancel",
+    variation: "cancel",
+    onPress: fn(),
+  },
+};

package/src/Form/components/FormCache/FormCache.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from "react";
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import omit from "lodash/omit";
 
@@ -7,7 +7,7 @@ interface FormCacheProps<T extends FieldValues> {
   readonly localCacheId?: string | string[];
   readonly localCacheKey?: string;
   readonly localCacheExclude?: string[];
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function FormCache<T extends FieldValues>({
@@ -18,7 +18,7 @@ export function FormCache<T extends FieldValues>({
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 
-  const formData = useWatch<T>({ control });
+  const formData = useWatch({ control });
   const shouldExclude = useMemo(() => {
     return Array.isArray(localCacheExclude) && localCacheExclude.length > 0;
   }, [localCacheExclude]);
@@ -46,5 +46,6 @@ export function FormCache<T extends FieldValues>({
     }
   }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
 }

package/src/Form/context/types.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from "react";
-import type { FieldValues, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
   alwaysPreventBack: boolean;
@@ -27,7 +27,7 @@ export interface AtlantisFormContextProps {
     cacheKey?: string,
     options?: LocalCacheOptions,
   ) => {
-    setLocalCache: (data: TData) => void;
+    setLocalCache: (data: DeepPartial<TData>) => void;
     removeLocalCache: () => void;
   };
 }

package/src/Form/hooks/useInternalForm.ts

@@ -1,4 +1,5 @@
 import type {
+  DeepPartial,
   FieldValues,
   UseFormHandleSubmit,
   UseFormReturn,
@@ -31,7 +32,7 @@ interface UseInternalForm<T extends FieldValues> {
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
   readonly removeListenerRef: MutableRefObject<() => void>;
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function useInternalForm<T extends FieldValues, SubmitResponseType>({

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/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/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/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/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",