@monkvision/common 4.0.0

package/lib/hooks/useInterval.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+var react_1 = require("react");
+/**
+ * This custom hook creates an interval that calls the provided callback every `delay` milliseconds. If `delay` is
+ * `null` or less than 0, the callback will not be called.
+ */
+function useInterval(callback, delay) {
+    var callbackRef = (0, react_1.useRef)(callback);
+    (0, react_1.useLayoutEffect)(function () {
+        callbackRef.current = callback;
+    }, [callback]);
+    (0, react_1.useEffect)(function () {
+        if (delay === null || delay < 0) {
+            return function () { };
+        }
+        var intervalId = setInterval(function () {
+            callbackRef.current();
+        }, delay);
+        return function () {
+            clearInterval(intervalId);
+        };
+    }, [delay]);
+}
+exports.useInterval = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/lib/hooks/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sourceRoot":"","sources":["../../src/hooks/useInterval.ts"],"names":[],"mappings":";;;AAAA,+BAA2D;AAE3D;;;GAGG;AACH,SAAgB,WAAW,CAAC,QAAoB,EAAE,KAAoB;IACpE,IAAM,WAAW,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,CAAC;IAErC,IAAA,uBAAe,EAAC;QACd,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAA,iBAAS,EAAC;QACR,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,EAAE;YAC/B,OAAO,cAAO,CAAC,CAAC;SACjB;QAED,IAAM,UAAU,GAAG,WAAW,CAAC;YAC7B,WAAW,CAAC,OAAO,EAAE,CAAC;QACxB,CAAC,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO;YACL,aAAa,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC;AApBD,kCAoBC"}

package/lib/hooks/useLoadingState.d.ts

@@ -0,0 +1,33 @@
+/**
+ * An object containing data about a task.
+ */
+export interface LoadingState {
+    /**
+     * Boolean indicating if the task is running.
+     */
+    isLoading: boolean;
+    /**
+     * This field will contain the error that occurred during the task. If no error has occurred, or if the task has not
+     * completed yet, this field is `null`.
+     */
+    error: unknown | null;
+    /**
+     * Callback used to indicate that the task has started.
+     */
+    start: () => void;
+    /**
+     * Callback used to indicate that the task has completed successfully.
+     */
+    onSuccess: () => void;
+    /**
+     * Callback used to indicate that an error occurred during the task.
+     */
+    onError: (err?: unknown) => void;
+}
+/**
+ * Custom hook used to create a `LoadingState` object. This object can be used to track the processing of a task in
+ * the component. For instance, you can use this hook to handle the loading and errors of API calls in your components.
+ *
+ * @param [startsLoading] Boolean indicating if the loading state starts in loading mode or not.
+ */
+export declare function useLoadingState(startsLoading?: boolean): LoadingState;

package/lib/hooks/useLoadingState.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoadingState = void 0;
+var react_1 = require("react");
+var useObjectMemo_1 = require("./useObjectMemo");
+/**
+ * Custom hook used to create a `LoadingState` object. This object can be used to track the processing of a task in
+ * the component. For instance, you can use this hook to handle the loading and errors of API calls in your components.
+ *
+ * @param [startsLoading] Boolean indicating if the loading state starts in loading mode or not.
+ */
+function useLoadingState(startsLoading) {
+    var _a = (0, react_1.useState)(!!startsLoading), isLoading = _a[0], setIsLoading = _a[1];
+    var _b = (0, react_1.useState)(null), error = _b[0], setError = _b[1];
+    var start = (0, react_1.useCallback)(function () {
+        setError(null);
+        setIsLoading(true);
+    }, []);
+    var onSuccess = (0, react_1.useCallback)(function () {
+        setError(null);
+        setIsLoading(false);
+    }, []);
+    var onError = (0, react_1.useCallback)(function (err) {
+        setError(err);
+        setIsLoading(false);
+    }, []);
+    return (0, useObjectMemo_1.useObjectMemo)({
+        isLoading: isLoading,
+        error: error,
+        start: start,
+        onSuccess: onSuccess,
+        onError: onError,
+    });
+}
+exports.useLoadingState = useLoadingState;
+//# sourceMappingURL=useLoadingState.js.map

