@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/blocks/waka-version-diff-block.tsx

@@ -0,0 +1,426 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../utils/cn"
+import type { PlateElementProps } from "../waka-editor-elements"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export const VERSION_DIFF_BLOCK_TYPE = "version_diff" as const
+
+/** A single diff hunk (line-level diff) */
+export interface DiffLine {
+  /** Line content */
+  content: string
+  /** Diff type */
+  type: "added" | "removed" | "unchanged" | "modified"
+  /** Original line number (for removed/unchanged) */
+  oldLineNumber?: number
+  /** New line number (for added/unchanged) */
+  newLineNumber?: number
+}
+
+/** Represents a section of changes */
+export interface DiffHunk {
+  /** Start line in old version */
+  oldStart: number
+  /** Start line in new version */
+  newStart: number
+  /** Lines in this hunk */
+  lines: DiffLine[]
+}
+
+/** Slate node for version diff blocks */
+export interface VersionDiffElement {
+  type: typeof VERSION_DIFF_BLOCK_TYPE
+  /** Old (previous) version label */
+  oldVersionLabel: string
+  /** New (current) version label */
+  newVersionLabel: string
+  /** Old version full text */
+  oldText: string
+  /** New version full text */
+  newText: string
+  /** Pre-computed diff hunks */
+  hunks: DiffHunk[]
+  /** Summary stats */
+  stats: { additions: number; deletions: number; modifications: number }
+  /** Author of the change */
+  author?: string
+  /** Timestamp of the change */
+  timestamp?: string
+  children: Array<{ text: string }>
+}
+
+export interface WakaVersionDiffBlockProps extends PlateElementProps {
+  element?: VersionDiffElement & Record<string, unknown>
+}
+
+// ============================================================================
+// Diff View Modes
+// ============================================================================
+
+type DiffViewMode = "unified" | "split" | "summary"
+
+// ============================================================================
+// Element Component
+// ============================================================================
+
+/**
+ * WakaVersionDiffBlock - A Plate.js block that displays a visual diff between
+ * two versions of text content. Shows additions, deletions, and modifications
+ * with unified or split view modes.
+ *
+ * Designed to integrate with `@platejs/diff` or work standalone with pre-computed
+ * diff data.
+ *
+ * Register in Plate editor:
+ * ```ts
+ * components: {
+ *   [VERSION_DIFF_BLOCK_TYPE]: WakaVersionDiffBlock,
+ * }
+ * ```
+ */
+export function WakaVersionDiffBlock({
+  attributes,
+  children,
+  element,
+  className,
+}: WakaVersionDiffBlockProps) {
+  const el = element as VersionDiffElement | undefined
+  const [viewMode, setViewMode] = React.useState<DiffViewMode>("unified")
+  const [expanded, setExpanded] = React.useState(true)
+
+  const hunks = el?.hunks || []
+  const stats = el?.stats || { additions: 0, deletions: 0, modifications: 0 }
+  const oldLabel = el?.oldVersionLabel || "Previous"
+  const newLabel = el?.newVersionLabel || "Current"
+
+  return (
+    <div
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "my-4 rounded-lg overflow-hidden border border-border shadow-sm",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b border-border">
+        <div className="flex items-center gap-3">
+          {/* Git-like icon */}
+          <svg
+            className="h-4 w-4 text-orange-600 dark:text-orange-400"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v6m0 0l-3 3m3-3l3 3M6 21h12a2 2 0 002-2V7l-5-5H6a2 2 0 00-2 2v15a2 2 0 002 2z" />
+          </svg>
+          <span className="text-xs font-bold uppercase tracking-wider text-foreground">
+            Version Diff
+          </span>
+
+          {/* Version labels */}
+          <div className="flex items-center gap-1 text-[10px]">
+            <span className="px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400 font-mono font-medium">
+              {oldLabel}
+            </span>
+            <svg className="h-3 w-3 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+            </svg>
+            <span className="px-1.5 py-0.5 rounded bg-emerald-100 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 font-mono font-medium">
+              {newLabel}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Stats */}
+          <div className="flex items-center gap-2 text-[10px] font-mono">
+            {stats.additions > 0 && (
+              <span className="text-emerald-600 dark:text-emerald-400 font-semibold">+{stats.additions}</span>
+            )}
+            {stats.deletions > 0 && (
+              <span className="text-red-600 dark:text-red-400 font-semibold">-{stats.deletions}</span>
+            )}
+            {stats.modifications > 0 && (
+              <span className="text-amber-600 dark:text-amber-400 font-semibold">~{stats.modifications}</span>
+            )}
+          </div>
+
+          {/* View mode toggle */}
+          <div className="flex items-center border border-border rounded overflow-hidden">
+            {(["unified", "split", "summary"] as DiffViewMode[]).map((mode) => (
+              <button
+                key={mode}
+                type="button"
+                onClick={() => setViewMode(mode)}
+                className={cn(
+                  "px-2 py-1 text-[10px] font-medium transition-colors",
+                  viewMode === mode
+                    ? "bg-foreground/10 text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {mode.charAt(0).toUpperCase() + mode.slice(1)}
+              </button>
+            ))}
+          </div>
+
+          {/* Collapse toggle */}
+          <button
+            type="button"
+            onClick={() => setExpanded(!expanded)}
+            className="text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <svg
+              className={cn("h-4 w-4 transition-transform", !expanded && "-rotate-90")}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Author + timestamp */}
+      {(el?.author || el?.timestamp) && (
+        <div className="px-4 py-1.5 border-b border-border/50 bg-muted/10 flex items-center gap-3 text-[10px] text-muted-foreground">
+          {el.author && (
+            <div className="flex items-center gap-1">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
+              <span className="font-medium">{el.author}</span>
+            </div>
+          )}
+          {el.timestamp && (
+            <span>{new Date(el.timestamp).toLocaleString("fr-FR")}</span>
+          )}
+        </div>
+      )}
+
+      {/* Diff content */}
+      {expanded && (
+        <div className="overflow-x-auto">
+          {viewMode === "summary" ? (
+            /* Summary view */
+            <div className="p-4 space-y-3">
+              <div className="grid grid-cols-3 gap-3">
+                <div className="rounded-lg bg-emerald-50 dark:bg-emerald-500/5 border border-emerald-200 dark:border-emerald-500/20 p-3 text-center">
+                  <div className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{stats.additions}</div>
+                  <div className="text-[10px] font-medium text-emerald-700/70 dark:text-emerald-400/70 uppercase tracking-wider">Additions</div>
+                </div>
+                <div className="rounded-lg bg-red-50 dark:bg-red-500/5 border border-red-200 dark:border-red-500/20 p-3 text-center">
+                  <div className="text-2xl font-bold text-red-600 dark:text-red-400">{stats.deletions}</div>
+                  <div className="text-[10px] font-medium text-red-700/70 dark:text-red-400/70 uppercase tracking-wider">Deletions</div>
+                </div>
+                <div className="rounded-lg bg-amber-50 dark:bg-amber-500/5 border border-amber-200 dark:border-amber-500/20 p-3 text-center">
+                  <div className="text-2xl font-bold text-amber-600 dark:text-amber-400">{stats.modifications}</div>
+                  <div className="text-[10px] font-medium text-amber-700/70 dark:text-amber-400/70 uppercase tracking-wider">Modified</div>
+                </div>
+              </div>
+              {/* Change bar */}
+              <div className="h-2 rounded-full bg-muted overflow-hidden flex">
+                {stats.additions > 0 && (
+                  <div className="bg-emerald-500 h-full" style={{ width: `${(stats.additions / (stats.additions + stats.deletions + stats.modifications)) * 100}%` }} />
+                )}
+                {stats.modifications > 0 && (
+                  <div className="bg-amber-500 h-full" style={{ width: `${(stats.modifications / (stats.additions + stats.deletions + stats.modifications)) * 100}%` }} />
+                )}
+                {stats.deletions > 0 && (
+                  <div className="bg-red-500 h-full" style={{ width: `${(stats.deletions / (stats.additions + stats.deletions + stats.modifications)) * 100}%` }} />
+                )}
+              </div>
+            </div>
+          ) : viewMode === "split" ? (
+            /* Split view */
+            <div className="grid grid-cols-2 divide-x divide-border">
+              <div className="p-0">
+                <div className="px-3 py-1.5 border-b border-border/50 bg-red-50/50 dark:bg-red-950/10">
+                  <span className="text-[10px] font-semibold text-red-700 dark:text-red-400 uppercase tracking-wider">{oldLabel}</span>
+                </div>
+                <div className="font-mono text-[12px] leading-relaxed">
+                  {hunks.map((hunk, hi) => (
+                    <React.Fragment key={hi}>
+                      {hunk.lines.filter((l) => l.type !== "added").map((line, li) => (
+                        <div
+                          key={`${hi}-${li}`}
+                          className={cn(
+                            "px-3 py-0.5 flex",
+                            line.type === "removed" && "bg-red-100/60 dark:bg-red-500/10",
+                            line.type === "modified" && "bg-amber-100/60 dark:bg-amber-500/10"
+                          )}
+                        >
+                          <span className="w-8 text-right pr-2 text-muted-foreground/50 select-none shrink-0">
+                            {line.oldLineNumber}
+                          </span>
+                          <span className={cn(
+                            line.type === "removed" && "text-red-800 dark:text-red-300",
+                            line.type === "modified" && "text-amber-800 dark:text-amber-300"
+                          )}>
+                            {line.type === "removed" && <span className="text-red-500 mr-1">-</span>}
+                            {line.content}
+                          </span>
+                        </div>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </div>
+              </div>
+              <div className="p-0">
+                <div className="px-3 py-1.5 border-b border-border/50 bg-emerald-50/50 dark:bg-emerald-950/10">
+                  <span className="text-[10px] font-semibold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider">{newLabel}</span>
+                </div>
+                <div className="font-mono text-[12px] leading-relaxed">
+                  {hunks.map((hunk, hi) => (
+                    <React.Fragment key={hi}>
+                      {hunk.lines.filter((l) => l.type !== "removed").map((line, li) => (
+                        <div
+                          key={`${hi}-${li}`}
+                          className={cn(
+                            "px-3 py-0.5 flex",
+                            line.type === "added" && "bg-emerald-100/60 dark:bg-emerald-500/10",
+                            line.type === "modified" && "bg-amber-100/60 dark:bg-amber-500/10"
+                          )}
+                        >
+                          <span className="w-8 text-right pr-2 text-muted-foreground/50 select-none shrink-0">
+                            {line.newLineNumber}
+                          </span>
+                          <span className={cn(
+                            line.type === "added" && "text-emerald-800 dark:text-emerald-300",
+                            line.type === "modified" && "text-amber-800 dark:text-amber-300"
+                          )}>
+                            {line.type === "added" && <span className="text-emerald-500 mr-1">+</span>}
+                            {line.content}
+                          </span>
+                        </div>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : (
+            /* Unified view */
+            <div className="font-mono text-[12px] leading-relaxed">
+              {hunks.map((hunk, hi) => (
+                <React.Fragment key={hi}>
+                  {/* Hunk header */}
+                  <div className="px-3 py-1 bg-blue-50/50 dark:bg-blue-950/10 text-blue-600 dark:text-blue-400 text-[10px]">
+                    @@ -{hunk.oldStart} +{hunk.newStart} @@
+                  </div>
+                  {hunk.lines.map((line, li) => (
+                    <div
+                      key={`${hi}-${li}`}
+                      className={cn(
+                        "px-3 py-0.5 flex",
+                        line.type === "added" && "bg-emerald-100/60 dark:bg-emerald-500/10",
+                        line.type === "removed" && "bg-red-100/60 dark:bg-red-500/10",
+                        line.type === "modified" && "bg-amber-100/60 dark:bg-amber-500/10"
+                      )}
+                    >
+                      <span className="w-8 text-right pr-2 text-muted-foreground/50 select-none shrink-0">
+                        {line.oldLineNumber || ""}
+                      </span>
+                      <span className="w-8 text-right pr-2 text-muted-foreground/50 select-none shrink-0">
+                        {line.newLineNumber || ""}
+                      </span>
+                      <span className="w-4 shrink-0 text-center select-none">
+                        {line.type === "added" ? (
+                          <span className="text-emerald-500">+</span>
+                        ) : line.type === "removed" ? (
+                          <span className="text-red-500">-</span>
+                        ) : line.type === "modified" ? (
+                          <span className="text-amber-500">~</span>
+                        ) : (
+                          <span className="text-muted-foreground/30"> </span>
+                        )}
+                      </span>
+                      <span className={cn(
+                        line.type === "added" && "text-emerald-800 dark:text-emerald-300",
+                        line.type === "removed" && "text-red-800 dark:text-red-300 line-through",
+                        line.type === "modified" && "text-amber-800 dark:text-amber-300"
+                      )}>
+                        {line.content}
+                      </span>
+                    </div>
+                  ))}
+                </React.Fragment>
+              ))}
+              {hunks.length === 0 && (
+                <div className="py-8 text-center text-sm text-muted-foreground italic">
+                  No differences found.
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Hidden Slate children */}
+      <div className="hidden">{children}</div>
+    </div>
+  )
+}
+
+WakaVersionDiffBlock.displayName = "WakaVersionDiffBlock"
+
+// ============================================================================
+// Node Factory
+// ============================================================================
+
+export function createVersionDiffNodes(options?: Partial<Omit<VersionDiffElement, "type" | "children">>): VersionDiffElement[] {
+  return [
+    {
+      type: VERSION_DIFF_BLOCK_TYPE,
+      oldVersionLabel: options?.oldVersionLabel || "v1.0",
+      newVersionLabel: options?.newVersionLabel || "v1.1",
+      oldText: options?.oldText || "",
+      newText: options?.newText || "",
+      hunks: options?.hunks || [
+        {
+          oldStart: 1,
+          newStart: 1,
+          lines: [
+            { content: "The system SHALL authenticate users via OAuth2.", type: "unchanged", oldLineNumber: 1, newLineNumber: 1 },
+            { content: "Rate limiting: 50 req/min per user.", type: "removed", oldLineNumber: 2 },
+            { content: "Rate limiting: 100 req/min per user.", type: "added", newLineNumber: 2 },
+            { content: "All API responses use JSON format.", type: "unchanged", oldLineNumber: 3, newLineNumber: 3 },
+            { content: "Added: Support for WebSocket real-time events.", type: "added", newLineNumber: 4 },
+          ],
+        },
+      ],
+      stats: options?.stats || { additions: 2, deletions: 1, modifications: 0 },
+      author: options?.author,
+      timestamp: options?.timestamp,
+      children: [{ text: "" }],
+    },
+  ]
+}
+
+export async function createVersionDiffPlugin() {
+  try {
+    const { createPlatePlugin } = await import("platejs/react")
+    return createPlatePlugin({
+      key: VERSION_DIFF_BLOCK_TYPE,
+      node: {
+        isElement: true,
+        isVoid: true,
+        type: VERSION_DIFF_BLOCK_TYPE,
+        component: WakaVersionDiffBlock,
+      },
+    })
+  } catch {
+    console.warn("[WakaVersionDiffBlock] platejs not installed")
+    return null
+  }
+}