@collabchron/notiq 0.3.0 → 1.0.0

package/src/components/ui/excalidraw/Modal.tsx

@@ -1,110 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import type {JSX} from 'react';
-
-import './Modal.css';
-
-import {isDOMNode} from 'lexical';
-import * as React from 'react';
-import {ReactNode, useEffect, useRef} from 'react';
-import {createPortal} from 'react-dom';
-
-function PortalImpl({
-  onClose,
-  children,
-  title,
-  closeOnClickOutside,
-}: {
-  children: ReactNode;
-  closeOnClickOutside: boolean;
-  onClose: () => void;
-  title: string;
-}) {
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (modalRef.current !== null) {
-      modalRef.current.focus();
-    }
-  }, []);
-
-  useEffect(() => {
-    let modalOverlayElement: HTMLElement | null = null;
-    const handler = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-    const clickOutsideHandler = (event: MouseEvent) => {
-      const target = event.target;
-      if (
-        modalRef.current !== null &&
-        isDOMNode(target) &&
-        !modalRef.current.contains(target) &&
-        closeOnClickOutside
-      ) {
-        onClose();
-      }
-    };
-    const modelElement = modalRef.current;
-    if (modelElement !== null) {
-      modalOverlayElement = modelElement.parentElement;
-      if (modalOverlayElement !== null) {
-        modalOverlayElement.addEventListener('click', clickOutsideHandler);
-      }
-    }
-
-    window.addEventListener('keydown', handler);
-
-    return () => {
-      window.removeEventListener('keydown', handler);
-      if (modalOverlayElement !== null) {
-        modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
-      }
-    };
-  }, [closeOnClickOutside, onClose]);
-
-  return (
-    <div className="Modal__overlay" role="dialog">
-      <div className="Modal__modal" tabIndex={-1} ref={modalRef}>
-        <h2 className="Modal__title">{title}</h2>
-        <button
-          className="Modal__closeButton"
-          aria-label="Close modal"
-          type="button"
-          onClick={onClose}>
-          X
-        </button>
-        <div className="Modal__content">{children}</div>
-      </div>
-    </div>
-  );
-}
-
-export default function Modal({
-  onClose,
-  children,
-  title,
-  closeOnClickOutside = false,
-}: {
-  children: ReactNode;
-  closeOnClickOutside?: boolean;
-  onClose: () => void;
-  title: string;
-}): JSX.Element {
-  return createPortal(
-    <PortalImpl
-      onClose={onClose}
-      title={title}
-      closeOnClickOutside={closeOnClickOutside}>
-      {children}
-    </PortalImpl>,
-    document.body,
-  );
-}

package/src/components/ui/hover-card.tsx

@@ -1,29 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }

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

@@ -1,17 +0,0 @@
-import React from 'react'
-
-export default function ErrorImage() {
-  return (
-    <img
-        src={"https://cdn.mos.cms.futurecdn.net/Wh46bS2Gw8vUC6iQh2wEd6-1020-80.png"}
-        style={{
-          height: 300,
-          width: 300,
-        }}
-        draggable="false"
-      />
-    );
-  
-}
-
-

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

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

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