react-hook-toolkit 1.0.10 → 1.0.12

package/README.md

@@ -619,8 +619,52 @@ Displays a styled file card with an icon based on file type, filename with ellip
 />
 ```
 ---
+ ✅ **UploadFile**  
+Renders an icon button for file uploads with visual feedback for different upload states (loading, success, error). It supports disabling, color customization, and a hidden file input for seamless UX.
 
-### ✅ **LabeledValue**  
+```tsx
+<UploadFile
+  isUpload={true}
+  color="#1976d2"
+  state={{
+    isUploaded: false,
+    isUploadError: false,
+    isLoadingUpload: true,
+  }}
+  onFileSelect={(file) => console.log(file)}
+/>
+
+const handleFileSelect = async (files: any) => {
+  setState({ isUploaded: false, isUploadError: false, isLoadingUpload: true });
+  try {
+    await _promise(2000);
+    setState({ isUploaded: true, isUploadError: false, isLoadingUpload: false });
+  } catch (err) {
+    setState({ isUploaded: false, isUploadError: true, isLoadingUpload: false });
+  }
+};
+```
+---
+
+ ✅ **DownloadFile**  
+Renders an icon button for file downloads with visual feedback for different states (loading, success, error). It supports color customization and disables interaction during loading.
+
+```tsx
+<DownloadFile
+  isDownload={true}
+  color="primary"
+  state={{
+    isDownloaded: false,
+    isDownloadError: false,
+    isLoadingDownload: true,
+  }}
+  onDownload={() => console.log('Download initiated')}
+ />
+```
+
+---
+
+ ✅ **LabeledValue**  
 Displays a simple key-value label pair in a single line, with optional styling.
 
 ```tsx
@@ -631,7 +675,7 @@ Displays a simple key-value label pair in a single line, with optional styling.
 ```
 ---
 
-### ✅ **DetailsCard**  
+ ✅ **DetailsCard**  
 Renders a card with a title and grid-based layout of labeled values. It supports custom spacing, responsive behavior, and optional card shadow.
 
 ```tsx
@@ -653,7 +697,7 @@ A functional React component that displays dynamic alerts using the enqueueSnack
 ```
 ---
 
-### ✅ **FileSkeleton**  
+ ✅ **FileSkeleton**  
 Displays one or more placeholder file cards mimicking the layout of file previews. Useful during file list loading.
 
 ```tsx
@@ -666,7 +710,7 @@ Displays one or more placeholder file cards mimicking the layout of file preview
 
 ---
 
-### ✅ **TableSkeleton**  
+ ✅ **TableSkeleton**  
 Shows a full table layout with skeleton headers and rows. Includes a toolbar area for filters or search bars.
 
 ```tsx
@@ -678,25 +722,25 @@ Shows a full table layout with skeleton headers and rows. Includes a toolbar are
 
 ---
 
-### ✅ **LineChartSkeleton**  
-Represents a placeholder for a line chart with gridlines and axis lines to simulate loading of chart data.
+ ✅ **CardSkeleton**  
+Simulates a card layout with a title and multiple row placeholders, ideal for stat or summary cards.
 
 ```tsx
-<LineChartSkeleton />
+<CardSkeleton />
 ```
 
 ---
 
-### ✅ **CardSkeleton**  
-Simulates a card layout with a title and multiple row placeholders, ideal for stat or summary cards.
+ ✅ **LineChartSkeleton**  
+Represents a placeholder for a line chart with gridlines and axis lines to simulate loading of chart data.
 
 ```tsx
-<CardSkeleton />
+<LineChartSkeleton />
 ```
 
 ---
 
-### ✅ **PieChartSkeleton**  
+ ✅ **PieChartSkeleton**  
 Displays a skeleton placeholder for a pie chart inside a card layout. Includes a title and circular loading element.
 
 ```tsx

