ikoncomponents 1.4.8 → 1.5.0

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

@@ -1,87 +1,119 @@
-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);
+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);

package/templates/default/ikoncomponents/image-cropper-upload/index.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { CropperFormWithModal } from './cropper-form-with-modal'
+import { CropperUploadImagesInfoProps, uploadedImagesToCropperImgObj } 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;
+}
+
+const ImageCropperContext = createContext<ImageCropperContextProps | undefined>(undefined)
+
+export function ImageCropperProvider({ children, uploadedImages, onCropperChange, modalOpen, onModalOpenChange }: ImageCropperProps) {
+
+    const [aspectRatioWiseImages, setAspectRatioWiseImages] = useState<AspectRatioWiseImagesProps>({
+        landscape: null,
+        potrait: null,
+        icon: null
+    });
+    const [originalImage, setOriginalImage] = useState<OriginalImageProps>({
+        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 (
+        <ImageCropperContext.Provider value={{
+            originalImage,
+            setOriginalImage,
+            aspectRatioWiseImages,
+            setAspectRatioWiseImages
+        }}>
+            {children}
+            {modalOpen && onModalOpenChange && <CropperFormWithModal open={modalOpen} onOpenChange={onModalOpenChange} onCropperChange={onCropperChange} />}
+        </ImageCropperContext.Provider>
+    )
+}
+
+export const useImageCropper = (): ImageCropperContextProps => {
+    const context = useContext(ImageCropperContext);
+    if (!context) {
+        throw new Error("useImageCropper must be used within a ImageCropperProvider");
+    }
+    return context;
+};

package/templates/default/ikoncomponents/image-cropper-upload/utils/index.ts

@@ -0,0 +1,117 @@
+import {
+  base64FileUpload,
+  singleFileUpload,
+} from "../../../utils/api/file-upload";
+import { AspectRatioWiseImagesProps, OriginalImageProps } from "..";
+import { FileinfoProps } from "../../../utils/api/file-upload/type";
+import { getResourceUrl } from "../../../utils/actions/common/utils";
+
+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 async function imageCropperFilesUpload(
+  originalImage: OriginalImageProps,
+  aspectRatioWiseImages?: AspectRatioWiseImagesProps,
+  resourceId?: string
+): Promise<CropperUploadImagesInfoProps | null> {
+  if (!originalImage.image) {
+    return null;
+  }
+
+  const originalImageInfo = await singleFileUpload(
+    originalImage.image as File,
+    resourceId
+  );
+
+  const cropperUploadImagesInfo: CropperUploadImagesInfoProps = {
+    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: CropperUploadImagesInfoProps | null
+): Promise<UploadedImagesToCropperImgObjProps | null> {
+  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: UploadedImagesToCropperImgObjProps = {
+    originalImage: {
+      image: originalImageUrl,
+      name: uploadedImages.imageName,
+      description: uploadedImages.imageDescription,
+    },
+    aspectRatioWiseImages: {
+      landscape: landscapeImageUrl,
+      potrait: portaitImageUrl,
+      icon: iconImageUrl,
+    },
+  };
+
+  return obj;
+}

package/templates/default/ikoncomponents/loading-spinner/index.tsx

@@ -0,0 +1,43 @@
+
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  className?: string;
+}
+
+export interface LoadingSpinnerProps extends ISVGProps {
+  visible?: boolean;
+}
+
+export const LoadingSpinner = ({
+  size = 48,
+  className,
+  visible = true,
+  ...props
+}: LoadingSpinnerProps) => {
+  if (!visible) return null;
+
+  return (
+    <div className="h-full w-full">
+      <div className="absolute inset-0 flex justify-center items-center z-50">
+        <svg
+          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)}
+        >
+          <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+        </svg>
+      </div>
+    </div>
+  );
+};

