@capsitech/react-utilities 0.1.6 → 0.1.7

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@capsitech/react-utilities",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A set of javascript utility methods",
-  "main": "lib/index.js",
-  "jsnext:main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "lib/index.cjs",
   "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    }
+  },
   "files": [
     "lib",
     "README.md",
@@ -31,7 +37,7 @@
   },
   "scripts": {
     "clean": "rimraf lib",
-    "build": "yarn clean && tsc --project ./tsconfig.json --module es2015 --outDir ./lib -d",
+    "build": "yarn clean && vite build",
     "build:publish": "yarn && npm version patch && yarn build && npm publish",
     "start": "storybook dev -p 6006"
   },
@@ -44,7 +50,8 @@
     "file-saver": "^2.0.5",
     "qs": "^6.14.0",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-router-dom": "^7.8.1"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.2",
@@ -54,6 +61,7 @@
     "@types/lodash": "4.17.20",
     "@types/qs": "^6",
     "@types/react": "^18.3.12",
+    "@vitejs/plugin-react": "^5.0.2",
     "axios": "^1.11.0",
     "file-saver": "^2.0.5",
     "qs": "^6.14.0",
@@ -62,7 +70,9 @@
     "react-router-dom": "^7.8.1",
     "rimraf": "6.0.1",
     "storybook": "^9.1.2",
