@jobber/components-native 0.44.2 → 0.45.0

package/dist/src/InputTime/InputTime.js

@@ -1,15 +1,14 @@
 import React, { useMemo, useState } from "react";
 import DateTimePicker from "react-native-modal-datetime-picker";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { utcToZonedTime } from "date-fns-tz";
 import { format as formatTime } from "date-fns";
 import { styles } from "./InputTime.style";
-import { messages } from "./messages";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
 import { useAtlantisContext } from "../AtlantisContext";
 import { InputPressable } from "../InputPressable";
 import { FormField } from "../FormField";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 const LOCALE_24_HOURS = "en_GB";
 const LOCALE_12_HOURS = "en_US";
 function formatInvalidState(error, invalid) {
@@ -33,7 +32,7 @@ export function InputTime(props) {
 }
 function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, invalid, placeholder, value, name, type = "scheduling", onChange, showIcon = true, }) {
     const [showPicker, setShowPicker] = useState(false);
-    const { formatMessage } = useIntl();
+    const { t } = useAtlantisI18n();
     const { timeZone, timeFormat } = useAtlantisContext();
     const is24Hour = timeFormat === "HH:mm";
     const dateTime = useMemo(() => (typeof value === "string" ? new Date(value) : value), [value]);
@@ -46,7 +45,7 @@ function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, in
     }, [dateTime, emptyValueLabel, timeZone, timeFormat]);
     const canClearTime = formattedTime === emptyValueLabel ? "never" : clearable;
     return (React.createElement(View, { style: styles.container },
-        React.createElement(InputPressable, { clearable: canClearTime, disabled: disabled, invalid: invalid, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : formatMessage(messages.time), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),
+        React.createElement(InputPressable, { clearable: canClearTime, disabled: disabled, invalid: invalid, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("time"), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),
         React.createElement(DateTimePicker, { testID: "inputTime-Picker", minuteInterval: getMinuteInterval(type), date: getInitialPickerDate(dateTime), timeZoneOffsetInMinutes: getTimeZoneOffsetInMinutes(timeZone, dateTime), isVisible: showPicker, mode: "time", onCancel: handleCancel, onConfirm: handleConfirm, is24Hour: is24Hour, locale: is24Hour ? LOCALE_24_HOURS : LOCALE_12_HOURS })));
     function showDatePicker() {
         setShowPicker(true);

package/dist/src/Menu/Menu.js

@@ -1,10 +1,8 @@
 import React, { useCallback, useRef, useState } from "react";
 import { Pressable, View, useWindowDimensions, } from "react-native";
 import { Portal } from "react-native-portalize";
-import { useIntl } from "react-intl";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { styles } from "./Menu.style";
-import { messages } from "./messages";
 import { findViewpoint } from "./utils";
 import { MenuOption } from "./components/MenuOption";
 import { Overlay } from "./components/Overlay";
@@ -12,13 +10,14 @@ import { tokens } from "../utils/design";
 import { Button } from "../Button";
 import { Content } from "../Content";
 import { useAtlantisContext } from "../AtlantisContext";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 export function Menu({ menuOptions, customActivator }) {
     const [open, setOpen] = useState(false);
     const [menuPosition, setMenuPosition] = useState();
     const activatorLayout = useRef();
     const menuButtonRef = useRef();
     const screenInfo = useScreenInformation();
-    const { formatMessage } = useIntl();
+    const { t } = useAtlantisI18n();
     const findMenuLayout = useCallback(() => {
         if (activatorLayout.current) {
             setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
@@ -49,7 +48,7 @@ export function Menu({ menuOptions, customActivator }) {
                 ], pointerEvents: "box-only", onPress: () => {
                     activatorOnPress(customActivator.props.onPress);
                 }, onLongPress: customActivator.props.onLongPress }, customActivator)),
-            !customActivator && (React.createElement(Button, { icon: "more", accessibilityLabel: formatMessage(messages.more), variation: "cancel", type: "tertiary", onPress: () => {
+            !customActivator && (React.createElement(Button, { icon: "more", accessibilityLabel: t("menu"), variation: "cancel", type: "tertiary", onPress: () => {
                     activatorOnPress();
                 } }))),
         React.createElement(Portal, null, open && (React.createElement(React.Fragment, null,

package/dist/src/ProgressBar/ProgressBar.js

@@ -1,21 +1,27 @@
 import React from "react";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { styles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
-import { messages } from "./messages";
 import { tokens } from "../utils/design";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, }) {
-    const { formatMessage } = useIntl();
-    const accessibilityLabel = [];
-    accessibilityLabel.push(formatMessage(messages.complete, { current, total }));
-    inProgress &&
-        accessibilityLabel.push(formatMessage(messages.inProgress, { inProgress }));
-    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel.join(", ") },
+    const { t } = useAtlantisI18n();
+    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel() },
         header,
         React.createElement(View, { style: styles.progressBarContainer },
             React.createElement(ProgressBarInner, { width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-surface--background"] }),
             !loading && (React.createElement(React.Fragment, null,
                 inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800 })) : (React.createElement(React.Fragment, null)),
                 React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 }))))));
+    function getA11yLabel() {
+        const a11yLabelValues = {
+            current: String(current),
+            total: String(total),
+            inProgress: String(inProgress),
+        };
+        if (inProgress) {
+            return t("ProgressBar.inProgress", a11yLabelValues);
+        }
+        return t("ProgressBar.complete", a11yLabelValues);
+    }
 }

package/dist/src/Select/Select.js

@@ -1,20 +1,19 @@
 import React from "react";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { styles } from "./Select.style";
 import { SelectInternalPicker } from "./components/SelectInternalPicker";
-import { messages } from "./messages";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
 import { useFormController } from "../hooks";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 export function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, }) {
     const { field, error } = useFormController({
         name,
         validations,
         value: value !== null && value !== void 0 ? value : defaultValue,
     });
-    const { formatMessage } = useIntl();
+    const { t } = useAtlantisI18n();
     const internalValue = value !== null && value !== void 0 ? value : field.value;
     const textVariation = getTextVariation({
         disabled,
@@ -25,7 +24,7 @@ export function Select({ value, defaultValue, onChange, children, placeholder, l
     return (React.createElement(InputFieldWrapper, { error: error, invalid: invalid || !!error, hasValue: hasValue, styleOverride: {
             container: { borderBottomWidth: undefined },
         } },
-        React.createElement(View, { testID: "ATL-Select", accessible: true, accessibilityLabel: getA11yLabel(), accessibilityValue: { text: getValue() }, accessibilityHint: formatMessage(messages.a11yHint), accessibilityRole: "button", accessibilityState: { disabled: disabled } },
+        React.createElement(View, { testID: "ATL-Select", accessible: true, accessibilityLabel: getA11yLabel(), accessibilityValue: { text: getValue() }, accessibilityHint: t("Select.a11yHint"), accessibilityRole: "button", accessibilityState: { disabled: disabled } },
             React.createElement(SelectInternalPicker, { disabled: disabled, options: getOptions(), onChange: handleChange },
                 React.createElement(View, { style: [styles.container, (invalid || !!error) && styles.invalid] },
                     label && (React.createElement(Text, { level: "textSupporting", variation: textVariation, hideFromScreenReader: true }, label)),
@@ -54,7 +53,7 @@ export function Select({ value, defaultValue, onChange, children, placeholder, l
         }));
         if (!internalValue || placeholder) {
             options.unshift({
-                label: placeholder || formatMessage(messages.emptyValue),
+                label: placeholder || t("Select.emptyValue"),
                 value: "",
                 isActive: !internalValue,
             });
@@ -64,7 +63,7 @@ export function Select({ value, defaultValue, onChange, children, placeholder, l
     function getValue() {
         const options = getOptions();
         const activeValue = options.find(option => option.isActive);
-        return ((activeValue === null || activeValue === void 0 ? void 0 : activeValue.label) || placeholder || formatMessage(messages.emptyValue));
+        return (activeValue === null || activeValue === void 0 ? void 0 : activeValue.label) || placeholder || t("Select.emptyValue");
     }
 }
 function getTextVariation({ invalid, disabled, }) {

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.js

@@ -4,20 +4,19 @@ import {
 Button, Modal, TouchableOpacity, View, } from "react-native";
 import { Picker } from "@react-native-picker/picker";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useIntl } from "react-intl";
 import { styles } from "./SelectDefaultPicker.style";
-import { messages } from "./messages";
 import { SelectPressable } from "../SelectPressable/SelectPressable";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function SelectDefaultPicker({ children, options, onChange, }) {
     const [show, setShow] = useState(false);
-    const { formatMessage } = useIntl();
+    const { t } = useAtlantisI18n();
     const selectedLanguage = options.find(option => option.isActive);
     return (React.createElement(React.Fragment, null,
         React.createElement(SelectPressable, { onPress: showPicker }, children),
         React.createElement(Modal, { visible: show, transparent: true, animationType: "slide", onRequestClose: hidePicker },
             React.createElement(TouchableOpacity, { style: styles.overlay, onPress: hidePicker }),
             React.createElement(View, { style: styles.actionBar },
-                React.createElement(Button, { title: formatMessage(messages.done), onPress: hidePicker })),
+                React.createElement(Button, { title: t("done"), onPress: hidePicker })),
             React.createElement(View, { style: styles.pickerContainer, testID: "select-wheel-picker" },
                 React.createElement(SafeAreaView, { edges: ["bottom"] },
                     React.createElement(Picker, { selectedValue: selectedLanguage === null || selectedLanguage === void 0 ? void 0 : selectedLanguage.value, onValueChange: onChange }, options.map(({ label, value }, i) => (React.createElement(Picker.Item, { key: i, label: label, value: value })))))))));

package/dist/src/Toast/Toast.js

@@ -2,24 +2,23 @@ import React from "react";
 import Toast from "react-native-toast-message";
 import { AccessibilityInfo, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useIntl } from "react-intl";
 import { styles } from "./Toast.styles";
-import { messages } from "./messages";
 import { tokens } from "../utils/design";
 import { Text } from "../Text";
 import { IconButton } from "../IconButton";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
 function DefaultToast({ text1 }) {
     const { bottom } = useSafeAreaInsets();
-    const { formatMessage } = useIntl();
+    const { t } = useAtlantisI18n();
     const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
     return (React.createElement(View, { style: toastContainerStyles },
         React.createElement(View, { style: styles.toast },
-            React.createElement(TouchableOpacity, { style: styles.toastMessage, accessibilityRole: "alert", accessibilityLabel: formatMessage(messages.toastNotificationLabel) },
+            React.createElement(TouchableOpacity, { style: styles.toastMessage, accessibilityRole: "alert" },
                 React.createElement(Text, { reverseTheme: true }, text1)),
             React.createElement(View, { style: styles.toastIcon },
-                React.createElement(IconButton, { onPress: Toast.hide, name: "remove", customColor: tokens["color-greyBlue--light"], accessibilityLabel: formatMessage(messages.dismissA11yLabel) })))));
+                React.createElement(IconButton, { onPress: Toast.hide, name: "remove", customColor: tokens["color-greyBlue--light"], accessibilityLabel: t("dismiss") })))));
 }
 const toastConfig = {
     default: DefaultToast,

package/dist/src/hooks/useAtlantisI18n/index.js

@@ -0,0 +1 @@
+export * from "./useAtlantisI18n";

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

@@ -0,0 +1,31 @@
+{
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "date": "Date",
+    "dismiss": "Dismiss",
+    "done": "Done",
+    "ContentOverlay.close": "Close {title} modal",
+    "errors.couldNotSave": "Could not save changes",
+    "errors.notANumber": "Enter a number",
+    "FormatFile.label": "Attachment Preview",
+    "FormatFile.hint": "Select for more options",
+    "FormatFile.preview": "Preview {item}",
+    "FormatFile.remove": "Remove {item}",
+    "goBack": "Go back",
+    "InputFieldWrapper.clear": "Clear input",
+    "InputPassword.enterPassword": "Enter a password",
+    "loading": "Loading",
+    "menu": "Menu",
+    "more": "More",
+    "networkUnavailableTitle": "Network Unavailable",
+    "networkUnavailableDescription": "Check your internet connection and try again later.",
+    "ProgressBar.complete": "{current} of {total} complete",
+    "ProgressBar.inProgress": "{current} of {total} complete, {inProgress} in progress",
+    "save": "Save",
+    "Select.a11yHint": "Select to open the picker",
+    "Select.emptyValue": "Select an option",
+    "time": "Time",
+    "tryAgain": "Try again",
+    "upload.failed": "Failed to upload.",
+    "upload.inProgress": "Upload in progress."
+}

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

@@ -0,0 +1,31 @@
+{
+    "cancel": "Cancelar",
+    "confirm": "Confirmar",
+    "date": "Fecha",
+    "dismiss": "Descartar",
+    "done": "Listo",
+    "ContentOverlay.close": "Close {title} modal",
+    "errors.couldNotSave": "No se pudieron guardar los cambios",
+    "errors.notANumber": "Escriba un número",
+    "FormatFile.label": "Attachment Preview",
+    "FormatFile.hint": "Select for more options",
+    "FormatFile.preview": "Vista previa de {item}",
+    "FormatFile.remove": "Eliminar {item}",
+    "goBack": "Volver",
+    "InputFieldWrapper.clear": "Borrar",
+    "InputPassword.enterPassword": "Escriba una contraseña",
+    "loading": "Cargando",
+    "menu": "Menú",
+    "more": "Más",
+    "networkUnavailableTitle": "Red no disponible",
+    "networkUnavailableDescription": "Compruebe su conexión a Internet e inténtelo de nuevo más adelante.",
+    "ProgressBar.complete": "{current} de {total} completo",
+    "ProgressBar.inProgress": "{current} de {total} completo, {inProgress} en progreso",
+    "save": "Guardar",
+    "Select.a11yHint": "Seleccionar para abrir el selector",
+    "Select.emptyValue": "Seleccione una opción",
+    "time": "Hora",
+    "tryAgain": "Intentar de nuevo",
+    "upload.failed": "No se pudo adjuntar el archivo.",
+    "upload.inProgress": "Carga de archivo en curso."
+}

package/dist/src/hooks/useAtlantisI18n/useAtlantisI18n.js

@@ -0,0 +1,22 @@
+import en from "./locales/en.json";
+import es from "./locales/es.json";
+import { useAtlantisContext } from "../../AtlantisContext";
+export function useAtlantisI18n() {
+    const { locale } = useAtlantisContext();
+    const t = (messageKey, values) => formatMessage(messageKey, values, locale);
+    return { locale, t };
+}
+function getLocalizedStrings(locale) {
+    switch (locale) {
+        case "es":
+            return es;
+        default:
+            return en;
+    }
+}
+function formatMessage(messageKey, values, locale = "en") {
+    const message = getLocalizedStrings(locale)[messageKey];
+    if (!values)
+        return message;
+    return Object.entries(values).reduce((acc, [key, value]) => acc.replace(`{${key}}`, value), message);
+}

package/dist/tsconfig.json

@@ -0,0 +1,38 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "declaration": true,
+        "declarationDir": "./dist/types",
+        "resolveJsonModule": true,
+        "paths": {
+            "@jobber/hooks/*": [
+                "../../packages/hooks/src/*"
+            ]
+        },
+        "types": [
+            "react-native",
+            "jest"
+        ],
+        "lib": [
+            "es2019"
+        ]
+    },
+    "jsx": "react-native",
+    "include": [
+        "src",
+        "**/*.json"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.test.ts",
+        "**/*.test.tsx",
+    ],
+    "references": [
+        {
+            "path": "../hooks"
+        }
+    ]
+}