@jobber/components-native 0.84.3 → 0.84.4-CLEANUPre-6d043f4.28

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.84.3",
+    "version": "0.84.4-CLEANUPre-6d043f4.28+6d043f490",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -32,10 +32,10 @@
         "build": "npm run build:clean && npm run compile",
         "bootstrap": "npm run build",
         "prepack": "npm run build",
-        "compile": "tsc -b",
+        "compile": "tsc -p tsconfig.build.json",
         "build:clean": "rm -rf ./dist",
         "storybook": "storybook dev -p 6008 --disable-telemetry",
-        "build-storybook": "storybook build --disable-telemetry"
+        "storybook:build": "storybook build --disable-telemetry"
     },
     "dependencies": {
         "@react-native-clipboard/clipboard": "^1.11.2",
@@ -43,8 +43,8 @@
         "autolinker": "^4.0.0",
         "deepmerge": "^4.2.2",
         "lodash": "^4.17.21",
-        "react-hook-form": "^7.30.0",
-        "react-intl": "^6.4.2",
+        "react-hook-form": "^7.52.0",
+        "react-intl": "^7.1.11",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modalize": "^2.0.13",
         "react-native-portalize": "^1.0.7",
@@ -53,18 +53,27 @@
         "ts-xor": "^1.1.0"
     },
     "devDependencies": {
+        "@react-native-community/datetimepicker": "^8.4.5",
+        "@react-native/babel-preset": "^0.81.1",
         "@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",
+        "@testing-library/react-native": "^13.3.3",
         "@types/lodash.chunk": "^4.2.7",
         "@types/lodash.debounce": "^4.0.7",
         "@types/lodash.identity": "^3.0.7",
-        "@types/react": "^18.0.28",
         "@types/react-native-uuid": "^1.4.0",
-        "metro-react-native-babel-preset": "^0.76.0",
-        "react-test-renderer": "^18.2.0",
+        "@types/react-test-renderer": "19.1.0",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
+        "react-native": "^0.81.4",
+        "react-native-gesture-handler": "^2.28.0",
+        "react-native-modal-datetime-picker": "^18.0.0",
+        "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": "19.1.0",
         "storybook": "^9.1.2"
     },
     "peerDependencies": {
@@ -73,10 +82,10 @@
         "@react-native-community/datetimepicker": ">=6.7.0",
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
-        "react": "^18.2.0",
-        "react-intl": "^6.4.2",
-        "react-native": ">=0.76.0",
-        "react-native-gesture-handler": ">=2.10.0",
+        "react": "^18 || ^19.1.0",
+        "react-intl": "^6 || ^7",
+        "react-native": ">=0.79.5",
+        "react-native-gesture-handler": ">=2.22.0",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modal-datetime-picker": " >=13.0.0",
         "react-native-modalize": "^2.0.13",
@@ -85,5 +94,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "35579c7a74222f56c1f6d00ae964f244886471b6"
+    "gitHead": "6d043f4908d39d779d91ffa9fe2e84418734665c"
 }

package/dist/src/Banner/Banner.js

@@ -48,5 +48,7 @@ function getBannerIcon(type) {
             return "help";
         case "error":
             return "alert";
+        case "success":
+            return "checkmark";
     }
 }

package/dist/src/Banner/components/BannerIcon/BannerIcon.style.js

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

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.js

@@ -8,7 +8,6 @@ const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
 const leftOffset = -1 * offset;
 // looks like deprecation for FlatList in reanimated is cascading down to other exports
 // This is not createAnimatedComponent(FlatList), we are fine
-// eslint-disable-next-line import/no-deprecated
 const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 function InternalButtonLoadingInternal({ variation, type, }) {
     const translateX = useSharedValue(0);

package/dist/src/Form/components/FormCache/FormCache.js

@@ -28,5 +28,6 @@ export function FormCache({ localCacheExclude, localCacheKey, setLocalCache, })
             setLocalCache(formData);
         }
     }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return React.createElement(React.Fragment, null);
 }