package/lib/hooks/useLoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingState.js","sourceRoot":"","sources":["../../src/hooks/useLoadingState.ts"],"names":[],"mappings":";;;AAAA,+BAA8C;AAC9C,iDAAgD;AA6BhD;;;;;GAKG;AACH,SAAgB,eAAe,CAAC,aAAuB;IAC/C,IAAA,KAA4B,IAAA,gBAAQ,EAAC,CAAC,CAAC,aAAa,CAAC,EAApD,SAAS,QAAA,EAAE,YAAY,QAA6B,CAAC;IACtD,IAAA,KAAoB,IAAA,gBAAQ,EAAiB,IAAI,CAAC,EAAjD,KAAK,QAAA,EAAE,QAAQ,QAAkC,CAAC;IAEzD,IAAM,KAAK,GAAG,IAAA,mBAAW,EAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,SAAS,GAAG,IAAA,mBAAW,EAAC;QAC5B,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,UAAC,GAAa;QACxC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,IAAA,6BAAa,EAAC;QACnB,SAAS,WAAA;QACT,KAAK,OAAA;QACL,KAAK,OAAA;QACL,SAAS,WAAA;QACT,OAAO,SAAA;KACR,CAAC,CAAC;AACL,CAAC;AA1BD,0CA0BC"}

package/lib/hooks/useObjectMemo.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This custom hook is used to have a more handy way of memoizing a record of values.
+ *
+ * @example
+ * import { useMemo } from 'React';
+ * import { useObjectMemo } from '@monkvision/common';
+ *
+ * // These 2 lines are equivalent
+ * const foo = useMemo(() => ({ bar, baz }), [bar, baz]);
+ * const foo = useObjectMemo({ bar, baz });
+ */
+export declare function useObjectMemo<T extends Record<string, unknown>>(object: T): T;

package/lib/hooks/useObjectMemo.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useObjectMemo = void 0;
+var react_1 = require("react");
+/**
+ * This custom hook is used to have a more handy way of memoizing a record of values.
+ *
+ * @example
+ * import { useMemo } from 'React';
+ * import { useObjectMemo } from '@monkvision/common';
+ *
+ * // These 2 lines are equivalent
+ * const foo = useMemo(() => ({ bar, baz }), [bar, baz]);
+ * const foo = useObjectMemo({ bar, baz });
+ */
+function useObjectMemo(object) {
+    return (0, react_1.useMemo)(function () { return object; }, Object.values(object));
+}
+exports.useObjectMemo = useObjectMemo;
+//# sourceMappingURL=useObjectMemo.js.map

package/lib/hooks/useObjectMemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useObjectMemo.js","sourceRoot":"","sources":["../../src/hooks/useObjectMemo.ts"],"names":[],"mappings":";;;AAAA,+BAAgC;AAEhC;;;;;;;;;;GAUG;AACH,SAAgB,aAAa,CAAoC,MAAS;IACxE,OAAO,IAAA,eAAO,EAAC,cAAM,OAAA,MAAM,EAAN,CAAM,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AACtD,CAAC;AAFD,sCAEC"}

package/lib/hooks/useObjectTranslation.d.ts

@@ -0,0 +1,15 @@
+import { TranslationObject } from '@monkvision/types';
+/**
+ * The result of the useObjectTranslation. It contains a function which takes a LabelTranslation object and return the
+ * translated label sync with the actual selected language.
+ */
+export interface UseObjectTranslationResult {
+    /**
+     * Function translating a LabelTranslation object into a translated label sync with the actual selected language.
+     */
+    tObj: (obj: TranslationObject) => string;
+}
+/**
+ * Custom hook used to get a translation function tObj that translates TranslationObjects.
+ */
+export declare function useObjectTranslation(): UseObjectTranslationResult;

