@keboola/design 1.0.0

package/src/components/MergeEditor/helpers.test.ts

@@ -0,0 +1,172 @@
+import type { ChangeClassification, DiffChunk } from './constants';
+import { CHANGE_CLASS, CHUNK_TYPE } from './constants';
+import {
+  computeDiffChunks,
+  filterHighlightedLines,
+  getChangedLineNumbers,
+  replaceLines,
+} from './helpers';
+
+describe('computeDiffChunks', () => {
+  it('returns unchanged chunk for identical texts', () => {
+    expect(computeDiffChunks('hello\n', 'hello\n')).toEqual([
+      {
+        type: CHUNK_TYPE.UNCHANGED,
+        value: 'hello\n',
+        oldStart: 1,
+        oldEnd: 1,
+        newStart: 1,
+        newEnd: 1,
+      },
+    ]);
+  });
+
+  it('returns empty array for two empty strings', () => {
+    expect(computeDiffChunks('', '')).toEqual([]);
+  });
+
+  it('handles addition from empty old text', () => {
+    const chunks = computeDiffChunks('', 'hello\n');
+    expect(chunks).toEqual([
+      { type: CHUNK_TYPE.ADDED, value: 'hello\n', oldStart: 1, oldEnd: 1, newStart: 1, newEnd: 1 },
+    ]);
+  });
+
+  it('handles removal to empty new text', () => {
+    const chunks = computeDiffChunks('hello\n', '');
+    expect(chunks).toEqual([
+      {
+        type: CHUNK_TYPE.REMOVED,
+        value: 'hello\n',
+        oldStart: 1,
+        oldEnd: 1,
+        newStart: 1,
+        newEnd: 1,
+      },
+    ]);
+  });
+
+  it('detects removed and added lines', () => {
+    const chunks = computeDiffChunks('aaa\nbbb\n', 'aaa\nccc\n');
+
+    expect(chunks).toHaveLength(3);
+    expect(chunks[0]!.type).toBe(CHUNK_TYPE.UNCHANGED);
+    expect(chunks[1]!.type).toBe(CHUNK_TYPE.REMOVED);
+    expect(chunks[2]!.type).toBe(CHUNK_TYPE.ADDED);
+  });
+
+  it('tracks line numbers correctly across multiple chunks', () => {
+    const chunks = computeDiffChunks('a\nb\nc\n', 'a\nx\nc\n');
+
+    const unchanged1 = chunks[0]!;
+    expect(unchanged1.type).toBe(CHUNK_TYPE.UNCHANGED);
+    expect(unchanged1.oldStart).toBe(1);
+    expect(unchanged1.newStart).toBe(1);
+
+    const removed = chunks.find((c) => c.type === CHUNK_TYPE.REMOVED)!;
+    expect(removed.oldStart).toBe(2);
+    expect(removed.oldEnd).toBe(2);
+
+    const added = chunks.find((c) => c.type === CHUNK_TYPE.ADDED)!;
+    expect(added.newStart).toBe(2);
+    expect(added.newEnd).toBe(2);
+  });
+
+  it('handles single-line input without trailing newline', () => {
+    const chunks = computeDiffChunks('hello', 'world');
+    expect(chunks.length).toBeGreaterThanOrEqual(1);
+    expect(chunks.some((c) => c.type === CHUNK_TYPE.REMOVED)).toBe(true);
+    expect(chunks.some((c) => c.type === CHUNK_TYPE.ADDED)).toBe(true);
+  });
+});
+
+describe('getChangedLineNumbers', () => {
+  const chunks: DiffChunk[] = [
+    { type: CHUNK_TYPE.UNCHANGED, value: 'a\n', oldStart: 1, oldEnd: 1, newStart: 1, newEnd: 1 },
+    { type: CHUNK_TYPE.REMOVED, value: 'b\n', oldStart: 2, oldEnd: 2, newStart: 2, newEnd: 2 },
+    { type: CHUNK_TYPE.ADDED, value: 'x\ny\n', oldStart: 3, oldEnd: 3, newStart: 2, newEnd: 3 },
+    { type: CHUNK_TYPE.UNCHANGED, value: 'c\n', oldStart: 3, oldEnd: 3, newStart: 4, newEnd: 4 },
+  ];
+
+  it('returns removed lines for old side', () => {
+    const lines = getChangedLineNumbers(chunks, 'old');
+    expect(lines).toEqual(new Set([2]));
+  });
+
+  it('returns added lines for new side', () => {
+    const lines = getChangedLineNumbers(chunks, 'new');
+    expect(lines).toEqual(new Set([2, 3]));
+  });
+
+  it('returns empty set when no changes exist', () => {
+    const unchangedOnly: DiffChunk[] = [
+      { type: CHUNK_TYPE.UNCHANGED, value: 'a\n', oldStart: 1, oldEnd: 1, newStart: 1, newEnd: 1 },
+    ];
+    expect(getChangedLineNumbers(unchangedOnly, 'old')).toEqual(new Set());
+    expect(getChangedLineNumbers(unchangedOnly, 'new')).toEqual(new Set());
+  });
+});
+
+describe('filterHighlightedLines', () => {
+  const chunks: DiffChunk[] = [
+    { type: CHUNK_TYPE.REMOVED, value: 'a\nb\n', oldStart: 1, oldEnd: 2, newStart: 1, newEnd: 1 },
+    { type: CHUNK_TYPE.ADDED, value: 'x\ny\nz\n', oldStart: 3, oldEnd: 3, newStart: 1, newEnd: 3 },
+  ];
+
+  it('returns only classified and non-suppressed lines', () => {
+    const classification = new Map<number, ChangeClassification>([
+      [1, CHANGE_CLASS.CONFLICT],
+      [2, CHANGE_CLASS.SAFE],
+    ]);
+    const suppressed = new Set([2]);
+
+    const result = filterHighlightedLines(chunks, 'old', classification, suppressed);
+    expect(result).toEqual(new Set([1]));
+  });
+
+  it('returns empty set when all lines are suppressed', () => {
+    const classification = new Map<number, ChangeClassification>([
+      [1, CHANGE_CLASS.CONFLICT],
+      [2, CHANGE_CLASS.SAFE],
+    ]);
+    const suppressed = new Set([1, 2]);
+
+    const result = filterHighlightedLines(chunks, 'old', classification, suppressed);
+    expect(result).toEqual(new Set());
+  });
+
+  it('returns empty set when no lines are classified', () => {
+    const result = filterHighlightedLines(chunks, 'old', new Map(), new Set());
+    expect(result).toEqual(new Set());
+  });
+});
+
+describe('replaceLines', () => {
+  it('replaces a single line', () => {
+    expect(replaceLines('a\nb\nc', 2, 2, 'x\n')).toBe('a\nx\nc');
+  });
+
+  it('replaces multiple lines', () => {
+    expect(replaceLines('a\nb\nc\nd', 2, 3, 'x\n')).toBe('a\nx\nd');
+  });
+
+  it('inserts when startLine > endLine', () => {
+    expect(replaceLines('a\nb\nc', 2, 1, 'x\n')).toBe('a\nx\nb\nc');
+  });
+
+  it('deletes lines when replacement is empty', () => {
+    expect(replaceLines('a\nb\nc', 2, 2, '')).toBe('a\nc');
+  });
+
+  it('handles replacing the first line', () => {
+    expect(replaceLines('a\nb\nc', 1, 1, 'x\n')).toBe('x\nb\nc');
+  });
+
+  it('handles replacing the last line', () => {
+    expect(replaceLines('a\nb\nc', 3, 3, 'x\n')).toBe('a\nb\nx');
+  });
+
+  it('handles single-line text', () => {
+    expect(replaceLines('a', 1, 1, 'x\n')).toBe('x');
+  });
+});

