@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/forms/date-time-picker.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+import { Calendar } from "../primitives/client";
+import { InputTime } from "./input-time";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/client";
+import { Separator } from "../primitives";
+
+type DateTimePickerProps = Omit<
+  ComponentProps<typeof Calendar>,
+  "mode" | "selected" | "onSelect"
+> & {
+  value?: Date;
+  onValueChange?: (date?: Date) => void;
+  formatStr?: string;
+  popoverContentClassName?: string;
+  popoverContentOptions?: ComponentProps<typeof PopoverContent>;
+  buttonClassName?: string;
+  buttonOptions?: ComponentProps<typeof Button>;
+  placeholder?: string;
+};
+
+export function DateTimePicker({
+  value,
+  onValueChange,
+  formatStr = "yyyy-MM-dd p",
+  popoverContentClassName,
+  popoverContentOptions,
+  buttonClassName,
+  buttonOptions,
+  placeholder = "Pick date and time",
+  ...props
+}: DateTimePickerProps) {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(value);
+
+  const handleDateSelect = (selected?: Date | undefined) => {
+    if (!selected) return;
+
+    // Preserve the time when changing the date
+    const newDateTime = new Date(selected);
+    if (selectedDate) {
+      newDateTime.setHours(selectedDate.getHours());
+      newDateTime.setMinutes(selectedDate.getMinutes());
+    }
+
+    setSelectedDate(newDateTime);
+    onValueChange?.(newDateTime);
+  };
+
+  const handleTimeChange = (timeString?: string) => {
+    if (!timeString) return;
+
+    const [hours, minutes] = timeString.split(":").map(Number);
+
+    if (selectedDate) {
+      const newDateTime = new Date(selectedDate);
+      newDateTime.setHours(hours);
+      newDateTime.setMinutes(minutes);
+
+      setSelectedDate(newDateTime);
+      onValueChange?.(newDateTime);
+    }
+  };
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn("w-full px-3 text-start font-normal", buttonClassName)}
+          {...buttonOptions}
+        >
+          {selectedDate ? (
+            <span>{format(selectedDate, formatStr)}</span>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <CalendarIcon className="ms-auto h-4 w-4 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", popoverContentClassName)}
+        align="start"
+        {...popoverContentOptions}
+      >
+        <Calendar
+          mode="single"
+          selected={selectedDate}
+          onSelect={handleDateSelect}
+          {...props}
+        />
+        <Separator />
+        <InputTime
+          className="rounded-t-none border-0"
+          onValueChange={handleTimeChange}
+          value={selectedDate ? format(selectedDate, "p") : undefined}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/forms/editor/editor-menu-bar.tsx

