ikoncomponents 1.5.6 → 1.5.7

package/dist/ikoncomponents/image-cropper-upload/cropper-form/index.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '../../../shadcn/input';
+import { Label } from '../../../shadcn/label';
+import { ToggleGroup, ToggleGroupItem } from '../../../shadcn/toggle-group';
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, FileImage, ImageIcon, RotateCcw, RotateCw, Square, ZoomIn, ZoomOut } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { ImageCropper } from '../image-cropper';
+import Image from 'next/image';
+import { AspectRatio } from '../../../shadcn/aspect-ratio';
+import { TextButton } from '../../buttons';
+import { toast } from 'sonner';
+import { FileInput } from '../../file-input';
+import { useImageCropper } from '..';
+const stateWiseAspectRatio = {
+    landscape: 4 / 3,
+    potrait: 3 / 4,
+    icon: 1 / 1
+};
+function CropperFormComponent({ onNewFileUpload }) {
+    const { originalImage, setOriginalImage, aspectRatioWiseImages, setAspectRatioWiseImages } = useImageCropper();
+    const [croppedImage, setCroppedImage] = useState(null);
+    const [activeState, setActiveState] = useState();
+    const [rotationAngle, setRotationAngle] = useState(0);
+    const [scale, setScale] = useState(1);
+    const [moveDirection, setMoveDirection] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [imageSrc, setImageSrc] = useState(null);
+    const handleDrop = (event) => {
+        event.preventDefault();
+        handleFileChange(event.dataTransfer.files[0]);
+    };
+    const handleFileChange = (file) => {
+        var _a;
+        if (typeof file === "string") {
+            setImageSrc(file);
+        }
+        else {
+            if ((_a = file === null || file === void 0 ? void 0 : file.type) === null || _a === void 0 ? void 0 : _a.startsWith("image/")) {
+                onNewFileUpload === null || onNewFileUpload === void 0 ? void 0 : onNewFileUpload();
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    setImageSrc(reader.result);
+                    setActiveState(undefined);
+                };
+                reader.readAsDataURL(file);
+                setOriginalImage(Object.assign(Object.assign({}, originalImage), { image: file, name: file.name }));
+            }
+            else {
+                toast.error("Please select a valid image file.");
+            }
+        }
+    };
+    useEffect(() => {
+        if (originalImage.image) {
+            handleFileChange(originalImage.image);
+        }
+    }, [originalImage.image]);
+    const getImagePreview = (state) => {
+        const imgSource = croppedImage && activeState === state ? croppedImage : aspectRatioWiseImages[state];
+        return (_jsxs(_Fragment, { children: [_jsx("h3", { className: 'mb-3', children: state }), _jsx(AspectRatio, { ratio: stateWiseAspectRatio[state], className: 'bg-muted', children: imgSource &&
+                        _jsx(Image, { src: imgSource || "", alt: `Preview ${state}`, fill: true }) })] }));
+    };
+    useEffect(() => {
+        if (croppedImage) {
+            if (activeState) {
+                setAspectRatioWiseImages(Object.assign(Object.assign({}, aspectRatioWiseImages), { [activeState]: croppedImage }));
+            }
+            else {
+                setAspectRatioWiseImages({
+                    landscape: croppedImage,
+                    potrait: croppedImage,
+                    icon: croppedImage
+                });
+            }
+        }
+    }, [croppedImage]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: 'flex flex-col gap-3 h-full overflow-auto', children: [_jsxs("div", { className: 'flex flex-col lg:flex-row gap-3 justify-between', children: [_jsxs("div", { className: 'w-full flex flex-col gap-4', children: [_jsx(Label, { htmlFor: "imageName", children: "Image Name" }), _jsx(FileInput, { id: "inputImage", accept: "image/*", fileNamePlaceholder: "Enter image name", fileName: (originalImage === null || originalImage === void 0 ? void 0 : originalImage.name) || "", onChange: (e) => {
+                                        var _a;
+                                        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                        if (file) {
+                                            handleFileChange(file);
+                                        }
+                                    }, onFileNameChange: (e) => {
+                                        setOriginalImage(Object.assign(Object.assign({}, originalImage), { name: e.target.value }));
+                                    } })] }), _jsxs("div", { className: 'w-full flex flex-col gap-4', children: [_jsx(Label, { htmlFor: "imageDescription", children: "Image Description" }), _jsx(Input, { id: "imageDescription", placeholder: "Enter image Description", value: (originalImage === null || originalImage === void 0 ? void 0 : originalImage.description) || "", onChange: (e) => setOriginalImage(Object.assign(Object.assign({}, originalImage), { description: e.target.value })) })] })] }), _jsxs("div", { className: 'flex flex-col lg:flex-row gap-3', children: [_jsxs("div", { className: 'flex-grow flex flex-col gap-3', children: [_jsxs("div", { children: [_jsx("h3", { className: 'mb-3', children: "Original Image" }), _jsx(AspectRatio, { ratio: 4 / 3, className: 'flex justify-center items-center bg-muted text-muted-foreground', onDrop: handleDrop, onDragOver: (e) => e.preventDefault(), children: imageSrc ?
+                                                _jsx(ImageCropper, { src: imageSrc, onCroppedImage: setCroppedImage, aspectRatio: stateWiseAspectRatio[activeState || "icon"], rotationAngle: rotationAngle, zoomLevel: scale, moveDirection: moveDirection })
+                                                :
+                                                    _jsxs("div", { className: "text-center", children: [_jsx(Label, { htmlFor: "inputImage", children: "Drag and drop an image here" }), _jsx("div", { className: "mt-3", children: _jsx(TextButton, { variant: "outline", onClick: () => { var _a; return (_a = document.getElementById("inputImage")) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Browse Image" }) })] }) })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-3 justify-between", children: [_jsx("div", { children: _jsxs(ToggleGroup, { type: "single", variant: 'outline', value: activeState, onValueChange: (value) => setActiveState(value), children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "landscape", children: _jsx(ImageIcon, {}) }), _jsx(ToggleGroupItem, { className: "rounded-none border-x-0", value: "potrait", children: _jsx(FileImage, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none', value: "icon", children: _jsx(Square, {}) })] }) }), _jsxs("div", { className: 'flex flex-col lg:flex-row gap-3 justify-between', children: [_jsxs(ToggleGroup, { type: "single", variant: 'outline', value: "", onValueChange: (value) => setRotationAngle(parseInt(value)), children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "90", children: _jsx(RotateCw, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none border-s-0', value: "-90", children: _jsx(RotateCcw, {}) })] }), _jsxs(ToggleGroup, { type: "single", variant: 'outline', value: '', children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "up", onClick: () => setMoveDirection({ x: 0, y: -5 }), children: _jsx(ArrowUp, {}) }), _jsx(ToggleGroupItem, { className: "rounded-none border-x-0", value: "down", onClick: () => setMoveDirection({ x: 0, y: 5 }), children: _jsx(ArrowDown, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-none border-e-0', value: "left", onClick: () => setMoveDirection({ x: -5, y: 0 }), children: _jsx(ArrowLeft, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none', value: "right", onClick: () => setMoveDirection({ x: 5, y: 0 }), children: _jsx(ArrowRight, {}) })] }), _jsxs(ToggleGroup, { type: "single", variant: 'outline', value: "", onValueChange: (value) => setScale(pre => pre + parseFloat(value)), children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "0.1", children: _jsx(ZoomIn, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none border-s-0', value: "-0.1", children: _jsx(ZoomOut, {}) })] })] })] })] }), _jsxs("div", { className: "flex flex-row lg:flex-col gap-3 w-full lg:w-48", children: [_jsx("div", { className: 'w-5/5', children: getImagePreview("landscape") }), _jsx("div", { className: 'w-4/5', children: getImagePreview("potrait") }), _jsx("div", { className: 'w-3/5', children: getImagePreview("icon") })] })] })] }) }));
+}
+export const CropperForm = memo(CropperFormComponent);

package/dist/ikoncomponents/image-cropper-upload/cropper-form-with-modal/index.d.ts

@@ -0,0 +1,6 @@
+import { AspectRatioWiseImagesProps, OriginalImageProps } from '..';
+export declare function CropperFormWithModal({ open, onOpenChange, onCropperChange }: Readonly<{
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCropperChange: (originalImage: OriginalImageProps, aspectRatioWiseImages: AspectRatioWiseImagesProps) => void;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/image-cropper-upload/cropper-form-with-modal/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../shadcn/dialog';
+import { CropperForm } from '../cropper-form';
+import { TextButton } from '../../buttons';
+import { useImageCropper } from '..';
+export function CropperFormWithModal({ open, onOpenChange, onCropperChange }) {
+    const { originalImage, aspectRatioWiseImages } = useImageCropper();
+    return (_jsx(Dialog, { modal: true, open: open, onOpenChange: (isOpen) => {
+            onOpenChange(isOpen);
+        }, children: _jsxs(DialogContent, { className: "max-w-full lg:max-w-5xl max-h-full overflow-auto", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Image to upload" }) }), _jsx(CropperForm, {}), _jsx(DialogFooter, { children: _jsx(TextButton, { onClick: () => {
+                            onCropperChange(originalImage, aspectRatioWiseImages);
+                            onOpenChange(false);
+                        }, children: "Save Changes" }) })] }) }));
+}

package/dist/ikoncomponents/image-cropper-upload/image-cropper/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "cropperjs/dist/cropper.css";
+export interface CropperImgProps {
+    src: string | undefined;
+    onCroppedImage: (imageUrl: string) => void;
+    aspectRatio: number;
+    rotationAngle: number;
+    zoomLevel: number;
+    moveDirection: {
+        x: number;
+        y: number;
+    };
+}
+export declare const ImageCropper: React.NamedExoticComponent<CropperImgProps>;

package/{templates/default/ikoncomponents/image-cropper-upload/image-cropper/index.tsx → dist/ikoncomponents/image-cropper-upload/image-cropper/index.js}

@@ -1,119 +1,87 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from "react";
-import Cropper, { ReactCropperElement } from "react-cropper";
-import "cropperjs/dist/cropper.css";
-
-export interface CropperImgProps {
-    src: string | undefined; // imageSrc can be a string (image URL or base64) or undefined
-    onCroppedImage: (imageUrl: string) => void; // Callback function from parent to pass cropped image
-    aspectRatio: number;
-    rotationAngle: number; // Rotation angle passed from the parent
-    zoomLevel: number; // Add zoomLevel prop
-    moveDirection: { x: number; y: number }; // Movement props
-}
-
-const ImageCropperComponent: React.FC<CropperImgProps> = ({ src, onCroppedImage, aspectRatio, rotationAngle, zoomLevel, moveDirection }) => {
-    const cropperRef = useRef<ReactCropperElement>(null);
-
-    function onCrop(event: any) {
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            //cropper.setDragMode('move');
-            const croppedCanvas = cropper.getCroppedCanvas();
-            const croppedImageUrl = croppedCanvas.toDataURL("image/webp"); // Data URL for preview
-            onCroppedImage(croppedImageUrl);
-        } else {
-            console.log("Cropper instance is not available.");
-        }
-    };
-
-    useEffect(() => {
-        // Rotate the image whenever the rotation angle changes
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            cropper.rotate(rotationAngle); // Apply the rotation to the image
-        }
-
-    }, [rotationAngle]); // Effect will run whenever rotationAngle changes
-
-    useEffect(() => {
-        // Zoom the image whenever the zoom level changes
-        const cropper = cropperRef.current?.cropper;
-
-        if (cropper) {
-            const cropBoxData = cropper.getCropBoxData();
-            if (cropBoxData.width) {
-                console.log('Inside cropper scale')
-                cropper.scale(zoomLevel); // Apply the zoom level
-            }
-            // Apply zoom directly without using getZoom method
-        }
-    }, [zoomLevel]); // Effect will run whenever zoomLevel changes
-
-    // Move the image based on the moveDirection prop
-    useEffect(() => {
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            // Make sure moveDirection is available before calling move
-            const cropBoxData = cropper.getCropBoxData();
-            if (cropBoxData.width) {
-                const { x, y } = moveDirection;
-                if (typeof x === "number" && typeof y === "number") {
-                    cropper.move(x, y); // Move the image
-                }
-            }
-
-        }
-    }, [moveDirection]); // This effect runs whenever moveDirection changes
-
-    useEffect(() => {
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            cropper.setAspectRatio(aspectRatio); // Dynamically set the aspect ratio
-            if (aspectRatio === 1) {
-                // Get the displayed (canvas) dimensions of the image
-                const canvasData = cropper.getCanvasData();
-                const canvasWidth = canvasData.width;  // Displayed width of the image
-                const canvasHeight = canvasData.height; // Displayed height of the image
-                const canvasLeft = canvasData.left;  // Left offset of the image within the container
-                const canvasTop = canvasData.top;    // Top offset of the image within the container
-
-                // Define the desired crop box dimensions
-                const cropBoxWidth = 200;  // Desired crop box width
-                const cropBoxHeight = 100; // Desired crop box height
-
-                // Calculate the center position for the crop box
-                const left = canvasLeft + (canvasWidth - cropBoxWidth) / 2;
-                const top = canvasTop + (canvasHeight - cropBoxHeight) / 2;
-
-                // Set the crop box data
-                cropper.setCropBoxData({
-                    left: left,
-                    top: top,
-                    width: cropBoxWidth,
-                    height: cropBoxHeight,
-                });
-            }
-
-        }
-
-    }, [aspectRatio]); // Trigger this effect whenever aspectRatio changes
-
-    return (
-        <Cropper
-            src={src}
-            style={{ height: "100%", width: "100%", objectFit: "contain" }}
-            guides={true} // Show guides for cropping
-            crop={onCrop} // Callback to capture the cropped area
-            ref={cropperRef}
-            dragMode='move'
-            movable={true}
-            zoomable={true} // Allow zooming of the image
-            scalable={true} // Prevent scaling of the crop box
-            cropBoxMovable={true} // Allow the crop box to be moved inside the image
-            cropBoxResizable={false} // Disable resizing the crop box
-
-        />
-    );
-};
-
-export const ImageCropper = memo(ImageCropperComponent);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+import Cropper from "react-cropper";
+import "cropperjs/dist/cropper.css";
+const ImageCropperComponent = ({ src, onCroppedImage, aspectRatio, rotationAngle, zoomLevel, moveDirection }) => {
+    const cropperRef = useRef(null);
+    function onCrop(event) {
+        var _a;
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            //cropper.setDragMode('move');
+            const croppedCanvas = cropper.getCroppedCanvas();
+            const croppedImageUrl = croppedCanvas.toDataURL("image/webp"); // Data URL for preview
+            onCroppedImage(croppedImageUrl);
+        }
+        else {
+            console.log("Cropper instance is not available.");
+        }
+    }
+    ;
+    useEffect(() => {
+        var _a;
+        // Rotate the image whenever the rotation angle changes
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            cropper.rotate(rotationAngle); // Apply the rotation to the image
+        }
+    }, [rotationAngle]); // Effect will run whenever rotationAngle changes
+    useEffect(() => {
+        var _a;
+        // Zoom the image whenever the zoom level changes
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            const cropBoxData = cropper.getCropBoxData();
+            if (cropBoxData.width) {
+                console.log('Inside cropper scale');
+                cropper.scale(zoomLevel); // Apply the zoom level
+            }
+            // Apply zoom directly without using getZoom method
+        }
+    }, [zoomLevel]); // Effect will run whenever zoomLevel changes
+    // Move the image based on the moveDirection prop
+    useEffect(() => {
+        var _a;
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            // Make sure moveDirection is available before calling move
+            const cropBoxData = cropper.getCropBoxData();
+            if (cropBoxData.width) {
+                const { x, y } = moveDirection;
+                if (typeof x === "number" && typeof y === "number") {
+                    cropper.move(x, y); // Move the image
+                }
+            }
+        }
+    }, [moveDirection]); // This effect runs whenever moveDirection changes
+    useEffect(() => {
+        var _a;
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            cropper.setAspectRatio(aspectRatio); // Dynamically set the aspect ratio
+            if (aspectRatio === 1) {
+                // Get the displayed (canvas) dimensions of the image
+                const canvasData = cropper.getCanvasData();
+                const canvasWidth = canvasData.width; // Displayed width of the image
+                const canvasHeight = canvasData.height; // Displayed height of the image
+                const canvasLeft = canvasData.left; // Left offset of the image within the container
+                const canvasTop = canvasData.top; // Top offset of the image within the container
+                // Define the desired crop box dimensions
+                const cropBoxWidth = 200; // Desired crop box width
+                const cropBoxHeight = 100; // Desired crop box height
+                // Calculate the center position for the crop box
+                const left = canvasLeft + (canvasWidth - cropBoxWidth) / 2;
+                const top = canvasTop + (canvasHeight - cropBoxHeight) / 2;
+                // Set the crop box data
+                cropper.setCropBoxData({
+                    left: left,
+                    top: top,
+                    width: cropBoxWidth,
+                    height: cropBoxHeight,
+                });
+            }
+        }
+    }, [aspectRatio]); // Trigger this effect whenever aspectRatio changes
+    return (_jsx(Cropper, { src: src, style: { height: "100%", width: "100%", objectFit: "contain" }, guides: true, crop: onCrop, ref: cropperRef, dragMode: 'move', movable: true, zoomable: true, scalable: true, cropBoxMovable: true, cropBoxResizable: false }));
+};
+export const ImageCropper = memo(ImageCropperComponent);

package/dist/ikoncomponents/image-cropper-upload/index.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { CropperUploadImagesInfoProps } from './utils';
+export interface ImageCropperContextProps {
+    originalImage: OriginalImageProps;
+    setOriginalImage: (originalImage: OriginalImageProps) => void;
+    aspectRatioWiseImages: AspectRatioWiseImagesProps;
+    setAspectRatioWiseImages: (aspectRatioWiseImages: AspectRatioWiseImagesProps) => void;
+}
+export interface AspectRatioWiseImagesProps {
+    landscape: string | null;
+    potrait: string | null;
+    icon: string | null;
+}
+export interface OriginalImageProps {
+    image: string | File | null;
+    name?: string;
+    description?: string;
+}
+export interface ImageCropperProps {
+    children: ReactNode;
+    uploadedImages: CropperUploadImagesInfoProps | null;
+    onCropperChange: (originalImage: OriginalImageProps, aspectRatioWiseImages: AspectRatioWiseImagesProps) => void;
+    modalOpen?: boolean;
+    onModalOpenChange?: (open: boolean) => void;
+}
+export declare function ImageCropperProvider({ children, uploadedImages, onCropperChange, modalOpen, onModalOpenChange }: ImageCropperProps): import("react/jsx-runtime").JSX.Element;
+export declare const useImageCropper: () => ImageCropperContextProps;

package/dist/ikoncomponents/image-cropper-upload/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import { CropperFormWithModal } from './cropper-form-with-modal';
+import { uploadedImagesToCropperImgObj } from './utils';
+const ImageCropperContext = createContext(undefined);
+export function ImageCropperProvider({ children, uploadedImages, onCropperChange, modalOpen, onModalOpenChange }) {
+    const [aspectRatioWiseImages, setAspectRatioWiseImages] = useState({
+        landscape: null,
+        potrait: null,
+        icon: null
+    });
+    const [originalImage, setOriginalImage] = useState({
+        image: null,
+        name: "",
+        description: "",
+    });
+    useEffect(() => {
+        async function updateCropperImages() {
+            if (!uploadedImages)
+                return; // Prevent unnecessary processing
+            try {
+                const res = await uploadedImagesToCropperImgObj(uploadedImages);
+                if (res) {
+                    // Check if state is different before updating
+                    setOriginalImage((prev) => JSON.stringify(prev) === JSON.stringify(res.originalImage) ? prev : res.originalImage);
+                    setAspectRatioWiseImages((prev) => JSON.stringify(prev) === JSON.stringify(res.aspectRatioWiseImages) ? prev : res.aspectRatioWiseImages);
+                }
+            }
+            catch (error) {
+                console.error("Error processing uploaded images:", error);
+            }
+        }
+        updateCropperImages();
+    }, [uploadedImages]); // Runs only when `uploadedImages` changes
+    return (_jsxs(ImageCropperContext.Provider, { value: {
+            originalImage,
+            setOriginalImage,
+            aspectRatioWiseImages,
+            setAspectRatioWiseImages
+        }, children: [children, modalOpen && onModalOpenChange && _jsx(CropperFormWithModal, { open: modalOpen, onOpenChange: onModalOpenChange, onCropperChange: onCropperChange })] }));
+}
+export const useImageCropper = () => {
+    const context = useContext(ImageCropperContext);
+    if (!context) {
+        throw new Error("useImageCropper must be used within a ImageCropperProvider");
+    }
+    return context;
+};

package/dist/ikoncomponents/image-cropper-upload/utils/index.d.ts

@@ -0,0 +1,16 @@
+import { AspectRatioWiseImagesProps, OriginalImageProps } from "..";
+import { FileinfoProps } from "../../../utils/api/file-upload/type";
+export interface CropperUploadImagesInfoProps {
+    originalImageInfo?: FileinfoProps | null;
+    imageName?: string;
+    imageDescription?: string;
+    landscapeImageInfo?: FileinfoProps | null;
+    portaitImageInfo?: FileinfoProps | null;
+    iconImageInfo?: FileinfoProps | null;
+}
+export interface UploadedImagesToCropperImgObjProps {
+    originalImage: OriginalImageProps;
+    aspectRatioWiseImages: AspectRatioWiseImagesProps;
+}
+export declare function imageCropperFilesUpload(originalImage: OriginalImageProps, aspectRatioWiseImages?: AspectRatioWiseImagesProps, resourceId?: string): Promise<CropperUploadImagesInfoProps | null>;
+export declare function uploadedImagesToCropperImgObj(uploadedImages: CropperUploadImagesInfoProps | null): Promise<UploadedImagesToCropperImgObjProps | null>;

package/dist/ikoncomponents/image-cropper-upload/utils/index.js

@@ -0,0 +1,73 @@
+import { base64FileUpload, singleFileUpload, } from "../../../utils/api/file-upload";
+import { getResourceUrl } from "../../../utils/actions/common/utils";
+export async function imageCropperFilesUpload(originalImage, aspectRatioWiseImages, resourceId) {
+    if (!originalImage.image) {
+        return null;
+    }
+    const originalImageInfo = await singleFileUpload(originalImage.image, resourceId);
+    const cropperUploadImagesInfo = {
+        originalImageInfo: originalImageInfo,
+        imageName: originalImage.name,
+        imageDescription: originalImage.description,
+        landscapeImageInfo: null,
+        portaitImageInfo: null,
+        iconImageInfo: null,
+    };
+    if (aspectRatioWiseImages) {
+        if (aspectRatioWiseImages.landscape) {
+            try {
+                cropperUploadImagesInfo["landscapeImageInfo"] = await base64FileUpload(aspectRatioWiseImages.landscape, originalImage.name + "_L.webp", "image/webp");
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        if (aspectRatioWiseImages.potrait) {
+            try {
+                cropperUploadImagesInfo["portaitImageInfo"] = await base64FileUpload(aspectRatioWiseImages.potrait, originalImage.name + "_P.webp", "image/webp");
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        if (aspectRatioWiseImages.icon) {
+            try {
+                cropperUploadImagesInfo["iconImageInfo"] = await base64FileUpload(aspectRatioWiseImages.icon, originalImage.name + "_I.webp", "image/webp");
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+    }
+    return cropperUploadImagesInfo;
+}
+export async function uploadedImagesToCropperImgObj(uploadedImages) {
+    if (!uploadedImages) {
+        return null;
+    }
+    const originalImageUrl = uploadedImages.originalImageInfo
+        ? await getResourceUrl(uploadedImages.originalImageInfo)
+        : null;
+    const landscapeImageUrl = uploadedImages.landscapeImageInfo
+        ? await getResourceUrl(uploadedImages.landscapeImageInfo)
+        : null;
+    const portaitImageUrl = uploadedImages.portaitImageInfo
+        ? await getResourceUrl(uploadedImages.portaitImageInfo)
+        : null;
+    const iconImageUrl = uploadedImages.iconImageInfo
+        ? await getResourceUrl(uploadedImages.iconImageInfo)
+        : null;
+    const obj = {
+        originalImage: {
+            image: originalImageUrl,
+            name: uploadedImages.imageName,
+            description: uploadedImages.imageDescription,
+        },
+        aspectRatioWiseImages: {
+            landscape: landscapeImageUrl,
+            potrait: portaitImageUrl,
+            icon: iconImageUrl,
+        },
+    };
+    return obj;
+}

package/dist/ikoncomponents/loading-spinner/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+    className?: string;
+}
+export interface LoadingSpinnerProps extends ISVGProps {
+    visible?: boolean;
+}
+export declare const LoadingSpinner: ({ size, className, visible, ...props }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ikoncomponents/loading-spinner/index.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn";
+export const LoadingSpinner = (_a) => {
+    var { size = 48, className, visible = true } = _a, props = __rest(_a, ["size", "className", "visible"]);
+    if (!visible)
+        return null;
+    return (_jsx("div", { className: "h-full w-full", children: _jsx("div", { className: "absolute inset-0 flex justify-center items-center z-50", children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size }, props, { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("animate-spin", className), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })) }) }));
+};

package/dist/ikoncomponents/main-layout/RefreshContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface RefreshContextType {
+    refresh: () => void;
+    refreshCounter: number;
+}
+export declare function RefreshProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useRefresh(): RefreshContextType;
+export {};

package/dist/ikoncomponents/main-layout/RefreshContext.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from 'react';
+const RefreshContext = createContext(undefined);
+export function RefreshProvider({ children }) {
+    const [refreshCounter, setRefreshCounter] = useState(0);
+    const refresh = useCallback(() => {
+        setRefreshCounter((prev) => prev + 1);
+    }, []);
+    return (_jsx(RefreshContext.Provider, { value: { refresh, refreshCounter }, children: children }));
+}
+export function useRefresh() {
+    const context = useContext(RefreshContext);
+    if (context === undefined) {
+        throw new Error('useRefresh must be used within a RefreshProvider');
+    }
+    return context;
+}

package/dist/ikoncomponents/main-layout/SidebarNavContext.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface SidebarNavSubItem {
+    title: string;
+    url: string;
+    isActive?: boolean;
+}
+export interface SidebarNavItem {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    default?: boolean;
+    items?: SidebarNavSubItem[];
+    header?: ReactNode;
+    footer?: ReactNode;
+}
+export interface SidebarNavContextType {
+    navItems: SidebarNavItem[];
+    header: ReactNode | null;
+    footer: ReactNode | null;
+    setNavItems: (items: SidebarNavItem[]) => void;
+    addNavItem: (item: SidebarNavItem) => void;
+    removeNavItem: (title: string) => void;
+    updateNavItem: (title: string, updates: Partial<SidebarNavItem>) => void;
+    clearNavItems: () => void;
+    setSidebarHeader: (header: ReactNode) => void;
+    setSidebarFooter: (footer: ReactNode) => void;
+}
+export declare function SidebarNavProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSidebarNav(): SidebarNavContextType;