package/lib/hooks/useObjectTranslation.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useObjectTranslation = void 0;
+var react_i18next_1 = require("react-i18next");
+var react_1 = require("react");
+var i18n_1 = require("../i18n");
+/**
+ * Custom hook used to get a translation function tObj that translates TranslationObjects.
+ */
+function useObjectTranslation() {
+    var i18n = (0, react_i18next_1.useTranslation)().i18n;
+    var tObj = (0, react_1.useCallback)(function (obj) {
+        var _a;
+        return (_a = obj[(0, i18n_1.getLanguage)(i18n.language)]) !== null && _a !== void 0 ? _a : 'translation-not-found';
+    }, [i18n.language]);
+    return { tObj: tObj };
+}
+exports.useObjectTranslation = useObjectTranslation;
+//# sourceMappingURL=useObjectTranslation.js.map

package/lib/hooks/useObjectTranslation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useObjectTranslation.js","sourceRoot":"","sources":["../../src/hooks/useObjectTranslation.ts"],"names":[],"mappings":";;;AACA,+CAA+C;AAC/C,+BAAoC;AACpC,gCAAsC;AAatC;;GAEG;AACH,SAAgB,oBAAoB;IAC1B,IAAA,IAAI,GAAK,IAAA,8BAAc,GAAE,KAArB,CAAsB;IAClC,IAAM,IAAI,GAAG,IAAA,mBAAW,EACtB,UAAC,GAAsB;;QACrB,OAAO,MAAA,GAAG,CAAC,IAAA,kBAAW,EAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,mCAAI,uBAAuB,CAAC;IACpE,CAAC,EACD,CAAC,IAAI,CAAC,QAAQ,CAAC,CAChB,CAAC;IACF,OAAO,EAAE,IAAI,MAAA,EAAE,CAAC;AAClB,CAAC;AATD,oDASC"}

package/lib/hooks/useQueue.d.ts

