@slexn/codecenter-ui 1.0.0

package/src/components/ui/git-graph/GitGraph.vue

@@ -0,0 +1,715 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { CSSProperties, HTMLAttributes } from "vue"
+import { GitCommitHorizontalIcon, GitForkIcon, TagIcon } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+export type GitGraphSize = "sm" | "default" | "lg"
+export type GitGraphRefType = "branch" | "head" | "remote" | "tag"
+
+export interface GitGraphRef {
+  name: string
+  type?: GitGraphRefType
+}
+
+export interface GitGraphCommit {
+  author?: string
+  date?: string
+  hash?: string
+  id: string
+  lane?: number
+  message: string
+  parents?: string[]
+  refs?: Array<string | GitGraphRef>
+}
+
+export interface GitGraphSelectPayload {
+  commit: GitGraphCommit
+  index: number
+}
+
+interface NormalizedGitGraphRef extends GitGraphRef {
+  type: GitGraphRefType
+}
+
+interface GitGraphRow {
+  commit: GitGraphCommit
+  index: number
+  lane: number
+  parentIds: string[]
+  refs: NormalizedGitGraphRef[]
+}
+
+type GitGraphEdgeKind = "direct" | "branch" | "merge"
+
+interface GitGraphEdge {
+  color: string
+  d: string
+  fromIndex: number
+  kind: GitGraphEdgeKind
+  lane: number
+  parentId: string
+  toIndex: number
+}
+
+interface GitGraphMetaItem {
+  class?: HTMLAttributes["class"]
+  slot: "git-graph-author" | "git-graph-date" | "git-graph-hash"
+  value: string
+}
+
+export interface GitGraphProps {
+  class?: HTMLAttributes["class"]
+  commits?: GitGraphCommit[]
+  description?: string
+  emptyLabel?: string
+  laneColors?: string[]
+  modelValue?: string
+  selectable?: boolean
+  showAuthor?: boolean
+  showCommitIcon?: boolean
+  showDate?: boolean
+  showGraph?: boolean
+  showHash?: boolean
+  showMeta?: boolean
+  showRefs?: boolean
+  size?: GitGraphSize
+  summary?: string
+  title?: string
+}
+
+const props = withDefaults(defineProps<GitGraphProps>(), {
+  emptyLabel: "No commits.",
+  selectable: true,
+  showAuthor: true,
+  showCommitIcon: true,
+  showDate: true,
+  showGraph: true,
+  showHash: true,
+  showMeta: true,
+  showRefs: true,
+  size: "default",
+})
+
+const emit = defineEmits<{
+  "select": [payload: GitGraphSelectPayload]
+  "update:modelValue": [value: string]
+}>()
+
+const defaultLaneColors = [
+  "oklch(62.7% 0.194 149.214)",
+  "oklch(55.8% 0.288 302.321)",
+  "oklch(63.7% 0.237 25.331)",
+  "oklch(68.1% 0.162 75.834)",
+  "oklch(58.8% 0.158 241.966)",
+  "oklch(61.7% 0.19 204.36)",
+]
+
+const commits = computed(() => props.commits ?? [])
+const rows = computed<GitGraphRow[]>(() => resolveRows(commits.value))
+const rowByCommitId = computed(() => {
+  const rowMap = new Map<string, GitGraphRow>()
+
+  for (const row of rows.value) {
+    rowMap.set(row.commit.id, row)
+
+    if (row.commit.hash) {
+      rowMap.set(row.commit.hash, row)
+    }
+  }
+
+  return rowMap
+})
+const laneCount = computed(() => {
+  const lanes = rows.value.map((row) => row.lane)
+
+  return Math.max(1, Math.max(...lanes, 0) + 1)
+})
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      content: "text-xs",
+      description: "text-xs",
+      graphIcon: "size-3.5",
+      hash: "text-[11px]",
+      header: "gap-2.5 px-3 py-2.5",
+      message: "text-xs",
+      meta: "gap-1.5 text-[11px]",
+      node: 7,
+      ref: "h-5.5 gap-1 px-1.5 text-[11px]",
+      refIcon: "size-3",
+      row: "h-11 px-3",
+      rowHeight: 44,
+      laneGap: 18,
+      lanePadding: 10,
+      rowPadding: 12,
+      title: "text-xs",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      content: "text-sm",
+      description: "text-sm",
+      graphIcon: "size-4.5",
+      hash: "text-xs",
+      header: "gap-3 px-5 py-4",
+      message: "text-sm",
+      meta: "gap-2 text-xs",
+      node: 10,
+      ref: "h-6.5 gap-1.5 px-2 text-xs",
+      refIcon: "size-3.5",
+      row: "h-15 px-5",
+      rowHeight: 60,
+      laneGap: 24,
+      lanePadding: 14,
+      rowPadding: 20,
+      title: "text-sm",
+    }
+  }
+
+  return {
+    content: "text-[13px]",
+    description: "text-sm",
+    graphIcon: "size-4",
+    hash: "text-xs",
+    header: "gap-2.5 px-4 py-3",
+    message: "text-[13px]",
+    meta: "gap-1.5 text-xs",
+    node: 9,
+    ref: "h-6 gap-1.5 px-2 text-xs",
+    refIcon: "size-3.5",
+    row: "h-13 px-4",
+    rowHeight: 52,
+    laneGap: 20,
+    lanePadding: 12,
+    rowPadding: 16,
+    title: "text-[13px]",
+  }
+})
+const hasHeader = computed(() => Boolean(props.title || props.description || props.summary))
+const graphAreaWidth = computed(() =>
+  props.showGraph
+    ? (sizeClasses.value.lanePadding * 2) + ((laneCount.value - 1) * sizeClasses.value.laneGap) + sizeClasses.value.node
+    : 0,
+)
+const graphHeight = computed(() => Math.max(rows.value.length, 1) * sizeClasses.value.rowHeight)
+const graphStyle = computed<CSSProperties>(() => ({
+  minWidth: props.showGraph && graphAreaWidth.value > 180 ? `${graphAreaWidth.value + 240}px` : undefined,
+}))
+const svgStyle = computed<CSSProperties>(() => ({
+  height: `${graphHeight.value}px`,
+  left: `${sizeClasses.value.rowPadding}px`,
+  width: `${graphAreaWidth.value}px`,
+}))
+const edges = computed<GitGraphEdge[]>(() => {
+  const nextEdges: GitGraphEdge[] = []
+
+  for (const row of rows.value) {
+    for (const [parentIndex, parentId] of row.parentIds.entries()) {
+      const parentRow = rowByCommitId.value.get(parentId)
+
+      if (!parentRow || parentRow.index <= row.index) continue
+      const kind = edgeKind(row, parentRow, parentIndex)
+      const colorLane = parentIndex > 0 ? parentRow.lane : row.lane
+
+      nextEdges.push({
+        color: laneColor(colorLane),
+        d: edgePath(row, parentRow, parentIndex),
+        fromIndex: row.index,
+        kind,
+        lane: colorLane,
+        parentId,
+        toIndex: parentRow.index,
+      })
+    }
+  }
+
+  return nextEdges.sort((a, b) => edgeSortWeight(a.kind) - edgeSortWeight(b.kind))
+})
+
+function normalizeLane(value: number) {
+  if (!Number.isFinite(value)) return 0
+
+  return Math.max(0, Math.trunc(value))
+}
+
+function resolveRows(items: GitGraphCommit[]): GitGraphRow[] {
+  const aliasMap = buildAliasMap(items)
+  const activeLanes: Array<string | undefined> = []
+  const nextRows: GitGraphRow[] = []
+
+  for (const [index, commit] of items.entries()) {
+    const parentIds = normalizeParentIds(commit.parents)
+    const activeLane = findActiveLane(commit, activeLanes, aliasMap)
+    const hintedLane = typeof commit.lane === "number" ? normalizeLane(commit.lane) : undefined
+    const lane = activeLane ?? hintedLane ?? firstAvailableLane(activeLanes)
+
+    ensureLane(activeLanes, lane)
+    activeLanes[lane] = commit.id
+    removeDuplicateActiveRefs(activeLanes, commit, lane, aliasMap)
+
+    nextRows.push({
+      commit,
+      index,
+      lane,
+      parentIds,
+      refs: normalizeRefs(commit.refs),
+    })
+
+    if (parentIds[0]) {
+      activeLanes[lane] = parentIds[0]
+    } else {
+      activeLanes[lane] = undefined
+    }
+
+    for (const parentId of parentIds.slice(1)) {
+      if (findActiveRef(activeLanes, parentId, aliasMap) !== undefined) continue
+
+      const parentLane = firstAvailableLane(activeLanes, lane + 1)
+      ensureLane(activeLanes, parentLane)
+      activeLanes[parentLane] = parentId
+    }
+
+    trimInactiveLanes(activeLanes)
+  }
+
+  return nextRows
+}
+
+function normalizeParentIds(parents?: string[]) {
+  return (parents ?? []).filter((parentId) => parentId.trim().length > 0)
+}
+
+function buildAliasMap(items: GitGraphCommit[]) {
+  const aliasMap = new Map<string, Set<string>>()
+
+  for (const commit of items) {
+    const aliases = commitAliases(commit)
+    const aliasSet = new Set(aliases)
+
+    for (const alias of aliases) {
+      aliasMap.set(alias, aliasSet)
+    }
+  }
+
+  return aliasMap
+}
+
+function commitAliases(commit: GitGraphCommit) {
+  return [commit.id, commit.hash].filter((alias): alias is string => Boolean(alias))
+}
+
+function refsMatch(left: string, right: string, aliasMap: Map<string, Set<string>>) {
+  if (left === right) return true
+
+  return (aliasMap.get(left)?.has(right) ?? false) || (aliasMap.get(right)?.has(left) ?? false)
+}
+
+function findActiveLane(
+  commit: GitGraphCommit,
+  activeLanes: Array<string | undefined>,
+  aliasMap: Map<string, Set<string>>,
+) {
+  const aliases = commitAliases(commit)
+  const lane = activeLanes.findIndex((activeRef) =>
+    Boolean(activeRef && aliases.some((alias) => refsMatch(activeRef, alias, aliasMap))),
+  )
+
+  return lane >= 0 ? lane : undefined
+}
+
+function findActiveRef(
+  activeLanes: Array<string | undefined>,
+  ref: string,
+  aliasMap: Map<string, Set<string>>,
+) {
+  const lane = activeLanes.findIndex((activeRef) => Boolean(activeRef && refsMatch(activeRef, ref, aliasMap)))
+
+  return lane >= 0 ? lane : undefined
+}
+
+function firstAvailableLane(activeLanes: Array<string | undefined>, startAt = 0) {
+  for (let lane = Math.max(0, startAt); lane < activeLanes.length; lane += 1) {
+    if (!activeLanes[lane]) return lane
+  }
+
+  return activeLanes.length
+}
+
+function ensureLane(activeLanes: Array<string | undefined>, lane: number) {
+  while (activeLanes.length <= lane) {
+    activeLanes.push(undefined)
+  }
+}
+
+function removeDuplicateActiveRefs(
+  activeLanes: Array<string | undefined>,
+  commit: GitGraphCommit,
+  currentLane: number,
+  aliasMap: Map<string, Set<string>>,
+) {
+  const aliases = commitAliases(commit)
+
+  for (const [lane, activeRef] of activeLanes.entries()) {
+    if (lane === currentLane || !activeRef) continue
+
+    if (aliases.some((alias) => refsMatch(activeRef, alias, aliasMap))) {
+      activeLanes[lane] = undefined
+    }
+  }
+}
+
+function trimInactiveLanes(activeLanes: Array<string | undefined>) {
+  while (activeLanes.length && !activeLanes[activeLanes.length - 1]) {
+    activeLanes.pop()
+  }
+}
+
+function normalizeRefs(refs?: Array<string | GitGraphRef>): NormalizedGitGraphRef[] {
+  return (refs ?? []).map((ref) => {
+    if (typeof ref === "string") {
+      return {
+        name: ref,
+        type: inferRefType(ref),
+      }
+    }
+
+    return {
+      ...ref,
+      type: ref.type ?? inferRefType(ref.name),
+    }
+  })
+}
+
+function inferRefType(name: string): GitGraphRefType {
+  if (name === "HEAD") return "head"
+  if (name.startsWith("origin/")) return "remote"
+  if (/^v?\d+\.\d+/.test(name)) return "tag"
+
+  return "branch"
+}
+
+function laneColor(lane: number) {
+  const colors = props.laneColors?.length ? props.laneColors : defaultLaneColors
+
+  return colors[lane % colors.length] ?? colors[0]
+}
+
+function laneX(lane: number) {
+  return sizeClasses.value.lanePadding + (lane * sizeClasses.value.laneGap) + (sizeClasses.value.node / 2)
+}
+
+function rowY(index: number) {
+  return (index * sizeClasses.value.rowHeight) + (sizeClasses.value.rowHeight / 2)
+}
+
+function edgeKind(fromRow: GitGraphRow, toRow: GitGraphRow, parentIndex: number): GitGraphEdgeKind {
+  if (fromRow.lane === toRow.lane) return "direct"
+  if (parentIndex > 0) return "merge"
+
+  return "branch"
+}
+
+function edgeSortWeight(kind: GitGraphEdgeKind) {
+  if (kind === "direct") return 0
+  if (kind === "branch") return 1
+
+  return 2
+}
+
+function edgePath(fromRow: GitGraphRow, toRow: GitGraphRow, parentIndex: number) {
+  const fromX = laneX(fromRow.lane)
+  const fromY = rowY(fromRow.index)
+  const toX = laneX(toRow.lane)
+  const toY = rowY(toRow.index)
+
+  if (fromX === toX) return `M ${fromX} ${fromY} L ${toX} ${toY}`
+
+  const spanY = Math.max(sizeClasses.value.rowHeight, toY - fromY)
+  const lead = Math.max(10, Math.min(sizeClasses.value.rowHeight * 0.38, spanY * 0.42))
+  const curveStartY = parentIndex > 0
+    ? fromY + (lead * 0.55)
+    : Math.max(fromY + lead, toY - (lead * 1.35))
+  const curveEndY = parentIndex > 0
+    ? Math.min(toY - (lead * 0.35), curveStartY + (lead * 1.15))
+    : toY - (lead * 0.25)
+  const controlOffset = Math.max(6, Math.min(18, lead * 0.55))
+
+  return [
+    `M ${fromX} ${fromY}`,
+    `L ${fromX} ${curveStartY}`,
+    `C ${fromX} ${curveStartY + controlOffset}, ${toX} ${curveEndY - controlOffset}, ${toX} ${curveEndY}`,
+    `L ${toX} ${toY}`,
+  ].join(" ")
+}
+
+function refClass(type: GitGraphRefType) {
+  if (type === "head") return "border-primary/30 bg-primary text-primary-foreground"
+  if (type === "remote") return "border-sky-600/20 bg-sky-600/10 text-sky-600"
+  if (type === "tag") return "border-amber-600/20 bg-amber-600/10 text-amber-600"
+
+  return "border-emerald-600/20 bg-emerald-600/10 text-emerald-600"
+}
+
+function refIcon(type: GitGraphRefType) {
+  if (type === "tag") return TagIcon
+
+  return GitForkIcon
+}
+
+function isSelected(commit: GitGraphCommit) {
+  return props.modelValue === commit.id || props.modelValue === commit.hash
+}
+
+function rowMetaItems(row: GitGraphRow): GitGraphMetaItem[] {
+  if (!props.showMeta) return []
+
+  const items: GitGraphMetaItem[] = []
+
+  if (props.showHash && row.commit.hash) {
+    items.push({
+      class: cn("font-mono", sizeClasses.value.hash),
+      slot: "git-graph-hash",
+      value: row.commit.hash,
+    })
+  }
+
+  if (props.showAuthor && row.commit.author) {
+    items.push({
+      slot: "git-graph-author",
+      value: row.commit.author,
+    })
+  }
+
+  if (props.showDate && row.commit.date) {
+    items.push({
+      slot: "git-graph-date",
+      value: row.commit.date,
+    })
+  }
+
+  return items
+}
+
+function rowLabel(row: GitGraphRow) {
+  const meta = rowMetaItems(row).map((item) => item.value).join(", ")
+
+  return meta ? `${row.commit.message}, ${meta}` : row.commit.message
+}
+
+function handleSelect(row: GitGraphRow) {
+  if (!props.selectable) return
+
+  emit("update:modelValue", row.commit.id)
+  emit("select", {
+    commit: row.commit,
+    index: row.index,
+  })
+}
+</script>
+
+<template>
+  <article
+    data-slot="git-graph"
+    :data-size="props.size"
+    :class="cn('overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs', props.class)"
+  >
+    <header
+      v-if="hasHeader"
+      data-slot="git-graph-header"
+      :class="cn('flex flex-wrap items-start justify-between border-b', sizeClasses.header)"
+    >
+      <div v-if="props.title || props.description" class="flex min-w-0 flex-col gap-1">
+        <h3
+          v-if="props.title"
+          data-slot="git-graph-title"
+          :class="cn('truncate font-semibold leading-tight tracking-normal', sizeClasses.title)"
+        >
+          {{ props.title }}
+        </h3>
+        <p
+          v-if="props.description"
+          data-slot="git-graph-description"
+          :class="cn('text-muted-foreground', sizeClasses.description)"
+        >
+          {{ props.description }}
+        </p>
+      </div>
+
+      <p
+        v-if="props.summary"
+        data-slot="git-graph-summary"
+        class="shrink-0 text-xs font-medium text-muted-foreground"
+      >
+        {{ props.summary }}
+      </p>
+    </header>
+
+    <div
+      v-if="rows.length"
+      data-slot="git-graph-scroll"
+      class="min-w-0 overflow-x-auto"
+    >
+      <div
+        data-slot="git-graph-content"
+        class="relative min-w-full"
+        :style="graphStyle"
+      >
+        <svg
+          v-if="props.showGraph"
+          data-slot="git-graph-edges"
+          aria-hidden="true"
+          class="pointer-events-none absolute top-0 z-0 overflow-visible"
+          :height="graphHeight"
+          :width="graphAreaWidth"
+          :viewBox="`0 0 ${graphAreaWidth} ${graphHeight}`"
+          :style="svgStyle"
+        >
+          <path
+            v-for="edge in edges"
+            :key="`${edge.fromIndex}-${edge.toIndex}-${edge.parentId}`"
+            data-slot="git-graph-edge"
+            :data-kind="edge.kind"
+            :data-lane="edge.lane"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            :d="edge.d"
+            :stroke="edge.color"
+            :stroke-width="2"
+            :opacity="edge.kind === 'direct' ? 0.64 : 0.78"
+          />
+        </svg>
+
+        <ul data-slot="git-graph-rows" class="relative z-10 flex min-w-full flex-col">
+          <li
+            v-for="row in rows"
+            :key="row.commit.id"
+            data-slot="git-graph-row-item"
+            :data-selected="isSelected(row.commit) ? '' : undefined"
+            class="relative"
+          >
+            <span
+              v-if="row.index > 0"
+              data-slot="git-graph-row-separator"
+              aria-hidden="true"
+              class="pointer-events-none absolute inset-x-0 top-0 z-20 h-px bg-border"
+            />
+
+            <component
+              :is="props.selectable ? 'button' : 'div'"
+              data-slot="git-graph-row"
+              :type="props.selectable ? 'button' : undefined"
+              :aria-label="props.selectable ? rowLabel(row) : undefined"
+              :aria-selected="props.selectable ? isSelected(row.commit) : undefined"
+              :class="
+                cn(
+                  'grid w-full min-w-0 grid-cols-[var(--git-graph-width)_minmax(0,1fr)] items-center text-left outline-none transition-colors',
+                  props.selectable && 'hover:bg-muted/50 focus-visible:bg-muted/70 focus-visible:ring-[3px] focus-visible:ring-ring/50',
+                  isSelected(row.commit) && 'bg-muted/60',
+                  sizeClasses.row,
+                )
+              "
+              :style="{ '--git-graph-width': `${graphAreaWidth}px` }"
+              @click="handleSelect(row)"
+            >
+              <span
+                v-if="props.showGraph"
+                data-slot="git-graph-lanes"
+                class="relative block h-full"
+              >
+                <span
+                  data-slot="git-graph-node"
+                  :style="{
+                    backgroundColor: laneColor(row.lane),
+                    height: `${sizeClasses.node}px`,
+                    left: `${laneX(row.lane) - (sizeClasses.node / 2)}px`,
+                    top: `calc(50% - ${sizeClasses.node / 2}px)`,
+                    width: `${sizeClasses.node}px`,
+                  }"
+                  class="absolute rounded-full ring-2 ring-card"
+                />
+              </span>
+
+              <span data-slot="git-graph-commit" class="flex min-w-0 items-center gap-2">
+                <span class="flex min-w-0 flex-1 items-center gap-2.5">
+                  <span data-slot="git-graph-text" class="flex min-w-0 flex-col gap-1">
+                    <span class="flex min-w-0 items-center">
+                      <span
+                        data-slot="git-graph-message"
+                        :class="cn('min-w-0 truncate font-semibold leading-tight tracking-normal', sizeClasses.message)"
+                      >
+                        {{ row.commit.message }}
+                      </span>
+                    </span>
+
+                    <span
+                      v-if="rowMetaItems(row).length"
+                      data-slot="git-graph-meta"
+                      :class="cn('flex min-w-0 flex-wrap items-center leading-tight text-muted-foreground', sizeClasses.meta)"
+                    >
+                      <template
+                        v-for="(meta, metaIndex) in rowMetaItems(row)"
+                        :key="meta.slot"
+                      >
+                        <span
+                          v-if="metaIndex > 0"
+                          aria-hidden="true"
+                        >
+                          ·
+                        </span>
+                        <span
+                          :data-slot="meta.slot"
+                          :class="meta.class"
+                        >
+                          {{ meta.value }}
+                        </span>
+                      </template>
+                    </span>
+                  </span>
+
+                  <span
+                    v-if="props.showRefs && row.refs.length"
+                    data-slot="git-graph-refs"
+                    class="hidden min-w-0 shrink-0 items-center gap-2 self-center sm:flex"
+                  >
+                    <span
+                      v-for="ref in row.refs"
+                      :key="`${row.commit.id}-${ref.name}`"
+                      data-slot="git-graph-ref"
+                      :data-type="ref.type"
+                      :class="cn('inline-flex max-w-36 shrink-0 items-center rounded-full border font-medium leading-tight', sizeClasses.ref, refClass(ref.type))"
+                    >
+                      <component
+                        :is="refIcon(ref.type)"
+                        aria-hidden="true"
+                        :class="sizeClasses.refIcon"
+                      />
+                      <span class="truncate">{{ ref.name }}</span>
+                    </span>
+                  </span>
+                </span>
+
+                <GitCommitHorizontalIcon
+                  v-if="props.showCommitIcon"
+                  data-slot="git-graph-commit-icon"
+                  aria-hidden="true"
+                  :class="cn('hidden shrink-0 text-muted-foreground sm:block', sizeClasses.graphIcon)"
+                />
+              </span>
+            </component>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div
+      v-else
+      data-slot="git-graph-empty"
+      :class="cn('text-muted-foreground', sizeClasses.header, sizeClasses.content)"
+    >
+      {{ props.emptyLabel }}
+    </div>
+  </article>
+</template>