react-hook-toolkit 1.0.7 → 1.0.8

package/README.md

@@ -24,7 +24,7 @@ pnpm add react-hook-toolkit
 ## Features  
 Here's the properly structured documentation with clear purpose explanations:
 
-----------------------------------------------------  **Custom Hooks**  ------------------------------------------------
+----------------------------------------------------  **Custom Hooks**  --------------------------------------------------
   📌 **useAxios**   
 A custom hook for making API requests using Axios. It manages request states (`loading`, `error`, `data`) and provides a function (`makeRequest`) to initiate a request.
 ```ts
@@ -604,6 +604,20 @@ import React, { lazy } from "react";
 const MyComponent = DynamicLoader(lazy(() => import("./MyComponent")));
 
 ```
+---
+
+  ✅ **FilePreview**  
+Displays a styled file card with an icon based on file type, filename with ellipsis handling, file size, and an optional download action.
+
+```tsx
+<FilePreview
+  primaryKey="file123"
+  filename="example.pdf"
+  size="2.3 MB"
+  onDownload={(id) => console.log("Download:", id)}
+/>
+```
+
 ---
   ✅ **AlertMessage**  
 A functional React component that displays dynamic alerts using the enqueueSnackbar function. It provides a customizable message with a specified type and duration. The alerts can be dismissed manually by clicking a close button, and they support various configurations such as position, auto-hide duration, and duplicate prevention.
