@jobber/components-native 0.44.2 → 0.45.0

package/src/Select/Select.tsx

@@ -1,15 +1,14 @@
 import React, { ReactElement } from "react";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { RegisterOptions } from "react-hook-form";
 import { styles } from "./Select.style";
 import { SelectInternalPicker } from "./components/SelectInternalPicker";
-import { messages } from "./messages";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { Icon } from "../Icon";
 import { TextVariation } from "../Typography";
 import { Text } from "../Text";
 import { useFormController } from "../hooks";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface SelectOption {
   /**
@@ -111,7 +110,7 @@ export function Select({
     value: value ?? defaultValue,
   });
 
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const internalValue = value ?? field.value;
   const textVariation = getTextVariation({
     disabled,
@@ -134,7 +133,7 @@ export function Select({
         accessible={true}
         accessibilityLabel={getA11yLabel()}
         accessibilityValue={{ text: getValue() }}
-        accessibilityHint={formatMessage(messages.a11yHint)}
+        accessibilityHint={t("Select.a11yHint")}
         accessibilityRole="button"
         accessibilityState={{ disabled: disabled }}
       >
@@ -207,7 +206,7 @@ export function Select({
 
     if (!internalValue || placeholder) {
       options.unshift({
-        label: placeholder || formatMessage(messages.emptyValue),
+        label: placeholder || t("Select.emptyValue"),
         value: "",
         isActive: !internalValue,
       });
@@ -220,9 +219,7 @@ export function Select({
     const options = getOptions();
 
     const activeValue = options.find(option => option.isActive);
-    return (
-      activeValue?.label || placeholder || formatMessage(messages.emptyValue)
-    );
+    return activeValue?.label || placeholder || t("Select.emptyValue");
   }
 }
 

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -8,11 +8,10 @@ import {
 } 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 { SelectInternalPickerProps } from "../../types";
 import { SelectPressable } from "../SelectPressable/SelectPressable";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 type SelectDefaultPickerProps = SelectInternalPickerProps;
 
@@ -22,7 +21,7 @@ export function SelectDefaultPicker({
   onChange,
 }: SelectDefaultPickerProps): JSX.Element {
   const [show, setShow] = useState(false);
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const selectedLanguage = options.find(option => option.isActive);
 
   return (
@@ -36,7 +35,7 @@ export function SelectDefaultPicker({
       >
         <TouchableOpacity style={styles.overlay} onPress={hidePicker} />
         <View style={styles.actionBar}>
-          <Button title={formatMessage(messages.done)} onPress={hidePicker} />
+          <Button title={t("done")} onPress={hidePicker} />
         </View>
         <View style={styles.pickerContainer} testID="select-wheel-picker">
           <SafeAreaView edges={["bottom"]}>

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { cleanup, fireEvent, render } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
 import { SelectDefaultPicker } from "./SelectDefaultPicker";
-import { messages } from "./messages";
 import { Text } from "../../../Text";
 
 const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
@@ -55,7 +54,7 @@ describe("SelectDefaultPicker", () => {
     const screen = setup();
 
     fireEvent.press(screen.getByText(childText));
-    fireEvent.press(screen.getByText(messages.done.defaultMessage));
+    fireEvent.press(screen.getByText("Done"));
     expect(
       screen.getByTestId("SelectDefaultPicker").findAllByType(MockPicker),
     ).toEqual([]);

package/src/Toast/Toast.tsx

@@ -6,28 +6,23 @@ 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 }: ToastConfigParams<string>): JSX.Element {
   const { bottom } = useSafeAreaInsets();
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
   return (
     <View style={toastContainerStyles}>
       <View style={styles.toast}>
-        <TouchableOpacity
-          style={styles.toastMessage}
-          accessibilityRole="alert"
-          accessibilityLabel={formatMessage(messages.toastNotificationLabel)}
-        >
+        <TouchableOpacity style={styles.toastMessage} accessibilityRole="alert">
           <Text reverseTheme>{text1}</Text>
         </TouchableOpacity>
         <View style={styles.toastIcon}>
@@ -35,7 +30,7 @@ function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
             onPress={Toast.hide}
             name="remove"
             customColor={tokens["color-greyBlue--light"]}
-            accessibilityLabel={formatMessage(messages.dismissA11yLabel)}
+            accessibilityLabel={t("dismiss")}
           />
         </View>
       </View>

package/src/hooks/useAtlantisI18n/index.ts

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

package/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/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/src/hooks/useAtlantisI18n/useAtlantisI18n.test.ts

@@ -0,0 +1,53 @@
+import { renderHook } from "@testing-library/react-native";
+import { useAtlantisI18n } from ".";
+import en from "./locales/en.json";
+import es from "./locales/es.json";
+import * as context from "../../AtlantisContext";
+
+jest.mock("../../AtlantisContext", () => ({
+  // need to mark this as a module so that we can spy on it
+  __esModule: true,
+  ...jest.requireActual("../../AtlantisContext"),
+}));
+
+describe("useAtlantisI18n", () => {
+  it("should return english by default", () => {
+    const { result } = renderHook(useAtlantisI18n);
+
+    expect(result.current.t("cancel")).toBe("Cancel");
+  });
+
+  it("should interpolate the strings wrapped in {}", () => {
+    const { result } = renderHook(useAtlantisI18n);
+
+    expect(result.current.t("FormatFile.preview", { item: "🔱" })).toBe(
+      "Preview 🔱",
+    );
+  });
+
+  describe("Español", () => {
+    it("should return español", () => {
+      const spy = jest.spyOn(context, "useAtlantisContext");
+      spy.mockReturnValueOnce({ ...context.defaultValues, locale: "es" });
+      const { result } = renderHook(useAtlantisI18n);
+
+      expect(result.current.t("cancel")).toBe("Cancelar");
+    });
+  });
+
+  describe("Unsupported language", () => {
+    it("should return the english translation", () => {
+      const spy = jest.spyOn(context, "useAtlantisContext");
+      spy.mockReturnValueOnce({ ...context.defaultValues, locale: "fr" });
+      const { result } = renderHook(useAtlantisI18n);
+
+      expect(result.current.t("cancel")).toBe("Cancel");
+    });
+  });
+
+  describe("Translation files", () => {
+    it("should have the same keys for en and es", () => {
+      expect(Object.keys(en)).toEqual(Object.keys(es));
+    });
+  });
+});

package/src/hooks/useAtlantisI18n/useAtlantisI18n.ts

@@ -0,0 +1,43 @@
+import en from "./locales/en.json";
+import es from "./locales/es.json";
+import { useAtlantisContext } from "../../AtlantisContext";
+
+export interface useAtlantisI18nValue {
+  readonly locale: string;
+  readonly t: (
+    message: keyof typeof en,
+    values?: Record<string, string>,
+  ) => string;
+}
+
+export function useAtlantisI18n(): useAtlantisI18nValue {
+  const { locale } = useAtlantisContext();
+  const t = (messageKey: keyof typeof en, values?: Record<string, string>) =>
+    formatMessage(messageKey, values, locale);
+
+  return { locale, t };
+}
+
+function getLocalizedStrings(locale: string): typeof en {
+  switch (locale) {
+    case "es":
+      return es;
+    default:
+      return en;
+  }
+}
+
+function formatMessage(
+  messageKey: keyof typeof en,
+  values?: Record<string, string>,
+  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/src/BottomSheet/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    cancel: {
-        id: "cancel",
-        defaultMessage: "Cancel",
-        description: "Text for the cancel action",
-    },
-});

package/dist/src/ButtonGroup/messages.js

@@ -1,18 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    more: {
-        id: "more",
-        defaultMessage: "More",
-        description: "Accessibility label for the More button",
-    },
-    unavailableNetworkTitle: {
-        id: "unavailableNetworkTitle",
-        defaultMessage: "Network unavailable",
-        description: "The title for alert about network unavailable",
-    },
-    unavailableNetworkMessage: {
-        id: "unavailableNetworkMessage",
-        defaultMessage: "Check your internet connection and try again later.",
-        description: "The message for alert about network unavailable",
-    },
-});

package/dist/src/ContentOverlay/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    closeOverlayA11YLabel: {
-        id: "closeOverlayA11yLabel",
-        defaultMessage: "Close {title} modal",
-        description: "Accessibility label for button to close the overlay modal",
-    },
-});

package/dist/src/Form/components/FormErrorBanner/messages.js

@@ -1,13 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    networkError: {
-        id: "networkError",
-        defaultMessage: "Could not save changes",
-        description: "Displayed when a general server error occurs during save",
-    },
-    offlineError: {
-        id: "offlineError",
-        defaultMessage: "Currently offline. Check your internet connection.",
-        description: "Error message to be shown when the app is offline",
-    },
-});

package/dist/src/Form/components/FormMessage/components/InternalFormMessage/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    goBackButton: {
-        id: "goBackButton",
-        defaultMessage: "Go Back",
-        description: "The label for the fallback secondary button when it doesn't exist",
-    },
-});

package/dist/src/Form/components/FormSaveButton/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    saveButton: {
-        id: "saveButton",
-        defaultMessage: "Save",
-        description: "The label for the save button",
-    },
-});

package/dist/src/Form/messages.js

@@ -1,28 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    loadingA11YLabel: {
-        id: "loadingA11yLabel",
-        defaultMessage: "Loading",
-        description: "Accessibility label for the loading indicator",
-    },
-    dismissAlertButton: {
-        id: "dismiss",
-        defaultMessage: "Dismiss",
-        description: "The label for the button to dismiss the alert ",
-    },
-    retryAlertButton: {
-        id: "retry",
-        defaultMessage: "Try Again",
-        description: "The label for the alert button to try action again",
-    },
-    unavailableNetworkTitle: {
-        id: "unavailableNetworkTitle",
-        defaultMessage: "Network unavailable",
-        description: "The title for alert about network unavailable",
-    },
-    unavailableNetworkMessage: {
-        id: "unavailableNetworkMessage",
-        defaultMessage: "Check your internet connection and try again later.",
-        description: "The message for alert about network unavailable",
-    },
-});

package/dist/src/FormatFile/components/FormatFileBottomSheet/messages.js

@@ -1,13 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    lightBoxPreviewButton: {
-        id: "lightBoxPreviewButton",
-        defaultMessage: "Preview {bottomSheetOptionsSuffix}",
-        description: "Label for button when preview the file",
-    },
-    removeButton: {
-        id: "removeButton",
-        defaultMessage: "Remove {bottomSheetOptionsSuffix}",
-        description: "Label for button when remove the file",
-    },
-});

package/dist/src/FormatFile/messages.js

@@ -1,23 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    defaultAccessibilityLabel: {
-        id: "defaultAccessibilityLabel",
-        defaultMessage: "Attachment Preview",
-        description: "The default accessibility label",
-    },
-    defaultAccessibilityHint: {
-        id: "defaultAccessibilityHint",
-        defaultMessage: "Select for more options",
-        description: "The default accessibility hint",
-    },
-    errorAccessibilityLabel: {
-        id: "errorAccessibilityLabel",
-        defaultMessage: "Failed upload",
-        description: "The accessibility label for error states",
-    },
-    inProgressAccessibilityLabel: {
-        id: "inProgress",
-        defaultMessage: "Upload in progress",
-        description: "The accessibility label for in-progress states",
-    },
-});

package/dist/src/InputCurrency/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    notANumberError: {
-        id: "notANumberError",
-        defaultMessage: "Enter a number",
-        description: "Error message shown when a non-numeric value is typed in number input",
-    },
-});

package/dist/src/InputDate/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    datePlaceholder: {
-        id: "datePlaceholder",
-        defaultMessage: "Date",
-        description: "Default input label for the InputDate component",
-    },
-});

package/dist/src/InputFieldWrapper/components/ClearAction/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    clearTextLabel: {
-        id: "clearTextLabel",
-        defaultMessage: "Clear input",
-        description: "Accessiblity label for the clear input button",
-    },
-});

package/dist/src/InputNumber/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    notANumberError: {
-        id: "notANumberError",
-        defaultMessage: "Enter a number",
-        description: "Error message shown when a non-numeric value is typed in number input",
-    },
-});

package/dist/src/InputPassword/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    passwordRequired: {
-        id: "passwordRequired",
-        defaultMessage: "Enter a password",
-        description: "Validation error message for missing password",
-    },
-});

package/dist/src/InputTime/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    time: {
-        id: "timeLabel",
-        defaultMessage: "Time",
-        description: "Label for DateTimePicker with time variant",
-    },
-});

package/dist/src/Menu/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    more: {
-        id: "more",
-        defaultMessage: "Menu",
-        description: "Accessibility label to open the menu",
-    },
-});

package/dist/src/ProgressBar/messages.js

@@ -1,13 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    complete: {
-        id: "complete",
-        defaultMessage: "{current} of {total} complete",
-        description: "Progress bar accessibilityLabel for current/total",
-    },
-    inProgress: {
-        id: "inProgress",
-        defaultMessage: "{inProgress} in progress",
-        description: "Progress bar accessibilityLabel for inProgress/total",
-    },
-});

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

@@ -1,8 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    done: {
-        id: "done",
-        defaultMessage: "Done",
-        description: "Done action",
-    },
-});

package/dist/src/Select/messages.js

@@ -1,13 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    a11yHint: {
-        id: "a11yHint",
-        defaultMessage: "Select to open the picker",
-        description: "Accessibility hint on how to interact with the select",
-    },
-    emptyValue: {
-        id: "emptyValue",
-        defaultMessage: "Select an option",
-        description: "Accessibility hint on how to interact with the select",
-    },
-});

package/dist/src/Toast/messages.js

@@ -1,13 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    toastNotificationLabel: {
-        id: "toastNotificationLabel",
-        defaultMessage: "Toast Notification",
-        description: "Accessibility label for the Toast",
-    },
-    dismissA11yLabel: {
-        id: "dismissA11yLabel",
-        defaultMessage: "Dismiss toast notification",
-        description: "Accessibility label to dismiss the toast when pressing X",
-    },
-});

package/dist/types/src/BottomSheet/messages.d.ts

@@ -1,7 +0,0 @@
-export declare const messages: {
-    cancel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/dist/types/src/ButtonGroup/messages.d.ts

@@ -1,17 +0,0 @@
-export declare const messages: {
-    more: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    unavailableNetworkTitle: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    unavailableNetworkMessage: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/dist/types/src/ContentOverlay/messages.d.ts

@@ -1,7 +0,0 @@
-export declare const messages: {
-    closeOverlayA11YLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/dist/types/src/Form/components/FormErrorBanner/messages.d.ts

@@ -1,12 +0,0 @@
-export declare const messages: {
-    networkError: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    offlineError: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/dist/types/src/Form/components/FormMessage/components/InternalFormMessage/messages.d.ts

@@ -1,7 +0,0 @@
-export declare const messages: {
-    goBackButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/dist/types/src/Form/components/FormSaveButton/messages.d.ts

@@ -1,7 +0,0 @@
-export declare const messages: {
-    saveButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};