@bigbinary/neeto-commons-frontend 2.0.99 → 2.0.100

package/cypress-utils.d.ts

@@ -239,7 +239,7 @@ export function initializeCredentials(props: {
  *
  * This function joins the given strings with hyphen.
  *
- * Usage:
+ * Any number of string arguments.
  *
  * @example 
  *

package/initializers.d.ts

@@ -74,5 +74,17 @@ export const globalProps: GlobalPropsType;
  *
  * for more details.
  *
+ * @example 
+ *
+ * const App = () => {
+ *   const isError = useDisplayErrorPage();
+ * 
+ *   if (isError) {
+ *     return <ErrorPage />;
+ *   }
+ * 
+ *   return <Main />;
+ * };
+ * @endexample
 */
 export function useDisplayErrorPage(): Boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "2.0.99",
+  "version": "2.0.100",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/pure.d.ts

@@ -14,7 +14,7 @@ type MatchPattern<Obj = any, Parent = Obj> = Obj extends any[] ? Matchable<Obj,
  *
  * Failsafe status: alternative available
  *
- * Converts camelCase to snake_case.
+ * Converts camelCase string to snake_case.
  *
  * @example 
  *
@@ -50,24 +50,6 @@ export function _capitalize(string: NilOr<string>): NilOr<string>;
  *
  * keys in the resulting array.
  *
- * A function that accepts an input array and returns a new array with elements
- *
- * such that: each element will contain the newly specified keys with its value
- *
- * same as the value of specified source keys.
- *
- * Usage:
- *
- * @example 
- *
- * copyKeys({
- *   sourceKey1: "destinationKey1",
- *   sourceKey2: "destinationKey2",
- *   ...
- * }, arrayOfObjects);
- * @endexample
- * Example:
- *
  * @example 
  *
  * const data = [
@@ -99,24 +81,6 @@ export function copyKeys<T>(keyMap: { [key in keyof Partial<T>]: string }, objec
  *
  * keys in the resulting array.
  *
- * A function that accepts an input array and returns a new array with elements
- *
- * such that: each element will contain the newly specified keys with its value
- *
- * same as the value of specified source keys.
- *
- * Usage:
- *
- * @example 
- *
- * copyKeys({
- *   sourceKey1: "destinationKey1",
- *   sourceKey2: "destinationKey2",
- *   ...
- * }, arrayOfObjects);
- * @endexample
- * Example:
- *
  * @example 
  *
  * const data = [
@@ -158,29 +122,6 @@ export function _copyKeys(keyMap: {
  *
  * has a different structure for the key mapping to support nesting.
  *
- * They key mapping object is completely different from the one used in copyKeys
- *
- * to support object nesting. It accepts destination as key and source as value.
- *
- * Source can be of three types
- *
- * Usage:
- *
- * @example 
- *
- * copyKeysDeep({
- *   destinationKey: "sourceKey",
- *   {
- *     destinationKey: "sourceKeyInNestedObject",
- *   },
- *   {
- *     destinationKey2: ["path", "to", "sourceKeyInNestedObject"],
- *     destinationKey3: (value, root) => value + root.id,
- *   }
- * }, arrayOfObjects);
- * @endexample
- * Example:
- *
  * @example 
  *
  * const data = [
@@ -201,7 +142,7 @@ export function _copyKeys(keyMap: {
  * ];
  * 
  * // reformatting `data` to label-and-value format for neetoui-select.
- * copyKeys(
+ * copyKeysDeep(
  *   {
  *     name: "label",
  *     quantity: (qty, root) => qty + root.user.bonusQty,
@@ -243,29 +184,6 @@ export function copyKeysDeep(keyMap: object, objectArray: object[]): object[];
  *
  * has a different structure for the key mapping to support nesting.
  *
- * They key mapping object is completely different from the one used in copyKeys
- *
- * to support object nesting. It accepts destination as key and source as value.
- *
- * Source can be of three types
- *
- * Usage:
- *
- * @example 
- *
- * copyKeysDeep({
- *   destinationKey: "sourceKey",
- *   {
- *     destinationKey: "sourceKeyInNestedObject",
- *   },
- *   {
- *     destinationKey2: ["path", "to", "sourceKeyInNestedObject"],
- *     destinationKey3: (value, root) => value + root.id,
- *   }
- * }, arrayOfObjects);
- * @endexample
- * Example:
- *
  * @example 
  *
  * const data = [
@@ -286,7 +204,7 @@ export function copyKeysDeep(keyMap: object, objectArray: object[]): object[];
  * ];
  * 
  * // reformatting `data` to label-and-value format for neetoui-select.
- * copyKeys(
+ * copyKeysDeep(
  *   {
  *     name: "label",
  *     quantity: (qty, root) => qty + root.user.bonusQty,
@@ -328,8 +246,6 @@ export function _copyKeysDeep(keyMap: object): (objectArray: NilOr<object[]>) =>
  *
  * Counts an array of items for items that matches the given pattern.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -353,8 +269,6 @@ export function countBy<T>(pattern: MatchPattern<T>, entityArray: T[]): number;
  *
  * Counts an array of items for items that matches the given pattern.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -378,11 +292,7 @@ export function _countBy(pattern: MatchPattern): (entityArray: NilOr<object[]>)
  *
  * Failsafe status: failsafe by default
  *
- * To make an object immutable, recursively freeze each property which is of type
- *
- * object.
- *
- * Usage:
+ * To make an object immutable, recursively freeze each property which is of type object.
  *
  * @example 
  *
@@ -404,9 +314,7 @@ export function _countBy(pattern: MatchPattern): (entityArray: NilOr<object[]>)
  * };
  * 
  * @endexample
- * The assignment operation will throw the error only when we execute it in strict
- *
- * mode, in non-strict mode it will fail silently.
+ * The assignment operation will throw the error only when we execute it in strict mode, in non-strict mode it will fail silently.
  *
  * @example 
  *
@@ -434,8 +342,6 @@ export function deepFreezeObject<T>(object: T): Readonly<T>;
  *
  * corresponding to that index.
  *
- * Usage:
- *
  * @example 
  *
  * dynamicArray(3, index => `option ${index + 1}`);
@@ -454,8 +360,6 @@ export function dynamicArray<T>(count: number, elementGenerator: (index: number)
  *
  * found, false otherwise.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -478,8 +382,6 @@ export function existsBy<T>(pattern: MatchPattern<T>, entityArray: T[]): boolean
  *
  * found, false otherwise.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -502,8 +404,6 @@ export function _existsBy(pattern: MatchPattern): (entityArray: NilOr<object[]>)
  *
  * Search for an item in the given array using the given id.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -524,8 +424,6 @@ export function existsById(id: any, entityArray: object[]): boolean;
  *
  * Search for an item in the given array using the given id.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -548,8 +446,6 @@ export function _existsById(id: any): (entityArray: NilOr<object[]>) => NilOr<bo
  *
  * Filter an array of items based on pattern matching.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -573,8 +469,6 @@ export function filterBy<T>(pattern: MatchPattern<T>, entityArray: T[]): T[];
  *
  * Filter an array of items based on pattern matching.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -628,8 +522,6 @@ export function _filterNonNull(object: NilOr<object>): NilOr<object>;
  *
  * Find the first item that matches the given pattern from an array.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -651,8 +543,6 @@ export function findBy<T>(pattern: MatchPattern<T>, entityArray: T[]): T;
  *
  * Find the first item that matches the given pattern from an array.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -676,8 +566,6 @@ export function _findBy(pattern: MatchPattern): <T>(entityArray: NilOr<T[]>) =>
  *
  * Find an object having the given id from an array.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -699,8 +587,6 @@ export function findById<T>(id: any, entityArray: T[]): T;
  *
  * Find an object having the given id from an array.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -724,8 +610,6 @@ export function _findById(id: any): <T>(entityArray: NilOr<T[]>) => NilOr<T>;
  *
  * Find the index of an item that matches the pattern from the given array.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -747,8 +631,6 @@ export function findIndexBy<T>(pattern: MatchPattern<T>, entityArray: T[]): numb
  *
  * Find the index of an item that matches the pattern from the given array.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -774,8 +656,6 @@ export function _findIndexBy(pattern: MatchPattern): (entityArray: NilOr<object[
  *
  * entities inside it.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -799,8 +679,6 @@ export function findIndexById(id: any, entityArray: object[]): number;
  *
  * entities inside it.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -824,8 +702,6 @@ export function _findIndexById(id: any): (entityArray: NilOr<object[]>) => NilOr
  *
  * Find the last item that matches the given pattern.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -848,8 +724,6 @@ export function findLastBy<T>(pattern: MatchPattern<T>, entityArray: T[]): T;
  *
  * Find the last item that matches the given pattern.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -874,8 +748,6 @@ export function _findLastBy(pattern: MatchPattern): <T>(entityArray: NilOr<T[]>)
  *
  * Find the last index of item that matches the given pattern.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -898,8 +770,6 @@ export function findLastIndexBy(id: any, entityArray: object[]): number;
  *
  * Find the last index of item that matches the given pattern.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -922,9 +792,7 @@ export function _findLastIndexBy(id: any): (entityArray: NilOr<object[]>) => Nil
  *
  * Failsafe status: not failsafe
  *
- * This function is used to generate a random integer.
- *
- * Here are some sample usages:
+ * This function is used to generate a random integer in the given range. If only 1 argument is provided, it is considered as the upper bound.
  *
  * @example 
  *
@@ -966,6 +834,12 @@ export function isNot(a: any): (b: any) => boolean;
  *
  * objects). False otherwise. (the opposite of isEmpty in ramda)
  *
+ * @example 
+ *
+ * isNotEmpty(""); // returns false
+ * isNotEmpty(["a"]); // returns true
+ * isNotEMpty({ name: "Oliver" }); //return true
+ * @endexample
 */
 export const isNotEmpty: (a: any) => boolean;
 export function isNotEqualDeep(a: any, b: any): boolean;
@@ -978,8 +852,6 @@ export function isNotEqualDeep(a: any): (b: any) => boolean;
  *
  * Recursively converts the snake cased object keys to camel case
  *
- * Usage:
- *
  * @example 
  *
  * keysToCamelCase({
@@ -1005,8 +877,6 @@ export function keysToCamelCase(object: any): any;
  *
  * Recursively converts the camel cased object keys to snake case.
  *
- * Usage:
- *
  * @example 
  *
  * keysToSnakeCase({
@@ -1030,33 +900,7 @@ export function keysToSnakeCase(object: any): any;
  *
  * Failsafe status: failsafe by default
  *
- * Checks whether the given object matches the given pattern. Each primitive value
- *
- * (int, boolean, string, etc.) in the pattern should be same as the corresponding
- *
- * value in the object (deeply) for a match.
- *
- * This function accepts two objects (pattern and data) as parameters and returns
- *
- * true if all the keys in pattern exist in data and the primitive values of those
- *
- * keys are identical to the data. Object values are compared recursively for inner
- *
- * primitives.
- *
- * If a function is passed as pattern's property, and equality test is performed
- *
- * with corresponding object property. If equality fails, the function will be
- *
- * evaluated with the value of the corresponding property of the data. If function
- *
- * returns true, it will be considered as a match.
- *
- * In short, this function checks whether all the primitive keys in the pattern is
- *
- * equal to corresponding keys in the data and all conditions (functions) are
- *
- * satisfied.
+ * Checks whether the given object matches the given pattern. Each primitive value (int, boolean, string, etc.) in the pattern should be same as the corresponding value in the object (deeply) and all conditions (functions) should be satisfied for a match.
  *
  * @example 
  *
@@ -1087,33 +931,7 @@ export function matches<T>(pattern: MatchPattern<T>, data: T): boolean;
  *
  * Failsafe status: failsafe by default
  *
- * Checks whether the given object matches the given pattern. Each primitive value
- *
- * (int, boolean, string, etc.) in the pattern should be same as the corresponding
- *
- * value in the object (deeply) for a match.
- *
- * This function accepts two objects (pattern and data) as parameters and returns
- *
- * true if all the keys in pattern exist in data and the primitive values of those
- *
- * keys are identical to the data. Object values are compared recursively for inner
- *
- * primitives.
- *
- * If a function is passed as pattern's property, and equality test is performed
- *
- * with corresponding object property. If equality fails, the function will be
- *
- * evaluated with the value of the corresponding property of the data. If function
- *
- * returns true, it will be considered as a match.
- *
- * In short, this function checks whether all the primitive keys in the pattern is
- *
- * equal to corresponding keys in the data and all conditions (functions) are
- *
- * satisfied.
+ * Checks whether the given object matches the given pattern. Each primitive value (int, boolean, string, etc.) in the pattern should be same as the corresponding value in the object (deeply) and all conditions (functions) should be satisfied for a match.
  *
  * @example 
  *
@@ -1148,8 +966,6 @@ export function matches(pattern: MatchPattern): (data: any) => boolean;
  *
  * argument to the function.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1175,8 +991,6 @@ export function modifyBy<T>(pattern: MatchPattern<T>, modifier: (previous: T) =>
  *
  * argument to the function.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1202,8 +1016,6 @@ export function modifyBy<T>(pattern: MatchPattern<T>, modifier: (previous: T) =>
  *
  * argument to the function.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1229,8 +1041,6 @@ export function modifyBy(pattern: MatchPattern): <T>(modifier: (previous: T) =>
  *
  * argument to the function.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1262,8 +1072,6 @@ export function _modifyBy(pattern: MatchPattern): <T>(modifier: (previous: T) =>
  *
  * of the match.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1292,8 +1100,6 @@ export function modifyById<T>(id: any, modifier: (previous: T) => T, entityArray
  *
  * of the match.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1322,8 +1128,6 @@ export function modifyById<T>(id: any, modifier: (previous: T) => T): (entityArr
  *
  * of the match.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1352,8 +1156,6 @@ export function modifyById(id: any): <T>(modifier: (previous: T) => T, entityArr
  *
  * of the match.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1398,8 +1200,6 @@ export function notEqualsDeep(a: any): (b: any) => boolean;
  *
  * element from the list of arguments.
  *
- * Usage:
- *
  * @example 
  *
  * randomPick("arg1", "arg2", "arg3", "arg4", "arg5");
@@ -1416,8 +1216,6 @@ export function randomPick<T>(...args: T[]): T;
  *
  * Remove all items that matches the given pattern from an array of items.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1439,8 +1237,6 @@ export function removeBy<T>(pattern: MatchPattern<T>, entityArray: T[]): T[];
  *
  * Remove all items that matches the given pattern from an array of items.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1464,8 +1260,6 @@ export function _removeBy(pattern: MatchPattern): <T>(entityArray: NilOr<T[]>) =
  *
  * Return a new array with the item with the given id removed.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1487,8 +1281,6 @@ export function removeById<T>(id: any, entityArray: T[]): T[];
  *
  * Return a new array with the item with the given id removed.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1514,26 +1306,6 @@ export function _removeById(id: any): <T>(entityArray: NilOr<T[]>) => NilOr<T[]>
  *
  * array. This creates a new instance and doesn't mutate the array.
  *
- * A function that accepts an input array and returns a new array with elements
- *
- * such that: each element will contain the newly specified keys with its value
- *
- * pointing to the value of specified source keys. The source keys will not be
- *
- * copied.
- *
- * Usage:
- *
- * @example 
- *
- * renameKeys({
- *   sourceKey1: "destinationKey1",
- *   sourceKey2: "destinationKey2",
- *   ...
- * }, arrayOfObjects);
- * @endexample
- * Example:
- *
  * @example 
  *
  * const data = [
@@ -1565,26 +1337,6 @@ export function renameKeys<T, M extends { [key in keyof Partial<T>]: string }>(k
  *
  * array. This creates a new instance and doesn't mutate the array.
  *
- * A function that accepts an input array and returns a new array with elements
- *
- * such that: each element will contain the newly specified keys with its value
- *
- * pointing to the value of specified source keys. The source keys will not be
- *
- * copied.
- *
- * Usage:
- *
- * @example 
- *
- * renameKeys({
- *   sourceKey1: "destinationKey1",
- *   sourceKey2: "destinationKey2",
- *   ...
- * }, arrayOfObjects);
- * @endexample
- * Example:
- *
  * @example 
  *
  * const data = [
@@ -1624,8 +1376,6 @@ export function _renameKeys<M extends {
  *
  * Replace all items that matches the given pattern with the given item.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1649,8 +1399,6 @@ export function replaceBy<T>(pattern: MatchPattern<T>, entityArray: T[]): T[];
  *
  * Replace all items that matches the given pattern with the given item.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1678,8 +1426,6 @@ export function _replaceBy(pattern: MatchPattern): <T>(entityArray: NilOr<T[]>)
  *
  * object.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1706,8 +1452,6 @@ export function replaceById<T>(id: any, entityArray: T[]): T[];
  *
  * object.
  *
- * Usage:
- *
  * @example 
  *
  * const array = [
@@ -1732,15 +1476,9 @@ export function _replaceById(id: any): <T>(entityArray: NilOr<T[]>) => NilOr<T[]
  *
  * Failsafe status: failsafe by default
  *
- * Recursively converts the camel cased object keys to snake case. It will
- *
- * gracefully handle special objects like Date, dayjs instance etc.
- *
- * While converting, this function checks if the function named toJSON is present
+ * Recursively converts the camel cased object keys to snake case. It will gracefully handle special objects like Date, dayjs instance etc.
  *
- * in the value (if the value is an object) and if found, it calls the function and
- *
- * uses the return value for further processing.
+ * While converting, this function checks if the function named toJSON is present in the value (if the value is an object) and if found, it calls the function and uses the return value for further processing.
  *
  * Example 1:
  *
@@ -1778,13 +1516,7 @@ export function _replaceById(id: any): <T>(entityArray: NilOr<T[]>) => NilOr<T[]
  * }
  * 
  * @endexample
- * In the above example, the value of dob is an date object and has toJSON
- *
- * method present in it. The toJSON method returns the date in ISO format which
- *
- * will be used for further processing instead of recursively converting the
- *
- * original date object.
+ * In the above example, the value of dob is an date object and has toJSON method present in it. The toJSON method returns the date in ISO format which will be used for further processing instead of recursively converting the original date object.
  *
 */
 export function serializeKeysToSnakeCase(object: object): object;
@@ -1802,8 +1534,6 @@ export function serializeKeysToSnakeCase(object: object): object;
  *
  * This is helpful when serializing Date objects, dayjs objects etc.
  *
- * Usage:
- *
  * @example 
  *
  * preprocessForSerialization(dayjs("1980-01-01")); // returns "1980-01-01T00:00:00.000Z"
@@ -1838,7 +1568,7 @@ export function _slugify(string: NilOr<string>): NilOr<string>;
  *
  * Failsafe status: alternative available
  *
- * Converts snake_case to camelCase.
+ * Converts snake_case string to camelCase.
  *
  * @example 
  *
@@ -1857,8 +1587,6 @@ export function _snakeToCamelCase(string: NilOr<string>): NilOr<string>;
  *
  * "label" and "value".
  *
- * Usage:
- *
  * @example 
  *
  * toLabelAndValue("test");
@@ -1876,18 +1604,12 @@ export function toLabelAndValue(string: string): {
  *
  * Failsafe status: failsafe by default
  *
- * Passes each key and value of a the given object (recursively) to the given
+ * Passes each key and value of the given object (recursively) to the given
  *
  * transformer function. Reconstructs an object of the same hierarchy with the key
  *
  * value pair the transformer function returns.
  *
- * You can optionally pass an object transformer which will be executed on every
- *
- * value (including the supplied object itself) before any processing is done to
- *
- * it.
- *
  * Usage:
  *
  * @example 

package/react-utils.d.ts

@@ -93,20 +93,6 @@ type OptionsType = {
  *
  * on the screen.
  *
- * This hook will accept two arguments an element and an options object. Passing an
- *
- * element using ref requires you to pass ref.current as an argument or pass an
- *
- * element that you accessed via getElementById/querySelector etc. Since it uses
- *
- * Intersection Observer API you can pass observer options such as root,
- *
- * rootMargin, threshold, etc as the second argument. You can read more about
- *
- * Intersection Observer API and the supported options from
- *
- * MDN Intersection Observer API.
- *
  * @example 
  *
  * const ref = useRef(null);
@@ -133,9 +119,7 @@ export function useIsElementVisibleInDom(target: Element | null, options?: Optio
  *
  * until the updates are stopped. We can use this to limit the number of API calls
  *
- * triggered from a user input like search box.
- *
- * This hook accepts a value and a delay as an argument. The value returned by the
+ * triggered from a user input like search box. The value returned by the
  *
  * hook will only reflect the latest value when the hook has not been called for
  *
@@ -162,9 +146,7 @@ export function useDebounce<T>(value: T, delay?: number): T;
  *
  * function will be executed only when the dependencies stops changing for a while.
  *
- * This hook accepts a function as an argument. It will return a debounced version
- *
- * of that function. The debounced function comes with a cancel method which can
+ * The debounced function comes with a cancel method which can
  *
  * be used to cancel the delayed function invocation.
  *
@@ -196,12 +178,6 @@ export function useFuncDebounce<F extends Function>(func: F, delay?: number): F
  *
  * operations on the localStorage, prefer the vanilla localStorage API functions.
  *
- * This hook is very similar to useState. The only difference is that you must
- *
- * pass the storage key in the 1st parameter so that we can default to that value
- *
- * on page load instead of specified initial value.
- *
  * @example 
  *
  * // here "theme" is the storage key and "light" is the initial value
@@ -228,12 +204,6 @@ export function useLocalStorage<T>(key: string, initialValue?: T): [T, (value: T
  *
  * A hook used to detect clicks outside of a specified element.
  *
- * This hook will accept two arguments: a ref and a handler. The ref is a reference
- *
- * to the element for which we want to detect outside clicks and handler is the
- *
- * action we want to perform when we click outside the element.
- *
  * @example 
  *
  * const ref = useRef();
@@ -278,6 +248,12 @@ export function usePrevious<T>(value: T): T;
  *
  * if the dependencies change.
  *
+ * @example 
+ *
+ * useUpdateEffect(() => {
+ *   setTitle(value)
+ * }, [value]);
+ * @endexample
 */
 export function useUpdateEffect(effect: () => void, deps: any[]): void;
 /**
@@ -292,6 +268,18 @@ export function useUpdateEffect(effect: () => void, deps: any[]): void;
  *
  * for more details.
  *
+ * @example 
+ *
+ * const App = () => {
+ *   const isError = useDisplayErrorPage();
+ * 
+ *   if (isError) {
+ *     return <ErrorPage />;
+ *   }
+ * 
+ *   return <Main />;
+ * };
+ * @endexample
 */
 export function useDisplayErrorPage(): boolean;
 /**
@@ -325,12 +313,6 @@ type TimerType = {
  *
  * application to be manually refreshed.
  *
- * This hook accepts a single argument timerIntervalInSeconds, which is the
- *
- * number of seconds after which the component will re-render. The default value is
- *
- * 60 seconds.
- *
  * All invocations of useTimer hooks are attached to a single setInterval call
  *
  * which ticks every 1 second. So using that hook in multiple components won't
@@ -362,8 +344,6 @@ type ZustandConfigType = (set: (data: any) => void, get: () => any, api: any) =>
  *
  * overwritten.
  *
- * Usage:
- *
  * @example 
  *
  * const useStore = create(
@@ -414,15 +394,9 @@ export declare type ZustandStoreHook = UseBoundStore<StoreApi<any>> & {
  *
  * will not submit when Shift + Enter is pressed. Shift + Enter can be used to
  *
- * add new lines to text area in the form.
- *
- * The hook accepts a callback, onSubmit, which will be called with no arguments
- *
- * when Enter key press is detected.
+ * add new lines to text area in the form. The hook returns a ref. This need to be
  *
- * The hook returns a ref. This need to be attached to the input element to be
- *
- * listened to.
+ * attached to the input element to be listened to.
  *
  * @example 
  *
@@ -460,6 +434,8 @@ export function withTitle(Component: () => JSX.Element, title?: string): (props)
  *
  * send notifications and then register the browser with the notification service.
  *
+ * The VAPID public key.
+ *
  * After the user logs in, we need to ask the user permissions to send
  *
  * notifications and then register the browser with the notification service.
@@ -550,14 +526,12 @@ export async function destroyBrowserSubscription(): Promise<void>;
  *
  * This function can be used to handle onClick actions that redirects to a URL.
  *
- * It opens up the URL in a new tab if ctrl/cmd + click event is recieved.
+ * It opens up the URL in a new tab if ctrl/cmd + click event is received.
  *
  * Otherwise, simply redirects to the provided URL in the same tab. URL can be
  *
  * passed as string or a history location object can be passed instead.
  *
- * Usage:
- *
  * @example 
  *
  * handleMetaClick(history, "/dashboard", e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise simply redirects to "/dashboard".
@@ -571,14 +545,12 @@ export function handleMetaClick(history: History, params: string | object, event
  *
  * This function can be used to handle onClick actions that redirects to a URL.
  *
- * It opens up the URL in a new tab if ctrl/cmd + click event is recieved.
+ * It opens up the URL in a new tab if ctrl/cmd + click event is received.
  *
  * Otherwise, simply redirects to the provided URL in the same tab. URL can be
  *
  * passed as string or a history location object can be passed instead.
  *
- * Usage:
- *
  * @example 
  *
  * handleMetaClick(history, "/dashboard", e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise simply redirects to "/dashboard".
@@ -592,14 +564,12 @@ export function handleMetaClick(history: History, params: string | object): (eve
  *
  * This function can be used to handle onClick actions that redirects to a URL.
  *
- * It opens up the URL in a new tab if ctrl/cmd + click event is recieved.
+ * It opens up the URL in a new tab if ctrl/cmd + click event is received.
  *
  * Otherwise, simply redirects to the provided URL in the same tab. URL can be
  *
  * passed as string or a history location object can be passed instead.
  *
- * Usage:
- *
  * @example 
  *
  * handleMetaClick(history, "/dashboard", e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise simply redirects to "/dashboard".
@@ -615,8 +585,6 @@ export function handleMetaClick(history: History): (params: string | object, eve
  *
  * ctrlKey pressed.
  *
- * Usage:
- *
  * @example 
  *
  * isMetaKeyPressed(event); //returns true if "event.metaKey || event.ctrlKey" is true, otherwise returns false.
@@ -636,8 +604,6 @@ type ConfigType = {
  *
  * corresponding handler will be invoked.
  *
- * This hook accepts 3 arguments hotkey, handler & config.
- *
  * @example 
  *
  * // openSidebar function will only be called if the user is focused inside the textarea and performs the key combination.
@@ -662,8 +628,6 @@ export function useHotKeys(hotkey: string | string[], handler: (event: React.Key
  *
  * listen to other variable changes.
  *
- * This hook accepts a defaultValue and an optional array called dependencies.
- *
  * If dependencies is passed, the hook returns a state variable whose value will
  *
  * be updated to defaultValue in a useEffect that depends on the dependencies
@@ -713,10 +677,6 @@ export function useRegisterNavigationCheckpoint(): (key: string, path: string) =
  *
  * This hook returns the registered navigation checkpoint.
  *
- * This hook accepts key and will return the checkpoint path corresponding to the
- *
- * key from a Zustand store.
- *
  * @example 
  *
  * const navigationCheckpoint = useRegisterNavigationCheckpoint(CHECK_POINT_KEY);

package/utils.d.ts

@@ -10,8 +10,6 @@ export function resetAuthTokens(): void;
  *
  * event as the second, and executes the given function with event.target.value
  *
- * Usage:
- *
  * @example 
  *
  * const onChange = val => console.log(`Value = ${val}`);
@@ -30,8 +28,6 @@ export function withEventTargetValue(func: (value: string) => void, event: React
  *
  * event as the second, and executes the given function with event.target.value
  *
- * Usage:
- *
  * @example 
  *
  * const onChange = val => console.log(`Value = ${val}`);
@@ -48,8 +44,6 @@ export function withEventTargetValue(func: (value: string) => void): (event: Rea
  *
  * This function returns the subdomain of the current URL.
  *
- * Usage:
- *
  * @example 
  *
  * // Let the current url be "https://spinkart.example.com".
@@ -63,10 +57,6 @@ export function getSubdomain(): string;
  *
  * Curried: false
  *
- * Returns the specified hardcoded data after some delay for simulating an API
- *
- * call.
- *
  * This function will simulate an API call and retrieve the hardcoded success/error
  *
  * responses after some delay based on the given error probability. This function
@@ -85,18 +75,6 @@ export function simulateApiCall<T>(result: T, error?: any, errorProbability?: nu
  *
  * Copies the given string to clipboard and shows a success toaster message.
  *
- * This function accepts a string as an argument and copies it to the clipboard.
- *
- * Also, it accepts two optional arguments: a boolean flag to indicate whether a
- *
- * toaster should be shown and a message to be shown in the toaster. By default the
- *
- * show toaster flag is set to true and the toaster message is set to "Copied to
- *
- * clipboard!". You can override these defaults by passing the appropriate values
- *
- * to the function.
- *
  * @example 
  *
  * copyToClipboard("https://spinkart.example.com", {
@@ -162,12 +140,6 @@ export const dateFormat: typeof timeFormat;
  *
  * locale.
  *
- * The function also accepts options, which will be forwarded to
- *
- * Number.prototype.toLocaleString, which can be used for additional
- *
- * configurations like rounding, currency, units etc.
- *
  * @example 
  *
  * toLocale(1000000); // "1,000,000" when locale is "en-US"
@@ -207,8 +179,6 @@ type QueryParamsType = {
  *
  * This function returns all the query parameters of the current URL as an object.
  *
- * Usage:
- *
  * @example 
  *
  * // Let the current url be "https://example.com?search=something&sort=date".
@@ -224,7 +194,7 @@ export function getQueryParams(options?: qsOptionsType): QueryParamsType;
  *
  * This function joins the given strings with hyphen.
  *
- * Usage:
+ * Any number of string arguments.
  *
  * @example 
  *
@@ -240,12 +210,6 @@ export function joinHyphenCase(...args: string[]): string;
  *
  * stated wait time in milliseconds has elapsed since the last time it was invoked.
  *
- * It accepts the function to be debounced as the first argument, the delay in
- *
- * milliseconds as the second argument.
- *
- * Usage:
- *
  * @example 
  *
  * const searchForProducts = debounce(async key => {
@@ -263,8 +227,6 @@ export function debounce<F extends Function>(func: F, delay?: number): F;
  *
  * This function will return true if the current user has the given permission.
  *
- * Usage:
- *
  * @example 
  *
  * hasPermission("user.view_settings");
@@ -279,7 +241,7 @@ export function hasPermission(permission: string): boolean;
  *
  * permissions.
  *
- * Usage:
+ * permissions: Any number of permission strings.
  *
  * @example 
  *
@@ -295,7 +257,7 @@ export function hasAnyPermission(...permissions: string[]): boolean;
  *
  * permissions.
  *
- * Usage:
+ * permissions: Any number of permission strings.
  *
  * @example 
  *
@@ -311,12 +273,10 @@ type ChannelNameWithParams = {
  *
  * Curried: false
  *
- * This function will create subscription were consumer is subscribed to rails
+ * This function will create subscription where consumer is subscribed to rails
  *
  * action cable channel.
  *
- * Usage:
- *
  * @example 
  *
  * const subscription = createSubscription(