@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/diff-viewer/README.md

@@ -0,0 +1,172 @@
+# Diff Viewer
+
+Side-by-side or unified view for comparing text and code changes.
+
+## Usage
+
+```html
+<sc-diff-viewer [oldText]="originalCode" [newText]="modifiedCode" [oldTitle]="'file.ts (original)'" [newTitle]="'file.ts (modified)'" />
+```
+
+## API
+
+### ScDiffViewer
+
+| Input                | Type                   | Default   | Description                  |
+| -------------------- | ---------------------- | --------- | ---------------------------- |
+| `oldText`            | `string`               | `''`      | Original text content        |
+| `newText`            | `string`               | `''`      | Modified text content        |
+| `oldTitle`           | `string`               | `''`      | Title for original version   |
+| `newTitle`           | `string`               | `''`      | Title for modified version   |
+| `defaultViewMode`    | `'split' \| 'unified'` | `'split'` | Initial view mode            |
+| `showHeader`         | `boolean`              | `true`    | Show header with stats       |
+| `showFooter`         | `boolean`              | `true`    | Show footer with counts      |
+| `showViewModeToggle` | `boolean`              | `true`    | Show view mode toggle        |
+| `showSideHeaders`    | `boolean`              | `true`    | Show side-by-side headers    |
+| `showWordDiff`       | `boolean`              | `true`    | Highlight word-level changes |
+| `ignoreWhitespace`   | `boolean`              | `false`   | Ignore whitespace diffs      |
+| `ignoreCase`         | `boolean`              | `false`   | Ignore case diffs            |
+| `maxHeight`          | `string`               | `'600px'` | Maximum viewer height        |
+
+### DiffResult
+
+```typescript
+interface DiffResult {
+  lines: DiffLine[];
+  additions: number;
+  deletions: number;
+  unchanged: number;
+}
+
+interface DiffLine {
+  type: 'added' | 'removed' | 'unchanged' | 'modified';
+  oldLineNumber?: number;
+  newLineNumber?: number;
+  oldContent?: string;
+  newContent?: string;
+  content?: string;
+}
+```
+
+## Examples
+
+### Basic Comparison
+
+```html
+<sc-diff-viewer [oldText]="oldCode" [newText]="newCode" />
+```
+
+### With Titles
+
+```html
+<sc-diff-viewer [oldText]="oldCode" [newText]="newCode" [oldTitle]="'config.json (before)'" [newTitle]="'config.json (after)'" />
+```
+
+### Unified View
+
+```html
+<sc-diff-viewer [oldText]="oldText" [newText]="newText" [defaultViewMode]="'unified'" />
+```
+
+### Ignore Whitespace
+
+```html
+<sc-diff-viewer [oldText]="oldText" [newText]="newText" [ignoreWhitespace]="true" />
+```
+
+### Minimal View
+
+```html
+<sc-diff-viewer [oldText]="oldText" [newText]="newText" [showHeader]="false" [showFooter]="false" [showViewModeToggle]="false" />
+```
+
+## Utility Functions
+
+### computeDiff
+
+Compute the diff between two strings:
+
+```typescript
+import { computeDiff } from './ui/diff-viewer';
+
+const result = computeDiff(oldText, newText, {
+  ignoreWhitespace: true,
+  ignoreCase: false,
+});
+
+console.log(result.additions); // Number of added lines
+console.log(result.deletions); // Number of removed lines
+console.log(result.lines); // Array of DiffLine objects
+```
+
+### createUnifiedDiff
+
+Create unified diff format (like git diff):
+
+```typescript
+import { createUnifiedDiff } from './ui/diff-viewer';
+
+const unifiedDiff = createUnifiedDiff(oldText, newText, {
+  oldHeader: 'a/file.ts',
+  newHeader: 'b/file.ts',
+  contextLines: 3,
+});
+
+// Output:
+// --- a/file.ts
+// +++ b/file.ts
+// @@ -1,4 +1,5 @@
+//  unchanged line
+// -removed line
+// +added line
+//  unchanged line
+```
+
+### computeWordDiff
+
+Compute word-level diff for inline highlighting:
+
+```typescript
+import { computeWordDiff } from './ui/diff-viewer';
+
+const { oldParts, newParts } = computeWordDiff('the quick brown fox', 'the fast brown dog');
+
+// oldParts: [{ text: 'the', changed: false }, { text: 'quick', changed: true }, ...]
+// newParts: [{ text: 'the', changed: false }, { text: 'fast', changed: true }, ...]
+```
+
+## View Modes
+
+### Split View
+
+- Shows old and new versions side-by-side
+- Empty rows for alignment
+- Best for detailed line-by-line comparison
+
+### Unified View
+
+- Single column with + and - markers
+- Similar to `git diff` output
+- More compact for large files
+
+## Features
+
+- LCS-based diff algorithm
+- Line-by-line comparison
+- Word-level diff highlighting
+- Split (side-by-side) view
+- Unified (single column) view
+- Line numbers for both versions
+- Change statistics
+- View mode toggle
+- Ignore whitespace option
+- Ignore case option
+- Scrollable with max height
+- Responsive design
+
+## Color Coding
+
+- Green background: Added lines
+- Red background: Removed lines
+- No highlight: Unchanged lines
+- Word-level highlighting within changed lines

