@collabchron/notiq 0.3.0 → 1.0.0

package/src/components/ui/stepper/step.tsx

@@ -1,179 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import ImagesPlugin from "../../editor/plugins/ImagesPlugin";
-import { Plus } from "lucide-react";
-import { Reorder } from "framer-motion";
-import { StepType } from "../../editor/nodes/Stepper";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { useSharedHistoryContext } from "@/components/providers/SharedHistoryContext";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { nestedNodes } from "../../editor/nodes";
-import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
-import LexicalAutoLinkPlugin from "../../editor/plugins/AutoLinkPlugin";
-import { LinkWithMetaDataPlugin } from "../../editor/plugins/LinkWithMetaData";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
-import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
-import CodeHighlightPlugin from "../../editor/plugins/CodeHighlightPlugin";
-import { mergeRegister } from "@lexical/utils";
-import {
-  COMMAND_PRIORITY_LOW,
-  LexicalEditor,
-  SELECTION_CHANGE_COMMAND,
-} from "lexical";
-import FloatingTextFormatToolbarPlugin from "../../editor/plugins/FloatingTextFormatToolbarPlugin";
-import SlashCommand from "../../editor/plugins/SlashCommand";
-import CodeActionMenuPlugin from "../../editor/plugins/CodeActionMenuPlugin";
-import FloatingLinkEditorPlugin from "../../editor/plugins/FloatingLinkEditorPlugin";
-
-interface Props {
-  item: StepType;
-  numberd: number;
-  insertAt: (index: number) => void;
-  remove: (numberd: number) => void;
-  updateTitle: (index: number, title: string) => void;
-}
-
-export default function Step({
-  item,
-  numberd,
-  insertAt,
-  remove,
-  updateTitle,
-}: Props) {
-
-  const titleRef = React.useRef<HTMLDivElement>(null);
-  const [isLinkEditMode, setIsLinkEditMode] = React.useState<boolean>(false);
-  const [floatingAnchorElem, setFloatingAnchorElem] =
-    useState<HTMLDivElement | null>(null);
-  const { historyState } = useSharedHistoryContext();
-  const activeEditorRef = useRef<LexicalEditor | null>(null);
-
-  const handleTitleBlur = () => {
-    if (titleRef.current) {
-      updateTitle(item.id, titleRef.current.textContent!)
-    }
-  };
-
-  // fix the delete
-  const handleTitleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Backspace") {
-      const currentText = titleRef.current?.textContent || "";
-      if (currentText === "") {
-        e.preventDefault();
-        remove(item.id);
-      }
-    }
-  };
-
-  const onRef = useCallback((_floatingAnchorElem: HTMLDivElement | null) => {
-    setFloatingAnchorElem(_floatingAnchorElem);
-  }, []);
-
-
-  useEffect(() => {
-    const unregister = mergeRegister(
-      item.content.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        (_, activeEditor) => {
-          activeEditorRef.current = activeEditor;
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      )
-    );
-    return () => {
-      unregister();
-    };
-  }, []);
-
-  return (
-    <Reorder.Item
-      value={item}
-      id={item.id.toString()}
-      initial={{ opacity: 0, y: 30 }}
-      animate={{ opacity: 1, y: 0, transition: { duration: 0.15 } }}
-      exit={{ opacity: 0, y: 20, transition: { duration: 0.3 } }}
-      className="relative group my-2 flex w-full flex-row gap-x-6 select-none"
-    >
-      <div
-
-        className="h-7 w-7 absolute max-sm:w-5 max-sm:h-5 max-sm:text-xs rounded-full z-50 bg-muted cursor-grab flex items-center justify-center">
-        {numberd + 1}
-      </div>
-
-      <div className="flex flex-col ml-10 w-full">
-        <div
-          contentEditable
-          suppressContentEditableWarning
-          ref={titleRef}
-          onBlur={handleTitleBlur}
-          onKeyDown={handleTitleKeyDown}
-          className="scroll-m-20 border-none outline-none cursor-text break-words max-sm:text-lg text-2xl font-semibold tracking-tight"
-        >
-          {item.title}
-        </div>
-        <LexicalNestedComposer
-          initialEditor={item.content}
-          initialNodes={[...nestedNodes]}
-        >
-          <HistoryPlugin externalHistoryState={historyState} />
-          <AutoFocusPlugin />
-          <LinkPlugin />
-          <ImagesPlugin />
-          <HorizontalRulePlugin />
-          <LexicalAutoLinkPlugin />
-          <LinkWithMetaDataPlugin />
-          <ListPlugin />
-          <CheckListPlugin />
-          <LinkWithMetaDataPlugin />
-          <TabIndentationPlugin maxIndent={7} />
-          <CodeHighlightPlugin />
-          <LinkPlugin />
-          <RichTextPlugin
-            contentEditable={
-              <div ref={onRef} className="relative">
-                <ContentEditable
-                  className="h-fit w-full resize-none cursor-text relative outline-none select-text whitespace-pre-wrap break-words"
-                  aria-placeholder="Write hint caption"
-                  placeholder={
-                    <div className="text-base font-medium text-[#999] overflow-hidden absolute top-[2px] left-[2px]  text-nowrap inline-block text-ellipsis pointer-events-none">
-                      Step content
-                    </div>
-                  }
-                />
-              </div>
-            }
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          {floatingAnchorElem && (
-            <>
-              <FloatingTextFormatToolbarPlugin
-                setIsLinkEditMode={setIsLinkEditMode}
-                anchorElem={floatingAnchorElem}
-              />
-              <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />
-              <FloatingLinkEditorPlugin
-                anchorElem={floatingAnchorElem}
-                isLinkEditMode={isLinkEditMode}
-                setIsLinkEditMode={setIsLinkEditMode}
-              />
-            </>
-          )}
-          {item.content.isEditable() && <SlashCommand />}
-        </LexicalNestedComposer>
-      </div>
-
-      <div
-        onClick={() => insertAt(numberd + 1)}
-        className="absolute max-sm:left-[2px] left-[4px] top-[35px] z-40 max-sm:w-4 max-sm:h-4 w-[20px] h-[20px] flex items-center justify-center ring-1 ring-gray-700 bg-gray-800 rounded-full cursor-pointer transition-opacity opacity-0 duration-500 group-hover:opacity-100"
-      >
-        <Plus className="size-[12px]" />
-      </div>
-    </Reorder.Item>
-  );
-}

