@thinhnguyencth1204/nextcli 0.7.0 → 0.9.0

package/templates/next-base/src/components/rich-text/lexical/plugins/toolbar-plugin.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from "lexical";
+import { INSERT_IMAGE_COMMAND } from "../nodes/image-node";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Bold, ImageIcon, Italic, Smile, Underline } from "lucide-react";
+
+const COMMON_EMOJIS = [
+  "😀",
+  "😂",
+  "😍",
+  "🥳",
+  "👍",
+  "🎉",
+  "🔥",
+  "✨",
+  "❤️",
+  "🙏",
+  "💡",
+  "📝",
+];
+
+type ToolbarPluginProps = {
+  disabled?: boolean;
+};
+
+export function ToolbarPlugin({ disabled }: ToolbarPluginProps) {
+  const [editor] = useLexicalComposerContext();
+  const [imageUrl, setImageUrl] = useState("");
+  const [imageAlt, setImageAlt] = useState("");
+  const [imageOpen, setImageOpen] = useState(false);
+  const [emojiOpen, setEmojiOpen] = useState(false);
+
+  const insertEmoji = useCallback(
+    (emoji: string) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          selection.insertText(emoji);
+        }
+      });
+      setEmojiOpen(false);
+    },
+    [editor],
+  );
+
+  const insertImage = useCallback(() => {
+    const src = imageUrl.trim();
+    if (!src) {
+      return;
+    }
+
+    try {
+      new URL(src);
+    } catch {
+      return;
+    }
+
+    editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+      altText: imageAlt.trim() || "Image",
+      src,
+    });
+    setImageUrl("");
+    setImageAlt("");
+    setImageOpen(false);
+  }, [editor, imageAlt, imageUrl]);
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 border-b border-input px-2 py-1.5">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        disabled={disabled}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
+        aria-label="Bold"
+      >
+        <Bold className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        disabled={disabled}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")}
+        aria-label="Italic"
+      >
+        <Italic className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        disabled={disabled}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")}
+        aria-label="Underline"
+      >
+        <Underline className="h-4 w-4" />
+      </Button>
+
+      <Popover open={emojiOpen} onOpenChange={setEmojiOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            disabled={disabled}
+            aria-label="Insert emoji"
+          >
+            <Smile className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-56 p-2" align="start">
+          <div className="grid grid-cols-6 gap-1">
+            {COMMON_EMOJIS.map((emoji) => (
+              <button
+                key={emoji}
+                type="button"
+                className="hover:bg-accent rounded p-1 text-lg"
+                onClick={() => insertEmoji(emoji)}
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <Popover open={imageOpen} onOpenChange={setImageOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            disabled={disabled}
+            aria-label="Insert image URL"
+          >
+            <ImageIcon className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 space-y-3" align="start">
+          <div className="space-y-1">
+            <label className="text-xs font-medium" htmlFor="image-url">
+              Image URL
+            </label>
+            <Input
+              id="image-url"
+              placeholder="https://..."
+              value={imageUrl}
+              onChange={(event) => setImageUrl(event.target.value)}
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-xs font-medium" htmlFor="image-alt">
+              Alt text
+            </label>
+            <Input
+              id="image-alt"
+              placeholder="Description"
+              value={imageAlt}
+              onChange={(event) => setImageAlt(event.target.value)}
+            />
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            className="w-full"
+            onClick={insertImage}
+            disabled={!imageUrl.trim()}
+          >
+            Insert image
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/templates/next-base/src/components/rich-text/lexical/rich-text-editor.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useCallback, useMemo, useRef } from "react";
+import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { cn } from "@/utils/cn";
+import { richTextEditorExtension } from "./extension";
+import { ImagePlugin } from "./plugins/image-plugin";
+import { InitialStatePlugin } from "./plugins/initial-state-plugin";
+import { OnChangePlugin } from "./plugins/on-change-plugin";
+import { ToolbarPlugin } from "./plugins/toolbar-plugin";
+import { createEmptyLexicalContent, type LexicalEditorContent } from "../types";
+import { extractImageUrlsFromState } from "@/lib/rich-text/image-urls";
+import type { SerializedEditorState } from "lexical";
+import { ClientOnly } from "../client-only";
+
+export type LexicalRichTextEditorProps = {
+  value: LexicalEditorContent | null;
+  onChange: (value: LexicalEditorContent) => void;
+  onImagesRemoved?: (removedUrls: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  className?: string;
+  id?: string;
+};
+
+function LexicalRichTextEditorInner({
+  value,
+  onChange,
+  onImagesRemoved,
+  placeholder = "Write something...",
+  disabled = false,
+  readOnly = false,
+  className,
+  id,
+}: LexicalRichTextEditorProps) {
+  const previousImagesRef = useRef<string[]>(
+    extractImageUrlsFromState(value ?? createEmptyLexicalContent()),
+  );
+
+  const handleChange = useCallback(
+    (nextState: SerializedEditorState) => {
+      const nextImages = extractImageUrlsFromState(nextState);
+      const previousImages = previousImagesRef.current;
+      const removed = previousImages.filter((url) => !nextImages.includes(url));
+
+      if (removed.length > 0) {
+        onImagesRemoved?.(removed);
+      }
+
+      previousImagesRef.current = nextImages;
+      onChange(nextState);
+    },
+    [onChange, onImagesRemoved],
+  );
+
+  const initialValue = useMemo(
+    () => value ?? createEmptyLexicalContent(),
+    [value],
+  );
+
+  const isInteractive = !disabled && !readOnly;
+
+  return (
+    <div
+      id={id}
+      className={cn(
+        "bg-background overflow-hidden rounded-md border border-input",
+        (disabled || readOnly) && "opacity-60",
+        className,
+      )}
+    >
+      <LexicalExtensionComposer
+        extension={richTextEditorExtension}
+        contentEditable={null}
+      >
+        {isInteractive ? <ToolbarPlugin disabled={disabled} /> : null}
+        <div className="relative min-h-[160px]">
+          <LexicalErrorBoundary onError={(error) => console.error(error)}>
+            <ContentEditable
+              className={cn(
+                "lexical-content-editable min-h-[160px] px-3 py-2 text-sm outline-none",
+                !isInteractive && "pointer-events-none",
+              )}
+              aria-placeholder={placeholder}
+              placeholder={
+                <div className="text-muted-foreground pointer-events-none absolute top-2 left-3 text-sm">
+                  {placeholder}
+                </div>
+              }
+            />
+          </LexicalErrorBoundary>
+          <InitialStatePlugin value={initialValue} />
+          <ImagePlugin />
+          <OnChangePlugin onChange={handleChange} disabled={!isInteractive} />
+        </div>
+      </LexicalExtensionComposer>
+    </div>
+  );
+}
+
+export function LexicalRichTextEditor(props: LexicalRichTextEditorProps) {
+  return (
+    <ClientOnly
+      fallback={
+        <div
+          className={cn(
+            "bg-muted/40 text-muted-foreground min-h-[160px] rounded-md border border-input px-3 py-2 text-sm",
+            props.className,
+          )}
+        >
+          Loading editor...
+        </div>
+      }
+    >
+      <LexicalRichTextEditorInner {...props} />
+    </ClientOnly>
+  );
+}

package/templates/next-base/src/components/rich-text/lexical/theme.ts

@@ -0,0 +1,18 @@
+export const richTextTheme = {
+  paragraph: "lexical-paragraph",
+  text: {
+    bold: "lexical-text-bold",
+    italic: "lexical-text-italic",
+    underline: "lexical-text-underline",
+    strikethrough: "lexical-text-strikethrough",
+    underlineStrikethrough: "lexical-text-underline-strikethrough",
+    code: "lexical-text-code",
+  },
+  heading: {
+    h1: "lexical-heading-h1",
+    h2: "lexical-heading-h2",
+    h3: "lexical-heading-h3",
+  },
+  quote: "lexical-quote",
+  image: "lexical-image",
+};

package/templates/next-base/src/components/rich-text/rich-text-renderer.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { cn } from "@/utils/cn";
+import { richTextReadOnlyExtension } from "./lexical/extension";
+import type { LexicalEditorContent } from "./types";
+import { ClientOnly } from "./client-only";
+
+type HydrateStatePluginProps = {
+  content: LexicalEditorContent;
+};
+
+function HydrateStatePlugin({ content }: HydrateStatePluginProps) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    const parsed = editor.parseEditorState(content);
+    editor.setEditorState(parsed);
+  }, [content, editor]);
+
+  return null;
+}
+
+export type RichTextRendererProps = {
+  content: LexicalEditorContent | null;
+  className?: string;
+  emptyFallback?: ReactNode;
+};
+
+function RichTextRendererInner({
+  content,
+  className,
+}: {
+  content: LexicalEditorContent;
+  className?: string;
+}) {
+  return (
+    <div className={cn("lexical-renderer", className)}>
+      <LexicalExtensionComposer
+        extension={richTextReadOnlyExtension}
+        contentEditable={null}
+      >
+        <LexicalErrorBoundary onError={(error) => console.error(error)}>
+          <ContentEditable className="lexical-content-editable pointer-events-none text-sm outline-none" />
+        </LexicalErrorBoundary>
+        <HydrateStatePlugin content={content} />
+      </LexicalExtensionComposer>
+    </div>
+  );
+}
+
+export function RichTextRenderer({
+  content,
+  className,
+  emptyFallback = (
+    <p className="text-muted-foreground text-sm">No content yet.</p>
+  ),
+}: RichTextRendererProps) {
+  if (!content) {
+    return <>{emptyFallback}</>;
+  }
+
+  return (
+    <ClientOnly fallback={emptyFallback}>
+      <RichTextRendererInner content={content} className={className} />
+    </ClientOnly>
+  );
+}

package/templates/next-base/src/components/rich-text/types.ts

@@ -0,0 +1,60 @@
+import type { SerializedEditorState } from "lexical";
+
+/** Lexical editor state persisted as JSON (API / database). */
+export type LexicalEditorContent = SerializedEditorState;
+
+/** Plain string content for the native textarea adapter. */
+export type TextareaEditorContent = string;
+
+export type EditorVariant = "textarea" | "lexical";
+
+export type EditorContent = LexicalEditorContent | TextareaEditorContent;
+
+export type EditorFieldProps = {
+  /** Switch editor implementation without changing form code. */
+  variant?: EditorVariant;
+  value: EditorContent | null;
+  onChange: (value: EditorContent) => void;
+  /** Called when image URLs disappear from Lexical content (for storage cleanup). */
+  onImagesRemoved?: (removedUrls: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  className?: string;
+  id?: string;
+  name?: string;
+};
+
+export function isLexicalContent(
+  value: EditorContent | null,
+): value is LexicalEditorContent {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "root" in value &&
+    typeof value.root === "object"
+  );
+}
+
+export function createEmptyLexicalContent(): LexicalEditorContent {
+  return {
+    root: {
+      children: [
+        {
+          children: [],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "paragraph",
+          version: 1,
+        },
+      ],
+      direction: null,
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1,
+    },
+  } as unknown as LexicalEditorContent;
+}

package/templates/next-base/src/components/ui/data-table/data-table-column-header.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { Column } from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+}: {
+  column: Column<TData, TValue>;
+  title: string;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-8 px-2"
+      onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+    >
+      {title}
+    </Button>
+  );
+}

