@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/waka-diff-viewer.tsx

@@ -0,0 +1,352 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Label } from "../label"
+import { Badge } from "../badge"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SlateNode = any
+
+/** Statistics about the diff between two documents */
+export interface DiffStats {
+  /** Number of nodes added */
+  added: number
+  /** Number of nodes removed */
+  removed: number
+  /** Number of nodes modified */
+  modified: number
+  /** Number of unchanged nodes */
+  unchanged: number
+}
+
+export interface WakaDiffViewerProps {
+  /** Original (before) Slate document */
+  original: SlateNode[]
+  /** Modified (after) Slate document */
+  modified: SlateNode[]
+  /** Display mode */
+  mode?: "inline" | "side-by-side"
+  /** Label */
+  label?: string
+  /** Description */
+  description?: string
+  /** CSS class */
+  className?: string
+  /** Editor area CSS class */
+  editorClassName?: string
+  /** Minimum height in px */
+  minHeight?: number
+  /** Show diff statistics header */
+  showStats?: boolean
+  /** Label for the original document */
+  originalLabel?: string
+  /** Label for the modified document */
+  modifiedLabel?: string
+  /** Callback with diff stats when diff is computed */
+  onDiffComputed?: (stats: DiffStats) => void
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * WakaDiffViewer -- Visual diff between two document versions.
+ *
+ * Uses `@platejs/diff` to compute and render differences between
+ * two Slate document trees. Supports inline (unified) and
+ * side-by-side diff views.
+ *
+ * Rendering:
+ * - Added text is highlighted in green
+ * - Removed text is highlighted in red with strikethrough
+ * - Modified blocks show both states
+ *
+ * Useful for:
+ * - Specification version comparison (ws-serv-specs)
+ * - Audit trail diff review (ws-serv-audit)
+ * - Contract amendment review (WakaSign)
+ * - Content editorial review (WakaPress)
+ *
+ * @example
+ * ```tsx
+ * <WakaDiffViewer
+ *   original={previousVersion}
+ *   modified={currentVersion}
+ *   mode="side-by-side"
+ *   showStats
+ *   originalLabel="v1.2.0"
+ *   modifiedLabel="v1.3.0"
+ * />
+ * ```
+ */
+export const WakaDiffViewer = React.forwardRef<HTMLDivElement, WakaDiffViewerProps>(
+  (
+    {
+      original,
+      modified,
+      mode = "inline",
+      label,
+      description,
+      className,
+      editorClassName,
+      minHeight = 200,
+      showStats = true,
+      originalLabel = "Original",
+      modifiedLabel = "Modifie",
+      onDiffComputed,
+    },
+    ref
+  ) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [diffResult, setDiffResult] = React.useState<any>(null)
+    const [stats, setStats] = React.useState<DiffStats>({ added: 0, removed: 0, modified: 0, unchanged: 0 })
+    const [loadError, setLoadError] = React.useState(false)
+
+    // Compute diff
+    React.useEffect(() => {
+      let cancelled = false
+
+      const computeDiff = async () => {
+        try {
+          const diffModule = await import("@platejs/diff")
+
+          if (diffModule.computeDiff) {
+            const result = diffModule.computeDiff(original, modified)
+            if (!cancelled) {
+              setDiffResult(result)
+
+              // Compute stats
+              const s: DiffStats = { added: 0, removed: 0, modified: 0, unchanged: 0 }
+              if (Array.isArray(result)) {
+                for (const node of result) {
+                  if (node.diff === "insert" || node.diffOperation?.type === "insert") s.added++
+                  else if (node.diff === "delete" || node.diffOperation?.type === "delete") s.removed++
+                  else if (node.diff === "update" || node.diffOperation?.type === "update") s.modified++
+                  else s.unchanged++
+                }
+              }
+              setStats(s)
+              onDiffComputed?.(s)
+            }
+          }
+        } catch (err) {
+          console.error("[WakaDiffViewer] Failed to compute diff:", err)
+          if (!cancelled) setLoadError(true)
+        }
+      }
+
+      computeDiff()
+      return () => { cancelled = true }
+    }, [original, modified, onDiffComputed])
+
+    // ── Fallback: simple text diff ────────────────────────────────────────
+    if (loadError || !diffResult) {
+      return (
+        <div ref={ref} className={cn("space-y-1.5", className)}>
+          {label && <Label>{label}</Label>}
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+          {loadError ? (
+            <SimpleDiffView
+              original={original}
+              modified={modified}
+              mode={mode}
+              originalLabel={originalLabel}
+              modifiedLabel={modifiedLabel}
+              minHeight={minHeight}
+              editorClassName={editorClassName}
+            />
+          ) : (
+            <div className="flex items-center justify-center border rounded-lg bg-muted/30" style={{ minHeight }}>
+              <span className="text-sm text-muted-foreground animate-pulse">
+                Calcul des differences...
+              </span>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    // ── Render diff ───────────────────────────────────────────────────────
+    return (
+      <div ref={ref} className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+        <div className={cn("border rounded-lg overflow-hidden")}>
+          {/* Stats header */}
+          {showStats && (
+            <div className="flex items-center gap-3 px-4 py-2 border-b bg-muted/30">
+              <span className="text-xs text-muted-foreground font-medium">Differences :</span>
+              {stats.added > 0 && (
+                <Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 text-[10px] h-5">
+                  +{stats.added} ajout{stats.added > 1 ? "s" : ""}
+                </Badge>
+              )}
+              {stats.removed > 0 && (
+                <Badge variant="secondary" className="bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 text-[10px] h-5">
+                  -{stats.removed} suppression{stats.removed > 1 ? "s" : ""}
+                </Badge>
+              )}
+              {stats.modified > 0 && (
+                <Badge variant="secondary" className="bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 text-[10px] h-5">
+                  ~{stats.modified} modification{stats.modified > 1 ? "s" : ""}
+                </Badge>
+              )}
+              {stats.added === 0 && stats.removed === 0 && stats.modified === 0 && (
+                <span className="text-xs text-muted-foreground">Aucune difference</span>
+              )}
+            </div>
+          )}
+
+          {/* Diff content */}
+          {mode === "side-by-side" ? (
+            <div className="flex divide-x" style={{ minHeight }}>
+              <div className="flex-1 min-w-0">
+                <div className="px-3 py-1.5 border-b bg-red-50/50 dark:bg-red-950/10 text-xs font-medium text-muted-foreground">
+                  {originalLabel}
+                </div>
+                <DiffDocumentView
+                  nodes={original}
+                  diffType="original"
+                  className={editorClassName}
+                />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="px-3 py-1.5 border-b bg-green-50/50 dark:bg-green-950/10 text-xs font-medium text-muted-foreground">
+                  {modifiedLabel}
+                </div>
+                <DiffDocumentView
+                  nodes={modified}
+                  diffType="modified"
+                  className={editorClassName}
+                />
+              </div>
+            </div>
+          ) : (
+            <div style={{ minHeight }}>
+              <DiffInlineView
+                diffNodes={diffResult}
+                className={editorClassName}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+WakaDiffViewer.displayName = "WakaDiffViewer"
+
+// ─── Diff rendering helpers ─────────────────────────────────────────────────
+
+function DiffDocumentView({
+  nodes,
+  diffType,
+  className,
+}: {
+  nodes: SlateNode[]
+  diffType: "original" | "modified"
+  className?: string
+}) {
+  return (
+    <div className={cn("prose prose-sm max-w-none p-4 text-sm", className)}>
+      {nodes.map((node: SlateNode, i: number) => (
+        <DiffNodeRenderer key={i} node={node} diffType={diffType} />
+      ))}
+    </div>
+  )
+}
+
+function DiffInlineView({
+  diffNodes,
+  className,
+}: {
+  diffNodes: SlateNode[]
+  className?: string
+}) {
+  return (
+    <div className={cn("prose prose-sm max-w-none p-4 text-sm", className)}>
+      {diffNodes.map((node: SlateNode, i: number) => {
+        const diffOp = node.diff || node.diffOperation?.type
+        let bgClass = ""
+        if (diffOp === "insert") bgClass = "bg-green-100/60 dark:bg-green-900/20"
+        else if (diffOp === "delete") bgClass = "bg-red-100/60 dark:bg-red-900/20 line-through opacity-60"
+        else if (diffOp === "update") bgClass = "bg-amber-100/60 dark:bg-amber-900/20"
+
+        return (
+          <div key={i} className={cn("rounded px-1 -mx-1", bgClass)}>
+            <DiffNodeRenderer node={node} diffType="modified" />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function DiffNodeRenderer({ node, diffType }: { node: SlateNode; diffType: "original" | "modified" }) {
+  if (!node) return null
+
+  const text = extractText(node)
+  const type = node.type || "p"
+
+  switch (type) {
+    case "h1": return <h1 className="text-xl font-bold mt-4 mb-1">{text}</h1>
+    case "h2": return <h2 className="text-lg font-semibold mt-3 mb-1">{text}</h2>
+    case "h3": return <h3 className="text-base font-semibold mt-2 mb-1">{text}</h3>
+    case "blockquote": return <blockquote className="border-l-2 border-muted-foreground/30 pl-3 italic text-muted-foreground">{text}</blockquote>
+    default: return <p className="my-0.5 leading-relaxed">{text || "\u00A0"}</p>
+  }
+}
+
+function SimpleDiffView({
+  original,
+  modified,
+  mode,
+  originalLabel,
+  modifiedLabel,
+  minHeight,
+  editorClassName,
+}: {
+  original: SlateNode[]
+  modified: SlateNode[]
+  mode: "inline" | "side-by-side"
+  originalLabel: string
+  modifiedLabel: string
+  minHeight?: number
+  editorClassName?: string
+}) {
+  if (mode === "side-by-side") {
+    return (
+      <div className="flex divide-x border rounded-lg overflow-hidden" style={{ minHeight }}>
+        <div className="flex-1 min-w-0">
+          <div className="px-3 py-1.5 border-b bg-red-50/50 dark:bg-red-950/10 text-xs font-medium text-muted-foreground">{originalLabel}</div>
+          <DiffDocumentView nodes={original} diffType="original" className={editorClassName} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="px-3 py-1.5 border-b bg-green-50/50 dark:bg-green-950/10 text-xs font-medium text-muted-foreground">{modifiedLabel}</div>
+          <DiffDocumentView nodes={modified} diffType="modified" className={editorClassName} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="border rounded-lg overflow-hidden" style={{ minHeight }}>
+      <div className="p-4 text-sm text-muted-foreground">
+        Installez <code className="bg-muted px-1 rounded">@platejs/diff</code> pour la visualisation unifiee des differences.
+      </div>
+    </div>
+  )
+}
+
+function extractText(node: SlateNode): string {
+  if (typeof node?.text === "string") return node.text
+  if (Array.isArray(node?.children)) {
+    return node.children.map((c: SlateNode) => extractText(c)).join("")
+  }
+  return ""
+}

package/src/components/editor/waka-dnd-editor.tsx

@@ -0,0 +1,284 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Label } from "../label"
+import { Textarea } from "../textarea"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SlateNode = any
+
+export interface WakaDnDEditorProps {
+  /** Initial Slate content */
+  value?: SlateNode[]
+  /** Change callback */
+  onChange?: (value: SlateNode[]) => void
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Placeholder */
+  placeholder?: string
+  /** CSS class */
+  className?: string
+  /** Editor CSS class */
+  editorClassName?: string
+  /** Minimum height in px */
+  minHeight?: number
+  /** Label */
+  label?: string
+  /** Description */
+  description?: string
+  /** Error */
+  error?: string
+  /**
+   * Show a drag handle gutter on the left side of each block.
+   * When false, DnD still works but handles are hidden.
+   */
+  showDragHandles?: boolean
+  /**
+   * Show a drop line indicator when dragging blocks.
+   * Defaults to true.
+   */
+  showDropIndicator?: boolean
+  /** Extra Plate plugins */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  /** Ref to editor instance */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * WakaDnDEditor -- Plate editor with drag-and-drop block reordering.
+ *
+ * Users can grab any block by its drag handle and reorder it within
+ * the document. Built on top of `@platejs/dnd` and `@dnd-kit`.
+ *
+ * Includes block selection via `@platejs/selection` so users can
+ * select multiple blocks and drag them as a group.
+ *
+ * Useful for:
+ * - Kanban-style content builders
+ * - Form builders (WakaStart app wizard)
+ * - Reorderable document sections
+ * - Spec editor with rearrangeable requirements
+ *
+ * @example
+ * ```tsx
+ * <WakaDnDEditor
+ *   value={blocks}
+ *   onChange={setBlocks}
+ *   showDragHandles
+ * />
+ * ```
+ */
+export const WakaDnDEditor = React.forwardRef<HTMLDivElement, WakaDnDEditorProps>(
+  (
+    {
+      value,
+      onChange,
+      readOnly = false,
+      placeholder = "Glissez-deposez les blocs pour les reorganiser...",
+      className,
+      editorClassName,
+      minHeight = 300,
+      label,
+      description,
+      error,
+      showDragHandles = true,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [bundle, setBundle] = React.useState<any>(null)
+    const [loadError, setLoadError] = React.useState(false)
+
+    React.useEffect(() => {
+      let cancelled = false
+
+      const load = async () => {
+        try {
+          const [plateReact, basicNodes, tableModule, layoutModule, calloutModule, linkModule, dndModule, selectionModule] =
+            await Promise.all([
+              import("platejs/react"),
+              import("@platejs/basic-nodes/react"),
+              import("@platejs/table/react"),
+              import("@platejs/layout/react"),
+              import("@platejs/callout/react"),
+              import("@platejs/link/react"),
+              import("@platejs/dnd/react"),
+              import("@platejs/selection/react"),
+            ])
+
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const plugins: any[] = [
+            basicNodes.BoldPlugin, basicNodes.ItalicPlugin, basicNodes.UnderlinePlugin,
+            basicNodes.StrikethroughPlugin, basicNodes.CodePlugin, basicNodes.HighlightPlugin,
+            basicNodes.H1Plugin, basicNodes.H2Plugin, basicNodes.H3Plugin,
+            basicNodes.H4Plugin, basicNodes.BlockquotePlugin,
+            tableModule.TablePlugin, tableModule.TableRowPlugin,
+            tableModule.TableCellPlugin, tableModule.TableCellHeaderPlugin,
+            layoutModule.ColumnPlugin, layoutModule.ColumnItemPlugin,
+            calloutModule.CalloutPlugin,
+            linkModule.LinkPlugin.configure({
+              options: { allowedSchemes: ["http", "https", "mailto", "tel"] },
+            }),
+            // Selection (multi-block select)
+            selectionModule.BlockSelectionPlugin,
+            // DnD
+            dndModule.DndPlugin.configure({
+              options: {
+                enableScroller: true,
+              },
+            }),
+          ]
+
+          if (!cancelled) {
+            setBundle({
+              Plate: plateReact.Plate,
+              PlateContent: plateReact.PlateContent,
+              usePlateEditor: plateReact.usePlateEditor,
+              plugins,
+            })
+          }
+        } catch (err) {
+          console.error("[WakaDnDEditor] Failed to load:", err)
+          if (!cancelled) setLoadError(true)
+        }
+      }
+
+      load()
+      return () => { cancelled = true }
+    }, [])
+
+    if (bundle) {
+      return (
+        <DnDEditorInner
+          ref={ref}
+          bundle={bundle}
+          value={value}
+          onChange={onChange}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          className={className}
+          editorClassName={editorClassName}
+          minHeight={minHeight}
+          label={label}
+          description={description}
+          error={error}
+          showDragHandles={showDragHandles}
+          extraPlugins={extraPlugins}
+          editorRef={editorRef}
+        />
+      )
+    }
+
+    return (
+      <div ref={ref} className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        <div className="relative">
+          <Textarea placeholder={placeholder} disabled style={{ minHeight }} />
+          <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded-lg">
+            <span className="text-sm text-muted-foreground animate-pulse">
+              {loadError ? "Erreur de chargement" : "Chargement..."}
+            </span>
+          </div>
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+WakaDnDEditor.displayName = "WakaDnDEditor"
+
+// ─── Inner component ────────────────────────────────────────────────────────
+
+const DnDEditorInner = React.forwardRef<HTMLDivElement, WakaDnDEditorProps & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  bundle: any
+}>(
+  (
+    {
+      bundle: { Plate, PlateContent, usePlateEditor, plugins },
+      value,
+      onChange,
+      readOnly,
+      placeholder,
+      className,
+      editorClassName,
+      minHeight,
+      label,
+      description,
+      error,
+      showDragHandles,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    const allPlugins = React.useMemo(
+      () => [...plugins, ...(extraPlugins ?? [])],
+      [plugins, extraPlugins]
+    )
+
+    const editor = usePlateEditor({
+      plugins: allPlugins,
+      value: value ?? [{ type: "p", children: [{ text: "" }] }],
+    })
+
+    React.useEffect(() => {
+      if (editorRef) editorRef.current = editor
+    }, [editor, editorRef])
+
+    return (
+      <div ref={ref} className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+        <Plate
+          editor={editor}
+          onChange={onChange ? ({ value: v }: { value: SlateNode[] }) => onChange(v) : undefined}
+          readOnly={readOnly}
+        >
+          <div className={cn(
+            "border rounded-lg overflow-hidden",
+            error && "border-destructive",
+          )}>
+            {/* DnD hint bar */}
+            {!readOnly && showDragHandles && (
+              <div className="flex items-center gap-2 px-3 py-1.5 border-b bg-muted/30 text-xs text-muted-foreground">
+                <span className="inline-block w-4 text-center">&#x2630;</span>
+                <span>Survolez un bloc pour voir la poignee de glissement</span>
+              </div>
+            )}
+
+            <div style={{ minHeight }}>
+              <PlateContent
+                placeholder={placeholder}
+                readOnly={readOnly}
+                className={cn(
+                  "prose prose-sm max-w-none p-4",
+                  "focus-within:outline-none",
+                  "[&_[data-slate-editor]]:outline-none [&_[data-slate-editor]]:min-h-[inherit]",
+                  showDragHandles && "[&_[data-slate-node='element']]:relative [&_[data-slate-node='element']]:pl-6",
+                  editorClassName,
+                )}
+              />
+            </div>
+          </div>
+        </Plate>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+DnDEditorInner.displayName = "DnDEditorInner"