@jobber/components-native 0.45.1 → 0.46.0

package/dist/types/src/hooks/useAtlantisI18n/useAtlantisI18n.d.ts

@@ -1,7 +1,24 @@
 import en from "./locales/en.json";
 export type I18nKeys = keyof typeof en;
 export interface useAtlantisI18nValue {
+    /**
+     * The set locale based on the AtlantisContext.
+     */
     readonly locale: string;
+    /**
+     * Returns the translated string depending on the locale. This accepts a 2nd
+     * param for string interpolation.
+     */
     readonly t: (message: I18nKeys, values?: Record<string, string>) => string;
+    /**
+     * Returns a formatted date string based on the locale and the `dateFormat`
+     * set in AtlantisContext.
+     */
+    readonly formatDate: (date: Date) => string;
+    /**
+     * Returns a formatted time string based on the locale and the `timeFormat`
+     * set in AtlantisContext.
+     */
+    readonly formatTime: (date: Date) => string;
 }
 export declare function useAtlantisI18n(): useAtlantisI18nValue;

package/dist/types/src/hooks/useAtlantisI18n/utils/dateFormatter.d.ts

@@ -0,0 +1,6 @@
+interface DateFormatterOptions {
+    readonly locale: string;
+    readonly timeZone: string;
+}
+export declare function dateFormatter(date: Date, dateTimeFormat: string, { locale, timeZone }: DateFormatterOptions): string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.45.1",
+  "version": "0.46.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "8764198c93cfc2812f504b6f6509595ad6b3195c"
+  "gitHead": "6ff59b16b38fdf784fa15bcfa41eb97181d2f6b0"
 }

package/src/InputDate/InputDate.tsx

@@ -3,12 +3,9 @@ import DateTimePicker from "react-native-modal-datetime-picker";
 import { Platform } from "react-native";
 import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { utcToZonedTime } from "date-fns-tz";
-import { format as formatDate } from "date-fns";
 import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
