@trackunit/react-date-and-time-hooks 0.0.1

package/README.md

@@ -0,0 +1,22 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit date and time hooks
+
+This library contains React Hooks used to manipulate dates such as:
+- Subtracting days, weeks or months
+- Adding days, weeks or months
+- Finding the start and end of days, weeks, months
+- Finding differences between two dates
+- See if a date is in the future, past or present day
+
+Trackunit Iris Apps are used by external developers to integrate custom functionality into [the Trackunit Manager platform](https://www.trackunit.com/services/manager/).  
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Trackunit
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/index.cjs.d.ts

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

package/index.cjs.js

@@ -0,0 +1,507 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var polyfill = require('@js-temporal/polyfill');
+var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
+var sharedUtils = require('@trackunit/shared-utils');
+var react = require('react');
+var client = require('@apollo/client');
+var reactComponents = require('@trackunit/react-components');
+var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
+var reactCoreHooks = require('@trackunit/react-core-hooks');
+var zod = require('zod');
+
+/**
+ * Try to convert to ISO standard. ex. en becomes en-GB if its in United Kingdom.
+ * Still looking at the base id.
+ *
+ * @param userPreferenceLanguage 2 letter language code from the persisted language selection.
+ */
+const convertToLocale = (userPreferenceLanguage) => {
+    const browserLanguage = navigator.language;
+    if (browserLanguage.indexOf("-") !== -1 && browserLanguage.startsWith(userPreferenceLanguage)) {
+        return browserLanguage;
+    }
+    return userPreferenceLanguage;
+};
+
+var _a;
+const LANG_STORAGE_KEY = "i18nextLng";
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+const BrowserLocale = (_a = navigator.language) !== null && _a !== void 0 ? _a : "en";
+/**
+ *
+ */
+const useLocale = () => {
+    const savedLanguage = localStorage.getItem(LANG_STORAGE_KEY);
+    const selectedLanguage = savedLanguage || BrowserLocale || "en";
+    const userLocale = convertToLocale(selectedLanguage);
+    return userLocale || BrowserLocale;
+};
+
+const GetAssetTimezoneDocument = {
+    kind: "Document",
+    definitions: [
+        {
+            kind: "OperationDefinition",
+            operation: "query",
+            name: { kind: "Name", value: "GetAssetTimezone" },
+            variableDefinitions: [
+                {
+                    kind: "VariableDefinition",
+                    variable: { kind: "Variable", name: { kind: "Name", value: "assetId" } },
+                    type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "ID" } } },
+                },
+            ],
+            selectionSet: {
+                kind: "SelectionSet",
+                selections: [
+                    {
+                        kind: "Field",
+                        name: { kind: "Name", value: "asset" },
+                        arguments: [
+                            {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "id" },
+                                value: { kind: "Variable", name: { kind: "Name", value: "assetId" } },
+                            },
+                        ],
+                        selectionSet: {
+                            kind: "SelectionSet",
+                            selections: [
+                                {
+                                    kind: "Field",
+                                    name: { kind: "Name", value: "locations" },
+                                    selectionSet: {
+                                        kind: "SelectionSet",
+                                        selections: [
+                                            {
+                                                kind: "Field",
+                                                name: { kind: "Name", value: "latest" },
+                                                selectionSet: {
+                                                    kind: "SelectionSet",
+                                                    selections: [
+                                                        {
+                                                            kind: "Field",
+                                                            name: { kind: "Name", value: "properties" },
+                                                            selectionSet: {
+                                                                kind: "SelectionSet",
+                                                                selections: [{ kind: "Field", name: { kind: "Name", value: "timeZone" } }],
+                                                            },
+                                                        },
+                                                    ],
+                                                },
+                                            },
+                                        ],
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};
+
+/**
+ *
+ */
+const useTimezone = ({ assetId } = {}) => {
+    var _a, _b, _c, _d;
+    const { timeZonePreference } = reactCoreHooks.useCurrentUserTimeZonePreference();
+    const [customTimezone, setCustomTimezone] = reactComponents.useLocalStorage({
+        key: "customTimeZone",
+        defaultState: null,
+        schema: zod.z.string().nullable(),
+    });
+    const { data: timeZoneData } = client.useQuery(GetAssetTimezoneDocument, {
+        variables: {
+            // eslint-disable-next-line local-rules/no-typescript-assertion
+            assetId: assetId,
+        },
+        skip: !assetId,
+        fetchPolicy: "cache-first",
+    });
+    const assetTimeZone = react.useMemo(() => {
+        var _a, _b, _c, _d;
+        const timezone = (_d = (_c = (_b = (_a = timeZoneData === null || timeZoneData === void 0 ? void 0 : timeZoneData.asset) === null || _a === void 0 ? void 0 : _a.locations) === null || _b === void 0 ? void 0 : _b.latest) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.timeZone;
+        if (!timezone) {
+            return null;
+        }
+        return dateAndTimeUtils.getTimeZone(timezone);
+    }, [(_d = (_c = (_b = (_a = timeZoneData === null || timeZoneData === void 0 ? void 0 : timeZoneData.asset) === null || _a === void 0 ? void 0 : _a.locations) === null || _b === void 0 ? void 0 : _b.latest) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.timeZone]);
+    const current = react.useMemo(() => {
+        const id = polyfill.Temporal.Now.timeZoneId();
+        if (timeZonePreference === reactCoreContextsApi.TimeZonePreference.CustomTimeZone && customTimezone) {
+            return dateAndTimeUtils.getTimeZone(customTimezone);
+        }
+        return dateAndTimeUtils.getTimeZone(id);
+    }, [customTimezone, timeZonePreference]);
+    const preferred = react.useMemo(() => {
+        if (timeZonePreference === reactCoreContextsApi.TimeZonePreference.MachineTimeZone && assetTimeZone) {
+            return assetTimeZone;
+        }
+        return current;
+    }, [timeZonePreference, current, assetTimeZone]);
+    return {
+        current,
+        assetTimeZone,
+        preferred,
+        setCustomTimezone,
+    };
+};
+
+/**
+ *
+ */
+const useDateAndTime = () => {
+    const currentLocale = useLocale();
+    const { current, assetTimeZone, preferred } = useTimezone();
+    const currentTimeZone = current.id || preferred.id || (assetTimeZone === null || assetTimeZone === void 0 ? void 0 : assetTimeZone.id);
+    const currentDate = dateAndTimeUtils.toZonedDateTimeUtil(polyfill.Temporal.Now.instant(), currentTimeZone);
+    /**
+     * Returns the current date and time.
+     *
+     * @returns {Date}
+     */
+    const nowDate = dateAndTimeUtils.toDateUtil(currentDate);
+    /**
+     * Formats a date using the current locale and time zone.
+     *
+     * @param {Date} date
+     * @param {TemporalFormat} format
+     * @returns {string}
+     */
+    const formatDate = react.useCallback((date, format) => {
+        return dateAndTimeUtils.formatDateUtil(date, format, currentTimeZone, currentLocale);
+    }, [currentLocale, currentTimeZone]);
+    /**
+     * Formats a date using the custom locale and custom timezone.
+     *
+     * @param {Date} date
+     * @param {TemporalFormat} format
+     * @param {string} timezone
+     * @param {string} locale
+     * @returns {string}
+     */
+    const formatDateWithTimezone = react.useCallback((date, format, timezone, locale) => {
+        return dateAndTimeUtils.formatDateUtil(date, format, timezone !== null && timezone !== void 0 ? timezone : currentTimeZone, locale !== null && locale !== void 0 ? locale : currentLocale);
+    }, [currentLocale, currentTimeZone]);
+    /**
+     * Formats a date range using the current locale and time zone.
+     *
+     * @param {Date} start
+     * @param {Date} end
+     * @param {Intl.DateTimeFormatOptions} format
+     * @returns {string}
+     */
+    const formatRange = react.useCallback((range, format) => dateAndTimeUtils.formatRangeUtil(range, currentLocale, format), [currentLocale]);
+    /**
+     * Subtracts a given amount of time from a date.
+     *
+     * @param {TemporalDate} date
+     * @param {number} amount
+     * @param {TemporalArithmeticType} type
+     * @returns {Date}
+     */
+    const subtract = react.useCallback((date, amount, type) => {
+        let returnFn;
+        switch (type) {
+            case "minutes":
+                returnFn = dateAndTimeUtils.subtractMinutesUtil(date, amount, currentTimeZone);
+                break;
+            case "hours":
+                returnFn = dateAndTimeUtils.subtractHoursUtil(date, amount, currentTimeZone);
+                break;
+            case "days":
+                returnFn = dateAndTimeUtils.subtractDaysUtil(date, amount, currentTimeZone);
+                break;
+            case "weeks":
+                returnFn = dateAndTimeUtils.subtractWeeksUtil(date, amount, currentTimeZone);
+                break;
+            case "months":
+                returnFn = dateAndTimeUtils.subtractMonthsUtil(date, amount, currentTimeZone);
+                break;
+            case "years":
+                returnFn = dateAndTimeUtils.subtractYearsUtil(date, amount, currentTimeZone);
+                break;
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+        return dateAndTimeUtils.toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Adds a given amount of time to a date.
+     *
+     * @param {TemporalDate} date
+     * @param {number} amount
+     * @param {TemporalArithmeticType} type
+     */
+    const add = react.useCallback((date, amount, type) => {
+        let returnFn;
+        switch (type) {
+            case "minutes":
+                returnFn = dateAndTimeUtils.addMinutesUtil(date, amount, currentTimeZone);
+                break;
+            case "hours":
+                returnFn = dateAndTimeUtils.addHoursUtil(date, amount, currentTimeZone);
+                break;
+            case "days":
+                returnFn = dateAndTimeUtils.addDaysUtil(date, amount, currentTimeZone);
+                break;
+            case "weeks":
+                returnFn = dateAndTimeUtils.addWeeksUtil(date, amount, currentTimeZone);
+                break;
+            case "months":
+                returnFn = dateAndTimeUtils.addMonthsUtil(date, amount, currentTimeZone);
+                break;
+            case "years":
+                returnFn = dateAndTimeUtils.addYearsUtil(date, amount, currentTimeZone);
+                break;
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+        return dateAndTimeUtils.toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Returns the start of a given time period.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalEdgeOfType} type
+     * @returns {Date}
+     */
+    const startOf = react.useCallback((date, type) => {
+        let returnFn;
+        switch (type) {
+            case "minute":
+                returnFn = dateAndTimeUtils.startOfMinuteUtil(date, currentTimeZone);
+                break;
+            case "hour":
+                returnFn = dateAndTimeUtils.startOfHourUtil(date, currentTimeZone);
+                break;
+            case "day":
+                returnFn = dateAndTimeUtils.startOfDayUtil(date, currentTimeZone);
+                break;
+            case "week":
+                returnFn = dateAndTimeUtils.startOfWeekUtil(date, currentTimeZone);
+                break;
+            case "month":
+                returnFn = dateAndTimeUtils.startOfMonthUtil(date, currentTimeZone);
+                break;
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+        return dateAndTimeUtils.toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Returns the end of a given time period.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalEdgeOfType} type
+     * @returns {Date}
+     */
+    const endOf = react.useCallback((date, type) => {
+        let returnFn;
+        switch (type) {
+            case "minute":
+                returnFn = dateAndTimeUtils.endOfMinuteUtil(date, currentTimeZone);
+                break;
+            case "hour":
+                returnFn = dateAndTimeUtils.endOfHourUtil(date, currentTimeZone);
+                break;
+            case "day":
+                returnFn = dateAndTimeUtils.endOfDayUtil(date, currentTimeZone);
+                break;
+            case "week":
+                returnFn = dateAndTimeUtils.endOfWeekUtil(date, currentTimeZone);
+                break;
+            case "month":
+                returnFn = dateAndTimeUtils.endOfMonthUtil(date, currentTimeZone);
+                break;
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+        return dateAndTimeUtils.toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Returns the difference between two dates.
+     *
+     * @param {TemporalDate} from
+     * @param {TemporalDate} to
+     * @param {TemporalDifferenceType} type
+     * @returns {number}
+     */
+    const difference = react.useCallback((from, to, type) => {
+        switch (type) {
+            case "minute":
+                return dateAndTimeUtils.differenceInMinutesUtil(from, to);
+            case "hour":
+                return dateAndTimeUtils.differenceInHoursUtil(from, to);
+            case "day":
+                return dateAndTimeUtils.differenceInDaysUtil(from, to);
+            case "week":
+                return dateAndTimeUtils.differenceInWeeksUtil(from, to);
+            case "month":
+                return dateAndTimeUtils.differenceInMonthsUtil(from, to);
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+    }, []);
+    /**
+     * Returns whether a date is in the past, present or future.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalIsType} type
+     * @returns {boolean}
+     */
+    const dateIs = react.useCallback((date, type, betweenDates) => {
+        switch (type) {
+            case "past":
+                return dateAndTimeUtils.isPastUtil(date);
+            case "future":
+                return dateAndTimeUtils.isFutureUtil(date);
+            case "present":
+                return dateAndTimeUtils.isTodayUtil(date);
+            case "between":
+                return dateAndTimeUtils.isBetweenUtil(date, betweenDates === null || betweenDates === void 0 ? void 0 : betweenDates.start, betweenDates === null || betweenDates === void 0 ? void 0 : betweenDates.end);
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+    }, []);
+    /**
+     * Returns whether a date is same day/week/month or year.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalSameType} type
+     * @returns {boolean}
+     */
+    const same = react.useCallback((date, type) => {
+        switch (type) {
+            case "day":
+                return dateAndTimeUtils.isSameDayUtil(date);
+            case "week":
+                return dateAndTimeUtils.isSameWeekUtil(date);
+            case "month":
+                return dateAndTimeUtils.isSameMonthUtil(date);
+            case "year":
+                return dateAndTimeUtils.isSameYearUtil(date);
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+    }, []);
+    /**
+     * Returns the time since a given date.
+     *
+     * @param {TemporalDate} from
+     * @param {TemporalDate} to
+     * @param {TemporalSinceType} type
+     * @returns {string}
+     */
+    const since = react.useCallback((from, to, type) => {
+        switch (type) {
+            case "auto":
+                return dateAndTimeUtils.timeSinceAuto(from, to, currentTimeZone, currentLocale);
+            case "seconds":
+                return dateAndTimeUtils.timeSinceInSeconds(from, to, currentTimeZone, currentLocale);
+            case "minutes":
+                return dateAndTimeUtils.timeSinceInMinutes(from, to, currentTimeZone, currentLocale);
+            case "hours":
+                return dateAndTimeUtils.timeSinceInHours(from, to, currentTimeZone, currentLocale);
+            case "days":
+                return dateAndTimeUtils.timeSinceInDays(from, to, currentTimeZone, currentLocale);
+            case "months":
+                return dateAndTimeUtils.timeSinceInMonths(from, to, currentTimeZone, currentLocale);
+            case "years":
+                return dateAndTimeUtils.timeSinceInYears(from, to, currentTimeZone, currentLocale);
+            default:
+                return sharedUtils.exhaustiveCheck(type);
+        }
+    }, [currentLocale, currentTimeZone]);
+    /**
+     * Returns a duration from a number
+     *
+     * @param {Duration} from
+     * @param {TemporalDurationType} type
+     * @param {TemporalFormat["dayFormat"]} format
+     * @example type: "hours", { hours: 230, minutes: 27 } = 230 hours, 27 minutes
+     * @example type: "hours", 230.45 = 230 hours, 27 minutes
+     * @returns {string}
+     */
+    const duration = react.useCallback((from, type, format, roundAt) => {
+        const durationValue = typeof from === "number"
+            ? dateAndTimeUtils.toDuration(from, type, roundAt)
+            : polyfill.Temporal.Duration.from(from).round({ smallestUnit: roundAt !== null && roundAt !== void 0 ? roundAt : "minute" });
+        return dateAndTimeUtils.getDurationFormat(durationValue, currentLocale, format);
+    }, [currentLocale]);
+    /**
+     * Returns the name of a day.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalFormatStyle} format
+     * @returns {string}
+     */
+    const dayName = react.useCallback((date, format) => {
+        return dateAndTimeUtils.dayNameUtil(date, format, currentLocale);
+    }, [currentLocale]);
+    const days = react.useCallback((format) => {
+        return dateAndTimeUtils.daysUtil(format, currentLocale);
+    }, [currentLocale]);
+    /**
+     * Returns the name of a month.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalFormatStyle} format
+     * @returns {string}
+     */
+    const monthName = react.useCallback((date, format) => {
+        return dateAndTimeUtils.monthNameUtil(date, format, currentLocale);
+    }, [currentLocale]);
+    const months = react.useCallback((format) => {
+        return dateAndTimeUtils.monthsUtil(format, currentLocale);
+    }, [currentLocale]);
+    return react.useMemo(() => ({
+        nowDate,
+        formatDate,
+        formatDateWithTimezone,
+        formatRange,
+        startOf,
+        endOf,
+        add,
+        subtract,
+        difference,
+        since,
+        same,
+        duration,
+        dateIs,
+        isEqual: dateAndTimeUtils.isEqualUtil,
+        monthName,
+        months,
+        dayName,
+        days,
+    }), [
+        add,
+        dateIs,
+        dayName,
+        days,
+        difference,
+        duration,
+        endOf,
+        formatDate,
+        formatDateWithTimezone,
+        formatRange,
+        monthName,
+        months,
+        nowDate,
+        same,
+        since,
+        startOf,
+        subtract,
+    ]);
+};
+
+exports.convertToLocale = convertToLocale;
+exports.useDateAndTime = useDateAndTime;
+exports.useLocale = useLocale;
+exports.useTimezone = useTimezone;

package/index.esm.d.ts

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