package/dist/hooks/hooksComp.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 export declare const DynamicLoader: (Component: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
 interface PropsType {
     type: string;
@@ -7,13 +7,16 @@ interface PropsType {
 }
 export declare const AlertMessage: FC<PropsType>;
 interface DetailsCardProps {
+    isLoading?: boolean;
     title: string;
-    details: any;
+    details: any[];
     spacing?: number;
     boxShadow?: string;
     background?: string;
+    loaderType?: 'skeleton' | 'circular';
+    displayType?: 'flex' | 'block';
 }
-export declare const DetailsCard: ({ title, details, spacing, boxShadow, background, }: DetailsCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailsCard: ({ isLoading, title, details, spacing, boxShadow, background, loaderType, displayType, }: DetailsCardProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LabeledValue: ({ label, value, style }: any) => import("react/jsx-runtime").JSX.Element;
 interface FileComponentProps {
     primaryKey: string | number;
@@ -23,6 +26,30 @@ interface FileComponentProps {
     width?: number;
     borderColor?: string;
     fileColor?: 'inherit' | 'primary' | 'secondary' | 'error' | 'disabled' | 'action';
+    isDownloading: boolean;
 }
-export declare const FilePreview: ({ primaryKey, filename, size, onDownload, width, borderColor, fileColor, }: FileComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilePreview: ({ primaryKey, filename, size, onDownload, width, borderColor, fileColor, isDownloading, }: FileComponentProps) => import("react/jsx-runtime").JSX.Element;
+interface UploadButtonProps {
+    isUpload?: boolean;
+    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    state?: {
+        isUploaded?: boolean;
+        isUploadError?: boolean;
+        isLoadingUpload?: boolean;
+    };
+    onFileSelect: (file: File) => void;
+}
+export declare const UploadFile: React.FC<UploadButtonProps>;
+interface DownloadButtonState {
+    isDownloaded?: boolean;
+    isDownloadError?: boolean;
+    isLoadingDownload?: boolean;
+}
+interface DownloadFileProps {
+    isDownload?: boolean;
+    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    state?: DownloadButtonState;
+    onDownload: () => void;
+}
+export declare const DownloadFile: React.FC<DownloadFileProps>;
 export {};

package/dist/hooks/hooksComp.js

@@ -10,9 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { useEffect, useCallback, useRef, Suspense } from 'react';
-import { Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Typography, Card, Grid, } from '@mui/material';
-import { Close, InsertDriveFile, Image, Description, Download } from '@mui/icons-material';
+import { Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Typography, Card, Grid, Skeleton, CircularProgress, } from '@mui/material';
+import { Close, InsertDriveFile, Image, Description, Download, CheckCircleOutlined, ErrorOutlineOutlined, Upload, } from '@mui/icons-material';
 import NProgress from 'nprogress';
 import { ErrorBoundary } from 'react-error-boundary';
 import { promise } from '../utils';
@@ -73,16 +74,16 @@ export var AlertMessage = function (_a) {
     return null;
 };
 export var DetailsCard = function (_a) {
-    var title = _a.title, details = _a.details, _b = _a.spacing, spacing = _b === void 0 ? 2 : _b, _c = _a.boxShadow, boxShadow = _c === void 0 ? '0px 0px 2px 2px #d8d8d8' : _c, _d = _a.background, background = _d === void 0 ? '#eee' : _d;
+    var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, title = _a.title, details = _a.details, _c = _a.spacing, spacing = _c === void 0 ? 2 : _c, _d = _a.boxShadow, boxShadow = _d === void 0 ? '0px 0px 2px 2px #d8d8d8' : _d, _e = _a.background, background = _e === void 0 ? '#eee' : _e, _f = _a.loaderType, loaderType = _f === void 0 ? 'skeleton' : _f, _g = _a.displayType, displayType = _g === void 0 ? 'flex' : _g;
     var width = useWindowSize().width;
-    return (_jsx(Card, { sx: { boxShadow: boxShadow }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", sx: { background: background, padding: '4px' }, children: title }), _jsx(Grid, { container: true, spacing: spacing, sx: { mt: 1 }, children: details.filter(Boolean).map(function (item, index) { return (_jsxs(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: width < 1367 ? 6 : 4, children: [_jsxs(Typography, { fontWeight: "bold", component: "span", sx: { fontSize: '14px' }, children: [item === null || item === void 0 ? void 0 : item.label, ": \u00A0"] }), _jsx(Typography, { component: "span", sx: { fontSize: '14px' }, children: (item === null || item === void 0 ? void 0 : item.value) || 'N/A' })] }, index.toString())); }) })] }) }));
+    return (_jsx(Card, { sx: { boxShadow: boxShadow }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", sx: { background: background, padding: '4px' }, children: title }), _jsx(Grid, { container: true, spacing: spacing, sx: { mt: 1 }, children: details.filter(Boolean).map(function (item, index) { return (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: width < 1367 ? 6 : 4, children: _jsxs(Box, { display: displayType, alignItems: "center", sx: { fontSize: '14px' }, children: [_jsxs(Typography, { fontWeight: "bold", component: "span", sx: { fontSize: '14px' }, children: [item === null || item === void 0 ? void 0 : item.label, ":\u00A0"] }), isLoading ? (loaderType === 'skeleton' ? (_jsx(Skeleton, { sx: { ml: 2 }, variant: "text", width: 100, height: 20 })) : (_jsx(CircularProgress, { sx: { ml: 2 }, color: "success", size: 18 }))) : (_jsx(Typography, { component: "span", sx: { fontSize: '14px' }, children: (item === null || item === void 0 ? void 0 : item.value) !== undefined && (item === null || item === void 0 ? void 0 : item.value) !== null && (item === null || item === void 0 ? void 0 : item.value) !== '' ? item.value : 'N/A' }))] }) }, index.toString())); }) })] }) }));
 };
 export var LabeledValue = function (_a) {
     var label = _a.label, value = _a.value, _b = _a.style, style = _b === void 0 ? undefined : _b;
     return (_jsx(_Fragment, { children: _jsx(Typography, { sx: style !== null && style !== void 0 ? style : { padding: '5px' }, children: _jsxs("span", { style: { fontSize: '13px' }, children: [_jsxs("b", { children: [label, " "] }), ": ", value !== null && value !== void 0 ? value : 'N/A'] }) }) }));
 };
 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;
+    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, _f = _a.isDownloading, isDownloading = _f === void 0 ? false : _f;
     // Icon mapping configuration
     var iconMap = {
         pdf: _jsx(InsertDriveFile, { fontSize: "large", color: fileColor }),
@@ -125,5 +126,43 @@ export var FilePreview = function (_a) {
                                 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" }) })] }) }));
+                            }, 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: isDownloading ? (_jsx(CircularProgress, { color: "success", size: 20 })) : (_jsx(Download, { fontSize: "small", color: "primary" })) })] }) }));
+};
+var VisuallyHiddenInput = forwardRef(function (props, ref) { return (_jsx("input", __assign({ ref: ref, type: "file", style: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        padding: 0,
+        overflow: 'hidden',
+        clip: 'rect(0,0,0,0)',
+        whiteSpace: 'nowrap',
+        border: 0,
+    } }, props))); });
+export var UploadFile = function (_a) {
+    var _b = _a.isUpload, isUpload = _b === void 0 ? true : _b, color = _a.color, _c = _a.state, state = _c === void 0 ? {} : _c, onFileSelect = _a.onFileSelect;
+    var onFileInputChange = function (e) {
+        var _a;
+        var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            onFileSelect(file);
+            e.target.value = '';
+        }
+    };
+    return (_jsx(Tooltip, { title: "Upload", children: _jsxs(Box, { sx: { position: 'relative', display: 'inline-block' }, children: [_jsxs(IconButton, { disabled: !isUpload, component: "label", children: [(state === null || state === void 0 ? void 0 : state.isUploaded) ? (_jsx(CheckCircleOutlined, { color: "success" })) : (state === null || state === void 0 ? void 0 : state.isUploadError) ? (_jsx(ErrorOutlineOutlined, { color: "error" })) : (_jsx(Upload, { color: color !== null && color !== void 0 ? color : 'primary' })), _jsx(VisuallyHiddenInput, { onChange: onFileInputChange })] }), (state === null || state === void 0 ? void 0 : state.isLoadingUpload) && (_jsx(CircularProgress, { size: "40px", sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        zIndex: 1,
+                    } }))] }) }));
+};
+export var DownloadFile = function (_a) {
+    var _b = _a.isDownload, isDownload = _b === void 0 ? true : _b, color = _a.color, _c = _a.state, state = _c === void 0 ? {} : _c, onDownload = _a.onDownload;
+    return (_jsx(Tooltip, { title: "Download", children: _jsxs(Box, { sx: { position: 'relative', display: 'inline-block' }, children: [_jsx(IconButton, { disabled: !isDownload || (state === null || state === void 0 ? void 0 : state.isLoadingDownload), onClick: onDownload, sx: {
+                        bgcolor: function (theme) { return (color ? (theme.palette.mode === 'dark' ? '#303041' : color) : 'default'); },
+                    }, children: (state === null || state === void 0 ? void 0 : state.isDownloaded) ? (_jsx(CheckCircleOutlined, { color: "success" })) : (state === null || state === void 0 ? void 0 : state.isDownloadError) ? (_jsx(ErrorOutlineOutlined, { color: "error" })) : (_jsx(Download, { color: color !== null && color !== void 0 ? color : 'primary' })) }), (state === null || state === void 0 ? void 0 : state.isLoadingDownload) && (_jsx(CircularProgress, { size: "40px", sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        zIndex: 1,
+                    } }))] }) }));
 };

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

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