@collabchron/notiq 0.2.0

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

@@ -0,0 +1,68 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { CSSProperties, JSX, useEffect, useState } from "react";
+
+const imageCache = new Set();
+
+export default function LazyImage({
+  altText,
+  style,
+  imageRef,
+  src,
+  onError,
+}: {
+  altText: string;
+  style?: CSSProperties;
+  imageRef: { current: null | HTMLImageElement };
+  src: string;
+  onError: () => void;
+}): JSX.Element {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (imageCache.has(src)) {
+      setIsLoading(false);
+      return;
+    }
+
+    const img = new Image();
+    img.src = src;
+
+    img.onload = () => {
+      imageCache.add(src);
+      setIsLoading(false);
+    };
+
+    img.onerror = () => {
+      imageCache.add(src);
+      setIsLoading(false);
+      onError();
+    };
+
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [src, onError]);
+
+ 
+  
+  return (
+    <>
+      {isLoading && (
+        <Skeleton
+          style={style}
+        />
+      )}
+      <img
+        className={cn("max-w-full transition-opacity border-amber-500 border-2", isLoading ? "opacity-0" : "opacity-100")}
+        src={src}
+        alt={altText}
+        ref={imageRef}
+        style={style}
+        onError={onError}
+        draggable="false"
+      />
+    </>
+  );
+}

package/src/components/ui/image/lazy-video.tsx

@@ -0,0 +1,71 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { CSSProperties, JSX, useEffect, useState } from "react";
+
+const videoCache = new Set<string>();
+
+export default function LazyVideo({
+  videoRef,
+  src,
+  style,
+  onError,
+  rounded,
+  controls = true,
+}: {
+  style?: CSSProperties;
+  videoRef: { current: null | HTMLVideoElement };
+  src: string;
+  onError: () => void;
+  rounded: number;
+  controls?: boolean;
+}): JSX.Element {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (videoCache.has(src)) {
+      setIsLoading(false);
+      return;
+    }
+
+    // Create a video element to check if it can load the source
+    const video = document.createElement("video");
+    video.src = src;
+
+    // When the video has loaded enough data to be playable, mark it as loaded
+    video.onloadeddata = () => {
+      videoCache.add(src);
+      setIsLoading(false);
+    };
+
+    video.onerror = () => {
+      videoCache.add(src);
+      setIsLoading(false);
+      onError();
+    };
+
+    return () => {
+      video.onloadeddata = null;
+      video.onerror = null;
+    };
+  }, [src, onError]);
+
+
+  return (
+    <>
+      {isLoading && (
+        <Skeleton
+          style={style}
+        />
+      )}
+      <video
+        className={cn(" transition-opacity", isLoading ? "opacity-0" : "opacity-100")}
+        src={src}
+        ref={videoRef}
+        style={style}
+        onError={onError}
+        controls={controls}
+        draggable="false"
+      />
+    </>
+  );
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/components/ui/models/custom-dialog.tsx

