ikoncomponents 1.5.8 → 1.5.10

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

@@ -1,95 +0,0 @@
-"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

@@ -1,117 +0,0 @@
-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

@@ -1,43 +0,0 @@
-
-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

@@ -1,30 +0,0 @@
-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

@@ -1,103 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarRail,
-} from "../../shadcn/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

@@ -1,21 +0,0 @@
-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>
-  );
-}
-

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

@@ -1,53 +0,0 @@
-
-import { AppBreadcrumb } from "../app-breadcrumb";
-import * as React from "react"
-
-import { ThemeToggleBtn } from "../theme-toggle-btn";
-import { Separator } from "../../shadcn/separator";
-import { SidebarTrigger } from "../../shadcn/sidebar";
-import { Bell, LayoutGrid, Play } from "lucide-react";
-import { IconButton, IconButtonWithTooltip, IconTextButton } from "../buttons";
-import { useSidebarNav } from "./SidebarNavContext";
-import Link from "next/link";
-
-export function Header({ platformUrl }: { platformUrl: string }) {
-
-  const { navItems } = useSidebarNav();
-
-
-  return (
-    <header className="ml-12 flex h-12 border-b shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-      <div className="flex items-center justify-between gap-2 px-4 w-full">
-        <div className="flex items-center gap-2">
-          {(!navItems || navItems.length === 0) ? <div></div> : <SidebarTrigger className="-ml-1" />}
-          {(!navItems || navItems.length === 0) ?
-            <div></div> :
-            <Separator
-              orientation="vertical"
-              className="mr-2 data-[orientation=vertical]:h-4"
-            />
-          }
-
-          <AppBreadcrumb />
-        </div>
-        <div className="ml-auto flex gap-4">
-          <IconButtonWithTooltip className="px-2!" tooltipContent={"Notifications"}>
-            <Bell />
-          </IconButtonWithTooltip>
-          <ThemeToggleBtn />
-          <Link href={`${platformUrl}/app-store`}>
-            <IconTextButton
-              variant={"default"}
-            >
-              <Play />
-              App Store
-            </IconTextButton>
-          </Link>
-          {/* <IconButton>
-            <LayoutGrid />
-          </IconButton> */}
-        </div>
-      </div>
-    </header>
-  );
-}

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

@@ -1,38 +0,0 @@
-import React, { ReactNode } from 'react'
-import { MainSidebar } from './main-sidebar'
-import { SidebarInset, SidebarProvider } from '../../shadcn/sidebar'
-import { DialogProvider } from '../alert-dialog/dialog-context'
-import { AppSidebar } from './app-sidebar'
-import { Header } from './header'
-import { Footer } from './footer'
-import { SidebarNavProvider } from './SidebarNavContext'
-
-export function MainLayout({ 
-    children, 
-    baseUrl, 
-    platformUrl 
-}: { 
-    children: ReactNode; 
-    baseUrl: string;
-    platformUrl: string;
-}) {
-    return (
-        <>
-            <MainSidebar baseUrl={baseUrl} platformUrl={platformUrl} />
-            <SidebarProvider>
-                <DialogProvider>
-                    <SidebarNavProvider>
-                        <AppSidebar />
-                        <SidebarInset className="flex flex-col h-screen">
-                            <Header platformUrl={platformUrl} />
-                            <div className="flex flex-col gap-4 p-4 pt-0 ml-12 grow overflow-auto scrollbar-hidden">
-                                {children}
-                            </div>
-                            <Footer />
-                        </SidebarInset>
-                    </SidebarNavProvider>
-                </DialogProvider>
-            </SidebarProvider>
-        </>
-    )
-}