@collabchron/notiq 0.3.0 → 1.0.0

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

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

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

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

@@ -1,320 +0,0 @@
-'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

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

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

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