@@ -0,0 +1,320 @@
+'use client';
+import { AnimatePresence, motion, Transition, Variants } from 'framer-motion';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { useId } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+const DialogContext = createContext<{
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  dialogRef: React.RefObject<HTMLDialogElement | null>;
+  variants: Variants;
+  transition?: Transition;
+  ids: {
+    dialog: string;
+    title: string;
+    description: string;
+  };
+  onAnimationComplete: (definition: string) => void;
+  handleTrigger: () => void;
+} | null>(null);
+
+const defaultVariants: Variants = {
+  initial: {
+    opacity: 0,
+    scale: 0.9,
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.9,
+  },
+};
+
+const defaultTransition: Transition = {
+  ease: 'easeOut',
+  duration: 0.2,
+};
+
+type DialogProps = {
+  children: React.ReactNode;
+  variants?: Variants;
+  transition?: Transition;
+  className?: string;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+};
+
+function Dialog({
+  children,
+  variants = defaultVariants,
+  transition = defaultTransition,
+  defaultOpen,
+  onOpenChange,
+  open,
+}: DialogProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    defaultOpen || false
+  );
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const isOpen = open !== undefined ? open : uncontrolledOpen;
+
+  const setIsOpen = React.useCallback(
+    (value: boolean) => {
+      // Update the uncontrolled state if `open` is not provided
+      if (open === undefined) {
+        setUncontrolledOpen(value);
+      }
+      // Notify the parent component of the state change
+      onOpenChange?.(value);
+    },
+    [open, onOpenChange]
+  );
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (isOpen) {
+      document.body.classList.add('overflow-hidden');
+      dialog.showModal();
+    } else {
+      document.body.classList.remove('overflow-hidden');
+      dialog.close();
+    }
+
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      setIsOpen(false);
+    };
+
+    dialog.addEventListener('cancel', handleCancel);
+    return () => {
+      dialog.removeEventListener('cancel', handleCancel);
+      document.body.classList.remove('overflow-hidden');
+    };
+  }, [isOpen, setIsOpen]);
+
+  const handleTrigger = () => {
+    setIsOpen(true);
+  };
+
+  const onAnimationComplete = (definition: string) => {
+    if (definition === 'exit' && !isOpen) {
+      dialogRef.current?.close();
+    }
+  };
+
+  const baseId = useId();
+  const ids = {
+    dialog: `motion-ui-dialog-${baseId}`,
+    title: `motion-ui-dialog-title-${baseId}`,
+    description: `motion-ui-dialog-description-${baseId}`,
+  };
+
+
+
+  return (
+    <DialogContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        dialogRef,
+        variants,
+        transition,
+        ids,
+        onAnimationComplete,
+        handleTrigger,
+      }}
+    >
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+type DialogTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function DialogTrigger({ children, className }: DialogTriggerProps) {
+  const context = useContext(DialogContext);
+  if (!context) throw new Error('DialogTrigger must be used within Dialog');
+
+  return (
+    <button
+      onClick={context.handleTrigger}
+      className={cn(
+        'inline-flex items-center justify-center rounded-md text-sm font-medium',
+        'transition-colors focus-visible:outline-none focus-visible:ring-2',
+        'focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+type DialogPortalProps = {
+  children: React.ReactNode;
+  container?: HTMLElement | null;
+};
+
+function DialogPortal({ children }: DialogPortalProps) {
+  if (typeof window !== "undefined") {
+    return createPortal(children, document.body);
+  }
+}
+
+type DialogContentProps = {
+  children: React.ReactNode;
+  className?: string;
+  container?: HTMLElement;
+};
+
+function DialogContent({ children, className, container }: DialogContentProps) {
+  const context = useContext(DialogContext);
+  if (!context) throw new Error('DialogContent must be used within Dialog');
+  const {
+    isOpen,
+    setIsOpen,
+    dialogRef,
+    variants,
+    transition,
+    ids,
+    onAnimationComplete,
+  } = context;
+
+  const content = (
+    <AnimatePresence mode='wait'>
+      {isOpen && (
+        <motion.dialog
+          key={ids.dialog}
+          ref={dialogRef as React.RefObject<HTMLDialogElement>}
+          id={ids.dialog}
+          aria-labelledby={ids.title}
+          aria-describedby={ids.description}
+          aria-modal='true'
+          role='dialog'
+          onClick={(e: React.MouseEvent<HTMLDialogElement>) => {
+            if (e.target === dialogRef.current) {
+              setIsOpen(false);
+            }
+          }}
+          initial='initial'
+          animate='animate'
+          exit='exit'
+          variants={variants}
+          transition={transition}
+          onAnimationComplete={onAnimationComplete}
+          className={cn(
+            'fixed rounded-lg border z-[40] border-zinc-200 p-0 shadow-lg dark:border dark:border-zinc-700',
+            'backdrop:bg-black/50 backdrop:backdrop-blur-sm',
+            'open:flex open:flex-col',
+            className
+          )}
+        >
+          <div className='w-full'>{children}</div>
+        </motion.dialog>
+      )}
+    </AnimatePresence>
+  );
+
+  return <DialogPortal container={container}>{content}</DialogPortal>;
+}
+
+type DialogHeaderProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function DialogHeader({ children, className }: DialogHeaderProps) {
+  return (
+    <div className={cn('flex flex-col space-y-0', className)}>{children}</div>
+  );
+}
+
+type DialogTitleProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function DialogTitle({ children, className }: DialogTitleProps) {
+  const context = useContext(DialogContext);
+  if (!context) throw new Error('DialogTitle must be used within Dialog');
+
+  return (
+    <h2
+      id={context.ids.title}
+      className={cn('text-base font-medium', className)}
+    >
+      {children}
+    </h2>
+  );
+}
+
+type DialogDescriptionProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function DialogDescription({ children, className }: DialogDescriptionProps) {
+  const context = useContext(DialogContext);
+  if (!context) throw new Error('DialogDescription must be used within Dialog');
+
+  return (
+    <p
+      id={context.ids.description}
+      className={cn('text-base text-zinc-500', className)}
+    >
+      {children}
+    </p>
+  );
+}
+
+type DialogCloseProps = {
+  className?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+};
+
+function DialogClose({ className, children, disabled }: DialogCloseProps) {
+  const context = useContext(DialogContext);
+  if (!context) throw new Error('DialogClose must be used within Dialog');
+
+  return (
+    <button
+      onClick={() => context.setIsOpen(false)}
+      type='button'
+      aria-label='Close dialog'
+      className={cn(
+        'absolute right-4 top-4 rounded-sm opacity-70 transition-opacity',
+        'hover:opacity-100 focus:outline-none focus:ring-2',
+        'focus:ring-zinc-500 focus:ring-offset-2 disabled:pointer-events-none',
+        className
+      )}
+      disabled={disabled}
+    >
+      {children || <X className='h-4 w-4' />}
+      <span className='sr-only'>Close</span>
+    </button>
+  );
+}
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+};

package/src/components/ui/models/insert-gif.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from "react";
+import { InsertImagePayload } from "../../editor/plugins/ImagesPlugin";
+import { useQuery } from "@tanstack/react-query";
+import fetchGifs from "../../editor/utils/gif";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Search, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+
+export interface InsertGifProps {
+  insertGifOnClick: (payload: InsertImagePayload) => void;
+  onClose: () => void;
+}
+
+interface Gif {
+  id: string;
+  url: string;
+  alt_text: string;
+}
+
+export default function InsertGif({ insertGifOnClick, onClose }: InsertGifProps) {
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 500); 
+
+    return () => clearTimeout(handler);
+  }, [search]);
+
+  const { data: gifs, isPending } = useQuery({
+    queryKey: ["gifs", debouncedSearch],
+    queryFn: async () => {
+      const { gifs } = await fetchGifs({ q: debouncedSearch || "trending" });
+      return gifs;
+    },
+  });
+
+  return (
+    <div className="flex flex-col space-y-1">
+      <form onSubmit={(e) => e.preventDefault()} className="relative mb-3">
+        <Button
+          type="submit"
+          className="absolute text-gray-500 left-1 top-[50%] -translate-y-1/2"
+          variant="ghost"
+          size="sm"
+        >
+          <Search className="w-4 h-4" />
+        </Button>
+        <Input
+          onChange={(e) => setSearch(e.target.value)}
+          value={search}
+          placeholder="Search for GIFs"
+          className="pl-9"
+        />
+        {search && (
+          <X
+            onClick={() => setSearch("")}
+            className="w-4 h-4 absolute cursor-pointer transition-colors text-gray-500 right-3 top-[50%] hover:text-white -translate-y-1/2"
+          />
+        )}
+      </form>
+
+      <div className="grid grid-cols-3 gap-2">
+        {isPending &&
+          Array(9)
+            .fill(0)
+            .map((_, i) => <Skeleton key={i} className="rounded-md w-full h-full" />)}
+
+        {!isPending &&
+          gifs?.map((gif: Gif) => (
+            <button
+              key={gif.id}
+              onClick={() => {
+                insertGifOnClick({ src: gif.url, altText: gif.alt_text });
+                onClose();
+              }}
+              className="w-full h-full"
+            >
+              <img src={gif.url} alt={gif.alt_text} className="rounded-md w-full h-full" />
+            </button>
+          ))}
+
+        {!isPending && gifs?.length === 0 && <p className="text-center text-gray-500">No GIFs found</p>}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/models/insert-image.tsx

@@ -0,0 +1,52 @@
+import { JSX, useEffect, useRef } from "react";
+import { INSERT_IMAGE_COMMAND, InsertImagePayload } from "../../editor/plugins/ImagesPlugin";
+import FileUploadZone from "../image/file-upload";
+import { LexicalEditor } from "lexical";
+
+export function InsertImageDialog({
+  activeEditor,
+  onClose,
+}: {
+  activeEditor: LexicalEditor;
+  onClose: () => void;
+}): JSX.Element {
+  const hasModifier = useRef(false);
+
+  useEffect(() => {
+    hasModifier.current = false;
+    const handler = (e: KeyboardEvent) => {
+      hasModifier.current = e.altKey;
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [activeEditor]);
+
+
+  const handleInsertImage = (payload: InsertImagePayload) => {
+    activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
+  };
+
+  const InsertMedia = (files?: {url:string,alt:string}[]) => {
+  
+    if (!files) {
+      return;
+    }
+    for (let index = 0; index < files.length; index++) {
+      console.log(files);
+      
+      const payload: InsertImagePayload = {
+        altText: files[index].alt || "image",
+        src:  files[index].url ,
+      };
+      handleInsertImage(payload);
+      
+      if (index === files.length - 1) {
+        onClose();
+      }
+
+    }
+  }
+  return <FileUploadZone InsertMedia={InsertMedia}/>;
+}

package/src/components/ui/models/insert-poll.tsx

@@ -0,0 +1,29 @@
+import { LexicalEditor } from "lexical";
+import { useState } from "react";
+import { INSERT_POLL_COMMAND } from "../../editor/plugins/PollPlugin";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export function InsertPoll({
+  activeEditor,
+  onClose,
+}: {
+  activeEditor: LexicalEditor;
+  onClose: () => void;
+}): React.JSX.Element {
+  const [question, setQuestion] = useState('');
+
+  const onClick = () => {
+    activeEditor.dispatchCommand(INSERT_POLL_COMMAND, question);
+    onClose();
+  };
+
+  return (
+    <div className='space-y-4'>
+      <Input placeholder='Question?' onChange={(e)=>setQuestion(e.target.value)}   value={question} />
+      <Button disabled={question.trim() === ''} onClick={onClick}>
+          Confirm
+      </Button>
+    </div>
+  );
+}