@collabchron/notiq 0.3.0 → 1.0.0

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

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

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

package/src/components/ui/drop-downs/font-size.tsx

@@ -1,138 +0,0 @@
-import * as React from "react";
-
-import { LexicalEditor } from "lexical";
-import { Minus, Plus } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE } from "@/components/providers/ToolbarContext";
-import { updateFontSize, updateFontSizeInSelection, UpdateFontSizeType } from "../../editor/utils/editorFormatting";
-import { SHORTCUTS } from "../../editor/plugins/ShortcutsPlugin/shortcuts";
-import { Input } from "@/components/ui/input";
-
-export function parseAllowedFontSize(input: string): string {
-  const match = input.match(/^(\d+(?:\.\d+)?)px$/);
-  if (match) {
-    const n = Number(match[1]);
-    if (n >= MIN_ALLOWED_FONT_SIZE && n <= MAX_ALLOWED_FONT_SIZE) {
-      return input;
-    }
-  }
-  return "";
-}
-
-export default function FontSize({
-  selectionFontSize,
-  disabled,
-  editor,
-  className,
-  classNameContent
-}: {
-  selectionFontSize: string;
-  disabled: boolean;
-  editor: LexicalEditor;
-  className?:string,
-  classNameContent?:string
-}) {
-  const [inputValue, setInputValue] = React.useState<string>(selectionFontSize);
-  const [inputChangeFlag, setInputChangeFlag] = React.useState<boolean>(false);
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const inputValueNumber = Number(inputValue);
-
-    if (e.key === "Tab") {
-      return;
-    }
-    if (["e", "E", "+", "-"].includes(e.key) || isNaN(inputValueNumber)) {
-      e.preventDefault();
-      setInputValue("");
-      return;
-    }
-    setInputChangeFlag(true);
-    if (e.key === "Enter" || e.key === "Escape") {
-      e.preventDefault();
-
-      updateFontSizeByInputValue(inputValueNumber);
-    }
-  };
-  const handleInputBlur = () => {
-    if (inputValue !== "" && inputChangeFlag) {
-      const inputValueNumber = Number(inputValue);
-      updateFontSizeByInputValue(inputValueNumber);
-    }
-  };
-
-  const updateFontSizeByInputValue = (inputValueNumber: number) => {
-    let updatedFontSize = inputValueNumber;
-    if (inputValueNumber > MAX_ALLOWED_FONT_SIZE) {
-      updatedFontSize = MAX_ALLOWED_FONT_SIZE;
-    } else if (inputValueNumber < MIN_ALLOWED_FONT_SIZE) {
-      updatedFontSize = MIN_ALLOWED_FONT_SIZE;
-    }
-
-    setInputValue(String(updatedFontSize));
-    updateFontSizeInSelection(editor, String(updatedFontSize) + "px", null);
-    setInputChangeFlag(false);
-  };
-
-  React.useEffect(() => {
-    setInputValue(selectionFontSize);
-  }, [selectionFontSize]);
-  return (
-    <div className={cn("flex flex-row items-center gap-1",classNameContent)}>
-      <Button
-        type="button"
-        className={
-          cn("h-7 min-w-[29px] w-[29px]  px-[6px] border-none cursor-pointer",className)
-        }
-        tip={`decrement ${SHORTCUTS.INCREASE_FONT_SIZE}`}
-        disabled={
-          disabled ||
-          (selectionFontSize !== "" &&
-            Number(inputValue) <= MIN_ALLOWED_FONT_SIZE)
-        }
-        variant={"outline"}
-        size={"Toolbar"}
-        onClick={() =>
-          updateFontSize(editor, UpdateFontSizeType.decrement, inputValue)
-        }
-      >
-        <Minus className="w-[15px] h-[15px]" />
-      </Button>
-
-      <Input
-        type="number"
-        
-        value={inputValue}
-        disabled={disabled}
-        className={
-          cn("h-7 min-w-[29px] w-[29px]  px-[6px] border-none cursor-text",className)
-        }
-        min={MIN_ALLOWED_FONT_SIZE}
-        max={MAX_ALLOWED_FONT_SIZE}
-        onChange={(e) => setInputValue(e.target.value)}
-        onKeyDown={handleKeyPress}
-        onBlur={handleInputBlur}
-      />
-      <Button
-        type="button"
-        tip={`increment ${SHORTCUTS.DECREASE_FONT_SIZE}`}
-        
-        className={
-          cn("h-7 min-w-[29px] w-[29px]  px-[6px] border-none cursor-pointer",className)
-        }
-
-        disabled={
-          disabled ||
-          (selectionFontSize !== "" &&
-            Number(inputValue) >= MAX_ALLOWED_FONT_SIZE)
-        }
-        variant={"outline"}
-        size={"Toolbar"}
-        onClick={() =>
-          updateFontSize(editor, UpdateFontSizeType.increment, inputValue)
-        }
-      >
-        <Plus className="w-4 h-4" />
-      </Button>
-    </div>
-  );
-}

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

