@collabchron/notiq 0.2.0

package/src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/components/ui/drop-downs/background-color.tsx

@@ -0,0 +1,183 @@
+import { $getSelection, LexicalEditor } from "lexical";
+import React, { useCallback } from "react";
+import { $patchStyleText } from "@lexical/selection";
+import { useTheme } from "next-themes";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import { BaselineIcon, PaintBucketIcon } from "lucide-react";
+
+export default function BackgroundColor({
+    disabled,
+    color,
+    bgColor,
+    editor,
+    isTable = false,
+    side = "bottom",
+    sideOffset = 0,
+    style,
+}: {
+    disabled: boolean;
+    color?: string;
+    bgColor?: string;
+    editor: LexicalEditor;
+    isTable?: boolean;
+    style?: React.CSSProperties;
+    side?: "bottom" | "left" | "right" | "top";
+    sideOffset?: number;
+}) {
+    const { theme } = useTheme();
+
+    const applyStyleText = useCallback(
+        (styles: Record<string, string>, skipHistoryStack?: boolean) => {
+            editor.update(
+                () => {
+                    const selection = $getSelection();
+                    if (selection !== null) {
+                        $patchStyleText(selection, styles);
+                    }
+                },
+                skipHistoryStack ? { tag: "historic" } : {}
+            );
+        },
+        [editor]
+    );
+    const onFontColorSelect = useCallback(
+        (value: string, skipHistoryStack: boolean) => {
+            applyStyleText({ color: value }, skipHistoryStack);
+        },
+        [applyStyleText]
+    );
+
+    const onBgColorSelect = useCallback(
+        (value: string, skipHistoryStack: boolean) => {
+            applyStyleText({ "background-color": value }, skipHistoryStack);
+        },
+        [applyStyleText]
+    );
+    const dark = React.useMemo(
+        () => ({
+            font: {
+                default: "white",
+                Gray: "var(--font-gray)",
+                Brown: "var(--font-brown)",
+                Orange: "var(--font-orange)",
+                Yellow: "var(--font-yellow)",
+                Green: "var(--font-green)",
+                Blue: "var(--font-blue)",
+                Purple: "var(--font-purple)",
+                Pink: "var(--font-pink)",
+                Red: "var(--font-red)",
+            },
+            background: {
+                default: "none",
+                Gray: "var(--background-gray)",
+                Brown: "var(--background-brown)",
+                Orange: "var(--background-orange)",
+                Yellow: "var(--background-yellow)",
+                Green: "var(--background-green)",
+                Blue: "var(--background-blue)",
+                Purple: "var(--background-purple)",
+                Pink: "var(--background-pink)",
+                Red: "var(--background-red)",
+            },
+        }),
+        []
+    );
+
+    const light = React.useMemo(
+        () => ({
+            font: {
+                Gray: "var(--font-gray)",
+                Brown: "var(--font-brown)",
+                Orange: "var(--font-orange)",
+                Yellow: "var(--font-yellow)",
+                Green: "var(--font-green)",
+                Blue: "var(--font-blue)",
+                Purple: "var(--font-purple)",
+                Pink: "var(--font-pink)",
+                Red: "var(--font-red)",
+            },
+            background: {
+                Gray: "var(--background-gray)",
+                Brown: "var(--background-brown)",
+                Orange: "var(--background-orange)",
+                Yellow: "var(--background-yellow)",
+                Green: "var(--background-green)",
+                Blue: "var(--background-blue)",
+                Purple: "var(--background-purple)",
+                Pink: "var(--background-pink)",
+                Red: "var(--background-red)",
+            },
+        }),
+        []
+    );
+
+    const themeColor = React.useMemo(
+        () => (theme === "dark" ? dark : light),
+        [theme, dark, light]
+    );
+
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild disabled={disabled}>
+                {!isTable ? (
+                    <Button
+                        style={{
+                            ...style, background: bgColor === "#fff" ? "transparent" : bgColor,
+                        }}
+                        variant={"transparent"}
+                        className="px-2 border-none cursor-pointer hover:dark-bg-accent hover:text-foreground"
+                        size="Toolbar"
+                        onMouseDown={(e) => e.preventDefault()}
+                    >
+                        <PaintBucketIcon className="h-7 w-7" />
+                    </Button>
+                ) : (
+                    <div
+                        style={{
+                            ...style, background: bgColor === "#fff" ? "transparent" : bgColor,
+                        }}
+                        onMouseDown={(e) => e.preventDefault()}
+                        className="cursor-pointer"
+                    >
+                        Background
+                    </div>
+                )}
+            </PopoverTrigger>
+            <PopoverContent className="max-w-32 w-full p-2 z-[250]" side={side} sideOffset={sideOffset}>
+                <div className="flex flex-col">
+                    <div className="flex flex-col gap-y-1">
+                        <span className="text-[10px] md:text-[14px] cursor-default font-bold text-gray-500">
+                            Background
+                        </span>
+                        <div className="w-full flex flex-wrap gap-1">
+                            {Object.entries(themeColor.background).map(
+                                ([_, colorValue]) => (
+                                    <Button
+                                        key={colorValue}
+                                        onClick={() => onBgColorSelect(colorValue, false)}
+
+                                        type="button"
+                                        className={cn(
+                                            "w-[18px] p-0 h-[18px] rounded-[3px]",
+                                            colorValue === bgColor && "ring-2 ring-offset-2"
+                                        )}
+                                        style={{ background: colorValue }}
+                                        onMouseDown={(e) => e.preventDefault()}
+                                    />
+                                )
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/components/ui/drop-downs/block-format.tsx

@@ -0,0 +1,159 @@
+import { useMemo } from "react";
+import {
+  Pilcrow,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  List,
+  ListTodo,
+  ListOrdered,
+  Braces,
+  Quote,
+} from "lucide-react";
+import {
+  formatBulletList,
+  formatCheckList,
+  formatCode,
+  formatHeading,
+  formatNumberedList,
+  formatParagraph,
+  formatQuote,
+} from "@/components/editor/utils/editorFormatting";
+import { LexicalEditor } from "lexical";
+import { DropDown } from ".";
+
+const blockTypeToBlockName = {
+  paragraph: "Paragraph",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6",
+  bullet: "Bullet List",
+  check: "Checklist",
+  number: "Numbered List",
+  code: "Code Block",
+  quote: "Blockquote",
+};
+
+export default function BlockFormatDropDown({
+  editor,
+  blockType,
+  disabled = false,
+  style,
+  ShowChevronsUpDown=true,
+  side,
+  sideOffset
+}: {
+  blockType: keyof typeof blockTypeToBlockName;
+  editor: LexicalEditor;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  ShowChevronsUpDown?:boolean
+  side?: "top" | "right" | "bottom" | "left" | undefined
+  sideOffset?:number
+}) {
+  const Blocks = useMemo(
+    () => ({
+      paragraph: {
+        icon: <Pilcrow className="size-4" />,
+        label: "paragraph",
+        desc: "Just start writing plain text.",
+        func: () => formatParagraph(editor),
+      },
+      h1: {
+        icon: <Heading1 className="size-4" />,
+        desc: "Heading 1 for main titles.",
+        label: "Heading 1",
+        func: () => formatHeading(editor, blockType, "h1"),
+      },
+      h2: {
+        icon: <Heading2 className="size-4" />,
+        desc: "Heading 2 for major sections.",
+        label: "Heading 2",
+        func: () => formatHeading(editor, blockType, "h2"),
+      },
+      h3: {
+        icon: <Heading3 className="size-4" />,
+        desc: "Heading 3 for sub-sections.",
+        label: "Heading 3",
+        func: () => formatHeading(editor, blockType, "h3"),
+      },
+      h4: {
+        icon: <Heading4 className="size-4" />,
+        desc: "Heading 4 for minor sections.",
+        label: "Heading 4",
+        func: () => formatHeading(editor, blockType, "h4"),
+      },
+      h5: {
+        icon: <Heading5 className="size-4" />,
+        desc: "Heading 5 for small headings.",
+        label: "Heading 5",
+        func: () => formatHeading(editor, blockType, "h5"),
+      },
+      h6: {
+        icon: <Heading6 className="size-4" />,
+        desc: "Heading 6 for tiny headings.",
+        label: "Heading 6",
+        func: () => formatHeading(editor, blockType, "h6"),
+      },
+      bullet: {
+        icon: <List className="size-4" />,
+        desc: "Bullet list for unordered items.",
+        label: "Bullet List",
+        func: () => formatBulletList(editor, blockType),
+      },
+      check: {
+        icon: <ListTodo className="size-4" />,
+        desc: "Checklist for tasks or to-dos.",
+        label: "check box",
+        func: () => formatCheckList(editor, blockType),
+      },
+      number: {
+        icon: <ListOrdered className="size-4" />,
+        desc: "Numbered list for ordered items.",
+        label: "Numbered list",
+        func: () => formatNumberedList(editor, blockType),
+      },
+      code: {
+        icon: <Braces className="size-4" />,
+        desc: "Code block for snippets.",
+        label: "Code",
+        func: () => formatCode(editor, blockType),
+      },
+      quote: {
+        icon: <Quote className="size-4" />,
+        desc: "Blockquote for quotations.",
+        label: "Blockquote",
+        func: () => formatQuote(editor, blockType),
+      },
+   
+    }),
+    [editor]
+  );
+  
+  
+  const currentBlock = Blocks[blockType] || Blocks.paragraph;
+
+  return (
+    <DropDown 
+      TriggerClassName={{...style,width:"100%"}}
+      disabled={disabled}
+      side={side}
+      sideOffset={sideOffset}
+      className="h-7 min-w-[29px] w-[29px] px-2 border-none cursor-pointer dark:bg-zinc-850  hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800"
+      TriggerLabel={
+        <>
+          {currentBlock.icon}
+          <span className="max-sm:hidden">{currentBlock.label}</span>
+        </>
+      } 
+      ShowChevronsUpDown={ShowChevronsUpDown}
+      values={Object.values(Blocks)} 
+    />
+  );
+}

package/src/components/ui/drop-downs/code.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  CODE_LANGUAGE_FRIENDLY_NAME_MAP,
+  getLanguageFriendlyName,
+} from "@lexical/code";
+import { DropDown } from ".";
+
+function getCodeLanguageOptions(): [string, string][] {
+  const options: [string, string][] = [];
+  for (const [lang, friendlyName] of Object.entries(
+    CODE_LANGUAGE_FRIENDLY_NAME_MAP
+  )) {
+    options.push([lang, friendlyName]);
+  }
+  return options;
+}
+
+export default function CodeList({
+  onCodeLanguageSelect,
+  disabled = false,
+  codeLanguage,
+}: {
+  onCodeLanguageSelect: (v: string) => void;
+  disabled?: boolean;
+  codeLanguage: string;
+}) {
+  const CODE_LANGUAGE_OPTIONS = getCodeLanguageOptions();
+
+  const languageButtons = CODE_LANGUAGE_OPTIONS.map(([lang]) => ({
+    label: lang,
+    func: () => onCodeLanguageSelect(lang),
+  }));
+
+  return (
+    <DropDown
+      values={languageButtons}
+      disabled={disabled}
+      TriggerClassName={{ maxWidth: "200px", minWidth: "60px", width: "130px" }}
+      TriggerLabel={getLanguageFriendlyName(codeLanguage)}
+    />
+  );
+}

package/src/components/ui/drop-downs/color.tsx

@@ -0,0 +1,177 @@
+import { $getSelection, LexicalEditor } from "lexical";
+import React, { useCallback } from "react";
+import { $patchStyleText } from "@lexical/selection";
+import { useTheme } from "next-themes";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import { BaselineIcon } from "lucide-react";
+
+export default function Color({
+  disabled,
+  color,
+  bgColor,
+  editor,
+  isTable = false,
+  side = "bottom",
+  sideOffset = 0,
+  style,
+}: {
+  disabled: boolean;
+  color?: string;
+  bgColor?: string;
+  editor: LexicalEditor;
+  isTable?: boolean;
+  style?: React.CSSProperties;
+  side?: "bottom" | "left" | "right" | "top";
+  sideOffset?: number;
+}) {
+  const { theme } = useTheme();
+
+  const applyStyleText = useCallback(
+    (styles: Record<string, string>, skipHistoryStack?: boolean) => {
+      editor.update(
+        () => {
+          const selection = $getSelection();
+          if (selection !== null) {
+            $patchStyleText(selection, styles);
+          }
+        },
+        skipHistoryStack ? { tag: "historic" } : {}
+      );
+    },
+    [editor]
+  );
+  const onFontColorSelect = useCallback(
+    (value: string, skipHistoryStack: boolean) => {
+      applyStyleText({ color: value }, skipHistoryStack);
+    },
+    [applyStyleText]
+  );
+
+  const onBgColorSelect = useCallback(
+    (value: string, skipHistoryStack: boolean) => {
+      applyStyleText({ "background-color": value }, skipHistoryStack);
+    },
+    [applyStyleText]
+  );
+  const dark = React.useMemo(
+    () => ({
+      font: {
+        default: "white",
+        Gray: "var(--font-gray)",
+        Brown: "var(--font-brown)",
+        Orange: "var(--font-orange)",
+        Yellow: "var(--font-yellow)",
+        Green: "var(--font-green)",
+        Blue: "var(--font-blue)",
+        Purple: "var(--font-purple)",
+        Pink: "var(--font-pink)",
+        Red: "var(--font-red)",
+      },
+      background: {
+        default: "none",
+        Gray: "var(--background-gray)",
+        Brown: "var(--background-brown)",
+        Orange: "var(--background-orange)",
+        Yellow: "var(--background-yellow)",
+        Green: "var(--background-green)",
+        Blue: "var(--background-blue)",
+        Purple: "var(--background-purple)",
+        Pink: "var(--background-pink)",
+        Red: "var(--background-red)",
+      },
+    }),
+    []
+  );
+
+  const light = React.useMemo(
+    () => ({
+      font: {
+        Gray: "var(--font-gray)",
+        Brown: "var(--font-brown)",
+        Orange: "var(--font-orange)",
+        Yellow: "var(--font-yellow)",
+        Green: "var(--font-green)",
+        Blue: "var(--font-blue)",
+        Purple: "var(--font-purple)",
+        Pink: "var(--font-pink)",
+        Red: "var(--font-red)",
+      },
+      background: {
+        Gray: "var(--background-gray)",
+        Brown: "var(--background-brown)",
+        Orange: "var(--background-orange)",
+        Yellow: "var(--background-yellow)",
+        Green: "var(--background-green)",
+        Blue: "var(--background-blue)",
+        Purple: "var(--background-purple)",
+        Pink: "var(--background-pink)",
+        Red: "var(--background-red)",
+      },
+    }),
+    []
+  );
+
+  const themeColor = React.useMemo(
+    () => (theme === "dark" ? dark : light),
+    [theme, dark, light]
+  );
+
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild disabled={disabled}>
+        {!isTable ? (
+          <Button
+            style={{
+              ...style,
+              color: theme === "dark" && color === "#000" ? "white" :
+                theme !== "dark" && color === "#fff" ? "black" : color,
+            }}
+            variant={"transparent"}
+            className="px-2 border-none cursor-pointer hover:dark-bg-accent hover:text-foreground"
+            size="Toolbar"
+            onMouseDown={(e) => e.preventDefault()}
+          >
+            <BaselineIcon />
+          </Button>
+        ) : (<></>)}
+      </PopoverTrigger>
+      <PopoverContent className="max-w-32 w-full p-2 z-[250]" side={side} sideOffset={sideOffset}>
+        <div className="flex flex-col">
+          {!isTable && (
+            <div className="flex flex-col gap-y-1">
+              <span className="text-[10px] cursor-default font-bold text-gray-500">
+                Font color
+              </span>
+              <div className="w-full flex flex-wrap gap-1">
+                {Object.entries(themeColor.font).map(
+                  ([_, colorValue]) => (
+                    <Button
+                      key={colorValue}
+                      type="button"
+                      onClick={() => onFontColorSelect(colorValue, true)}
+                      className={cn(
+                        "w-[18px] p-0 h-[18px] rounded-[3px]",
+                        colorValue === color && "ring-2 ring-offset-2"
+                      )}
+                      style={{ background: colorValue }}
+                      onMouseDown={(e) => e.preventDefault()}
+                    />
+                  )
+                )}
+              </div>
+              <Separator className="my-2 h-[1px]" />
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}