@collabchron/notiq 0.3.0 → 1.0.1

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

@@ -1,62 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { INSERT_TABLE_COMMAND } from "@lexical/table";
-import { LexicalEditor } from "lexical";
-import { JSX, useEffect, useState } from "react";
-
-export function InsertTable({
-  activeEditor,
-  onClose,
-}: {
-  activeEditor: LexicalEditor;
-  onClose: () => void;
-}): JSX.Element {
-  const [rows, setRows] = useState("5");
-  const [columns, setColumns] = useState("5");
-  const [isDisabled, setIsDisabled] = useState(true);
-
-  useEffect(() => {
-    const row = Number(rows);
-    const column = Number(columns);
-    if (row && row > 0 && row <= 500 && column && column > 0 && column <= 50) {
-      setIsDisabled(false);
-    } else {
-      setIsDisabled(true);
-    }
-  }, [rows, columns]);
-
-  const onClick = () => {
-    activeEditor.dispatchCommand(INSERT_TABLE_COMMAND, {
-      columns,
-      rows,
-    });
-
-    onClose();
-  };
-
-  return (
-    <div className="flex flex-col gap-y-2  ">
-      <Input
-        placeholder={"# of rows (1-500)"}
-        onChange={(e) => {
-          setRows(e.target.value);
-        }}
-        value={rows}
-        data-test-id="table-modal-rows"
-        type="number"
-      />
-      <Input
-        placeholder={"# of columns (1-50)"}
-        onChange={(e) => {
-          setColumns(e.target.value);
-        }}
-        value={columns}
-        data-test-id="table-modal-columns"
-        type="number"
-      />
-      <Button className="w-full" disabled={isDisabled} onClick={onClick}>
-        Confirm
-      </Button>
-    </div>
-  );
-}

package/src/components/ui/models/use-model.tsx

@@ -1,91 +0,0 @@
-"use client";
-
-import { useCallback, useMemo, useState,JSX } from "react";
-import {
-  Dialog,
-  DialogDescription,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogClose,
-} from "./custom-dialog";
-
-export default function useModal(): [
-  JSX.Element | null,
-  (
-    title?: string | null, 
-    description?: string | null, 
-    getContent?: (onClose: () => void) => JSX.Element,
-    isDilog?:boolean
-
-  ) => void,
-  boolean
-] {
-  const [isOpen, setIsOpen] = useState(false);
-  const [modalContent, setModalContent] = useState<{
-    title?: string | null;
-    description?: string | null;
-    content?: JSX.Element;
-    isDilog?:boolean
-  } | null>(null);
-
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-    setModalContent(null);
-  }, []);
-
-  const showModal = useCallback(
-    (
-      title?: string | null,
-      description?: string | null,
-      getContent?: (onClose: () => void) => JSX.Element,
-      isDilog?:boolean
-
-    ) => {
-      setIsOpen(true);
-      setModalContent({
-        title,
-        description,
-        content: getContent ? getContent(onClose) : undefined,
-        isDilog:isDilog
-      });
-    },
-    [onClose]
-  );
-
-  const modal = useMemo(() => {
-    if (!isOpen || !modalContent) {
-      return null;
-    }
-
-
-    const { title, description, content,isDilog } = modalContent;
-    if(!isDilog){
-      return <>{content}</>
-    }
-    return (
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="w-full max-w-md bg-white p-6 dark:bg-zinc-900">
-          {(title || description) && (
-            <DialogHeader>
-              {title && (
-                <DialogTitle className="text-zinc-900 dark:text-white">
-                  {title}
-                </DialogTitle>
-              )}
-              {description && (
-                <DialogDescription className="text-zinc-600 dark:text-zinc-400">
-                  {description}
-                </DialogDescription>
-              )}
-            </DialogHeader>
-          )}
-          <div className="mt-2">{content}</div>
-          <DialogClose />
-        </DialogContent>
-      </Dialog>
-    );
-  }, [isOpen, modalContent]);
-
-  return [modal, showModal, isOpen]; 
-}

package/src/components/ui/poll/poll-component.tsx