package/dist/src/FormatFile/utils/createUseCreateThumbnail.js

@@ -1,4 +1,4 @@
-import { useIsMounted } from "@jobber/hooks/useIsMounted";
+import { useIsMounted } from "@jobber/hooks";
 import { useCallback, useEffect, useState } from "react";
 export function createUseCreateThumbnail(createThumbnail) {
     const useCreateThumbnail = useCallback((file) => {

package/dist/src/InputCurrency/InputCurrency.js

@@ -24,6 +24,31 @@ const getKeyboard = (props) => {
         return "numeric";
     }
 };
+const computeDisplayFromNumericInput = (numberedValue, decimalNumbers, decimalCount, maxLength, maxDecimalPlaces, decimalPlaces, formatNumber) => {
+    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) {
     var _a, _b;
     const { showCurrencySymbol = true, maxDecimalPlaces = 5, decimalPlaces = 2, maxLength = 10, } = props;
@@ -35,52 +60,39 @@ export function InputCurrency(props) {
     });
     const internalValue = getInternalValue(props, field, intl.formatNumber);
     const [displayValue, setDisplayValue] = useState(internalValue);
-    const setOnChangeAndDisplayValues = (onChangeValue, valueToDisplay) => {
-        var _a;
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, onChangeValue);
-        setDisplayValue(valueToDisplay);
-    };
-    const checkDecimalAndI18nOfDisplayValue = (numberedValue, decimalNumbers, decimalCount) => {
-        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) => {
+        var _a, _b;
         const [decimalCount, wholeIntegerValue, decimalNumbers] = parseGivenInput(newValue, floatSeparators.decimal);
         const numberedValue = wholeIntegerValue
             ? convertToNumber(wholeIntegerValue)
             : wholeIntegerValue;
         if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
-            checkDecimalAndI18nOfDisplayValue(numberedValue, decimalNumbers, decimalCount);
+            const result = computeDisplayFromNumericInput(numberedValue, decimalNumbers, decimalCount, maxLength, maxDecimalPlaces, decimalPlaces, intl.formatNumber);
+            const { onChangeValue, displayValue: valueToDisplay } = result;
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, onChangeValue);
+            setDisplayValue(valueToDisplay);
         }
         else {
             const value = (numberedValue === null || numberedValue === void 0 ? void 0 : numberedValue.toString()) + decimalNumbers;
-            setOnChangeAndDisplayValues(value, value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value);
+            setDisplayValue(value);
         }
     };
     const { t } = useAtlantisI18n();