-    "typescript": "5.8.3"
+    "typescript": "5.8.3",
+    "vite": "^7.1.4",
+    "vite-plugin-dts": "^4.5.4"
   },
   "browserslist": {
     "production": [

package/lib/Components/SuspenseRoute.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-const isSuspenseComponent = (component) => typeof component === "object" &&
-    component &&
-    component.hasOwnProperty("$$typeof") &&
-    component.hasOwnProperty("_payload") &&
-    component.hasOwnProperty("_init");
-export const SuspenseRoute = ({ children: Component, label = "Loading components...", fallback: FallbackComponent, }) => {
-    if (isSuspenseComponent(Component)) {
-        if (!FallbackComponent)
-            FallbackComponent = SuspenseRouteFallback;
-        return _jsx(React.Suspense, { fallback: _jsx(FallbackComponent, { label: label }), children: _jsx(Component, {}) });
-    }
-    return (_jsx(Component, {}));
-};
-const SuspenseRouteFallback = ({ label = "Loading components..." }) => {
-    return _jsx("div", { style: {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            zIndex: 9999,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
-        }, children: label });
-};

package/lib/Components/index.js

@@ -1 +0,0 @@
-export * from './SuspenseRoute';

package/lib/Hooks/index.js

@@ -1,98 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-export * from './useInfiniteScroll';
-export * from './useNetworkState';
-export * from './useShortcuts';
-/**
- * React effect hook that invokes only on update.
- * It doesn't invoke on mount
- */
-export const useUpdateEffect = (effect, deps) => {
-    const mounted = useRef(false);
-    useEffect(() => {
-        if (mounted.current) {
-            return effect();
-        }
-        mounted.current = true;
-        return undefined;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-    return mounted.current;
-};
-/**
- * React hook to persist any value between renders,
- * but keeps it up-to-date if it changes.
- *
- * @param value the value or function to persist
- */
-export function useLatestRef(value) {
-    const ref = useRef(value);
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref;
-}
-/**
- * useCallbackRef hook
- *
- * A custom hook that converts a callback to a ref to avoid triggering re-renders
- * ..when passed as a prop or avoid re-executing effects when passed as a dependency
- *
- * @param callback The callback to write to a ref object
- */
-export const useCallbackRef = (callback) => {
-    const callbackRef = useRef(callback);
-    useEffect(() => {
-        callbackRef.current = callback;
-    });
-    return useCallback(((...args) => {
-        return callbackRef.current?.(...args);
-    }), []);
-};
-/**
- * useFirstRenderState hook
- *
- * Returns "true" if component is just mounted (first render), else "false".
- */
-export const useFirstRenderState = () => {
-    const isFirst = useRef(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-};
-/**
- * React Hook that provides a declarative `setInterval`
- *
- * @param callback the callback to execute at interval
- * @param delay the `setInterval` delay (in ms)
- */
-export function useInterval(callback, delay) {
-    const savedCallback = useLatestRef(callback);
-    useEffect(() => {
-        const tick = () => {
-            savedCallback.current?.();
-        };
-        if (delay !== null) {
-            const id = setInterval(tick, delay);
-            return () => clearInterval(id);
-        }
-    }, [delay, savedCallback]);
-}
-/**
- * React hook that provides a declarative `setTimeout`
- *
- * @param callback the callback to run after specified delay
- * @param delay the delay (in ms)
- */
-export function useTimeout(callback, delay) {
-    const savedCallback = useLatestRef(callback);
-    useEffect(() => {
-        if (delay == null)
-            return;
-        const timeoutId = setTimeout(() => {
-            savedCallback.current?.();
-        }, delay);
-        return () => clearTimeout(timeoutId);
-    }, [delay, savedCallback]);
-}

package/lib/Hooks/useInfiniteScroll.js

@@ -1,22 +0,0 @@
-import React from 'react';
-/**
- * Infinite scrolling with intersection observer
- * @param scrollRef Reference object for observe bottom boundary
- * @param dispatch Trigger an action that updates the page number
- */
-export const useInfiniteScroll = (scrollRef, dispatch) => {
-    const scrollObserver = React.useCallback((node) => {
-        new IntersectionObserver((entries) => {
-            entries.forEach((en) => {
-                if (en.intersectionRatio > 0) {
-                    dispatch({ type: 'next-page' });
-                }
-            });
-        }).observe(node);
-    }, [dispatch]);
-    React.useEffect(() => {
-        if (scrollRef.current) {
-            scrollObserver(scrollRef.current);
-        }
-    }, [scrollObserver, scrollRef]);
-};

package/lib/Hooks/useNetworkState.js

@@ -1,41 +0,0 @@
-import React from 'react';
-export const isBrowser = typeof window !== 'undefined';
-export const isNavigator = typeof navigator !== 'undefined';
-const nav = isNavigator ? navigator : undefined;
-const conn = nav && (nav.connection || nav.mozConnection || nav.webkitConnection);
-function getConnectionState(previousState) {
-    const online = nav?.onLine;
-    const previousOnline = previousState?.online;
-    return {
-        online,
-        previous: previousOnline,
-        since: online !== previousOnline ? new Date() : previousState?.since,
-        downlink: conn?.downlink,
-        downlinkMax: conn?.downlinkMax,
-        effectiveType: conn?.effectiveType,
-        rtt: conn?.rtt,
-        saveData: conn?.saveData,
-        type: conn?.type,
-    };
-}
-export function useNetworkState(initialState) {
-    const [state, setState] = React.useState(initialState ?? getConnectionState);
-    React.useEffect(() => {
-        const handleStateChange = () => {
-            setState(getConnectionState);
-        };
-        window.addEventListener('online', handleStateChange, { passive: true });
-        window.addEventListener('offline', handleStateChange, { passive: true });
-        if (conn) {
-            window.addEventListener('change', handleStateChange, { passive: true });
-        }
-        return () => {
-            window.removeEventListener('online', handleStateChange);
-            window.removeEventListener('offline', handleStateChange);
-            if (conn) {
-                window.removeEventListener('change', handleStateChange);
-            }
-        };
-    }, []);
-    return state;
-}

package/lib/Hooks/useShortcuts.js

@@ -1,91 +0,0 @@
-import React from 'react';
-const blacklistedTargets = ['INPUT', 'TEXTAREA', 'SELECT'];
-const keysReducer = (state, action) => {
-    switch (action.type) {
-        case 'set-key-down':
-            const keydownState = { ...state, [action.key]: true };
-            return keydownState;
-        case 'set-key-up':
-            const keyUpState = { ...state, [action.key]: false };
-            return keyUpState;
-        case 'reset-keys':
-            const resetState = { ...action.data };
-            return resetState;
-        default:
-            return state;
-    }
-};
-export const useShortcuts = (shortcutKeys, callback, options) => {
-    if (!Array.isArray(shortcutKeys))
-        throw new Error('The first parameter to `useShortcuts` must be an ordered array of `KeyboardEvent.key` strings.');
-    if (!shortcutKeys.length)
-        throw new Error('The first parameter to `useShortcuts` must contain atleast one `KeyboardEvent.key` string.');
-    if (!callback || typeof callback !== 'function')
-        throw new Error('The second parameter to `useShortcuts` must be a function that will be envoked when the keys are pressed.');
-    const { overrideSystem } = options || {};
-    const initalKeyMapping = shortcutKeys.reduce((currentKeys, key) => {
-        currentKeys[key.toLowerCase()] = false;
-        return currentKeys;
-    }, {});
-    const [keys, setKeys] = React.useReducer(keysReducer, initalKeyMapping);
-    const keydownListener = React.useCallback((assignedKey) => (keydownEvent) => {
-        const loweredKey = assignedKey.toLowerCase();
-        if (keydownEvent.repeat)
-            return;
-        if (blacklistedTargets.includes(keydownEvent.target.tagName))
-            return;
-        if (loweredKey !== keydownEvent.key.toLowerCase())
-            return;
-        if (keys[loweredKey] === undefined)
-            return;
-        if (overrideSystem) {
-            keydownEvent.preventDefault();
-            disabledEventPropagation(keydownEvent);
-        }
-        setKeys({ type: 'set-key-down', key: loweredKey });
-        return false;
-    }, [keys, overrideSystem]);
-    const keyupListener = React.useCallback((assignedKey) => (keyupEvent) => {
-        const raisedKey = assignedKey.toLowerCase();
-        if (blacklistedTargets.includes(keyupEvent.target.tagName))
-            return;
-        if (keyupEvent.key.toLowerCase() !== raisedKey)
-            return;
-        if (keys[raisedKey] === undefined)
-            return;
-        if (overrideSystem) {
-            keyupEvent.preventDefault();
-            disabledEventPropagation(keyupEvent);
-        }
-        setKeys({ type: 'set-key-up', key: raisedKey });
-        return false;
-    }, [keys, overrideSystem]);
-    React.useEffect(() => {
-        //console.log('keys', keys);
-        if (!Object.values(keys).filter((value) => !value).length) {
-            callback(keys);
-            setKeys({ type: 'reset-keys', data: initalKeyMapping });
-        }
-        else {
-            setKeys({ type: '' });
-        }
-    }, [callback, keys]);
-    React.useEffect(() => {
-        shortcutKeys.forEach((k) => window.addEventListener('keydown', keydownListener(k)));
-        return () => shortcutKeys.forEach((k) => window.removeEventListener('keydown', keydownListener(k)));
-    }, []);
-    React.useEffect(() => {
-        shortcutKeys.forEach((k) => window.addEventListener('keyup', keyupListener(k)));
-        return () => shortcutKeys.forEach((k) => window.removeEventListener('keyup', keyupListener(k)));
-    }, []);
-};
-export function disabledEventPropagation(e) {
-    if (e) {
-        if (e.stopPropagation) {
-            e.stopPropagation();
-        }
-        else if (window.event) {
-            window.event.cancelBubble = true;
-        }
-    }
-}

package/lib/Utilities/ApiUtility.axios.js

@@ -1,305 +0,0 @@
-import Axios from 'axios';
-import { saveAs } from 'file-saver';
-import { stringify } from 'qs';
-export var HttpMethods;
-(function (HttpMethods) {
-    HttpMethods["get"] = "get";
-    HttpMethods["post"] = "post";
-})(HttpMethods || (HttpMethods = {}));
-export var FileDownloadStatus;
-(function (FileDownloadStatus) {
-    FileDownloadStatus["downloading"] = "downloading";
-    FileDownloadStatus["done"] = "done";
-    FileDownloadStatus["error"] = "error";
-})(FileDownloadStatus || (FileDownloadStatus = {}));
-class ApiUtilityBase {
-    accessToken;
-    handleError = (error, errors) => { };
-    // private getParams = (params?: any) => {
-    //   if (params) {
-    //     for (const key in params) {
-    //       if (params[key] == null || params[key] === undefined || params[key] === '')
-    //         delete params[key];
-    //     }
-    //   }
-    //   return params;
-    // };
-    getResponse = async (endpoint, params, options) => {
-        return await Axios.get(endpoint, {
-            params,
-            paramsSerializer: {
-                serialize: (p, o) => {
-                    return stringify(params, {
-                        arrayFormat: 'indices',
-                        allowDots: true,
-                        skipNulls: true,
-                    });
-                },
-            },
-            ...this._axiosOptions(options || {}),
-        });
-    };
-    get = async (endpoint, params, throwErrorOn401, options) => {
-        const response = await this.getResponse(endpoint, params, options);
-        const data = this.handleResponse(response, throwErrorOn401);
-        return data;
-    };
-    getResult = async (endpoint, params, throwErrorOn401, options) => {
-        try {
-            const data = await this.get(endpoint, params, undefined, options);
-            if (data.status) {
-                return data.result;
-            }
-            else {
-                this.handleErrorResponse(data.message, data.errors);
-            }
-        }
-        catch (error) {
-            if (error.isAxiosError)
-                this.handleAxiosError(error, throwErrorOn401);
-            else
-                this.handleResponse(error, throwErrorOn401);
-        }
-        return null;
-    };
-    post = async (endpoint, body, contentType, options) => {
-        try {
-            const response = await Axios.post(endpoint, body, this._axiosOptions({ contentType, ...(options || {}) }));
-            const data = this.handleResponse(response);
-            return data;
-        }
-        catch (ex) {
-            if (ex?.isAxiosError) {
-                return this.handleAxiosError(ex);
-            }
-        }
-        return {};
-    };
-    put = async (endpoint, body, contentType, options) => {
-        try {
-            const response = await Axios.put(endpoint, body, this._axiosOptions({ contentType, ...(options || {}) }));
-            const data = this.handleResponse(response);
-            return data;
-        }
-        catch (ex) {
-            if (ex?.isAxiosError) {
-                return this.handleAxiosError(ex);
-            }
-        }
-        return {};
-    };
-    appendFormDataValues = (form, values, preFix) => {
-        if (!preFix || preFix.length <= 0)
-            preFix = '';
-        //check if given object is a string/number/boolean then add directly to the list with prefix
-        if ((typeof values !== 'function' && typeof values !== 'object' && typeof values !== 'symbol') || values instanceof File) {
-            if (values && preFix) {
-                form.append(preFix, values);
-            }
-            return;
-        }
-        for (const key in values) {
-            //prepare a field name
-            const fieldName = `${preFix}${preFix && !preFix.endsWith('.') ? '.' : ''}${key}`;
-            if (values[key] instanceof FileList) {
-                const fileList = values[key];
-                for (let fIndex = 0; fIndex < fileList.length; fIndex++) {
-                    form.append(`${fieldName}[${fIndex}]`, fileList[fIndex]);
-                }
-            }
-            else {
-                if (Array.isArray(values[key])) {
-                    values[key].forEach((el, idx) => {
-                        this.appendFormDataValues(form, el, `${fieldName}[${idx}]`);
-                    });
-                }
-                else {
-                    if (typeof values[key] === 'object') {
-                        this.appendFormDataValues(form, values[key], fieldName);
-                    }
-                    else if (values[key]) {
-                        form.append(fieldName, values[key]);
-                    }
-                }
-            }
-        }
-    };
-    postForm = async (endpoint, params, options) => {
-        let formData = new FormData();
-        if (params instanceof FormData) {
-            formData = params;
-        }
-        else {
-            this.appendFormDataValues(formData, params);
-        }
-        try {
-            const response = await Axios.post(endpoint, formData, this._axiosOptions({ contentType: 'multipart/form-data', ...(options || {}) }));
-            const data = this.handleResponse(response);
-            return data;
-        }
-        catch (ex) {
-            if (ex?.isAxiosError) {
-                return this.handleAxiosError(ex);
-            }
-        }
-        return {};
-    };
-    putForm = async (endpoint, params, options) => {
-        let formData = new FormData();
-        if (params instanceof FormData) {
-            formData = params;
-        }
-        else {
-            this.appendFormDataValues(formData, params);
-        }
-        try {
-            const response = await Axios.putForm(endpoint, formData, this._axiosOptions({ contentType: 'multipart/form-data', ...(options || {}) }));
-            const data = this.handleResponse(response);
-            return data;
-        }
-        catch (ex) {
-            if (ex?.isAxiosError) {
-                return this.handleAxiosError(ex);
-            }
-        }
-        return {};
-    };
-    delete = async (endpoint, contentType, options) => {
-        const response = await Axios.delete(endpoint, this._axiosOptions({ contentType, ...(options || {}) }));
-        const data = this.handleResponse(response);
-        return data;
-    };
-    getFileName = (contentDispositionValue) => {
-        var filename = undefined;
-        if (contentDispositionValue && contentDispositionValue.indexOf('attachment') !== -1) {
-            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-            var matches = filenameRegex.exec(contentDispositionValue);
-            if (matches != null && matches[1]) {
-                filename = matches[1].replace(/['"]/g, '');
-            }
-        }
-        return filename;
-    };
-    downloadFile = async (endpoint, params, method, options) => {
-        let response;
-        const headers = {};
-        // return authorization header with jwt token
-        const token = this.accessToken; // || AuthService.getAuthToken();
-        if (token) {
-            headers['Authorization'] = `Bearer ${token}`;
-        }
-        const axiosOptions = { headers, ...(options || {}) };
-        if (method === HttpMethods.post) {
-            response = Axios.post(endpoint, params, {
-                ...this._axiosOptions(axiosOptions),
-                responseType: 'blob',
-            });
-        }
-        else {
-            response = Axios.get(endpoint, {
-                params,
-                paramsSerializer: {
-                    serialize: (p, o) => {
-                        return stringify(params, {
-                            arrayFormat: 'indices',
-                            allowDots: true,
-                            skipNulls: true,
-                        });
-                    },
-                },
-                ...this._axiosOptions(axiosOptions),
-                responseType: 'blob',
-            });
-        }
-        try {
-            const result_1 = await response;
-            //extract file name from Content-Disposition header
-            const fileName = this.getFileName(result_1.headers.get('Content-Disposition'));
-            //invoke 'Save As' dialog
-            saveAs(result_1.data, fileName);
-            return { status: FileDownloadStatus.done };
-        }
-        catch (error) {
-            if (error.isAxiosError) {
-                this.handleResponse(error.response);
-            }
-            else
-                this.handleResponse(error);
-            if (error.response) {
-                return {
-                    status: FileDownloadStatus.error,
-                    error: error.response.status,
-                };
-            }
-            else {
-                return { status: FileDownloadStatus.error, error: error.message };
-            }
-        }
-    };
-    getAuthHeader = (contentType) => {
-        const headers = {
-            'Content-Type': contentType || 'application/json',
-            Accept: 'application/json',
-        };
-        // return authorization header with jwt token
-        const token = this.accessToken; //||AuthService.getAuthToken();
-        if (token) {
-            headers['Authorization'] = `Bearer ${token}`;
-        }
-        return headers;
-    };
-    handleResponse = (response, throwErrorOn401) => {
-        if (!response) {
-            if (this.handleError)
-                this.handleError('No response from the server, please try after some time.');
-        }
-        else if ([401, 403].indexOf(response.status) !== -1) {
-            if (throwErrorOn401) {
-                throw response;
-            }
-            else {
-                console.error('401 Unauthorized or 403 Forbidden response returned from api');
-                // // auto logout if 401 Unauthorized or 403 Forbidden response returned from api
-                // AuthService.logout();
-                // window.location.reload();
-            }
-        }
-        return response?.data;
-    };
-    handleAxiosError = (error, throwErrorOn401) => {
-        if (throwErrorOn401 && error.response?.status === 401)
-            throw error;
-        else if (error.response?.status === 400) {
-            const data = error.response.data;
-            if (data && data.errors) {
-                const arr = [];
-                for (const key in data.errors) {
-                    if (data.errors[key] && data.errors[key].length > 0) {
-                        arr.push(data.errors[key][0]);
-                    }
-                }
-                return {
-                    result: null,
-                    status: false,
-                    message: arr.length > 0 ? arr[0] : '',
-                    errors: arr,
-                };
-            }
-        }
-        return {};
-    };
-    handleErrorResponse = (message, errors) => {
-        if (this.handleError)
-            this.handleError(message, errors);
-    };
-    _axiosOptions = (options) => {
-        const { contentType, headers, ...rest } = options || {};
-        return {
-            headers: headers || this.getAuthHeader(contentType),
-            baseURL: this.getBaseUrl(),
-            ...rest,
-        };
-    };
-    getBaseUrl = () => process.env.REACT_APP_API_URL; //EnvUtils.getEnv('REACT_APP_API_URL');
-}
-export const ApiUtility = new ApiUtilityBase();