@@ -0,0 +1,394 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Check,
+  Code,
+  Image as ImageIcon,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Minus,
+  Palette,
+  Quote,
+  Redo,
+  Strikethrough,
+  Type,
+  Undo,
+  Unlink,
+} from "lucide-react";
+
+import type { DynamicIconNameType } from "../../../types";
+import type { ChainedCommands, Editor } from "@tiptap/react";
+import type { FormEvent } from "react";
+
+import { cn } from "../../../utils";
+
+import { Button } from "../../primitives";
+import { Input } from "../../primitives";
+import { InputFile } from "../input-file";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../primitives/client";
+import { Separator } from "../../primitives";
+import { Toggle } from "../../primitives/client";
+import { DynamicIcon } from "../../primitives/client";
+
+interface SizeType {
+  label: string;
+  level: 1 | 2 | 3;
+  textSize: `text-${string}`;
+}
+
+const sizes: SizeType[] = [
+  { label: "Normal", level: 3, textSize: "text-lg" },
+  { label: "Large", level: 2, textSize: "text-xl" },
+  { label: "Extra Large", level: 1, textSize: "text-2xl" },
+];
+
+function SizeHandler({ editor }: { editor: Editor }) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          aria-label="Select text style"
+        >
+          <Type className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="min-w-[8rem] w-auto p-1">
+        <div className="flex flex-col">
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().setParagraph().run()}
+            className={cn(
+              "justify-start px-3 py-2 text-left text-base",
+              editor.isActive("paragraph") && "bg-muted",
+            )}
+          >
+            Small
+          </Button>
+          {sizes.map((size: SizeType) => (
+            <Button
+              key={size.level}
+              variant="ghost"
+              onClick={() =>
+                editor
+                  .chain()
+                  .focus()
+                  .toggleHeading({ level: size.level })
+                  .run()
+              }
+              className={cn(
+                "justify-start px-3 py-2 text-left",
+                size.textSize,
+                editor.isActive("heading", { level: size.level }) && "bg-muted",
+              )}
+            >
+              {size.label}
+            </Button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface FormatType {
+  format: string;
+  iconName: DynamicIconNameType;
+}
+
+const formats: FormatType[] = [
+  {
+    format: "bold",
+    iconName: "Bold",
+  },
+  {
+    format: "italic",
+    iconName: "Italic",
+  },
+  {
+    format: "underline",
+    iconName: "Underline",
+  },
+  {
+    format: "strike",
+    iconName: "Strikethrough",
+  },
+];
+
+function FormatHandler({
+  editor,
+  format,
+  iconName,
+}: {
+  editor: Editor;
+  format: string;
+  iconName: DynamicIconNameType;
+}) {
+  const toggleCommands: Record<string, () => ChainedCommands> = {
+    bold: () => editor.chain().focus().toggleBold(),
+    italic: () => editor.chain().focus().toggleItalic(),
+    underline: () => editor.chain().focus().toggleUnderline(),
+    strike: () => editor.chain().focus().toggleStrike(),
+  };
+
+  function handlePressChange() {
+    const command = toggleCommands[format];
+
+    if (command) {
+      command().run();
+    }
+  }
+
+  return (
+    <Toggle
+      size="sm"
+      pressed={editor.isActive(format)}
+      onPressedChange={handlePressChange}
+      aria-label={`Toggle ${format} format`}
+    >
+      <DynamicIcon name={iconName} className="h-4 w-4" />
+    </Toggle>
+  );
+}
+
+interface AlignmentType {
+  alignment: string;
+  iconName: DynamicIconNameType;
+}
+
+const alignments: AlignmentType[] = [
+  { alignment: "left", iconName: "AlignLeft" },
+  { alignment: "center", iconName: "AlignCenter" },
+  { alignment: "right", iconName: "AlignRight" },
+  { alignment: "justify", iconName: "AlignJustify" },
+];
+
+function AlignmentHandler({
+  editor,
+  alignment,
+  iconName,
+}: {
+  editor: Editor;
+  alignment: string;
+  iconName: DynamicIconNameType;
+}) {
+  return (
+    <Toggle
+      size="sm"
+      pressed={editor.isActive({ textAlign: alignment })}
+      onPressedChange={() =>
+        editor.chain().focus().setTextAlign(alignment).run()
+      }
+      aria-label={`Switch ${alignment} alignment`}
+    >
+      <DynamicIcon name={iconName} className="h-4 w-4" />
+    </Toggle>
+  );
+}
+
+function ImageHandler({ editor }: { editor: Editor }) {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+
+  function handleFileChange(files: FileList) {
+    if (files.length < 1) return;
+    const objectURL = URL.createObjectURL(files[0]);
+    setImageSrc(objectURL);
+  }
+
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (editor && imageSrc) {
+      editor.chain().focus().setImage({ src: imageSrc }).run();
+      setImageSrc(null);
+    }
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          aria-label="Insert image"
+        >
+          <ImageIcon className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <form
+          onSubmit={(e) => {
+            e.stopPropagation();
+            handleSubmit(e);
+          }}
+          className="flex justify-center items-center gap-2"
+        >
+          <InputFile onValueChange={handleFileChange} />
+          <Button
+            type="submit"
+            variant="ghost"
+            size="icon"
+            className="shrink-0 h-8 w-8"
+            aria-label="Submit"
+          >
+            <Check className="h-4 w-4" />
+          </Button>
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function LinkHandler({ editor }: { editor: Editor }) {
+  const isLinkActive = editor.isActive("link");
+
+  return isLinkActive ? (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="h-8 w-8"
+      onClick={() => editor.chain().focus().unsetLink().run()}
+      aria-label="Remove link"
+    >
+      <Unlink className="h-4 w-4" />
+    </Button>
+  ) : (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          aria-label="Insert link"
+        >
+          <LinkIcon className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="flex justify-center items-center gap-2">
+        <p className="shrink-0">Insert link</p>
+        <Input
+          autoFocus
+          type="text"
+          placeholder="https://www.example.com"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              editor
+                .chain()
+                .focus()
+                .setLink({
+                  href: (e.target as HTMLInputElement).value,
+                })
+                .run();
+            }
+          }}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="shrink-0 h-8 w-8"
+          onClick={(e) => {
+            editor
+              .chain()
+              .focus()
+              .setLink({
+                href: (e.target as HTMLInputElement).value,
+              })
+              .run();
+          }}
+          aria-label="Submit"
+        >
+          <Check className="h-4 w-4" />
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ColorHandler({ editor }: { editor: Editor }) {
+  const selectedColor = editor.getAttributes("textStyle").color;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="relative overflow-hidden"
+      onClick={() => inputRef.current?.click()}
+      aria-label="Select text color"
+    >
+      <Palette style={{ color: selectedColor }} className="size-4" />
+      <Input
+        ref={inputRef}
+        type="color"
+        value={selectedColor}
+        onChange={(e) =>
+          editor
+            .chain()
+            .focus()
+            .setColor(e.target.value as string)
+            .run()
+        }
+        className="sr-only"
+        tabIndex={-1}
+      />
+    </Button>
+  );
+}
+
+export function EditorMenuBar({ editor }: { editor: Editor }) {
+  return (
+    <div
+      className="flex flex-wrap items-center gap-1.5 p-1.5"
+      aria-label="Editor Menu Bar"
+    >
+      <SizeHandler editor={editor} />
+      <ColorHandler editor={editor} />
+
+      <Separator orientation="vertical" className="h-4" />
+
+      {formats.map(({ format, iconName }) => (
+        <FormatHandler
+          key={format}
+          editor={editor}
+          format={format}
+          iconName={iconName}
+        />
+      ))}
+
+      <Separator orientation="vertical" className="h-4" />
+
+      {alignments.map(({ alignment, iconName }) => (
+        <AlignmentHandler
+          key={alignment}
+          editor={editor}
+          alignment={alignment}
+          iconName={iconName}
+        />
+      ))}
+
+      <Separator orientation="vertical" className="h-4" />
+
+      <ImageHandler editor={editor} />
+      <LinkHandler editor={editor} />
+    </div>
+  );
+}

package/src/ui/forms/editor/index.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useDirection } from "@radix-ui/react-direction";
+import Color from "@tiptap/extension-color";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import TextAlign from "@tiptap/extension-text-align";
+import TextStyle from "@tiptap/extension-text-style";
+import Typography from "@tiptap/extension-typography";
+import Underline from "@tiptap/extension-underline";
+import { BubbleMenu, EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+import type { UseEditorOptions } from "@tiptap/react";
+
+import { cn } from "../../../utils";
+
+import { useIsRtl } from "../../../hooks";
+import { Card } from "../../primitives";
+import { ScrollArea } from "../../primitives/client";
+import { EditorMenuBar } from "./editor-menu-bar";
+
+interface EditorProps extends UseEditorOptions {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  bubbleMenu?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export function Editor({
+  value,
+  onValueChange,
+  bubbleMenu = false,
+  placeholder,
+  className,
+  ...props
+}: EditorProps) {
+  const direction = useDirection();
+  const isRtl = useIsRtl();
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        class: cn(
+          "px-3 py-2 break-all [&_p]:m-0 [&_.is-editor-empty]:before:absolute [&_.is-editor-empty]:before:top-2 [&_.is-editor-empty]:before:cursor-text [&_.is-editor-empty]:before:text-muted-foreground [&_.is-editor-empty]:before:content-[attr(data-placeholder)] prose prose-headings:font-normal prose-headings:text-foreground prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg dark:prose-invert focus:outline-hidden",
+          className,
+        ),
+      },
+    },
+    extensions: [
+      StarterKit,
+      Underline,
+      TextAlign.configure({
+        types: ["heading", "paragraph"],
+        defaultAlignment: isRtl ? "right" : "left",
+      }),
+      Color,
+      TextStyle,
+      Image,
+      Link.configure({
+        openOnClick: true,
+        HTMLAttributes: {
+          rel: "noopener noreferrer",
+          target: "_blank",
+        },
+      }),
+      Placeholder.configure({
+        placeholder: placeholder,
+        showOnlyCurrent: true,
+      }),
+      Typography,
+    ],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onValueChange?.(editor.getHTML());
+    },
+    ...props,
+  });
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <Card>
+      {bubbleMenu ? (
+        <BubbleMenu
+          className="z-50 h-auto rounded-md border bg-popover text-popover-foreground shadow-md outline-hidden"
+          editor={editor}
+          tippyOptions={{
+            duration: 100,
+            maxWidth: "98vw",
+            appendTo: document.body,
+            zIndex: 50,
+          }}
+        >
+          <EditorMenuBar editor={editor} />
+        </BubbleMenu>
+      ) : (
+        <EditorMenuBar editor={editor} />
+      )}
+      <ScrollArea
+        className={cn(
+          "flex flex-col min-h-9 rounded-md cursor-text",
+          !bubbleMenu && "border-t border-border",
+          editor.isFocused && "outline-hidden ring-1 ring-ring",
+        )}
+      >
+        <EditorContent
+          editor={editor}
+          dir={direction}
+          className={cn(
+            editor.isActive({ textAlign: "left" }) &&
+              "[&_.is-editor-empty]:before:left-3",
+            editor.isActive({ textAlign: "right" }) &&
+              "[&_.is-editor-empty]:before:right-3",
+            editor.isActive({ textAlign: "center" }) &&
+              "[&_.is-editor-empty]:before:left-1/2 [&_.is-editor-empty]:before:absolute [&_.is-editor-empty]:before:-translate-x-1/2",
+            editor.isActive({ textAlign: "justify" }) &&
+              "[&_.is-editor-empty]:before:left-3",
+          )}
+          onClick={() => editor.commands.focus()}
+        />
+      </ScrollArea>
+    </Card>
+  );
+}