-import { useAtlantisContext } from "../AtlantisContext";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface BaseInputDateProps
@@ -153,8 +150,7 @@ function InternalInputDate({
   accessibilityHint,
 }: InputDateProps): JSX.Element {
   const [showPicker, setShowPicker] = useState(false);
-  const { t, locale } = useAtlantisI18n();
-  const { timeZone, dateFormat } = useAtlantisContext();
+  const { t, locale, formatDate } = useAtlantisI18n();
 
   const date = useMemo(() => {
     if (typeof value === "string") return new Date(value);
@@ -163,12 +159,11 @@ function InternalInputDate({
 
   const formattedDate = useMemo(() => {
     if (date) {
-      const zonedTime = utcToZonedTime(date, timeZone);
-      return formatDate(zonedTime, dateFormat);
+      return formatDate(date);
     }
 
     return emptyValueLabel;
-  }, [date, emptyValueLabel, timeZone, dateFormat]);
+  }, [date, emptyValueLabel]);
 
   const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
 

package/src/InputTime/InputTime.tsx

@@ -3,8 +3,6 @@ import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import DateTimePicker from "react-native-modal-datetime-picker";
 import { View } from "react-native";
-import { utcToZonedTime } from "date-fns-tz";
-import { format as formatTime } from "date-fns";
 import { styles } from "./InputTime.style";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
 import { useAtlantisContext } from "../AtlantisContext";
@@ -134,9 +132,9 @@ function InternalInputTime({
   showIcon = true,
 }: InputTimeProps): JSX.Element {
   const [showPicker, setShowPicker] = useState(false);
-  const { t } = useAtlantisI18n();
-
+  const { t, formatTime } = useAtlantisI18n();
   const { timeZone, timeFormat } = useAtlantisContext();
+
   const is24Hour = timeFormat === "HH:mm";
 
   const dateTime = useMemo(
@@ -146,12 +144,11 @@ function InternalInputTime({
 
   const formattedTime = useMemo(() => {
     if (dateTime) {
-      const zonedTime = utcToZonedTime(dateTime, timeZone);
-      return formatTime(zonedTime, timeFormat);
+      return formatTime(dateTime);
     }
 
     return emptyValueLabel;
-  }, [dateTime, emptyValueLabel, timeZone, timeFormat]);
+  }, [dateTime, emptyValueLabel]);
 
   const canClearTime = formattedTime === emptyValueLabel ? "never" : clearable;
 

package/src/hooks/useAtlantisI18n/useAtlantisI18n.test.ts

@@ -10,6 +10,15 @@ jest.mock("../../AtlantisContext", () => ({
   ...jest.requireActual("../../AtlantisContext"),
 }));
 
+const spy = jest.spyOn(context, "useAtlantisContext");
+const testDate = new Date("2020-01-01T00:00:00.000Z");
+const dateAfterSpringForward = new Date("2020-04-10T00:00:00.000Z");
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(testDate);
+});
+
 describe("useAtlantisI18n", () => {
   it("should return english by default", () => {
     const { result } = renderHook(useAtlantisI18n);
@@ -27,7 +36,6 @@ describe("useAtlantisI18n", () => {
 
   describe("Español", () => {
     it("should return español", () => {
-      const spy = jest.spyOn(context, "useAtlantisContext");
       spy.mockReturnValueOnce({ ...context.defaultValues, locale: "es" });
       const { result } = renderHook(useAtlantisI18n);
 
@@ -37,7 +45,6 @@ describe("useAtlantisI18n", () => {
 
   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);
 
@@ -50,4 +57,77 @@ describe("useAtlantisI18n", () => {
       expect(Object.keys(en)).toEqual(Object.keys(es));
     });
   });
+
+  describe("formatDate", () => {
+    it("should return the formatted date", () => {
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatDate(testDate)).toBe("Jan 1, 2020");
+    });
+
+    it("should return the date formatted for es", () => {
+      spy.mockReturnValueOnce({ ...context.defaultValues, locale: "es" });
+
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatDate(testDate)).toBe("1 ene 2020");
+    });
+
+    describe("Timezone", () => {
+      it.each([
+        ["America/New_York", "Dec 31, 2019"],
+        ["America/Chicago", "Dec 31, 2019"],
+        ["America/Denver", "Dec 31, 2019"],
+        ["Europe/London", "Jan 1, 2020"],
+        ["Australia/Sydney", "Jan 1, 2020"],
+      ])("should return the %s time", (timeZone, expected) => {
+        spy.mockReturnValueOnce({ ...context.defaultValues, timeZone });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatDate(testDate)).toBe(expected);
+      });
+    });
+  });
+
+  describe("formatTime", () => {
+    it("should return the formatted time", () => {
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatTime(testDate)).toBe("12:00 AM");
+    });
+
+    it("should return the date formatted for es", () => {
+      spy.mockReturnValueOnce({ ...context.defaultValues, locale: "es" });
+
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatTime(testDate)).toBe("00:00");
+    });
+
+    describe("Timezone", () => {
+      it.each([
+        ["America/New_York", "7:00 PM"],
+        ["America/Chicago", "6:00 PM"],
+        ["America/Denver", "5:00 PM"],
+        ["Europe/London", "12:00 AM"],
+        ["Australia/Sydney", "11:00 AM"],
+      ])("should return the %s zoned time", (timeZone, expected) => {
+        spy.mockReturnValueOnce({ ...context.defaultValues, timeZone });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatTime(testDate)).toBe(expected);
+      });
+
+      it.each([
+        ["America/New_York", "8:00 PM"],
+        ["America/Chicago", "7:00 PM"],
+        ["America/Denver", "6:00 PM"],
+        ["Europe/London", "1:00 AM"],
+        ["Australia/Sydney", "10:00 AM"],
+      ])("should return the %s spring zoned time", (timeZone, expected) => {
+        spy.mockReturnValueOnce({ ...context.defaultValues, timeZone });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatTime(dateAfterSpringForward)).toBe(
+          expected,
+        );
+      });
+    });
+  });
 });

package/src/hooks/useAtlantisI18n/useAtlantisI18n.ts

@@ -1,20 +1,56 @@
+import { useCallback } from "react";
 import en from "./locales/en.json";
 import es from "./locales/es.json";
+import { dateFormatter } from "./utils/dateFormatter";
 import { useAtlantisContext } from "../../AtlantisContext";
 
 export type I18nKeys = keyof typeof en;
 
 export interface useAtlantisI18nValue {
+  /**
+   * The set locale based on the AtlantisContext.
+   */
   readonly locale: string;
+
+  /**
+   * Returns the translated string depending on the locale. This accepts a 2nd
+   * param for string interpolation.
+   */
   readonly t: (message: I18nKeys, values?: Record<string, string>) => string;
+
+  /**
+   * Returns a formatted date string based on the locale and the `dateFormat`
+   * set in AtlantisContext.
+   */
+  readonly formatDate: (date: Date) => string;
+
+  /**
+   * Returns a formatted time string based on the locale and the `timeFormat`
+   * set in AtlantisContext.
+   */
+  readonly formatTime: (date: Date) => string;
 }
 
 export function useAtlantisI18n(): useAtlantisI18nValue {
-  const { locale } = useAtlantisContext();
-  const t = (messageKey: keyof typeof en, values?: Record<string, string>) =>
-    formatMessage(messageKey, values, locale);
+  const { locale, dateFormat, timeFormat, timeZone } = useAtlantisContext();
+
+  const t = useCallback(
+    (messageKey: keyof typeof en, values?: Record<string, string>) =>
+      formatMessage(messageKey, values, locale),
+    [formatMessage, locale],
+  );
+
+  const formatDate = useCallback(
+    (date: Date) => dateFormatter(date, dateFormat, { locale, timeZone }),
+    [dateFormatter, locale],
+  );
+
+  const formatTime = useCallback(
+    (date: Date) => dateFormatter(date, timeFormat, { locale, timeZone }),
+    [dateFormatter, locale],
+  );
 
-  return { locale, t };
+  return { locale, t, formatDate, formatTime };
 }
 
 function getLocalizedStrings(locale: string): typeof en {

package/src/hooks/useAtlantisI18n/utils/dateFormatter.ts

@@ -0,0 +1,31 @@
+import { format } from "date-fns";
+import { utcToZonedTime } from "date-fns-tz";
+import { es } from "date-fns/locale";
+
+interface DateFormatterOptions {
+  readonly locale: string;
+  readonly timeZone: string;
+}
+
+export function dateFormatter(
+  date: Date,
+  dateTimeFormat: string,
+  { locale, timeZone }: DateFormatterOptions,
+): string {
+  const zonedTime = utcToZonedTime(date, timeZone);
+  return format(zonedTime, dateTimeFormat, {
+    locale: getDateFnsLocale(locale),
+  });
+}
+
+/**
+ * Change locale string to date-fns locale object.
+ */
+function getDateFnsLocale(locale?: string): Locale | undefined {
+  switch (locale) {
+    case "es":
+      return es;
+    default:
+      return;
+  }
+}