ikoncomponents 1.5.8 → 1.5.10

package/templates/default/ikoncomponents/image-cropper-upload/components/newImageUploadForm.tsx

@@ -1,352 +0,0 @@
-import React, { useState, useEffect, memo } from "react";
-import {
-  ZoomIn,
-  ZoomOut,
-  RotateCw,
-  RotateCcw,
-  ArrowUp,
-  ArrowDown,
-  ArrowLeft,
-  ArrowRight,
-  ImageIcon,
-  FileImage,
-  Square,
-  Upload,
-} from "lucide-react";
-import { Label } from "../../../shadcn/label";
-import { Input } from "../../../shadcn/input";
-import { Button } from "../../../shadcn/button";
-import { NewCropperImg } from "./newCropper";
-import Image from "next/image";
-
-type ActiveState = "first" | "second" | "third";
-
-export interface ImageFormProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  onImageSubmit: (data: string | null) => void;
-}
-
-const NewImageFormComponent: React.FC<ImageFormProps> = ({
-  open,
-  setOpen,
-  onImageSubmit,
-}) => {
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-  const [croppedImage, setCroppedImage] = useState<string | null>(null);
-  const [prevImages, setPrevImages] = useState<
-    Record<ActiveState, string | null>
-  >({
-    first: null,
-    second: null,
-    third: null,
-  });
-  const [aspectRatio, setAspectRatio] = useState<number>(4 / 3);
-  const [activeState, setActiveState] = useState<ActiveState>("first");
-  const [rotationAngle, setRotationAngle] = useState(0);
-  const [scale, setScale] = useState(1);
-  const [moveDirection, setMoveDirection] = useState<{ x: number; y: number }>({
-    x: 0,
-    y: 0,
-  });
-  const [fileName, setFileName] = useState<string | undefined>("");
-
-  const handleImageSubmit = () => {
-    console.log("Image Submit Button is pressed");
-    console.log(prevImages);
-    onImageSubmit(prevImages.third);
-    setOpen(false);
-  };
-
-  const rotateImage = (angle: number) => {
-    setRotationAngle((prevAngle) => prevAngle + angle);
-  };
-
-  const handleMoveUp = () => {
-    setMoveDirection({ x: 0, y: -5 });
-  };
-
-  const handleMoveDown = () => {
-    setMoveDirection({ x: 0, y: 5 });
-  };
-
-  const handleMoveLeft = () => {
-    setMoveDirection({ x: -5, y: 0 });
-  };
-
-  const handleMoveRight = () => {
-    setMoveDirection({ x: 5, y: 0 });
-  };
-
-  // Handle zoom in
-  const zoomIn = () => {
-    setScale((prevScale) => {
-      const newScale = prevScale + 0.2;
-      if (newScale <= 2) {
-        // Ensure scale does not exceed the max value
-        return newScale;
-      }
-      return prevScale;
-    });
-  };
-
-  // Handle zoom out
-  const zoomOut = () => {
-    setScale((prevScale) => {
-      const newScale = prevScale - 0.2;
-      if (newScale >= 0.2) {
-        // Ensure scale does not go below the min value
-        return newScale;
-      }
-      return prevScale;
-    });
-  };
-
-  const handleAspectRatioChange = (ratio: number, stateName: ActiveState) => {
-    setAspectRatio(ratio);
-    setActiveState(stateName);
-  };
-
-  const handleFileChange = (file: File) => {
-    if (file.type.startsWith("image/")) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setImageSrc(reader.result as string);
-        setFileName((prev) => prev || file.name);
-      };
-      reader.readAsDataURL(file);
-    } else {
-      alert("Please drop a valid image file.");
-    }
-  };
-
-  const handleDrop = (event: React.DragEvent) => {
-    event.preventDefault();
-    handleFileChange(event.dataTransfer.files[0]);
-  };
-
-  const getImagePreview = (state: ActiveState) => {
-    const imgSource =
-      croppedImage && activeState === state ? croppedImage : prevImages[state];
-    // const imgSource = prevImages[state];
-    return imgSource ? (
-      <div
-        className={`
-            ${state === "first"
-            ? "relative w-3/5 h-[200px] bg-slate-400"
-            : state === "second"
-              ? "relative w-1/2 h-[220px] bg-slate-400"
-              : "relative w-1/3 h-[120px] bg-slate-400"
-          }`}
-      >
-        <Image
-          src={imgSource || ""}
-          alt={`Preview ${state}`}
-          layout="fill"
-          objectFit="70vh"
-        />
-      </div>
-    ) : (
-      <div
-        className={`
-            ${state === "first"
-            ? "relative w-3/5 h-[200px] bg-slate-400"
-            : state === "second"
-              ? "relative w-1/2 h-[220px] bg-slate-400"
-              : "relative w-1/3 h-[120px] bg-slate-400"
-          }`}
-      ></div>
-    );
-  };
-
-  useEffect(() => {
-    if (croppedImage) {
-      if (
-        prevImages.first === null ||
-        prevImages.second === null ||
-        prevImages.third === null
-      ) {
-        setPrevImages({
-          first: croppedImage,
-          second: croppedImage,
-          third: croppedImage,
-        });
-      } else {
-        setPrevImages((prev) => ({ ...prev, [activeState]: croppedImage }));
-      }
-    }
-  }, [croppedImage]);
-
-  return (
-    <>
-      {/* Form UI */}
-      <div className="flex flex-row gap-2">
-        <div className="flex-1">
-          <Label htmlFor="imageName">Image Name</Label>
-          <Input
-            id="imageName"
-            placeholder="Enter image name"
-            value={fileName}
-            onChange={(e) => setFileName(e.target.value)}
-          />
-        </div>
-        <div className="self-end">
-          <Button
-            variant="outline"
-            onClick={() => document.getElementById("inputImage1")?.click()}
-          >
-            <Upload />
-          </Button>
-          <Input
-            id="inputImage1"
-            type="file"
-            accept="image/png, image/jpeg"
-            className="hidden"
-            onChange={(e) => {
-              const file = e.target.files?.[0];
-              if (file && file.type.startsWith("image/")) {
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                  setImageSrc(reader.result as string);
-                  setFileName((prevFileName) => prevFileName || file.name);
-                };
-                reader.readAsDataURL(file);
-                setPrevImages({
-                  first: null,
-                  second: null,
-                  third: null,
-                });
-              }
-            }}
-          />
-        </div>
-        <div className="flex-1">
-          <Label htmlFor="imageDesc">Image Description</Label>
-          <Input id="imageDesc" placeholder="Describe your image" />
-        </div>
-      </div>
-
-      {/* Image Upload */}
-      <div className="flex flex-row gap-2">
-        <div
-          className="w-3/5 flex justify-center items-center border-2 border-dashed border-gray-400 bg-gray-100"
-          style={{ height: "70vh" }}
-          onDrop={handleDrop}
-          onDragOver={(e) => e.preventDefault()}
-        >
-          {imageSrc ? (
-            <NewCropperImg
-              imageSrc={imageSrc}
-              onCroppedImage={setCroppedImage}
-              aspectRatio={aspectRatio}
-              rotationAngle={rotationAngle}
-              zoomLevel={scale}
-              moveDirection={moveDirection}
-              currentState={activeState}
-            />
-          ) : (
-            <div className="text-center">
-              <Label htmlFor="inputImage">Drag and drop an image here</Label>
-              <div className="mt-4">
-                <Button
-                  variant="outline"
-                  onClick={() => document.getElementById("inputImage")?.click()}
-                >
-                  Upload Image
-                </Button>
-                <Input
-                  id="inputImage"
-                  type="file"
-                  accept="image/png, image/jpeg"
-                  className="hidden"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      handleFileChange(file);
-                    }
-                  }}
-                />
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Image Previews */}
-        <div className="w-2/5 flex flex-col gap-2">
-          <h3>Landscape</h3>
-          {getImagePreview("first")}
-          <h3>Potrait</h3>
-          {getImagePreview("second")}
-          <h3>Icon</h3>
-          {getImagePreview("third")}
-        </div>
-      </div>
-
-      {/* Controls */}
-
-      <div className="flex flex-row gap-1">
-        <div className="w-3/5 flex flex-row justify-between">
-          <div>
-            <Button
-              variant="outline"
-              onClick={() => handleAspectRatioChange(4 / 3, "first")}
-            >
-              <ImageIcon />
-            </Button>
-            <Button
-              variant="outline"
-              onClick={() => handleAspectRatioChange(3 / 4, "second")}
-            >
-              <FileImage />
-            </Button>
-            <Button
-              variant="outline"
-              onClick={() => handleAspectRatioChange(1 / 1, "third")}
-            >
-              <Square />
-            </Button>
-          </div>
-
-          <div>
-            <Button onClick={() => rotateImage(90)} variant="outline">
-              {<RotateCw />}
-            </Button>
-
-            <Button onClick={() => rotateImage(-90)} variant="outline">
-              {<RotateCcw />}
-            </Button>
-          </div>
-
-          <div>
-            <Button onClick={() => zoomIn()} variant="outline">
-              {<ZoomIn />}
-            </Button>
-            <Button onClick={() => zoomOut()} variant="outline">
-              {<ZoomOut />}
-            </Button>
-          </div>
-          <div>
-            <Button onClick={handleMoveUp} variant="outline">
-              {<ArrowUp />}
-            </Button>
-            <Button onClick={handleMoveDown} variant="outline">
-              {<ArrowDown />}
-            </Button>
-            <Button onClick={handleMoveLeft} variant="outline">
-              {<ArrowLeft />}
-            </Button>
-            <Button onClick={handleMoveRight} variant="outline">
-              {<ArrowRight />}
-            </Button>
-          </div>
-        </div>
-
-        <div className="w-2/5 flex flex-row-reverse">
-          <Button onClick={handleImageSubmit}>Save</Button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export const NewImageForm = memo(NewImageFormComponent);

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

