trident-git 0.2.0 → 0.2.1

package/src/components/git/grouped-diff-viewer.tsx

@@ -1,332 +0,0 @@
-'use client';
-
-import { cn } from '@/lib/utils';
-import ReactDiffViewer from '@alexbruf/react-diff-viewer';
-import { computeLineInformation, DiffType, LineInformation } from '@alexbruf/react-diff-viewer/compute-lines';
-import '@alexbruf/react-diff-viewer/index.css';
-import type { ReactNode } from 'react';
-import { useMemo, useState } from 'react';
-
-interface GroupedDiffViewerProps {
-  oldValue: string;
-  newValue: string;
-  splitView: boolean;
-  useDarkTheme?: boolean;
-  linesOffset?: number;
-  showDiffOnly?: boolean;
-  extraLinesSurroundingDiff?: number;
-}
-
-type InlineEntry =
-  | { type: 'line'; line: LineInformation; sourceIndex: number }
-  | { type: 'fold'; foldStartIndex: number; totalLines: number };
-
-interface InlineRow {
-  key: string;
-  type: DiffType;
-  leftLineNumber: number | null;
-  rightLineNumber: number | null;
-  value: string;
-}
-
-const NO_EXPANDED_BLOCKS: number[] = [];
-
-function isPairedReplacement(line: LineInformation): boolean {
-  return line.left?.type === DiffType.REMOVED && line.right?.type === DiffType.ADDED;
-}
-
-function getLineText(value: unknown): string {
-  if (typeof value === 'string') {
-    return value.length > 0 ? value : ' ';
-  }
-  return ' ';
-}
-
-function toInlineRow(line: LineInformation, sourceIndex: number): InlineRow {
-  const left = line.left ?? {};
-  const right = line.right ?? {};
-
-  if (left.type === DiffType.REMOVED) {
-    return {
-      key: `line-${sourceIndex}-removed`,
-      type: DiffType.REMOVED,
-      leftLineNumber: left.lineNumber ?? null,
-      rightLineNumber: null,
-      value: getLineText(left.value),
-    };
-  }
-
-  if (right.type === DiffType.ADDED) {
-    return {
-      key: `line-${sourceIndex}-added`,
-      type: DiffType.ADDED,
-      leftLineNumber: null,
-      rightLineNumber: right.lineNumber ?? null,
-      value: getLineText(right.value),
-    };
-  }
-
-  return {
-    key: `line-${sourceIndex}-default`,
-    type: DiffType.DEFAULT,
-    leftLineNumber: left.lineNumber ?? null,
-    rightLineNumber: right.lineNumber ?? null,
-    value: getLineText(left.value ?? right.value),
-  };
-}
-
-function renderInlineRow(row: InlineRow) {
-  const isAdded = row.type === DiffType.ADDED;
-  const isRemoved = row.type === DiffType.REMOVED;
-
-  return (
-    <tr key={row.key} className="line">
-      <td
-        className={cn('gutter', {
-          'empty-gutter': row.leftLineNumber === null,
-          'diff-added': isAdded,
-          'diff-removed': isRemoved,
-        })}
-      >
-        <pre className="line-number">{row.leftLineNumber ?? ''}</pre>
-      </td>
-      <td
-        className={cn('gutter', {
-          'empty-gutter': row.rightLineNumber === null,
-          'diff-added': isAdded,
-          'diff-removed': isRemoved,
-        })}
-      >
-        <pre className="line-number">{row.rightLineNumber ?? ''}</pre>
-      </td>
-      <td
-        className={cn('marker', {
-          'diff-added': isAdded,
-          'diff-removed': isRemoved,
-        })}
-      >
-        <pre>{isAdded ? '+' : isRemoved ? '-' : ''}</pre>
-      </td>
-      <td
-        className={cn('content', {
-          'diff-added': isAdded,
-          'diff-removed': isRemoved,
-        })}
-      >
-        <pre className="content-text">{row.value}</pre>
-      </td>
-    </tr>
-  );
-}
-
-function GroupedInlineDiff({
-  oldValue,
-  newValue,
-  useDarkTheme = false,
-  linesOffset = 0,
-  showDiffOnly = true,
-  extraLinesSurroundingDiff = 3,
-}: Omit<GroupedDiffViewerProps, 'splitView'>) {
-  const [expandedByDiff, setExpandedByDiff] = useState<{ signature: string; blocks: number[] }>({
-    signature: '',
-    blocks: [],
-  });
-
-  const diffSignature = useMemo(
-    () => `${linesOffset}:${showDiffOnly ? 1 : 0}:${extraLinesSurroundingDiff}:${oldValue}\0${newValue}`,
-    [oldValue, newValue, linesOffset, showDiffOnly, extraLinesSurroundingDiff]
-  );
-
-  const expandedBlocks = useMemo(
-    () =>
-      expandedByDiff.signature === diffSignature
-        ? expandedByDiff.blocks
-        : NO_EXPANDED_BLOCKS,
-    [expandedByDiff, diffSignature]
-  );
-
-  const { lineInformation, diffLines } = useMemo(
-    () => computeLineInformation(oldValue, newValue, true, undefined, linesOffset),
-    [oldValue, newValue, linesOffset]
-  );
-
-  const entries = useMemo<InlineEntry[]>(() => {
-    if (lineInformation.length === 0) return [];
-
-    if (!showDiffOnly || diffLines.length === 0) {
-      return lineInformation.map((line, sourceIndex) => ({ type: 'line', line, sourceIndex }));
-    }
-
-    const contextSize = Math.max(0, extraLinesSurroundingDiff);
-    const visible = Array.from({ length: lineInformation.length }, () => false);
-
-    diffLines.forEach((diffIndex) => {
-      const start = Math.max(0, diffIndex - contextSize);
-      const end = Math.min(lineInformation.length - 1, diffIndex + contextSize);
-      for (let index = start; index <= end; index += 1) {
-        visible[index] = true;
-      }
-    });
-
-    for (let index = 0; index < visible.length; index += 1) {
-      if (visible[index]) continue;
-      const foldStartIndex = index;
-      while (index < visible.length && !visible[index]) {
-        index += 1;
-      }
-      if (expandedBlocks.includes(foldStartIndex)) {
-        for (let expandedIndex = foldStartIndex; expandedIndex < index; expandedIndex += 1) {
-          visible[expandedIndex] = true;
-        }
-      }
-      index -= 1;
-    }
-
-    const nextEntries: InlineEntry[] = [];
-    for (let index = 0; index < visible.length; index += 1) {
-      if (visible[index]) {
-        nextEntries.push({
-          type: 'line',
-          line: lineInformation[index],
-          sourceIndex: index,
-        });
-        continue;
-      }
-
-      const foldStartIndex = index;
-      while (index < visible.length && !visible[index]) {
-        index += 1;
-      }
-      nextEntries.push({
-        type: 'fold',
-        foldStartIndex,
-        totalLines: index - foldStartIndex,
-      });
-      index -= 1;
-    }
-
-    return nextEntries;
-  }, [lineInformation, diffLines, showDiffOnly, extraLinesSurroundingDiff, expandedBlocks]);
-
-  const rows = useMemo(() => {
-    const renderedRows: ReactNode[] = [];
-
-    for (let index = 0; index < entries.length; index += 1) {
-      const entry = entries[index];
-      if (entry.type === 'fold') {
-        renderedRows.push(
-          <tr key={`fold-${entry.foldStartIndex}`} className="code-fold">
-            <td className="code-fold-gutter" />
-            <td className="code-fold-gutter" />
-            <td />
-            <td>
-              <button
-                type="button"
-                className="cursor-pointer underline"
-                onClick={() => {
-                  setExpandedByDiff((previous) => {
-                    const currentBlocks =
-                      previous.signature === diffSignature ? previous.blocks : [];
-                    if (currentBlocks.includes(entry.foldStartIndex)) {
-                      return previous.signature === diffSignature
-                        ? previous
-                        : { signature: diffSignature, blocks: currentBlocks };
-                    }
-                    return {
-                      signature: diffSignature,
-                      blocks: [...currentBlocks, entry.foldStartIndex],
-                    };
-                  });
-                }}
-              >
-                <pre className="code-fold-content">Expand {entry.totalLines} lines ...</pre>
-              </button>
-            </td>
-          </tr>
-        );
-        continue;
-      }
-
-      if (isPairedReplacement(entry.line)) {
-        const removedRows: InlineRow[] = [];
-        const addedRows: InlineRow[] = [];
-        let pairedIndex = index;
-
-        while (pairedIndex < entries.length) {
-          const candidate = entries[pairedIndex];
-          if (candidate.type !== 'line' || !isPairedReplacement(candidate.line)) {
-            break;
-          }
-          removedRows.push({
-            key: `line-${candidate.sourceIndex}-paired-removed`,
-            type: DiffType.REMOVED,
-            leftLineNumber: candidate.line.left?.lineNumber ?? null,
-            rightLineNumber: null,
-            value: getLineText(candidate.line.left?.value),
-          });
-          addedRows.push({
-            key: `line-${candidate.sourceIndex}-paired-added`,
-            type: DiffType.ADDED,
-            leftLineNumber: null,
-            rightLineNumber: candidate.line.right?.lineNumber ?? null,
-            value: getLineText(candidate.line.right?.value),
-          });
-          pairedIndex += 1;
-        }
-
-        removedRows.forEach((row) => {
-          renderedRows.push(renderInlineRow(row));
-        });
-        addedRows.forEach((row) => {
-          renderedRows.push(renderInlineRow(row));
-        });
-
-        index = pairedIndex - 1;
-        continue;
-      }
-
-      renderedRows.push(renderInlineRow(toInlineRow(entry.line, entry.sourceIndex)));
-    }
-
-    return renderedRows;
-  }, [entries, diffSignature]);
-
-  return (
-    <table className={cn('diff-container', useDarkTheme ? 'dark-theme' : 'light-theme')}>
-      <tbody>{rows}</tbody>
-    </table>
-  );
-}
-
-export function GroupedDiffViewer({
-  oldValue,
-  newValue,
-  splitView,
-  useDarkTheme = false,
-  linesOffset = 0,
-  showDiffOnly = true,
-  extraLinesSurroundingDiff = 3,
-}: GroupedDiffViewerProps) {
-  if (splitView) {
-    return (
-      <ReactDiffViewer
-        oldValue={oldValue}
-        newValue={newValue}
-        splitView={true}
-        useDarkTheme={useDarkTheme}
-        disableWordDiff={true}
-      />
-    );
-  }
-
-  return (
-    <GroupedInlineDiff
-      oldValue={oldValue}
-      newValue={newValue}
-      useDarkTheme={useDarkTheme}
-      linesOffset={linesOffset}
-      showDiffOnly={showDiffOnly}
-      extraLinesSurroundingDiff={extraLinesSurroundingDiff}
-    />
-  );
-}