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

package/index.esm.js

@@ -0,0 +1,500 @@
+import { Temporal } from '@js-temporal/polyfill';
+import { getTimeZone, toZonedDateTimeUtil, toDateUtil, formatDateUtil, formatRangeUtil, subtractYearsUtil, subtractMonthsUtil, subtractWeeksUtil, subtractDaysUtil, subtractHoursUtil, subtractMinutesUtil, addYearsUtil, addMonthsUtil, addWeeksUtil, addDaysUtil, addHoursUtil, addMinutesUtil, startOfMonthUtil, startOfWeekUtil, startOfDayUtil, startOfHourUtil, startOfMinuteUtil, endOfMonthUtil, endOfWeekUtil, endOfDayUtil, endOfHourUtil, endOfMinuteUtil, differenceInMonthsUtil, differenceInWeeksUtil, differenceInDaysUtil, differenceInHoursUtil, differenceInMinutesUtil, isBetweenUtil, isTodayUtil, isFutureUtil, isPastUtil, isSameYearUtil, isSameMonthUtil, isSameWeekUtil, isSameDayUtil, timeSinceInYears, timeSinceInMonths, timeSinceInDays, timeSinceInHours, timeSinceInMinutes, timeSinceInSeconds, timeSinceAuto, toDuration, getDurationFormat, dayNameUtil, daysUtil, monthNameUtil, monthsUtil, isEqualUtil } from '@trackunit/date-and-time-utils';
+import { exhaustiveCheck } from '@trackunit/shared-utils';
+import { useMemo, useCallback } from 'react';
+import { useQuery } from '@apollo/client';
+import { useLocalStorage } from '@trackunit/react-components';
+import { TimeZonePreference } from '@trackunit/react-core-contexts-api';
+import { useCurrentUserTimeZonePreference } from '@trackunit/react-core-hooks';
+import { z } from '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 } = useCurrentUserTimeZonePreference();
+    const [customTimezone, setCustomTimezone] = useLocalStorage({
+        key: "customTimeZone",
+        defaultState: null,
+        schema: z.string().nullable(),
+    });
+    const { data: timeZoneData } = useQuery(GetAssetTimezoneDocument, {
+        variables: {
+            // eslint-disable-next-line local-rules/no-typescript-assertion
+            assetId: assetId,
+        },
+        skip: !assetId,
+        fetchPolicy: "cache-first",
+    });
+    const assetTimeZone = 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 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 = useMemo(() => {
+        const id = Temporal.Now.timeZoneId();
+        if (timeZonePreference === TimeZonePreference.CustomTimeZone && customTimezone) {
+            return getTimeZone(customTimezone);
+        }
+        return getTimeZone(id);
+    }, [customTimezone, timeZonePreference]);
+    const preferred = useMemo(() => {
+        if (timeZonePreference === 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 = toZonedDateTimeUtil(Temporal.Now.instant(), currentTimeZone);
+    /**
+     * Returns the current date and time.
+     *
+     * @returns {Date}
+     */
+    const nowDate = toDateUtil(currentDate);
+    /**
+     * Formats a date using the current locale and time zone.
+     *
+     * @param {Date} date
+     * @param {TemporalFormat} format
+     * @returns {string}
+     */
+    const formatDate = useCallback((date, format) => {
+        return 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 = useCallback((date, format, timezone, locale) => {
+        return 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 = useCallback((range, format) => 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 = useCallback((date, amount, type) => {
+        let returnFn;
+        switch (type) {
+            case "minutes":
+                returnFn = subtractMinutesUtil(date, amount, currentTimeZone);
+                break;
+            case "hours":
+                returnFn = subtractHoursUtil(date, amount, currentTimeZone);
+                break;
+            case "days":
+                returnFn = subtractDaysUtil(date, amount, currentTimeZone);
+                break;
+            case "weeks":
+                returnFn = subtractWeeksUtil(date, amount, currentTimeZone);
+                break;
+            case "months":
+                returnFn = subtractMonthsUtil(date, amount, currentTimeZone);
+                break;
+            case "years":
+                returnFn = subtractYearsUtil(date, amount, currentTimeZone);
+                break;
+            default:
+                return exhaustiveCheck(type);
+        }
+        return toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Adds a given amount of time to a date.
+     *
+     * @param {TemporalDate} date
+     * @param {number} amount
+     * @param {TemporalArithmeticType} type
+     */
+    const add = useCallback((date, amount, type) => {
+        let returnFn;
+        switch (type) {
+            case "minutes":
+                returnFn = addMinutesUtil(date, amount, currentTimeZone);
+                break;
+            case "hours":
+                returnFn = addHoursUtil(date, amount, currentTimeZone);
+                break;
+            case "days":
+                returnFn = addDaysUtil(date, amount, currentTimeZone);
+                break;
+            case "weeks":
+                returnFn = addWeeksUtil(date, amount, currentTimeZone);
+                break;
+            case "months":
+                returnFn = addMonthsUtil(date, amount, currentTimeZone);
+                break;
+            case "years":
+                returnFn = addYearsUtil(date, amount, currentTimeZone);
+                break;
+            default:
+                return exhaustiveCheck(type);
+        }
+        return toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Returns the start of a given time period.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalEdgeOfType} type
+     * @returns {Date}
+     */
+    const startOf = useCallback((date, type) => {
+        let returnFn;
+        switch (type) {
+            case "minute":
+                returnFn = startOfMinuteUtil(date, currentTimeZone);
+                break;
+            case "hour":
+                returnFn = startOfHourUtil(date, currentTimeZone);
+                break;
+            case "day":
+                returnFn = startOfDayUtil(date, currentTimeZone);
+                break;
+            case "week":
+                returnFn = startOfWeekUtil(date, currentTimeZone);
+                break;
+            case "month":
+                returnFn = startOfMonthUtil(date, currentTimeZone);
+                break;
+            default:
+                return exhaustiveCheck(type);
+        }
+        return toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Returns the end of a given time period.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalEdgeOfType} type
+     * @returns {Date}
+     */
+    const endOf = useCallback((date, type) => {
+        let returnFn;
+        switch (type) {
+            case "minute":
+                returnFn = endOfMinuteUtil(date, currentTimeZone);
+                break;
+            case "hour":
+                returnFn = endOfHourUtil(date, currentTimeZone);
+                break;
+            case "day":
+                returnFn = endOfDayUtil(date, currentTimeZone);
+                break;
+            case "week":
+                returnFn = endOfWeekUtil(date, currentTimeZone);
+                break;
+            case "month":
+                returnFn = endOfMonthUtil(date, currentTimeZone);
+                break;
+            default:
+                return exhaustiveCheck(type);
+        }
+        return toDateUtil(returnFn);
+    }, [currentTimeZone]);
+    /**
+     * Returns the difference between two dates.
+     *
+     * @param {TemporalDate} from
+     * @param {TemporalDate} to
+     * @param {TemporalDifferenceType} type
+     * @returns {number}
+     */
+    const difference = useCallback((from, to, type) => {
+        switch (type) {
+            case "minute":
+                return differenceInMinutesUtil(from, to);
+            case "hour":
+                return differenceInHoursUtil(from, to);
+            case "day":
+                return differenceInDaysUtil(from, to);
+            case "week":
+                return differenceInWeeksUtil(from, to);
+            case "month":
+                return differenceInMonthsUtil(from, to);
+            default:
+                return exhaustiveCheck(type);
+        }
+    }, []);
+    /**
+     * Returns whether a date is in the past, present or future.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalIsType} type
+     * @returns {boolean}
+     */
+    const dateIs = useCallback((date, type, betweenDates) => {
+        switch (type) {
+            case "past":
+                return isPastUtil(date);
+            case "future":
+                return isFutureUtil(date);
+            case "present":
+                return isTodayUtil(date);
+            case "between":
+                return isBetweenUtil(date, betweenDates === null || betweenDates === void 0 ? void 0 : betweenDates.start, betweenDates === null || betweenDates === void 0 ? void 0 : betweenDates.end);
+            default:
+                return exhaustiveCheck(type);
+        }
+    }, []);
+    /**
+     * Returns whether a date is same day/week/month or year.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalSameType} type
+     * @returns {boolean}
+     */
+    const same = useCallback((date, type) => {
+        switch (type) {
+            case "day":
+                return isSameDayUtil(date);
+            case "week":
+                return isSameWeekUtil(date);
+            case "month":
+                return isSameMonthUtil(date);
+            case "year":
+                return isSameYearUtil(date);
+            default:
+                return exhaustiveCheck(type);
+        }
+    }, []);
+    /**
+     * Returns the time since a given date.
+     *
+     * @param {TemporalDate} from
+     * @param {TemporalDate} to
+     * @param {TemporalSinceType} type
+     * @returns {string}
+     */
+    const since = useCallback((from, to, type) => {
+        switch (type) {
+            case "auto":
+                return timeSinceAuto(from, to, currentTimeZone, currentLocale);
+            case "seconds":
+                return timeSinceInSeconds(from, to, currentTimeZone, currentLocale);
+            case "minutes":
+                return timeSinceInMinutes(from, to, currentTimeZone, currentLocale);
+            case "hours":
+                return timeSinceInHours(from, to, currentTimeZone, currentLocale);
+            case "days":
+                return timeSinceInDays(from, to, currentTimeZone, currentLocale);
+            case "months":
+                return timeSinceInMonths(from, to, currentTimeZone, currentLocale);
+            case "years":
+                return timeSinceInYears(from, to, currentTimeZone, currentLocale);
+            default:
+                return 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 = useCallback((from, type, format, roundAt) => {
+        const durationValue = typeof from === "number"
+            ? toDuration(from, type, roundAt)
+            : Temporal.Duration.from(from).round({ smallestUnit: roundAt !== null && roundAt !== void 0 ? roundAt : "minute" });
+        return getDurationFormat(durationValue, currentLocale, format);
+    }, [currentLocale]);
+    /**
+     * Returns the name of a day.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalFormatStyle} format
+     * @returns {string}
+     */
+    const dayName = useCallback((date, format) => {
+        return dayNameUtil(date, format, currentLocale);
+    }, [currentLocale]);
+    const days = useCallback((format) => {
+        return daysUtil(format, currentLocale);
+    }, [currentLocale]);
+    /**
+     * Returns the name of a month.
+     *
+     * @param {TemporalDate} date
+     * @param {TemporalFormatStyle} format
+     * @returns {string}
+     */
+    const monthName = useCallback((date, format) => {
+        return monthNameUtil(date, format, currentLocale);
+    }, [currentLocale]);
+    const months = useCallback((format) => {
+        return monthsUtil(format, currentLocale);
+    }, [currentLocale]);
+    return useMemo(() => ({
+        nowDate,
+        formatDate,
+        formatDateWithTimezone,
+        formatRange,
+        startOf,
+        endOf,
+        add,
+        subtract,
+        difference,
+        since,
+        same,
+        duration,
+        dateIs,
+        isEqual: isEqualUtil,
+        monthName,
+        months,
+        dayName,
+        days,
+    }), [
+        add,
+        dateIs,
+        dayName,
+        days,
+        difference,
+        duration,
+        endOf,
+        formatDate,
+        formatDateWithTimezone,
+        formatRange,
+        monthName,
+        months,
+        nowDate,
+        same,
+        since,
+        startOf,
+        subtract,
+    ]);
+};
+
+export { convertToLocale, useDateAndTime, useLocale, useTimezone };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@trackunit/react-date-and-time-hooks",
+  "version": "0.0.1",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "engines": {
+    "node": ">=20.x"
+  },
+  "dependencies": {
+    "date-fns": "^2.30.0",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@trackunit/iris-app-build-utilities": "*",
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "graphql": "^15.8.0",
+    "@trackunit/iris-app-api": "*",
+    "@apollo/client": "^3.7.10",
+    "@trackunit/react-core-contexts-test": "*",
+    "@js-temporal/polyfill": "^0.4.4",
+    "@trackunit/date-and-time-utils": "*",
+    "@trackunit/shared-utils": "*",
+    "react": "^18.2.0",
+    "@trackunit/react-components": "*",
+    "@trackunit/react-core-contexts-api": "*",
+    "@trackunit/react-core-hooks": "*",
+    "zod": "3.22.4"
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js"
+}

package/src/generated/graphql-api/fragment-masking.d.ts

@@ -0,0 +1,15 @@
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Incremental } from './graphql';
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<infer TType, any> ? [TType] extends [{
+    ' $fragmentName'?: infer TKey;
+}] ? TKey extends string ? {
+    ' $fragmentRefs'?: {
+        [key in TKey]: TType;
+    };
+} : never : never : never;
+export declare function getFragmentData<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>): TType;
+export declare function getFragmentData<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined): TType | null | undefined;
+export declare function getFragmentData<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>): ReadonlyArray<TType>;
+export declare function getFragmentData<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined): ReadonlyArray<TType> | null | undefined;
+export declare function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT extends ResultOf<F>>(data: FT, _fragment: F): FragmentType<F>;
+export declare function isFragmentReady<TQuery, TFrag>(queryNode: DocumentTypeDecoration<TQuery, any>, fragmentNode: TypedDocumentNode<TFrag>, data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined): data is FragmentType<typeof fragmentNode>;

package/src/generated/graphql-api/gql.d.ts

@@ -0,0 +1,36 @@
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+declare const documents: {
+    "query GetAssetTimezone($assetId: ID!) {\n  asset(id: $assetId) {\n    locations {\n      latest {\n        properties {\n          timeZone\n        }\n      }\n    }\n  }\n}": DocumentNode<types.GetAssetTimezoneQuery, types.Exact<{
+        assetId: string;
+    }>>;
+};
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export declare function graphql(source: string): unknown;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "query GetAssetTimezone($assetId: ID!) {\n  asset(id: $assetId) {\n    locations {\n      latest {\n        properties {\n          timeZone\n        }\n      }\n    }\n  }\n}"): (typeof documents)["query GetAssetTimezone($assetId: ID!) {\n  asset(id: $assetId) {\n    locations {\n      latest {\n        properties {\n          timeZone\n        }\n      }\n    }\n  }\n}"];
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
+export {};