package/templates/default/ikoncomponents/main-layout/RefreshContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+interface RefreshContextType {
+  refresh: () => void;
+  refreshCounter: number;
+}
+
+const RefreshContext = createContext<RefreshContextType | undefined>(undefined);
+
+export function RefreshProvider({ children }: { children: React.ReactNode }) {
+  const [refreshCounter, setRefreshCounter] = useState(0);
+
+  const refresh = useCallback(() => {
+    setRefreshCounter((prev) => prev + 1);
+  }, []);
+
+  return (
+    <RefreshContext.Provider value={{ refresh, refreshCounter }}>
+      {children}
+    </RefreshContext.Provider>
+  );
+}
+
+export function useRefresh() {
+  const context = useContext(RefreshContext);
+  if (context === undefined) {
+    throw new Error('useRefresh must be used within a RefreshProvider');
+  }
+  return context;
+}

package/templates/default/ikoncomponents/main-layout/SidebarNavContext.tsx

@@ -0,0 +1,103 @@
+"use client"
+import { createContext, useContext, useState, 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;
+}
+
+const SidebarNavContext = createContext<SidebarNavContextType | undefined>(undefined);
+
+export function SidebarNavProvider({ children }: { children: ReactNode }) {
+    const [navItems, setNavItems] = useState<SidebarNavItem[]>([]);
+    const [header, setHeader] = useState<ReactNode | null>(null);
+    const [footer, setFooter] = useState<ReactNode | null>(null);
+
+    const addNavItem = (item: SidebarNavItem) => {
+        setNavItems((prevItems) => {
+            const exists = prevItems.some((navItem) => navItem.title === item.title);
+            if (exists) {
+                return prevItems.map((navItem) =>
+                    navItem.title === item.title ? { ...navItem, ...item } : navItem
+                );
+            }
+            return [...prevItems, item];
+        });
+    };
+
+    const removeNavItem = (title: string) => {
+        setNavItems((prevItems) => prevItems.filter((item) => item.title !== title));
+    };
+
+    const updateNavItem = (title: string, updates: Partial<SidebarNavItem>) => {
+        setNavItems((prevItems) =>
+            prevItems.map((item) =>
+                item.title === title ? { ...item, ...updates } : item
+            )
+        );
+    };
+
+    const setSidebarHeader = (header: ReactNode) => {
+        setHeader(header);
+    };
+    const setSidebarFooter = (footer: ReactNode) => {
+        setFooter(footer);
+    };
+
+    const clearNavItems = () => {
+        setNavItems([]);
+    };
+
+    return (
+        <SidebarNavContext.Provider
+            value={{
+                navItems,
+                header,
+                footer,
+                setNavItems,
+                addNavItem,
+                removeNavItem,
+                updateNavItem,
+                clearNavItems,
+                setSidebarHeader,
+                setSidebarFooter,
+            }}
+        >
+            {children}
+        </SidebarNavContext.Provider>
+    );
+}
+
+export function useSidebarNav() {
+    const context = useContext(SidebarNavContext);
+    if (!context) {
+        throw new Error('useSidebarNav must be used within a SidebarNavProvider');
+    }
+    return context;
+}

package/templates/default/ikoncomponents/main-layout/app-sidebar.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "../../ikonShade/sidebar";
+import { NavMain } from "./nav-main";
+import { useSidebarNav } from "./SidebarNavContext";
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+
+  const { navItems, header, footer } = useSidebarNav();
+  if (!navItems || navItems.length === 0) {
+    return null;
+  }
+
+
+  return (
+    <Sidebar className="ml-12" collapsible={"offcanvas"} {...props}>
+      {header && <SidebarHeader>
+        {header}
+      </SidebarHeader>}
+      <SidebarContent>
+        <NavMain />
+      </SidebarContent>
+      {footer && <SidebarFooter>
+        {footer}
+      </SidebarFooter>}
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/templates/default/ikoncomponents/main-layout/footer.tsx

@@ -0,0 +1,21 @@
+import { Copyright } from "lucide-react"
+import * as React from "react"
+
+export function Footer() {
+  return (
+    <footer className="ml-12 flex border-t px-4 py-2 justify-center lg:justify-start">
+      <div className="flex gap-2 items-center">
+        <Copyright className="size-4" />
+        <span>Powered By</span>
+        <a href="https://keross.com" target="_blank">
+          Keross
+        </a>
+        <span className="">|</span>
+        <span id="txtCopyrightYear" className="">
+          {new Date().getFullYear()}
+        </span>
+      </div>
+    </footer>
+  );
+}
+