package/src/components/MergeEditor/helpers.ts

@@ -0,0 +1,118 @@
+import { diffLines } from 'diff';
+
+import { type ChangeClassification, CHUNK_TYPE, type DiffChunk } from './constants';
+
+/**
+ * Computes diff chunks between oldText and newText using line-level diffing.
+ * Adjacent removed+added pairs are kept as separate chunks so the consumer
+ * can pair them into "modifications" for accept controls.
+ */
+export const computeDiffChunks = (oldText: string, newText: string): DiffChunk[] => {
+  const changes = diffLines(oldText, newText);
+  const chunks: DiffChunk[] = [];
+  let oldLine = 1;
+  let newLine = 1;
+
+  for (const change of changes) {
+    if (change.value === '') continue;
+
+    const lineCount = change.count || change.value.replace(/\n$/, '').split('\n').length;
+
+    if (change.removed) {
+      // newStart/newEnd anchor to the current new-side position (insertion point) for alignment
+      chunks.push({
+        type: CHUNK_TYPE.REMOVED,
+        value: change.value,
+        oldStart: oldLine,
+        oldEnd: oldLine + lineCount - 1,
+        newStart: newLine,
+        newEnd: newLine,
+      });
+      oldLine += lineCount;
+    } else if (change.added) {
+      // oldStart/oldEnd anchor to the current old-side position (insertion point) for alignment
+      chunks.push({
+        type: CHUNK_TYPE.ADDED,
+        value: change.value,
+        oldStart: oldLine,
+        oldEnd: oldLine,
+        newStart: newLine,
+        newEnd: newLine + lineCount - 1,
+      });
+      newLine += lineCount;
+    } else {
+      chunks.push({
+        type: CHUNK_TYPE.UNCHANGED,
+        value: change.value,
+        oldStart: oldLine,
+        oldEnd: oldLine + lineCount - 1,
+        newStart: newLine,
+        newEnd: newLine + lineCount - 1,
+      });
+      oldLine += lineCount;
+      newLine += lineCount;
+    }
+  }
+
+  return chunks;
+};
+
+/**
+ * Collects 1-indexed line numbers that are marked as changed (added or removed)
+ * from a set of diff chunks. `side` determines which line range to use.
+ */
+export const getChangedLineNumbers = (chunks: DiffChunk[], side: 'old' | 'new'): Set<number> => {
+  const lines = new Set<number>();
+
+  for (const chunk of chunks) {
+    if (chunk.type === CHUNK_TYPE.UNCHANGED) continue;
+
+    if (side === 'old' && chunk.type === CHUNK_TYPE.REMOVED) {
+      for (let i = chunk.oldStart; i <= chunk.oldEnd; i++) lines.add(i);
+    }
+    if (side === 'new' && chunk.type === CHUNK_TYPE.ADDED) {
+      for (let i = chunk.newStart; i <= chunk.newEnd; i++) lines.add(i);
+    }
+  }
+
+  return lines;
+};
+
+/**
+ * Filters changed line numbers, keeping only those that are classified
+ * and not suppressed (resolved/dismissed).
+ *
+ * `classification` and `suppressedLines` must be keyed by line numbers
+ * from the same `side` (old-side lines for 'old', new-side lines for 'new').
+ */
+export const filterHighlightedLines = (
+  chunks: DiffChunk[],
+  side: 'old' | 'new',
+  classification: Map<number, ChangeClassification>,
+  suppressedLines: Set<number>,
+): Set<number> => {
+  const filtered = new Set<number>();
+  for (const line of getChangedLineNumbers(chunks, side)) {
+    if (classification.has(line) && !suppressedLines.has(line)) filtered.add(line);
+  }
+  return filtered;
+};
+
+/**
+ * Replaces lines in `text` between `startLine` and `endLine` (1-indexed, inclusive)
+ * with `replacementLines`. If startLine > endLine, inserts before startLine.
+ */
+export const replaceLines = (
+  text: string,
+  startLine: number,
+  endLine: number,
+  replacement: string,
+): string => {
+  const lines = text.split('\n');
+  const before = lines.slice(0, startLine - 1);
+  const after = startLine > endLine ? lines.slice(startLine - 1) : lines.slice(endLine);
+
+  const replacementArr = replacement === '' ? [] : replacement.replace(/\n$/, '').split('\n');
+
+  return [...before, ...replacementArr, ...after].join('\n');
+};

package/src/components/MergeEditor/index.ts

@@ -0,0 +1,5 @@
+export { MergeEditor } from './MergeEditor';
+export { PaneHeader } from './PaneHeader';
+export { ConflictStatusIndicator } from './ConflictStatus/ConflictStatusIndicator';
+export { useMergeDiff } from './useMergeDiff';
+export type { DiffChunk, MergeConflict, ChangeClassification } from './constants';