@@ -1,155 +0,0 @@
-import { $getSelection, LexicalEditor } from "lexical";
-import React, { CSSProperties, useCallback } from "react";
-import { $patchStyleText } from "@lexical/selection";
-import { DropDown } from ".";
-
-interface FontOption {
-  label: string;
-  func: () => void;
-  style: CSSProperties;
-}
-
-export default function Font({
-  editor,
-  style,
-  disabled,
-  value,
-  sideOffset,
-  side,
-  ShowChevronsUpDown,
-}: {
-  editor: LexicalEditor;
-  disabled: boolean;
-  value: string;
-  style?: React.CSSProperties;
-  ShowChevronsUpDown?: boolean;
-  side?: "top" | "right" | "bottom" | "left" | undefined;
-  sideOffset?: number;
-}) {
-  const applyFont = useCallback(
-    (font: string) => {
-      editor.update(() => {
-        const selection = $getSelection();
-        if (selection !== null) {
-          $patchStyleText(selection, {
-            ["font-family"]: font,
-          });
-        }
-      });
-    },
-    [editor, style]
-  );
-
-  const FONT_FAMILY_OPTIONS: FontOption[] = [
-    {
-      label: "Arial",
-      func: () => applyFont("Arial"),
-      style: { fontFamily: "Arial" },
-    },
-    {
-      label: "Courier New",
-      func: () => applyFont("Courier New"),
-      style: { fontFamily: "Courier New" },
-    },
-    {
-      label: "Georgia",
-      func: () => applyFont("Georgia"),
-      style: { fontFamily: "Georgia" },
-    },
-    {
-      label: "Times New Roman",
-      func: () => applyFont("Times New Roman"),
-      style: { fontFamily: "Times New Roman" },
-    },
-    {
-      label: "Trebuchet MS",
-      func: () => applyFont("Trebuchet MS"),
-      style: { fontFamily: "Trebuchet MS" },
-    },
-    {
-      label: "Verdana",
-      func: () => applyFont("Verdana"),
-      style: { fontFamily: "Verdana" },
-    },
-    {
-      label: "Comic Sans MS",
-      func: () => applyFont("Comic Sans MS"),
-      style: { fontFamily: "Comic Sans MS" },
-    },
-    {
-      label: "Calibri",
-      func: () => applyFont("Calibri"),
-      style: { fontFamily: "Calibri" },
-    },
-    {
-      label: "Poppins",
-      func: () => applyFont("Poppins"),
-      style: { fontFamily: "Poppins" },
-    },
-    {
-      label: "Alegreya",
-      func: () => applyFont("Alegreya"),
-      style: { fontFamily: "Alegreya" },
-    },
-    {
-      label: "Bree Serif",
-      func: () => applyFont("Bree Serif"),
-      style: { fontFamily: "Bree Serif" },
-    },
-    {
-      label: "Cambria",
-      func: () => applyFont("Cambria"),
-      style: { fontFamily: "Cambria" },
-    },
-    {
-      label: "Impact",
-      func: () => applyFont("Impact"),
-      style: { fontFamily: "Impact" },
-    },
-    {
-      label: "Lexend",
-      func: () => applyFont("Lexend"),
-      style: { fontFamily: "Lexend" },
-    },
-    {
-      label: "Lobster",
-      func: () => applyFont("Lobster"),
-      style: { fontFamily: "Lobster" },
-    },
-    {
-      label: "Lora",
-      func: () => applyFont("Lora"),
-      style: { fontFamily: "Lora" },
-    },
-    {
-      label: "Permanent Marker",
-      func: () => applyFont("Permanent Marker"),
-      style: { fontFamily: "Permanent Marker" },
-    },
-    {
-      label: "Ultra",
-      func: () => applyFont("Ultra"),
-      style: { fontFamily: "Ultra" },
-    },
-    {
-      label: "Reenie Beanie",
-      func: () => applyFont("Reenie Beanie"),
-      style: { fontFamily: "Reenie Beanie" },
-    },
-  ];
-
-
-  return (
-    <DropDown
-      ShowChevronsUpDown={ShowChevronsUpDown}
-      side={side}
-      sideOffset={sideOffset}
-      className="h-7 min-w-[29px] w-[29px] px-2 border-none cursor-pointer hover:bg-zinc-100 hover:text-zinc-900"
-      PopoverContentClassName={{ minWidth: "80px", width: "150px" }}
-      TriggerClassName={{ ...style, width: "100%" }}
-      disabled={disabled}
-      TriggerLabel={value}
-      values={FONT_FAMILY_OPTIONS}
-    />
-  );
-}

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

