@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/utils/README.md

@@ -1,363 +1,363 @@
----
-id: README
-title: Utils
-hide_title: true
-sidebar_label: Utils
----
-
-# Utils
-This package is a set of tools that do not fit to any other package.
-
-You can either import all utils if you use it like this:
-```ts
-import { generateUuid } from '@24i/bigscreen-sdk/utils';
-```
-Or you can import single functions like this:
-```ts
-import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
-```
-
-## Available utils
-- **[addClass](#addClass)** - safely adds class to reference.
-- **[debounce](#debounce)** - debounced function is only executed again after a period of not being called, supports leading, trailing (default) and both executions.
-- **[displayToggler](#displayToggler)** - exports `getDisplayToggler` that allows you to easily show/hide an element with guard preventing unnecessary DOM calls.
-- **[elementUtils](#elementUtils)** - various utils above HTMLElement.
-- **[forceReflow](#forceReflow)** - To force a DOM reflow on given DOM element.
-- **[generateUuid](#generateUuid)** - function to get UUIDv4 according to RFC 4122.
-- **[isMouseUsed](#isMouseUsed)** - **DEPRECATED** moved to `device` package.
-- **[memoryInfo](#memoryInfo)** - two functions that returns currently active segment size and total allocated size of JS heap, in bytes.
-- **[noop](#noop)** - for all your noop needs, keep only 1 reference.
-- **[nTimes](#nTimes)** - for generating n of something (e.g. 4 same elements).
-- **[offsetPosition](#offsetPosition)** - safely sets references transform to translate x/y, uses top/left if transform not supported, allows for forcing top/left or transform mode.
-- **[removeClass](#removeClass)** - safely removes class from reference.
-- **[scaledImage](#scaledImage)** - returns URL for scaledImage.
-- **[stopEvent](#stopEvent)** - calls stopPropagation and preventDefault on provided event.
-- **[timeConstants](#timeConstants)** - exports frequently used time constants.
-- **[timers](#timers)** - functions to simplify work with setTimeout and setInterval.
-- **[counter](#counter)** - exports `createCounter` that allows you to add value to counter till callback is triggered at some point.
-- **[xhr](#xhr)** - provides wrap over `XMLHttpRequest`, with the possibility to repeat the failing request.
-- **[simulateKeyPress](#simulateKeyPress)** - simulate key press in the `keydown` handler.
-- **[keyPressSimulator](#keyPressSimulator)** - simulate key press globally for the specific keys.
-
-### addClass
-Adds a class to the element in the reference.
-
-It takes two params:
-- `element: Reference<HTMLElement>` - ref to element to which to add the class
-- `class: string` - class to add
-
-### debounce
-Debounces the function to prevent too frequent calls.
-
-It takes 2 mandatory and 1 optional param:
-- `func: Function` - function to debounce
-- `debounceTime: number` - time of debounce in ms
-- `{ leading?, trailing? }?: DebounceConfig = { trailing: true }` - setting whether to call on leading or trailing edge
-**Usage**
-```ts
-showVertical = debounce((model: Program) => {
-    // implementation
-}, this.props.verticalDebounceTime);
-
-showHorizontal = debounce((model: Program) => {
-    // implementation
-}, this.props.horizontalDebounceTime);
-
-show(model: Program) {
-    const isVertical = // some condition
-    this.activeDebounce?.cancel();
-    this.activeDebounce = isVertical ? this.showVertical(model) : this.showHorizontal(model);
-}
-```
-
-### displayToggler
-Unifies showing and hiding an element. Has guard to prevent multiple unnecessary DOM calls.
-It is important to correctly set the `initialIsHidden` value and not to change the display class in other ways.
-You can keep calling show/hide multiple times in a row. Classlist will be accessed and edited only once.
-It imports the needed styles for you so you do not need to take care of that in the project.
-```scss
-.display-none {
-    display: none;
-}
-```
-
-It exports 3 values:
-- `DISPLAY_NONE` - string `display-none` (class name)
-- `getDisplayToggler` - setup function with element and initial shown/hide value
-- `IDisplayToggler` - interface returned by `getDisplayToggler`
-
-`getDisplayToggler` takes 1 mandatory and 1 optional param:
-- `element: Reference<HTMLElement>` - element that will be shown/hidden
-- `initialIsHidden?: boolean = false` - initial state of hidden value
-
-And returns `IDisplayToggler` interface with 4 functions:
-- `show: () => void;` - removes `display-none` class
-- `hide: () => void;` - adds `display-none` class
-- `isVisible: () => boolean;` - returns true if the element is visible, false otherwise
-- `isHidden: () => boolean;` - returns true if the element is hidden, false otherwise
-
-### elementUtils
-Various utils for HTMLElement such as visibility tests or element wrapping tests.
-
-### forceReflow
-To force a DOM reflow on given DOM element. It can be needed for transitions
-or other purposes.
-
-It takes 1 param:
-- `elementOrReference: HTMLElement | Reference<HTMLElement>` - DOM element or
-reference to element on which reflow is called.
-
-```ts
-forceReflow(elementRef);
-```
-
-### generateUuid
-Returns an UUIDv4 according to RFC 4122, like ex. "123e4567-e89b-12d3-a456-426614174000".
-
-### isMouseUsed
-**DEPRECATED** moved to `device` package.
-
-### memoryInfo
-It exports 2 function:
-- `getUsedJSHeapSize: () => number;` - The currently active segment of JS heap, in bytes.
-- `getTotalJSHeapSize: () => number;` -  The total allocated heap size, in bytes.
-
-### noop
-No operation function for your needs.
-
-### nTimes
-Maps an array of n empty elements to another array. E.g.:
-```tsx
-const MAX_DIGITS = 5;
-
-<div className="numeri-zapper">
-    {nTimes(MAX_DIGITS, () => <div className="zapper-number">-</div>)}
-</div>
-```
-
-### offsetPosition
-Function to change the position of the element in x, y fashion.
-It automatically uses `transform` if available and if not disabled by the application.
-It also takes into account the language direction and
-automatically flips the x offset for right-to-left cases.
-
-It takes 2 mandatory params and 1 optional:
-- `element: Reference<HTMLElement>` - element which position will be changed
-- `offset: { x?: number | string, y?: number | string }` - position offset
-You can pass either number or `${number}px` to offset and you can set only one of x, y or both.
-- `rtl: boolean = isRtl()` - boolean flag setting text direction defaulting to used language.
-
-It also has 3 namespaced functions for your control:
-- `offsetPosition.usesTransform() => boolean` - returns true if transform is used
-- `offsetPosition.forceTransform() => void` - enforces the use of transform
-- `offsetPosition.forceTopLeft() => void` - enforces the use of top/left properties
-
-### removeClass
-Removes a class from the element in the reference.
-
-It takes 2 params:
-- `element: Reference<HTMLElement>` - ref to element from which to remove the class
-- `class: string` - class to remove
-
-### scaledImage
-Returns the URL for scaled image
-
-It takes 2 required params and 1 optional:
-- `url: string` - the URL of image to scale
-- `dimensions: { height: number; width: number, fit?: 'cover' | 'contain' | 'inside' }` -
-the dimensions of the resulting image, `fit` defaults to `'cover'`
-- `scalingServer` - optional base url of scaling server (defaults to `http://imageresize.24i.com`)
-
-Fit option:
-- `cover` - similar to CSS cover it crops the image to fully cover required area with image data
-- `contain` - it fits the image inside the required frame and then adds transparent areas to fill
-the required size
-- `inside` - it fits the image inside the required frame and returns smaller image. (It does not add
-the transparent sides like `contain` does.)
-
-### stopEvent
-Calls `preventDefault` and `stopPropagation`
-
-It takes 1 param:
-- `event: Event` - event to stop
-
-If you need to stop event immediately, there is also an export `stopEventImmediately` that calls
-`stopImmediatePropagation` as well.
-
-### timeConstants
-```ts
-export const SECONDS_PER_MINUTE = 60;
-export const MINUTES_PER_HALF_HOUR = 30;
-export const MINUTES_PER_HOUR = 60;
-export const HOURS_PER_DAY = 24;
-export const DAYS_PER_WEEK = 7;
-export const SECOND_IN_MS = 1000;
-export const MINUTE_IN_MS = SECOND_IN_MS * SECONDS_PER_MINUTE;
-export const HALF_HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HALF_HOUR;
-export const HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HOUR;
-export const DAY_IN_MS = HOUR_IN_MS * HOURS_PER_DAY;
-```
-
-### timers
-Timers exports three functions: `createTimeout`, `createInterval` and `runAsync`.
-
-#### createTimeout and createInterval
-`createTimeout` and `createInterval` differ only in calling either set/clearTimeout or set/clearInterval.
-Therefore only one is needed to be described. The idea behind these functions is to remove the need
-to handle the work with timeout/interval id in the code by yourself.
-
-They both return the same interface (also exported):
-```ts
-interface TimedFunction {
-    /**
-     * Function to set timeout or interval the same way you would setTimeout or setInterval
-     * @param callbackFn function to call on timeout or every interval
-     * @param timeMs timeout in ms or interval length in ms
-     */
-    set: (callbackFn: () => void, timeMs: number) => void,
-    /**
-     * Function to cancel the timeout or interval
-     */
-    clear: () => void,
-    /**
-     * Function that returns true if the timeout or interval is active.
-     * Timeout: was not yet run && was not cancel (in other words is pending)
-     * Interval: waiting for next run (in other words was set and not cleared)
-     */
-    isActive: () => boolean,
-}
-```
-
-Usual example how you would do it without these utils:
-```ts
-class MyComponent extends Component<Props> {
-    updateIntervalId: number | null = null;
-
-    componentDidMount() {
-        this.updateIntervalId = window.setInterval(this.onInterval, UPDATE_INTERVAL_TIME);
-    }
-
-    componentWillUnmount() {
-        if (this.updateIntervalId !== null) {
-            window.clearInterval(this.updateIntervalId);
-            this.updateIntervalId = null;
-        }
-    }
-}
-```
-now with `createInterval`:
-```ts
-class MyComponent extends Component<Props> {
-    updateInterval = createInterval();
-
-    componentDidMount() {
-        this.updateInterval.set(this.onInterval, UPDATE_INTERVAL_TIME);
-    }
-
-    componentWillUnmount() {
-        this.updateInterval.clear();
-    }
-}
-```
-Sometimes you also extend the timeout before it runs little bit like this:
-```ts
-if (this.debounceTimeoutId) {
-    window.clearTimeout(this.debounceTimeoutId);
-}
-this.debounceTimeoutId = window.setTimeout(this.debouncedFn, DEBOUNCE_TIME);
-```
-with `createTimeout` you can shorten this to:
-```ts
-this.debounceTimeout.set(this.debouncedFn, DEBOUNCE_TIME);
-```
-The clearing of the previous timeout is done for you. The same applies to `createInterval`.
-
-#### runAsync
-
-`runAsync` is just a tiny utility to make code more readable. From time to time, we need to run part
-of the code to run async from the rest. Usually, we do it like this:
-```ts
-window.setTimeout(() => {
-    // code that runs async
-}, 0);
-```
-with `runAsync` we can write it like this:
-```ts
-runAsync(() => {
-    // code that runs async
-});
-```
-The advantage is a clear code that tells you nicely what it does (plus it is slightly shorter).
-
-### counter
-Unify simple functionality of triggering callback after certain value is on or above limit. For example, you need to
-trigger callback after 3 iterations increased by number 1, so you will create counter like this:
-
-```ts
-const counter = createCounter({
-    triggerAt: 3,
-    callback: () => { console.log('All systems nominal') }
-});
-
-counter.add(); // increase counter by default number 1
-counter.add();
-counter.add();
-// All systems nominal
-
-counter.reset();
-counter.add(3); // increase counter by custom number 3
-// All systems nominal
-```
-
-### xhr
-Provides wrap over `XMLHttpRequest`, with the possibility to repeat the failing request.
-Exports two methods: `xhrSend` and `xhrSendRetry`.
-
-#### xhrSend
-Wrap over `XMLHttpRequest`, without the possibility to repeat the failing request.
-
-```ts
-const url = 'http://test.com';
-const options = {
-    method: 'POST',
-    headers: {
-        headerA: 'headerValueA',
-    },
-    body: 'payload data',
-};
-const response = await xhrSend(url, options);
-```
-
-#### xhrSendRetry
-Wraps `xhrSend` function to allow retrying the failing request X times.
-
-```ts
-const url = 'http://test.com';
-const xhrSendOptions = {
-    method: 'POST',
-    headers: {
-        headerA: 'headerValueA',
-    },
-    body: 'payload data',
-};
-const retryConfig = {
-    retry: 2,
-    retryDelay: 10,
-    shouldRetry: (data: ShouldRetryParam) => {
-        const { error, response } = data;
-        if (error) return true;
-        if (!response || !response.ok) return true;
-        return false;
-    },
-};
-const options = { ...xhrSendOptions, retryConfig };
-const response = await xhrSendRetry(url, options);
-```
-
-### keyPressSimulator and simulateKeyPress
-Modifies `keydown` event behavior to be similar to `keypress` and causes triggering `keydown` event only once
-before the key is released. This is because `keypress` event is deprecated and it is not implemented
-with the same behavior on all platforms.
-
-- Use globally for the specific keys with `keyPressSimulator` util.
-- Use locally in the `keydown` handler with `simulateKeyPress` util.
+---
+id: README
+title: Utils
+hide_title: true
+sidebar_label: Utils
+---
+
+# Utils
+This package is a set of tools that do not fit to any other package.
+
+You can either import all utils if you use it like this:
+```ts
+import { generateUuid } from '@24i/bigscreen-sdk/utils';
+```
+Or you can import single functions like this:
+```ts
+import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
+```
+
+## Available utils
+- **[addClass](#addClass)** - safely adds class to reference.
+- **[debounce](#debounce)** - debounced function is only executed again after a period of not being called, supports leading, trailing (default) and both executions.
+- **[displayToggler](#displayToggler)** - exports `getDisplayToggler` that allows you to easily show/hide an element with guard preventing unnecessary DOM calls.
+- **[elementUtils](#elementUtils)** - various utils above HTMLElement.
+- **[forceReflow](#forceReflow)** - To force a DOM reflow on given DOM element.
+- **[generateUuid](#generateUuid)** - function to get UUIDv4 according to RFC 4122.
+- **[isMouseUsed](#isMouseUsed)** - **DEPRECATED** moved to `device` package.
+- **[memoryInfo](#memoryInfo)** - two functions that returns currently active segment size and total allocated size of JS heap, in bytes.
+- **[noop](#noop)** - for all your noop needs, keep only 1 reference.
+- **[nTimes](#nTimes)** - for generating n of something (e.g. 4 same elements).
+- **[offsetPosition](#offsetPosition)** - safely sets references transform to translate x/y, uses top/left if transform not supported, allows for forcing top/left or transform mode.
+- **[removeClass](#removeClass)** - safely removes class from reference.
+- **[scaledImage](#scaledImage)** - returns URL for scaledImage.
+- **[stopEvent](#stopEvent)** - calls stopPropagation and preventDefault on provided event.
+- **[timeConstants](#timeConstants)** - exports frequently used time constants.
+- **[timers](#timers)** - functions to simplify work with setTimeout and setInterval.
+- **[counter](#counter)** - exports `createCounter` that allows you to add value to counter till callback is triggered at some point.
+- **[xhr](#xhr)** - provides wrap over `XMLHttpRequest`, with the possibility to repeat the failing request.
+- **[simulateKeyPress](#simulateKeyPress)** - simulate key press in the `keydown` handler.
+- **[keyPressSimulator](#keyPressSimulator)** - simulate key press globally for the specific keys.
+
+### addClass
+Adds a class to the element in the reference.
+
+It takes two params:
+- `element: Reference<HTMLElement>` - ref to element to which to add the class
+- `class: string` - class to add
+
+### debounce
+Debounces the function to prevent too frequent calls.
+
+It takes 2 mandatory and 1 optional param:
+- `func: Function` - function to debounce
+- `debounceTime: number` - time of debounce in ms
+- `{ leading?, trailing? }?: DebounceConfig = { trailing: true }` - setting whether to call on leading or trailing edge
+**Usage**
+```ts
+showVertical = debounce((model: Program) => {
+    // implementation
+}, this.props.verticalDebounceTime);
+
+showHorizontal = debounce((model: Program) => {
+    // implementation
+}, this.props.horizontalDebounceTime);
+
+show(model: Program) {
+    const isVertical = // some condition
+    this.activeDebounce?.cancel();
+    this.activeDebounce = isVertical ? this.showVertical(model) : this.showHorizontal(model);
+}
+```
+
+### displayToggler
+Unifies showing and hiding an element. Has guard to prevent multiple unnecessary DOM calls.
+It is important to correctly set the `initialIsHidden` value and not to change the display class in other ways.
+You can keep calling show/hide multiple times in a row. Classlist will be accessed and edited only once.
+It imports the needed styles for you so you do not need to take care of that in the project.
+```scss
+.display-none {
+    display: none;
+}
+```
+
+It exports 3 values:
+- `DISPLAY_NONE` - string `display-none` (class name)
+- `getDisplayToggler` - setup function with element and initial shown/hide value
+- `IDisplayToggler` - interface returned by `getDisplayToggler`
+
+`getDisplayToggler` takes 1 mandatory and 1 optional param:
+- `element: Reference<HTMLElement>` - element that will be shown/hidden
+- `initialIsHidden?: boolean = false` - initial state of hidden value
+
+And returns `IDisplayToggler` interface with 4 functions:
+- `show: () => void;` - removes `display-none` class
+- `hide: () => void;` - adds `display-none` class
+- `isVisible: () => boolean;` - returns true if the element is visible, false otherwise
+- `isHidden: () => boolean;` - returns true if the element is hidden, false otherwise
+
+### elementUtils
+Various utils for HTMLElement such as visibility tests or element wrapping tests.
+
+### forceReflow
+To force a DOM reflow on given DOM element. It can be needed for transitions
+or other purposes.
+
+It takes 1 param:
+- `elementOrReference: HTMLElement | Reference<HTMLElement>` - DOM element or
+reference to element on which reflow is called.
+
+```ts
+forceReflow(elementRef);
+```
+
+### generateUuid
+Returns an UUIDv4 according to RFC 4122, like ex. "123e4567-e89b-12d3-a456-426614174000".
+
+### isMouseUsed
+**DEPRECATED** moved to `device` package.
+
+### memoryInfo
+It exports 2 function:
+- `getUsedJSHeapSize: () => number;` - The currently active segment of JS heap, in bytes.
+- `getTotalJSHeapSize: () => number;` -  The total allocated heap size, in bytes.
+
+### noop
+No operation function for your needs.
+
+### nTimes
+Maps an array of n empty elements to another array. E.g.:
+```tsx
+const MAX_DIGITS = 5;
+
+<div className="numeri-zapper">
+    {nTimes(MAX_DIGITS, () => <div className="zapper-number">-</div>)}
+</div>
+```
+
+### offsetPosition
+Function to change the position of the element in x, y fashion.
+It automatically uses `transform` if available and if not disabled by the application.
+It also takes into account the language direction and
+automatically flips the x offset for right-to-left cases.
+
+It takes 2 mandatory params and 1 optional:
+- `element: Reference<HTMLElement>` - element which position will be changed
+- `offset: { x?: number | string, y?: number | string }` - position offset
+You can pass either number or `${number}px` to offset and you can set only one of x, y or both.
+- `rtl: boolean = isRtl()` - boolean flag setting text direction defaulting to used language.
+
+It also has 3 namespaced functions for your control:
+- `offsetPosition.usesTransform() => boolean` - returns true if transform is used
+- `offsetPosition.forceTransform() => void` - enforces the use of transform
+- `offsetPosition.forceTopLeft() => void` - enforces the use of top/left properties
+
+### removeClass
+Removes a class from the element in the reference.
+
+It takes 2 params:
+- `element: Reference<HTMLElement>` - ref to element from which to remove the class
+- `class: string` - class to remove
+
+### scaledImage
+Returns the URL for scaled image
+
+It takes 2 required params and 1 optional:
+- `url: string` - the URL of image to scale
+- `dimensions: { height: number; width: number, fit?: 'cover' | 'contain' | 'inside' }` -
+the dimensions of the resulting image, `fit` defaults to `'cover'`
+- `scalingServer` - optional base url of scaling server (defaults to `http://imageresize.24i.com`)
+
+Fit option:
+- `cover` - similar to CSS cover it crops the image to fully cover required area with image data
+- `contain` - it fits the image inside the required frame and then adds transparent areas to fill
+the required size
+- `inside` - it fits the image inside the required frame and returns smaller image. (It does not add
+the transparent sides like `contain` does.)
+
+### stopEvent
+Calls `preventDefault` and `stopPropagation`
+
+It takes 1 param:
+- `event: Event` - event to stop
+
+If you need to stop event immediately, there is also an export `stopEventImmediately` that calls
+`stopImmediatePropagation` as well.
+
+### timeConstants
+```ts
+export const SECONDS_PER_MINUTE = 60;
+export const MINUTES_PER_HALF_HOUR = 30;
+export const MINUTES_PER_HOUR = 60;
+export const HOURS_PER_DAY = 24;
+export const DAYS_PER_WEEK = 7;
+export const SECOND_IN_MS = 1000;
+export const MINUTE_IN_MS = SECOND_IN_MS * SECONDS_PER_MINUTE;
+export const HALF_HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HALF_HOUR;
+export const HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HOUR;
+export const DAY_IN_MS = HOUR_IN_MS * HOURS_PER_DAY;
+```
+
+### timers
+Timers exports three functions: `createTimeout`, `createInterval` and `runAsync`.
+
+#### createTimeout and createInterval
+`createTimeout` and `createInterval` differ only in calling either set/clearTimeout or set/clearInterval.
+Therefore only one is needed to be described. The idea behind these functions is to remove the need
+to handle the work with timeout/interval id in the code by yourself.
+
+They both return the same interface (also exported):
+```ts
+interface TimedFunction {
+    /**
+     * Function to set timeout or interval the same way you would setTimeout or setInterval
+     * @param callbackFn function to call on timeout or every interval
+     * @param timeMs timeout in ms or interval length in ms
+     */
+    set: (callbackFn: () => void, timeMs: number) => void,
+    /**
+     * Function to cancel the timeout or interval
+     */
+    clear: () => void,
+    /**
+     * Function that returns true if the timeout or interval is active.
+     * Timeout: was not yet run && was not cancel (in other words is pending)
+     * Interval: waiting for next run (in other words was set and not cleared)
+     */
+    isActive: () => boolean,
+}
+```
+
+Usual example how you would do it without these utils:
+```ts
+class MyComponent extends Component<Props> {
+    updateIntervalId: number | null = null;
+
+    componentDidMount() {
+        this.updateIntervalId = window.setInterval(this.onInterval, UPDATE_INTERVAL_TIME);
+    }
+
+    componentWillUnmount() {
+        if (this.updateIntervalId !== null) {
+            window.clearInterval(this.updateIntervalId);
+            this.updateIntervalId = null;
+        }
+    }
+}
+```
+now with `createInterval`:
+```ts
+class MyComponent extends Component<Props> {
+    updateInterval = createInterval();
+
+    componentDidMount() {
+        this.updateInterval.set(this.onInterval, UPDATE_INTERVAL_TIME);
+    }
+
+    componentWillUnmount() {
+        this.updateInterval.clear();
+    }
+}
+```
+Sometimes you also extend the timeout before it runs little bit like this:
+```ts
+if (this.debounceTimeoutId) {
+    window.clearTimeout(this.debounceTimeoutId);
+}
+this.debounceTimeoutId = window.setTimeout(this.debouncedFn, DEBOUNCE_TIME);
+```
+with `createTimeout` you can shorten this to:
+```ts
+this.debounceTimeout.set(this.debouncedFn, DEBOUNCE_TIME);
+```
+The clearing of the previous timeout is done for you. The same applies to `createInterval`.
+
+#### runAsync
+
+`runAsync` is just a tiny utility to make code more readable. From time to time, we need to run part
+of the code to run async from the rest. Usually, we do it like this:
+```ts
+window.setTimeout(() => {
+    // code that runs async
+}, 0);
+```
+with `runAsync` we can write it like this:
+```ts
+runAsync(() => {
+    // code that runs async
+});
+```
+The advantage is a clear code that tells you nicely what it does (plus it is slightly shorter).
+
+### counter
+Unify simple functionality of triggering callback after certain value is on or above limit. For example, you need to
+trigger callback after 3 iterations increased by number 1, so you will create counter like this:
+
+```ts
+const counter = createCounter({
+    triggerAt: 3,
+    callback: () => { console.log('All systems nominal') }
+});
+
+counter.add(); // increase counter by default number 1
+counter.add();
+counter.add();
+// All systems nominal
+
+counter.reset();
+counter.add(3); // increase counter by custom number 3
+// All systems nominal
+```
+
+### xhr
+Provides wrap over `XMLHttpRequest`, with the possibility to repeat the failing request.
+Exports two methods: `xhrSend` and `xhrSendRetry`.
+
+#### xhrSend
+Wrap over `XMLHttpRequest`, without the possibility to repeat the failing request.
+
+```ts
+const url = 'http://test.com';
+const options = {
+    method: 'POST',
+    headers: {
+        headerA: 'headerValueA',
+    },
+    body: 'payload data',
+};
+const response = await xhrSend(url, options);
+```
+
+#### xhrSendRetry
+Wraps `xhrSend` function to allow retrying the failing request X times.
+
+```ts
+const url = 'http://test.com';
+const xhrSendOptions = {
+    method: 'POST',
+    headers: {
+        headerA: 'headerValueA',
+    },
+    body: 'payload data',
+};
+const retryConfig = {
+    retry: 2,
+    retryDelay: 10,
+    shouldRetry: (data: ShouldRetryParam) => {
+        const { error, response } = data;
+        if (error) return true;
+        if (!response || !response.ok) return true;
+        return false;
+    },
+};
+const options = { ...xhrSendOptions, retryConfig };
+const response = await xhrSendRetry(url, options);
+```
+
+### keyPressSimulator and simulateKeyPress
+Modifies `keydown` event behavior to be similar to `keypress` and causes triggering `keydown` event only once
+before the key is released. This is because `keypress` event is deprecated and it is not implemented
+with the same behavior on all platforms.
+
+- Use globally for the specific keys with `keyPressSimulator` util.
+- Use locally in the `keydown` handler with `simulateKeyPress` util.