package/templates/next-base/src/components/ui/data-table/data-table-filter-list.tsx

@@ -0,0 +1,3 @@
+export function DataTableFilterList() {
+  return null;
+}

package/templates/next-base/src/components/ui/data-table/data-table-pagination.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+
+export function DataTablePagination<TData>({ table }: { table: Table<TData> }) {
+  const t = useTranslations("common.table");
+  const pageCount = table.getPageCount();
+  const pageIndex = table.getState().pagination.pageIndex;
+
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <span className="text-xs text-muted-foreground">
+        {pageCount === 0 ? 0 : pageIndex + 1}/{Math.max(pageCount, 1)}
+      </span>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        {t("previous")}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        {t("next")}
+      </Button>
+    </div>
+  );
+}

package/templates/next-base/src/components/ui/data-table/data-table-skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DataTableSkeleton() {
+  return (
+    <div className="space-y-2">
+      <Skeleton className="h-8 w-full" />
+      <Skeleton className="h-8 w-full" />
+      <Skeleton className="h-8 w-full" />
+    </div>
+  );
+}

package/templates/next-base/src/components/ui/data-table/data-table-toolbar.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+
+export function DataTableToolbar<TData>({
+  _table,
+  children,
+}: {
+  _table: Table<TData>;
+  children?: ReactNode;
+}) {
+  return <div className="flex items-center justify-between">{children}</div>;
+}

package/templates/next-base/src/components/ui/data-table/data-table-view-options.tsx

@@ -0,0 +1,3 @@
+export function DataTableViewOptions() {
+  return null;
+}

package/templates/next-base/src/components/ui/data-table/data-table.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { flexRender, type Table as TanstackTable } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+type DataTableProps<TData> = {
+  table: TanstackTable<TData>;
+};
+
+export function DataTable<TData>({ table }: DataTableProps<TData>) {
+  const t = useTranslations("common.table");
+
+  return (
+    <div className="space-y-3">
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length > 0 ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={table.getAllColumns().length}
+                  className="h-24 text-center"
+                >
+                  {t("noResults")}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  );
+}