package/src/components/ui/stepper/stepper.tsx

@@ -1,89 +0,0 @@
-import { Reorder, AnimatePresence } from "framer-motion";
-import Step from "./step";
-import { $isStepperNode, initialEditorState, StepsType } from "../../editor/nodes/Stepper";
-import { $getNodeByKey, createEditor, NodeKey } from "lexical";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-
-export default function Stepper({
-  steps,
-  nodeKey,
-}: {
-  steps: StepsType,
-  nodeKey: NodeKey,
-}) {
-  const [editor] = useLexicalComposerContext();
-
-  
-  
-  function SetSteps(steps:StepsType){
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isStepperNode(node)) {
-        node.replaceSteps(steps);
-      }
-    });
-  }
-
-  const remove = (index: number) => {    
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isStepperNode(node)) {
-        node.deleteStep(index);
-      }
-    });
-  };
-
-  function updateTitle(id: number, title: string) {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isStepperNode(node)) {
-        node.updateTitle(id, title);
-      }
-    });
-  }
-
-  const insertAt = (index: number) => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isStepperNode(node)) {
-        const newId = Date.now(); 
-        const newEditor = createEditor();
-        const parsedEditorState = newEditor.parseEditorState(
-          JSON.stringify(initialEditorState)
-        );
-        newEditor.setEditorState(parsedEditorState);
-        const newStep = {
-          id: newId, 
-          title: `New step `,
-          content: newEditor,
-        };
-        
-        node.insertStepAtIndex(newStep, index);
-      }
-    });
-  };
-
-
-  return (
-    <Reorder.Group
-      axis="y"
-      values={steps}
-      onReorder={SetSteps}
-      className="h-fit my-2 min-h-[90px] w-full overflow-hidden flex flex-col relative"
-    >
-      <AnimatePresence initial={false}>
-        {steps.map((item, index) => (
-          <Step 
-            updateTitle={updateTitle} 
-            remove={remove} 
-            insertAt={insertAt} 
-            key={item.id} 
-            numberd={index} 
-            item={item} 
-          />
-        ))}
-      </AnimatePresence>
-      <div className="absolute w-0.5 max-sm:left-2 left-[13px] rounded-sm -z-1 bg-input top-4 h-full" />
-    </Reorder.Group>
-  );
-}

package/src/components/ui/textarea.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
-
-export { Textarea }

package/src/components/ui/toggle.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-zinc-100 hover:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-zinc-100 data-[state=on]:text-zinc-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:hover:bg-zinc-800 dark:hover:text-zinc-400 dark:focus-visible:ring-zinc-300 dark:data-[state=on]:bg-zinc-800 dark:data-[state=on]:text-zinc-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border-none cursor-pointer bg-transparent shadow-sm",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-7 rounded-md px-[6px] ",
-        lg: "h-10 px-2.5 min-w-10",
-        Toolbar:"h-7 w-7 p-3",
-        floting:" h-5 w-5 p-3"
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, tip, size, ...props }, ref) =>
-  tip ? (
-    <TooltipProvider>
-      <Tooltip delayDuration={0.2}>
-        <TooltipTrigger asChild>
-          <div>
-            <TogglePrimitive.Root
-              ref={ref}
-              className={cn(toggleVariants({ variant, size, className }))}
-              {...props}
-            />
-          </div>
-        </TooltipTrigger>
-        <TooltipContent side={"top"}>
-          <span>{tip}</span>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  ) : (
-    <TogglePrimitive.Root
-      ref={ref}
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-);
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };

package/src/components/ui/tooltip.tsx

@@ -1,32 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
-    />
-  </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }