react-hook-toolkit 1.0.0 → 1.0.3

package/README.md

@@ -116,10 +116,7 @@ Install the package with npm:
 
 - **`useUpdateEffect`**: Executes a side effect on updates after the initial render, skipping the effect during the first render to avoid unnecessary executions.
 
-## Authors
-
-- **Shivaji** : (Sr. React Developer)
-- **Shyamal** : (Sr. React Developer)
+- **`DynamicLoader`**: A Higher-Order Component (HOC) that dynamically loads a React component using `React.lazy()` with `Suspense`, while wrapping it in an `ErrorBoundary` to handle potential errors gracefully. It ensures that the component is loaded only when needed, reducing the initial bundle size and improving performance.
 
 ## License
 

package/dist/hookExecuter/hookExecuter.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license HEXE
+ * Copyright (c) 2020-2024 Shivaji & Collaborators
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+type HookFunction = () => any;
+declare class HEXE {
+    private hs;
+    private ss;
+    constructor();
+    setHook(name: string, hookFunction: HookFunction): this;
+    private putHooks;
+    component(): React.FC;
+    getHook(name: string): any;
+}
+declare const ReactHooksWrapper: React.FC<{}>;
+declare const getHook: (name: string) => any, setHook: (name: string, hookFunction: HookFunction) => HEXE;
+export { ReactHooksWrapper, getHook, setHook };

package/dist/hookExecuter/hookExecuter.js

@@ -0,0 +1,58 @@
+/**
+ * @license HEXE
+ * Copyright (c) 2020-2024 Shivaji & Collaborators
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+var HEXE = /** @class */ (function () {
+    function HEXE() {
+        this.hs = {};
+        this.ss = {};
+        this.setHook = this.setHook.bind(this);
+        this.getHook = this.getHook.bind(this);
+        this.putHooks = this.putHooks.bind(this);
+    }
+    HEXE.prototype.setHook = function (name, hookFunction) {
+        [
+            { value: name, id: 'name', type: 'string' },
+            { value: hookFunction, id: 'hook', type: 'function' },
+        ].forEach(function (_a) {
+            var value = _a.value, id = _a.id, type = _a.type;
+            if (type === 'string' && typeof value !== 'string') {
+                throw new TypeError("\"".concat(id, "\" expected to be of type ").concat(type));
+            }
+            if (type === 'function' && typeof value !== 'function') {
+                throw new TypeError("\"".concat(id, "\" expected to be of type ").concat(type));
+            }
+        });
+        this.hs[name] = {
+            name: name,
+            hook: hookFunction,
+        };
+        return this;
+    };
+    HEXE.prototype.putHooks = function (name, value) {
+        this.ss[name] = value;
+    };
+    HEXE.prototype.component = function () {
+        var _this = this;
+        /* Author: Shivaji & Shyamal */
+        var Component = function () {
+            Object.values(_this.hs).forEach(function (_a) {
+                var name = _a.name, hook = _a.hook;
+                _this.putHooks(name, hook());
+            });
+            return /*#__PURE__*/ React.createElement(React.Fragment, null);
+        };
+        return Component;
+    };
+    HEXE.prototype.getHook = function (name) {
+        return this.ss[name];
+    };
+    return HEXE;
+}());
+var o = new HEXE();
+var ReactHooksWrapper = o.component();
+var getHook = o.getHook, setHook = o.setHook;
+export { ReactHooksWrapper, getHook, setHook };

package/dist/hooks/hooksComp.d.ts

