@etus/ui 0.1.0

package/src/components/advanced/VersionControl/VersionControl.tsx

@@ -0,0 +1,758 @@
+"use client"
+
+import type {
+  DiffLine,
+  Version,
+  VersionActionsProps,
+  VersionControlProps,
+  VersionDiffProps,
+  VersionItemProps,
+  VersionTimelineProps,
+} from "./VersionControl.types"
+import type { KeyboardEvent, ReactNode } from "react"
+
+import { Edit3, GitCompare, Loader2, Minus, Plus, RotateCcw } from "lucide-react"
+import { useCallback, useState } from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  changeIndicatorVariants,
+  diffLineVariants,
+  versionBadgeVariants,
+  versionControlVariants,
+  versionItemVariants,
+  versionTimelineConnectorVariants,
+  versionTimelineMarkerVariants,
+} from "./VersionControl.variants"
+
+/**
+ * Format a date to a human-readable string
+ */
+function formatTimestamp(date: Date): string {
+  return date.toLocaleDateString(undefined, {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+/**
+ * Format relative time
+ */
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+  if (diffDays === 0) {
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
+    if (diffHours === 0) {
+      const diffMinutes = Math.floor(diffMs / (1000 * 60))
+      return diffMinutes <= 1 ? "Just now" : `${String(diffMinutes)} minutes ago`
+    }
+    return diffHours === 1 ? "1 hour ago" : `${String(diffHours)} hours ago`
+  }
+  if (diffDays === 1) return "Yesterday"
+  if (diffDays < 7) return `${String(diffDays)} days ago`
+  return formatTimestamp(date)
+}
+
+/**
+ * VersionBadge component for displaying version labels
+ */
+function VersionBadge({
+  children,
+  className,
+  isCurrent = false,
+  isSelected = false,
+  size = "default",
+}: {
+  children: ReactNode
+  className?: string
+  isCurrent?: boolean
+  isSelected?: boolean
+  size?: "default" | "lg" | "sm"
+}) {
+  const variant = isCurrent ? "current" : isSelected ? "selected" : "previous"
+
+  return (
+    <span
+      className={cn(versionBadgeVariants({ variant, size }), className)}
+      data-slot="version-badge"
+    >
+      {children}
+    </span>
+  )
+}
+
+/**
+ * ChangeIndicator component for showing additions/deletions/modifications
+ */
+function ChangeIndicator({
+  additions = 0,
+  deletions = 0,
+  modifications = 0,
+  className,
+}: {
+  additions?: number
+  className?: string
+  deletions?: number
+  modifications?: number
+}) {
+  return (
+    <div className={cn("flex items-center gap-2", className)} data-slot="change-indicator">
+      {additions > 0 && (
+        <span className={changeIndicatorVariants({ type: "addition" })}>
+          <Plus className="h-3 w-3" />
+          {additions}
+        </span>
+      )}
+      {deletions > 0 && (
+        <span className={changeIndicatorVariants({ type: "deletion" })}>
+          <Minus className="h-3 w-3" />
+          {deletions}
+        </span>
+      )}
+      {modifications > 0 && (
+        <span className={changeIndicatorVariants({ type: "modification" })}>
+          <Edit3 className="h-3 w-3" />
+          {modifications}
+        </span>
+      )}
+    </div>
+  )
+}
+
+/**
+ * VersionActions component for version action buttons
+ */
+function VersionActions({
+  version,
+  allowRestore = true,
+  onRestore,
+  onCompare,
+  isRestoring = false,
+  className,
+  ...props
+}: VersionActionsProps) {
+  const handleRestore = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onRestore?.(version)
+    },
+    [version, onRestore]
+  )
+
+  const handleCompare = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onCompare?.(version)
+    },
+    [version, onCompare]
+  )
+
+  return (
+    <div
+      className={cn("flex items-center gap-1", className)}
+      data-slot="version-actions"
+      {...props}
+    >
+      {onCompare && (
+        <button
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-2 py-1",
+            "text-xs text-muted-foreground hover:text-foreground",
+            "hover:bg-accent transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          )}
+          aria-label={`Compare version ${version.label ?? version.id}`}
+          type="button"
+          onClick={handleCompare}
+        >
+          <GitCompare className="h-3.5 w-3.5" />
+          <span className="hidden sm:inline">Compare</span>
+        </button>
+      )}
+      {allowRestore && onRestore && (
+        <button
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-2 py-1",
+            "text-xs text-muted-foreground hover:text-foreground",
+            "hover:bg-accent transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "disabled:opacity-50 disabled:pointer-events-none"
+          )}
+          aria-label={`Restore to version ${version.label ?? version.id}`}
+          disabled={isRestoring}
+          type="button"
+          onClick={handleRestore}
+        >
+          {isRestoring ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <RotateCcw className="h-3.5 w-3.5" />
+          )}
+          <span className="hidden sm:inline">Restore</span>
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * VersionItem component for displaying a single version entry
+ */
+function VersionItem({
+  version,
+  isCurrent = false,
+  isSelected = false,
+  allowRestore = true,
+  size = "default",
+  onVersionClick,
+  onRestore,
+  onCompare,
+  className,
+  ...props
+}: VersionItemProps) {
+  const handleClick = useCallback(() => {
+    onVersionClick?.(version)
+  }, [version, onVersionClick])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault()
+        onVersionClick?.(version)
+      }
+      if (event.key === "r" || event.key === "R") {
+        event.preventDefault()
+        onRestore?.(version)
+      }
+      if (event.key === "c" || event.key === "C") {
+        event.preventDefault()
+        onCompare?.(version)
+      }
+    },
+    [version, onVersionClick, onRestore, onCompare]
+  )
+
+  const label = version.label ?? version.id
+
+  return (
+    <div
+      className={cn(
+        versionItemVariants({
+          variant: "list",
+          size,
+          isCurrent,
+          isSelected,
+        }),
+        className
+      )}
+      aria-current={isCurrent ? "true" : undefined}
+      data-current={isCurrent ? "" : undefined}
+      data-selected={isSelected ? "" : undefined}
+      data-slot="version-item"
+      role="listitem"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      <div className="flex flex-1 flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <VersionBadge isCurrent={isCurrent} isSelected={isSelected} size={size}>
+            {label}
+          </VersionBadge>
+          {isCurrent && (
+            <span className="text-xs text-muted-foreground">(Current)</span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {version.author && (
+            <span data-slot="version-author">{version.author.name}</span>
+          )}
+          <time
+            data-slot="version-timestamp"
+            dateTime={version.timestamp.toISOString()}
+            title={formatTimestamp(version.timestamp)}
+          >
+            {formatRelativeTime(version.timestamp)}
+          </time>
+        </div>
+
+        {version.changes && (
+          <ChangeIndicator
+            additions={version.changes.additions}
+            deletions={version.changes.deletions}
+            modifications={version.changes.modifications}
+          />
+        )}
+      </div>
+
+      {(onRestore ?? onCompare) && !isCurrent && (
+        <VersionActions
+          allowRestore={allowRestore}
+          version={version}
+          onCompare={onCompare}
+          onRestore={onRestore}
+        />
+      )}
+    </div>
+  )
+}
+
+/**
+ * VersionList component for displaying versions in a list format
+ */
+function VersionList({
+  versions,
+  currentVersionId,
+  selectedVersionId,
+  size = "default",
+  allowRestore = true,
+  onVersionSelect,
+  onRestore,
+  onCompare,
+  className,
+}: {
+  allowRestore?: boolean
+  className?: string
+  currentVersionId?: string
+  onCompare?: (version: Version) => void
+  onRestore?: (version: Version) => void
+  onVersionSelect?: (version: Version) => void
+  selectedVersionId?: string
+  size?: "default" | "lg" | "sm"
+  versions: Version[]
+}) {
+  return (
+    <div
+      aria-label="Version history"
+      className={cn("flex flex-col gap-2", className)}
+      data-slot="version-list"
+      role="list"
+    >
+      {versions.map((version) => (
+        <VersionItem
+          key={version.id}
+          allowRestore={allowRestore && version.id !== currentVersionId}
+          isCurrent={version.id === currentVersionId}
+          isSelected={version.id === selectedVersionId}
+          size={size}
+          version={version}
+          onCompare={onCompare}
+          onRestore={onRestore}
+          onVersionClick={onVersionSelect}
+        />
+      ))}
+    </div>
+  )
+}
+
+/**
+ * VersionTimeline component for displaying versions in a timeline format
+ */
+function VersionTimeline({
+  versions,
+  currentVersionId,
+  size = "default",
+  onVersionSelect,
+  className,
+  ...props
+}: VersionTimelineProps) {
+  return (
+    <div
+      aria-label="Version timeline"
+      className={cn("relative flex flex-col gap-4 pl-6", className)}
+      data-slot="version-timeline"
+      role="list"
+      {...props}
+    >
+      {versions.map((version, index) => {
+        const isCurrent = version.id === currentVersionId
+        const isLast = index === versions.length - 1
+
+        return (
+          <div
+            key={version.id}
+            className="relative flex items-start gap-3"
+            data-slot="timeline-item"
+            role="listitem"
+          >
+            {/* Connector line */}
+            {!isLast && (
+              <div
+                className={versionTimelineConnectorVariants({
+                  status: isCurrent ? "current" : "previous",
+                  size,
+                })}
+                aria-hidden="true"
+                data-slot="timeline-connector"
+                style={{ top: "1rem", height: "calc(100% + 1rem)" }}
+              />
+            )}
+
+            {/* Marker */}
+            <div
+              className={cn(
+                versionTimelineMarkerVariants({
+                  status: isCurrent ? "current" : "previous",
+                  size,
+                }),
+                "top-1"
+              )}
+              aria-hidden="true"
+              data-slot="timeline-marker"
+            />
+
+            {/* Content */}
+            <button
+              className={cn(
+                "flex flex-1 flex-col gap-1 text-left",
+                "rounded-md p-2 -ml-1",
+                "hover:bg-accent/50 transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                isCurrent && "bg-primary/5"
+              )}
+              aria-current={isCurrent ? "true" : undefined}
+              type="button"
+              onClick={() => onVersionSelect?.(version)}
+            >
+              <div className="flex items-center gap-2">
+                <VersionBadge isCurrent={isCurrent} size={size}>
+                  {version.label ?? version.id}
+                </VersionBadge>
+                {isCurrent && (
+                  <span className="text-xs text-muted-foreground">(Current)</span>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                {version.author && <span>{version.author.name}</span>}
+                <time dateTime={version.timestamp.toISOString()}>
+                  {formatRelativeTime(version.timestamp)}
+                </time>
+              </div>
+
+              {version.changes && (
+                <ChangeIndicator
+                  additions={version.changes.additions}
+                  deletions={version.changes.deletions}
+                  modifications={version.changes.modifications}
+                />
+              )}
+            </button>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * DiffLineNumber component for rendering line numbers
+ */
+function DiffLineNumber({
+  old,
+  new: newNum,
+  size = "default",
+}: {
+  new?: number
+  old?: number
+  size?: "default" | "lg" | "sm"
+}) {
+  const widthClass = size === "sm" ? "w-8" : size === "lg" ? "w-12" : "w-10"
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 select-none gap-1 text-muted-foreground/50",
+        size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-xs"
+      )}
+      data-slot="diff-line-number"
+    >
+      <span className={cn(widthClass, "text-right")}>{old ?? ""}</span>
+      <span className={cn(widthClass, "text-right")}>{newNum ?? ""}</span>
+    </div>
+  )
+}
+
+/**
+ * VersionDiff component for displaying diff between versions
+ */
+function VersionDiff({
+  oldVersion,
+  newVersion,
+  lines,
+  isLoading = false,
+  className,
+  ...props
+}: VersionDiffProps) {
+  if (isLoading) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center p-8 text-muted-foreground",
+          className
+        )}
+        data-slot="version-diff"
+        {...props}
+      >
+        <Loader2 className="h-6 w-6 animate-spin mr-2" />
+        <span>Loading diff...</span>
+      </div>
+    )
+  }
+
+  if (lines.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center p-8 text-muted-foreground",
+          className
+        )}
+        data-slot="version-diff"
+        {...props}
+      >
+        <span>No changes between versions</span>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      aria-label={`Diff between ${oldVersion.label ?? oldVersion.id} and ${newVersion.label ?? newVersion.id}`}
+      className={cn("rounded-md border border-border overflow-hidden", className)}
+      data-slot="version-diff"
+      role="region"
+      {...props}
+    >
+      {/* Diff header */}
+      <div className="flex items-center justify-between border-b border-border bg-muted/50 px-4 py-2">
+        <div className="flex items-center gap-2 text-sm">
+          <VersionBadge>{oldVersion.label ?? oldVersion.id}</VersionBadge>
+          <span className="text-muted-foreground">vs</span>
+          <VersionBadge>{newVersion.label ?? newVersion.id}</VersionBadge>
+        </div>
+      </div>
+
+      {/* Diff content */}
+      <div className="overflow-x-auto" data-slot="diff-content">
+        <pre className="min-w-full">
+          {lines.map((line, index) => (
+            <div
+              // eslint-disable-next-line @eslint-react/no-array-index-key -- diff lines can have duplicate content, index is appropriate
+              key={index}
+              className={diffLineVariants({ type: line.type })}
+              data-slot="diff-line"
+              data-type={line.type}
+            >
+              <DiffLineNumber
+                new={line.lineNumber.new}
+                old={line.lineNumber.old}
+              />
+              <span className="flex-1 whitespace-pre-wrap break-all">
+                {line.type === "addition" && "+ "}
+                {line.type === "deletion" && "- "}
+                {line.type === "context" && "  "}
+                {line.content}
+              </span>
+            </div>
+          ))}
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * VersionControl component for displaying and managing version history.
+ *
+ * @example
+ * ```tsx
+ * const versions = [
+ *   { id: "v3", timestamp: new Date(), author: { id: "1", name: "John" } },
+ *   { id: "v2", timestamp: new Date(Date.now() - 86400000), author: { id: "1", name: "John" } },
+ * ]
+ * <VersionControl
+ *   versions={versions}
+ *   currentVersionId="v3"
+ *   onVersionSelect={(v) => console.log("Selected:", v)}
+ *   onRestore={async (v) => await restoreVersion(v.id)}
+ * />
+ * ```
+ */
+function VersionControl({
+  versions,
+  currentVersionId,
+  onVersionSelect,
+  onRestore,
+  onCompare,
+  showDiff = true,
+  showTimeline = false,
+  allowRestore = true,
+  maxVersions,
+  getDiff,
+  emptyContent,
+  isLoading = false,
+  variant = "list",
+  size = "default",
+  className,
+  ...props
+}: VersionControlProps) {
+  const [selectedVersionId, setSelectedVersionId] = useState<string | undefined>()
+  const [compareVersion, setCompareVersion] = useState<undefined | Version>()
+  const [diffLines, setDiffLines] = useState<DiffLine[]>([])
+  const [isDiffLoading, setIsDiffLoading] = useState(false)
+
+  // Limit versions if maxVersions is set
+  const displayVersions = maxVersions
+    ? versions.slice(0, maxVersions)
+    : versions
+
+  // Handle version selection
+  const handleVersionSelect = useCallback(
+    (version: Version) => {
+      setSelectedVersionId(version.id)
+      onVersionSelect?.(version)
+    },
+    [onVersionSelect]
+  )
+
+  // Handle compare action (async wrapped for event handler compatibility)
+  const handleCompare = useCallback(
+    (version: Version) => {
+      if (!currentVersionId || !getDiff) return
+
+      const currentVersion = versions.find((v) => v.id === currentVersionId)
+      if (!currentVersion) return
+
+      setCompareVersion(version)
+      setIsDiffLoading(true)
+
+      void (async () => {
+        try {
+          const lines = await getDiff(version, currentVersion)
+          setDiffLines(lines)
+        } catch (error) {
+          console.error("Failed to load diff:", error)
+          setDiffLines([])
+        } finally {
+          setIsDiffLoading(false)
+        }
+      })()
+
+      onCompare?.(version, currentVersion)
+    },
+    [currentVersionId, versions, getDiff, onCompare]
+  )
+
+  // Handle restore action (async wrapped for event handler compatibility)
+  const handleRestore = useCallback(
+    (version: Version) => {
+      if (!onRestore) return
+      void onRestore(version)
+    },
+    [onRestore]
+  )
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div
+        className={cn(
+          versionControlVariants({ variant, size }),
+          "items-center justify-center p-8",
+          className
+        )}
+        data-loading=""
+        data-slot="version-control"
+        {...props}
+      >
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <span className="text-muted-foreground">Loading versions...</span>
+      </div>
+    )
+  }
+
+  // Empty state
+  if (versions.length === 0) {
+    return (
+      <div
+        className={cn(
+          versionControlVariants({ variant, size }),
+          "items-center justify-center p-8",
+          className
+        )}
+        data-empty=""
+        data-slot="version-control"
+        {...props}
+      >
+        {emptyContent ?? (
+          <span className="text-muted-foreground">No versions available</span>
+        )}
+      </div>
+    )
+  }
+
+  // Get current version for diff display
+  const currentVersion = versions.find((v) => v.id === currentVersionId)
+
+  return (
+    <div
+      className={cn(versionControlVariants({ variant, size }), className)}
+      data-slot="version-control"
+      data-variant={variant}
+      {...props}
+    >
+      {/* Version list or timeline */}
+      {showTimeline ? (
+        <VersionTimeline
+          currentVersionId={currentVersionId}
+          size={size ?? undefined}
+          versions={displayVersions}
+          onVersionSelect={handleVersionSelect}
+        />
+      ) : (
+        <VersionList
+          allowRestore={allowRestore}
+          currentVersionId={currentVersionId}
+          selectedVersionId={selectedVersionId}
+          size={size ?? undefined}
+          versions={displayVersions}
+          onCompare={getDiff ? handleCompare : undefined}
+          onRestore={handleRestore}
+          onVersionSelect={handleVersionSelect}
+        />
+      )}
+
+      {/* Diff view */}
+      {showDiff && compareVersion && currentVersion && (
+        <VersionDiff
+          className="mt-4"
+          isLoading={isDiffLoading}
+          lines={diffLines}
+          newVersion={currentVersion}
+          oldVersion={compareVersion}
+        />
+      )}
+    </div>
+  )
+}
+
+VersionControl.displayName = "VersionControl"
+
+export {
+  ChangeIndicator,
+  VersionActions,
+  VersionBadge,
+  VersionControl,
+  VersionDiff,
+  VersionItem,
+  VersionList,
+  VersionTimeline,
+}