+    const defaultValidations = {
+        pattern: {
+            value: NUMBER_VALIDATION_REGEX,
+            message: t("errors.notANumber"),
+        },
+    };
+    const mergedValidations = props.validations
+        ? Object.assign({}, defaultValidations, props.validations)
+        : defaultValidations;
     return (React.createElement(InputText, Object.assign({}, props, { prefix: showCurrencySymbol ? { label: currencySymbol } : undefined, keyboard: getKeyboard(props), value: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.toString()) || displayValue, defaultValue: (_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.toString(), onChangeText: handleChange, transform: {
             output: val => {
                 return val === null || val === void 0 ? void 0 : val.split(floatSeparators.group).join("").replace(floatSeparators.decimal, ".");
             },
-        }, validations: Object.assign({ pattern: {
-                value: NUMBER_VALIDATION_REGEX,
-                message: t("errors.notANumber"),
-            } }, props.validations), onBlur: () => {
+        }, validations: mergedValidations, onBlur: () => {
             var _a;
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
             if (field.value === 0 ||

package/dist/src/InputEmail/InputEmail.js

@@ -1,9 +1,17 @@
 import React, { forwardRef } from "react";
 import { InputText } from "../InputText";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 export const InputEmail = forwardRef(InputEmailInternal);
 function InputEmailInternal(props, ref) {
-    return (React.createElement(InputText, Object.assign({}, props, { ref: ref, autoCapitalize: "none", autoCorrect: false, keyboard: "email-address", validations: Object.assign({ 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) })));
+    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"),
+        },
+    };
+    const mergedValidations = props.validations
+        ? Object.assign({}, defaultValidations, props.validations)
+        : defaultValidations;
+    return (React.createElement(InputText, Object.assign({}, props, { ref: ref, autoCapitalize: "none", autoCorrect: false, keyboard: "email-address", validations: mergedValidations })));
 }

package/dist/src/InputFieldWrapper/InputFieldWrapper.style.js

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

package/dist/src/InputNumber/InputNumber.js

@@ -24,13 +24,19 @@ function InputNumberInternal(props, ref) {
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
     };
     const { inputTransform: convertToString, outputTransform: convertToNumber } = useNumberTransform(props.value);
+    const defaultValidations = {
+        pattern: {
+            value: NUMBER_VALIDATION_REGEX,
+            message: t("errors.notANumber"),
+        },
+    };
+    const mergedValidations = props.validations
+        ? Object.assign({}, defaultValidations, props.validations)
+        : defaultValidations;
     return (React.createElement(InputText, Object.assign({}, props, { keyboard: getKeyboard(), transform: {
             input: flow(convertToString, ((_a = props.transform) === null || _a === void 0 ? void 0 : _a.input) || identity),
             output: flow(convertToNumber, ((_b = props.transform) === null || _b === void 0 ? void 0 : _b.output) || identity),
-        }, ref: ref, value: (_c = props.value) === null || _c === void 0 ? void 0 : _c.toString(), defaultValue: (_d = props.defaultValue) === null || _d === void 0 ? void 0 : _d.toString(), onChangeText: handleChange, validations: Object.assign({ pattern: {
-                value: NUMBER_VALIDATION_REGEX,
-                message: t("errors.notANumber"),
-            } }, props.validations) })));
+        }, ref: ref, value: (_c = props.value) === null || _c === void 0 ? void 0 : _c.toString(), defaultValue: (_d = props.defaultValue) === null || _d === void 0 ? void 0 : _d.toString(), onChangeText: handleChange, validations: mergedValidations })));
 }
 function hasPeriodAtEnd(value) {
     // matches patterns like ".", "0.", "12.", "+1.", and "-0."

package/dist/src/InputSearch/InputSearch.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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 { InputText } from "../InputText";
 export const InputSearch = forwardRef(SearchInputInternal);

package/dist/src/InputText/InputText.js

@@ -88,6 +88,7 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
             ], readOnly: readonly, editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, scrollEnabled: false, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
                 _name && setFocusedInput(_name);
                 setFocused(true);
+                // @ts-expect-error - TODO: fix this!
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
             }, onBlur: () => {
                 _name && setFocusedInput("");

package/dist/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/dist/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/dist/src/hooks/useFormController.js

@@ -1,8 +1,7 @@
 import { v1 } from "react-native-uuid";
-import { useController, useForm, useFormContext } from "react-hook-form";
+import { get, useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 export function useFormController({ name, value, validations, }) {
-    var _a, _b;
     const fieldName = useControlName(name);
     const form = useForm({
         mode: "onTouched",
@@ -17,18 +16,10 @@ export function useFormController({ name, value, validations, }) {
         defaultValue: value || undefined,
     });
     // 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;
-    if (fieldIdentifiers.length === 3) {
-        const [section, item, identifier] = fieldIdentifiers;
-        error = (_b = (_a = errors[section]) === null || _a === void 0 ? void 0 : _a[item]) === null || _b === void 0 ? void 0 : _b[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 };
 }
 function useControlName(name) {

package/dist/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        // Exclude "@jobber/hooks" from paths to avoid building hooks from src
+        "paths": {}
+    }
+}