@@ -1,250 +0,0 @@
-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, Upload, ZoomIn, ZoomOut } from 'lucide-react'
-import { ChangeEvent, 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 { OriginalImageProps, useImageCropper } from '..'
-import { set } from 'date-fns'
-
-type ActiveState = "landscape" | "potrait" | "icon";
-
-const stateWiseAspectRatio = {
-    landscape: 4 / 3,
-    potrait: 3 / 4,
-    icon: 1 / 1
-}
-
-interface Props {
-    onNewFileUpload?: (...args: any) => void
-}
-
-function CropperFormComponent({ onNewFileUpload }: Props) {
-
-    const { originalImage, setOriginalImage, aspectRatioWiseImages, setAspectRatioWiseImages } = useImageCropper();
-    const [croppedImage, setCroppedImage] = useState<string | null>(null);
-    const [activeState, setActiveState] = useState<ActiveState | undefined>();
-    const [rotationAngle, setRotationAngle] = useState(0);
-    const [scale, setScale] = useState(1);
-    const [moveDirection, setMoveDirection] = useState<{ x: number; y: number }>({
-        x: 0,
-        y: 0,
-    });
-
-    const [imageSrc, setImageSrc] = useState<string | null>(null);
-    const handleDrop = (event: React.DragEvent) => {
-        event.preventDefault();
-        handleFileChange(event.dataTransfer.files[0]);
-    };
-
-    const handleFileChange = (file: File | string) => {
-        if (typeof file === "string") {
-            setImageSrc(file);
-        } else {
-            if (file?.type?.startsWith("image/")) {
-                onNewFileUpload?.();
-
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    setImageSrc(reader.result as string);
-                    setActiveState(undefined);
-                };
-                reader.readAsDataURL(file);
-                setOriginalImage({ ...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: ActiveState) => {
-        const imgSource = croppedImage && activeState === state ? croppedImage : aspectRatioWiseImages[state];
-        return (
-            <>
-                <h3 className='mb-3'>{state}</h3>
-                <AspectRatio ratio={stateWiseAspectRatio[state]} className='bg-muted'>
-                    {imgSource &&
-                        <Image
-                            src={imgSource || ""}
-                            alt={`Preview ${state}`}
-                            fill
-                        />
-                    }
-                </AspectRatio>
-            </>
-        )
-    };
-
-
-
-    useEffect(() => {
-        if (croppedImage) {
-            if (activeState) {
-                setAspectRatioWiseImages({ ...aspectRatioWiseImages, [activeState]: croppedImage });
-            } else {
-                setAspectRatioWiseImages({
-                    landscape: croppedImage,
-                    potrait: croppedImage,
-                    icon: croppedImage
-                });
-            }
-        }
-
-    }, [croppedImage]);
-
-    return (
-        <>
-            <div className='flex flex-col gap-3 h-full overflow-auto'>
-                <div className='flex flex-col lg:flex-row gap-3 justify-between'>
-                    <div className='w-full flex flex-col gap-4'>
-                        <Label htmlFor="imageName">
-                            Image Name
-                        </Label>
-                        <FileInput
-                            id="inputImage"
-                            accept="image/*"
-                            fileNamePlaceholder="Enter image name"
-                            fileName={originalImage?.name || ""}
-                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                                const file = e.target.files?.[0];
-                                if (file) {
-                                    handleFileChange(file);
-                                }
-                            }}
-                            onFileNameChange={(e: ChangeEvent<HTMLInputElement>) => {
-                                setOriginalImage({ ...originalImage, name: e.target.value })
-                            }}
-                        />
-
-                    </div>
-                    <div className='w-full flex flex-col gap-4'>
-                        <Label htmlFor="imageDescription">
-                            Image Description
-                        </Label>
-                        <Input
-                            id="imageDescription"
-                            placeholder="Enter image Description"
-                            value={originalImage?.description || ""}
-                            onChange={(e) => setOriginalImage({ ...originalImage, description: e.target.value })}
-                        />
-                    </div>
-                </div>
-                <div className='flex flex-col lg:flex-row gap-3'>
-                    <div className='flex-grow flex flex-col gap-3'>
-                        <div>
-                            <h3 className='mb-3'>Original Image</h3>
-                            <AspectRatio
-                                ratio={4 / 3}
-                                className='flex justify-center items-center bg-muted text-muted-foreground'
-                                onDrop={handleDrop}
-                                onDragOver={(e) => e.preventDefault()}
-                            >
-                                {imageSrc ?
-                                    <ImageCropper
-                                        src={imageSrc}
-                                        onCroppedImage={setCroppedImage}
-                                        aspectRatio={stateWiseAspectRatio[activeState || "icon"]}
-                                        rotationAngle={rotationAngle}
-                                        zoomLevel={scale}
-                                        moveDirection={moveDirection}
-                                    />
-                                    :
-                                    <div className="text-center">
-                                        <Label htmlFor="inputImage">Drag and drop an image here</Label>
-                                        <div className="mt-3">
-                                            <TextButton
-                                                variant="outline"
-                                                onClick={() => document.getElementById("inputImage")?.click()}
-                                            >
-                                                Browse Image
-                                            </TextButton>
-
-                                        </div>
-                                    </div>
-                                }
-                            </AspectRatio>
-
-                        </div>
-                        <div className="flex flex-col lg:flex-row gap-3 justify-between">
-                            <div>
-                                <ToggleGroup type="single" variant='outline' value={activeState} onValueChange={(value) => setActiveState(value as ActiveState)}>
-                                    <ToggleGroupItem className="rounded-e-none" value="landscape">
-                                        <ImageIcon />
-                                    </ToggleGroupItem>
-                                    <ToggleGroupItem className="rounded-none border-x-0" value="potrait">
-                                        <FileImage />
-                                    </ToggleGroupItem>
-                                    <ToggleGroupItem className='rounded-s-none' value="icon">
-                                        <Square />
-                                    </ToggleGroupItem>
-                                </ToggleGroup>
-                            </div>
-                            <div className='flex flex-col lg:flex-row gap-3 justify-between'>
-                                <ToggleGroup type="single" variant='outline' value="" onValueChange={(value) => setRotationAngle(parseInt(value))}>
-                                    <ToggleGroupItem className="rounded-e-none" value="90">
-                                        <RotateCw />
-                                    </ToggleGroupItem>
-                                    <ToggleGroupItem className='rounded-s-none border-s-0' value="-90">
-                                        <RotateCcw />
-                                    </ToggleGroupItem>
-                                </ToggleGroup>
-                                <ToggleGroup type="single" variant='outline' value=''>
-                                    <ToggleGroupItem className="rounded-e-none" value="up" onClick={() => setMoveDirection({ x: 0, y: -5 })}>
-                                        <ArrowUp />
-                                    </ToggleGroupItem>
-                                    <ToggleGroupItem className="rounded-none border-x-0" value="down" onClick={() => setMoveDirection({ x: 0, y: 5 })}>
-                                        <ArrowDown />
-                                    </ToggleGroupItem>
-                                    <ToggleGroupItem className='rounded-none border-e-0' value="left" onClick={() => setMoveDirection({ x: -5, y: 0 })}>
-                                        <ArrowLeft />
-                                    </ToggleGroupItem>
-                                    <ToggleGroupItem className='rounded-s-none' value="right" onClick={() => setMoveDirection({ x: 5, y: 0 })}>
-                                        <ArrowRight />
-                                    </ToggleGroupItem>
-                                </ToggleGroup>
-                                <ToggleGroup type="single" variant='outline' value="" onValueChange={(value) => setScale(pre => pre + parseFloat(value))} >
-                                    <ToggleGroupItem className="rounded-e-none" value="0.1">
-                                        <ZoomIn />
-                                    </ToggleGroupItem>
-                                    <ToggleGroupItem className='rounded-s-none border-s-0' value="-0.1">
-                                        <ZoomOut />
-                                    </ToggleGroupItem>
-                                </ToggleGroup>
-                            </div>
-                        </div>
-
-                    </div>
-                    {/* Image Previews */}
-                    <div className="flex flex-row lg:flex-col gap-3 w-full lg:w-48">
-                        <div className='w-5/5'>
-                            {getImagePreview("landscape")}
-                        </div>
-                        <div className='w-4/5'>
-                            {getImagePreview("potrait")}
-                        </div>
-                        <div className='w-3/5'>
-                            {getImagePreview("icon")}
-                        </div>
-                    </div>
-                </div>
-
-            </div >
-
-
-        </>
-    )
-}
-
-export const CropperForm = memo(CropperFormComponent)

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

@@ -1,32 +0,0 @@
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../shadcn/dialog'
-import React from 'react'
-import { CropperForm } from '../cropper-form'
-import { TextButton } from '../../buttons'
-import { AspectRatioWiseImagesProps, OriginalImageProps, useImageCropper } from '..'
-
-export function CropperFormWithModal
-    ({ open, onOpenChange, onCropperChange }:
-        Readonly<{ open: boolean, onOpenChange: (open: boolean) => void, onCropperChange: (originalImage: OriginalImageProps, aspectRatioWiseImages: AspectRatioWiseImagesProps) => void }>) {
-    const { originalImage, aspectRatioWiseImages } = useImageCropper();
-    return (
-        <Dialog modal open={open} onOpenChange={(isOpen) => {
-            onOpenChange(isOpen)
-        }}>
-            <DialogContent className="max-w-full lg:max-w-5xl max-h-full overflow-auto">
-                <DialogHeader>
-                    <DialogTitle>Image to upload</DialogTitle>
-                </DialogHeader>
-                <CropperForm />
-                <DialogFooter>
-                    <TextButton onClick={() => {
-                        onCropperChange(originalImage, aspectRatioWiseImages)
-                        onOpenChange(false);
-                    }}>
-                        Save Changes
-                    </TextButton>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
-}
-