@@ -1,38 +1,9 @@
-import { RefObject } from 'react';
-export declare function useHover<T extends HTMLElement>(): [RefObject<T>, boolean];
-export declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void): void;
-interface IntersectionObserverArgs {
-    root?: Element | null;
-    rootMargin?: string;
-    threshold?: number | number[];
+import { FC } from 'react';
+export declare const DynamicLoader: (Component: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
+interface PropsType {
+    type: string;
+    msg: string;
+    duration?: number;
 }
-export declare function useIntersectionObserver<T extends HTMLElement>(ref: RefObject<T>, { root, rootMargin, threshold }?: IntersectionObserverArgs): boolean;
-export declare function useHoverIntent<T extends HTMLElement>(): [RefObject<T>, boolean];
-export interface DragDropState {
-    isDragging: boolean;
-    isOver: boolean;
-    draggedItemId: string | null;
-    overDropId: string | null;
-}
-export declare const useDragDrop: (onDrop: (dragId: string, dropId: string) => void) => {
-    state: DragDropState;
-    bindDrag: (dragId: string) => {
-        draggable: boolean;
-        onDragStart: (e: React.DragEvent) => void;
-    };
-    bindDrop: (dropId: string) => {
-        onDragOver: (e: React.DragEvent) => void;
-        onDragEnter: (e: React.DragEvent) => void;
-        onDragLeave: (e: React.DragEvent) => void;
-        onDrop: (e: React.DragEvent) => void;
-    };
-};
-export declare function useFocusTrap(ref: React.RefObject<HTMLElement>): void;
-export declare function useFocus<T extends HTMLElement>(): [React.RefObject<T>, boolean];
-interface WindowSize {
-    width: number;
-    height: number;
-}
-export declare function useElementSize<T extends HTMLElement = HTMLDivElement>(): [(node: T | null) => void, WindowSize];
-export declare function useLockBodyScroll(lock?: boolean): void;
-export {};
+declare const AlertMessage: FC<PropsType>;
+export default AlertMessage;

package/dist/hooks/hooksComp.js

@@ -9,204 +9,66 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
-export function useHover() {
-    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var ref = useRef(null);
-    useEffect(function () {
-        var node = ref.current;
-        if (!node)
-            return;
-        var handleMouseOver = function () { return setIsHovered(true); };
-        var handleMouseOut = function () { return setIsHovered(false); };
-        node.addEventListener('mouseover', handleMouseOver);
-        node.addEventListener('mouseout', handleMouseOut);
-        return function () {
-            node.removeEventListener('mouseover', handleMouseOver);
-            node.removeEventListener('mouseout', handleMouseOut);
-        };
-    }, []);
-    return [ref, isHovered];
-}
-export function useOnClickOutside(ref, handler) {
-    useEffect(function () {
-        var listener = function (event) {
-            if (!ref.current || ref.current.contains(event.target))
-                return;
-            handler(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return function () {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref, handler]);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, useRef, Suspense } from 'react';
+import { Box, Alert, AlertTitle, IconButton } from '@mui/material';
+import { Close } from '@mui/icons-material';
+import NProgress from 'nprogress';
+import { ErrorBoundary } from 'react-error-boundary';
+import { promise } from '../utils';
+import { getHook } from '../hookExecuter/hookExecuter';
+function Fallback(_a) {
+    var error = _a.error;
+    return (_jsxs(Box, { sx: { padding: 2 }, children: [process.env.NODE_ENV === 'production' && (_jsxs(Alert, { sx: { py: 0, borderLeft: '2px solid #00abff !important', border: '1px solid #d0cfcf' }, severity: "info", children: [_jsx(AlertTitle, { children: "Page Loading Error" }), "Please check your network connection..."] })), process.env.NODE_ENV !== 'production' && (_jsxs(Alert, { severity: "error", sx: { py: 0, borderTop: '2px solid #791212ad !important', border: '1px solid #d0cfcf' }, children: [_jsx(AlertTitle, { children: "Error" }), error.message] }))] }));
 }
-export function useIntersectionObserver(ref, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.root, root = _c === void 0 ? null : _c, _d = _b.rootMargin, rootMargin = _d === void 0 ? '0px' : _d, _e = _b.threshold, threshold = _e === void 0 ? 0 : _e;
-    var _f = useState(false), isIntersecting = _f[0], setIsIntersecting = _f[1];
-    useEffect(function () {
-        var observer = new IntersectionObserver(function (_a) {
-            var entry = _a[0];
-            return setIsIntersecting(entry.isIntersecting);
-        }, {
-            root: root,
-            rootMargin: rootMargin,
-            threshold: threshold,
-        });
-        var current = ref.current;
-        if (current)
-            observer.observe(current);
-        return function () {
-            if (current)
-                observer.unobserve(current);
-        };
-    }, [ref, root, rootMargin, threshold]);
-    return isIntersecting;
-}
-export function useHoverIntent() {
-    var _a = useState(false), isHovering = _a[0], setIsHovering = _a[1];
-    var ref = useRef(null);
-    useEffect(function () {
-        var node = ref.current;
-        if (!node)
-            return;
-        var timeout;
-        var handleMouseEnter = function () {
-            timeout = setTimeout(function () { return setIsHovering(true); }, 100);
-        };
-        var handleMouseLeave = function () {
-            clearTimeout(timeout);
-            setIsHovering(false);
-        };
-        node.addEventListener('mouseenter', handleMouseEnter);
-        node.addEventListener('mouseleave', handleMouseLeave);
-        return function () {
-            node.removeEventListener('mouseenter', handleMouseEnter);
-            node.removeEventListener('mouseleave', handleMouseLeave);
-        };
-    }, []);
-    return [ref, isHovering];
-}
-export var useDragDrop = function (onDrop) {
-    var _a = useState({
-        isDragging: false,
-        isOver: false,
-        draggedItemId: null,
-        overDropId: null,
-    }), state = _a[0], setState = _a[1];
-    var handleDragStart = useCallback(function (e, dragId) {
-        e.dataTransfer.setData('text/plain', dragId);
-        e.dataTransfer.effectAllowed = 'move';
-        setState({ isDragging: true, isOver: false, draggedItemId: dragId, overDropId: null });
-    }, []);
-    var handleDragOver = useCallback(function (e, dropId) {
-        e.preventDefault();
-        if (state.overDropId !== dropId) {
-            setState(function (s) { return (__assign(__assign({}, s), { isOver: true, overDropId: dropId })); });
+var Error = function (_a) {
+    var children = _a.children;
+    var firstRender = useRef(false);
+    var handleReload = useCallback(function () {
+        if (!firstRender.current) {
+            firstRender.current = true; // Ensure this runs only once
+            promise(1500).then(function () {
+                window.location.reload();
+            });
         }
-    }, [state.overDropId]);
-    var handleDragEnter = useCallback(function (e, dropId) {
-        e.preventDefault();
-        setState(function (s) { return (__assign(__assign({}, s), { isOver: true, overDropId: dropId })); });
     }, []);
-    var handleDragLeave = useCallback(function (e, dropId) {
-        e.preventDefault();
-        if (state.overDropId === dropId) {
-            setState(function (s) { return (__assign(__assign({}, s), { isOver: false, overDropId: null })); });
-        }
-    }, [state.overDropId]);
-    var handleDrop = useCallback(function (e, dropId) {
-        e.preventDefault();
-        var dragId = e.dataTransfer.getData('text/plain');
-        setState({ isDragging: false, isOver: false, draggedItemId: dragId, overDropId: dropId });
-        onDrop(dragId, dropId);
-    }, [onDrop]);
-    return {
-        state: state,
-        bindDrag: function (dragId) { return ({
-            draggable: true,
-            onDragStart: function (e) { return handleDragStart(e, dragId); },
-        }); },
-        bindDrop: function (dropId) { return ({
-            onDragOver: function (e) { return handleDragOver(e, dropId); },
-            onDragEnter: function (e) { return handleDragEnter(e, dropId); },
-            onDragLeave: function (e) { return handleDragLeave(e, dropId); },
-            onDrop: function (e) { return handleDrop(e, dropId); },
-        }); },
-    };
-};
-export function useFocusTrap(ref) {
-    useEffect(function () {
-        var handleFocus = function (event) {
-            var _a, _b, _c;
-            if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                var focusableElements = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
-                (_c = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0]) === null || _c === void 0 ? void 0 : _c.focus();
-                event.preventDefault();
+    return (_jsx(ErrorBoundary, { FallbackComponent: Fallback, onError: function () {
+            if (process.env.NODE_ENV === 'production') {
+                handleReload();
             }
-        };
-        document.addEventListener('focusin', handleFocus);
-        return function () {
-            document.removeEventListener('focusin', handleFocus);
-        };
-    }, [ref]);
-}
-export function useFocus() {
-    var _a = useState(false), isFocused = _a[0], setIsFocused = _a[1];
-    var ref = useRef(null);
+        }, children: children }));
+};
+var LoadingScreen = function () {
     useEffect(function () {
-        var element = ref.current;
-        if (!element)
-            return;
-        var handleFocus = function () { return setIsFocused(true); };
-        var handleBlur = function () { return setIsFocused(false); };
-        element.addEventListener('focus', handleFocus);
-        element.addEventListener('blur', handleBlur);
+        NProgress.start();
         return function () {
-            element.removeEventListener('focus', handleFocus);
-            element.removeEventListener('blur', handleBlur);
+            NProgress.done();
         };
     }, []);
-    return [ref, isFocused];
-}
-export function useElementSize() {
-    var _a = useState(null), ref = _a[0], setRef = _a[1];
-    var _b = useState({ width: 0, height: 0 }), size = _b[0], setSize = _b[1];
-    var handleSize = useCallback(function () {
-        if (ref) {
-            setSize({
-                width: ref.offsetWidth,
-                height: ref.offsetHeight,
-            });
-        }
-    }, [ref]);
-    var useEnviromentEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-    useEnviromentEffect(function () {
-        if (!ref)
-            return;
-        handleSize();
-        var resizeObserver = new ResizeObserver(handleSize);
-        resizeObserver.observe(ref);
-        return function () { return resizeObserver.disconnect(); };
-    }, [ref, handleSize]);
-    return [setRef, size];
-}
-export function useLockBodyScroll(lock) {
-    if (lock === void 0) { lock = true; }
-    useLayoutEffect(function () {
-        if (typeof document === 'undefined') {
-            return;
-        }
-        var originalStyle = window.getComputedStyle(document.body).overflow;
-        if (lock) {
-            document.body.style.overflow = 'hidden';
-        }
-        return function () {
-            if (lock) {
-                document.body.style.overflow = originalStyle;
-            }
-        };
-    }, [lock]);
-}
+    return (_jsx(Box, { sx: {
+            backgroundColor: 'background.paper',
+            minHeight: '100%',
+        } }));
+};
+// prettier-ignore
+export var DynamicLoader = function (Component) { return function (props) { return (_jsx(Error, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsx(Component, __assign({}, props)) }) })); }; };
+var AlertMessage = function (_a) {
+    var type = _a.type, msg = _a.msg, duration = _a.duration;
+    var _b = getHook('snackBar'), enqueueSnackbar = _b.enqueueSnackbar, closeSnackbar = _b.closeSnackbar;
+    if (msg !== undefined && msg !== '') {
+        enqueueSnackbar(msg !== null && msg !== void 0 ? msg : '', {
+            anchorOrigin: {
+                // @shivaji perpose dyanamic global alert.
+                horizontal: 'right',
+                vertical: 'top',
+            },
+            variant: type,
+            preventDuplicate: true,
+            // persist: true, whenever you want to close.
+            action: function (key) { return (_jsx(IconButton, { "aria-label": "close", size: "small", onClick: function () { return closeSnackbar(key); }, children: _jsx(Close, { fontSize: "small", sx: { color: '#fff' } }) })); },
+            autoHideDuration: duration !== null && duration !== void 0 ? duration : 6000,
+        });
+    }
+    return null;
+};
+export default AlertMessage;

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import 'nprogress/nprogress.css';
+import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
+import { DynamicLoader } from './hooks/hooksComp';
 import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown } from './hooks/hooks';
-import { useHover, useOnClickOutside, useIntersectionObserver, useHoverIntent, useDragDrop, useFocusTrap, useFocus, useElementSize, useLockBodyScroll } from './hooks/hooksComp';
-export { useAxios, useAdvReducer, useHover, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useOnClickOutside, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useIntersectionObserver, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useHoverIntent, useScrollLock, useDragDrop, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useFocusTrap, useReducedMotion, useCookie, useFetchRetry, useFocus, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useElementSize, useLockBodyScroll, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, };
+export default ReactHooksWrapper;
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };

package/dist/index.js

@@ -1,3 +1,6 @@
+import 'nprogress/nprogress.css';
+import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
+import { DynamicLoader } from './hooks/hooksComp';
 import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, } from './hooks/hooks';
-import { useHover, useOnClickOutside, useIntersectionObserver, useHoverIntent, useDragDrop, useFocusTrap, useFocus, useElementSize, useLockBodyScroll, } from './hooks/hooksComp';
-export { useAxios, useAdvReducer, useHover, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useOnClickOutside, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useIntersectionObserver, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useHoverIntent, useScrollLock, useDragDrop, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useFocusTrap, useReducedMotion, useCookie, useFetchRetry, useFocus, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useElementSize, useLockBodyScroll, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, };
+export default ReactHooksWrapper;
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare const promise: (time: number) => Promise<unknown>;

package/dist/utils.js

@@ -0,0 +1 @@
+export var promise = function (time) { return new Promise(function (res) { return setTimeout(res, time); }); };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.0",
-  "description": "Ultimate package for React developers, offering a powerful collection of hooks to enhance their development experience.",
+  "version": "1.0.3",
+  "description": "Ultimate package for React developers, offering a powerful collection of hooks and components to enhance their development experience.",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,12 +19,20 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^22.13.10",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^18.2.14",
     "tslib": "^2.6.3",
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/material": "^5.14.0",
     "axios": "^1.7.8",
-    "react": "^18.2.0"
+    "nprogress": "^0.2.0",
+    "react": "^18.2.0",
+    "react-error-boundary": "^4.0.13"
   }
 }