package/src/lib/components/diff-viewer/diff-algorithm.ts

@@ -0,0 +1,337 @@
+export type DiffLineType = 'added' | 'removed' | 'unchanged' | 'modified';
+
+export interface DiffLine {
+  type: DiffLineType;
+  oldLineNumber?: number;
+  newLineNumber?: number;
+  oldContent?: string;
+  newContent?: string;
+  content?: string;
+}
+
+export interface DiffResult {
+  lines: DiffLine[];
+  additions: number;
+  deletions: number;
+  unchanged: number;
+}
+
+export interface DiffOptions {
+  ignoreWhitespace?: boolean;
+  ignoreCase?: boolean;
+  contextLines?: number;
+}
+
+/**
+ * Compute the diff between two strings using Myers' diff algorithm
+ * Simplified implementation for line-by-line comparison
+ */
+export function computeDiff(
+  oldText: string,
+  newText: string,
+  options: DiffOptions = {},
+): DiffResult {
+  const oldLines = oldText.split('\n');
+  const newLines = newText.split('\n');
+
+  const normalizeForComparison = (line: string): string => {
+    let normalized = line;
+    if (options.ignoreWhitespace) {
+      normalized = normalized.replace(/\s+/g, ' ').trim();
+    }
+    if (options.ignoreCase) {
+      normalized = normalized.toLowerCase();
+    }
+    return normalized;
+  };
+
+  // Create normalized versions for comparison
+  const oldNormalized = oldLines.map(normalizeForComparison);
+  const newNormalized = newLines.map(normalizeForComparison);
+
+  // Compute LCS table
+  const lcs = computeLCS(oldNormalized, newNormalized);
+
+  // Build diff from LCS
+  const diffLines: DiffLine[] = [];
+  let additions = 0;
+  let deletions = 0;
+  let unchanged = 0;
+
+  let oldIdx = 0;
+  let newIdx = 0;
+  let lcsIdx = 0;
+
+  while (oldIdx < oldLines.length || newIdx < newLines.length) {
+    if (
+      lcsIdx < lcs.length &&
+      oldIdx < oldLines.length &&
+      newIdx < newLines.length &&
+      oldNormalized[oldIdx] === lcs[lcsIdx] &&
+      newNormalized[newIdx] === lcs[lcsIdx]
+    ) {
+      // Lines match (unchanged)
+      diffLines.push({
+        type: 'unchanged',
+        oldLineNumber: oldIdx + 1,
+        newLineNumber: newIdx + 1,
+        content: oldLines[oldIdx],
+      });
+      unchanged++;
+      oldIdx++;
+      newIdx++;
+      lcsIdx++;
+    } else if (
+      newIdx < newLines.length &&
+      (lcsIdx >= lcs.length || newNormalized[newIdx] !== lcs[lcsIdx]) &&
+      (oldIdx >= oldLines.length ||
+        oldNormalized[oldIdx] === lcs[lcsIdx] ||
+        !lcs.includes(newNormalized[newIdx]))
+    ) {
+      // Line was added
+      diffLines.push({
+        type: 'added',
+        newLineNumber: newIdx + 1,
+        newContent: newLines[newIdx],
+      });
+      additions++;
+      newIdx++;
+    } else if (
+      oldIdx < oldLines.length &&
+      (lcsIdx >= lcs.length || oldNormalized[oldIdx] !== lcs[lcsIdx])
+    ) {
+      // Line was removed
+      diffLines.push({
+        type: 'removed',
+        oldLineNumber: oldIdx + 1,
+        oldContent: oldLines[oldIdx],
+      });
+      deletions++;
+      oldIdx++;
+    }
+  }
+
+  return { lines: diffLines, additions, deletions, unchanged };
+}
+
+/**
+ * Compute Longest Common Subsequence
+ */
+function computeLCS(oldLines: string[], newLines: string[]): string[] {
+  const m = oldLines.length;
+  const n = newLines.length;
+
+  // Create DP table
+  const dp: number[][] = Array(m + 1)
+    .fill(null)
+    .map(() => Array(n + 1).fill(0));
+
+  // Fill DP table
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (oldLines[i - 1] === newLines[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      }
+    }
+  }
+
+  // Backtrack to find LCS
+  const lcs: string[] = [];
+  let i = m;
+  let j = n;
+
+  while (i > 0 && j > 0) {
+    if (oldLines[i - 1] === newLines[j - 1]) {
+      lcs.unshift(oldLines[i - 1]);
+      i--;
+      j--;
+    } else if (dp[i - 1][j] > dp[i][j - 1]) {
+      i--;
+    } else {
+      j--;
+    }
+  }
+
+  return lcs;
+}
+
+/**
+ * Create unified diff format
+ */
+export function createUnifiedDiff(
+  oldText: string,
+  newText: string,
+  options: DiffOptions & { oldHeader?: string; newHeader?: string } = {},
+): string {
+  const diff = computeDiff(oldText, newText, options);
+  const lines: string[] = [];
+
+  // Add headers
+  lines.push(`--- ${options.oldHeader || 'a/file'}`);
+  lines.push(`+++ ${options.newHeader || 'b/file'}`);
+
+  // Group changes into hunks
+  const hunks = createHunks(diff.lines, options.contextLines ?? 3);
+
+  for (const hunk of hunks) {
+    const oldStart = hunk.find((l) => l.oldLineNumber)?.oldLineNumber || 1;
+    const newStart = hunk.find((l) => l.newLineNumber)?.newLineNumber || 1;
+    const oldCount = hunk.filter((l) => l.type !== 'added').length;
+    const newCount = hunk.filter((l) => l.type !== 'removed').length;
+
+    lines.push(`@@ -${oldStart},${oldCount} +${newStart},${newCount} @@`);
+
+    for (const line of hunk) {
+      switch (line.type) {
+        case 'added':
+          lines.push(`+${line.newContent}`);
+          break;
+        case 'removed':
+          lines.push(`-${line.oldContent}`);
+          break;
+        case 'unchanged':
+          lines.push(` ${line.content}`);
+          break;
+      }
+    }
+  }
+
+  return lines.join('\n');
+}
+
+/**
+ * Group diff lines into hunks with context
+ */
+function createHunks(
+  diffLines: DiffLine[],
+  contextLines: number,
+): DiffLine[][] {
+  const hunks: DiffLine[][] = [];
+  let currentHunk: DiffLine[] = [];
+  let unchangedStreak = 0;
+
+  for (let i = 0; i < diffLines.length; i++) {
+    const line = diffLines[i];
+
+    if (line.type === 'unchanged') {
+      unchangedStreak++;
+
+      // Check if we should start a new hunk
+      if (unchangedStreak > contextLines * 2 && currentHunk.length > 0) {
+        // Keep trailing context
+        const trailing = currentHunk.slice(-contextLines);
+        currentHunk = currentHunk.slice(0, -contextLines);
+        if (currentHunk.some((l) => l.type !== 'unchanged')) {
+          currentHunk.push(...trailing.slice(0, contextLines));
+          hunks.push(currentHunk);
+        }
+        currentHunk = [];
+        unchangedStreak = 0;
+      } else {
+        currentHunk.push(line);
+      }
+    } else {
+      unchangedStreak = 0;
+
+      // Add leading context if starting a new hunk
+      if (currentHunk.length === 0) {
+        const startIdx = Math.max(0, i - contextLines);
+        for (let j = startIdx; j < i; j++) {
+          if (diffLines[j].type === 'unchanged') {
+            currentHunk.push(diffLines[j]);
+          }
+        }
+      }
+
+      currentHunk.push(line);
+    }
+  }
+
+  // Add final hunk
+  if (currentHunk.some((l) => l.type !== 'unchanged')) {
+    hunks.push(currentHunk);
+  }
+
+  return hunks.length > 0 ? hunks : [diffLines];
+}
+
+/**
+ * Compute word-level diff for inline highlighting
+ */
+export function computeWordDiff(
+  oldLine: string,
+  newLine: string,
+): {
+  oldParts: Array<{ text: string; changed: boolean }>;
+  newParts: Array<{ text: string; changed: boolean }>;
+} {
+  const oldWords = tokenize(oldLine);
+  const newWords = tokenize(newLine);
+
+  const lcs = computeLCS(oldWords, newWords);
+
+  const oldParts: Array<{ text: string; changed: boolean }> = [];
+  const newParts: Array<{ text: string; changed: boolean }> = [];
+
+  let oldIdx = 0;
+  let newIdx = 0;
+  let lcsIdx = 0;
+
+  while (oldIdx < oldWords.length || newIdx < newWords.length) {
+    if (
+      lcsIdx < lcs.length &&
+      oldIdx < oldWords.length &&
+      newIdx < newWords.length &&
+      oldWords[oldIdx] === lcs[lcsIdx] &&
+      newWords[newIdx] === lcs[lcsIdx]
+    ) {
+      oldParts.push({ text: oldWords[oldIdx], changed: false });
+      newParts.push({ text: newWords[newIdx], changed: false });
+      oldIdx++;
+      newIdx++;
+      lcsIdx++;
+    } else if (
+      newIdx < newWords.length &&
+      (lcsIdx >= lcs.length || newWords[newIdx] !== lcs[lcsIdx])
+    ) {
+      newParts.push({ text: newWords[newIdx], changed: true });
+      newIdx++;
+    } else if (
+      oldIdx < oldWords.length &&
+      (lcsIdx >= lcs.length || oldWords[oldIdx] !== lcs[lcsIdx])
+    ) {
+      oldParts.push({ text: oldWords[oldIdx], changed: true });
+      oldIdx++;
+    }
+  }
+
+  return { oldParts, newParts };
+}
+
+/**
+ * Tokenize a line into words and whitespace
+ */
+function tokenize(line: string): string[] {
+  const tokens: string[] = [];
+  let current = '';
+
+  for (const char of line) {
+    if (/\s/.test(char)) {
+      if (current) {
+        tokens.push(current);
+        current = '';
+      }
+      tokens.push(char);
+    } else {
+      current += char;
+    }
+  }
+
+  if (current) {
+    tokens.push(current);
+  }
+
+  return tokens;
+}