@@ -0,0 +1,152 @@
+/**
+ * Type definition for the processing function of a queue.
+ */
+export type ProcessingFunction<T> = (item: T) => Promise<unknown>;
+/**
+ * The options that can be used to configure a processing queue using the `useQueue` hook.
+ *
+ * @see useQueue
+ * @see Queue
+ */
+export interface QueueOptions<T> {
+    /**
+     * If this value is set, the queue will have a maximum number of items. Trying to push an item in the queue while the
+     * queue is full will result in an error being thrown. You can know if the queue is full using the `queue.isFull`
+     * property.
+     *
+     * @see Queue.isFull
+     */
+    maxItems?: number;
+    /**
+     * If this value is set, the queue will have a maximum number of items being processed at the same time. Trying to
+     * push an item in the queue while the queue is at max processing will result in the item being put on hold until more
+     * space is available in the processing queue. You can know if the queue is at max processing using the
+     * `queue.isAtMaxProcessing` property.
+     *
+     * @see Queue.isAtMaxProcessing
+     */
+    maxProcessingItems?: number;
+    /**
+     * Boolean indicating if the queue should store the items for which the processing failed (i.e. for which the Promise
+     * resulting from the processing function for this item rejected). Items will be stored in the `queue.failedItems`
+     * array, and this array can be cleared using the `queue.clearFailedItems` function.
+     *
+     * @default false
+     * @see Queue.failedItems
+     * @see Queue.clearFailedItems
+     */
+    storeFailedItems?: boolean;
+    /**
+     * Callback that will be called when the processing of an item successfully completes.
+     */
+    onItemComplete?: (item: T) => void;
+    /**
+     * Callback that will be called when the processing of an item fails.
+     */
+    onItemFail?: (item: T) => void;
+}
+/**
+ * Object containing details on an item in the processing queue for which the processing failed (the Promise resulting
+ * from the process function rejected).
+ */
+export interface QueueFailedItem<T> {
+    /**
+     * This item for which the processing failed.
+     */
+    item: T;
+    /**
+     * This value contains the rejection value of the processing function that caused the item to fail.
+     */
+    error?: unknown;
+}
+/**
+ * This object is a processing queue created by the `useQueue` hook. This queue works as an aynchronous FIFO (First In,
+ * First Out) processing queue, where items are processed in parallel. You can configure this queue using the options
+ * (`QueueOptions`) passed as the second parameter of the `useQueue` hook.
+ *
+ * @see QueueOptions
+ */
+export interface Queue<T> {
+    /**
+     * The length of the queue. This number represents the total number of items currently in the queue (being processed
+     * or being on hold).
+     */
+    length: number;
+    /**
+     * This number represents the total number of items currently being processed in the queue.
+     */
+    processingCount: number;
+    /**
+     * If `options.maxProcessingItems` is set, when pushing a new item in the queue while the queue is at max processing,
+     * the item will be put on hold until the total number of items being processed goes below the maximum. This number
+     * indicates the total number of items currently on hold in the queue.
+     *
+     * @see QueueOptions.maxProcessingItems
+     * @see Queue.isAtMaxProcessing
+     */
+    onHoldCount: number;
+    /**
+     * This number indicates the total number of items that were pushed to the queue since the queue creation or since the
+     * last queue clear.
+     */
+    totalItems: number;
+    /**
+     * If `options.maxItems` is set, this boolean will be set to `true` if the length of the queue is at its maximum.
+     *
+     * @see QueueOptions.maxItems
+     */
+    isFull: boolean;
+    /**
+     * If `options.maxProcessingItems` is set, this boolean will be set to `true` if the total number of items being
+     * processed by the queue is at its maximum.
+     *
+     * @see QueueOptions.maxProcessingItems
+     */
+    isAtMaxProcessing: boolean;
+    /**
+     * This method is used to push an item in the queue.
+     *
+     * *Notes :*
+     * - If `options.maxItems` is set and the queue is full, this method will throw an error.
+     * - If `options.maxProcessingItems` is set and the queue is at max processing, this method will push the item and put
+     * it on hold until more space in the processing queue is available.
+     */
+    push: (item: T) => void;
+    /**
+     * If `options.storeFailedItems` is set to `true`, this array contains every item for which the processing promise
+     * rejected, along with their respective rejection values. This array can be cleared using the
+     * `queue.clearFailedItems` function.
+     *
+     * @see QueueOptions.storeFailedItems
+     * @see Queue.clearFailedItems
+     */
+    failedItems: QueueFailedItem<T>[];
+    /**
+     * This method is used to remove some items from the `failedItems` array.
+     *
+     * @see QueueOptions.storeFailedItems
+     * @see Queue.failedItems
+     */
+    clearFailedItems: (items: T[]) => void;
+    /**
+     * This method is used to completely clear the queue and reset its state to the initial one. The boolean passed as the
+     * parameter of this function indicates wether or not the ongoing processing should also be canceled or not :
+     *
+     * - If set to `false` (the default value), when items that were still being processed when the queue was cleared are
+     * finished being processed, they wil still be treated by the end routines (`options.onItemComplete` and
+     * `options.onItemFail` will be called, and failed items will be added to the `failedItems` array if
+     * `options.storeFailedItems` is used).
+     * - If set to `true`, even items that will be finished processing *after* the queue was cleared will not be
+     * treated by the end routines (`options.onItemComplete` and `options.onItemFail` will **not** be called etc.).
+     */
+    clear: (cancelProcessing?: boolean) => void;
+}
+/**
+ * This hook is used to create a processing queue. The `process` function passed as a parameter is an async function
+ * that is used to process items in the queue. You can find more details on how the queue works by taking a look at the
+ * TSDoc of the `Queue` interface.
+ *
+ * @see Queue
+ * @see QueueOptions
+ */
+export declare function useQueue<T>(process: ProcessingFunction<T>, optionsParams?: QueueOptions<T>): Queue<T>;

