@collabchron/notiq 0.2.0

package/src/components/ui/image/file-upload.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import type React from "react";
+import { useState, useRef } from "react";
+import {
+  Upload,
+  Loader2,
+  X,
+  Image,
+  File,
+  UploadCloudIcon,
+  Video,
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { useEdgeStore } from "@/lib/edgestore";
+
+const FileUploadZone = ({
+  InsertMedia,
+}: {
+  InsertMedia: (files: { url: string; alt: string }[]) => void;
+}) => {
+  const [draggedZone, setDraggedZone] = useState<number | null>(null);
+  const [files, setFiles] = useState<{ url: string; alt: string }[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { edgestore } = useEdgeStore();
+
+  const handleDragEnter = (index: number) => (e: React.DragEvent) => {
+    e.preventDefault();
+    setDraggedZone(index);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDraggedZone(null);
+  };
+
+  //   loading
+  const upload = async (newFiles: File[]) => {
+    setUploading(true);
+    setProgress(0);
+
+    // Store uploaded files
+    let uploadedFiles: { url: string; alt: string }[] = [];
+
+    for (let i = 0; i < newFiles.length; i++) {
+      const file = newFiles[i];
+
+      try {
+        const response = await edgestore.publicFiles.upload({
+          file,
+          onProgressChange: (progress) => {
+            setProgress(
+              Math.round((progress / 100) * ((i + 1) / newFiles.length) * 100)
+            );
+          },
+        });
+
+        uploadedFiles.push({ url: response.url, alt: file.name });
+      } catch (error) {
+        console.error(`Error uploading ${file.name}:`, error);
+      }
+    }
+
+    setFiles((prevFiles) => [...prevFiles, ...uploadedFiles]);
+    setUploading(false);
+    setProgress(100);
+  };
+
+  const handleDrop = () => async (e: React.DragEvent) => {
+    e.preventDefault();
+    setDraggedZone(null);
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    if (droppedFiles.length > 0) {
+      await upload(droppedFiles);
+    }
+  };
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(e.target.files || []);
+    if (selectedFiles.length > 0) {
+      await upload(selectedFiles);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  };
+
+  const zones = [
+    {
+      title: "Upload Images",
+      subtitle: "Drop images here",
+      icon: Image,
+      gradient: "from-purple-400 via-pink-500 to-red-500",
+      rotate: "-rotate-2",
+    },
+    {
+      title: "Upload Videos",
+      subtitle: "Drop videos here",
+      icon: Video,
+      gradient: "from-blue-400 via-teal-500 to-green-500",
+      rotate: "",
+    },
+    {
+      title: "Upload Files",
+      subtitle: "Drop files here",
+      icon: UploadCloudIcon,
+      gradient: "from-yellow-400 via-orange-500 to-red-500",
+      rotate: "rotate-3",
+    },
+  ];
+
+  return (
+    <Card className="mx-auto w-full  bg-transparent border-none max-w-[300px] lg:max-w-[500px] overflow-hidden rounded-[1rem]">
+      <CardContent className="p-6 py-7   cursor:pointer">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
+          {zones.map((zone, index) => (
+            <div key={index} className={`relative ${zone.rotate}`}>
+              <motion.div
+                onDragEnter={handleDragEnter(index)}
+                onDragOver={(e: { preventDefault: () => any }) =>
+                  e.preventDefault()
+                }
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                whileHover={{ y: -4, scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                className="group relative h-full"
+              >
+                <div
+                  className={`
+                    absolute inset-0 -z-10 rounded-xl bg-gradient-to-br ${
+                      zone.gradient
+                    }
+                    opacity-0 blur-md transition-opacity duration-300
+                    ${
+                      draggedZone === index
+                        ? "opacity-70"
+                        : "group-hover:opacity-70"
+                    }
+                  `}
+                />
+                <Card className="relative h-full rounded-[1rem] overflow-hidden border-2 border-dashed border-gray-200 dark:border-gray-800 transition-colors duration-300 group-hover:border-transparent">
+                  <CardContent className="flex h-full flex-col items-center justify-center p-6 text-center">
+                    <motion.div
+                      whileHover={{ scale: 1.1, rotate: 10 }}
+                      className="rounded-full bg-gray-100 dark:bg-gray-800 p-3 mb-4"
+                    >
+                      <zone.icon className="h-8 w-8 text-gray-500" />
+                    </motion.div>
+                    <h3 className="mb-1 text-sm font-medium">{zone.title}</h3>
+                    <p className="text-xs text-gray-500">{zone.subtitle}</p>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </div>
+          ))}
+        </div>
+
+        {(uploading || files.length > 0) && (
+          <div className="mb-6">
+            <Progress value={uploading ? progress : 100} className="h-2 mb-2" />
+            <p className="text-sm text-gray-500 mb-2">
+              {uploading
+                ? `Uploading... ${progress}%`
+                : `${files.length} file(s) uploaded`}
+            </p>
+            <AnimatePresence>
+              {files.map((file, index) => (
+                <motion.div
+                  key={`${file.alt}-${index}`}
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  className="flex items-center justify-between bg-gray-100 dark:bg-gray-800 rounded-[1rem] p-2 mb-2"
+                >
+                  <span className="truncate max-w-[80%] text-sm text-gray-700 dark:text-gray-300 ml-2">
+                    {file.alt}
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeFile(index)}
+                    className="h-6 w-6 p-0 hover:bg-gray-200 dark:hover:bg-gray-700"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </div>
+        )}
+
+        <div className="text-center flex flex-col">
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileSelect}
+            className="hidden"
+            multiple
+          />
+          <Button
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+            className="rounded-[1rem] mt-5"
+          >
+            {uploading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Uploading...
+              </>
+            ) : (
+              <>
+                <Upload className="mr-2 h-4 w-4" />
+                Choose Files
+              </>
+            )}
+          </Button>
+
+          {files.length > 0 && (
+            <Button
+              onClick={() => InsertMedia(files)}
+              disabled={uploading}
+              className="rounded-[1rem] mt-2"
+            >
+              Insert the {files.length == 1 ? "image" : "images"}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FileUploadZone;

package/src/components/ui/image/image-resizer.tsx

@@ -0,0 +1,297 @@
+import * as React from "react";
+import { useRef } from "react";
+import { calculateZoomLevel } from "@lexical/utils";
+import { LexicalEditor } from "lexical";
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+const Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2,
+};
+
+export default function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  MediaRef,
+  editor,
+}: {
+  editor: LexicalEditor;
+  MediaRef: { current: null | HTMLElement };
+  onResizeEnd: (width: "inherit" | number, height: "inherit" | number) => void;
+  onResizeStart: () => void;
+}): React.JSX.Element {
+  const controlWrapperRef = useRef<HTMLDivElement>(null);
+  const userSelect = useRef({
+    priority: "",
+    value: "default",
+  });
+  const positioningRef = useRef<{
+    currentHeight: "inherit" | number;
+    currentWidth: "inherit" | number;
+    direction: number;
+    isResizing: boolean;
+    ratio: number;
+    startHeight: number;
+    startWidth: number;
+    startX: number;
+    startY: number;
+  }>({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0,
+  });
+
+  const editorRootElement = editor.getRootElement();
+  // Find max width, accounting for editor padding.
+  // document.getElementById("Editor")?.scrollHeight
+  
+  const maxWidthContainer = 950
+  const maxHeightContainer =
+    editorRootElement !== null
+      ? editorRootElement.getBoundingClientRect().height - 20
+      : 100;
+
+  const minWidth = 100;
+  const minHeight = 100;
+
+  const setStartCursor = (direction: number) => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse =
+      (direction & Direction.north && direction & Direction.west) ||
+      (direction & Direction.south && direction & Direction.east);
+
+    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty(
+        "cursor",
+        `${cursorDir}-resize`,
+        "important"
+      );
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty(
+        "cursor",
+        `${cursorDir}-resize`,
+        "important"
+      );
+      userSelect.current.value = document.body.style.getPropertyValue(
+        "-webkit-user-select"
+      );
+      userSelect.current.priority = document.body.style.getPropertyPriority(
+        "-webkit-user-select"
+      );
+      document.body.style.setProperty(
+        "-webkit-user-select",
+        `none`,
+        "important"
+      );
+    }
+  };
+
+  const setEndCursor = () => {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "text");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "default");
+      document.body.style.setProperty(
+        "-webkit-user-select",
+        userSelect.current.value,
+        userSelect.current.priority
+      );
+    }
+  };
+
+  const handlePointerDown = (
+    event: React.PointerEvent<HTMLDivElement>,
+    direction: number
+  ) => {
+    if (!editor.isEditable()) {
+      return;
+    }
+
+    const image = MediaRef.current;
+    const controlWrapper = controlWrapperRef.current;
+
+    if (image !== null && controlWrapper !== null) {
+      event.preventDefault();
+      const { width, height } = image.getBoundingClientRect();
+      const zoom = calculateZoomLevel(image);
+      const positioning = positioningRef.current;
+      positioning.startWidth = width;
+      positioning.startHeight = height;
+      positioning.ratio = width / height;
+      positioning.currentWidth = width;
+      positioning.currentHeight = height;
+      positioning.startX = event.clientX / zoom;
+      positioning.startY = event.clientY / zoom;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+
+      setStartCursor(direction);
+      onResizeStart();
+
+      controlWrapper.classList.add("resizing");
+      image.classList.add("resizing");
+
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    }
+  };
+
+  const handlePointerMove = (event: PointerEvent) => {
+    const image = MediaRef.current;
+    const positioning = positioningRef.current;
+
+    const isHorizontal =
+      positioning.direction & (Direction.east | Direction.west);
+    const isVertical =
+      positioning.direction & (Direction.south | Direction.north);
+
+    if (image !== null && positioning.isResizing) {
+      const zoom = calculateZoomLevel(image);
+      // Corner cursor
+      if (isHorizontal && isVertical) {
+        let diff = Math.floor(positioning.startX - event.clientX / zoom);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+
+        const width = clamp(
+          positioning.startWidth + diff,
+          minWidth,
+          maxWidthContainer
+        );
+
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+        positioning.currentWidth = width;
+      } else if (isVertical) {
+        let diff = Math.floor(positioning.startY - event.clientY / zoom);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+
+        const height = clamp(
+          positioning.startHeight + diff,
+          minHeight,
+          maxHeightContainer
+        );
+
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+      } else {
+        let diff = Math.floor(positioning.startX - event.clientX / zoom);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+
+        const width = clamp(
+          positioning.startWidth + diff,
+          minWidth,
+          maxWidthContainer
+        );
+
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
+      }
+    }
+  };
+
+  const handlePointerUp = () => {
+    const image = MediaRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+
+      controlWrapper.classList.remove("resizing");
+      image.classList.remove("resizing");
+
+      setEndCursor();
+      onResizeEnd(width, height);
+
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    }
+  };
+
+  return (
+    <div
+      ref={controlWrapperRef}
+      className="absolute inset-0 z-10"
+      style={{
+        width: MediaRef.current?.style.width,
+        height: MediaRef.current?.style.height,
+      }}
+    >
+      {/* Resizer Handles */}
+      <div
+        className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-n-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.north);
+        }}
+      />
+      <div
+        className="absolute top-0 right-0 transform -translate-y-1/2 translate-x-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-ne-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.north | Direction.east);
+        }}
+      />
+      <div
+        className="absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-e-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.east);
+        }}
+      />
+      <div
+        className="absolute bottom-0 right-0 transform translate-x-1/2 translate-y-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-se-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.south | Direction.east);
+        }}
+      />
+      <div
+        className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-s-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.south);
+        }}
+      />
+      <div
+        className="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-sw-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.south | Direction.west);
+        }}
+      />
+      <div
+        className="absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-w-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.west);
+        }}
+      />
+      <div
+        className="absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-blue-500 rounded-full cursor-nw-resize"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.north | Direction.west);
+        }}
+      />
+    </div>
+  );
+}