@collabchron/notiq 0.2.0

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

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

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

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

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

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

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

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

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

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