@@ -613,6 +627,58 @@ A functional React component that displays dynamic alerts using the enqueueSnack
 ```
 ---
 
+### ✅ **FileSkeleton**  
+Displays one or more placeholder file cards mimicking the layout of file previews. Useful during file list loading.
+
+```tsx
+<FileSkeleton
+  length={3}
+  width={350}
+  borderColor="#dfdfdf"
+/>
+```
+
+---
+
+### ✅ **TableSkeleton**  
+Shows a full table layout with skeleton headers and rows. Includes a toolbar area for filters or search bars.
+
+```tsx
+<TableSkeleton
+  rows={6}
+  columns={6}
+/>
+```
+
+---
+
+### ✅ **LineChartSkeleton**  
+Represents a placeholder for a line chart with gridlines and axis lines to simulate loading of chart data.
+
+```tsx
+<LineChartSkeleton />
+```
+
+---
+
+### ✅ **CardSkeleton**  
+Simulates a card layout with a title and multiple row placeholders, ideal for stat or summary cards.
+
+```tsx
+<CardSkeleton />
+```
+
+---
+
+### ✅ **PieChartSkeleton**  
+Displays a skeleton placeholder for a pie chart inside a card layout. Includes a title and circular loading element.
+
+```tsx
+<PieChartSkeleton />
+```
+
+---
+
 ✏️ **Authors**  
 
 ![NPM](https://img.shields.io/badge/Author-React%20Expert-red) &nbsp; ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D) &nbsp; ![npm](https://img.shields.io/npm/dt/react-hook-toolkit) &nbsp; ![NPM](https://img.shields.io/npm/l/react-hook-toolkit) &nbsp; ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)

package/dist/hooks/hooksComp.d.ts

@@ -6,4 +6,14 @@ interface PropsType {
     duration?: number;
 }
 export declare const AlertMessage: FC<PropsType>;
-export default AlertMessage;
+interface FileComponentProps {
+    primaryKey: string | number;
+    filename: string;
+    size: string | number;
+    onDownload?: any;
+    width?: number;
+    borderColor?: string;
+    fileColor?: 'inherit' | 'primary' | 'secondary' | 'error' | 'disabled' | 'action';
+}
+export declare const FilePreview: ({ primaryKey, filename, size, onDownload, width, borderColor, fileColor, }: FileComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hooks/hooksComp.js

@@ -11,8 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 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 { Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Typography, Card, } from '@mui/material';
+import { Close, InsertDriveFile, Image, Description, Download } from '@mui/icons-material';
 import NProgress from 'nprogress';
 import { ErrorBoundary } from 'react-error-boundary';
 import { promise } from '../utils';
@@ -71,4 +71,49 @@ export var AlertMessage = function (_a) {
     }
     return null;
 };
-export default AlertMessage;
+export var FilePreview = function (_a) {
+    var primaryKey = _a.primaryKey, filename = _a.filename, size = _a.size, _b = _a.onDownload, onDownload = _b === void 0 ? undefined : _b, _c = _a.width, width = _c === void 0 ? 350 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#dfdfdf' : _d, _e = _a.fileColor, fileColor = _e === void 0 ? 'primary' : _e;
+    // Icon mapping configuration
+    var iconMap = {
+        pdf: _jsx(InsertDriveFile, { fontSize: "large", color: fileColor }),
+        image: _jsx(Image, { fontSize: "large", color: fileColor }),
+        doc: _jsx(Description, { fontSize: "large", color: fileColor }),
+        default: _jsx(Description, { fontSize: "large", color: fileColor }),
+    };
+    // Determine file type from filename extension
+    var getFileType = function (filenames) {
+        var extension = filenames.split('.').pop().toLowerCase();
+        if (['pdf'].includes(extension))
+            return 'pdf';
+        if (['jpg', 'jpeg', 'png', 'gif'].includes(extension))
+            return 'image';
+        if (['doc', 'docx', 'txt'].includes(extension))
+            return 'doc';
+        return 'default';
+    };
+    return (_jsx(Card, { variant: "outlined", sx: {
+            maxWidth: width,
+            minWidth: width,
+            border: "1px solid ".concat(borderColor),
+            borderRadius: 1,
+            '&:hover': { boxShadow: 2 },
+            marginLeft: 1,
+        }, children: _jsxs(CardContent, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+                padding: '8px !important',
+            }, children: [iconMap[getFileType(filename)], _jsxs(Box, { sx: { flexGrow: 1 }, children: [filename.length > 33 ? (_jsx(Tooltip, { title: filename, placement: "top", arrow: true, children: _jsx(Typography, { sx: {
+                                    fontSize: '14px',
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    maxWidth: width - 120,
+                                }, variant: "body1", fontWeight: "medium", children: filename }) })) : (_jsx(Typography, { sx: {
+                                fontSize: '14px',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                maxWidth: width - 120,
+                            }, children: filename })), _jsx(Typography, { variant: "caption", color: "text.secondary", children: size })] }), _jsx(IconButton, { disabled: onDownload === undefined, "aria-label": "download", onClick: function () { return onDownload(primaryKey); }, sx: { color: '#dfdfdf', '&:hover': { color: 'primary.main' } }, children: _jsx(Download, { fontSize: "small", color: "primary" }) })] }) }));
+};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import 'nprogress/nprogress.css';
 import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
-import { DynamicLoader, AlertMessage } from './hooks/hooksComp';
+import { DynamicLoader, AlertMessage, FilePreview } from './hooks/hooksComp';
+import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/skeletons';
 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';
 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, AlertMessage };
+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, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton };

package/dist/index.js

@@ -1,6 +1,7 @@
 import 'nprogress/nprogress.css';
 import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
-import { DynamicLoader, AlertMessage } from './hooks/hooksComp';
+import { DynamicLoader, AlertMessage, FilePreview, } from './hooks/hooksComp';
+import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/skeletons';
 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';
 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, AlertMessage };
+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, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton };

package/dist/skeletons/skeletons.d.ts

@@ -0,0 +1,19 @@
+export declare const FileSkeleton: ({ length, width, borderColor }: {
+    length?: number | undefined;
+    width?: number | undefined;
+    borderColor?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TableSkeleton: ({ rows, columns }: {
+    rows?: number | undefined;
+    columns?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const LineChartSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const CardSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const PieChartSkeleton: React.FC;
+export declare const FieldSkeleton: ({ length, width, spacing, isLabel, itemsPerRow, }: {
+    length?: number | undefined;
+    width?: string | undefined;
+    spacing?: number | undefined;
+    isLabel?: boolean | undefined;
+    itemsPerRow?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/skeletons/skeletons.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Card, CardContent, CardHeader, Grid, IconButton, Skeleton, Table, TableBody, TableCell, TableHead, TableRow, Toolbar, Tooltip, } from "@mui/material";
+import { Download } from "@mui/icons-material";
+export var FileSkeleton = function (_a) {
+    var _b = _a.length, length = _b === void 0 ? 1 : _b, _c = _a.width, width = _c === void 0 ? 350 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#dfdfdf' : _d;
+    return (_jsx(Grid, { container: true, spacing: 2, children: Array.from({ length: length }).map(function (_, index) { return (_jsx(Grid, { item: true, children: _jsx(Card, { variant: "outlined", sx: {
+                    maxWidth: width,
+                    minWidth: width,
+                    border: "1px solid ".concat(borderColor),
+                    borderRadius: 1,
+                    '&:hover': { boxShadow: 2 },
+                    marginLeft: 3,
+                }, children: _jsxs(CardContent, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        padding: '8px !important',
+                    }, children: [_jsx(Skeleton, { variant: "rectangular", width: 50, height: 40 }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Skeleton, { variant: "text", width: width - 120, height: 20 }), _jsx(Skeleton, { variant: "text", width: 60, height: 14 })] }), _jsx(IconButton, { disabled: true, sx: { color: '#dfdfdf' }, children: _jsx(Download, { fontSize: "small", color: "disabled" }) })] }) }) }, index.toString())); }) }));
+};
+export var TableSkeleton = function (_a) {
+    var _b = _a.rows, rows = _b === void 0 ? 6 : _b, _c = _a.columns, columns = _c === void 0 ? 6 : _c;
+    return (_jsxs(Box, { sx: { width: '100%', overflowX: 'auto' }, children: [_jsxs(Toolbar, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    p: 1,
+                    borderBottom: '1px solid #dbdbdb',
+                }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: _jsx(Skeleton, { variant: "rectangular", width: 200, height: 40 }) }), _jsx(Box, { children: _jsx(Tooltip, { title: "Filter", children: _jsx(IconButton, { children: _jsx(Skeleton, { variant: "circular", width: 40, height: 40 }) }) }) })] }), _jsxs(Table, { "aria-label": "loading table", children: [_jsx(TableHead, { children: _jsx(TableRow, { children: Array.from({ length: columns }).map(function (_, index) { return (_jsx(TableCell, { children: _jsx(Skeleton, { variant: "rectangular", height: 20 }) }, "head-".concat(index))); }) }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map(function (_, rowIndex) { return (_jsx(TableRow, { children: Array.from({ length: columns }).map(function (_, colIndex) { return (_jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "100%" }) }, "cell-".concat(rowIndex, "-").concat(colIndex))); }) }, "row-".concat(rowIndex))); }) })] })] }));
+};
+export var LineChartSkeleton = function () {
+    return (_jsxs(Box, { sx: { width: '100%', height: '300px', position: 'relative', padding: '16px' }, children: [_jsx(Skeleton, { variant: "text", width: "30%", height: 30, sx: { position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)' } }), _jsx(Skeleton, { variant: "rectangular", width: "calc(100% - 40px)", height: 4, sx: { position: 'absolute', bottom: 40, left: 20 } }), _jsx(Skeleton, { variant: "rectangular", width: 2, height: "calc(100% - 40px)", sx: { position: 'absolute', top: 0, bottom: 40, left: 20 } }), _jsx(Skeleton, { variant: "rectangular", width: 2, height: "calc(100% - 40px)", sx: { position: 'absolute', top: 0, bottom: 40, right: 20 } }), [1, 2, 3, 4].map(function (_, index) { return (_jsx(Skeleton, { variant: "rectangular", width: "calc(100% - 40px)", height: 4, sx: { position: 'absolute', bottom: "".concat(40 + index * 50, "px"), left: '20px' } }, index.toString())); }), _jsx(Skeleton, { variant: "rectangular", width: "calc(100% - 40px)", height: 2, sx: {
+                    position: 'absolute',
+                    left: '20px',
+                    top: '85%',
+                    transform: 'rotate(-7deg)',
+                    transformOrigin: 'left center',
+                } })] }));
+};
+export var CardSkeleton = function () {
+    var skeletonStyles = {
+        boxShadow: '0px 1px 8px -2px #444444de',
+        borderRadius: '10px',
+        overflow: 'hidden',
+        padding: '12px',
+        transition: '0.3s',
+        background: 'linear-gradient(to top left, #fff 20%, #f5f5f5 80%)',
+        width: {
+            xs: '90%',
+            sm: '70%',
+            md: '150%',
+            lg: '195%',
+            xl: '200%',
+        },
+        maxWidth: '600px',
+    };
+    return (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, children: _jsxs(Box, { sx: skeletonStyles, children: [_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 30, sx: { marginBottom: '12px', borderRadius: '4px', background: 'linear-gradient(to left, #e0e0e0 10%, #cfcfcf 100%)', } }), _jsx(Box, { children: Array.from(new Array(4)).map(function (__, index) { return (_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: index !== 3 ? 1 : 0, }, children: [_jsx(Skeleton, { variant: "text", width: "70%", height: 20 }), _jsx(Skeleton, { variant: "text", width: "20%", height: 20 })] }, index.toString())); }) })] }) }));
+};
+export var PieChartSkeleton = function () {
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 6, sx: { padding: '10px' }, children: _jsxs(Card, { sx: {
+                        borderRadius: '6px',
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        cursor: 'default',
+                    }, children: [_jsx(CardHeader, { title: (_jsx(Skeleton, { variant: "rectangular", width: "80%", height: "20px", sx: { margin: '0 auto', borderRadius: '4px' } })), sx: {
+                                background: '#dbe7f2',
+                                padding: '8px',
+                            } }), _jsx(CardContent, { sx: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: '320px',
+                            }, children: _jsx(Skeleton, { variant: "circular", width: 200, height: 200, sx: { marginBottom: '16px' } }) })] }) }), _jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 6, sx: { padding: '10px' }, children: _jsxs(Card, { sx: {
+                        borderRadius: '6px',
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        cursor: 'default',
+                    }, children: [_jsx(CardHeader, { title: (_jsx(Skeleton, { variant: "rectangular", width: "80%", height: "20px", sx: { margin: '0 auto', borderRadius: '4px' } })), sx: {
+                                background: '#dbe7f2',
+                                padding: '8px',
+                            } }), _jsx(CardContent, { sx: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: '320px',
+                            }, children: _jsx(Skeleton, { variant: "circular", width: 200, height: 200, sx: { marginBottom: '16px' } }) })] }) })] }));
+};
+export var FieldSkeleton = function (_a) {
+    var _b = _a.length, length = _b === void 0 ? 1 : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.spacing, spacing = _d === void 0 ? 2 : _d, _e = _a.isLabel, isLabel = _e === void 0 ? false : _e, _f = _a.itemsPerRow, itemsPerRow = _f === void 0 ? 2 : _f;
+    var columnSize = Math.floor(12 / itemsPerRow);
+    return (_jsx(Grid, { container: true, spacing: spacing, children: Array.from({ length: length }).map(function (_, index) { return (_jsx(Grid, { item: true, xs: 12, sm: columnSize, children: _jsxs(Box, { sx: { width: '100%', margin: 2 }, children: [isLabel && _jsx(Skeleton, { variant: "text", width: "40%", height: 20, sx: { marginBottom: 1 } }), _jsx(Skeleton, { variant: "rectangular", width: width, height: 40, sx: { borderRadius: 1 } })] }) }, index.toString())); }) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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",