@@ -1,122 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandShortcut,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-
-interface values {
-  icon?: React.ReactNode;
-  label: string;
-  desc?: string;
-  func?: () => void;
-  style?: React.CSSProperties;
-  isSelected?: boolean;
-  shortcuts?: string;
-
-}
-interface Props {
-  TriggerLabel: React.ReactNode | string;
-  TriggerClassName?: React.CSSProperties;
-  className?: string;
-  PopoverContentClassName?: React.CSSProperties;
-  values: values[];
-  disabled: boolean;
-  triggerVariants?:"ghost" | "default" |"outline" |"link" | "secondary" | "destructive"
-  ShowChevronsUpDown?:boolean
-  side?: "top" | "right" | "bottom" | "left" | undefined
-  sideOffset?:number
-}
-
-export function DropDown({
-  className,
-  TriggerLabel,
-  TriggerClassName,
-  values,
-  disabled,
-  PopoverContentClassName,
-  triggerVariants="outline",
-  ShowChevronsUpDown=true,
-  side="bottom",
-  sideOffset=5
-}: Props) {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <Popover  modal={false}>
-      <PopoverTrigger  disabled={disabled} asChild>
-        <Button
-          variant={triggerVariants}
-          role="combobox"
-          size={"Toolbar"}
-          style={TriggerClassName}
-          className={className}
-        >
-          <div className="flex  flex-row justify-center gap-x-3 items-center">
-            {TriggerLabel}
-          </div>
-          {ShowChevronsUpDown && <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        side={side}
-        sideOffset={sideOffset}
-        style={PopoverContentClassName!}
-        className="w-[200px] p-0 dropdown-portal"
-      >
-        <Command>
-          <CommandInput placeholder="Search..." />
-          <CommandList>
-            <CommandEmpty>No found.</CommandEmpty>
-            <CommandGroup>
-              {values.map((framework) => (
-                <CommandItem
-                  key={framework.label}
-                  value={framework.label}
-                  style={framework.style}
-                  className={cn(
-                    "cursor-pointer",
-                    value === framework.label && "bg-gray-300/10",
-                  )}
-                  onSelect={(currentValue) => {
-                    setValue(currentValue === value ? "" : currentValue);
-                    if (framework.func) framework?.func();
-                  }}
-                >
-                  <div className="flex w-full flex-row items-center justify-between">
-                    <div className="flex  items-center gap-4 flex-row">
-                      {framework.icon}
-                      <div className="flex flex-col">
-                        {framework.label}
-                        <span className="text-sm text-muted-foreground">
-                          {framework.desc}
-                        </span>
-                      </div>
-                    </div>
-                    {framework.shortcuts && (
-                      <CommandShortcut>{framework.shortcuts}</CommandShortcut>
-                    )}
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}