package/lib/hooks/useQueue.js

@@ -0,0 +1,194 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQueue = void 0;
+var react_1 = require("react");
+var defaultOptions = {
+    storeFailedItems: false,
+};
+/**
+ * This hook is used to create a processing queue. The `process` function passed as a parameter is an async function
+ * that is used to process items in the queue. You can find more details on how the queue works by taking a look at the
+ * TSDoc of the `Queue` interface.
+ *
+ * @see Queue
+ * @see QueueOptions
+ */
+function useQueue(process, optionsParams) {
+    var _this = this;
+    var _a = (0, react_1.useState)([]), processedItems = _a[0], setProcessedItems = _a[1];
+    var _b = (0, react_1.useState)([]), itemsOnHold = _b[0], setItemsOnHold = _b[1];
+    var _c = (0, react_1.useState)([]), canceledItems = _c[0], setCanceledItems = _c[1];
+    var _d = (0, react_1.useState)([]), failedItems = _d[0], setFailedItems = _d[1];
+    var _e = (0, react_1.useState)(0), totalItems = _e[0], setTotalItems = _e[1];
+    var options = (0, react_1.useMemo)(function () { return (__assign(__assign({}, defaultOptions), (optionsParams !== null && optionsParams !== void 0 ? optionsParams : {}))); }, [optionsParams]);
+    var stateRef = (0, react_1.useRef)();
+    stateRef.current = { processedItems: processedItems, itemsOnHold: itemsOnHold, canceledItems: canceledItems, options: options };
+    var clear = (0, react_1.useCallback)(function (cancelProcessing) {
+        if (cancelProcessing === void 0) { cancelProcessing = false; }
+        if (cancelProcessing) {
+            setCanceledItems(function (items) { var _a, _b; return __spreadArray(__spreadArray([], items, true), ((_b = (_a = stateRef.current) === null || _a === void 0 ? void 0 : _a.processedItems) !== null && _b !== void 0 ? _b : []), true); });
+        }
+        setProcessedItems([]);
+        setItemsOnHold([]);
+        setFailedItems([]);
+        setTotalItems(0);
+    }, []);
+    var clearFailedItems = (0, react_1.useCallback)(function (itemsToClear) {
+        setFailedItems(function (items) { return items.filter(function (i) { return !itemsToClear.includes(i.item); }); });
+    }, []);
+    var processItem = (0, react_1.useCallback)(function (item) { return __awaiter(_this, void 0, void 0, function () {
+        var error_1;
+        var _a, _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    setProcessedItems(function (items) { return __spreadArray(__spreadArray([], items, true), [item], false); });
+                    _f.label = 1;
+                case 1:
+                    _f.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, process(item)];
+                case 2:
+                    _f.sent();
+                    if ((_a = stateRef.current) === null || _a === void 0 ? void 0 : _a.canceledItems.includes(item)) {
+                        setCanceledItems(function (items) { return items.filter(function (i) { return i !== item; }); });
+                        return [2 /*return*/];
+                    }
+                    if ((_b = stateRef.current) === null || _b === void 0 ? void 0 : _b.options.onItemComplete) {
+                        stateRef.current.options.onItemComplete(item);
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_1 = _f.sent();
+                    if ((_c = stateRef.current) === null || _c === void 0 ? void 0 : _c.canceledItems.includes(item)) {
+                        setCanceledItems(function (items) { return items.filter(function (i) { return i !== item; }); });
+                        return [2 /*return*/];
+                    }
+                    if ((_d = stateRef.current) === null || _d === void 0 ? void 0 : _d.options.storeFailedItems) {
+                        setFailedItems(function (items) { return __spreadArray(__spreadArray([], items, true), [{ error: error_1, item: item }], false); });
+                    }
+                    if ((_e = stateRef.current) === null || _e === void 0 ? void 0 : _e.options.onItemFail) {
+                        stateRef.current.options.onItemFail(item);
+                    }
+                    return [3 /*break*/, 5];
+                case 4:
+                    setProcessedItems(function (items) { return items.filter(function (i) { return i !== item; }); });
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [process]);
+    var shiftQueue = (0, react_1.useCallback)(function () {
+        if (stateRef.current) {
+            if (stateRef.current.itemsOnHold.length === 0) {
+                return;
+            }
+            var numberOfItemsToShift = stateRef.current.options.maxProcessingItems === undefined
+                ? stateRef.current.itemsOnHold.length
+                : Math.min(stateRef.current.options.maxProcessingItems - stateRef.current.processedItems.length, stateRef.current.itemsOnHold.length);
+            if (numberOfItemsToShift === 0) {
+                return;
+            }
+            var itemsToShift_1 = stateRef.current.itemsOnHold.slice(0, numberOfItemsToShift);
+            itemsToShift_1.forEach(function (item) {
+                processItem(item)
+                    .catch(function () { })
+                    .finally(function () { return shiftQueue(); });
+            });
+            setItemsOnHold(function (items) { return items.filter(function (item) { return !itemsToShift_1.includes(item); }); });
+        }
+    }, [processItem]);
+    var push = (0, react_1.useCallback)(function (item) {
+        if (options.maxItems !== undefined &&
+            processedItems.length + itemsOnHold.length >= options.maxItems) {
+            throw new Error('Queue is full.');
+        }
+        setTotalItems(function (total) { return total + 1; });
+        if (options.maxProcessingItems !== undefined &&
+            processedItems.length >= options.maxProcessingItems) {
+            setItemsOnHold(function (items) { return __spreadArray(__spreadArray([], items, true), [item], false); });
+            return;
+        }
+        processItem(item)
+            .catch(function () { })
+            .finally(function () { return shiftQueue(); });
+    }, [
+        options.maxItems,
+        processedItems.length,
+        itemsOnHold.length,
+        options.maxProcessingItems,
+        processItem,
+        shiftQueue,
+    ]);
+    return {
+        length: processedItems.length + itemsOnHold.length,
+        processingCount: processedItems.length,
+        onHoldCount: itemsOnHold.length,
+        totalItems: totalItems,
+        isFull: options.maxItems !== undefined &&
+            processedItems.length + itemsOnHold.length >= options.maxItems,
+        isAtMaxProcessing: options.maxProcessingItems !== undefined &&
+            processedItems.length >= options.maxProcessingItems,
+        push: push,
+        failedItems: failedItems,
+        clearFailedItems: clearFailedItems,
+        clear: clear,
+    };
+}
+exports.useQueue = useQueue;
+//# sourceMappingURL=useQueue.js.map

package/lib/hooks/useQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQueue.js","sourceRoot":"","sources":["../../src/hooks/useQueue.ts"],"names":[],"mappings":"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"}

package/lib/hooks/useResponsiveStyle.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+import { ResponsiveStyleProperties } from '@monkvision/types';
+/**
+ * Custom hook used to render the given style only when its media query confitions are met.
+ *
+ * @example
+ * import { useResponsiveStyle } from '@monkvision/common';
+ * import { Styles } from '@monkvision/types';
+ *
+ * const styles: Styles = {
+ *   div: {
+ *     width: 100,
+ *     height: 100,
+ *   },
+ *   divMobile: {
+ *     __media: { maxWidth: 500 },
+ *     backgroundColor: '#ff0000',
+ *   },
+ * };
+ *
+ * function TestComponent() {
+ *   const { responsive } = useResponsiveStyle();
+ *   return <div style={{...styles.div, ...responsive(styles.divMobile)}}>Hello</div>
+ * }
+ */
+export declare function useResponsiveStyle(): {
+    responsive: (style: ResponsiveStyleProperties | null) => CSSProperties | null;
+};

package/lib/hooks/useResponsiveStyle.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveStyle = void 0;
+var react_1 = require("react");
+var useWindowDimensions_1 = require("./useWindowDimensions");
+function areQueryConditionsMet(query, dimensions) {
+    if (!query) {
+        return true;
+    }
+    if (query.maxWidth !== undefined && dimensions.width > query.maxWidth) {
+        return false;
+    }
+    if (query.minWidth !== undefined && dimensions.width < query.minWidth) {
+        return false;
+    }
+    if (query.maxHeight !== undefined && dimensions.height > query.maxHeight) {
+        return false;
+    }
+    if (query.minHeight !== undefined && dimensions.height < query.minHeight) {
+        return false;
+    }
+    if (query.portrait !== undefined && dimensions.isPortrait !== query.portrait) {
+        return false;
+    }
+    if (query.landscape !== undefined && dimensions.isPortrait !== !query.landscape) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Custom hook used to render the given style only when its media query confitions are met.
+ *
+ * @example
+ * import { useResponsiveStyle } from '@monkvision/common';
+ * import { Styles } from '@monkvision/types';
+ *
+ * const styles: Styles = {
+ *   div: {
+ *     width: 100,
+ *     height: 100,
+ *   },
+ *   divMobile: {
+ *     __media: { maxWidth: 500 },
+ *     backgroundColor: '#ff0000',
+ *   },
+ * };
+ *
+ * function TestComponent() {
+ *   const { responsive } = useResponsiveStyle();
+ *   return <div style={{...styles.div, ...responsive(styles.divMobile)}}>Hello</div>
+ * }
+ */
+function useResponsiveStyle() {
+    var dimensions = (0, useWindowDimensions_1.useWindowDimensions)();
+    var responsive = (0, react_1.useCallback)(function (style) {
+        if (areQueryConditionsMet(style === null || style === void 0 ? void 0 : style.__media, dimensions)) {
+            return style;
+        }
+        return null;
+    }, [dimensions]);
+    return { responsive: responsive };
+}
+exports.useResponsiveStyle = useResponsiveStyle;
+//# sourceMappingURL=useResponsiveStyle.js.map

package/lib/hooks/useResponsiveStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveStyle.js","sourceRoot":"","sources":["../../src/hooks/useResponsiveStyle.ts"],"names":[],"mappings":";;;AAAA,+BAAmD;AAEnD,6DAA8E;AAE9E,SAAS,qBAAqB,CAC5B,KAA2C,EAC3C,UAA4B;IAE5B,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IACD,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;QACrE,OAAO,KAAK,CAAC;KACd;IACD,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;QACrE,OAAO,KAAK,CAAC;KACd;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE;QACxE,OAAO,KAAK,CAAC;KACd;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE;QACxE,OAAO,KAAK,CAAC;KACd;IACD,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,UAAU,CAAC,UAAU,KAAK,KAAK,CAAC,QAAQ,EAAE;QAC5E,OAAO,KAAK,CAAC;KACd;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,UAAU,CAAC,UAAU,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE;QAC/E,OAAO,KAAK,CAAC;KACd;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,SAAgB,kBAAkB;IAGhC,IAAM,UAAU,GAAG,IAAA,yCAAmB,GAAE,CAAC;IACzC,IAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,UAAC,KAAuC;QACtC,IAAI,qBAAqB,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAE,UAAU,CAAC,EAAE;YACrD,OAAO,KAAK,CAAC;SACd;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,EAAE,UAAU,YAAA,EAAE,CAAC;AACxB,CAAC;AAfD,gDAeC"}

package/lib/hooks/useSearchParams.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Custom hook used to fetch search params from the current window URL.
+ */
+export declare function useSearchParams(): URLSearchParams;

package/lib/hooks/useSearchParams.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchParams = void 0;
+var react_1 = require("react");
+/**
+ * Custom hook used to fetch search params from the current window URL.
+ */
+function useSearchParams() {
+    return (0, react_1.useMemo)(function () { return new URL(window.location.toString()).searchParams; }, []);
+}
+exports.useSearchParams = useSearchParams;
+//# sourceMappingURL=useSearchParams.js.map