ikoncomponents 1.4.7 → 1.4.9

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

@@ -0,0 +1,352 @@
+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 "../../../ikonShade/label";
+import { Input } from "../../../ikonShade/input";
+import { Button } from "../../../ikonShade/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

@@ -0,0 +1,250 @@
+import { Input } from '../../../ikonShade/input'
+import { Label } from '../../../ikonShade/label'
+import { ToggleGroup, ToggleGroupItem } from '../../../ikonShade/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 '../../../ikonShade/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

@@ -0,0 +1,32 @@
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../ikonShade/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>
+    )
+}
+