@collabchron/notiq 0.2.0 → 1.0.0

package/src/components/ui/command.tsx

@@ -1,153 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

package/src/components/ui/dialog/Dialog.css

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-.DialogActions {
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  margin-top: 20px;
-}
-
-.DialogButtonsList {
-  display: flex;
-  flex-direction: column;
-  justify-content: right;
-  margin-top: 20px;
-}
-
-.DialogButtonsList button {
-  margin-bottom: 20px;
-}

package/src/components/ui/dialog/Dialog.tsx

@@ -1,34 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import type {JSX} from 'react';
-
-import './Dialog.css';
-
-import * as React from 'react';
-import {ReactNode} from 'react';
-
-type Props = Readonly<{
-  'data-test-id'?: string;
-  children: ReactNode;
-}>;
-
-export function DialogButtonsList({children}: Props): JSX.Element {
-  return <div className="DialogButtonsList">{children}</div>;
-}
-
-export function DialogActions({
-  'data-test-id': dataTestId,
-  children,
-}: Props): JSX.Element {
-  return (
-    <div className="DialogActions" data-test-id={dataTestId}>
-      {children}
-    </div>
-  );
-}

package/src/components/ui/dialog.tsx

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

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

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