@@ -1,304 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
-import { mergeRegister } from "@lexical/utils";
-import {
-  $getNodeByKey,
-  $getSelection,
-  $isNodeSelection,
-  BaseSelection,
-  CLICK_COMMAND,
-  COMMAND_PRIORITY_LOW,
-  KEY_BACKSPACE_COMMAND,
-  KEY_DELETE_COMMAND,
-  NodeKey,
-} from "lexical";
-import * as React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import { X } from "lucide-react";
-import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
-import { useMutation } from "@tanstack/react-query";
-
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { $isPollNode, createPollOption, Option, Options, PollNode } from "../../editor/nodes/PollNode";
-
-function getTotalVotes(options: Options): number {
-  return options.reduce((totalVotes, next) => {
-    return totalVotes + next.votes.length;
-  }, 0);
-}
-
-function PollOptionComponent({
-  option,
-  index,
-  options,
-  totalVotes,
-  withPollNode,
-  isEditable,
-}: {
-  index: number;
-  option: Option;
-  options: Options;
-  totalVotes: number;
-  withPollNode: (
-    cb: (pollNode: PollNode) => void,
-    onSelect?: () => void
-  ) => void;
-  isEditable: boolean;
-}): React.JSX.Element {
-  const userId = "1212312" // change it with user ID
-  const checkboxRef = useRef(null);
-  const votesArray = option.votes;
-  const checkedIndex = votesArray.indexOf(userId!);
-  const checked = checkedIndex !== -1;
-  const votes = votesArray.length;
-  const text = option.text;
-  const [editor] = useLexicalComposerContext();
-
-
-  const { mutate, isPending } = useMutation({
-    mutationFn: async () => {
-
-      try {
-
-        await new Promise<void>((resolve) => {
-          withPollNode((node) => {
-            node.toggleVote(option, userId!);
-          }, resolve);
-        });
-        return
-        // const currentState = editor.getEditorState();
-        // await updateContent(id, currentState.toJSON(), true);
-      } catch (error) {
-        await new Promise<void>((resolve) => {
-          withPollNode((node) => {
-            node.toggleVote(option, userId!);
-          }, resolve);
-        });
-        throw error;
-      }
-    },
-  });
-
-  return (
-    <div className="flex  flex-row items-center justify-center gap-x-2">
-      <div>
-        <Checkbox
-          disabled={!userId}
-          ref={checkboxRef}
-          onCheckedChange={() => {
-            mutate();
-          }}
-          checked={checked}
-        />
-      </div>
-      <div className="flex  relative  overflow-hidden">
-        <div
-          className="h-9 overflow-hidden bg-blue-500/30 dark:bg-blue-300/50 rounded-md  absolute top-0 left-0 w-full py-2  transition-all  duration-1000"
-          style={{ width: `${votes === 0 ? 0 : (votes / totalVotes) * 100}%` }}
-        />
-        <span className=" absolute text-xs font-bold right-2 top-1">
-          {votes > 0 && (votes === 1 ? "1 vote" : `${votes} votes`)}
-        </span>
-        <Input
-          className=" overflow-hidden ring-0 outline-none bg-transparent"
-          value={text}
-          disabled={!isEditable}
-          onChange={(e) => {
-            const target = e.target;
-            const value = target.value;
-            const selectionStart = target.selectionStart;
-            const selectionEnd = target.selectionEnd;
-            withPollNode(
-              (node) => {
-                node.setOptionText(option, value);
-              },
-              () => {
-                target.selectionStart = selectionStart;
-                target.selectionEnd = selectionEnd;
-              }
-            );
-          }}
-          placeholder={`Option ${index + 1}`}
-        />
-      </div>
-      {isEditable && (
-        <Button
-          size={"sm"}
-          variant={"ghost"}
-          disabled={options.length < 3 || !isEditable || isPending}
-          aria-label="Remove"
-          className="mx-1"
-          onClick={() => {
-            withPollNode((node) => {
-              node.deleteOption(option);
-            });
-          }}
-        >
-          <X />
-        </Button>
-      )}
-    </div>
-  );
-}
-
-export default function PollComponent({
-  question,
-  options,
-  nodeKey,
-}: {
-  nodeKey: NodeKey;
-  options: Options;
-  question: string;
-}): React.JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  const [internalOptions, setInternalOptions] = useState(options);
-  const [version, setVersion] = useState(0);
-  const totalVotes = useMemo(() => getTotalVotes(options), [options, version]);
-  const [isSelected, setSelected, clearSelection] =
-    useLexicalNodeSelection(nodeKey);
-  const [selection, setSelection] = useState<BaseSelection | null>(null);
-  const ref = useRef(null);
-  const isEditable = useLexicalEditable();
-
-  const $onDelete = useCallback(
-    (payload: KeyboardEvent) => {
-      const deleteSelection = $getSelection();
-      if (isSelected && $isNodeSelection(deleteSelection)) {
-        const event: KeyboardEvent = payload;
-        event.preventDefault();
-        deleteSelection.getNodes().forEach((node) => {
-          if ($isPollNode(node)) {
-            node.remove();
-          }
-        });
-      }
-      return false;
-    },
-    [isSelected]
-  );
-
-  useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        const node = $getNodeByKey(nodeKey);
-        if ($isPollNode(node)) {
-          setInternalOptions([...node.__options]);
-          setVersion((v) => v + 1);
-        }
-      });
-    });
-  }, [editor, nodeKey]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        setSelection(editorState.read(() => $getSelection()));
-      }),
-      editor.registerCommand<MouseEvent>(
-        CLICK_COMMAND,
-        (payload) => {
-          const event = payload;
-
-          if (event.target === ref.current) {
-            if (!event.shiftKey) {
-              clearSelection();
-            }
-            setSelected(!isSelected);
-            return true;
-          }
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        KEY_DELETE_COMMAND,
-        $onDelete,
-        COMMAND_PRIORITY_LOW
-      ),
-      editor.registerCommand(
-        KEY_BACKSPACE_COMMAND,
-        $onDelete,
-        COMMAND_PRIORITY_LOW
-      )
-    );
-  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
-  const withPollNode = (
-    cb: (node: PollNode) => void,
-    onUpdate?: () => void
-  ): Promise<void> => {
-    return new Promise((resolve) => {
-      editor.update(
-        () => {
-          const node = $getNodeByKey(nodeKey);
-          if ($isPollNode(node)) {
-            cb(node);
-            node.markDirty();
-          }
-        },
-        {
-          onUpdate: () => {
-            onUpdate?.();
-            resolve();
-          },
-          tag: "history-merge",
-        }
-      );
-    });
-  };
-
-  const addOption = () => {
-    withPollNode((node) => {
-      node.addOption(createPollOption());
-    });
-  };
-
-  const handleQuestionChange = useCallback(
-    (event: any) => {
-      const newQuestion = event.target.value || "";
-      withPollNode((node) => {
-        node.setQuestion(newQuestion);
-      });
-    },
-    [withPollNode]
-  );
-  return (
-    <Card>
-      <CardHeader className="text-center">
-        <CardTitle
-          suppressContentEditableWarning
-          onChange={handleQuestionChange}
-          contentEditable={isEditable}
-        >
-          {question}
-        </CardTitle>
-      </CardHeader>
-      <CardContent className=" space-y-2">
-        {options.map((option, index) => {
-          const key = `${option.uid}-${option.votes.length}`;
-          return (
-            <PollOptionComponent
-              key={key}
-              withPollNode={withPollNode}
-              option={option}
-              index={index}
-              options={options}
-              totalVotes={totalVotes}
-              isEditable={isEditable}
-            />
-          );
-        })}
-      </CardContent>
-      {isEditable && (
-        <CardFooter className="flex items-center justify-center">
-          <Button disabled={!isEditable} onClick={addOption}>
-            Add Option
-          </Button>
-        </CardFooter>
-      )}
-    </Card>
-  );
-}

package/src/components/ui/popover.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverAnchor = PopoverPrimitive.Anchor
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 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}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/components/ui/progress.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
-
-export { Progress }

package/src/components/ui/scroll-area.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }

package/src/components/ui/separator.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }

package/src/components/ui/skeleton.tsx

@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

package/src/components/ui/sonner.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }