@keboola/design 2.0.0 → 2.1.0

package/src/components/MergeEditor/MergeEditor.tsx

@@ -1,125 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { cn } from '../../utils';
-
-import { AcceptControls } from './AcceptControls/AcceptControls';
-import type { ChangeClassification, MergeConflict } from './constants';
-import { MergePane } from './MergePane';
-import { useScrollSync } from './useScrollSync';
-
-type Props = {
-  mergeValue: string;
-  handleMergeChange: (value: string) => void;
-  leftText: string;
-  rightText: string;
-  leftConflicts: MergeConflict[];
-  rightConflicts: MergeConflict[];
-  leftHighlightedLines: Set<number>;
-  rightHighlightedLines: Set<number>;
-  leftClassification: Map<number, ChangeClassification>;
-  rightClassification: Map<number, ChangeClassification>;
-  mergeHighlightedLines: Set<number>;
-  mergeClassification: Map<number, ChangeClassification>;
-  acceptLeft: (conflict: MergeConflict) => void;
-  acceptRight: (conflict: MergeConflict) => void;
-  dismissLeft: (conflict: MergeConflict) => void;
-  dismissRight: (conflict: MergeConflict) => void;
-  leftHeader?: ReactNode;
-  middleHeader?: ReactNode;
-  middleHeaderClassName?: string;
-  middleClassName?: string;
-  rightHeader?: ReactNode;
-  className?: string;
-  /**
-   * When true, the editor's internal accept and dismiss buttons render in the
-   * `argo` button variant. Layout chrome (panes, pane headers, scrollers) is
-   * unchanged — only consumer-controlled interactive surfaces switch theme.
-   */
-  argo?: boolean;
-};
-
-export const MergeEditor = ({
-  mergeValue,
-  handleMergeChange,
-  leftText,
-  rightText,
-  leftConflicts,
-  rightConflicts,
-  leftHighlightedLines,
-  rightHighlightedLines,
-  leftClassification,
-  rightClassification,
-  mergeHighlightedLines,
-  mergeClassification,
-  acceptLeft,
-  acceptRight,
-  dismissLeft,
-  dismissRight,
-  leftHeader,
-  middleHeader,
-  middleHeaderClassName,
-  middleClassName,
-  rightHeader,
-  className,
-  argo,
-}: Props) => {
-  const { registerScroller, registerFollower } = useScrollSync();
-
-  return (
-    <div
-      className={cn(
-        'tw-flex tw-h-full tw-min-h-0 tw-overflow-hidden tw-bg-white tw-gap-3',
-        className,
-      )}
-    >
-      <MergePane
-        value={leftText}
-        highlightedLines={leftHighlightedLines}
-        lineClassification={leftClassification}
-        readOnly
-        header={leftHeader}
-        className="tw-rounded-r-lg tw-border tw-border-neutral-200"
-        onScrollDOMReady={registerScroller(0)}
-      />
-
-      <AcceptControls
-        conflicts={leftConflicts}
-        side="left"
-        onAccept={acceptLeft}
-        onDismiss={dismissLeft}
-        contentRef={registerFollower(0, 'left-controls')}
-        argo={argo}
-      />
-
-      <MergePane
-        value={mergeValue}
-        highlightedLines={mergeHighlightedLines}
-        lineClassification={mergeClassification}
-        onChange={handleMergeChange}
-        header={middleHeader}
-        headerClassName={middleHeaderClassName}
-        className={cn('tw-border tw-border-neutral-200 tw-rounded-lg', middleClassName)}
-        onScrollDOMReady={registerScroller(1)}
-      />
-
-      <AcceptControls
-        conflicts={rightConflicts}
-        side="right"
-        onAccept={acceptRight}
-        onDismiss={dismissRight}
-        contentRef={registerFollower(2, 'right-controls')}
-        argo={argo}
-      />
-
-      <MergePane
-        value={rightText}
-        highlightedLines={rightHighlightedLines}
-        lineClassification={rightClassification}
-        readOnly
-        header={rightHeader}
-        className="tw-rounded-l-lg tw-border tw-border-neutral-200"
-        onScrollDOMReady={registerScroller(2)}
-      />
-    </div>
-  );
-};

package/src/components/MergeEditor/MergePane.tsx

@@ -1,113 +0,0 @@
-import { type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
-import { type Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
-
-import colors from '@keboola/tailwind-config/colors';
-
-import { cn } from '../../utils';
-
-import { type ChangeClassification, LINE_HEIGHT_PX } from './constants';
-import { createDiffHighlightExtension, updateHighlightedLines } from './decorations';
-
-type Props = {
-  value: string;
-  highlightedLines: Set<number>;
-  lineClassification: Map<number, ChangeClassification>;
-  readOnly?: boolean;
-  onChange?: (value: string) => void;
-  header?: ReactNode;
-  headerClassName?: string;
-  className?: string;
-  onScrollDOMReady?: (el: HTMLElement | null) => void;
-};
-
-export const MergePane = ({
-  value,
-  highlightedLines,
-  lineClassification,
-  readOnly = false,
-  onChange,
-  header,
-  headerClassName,
-  className,
-  onScrollDOMReady,
-}: Props) => {
-  const editorRef = useRef<ReactCodeMirrorRef>(null);
-
-  const extensions = useMemo(
-    (): Extension[] => [
-      createDiffHighlightExtension(),
-      EditorView.theme({
-        '&.cm-editor': {
-          height: '100%',
-          backgroundColor: colors.neutral[50],
-          outline: 'none',
-        },
-        '.cm-gutters': {
-          backgroundColor: colors.neutral[100],
-        },
-        '*': { lineHeight: `${LINE_HEIGHT_PX}px` },
-        '.cm-lineNumbers .cm-gutterElement': { padding: '0 0 0 25px' },
-      }),
-      // Recalc viewport after every doc change so late-settling layouts (alerts
-      // appearing above the editor) don't leave trailing lines blank.
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-          requestAnimationFrame(() => update.view.dispatch({}));
-        }
-      }),
-    ],
-    [],
-  );
-
-  useEffect(() => {
-    const view = editorRef.current?.view;
-    if (view) {
-      updateHighlightedLines(view, highlightedLines, lineClassification);
-    }
-  }, [highlightedLines, lineClassification]);
-
-  const handleCreateEditor = useCallback(
-    (view: EditorView) => {
-      updateHighlightedLines(view, highlightedLines, lineClassification);
-      onScrollDOMReady?.(view.scrollDOM);
-    },
-    [highlightedLines, lineClassification, onScrollDOMReady],
-  );
-
-  useEffect(() => {
-    return () => onScrollDOMReady?.(null);
-  }, [onScrollDOMReady]);
-
-  // Re-measure on wrapper resize — parent dimensions settle after CM mounts
-  // (fullscreen modal, alerts appearing above the editor).
-  useEffect(() => {
-    const view = editorRef.current?.view;
-    const wrapper = view?.dom.parentElement;
-    if (!view || !wrapper) return;
-
-    const observer = new ResizeObserver(() => view.dispatch({}));
-    observer.observe(wrapper);
-
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div className={cn('tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-overflow-hidden', className)}>
-      {header && <div className={cn('tw-bg-white tw-px-4 tw-py-3', headerClassName)}>{header}</div>}
-      <div className="tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full">
-        <CodeMirror
-          ref={editorRef}
-          height="100%"
-          value={value}
-          onChange={onChange}
-          extensions={extensions}
-          readOnly={readOnly}
-          onCreateEditor={handleCreateEditor}
-          basicSetup={{ lineNumbers: true, drawSelection: false }}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/MergeEditor/PaneHeader.tsx

@@ -1,11 +0,0 @@
-type Props = {
-  label: string;
-  sublabel?: string;
-};
-
-export const PaneHeader = ({ label, sublabel }: Props) => (
-  <div>
-    <p className="tw-m-0 tw-text-sm tw-font-medium tw-text-neutral-900">{label}</p>
-    {sublabel && <p className="tw-m-0 tw-text-xs tw-text-neutral-400">{sublabel}</p>}
-  </div>
-);

package/src/components/MergeEditor/constants.ts

@@ -1,48 +0,0 @@
-export const CHUNK_TYPE = {
-  UNCHANGED: 'unchanged',
-  ADDED: 'added',
-  REMOVED: 'removed',
-} as const;
-
-type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
-
-export type DiffChunk = {
-  type: ChunkType;
-  value: string;
-  /** 1-indexed start line in the old (left) text */
-  oldStart: number;
-  /** 1-indexed end line in the old (left) text */
-  oldEnd: number;
-  /** 1-indexed start line in the new (right) text */
-  newStart: number;
-  /** 1-indexed end line in the new (right) text */
-  newEnd: number;
-};
-
-/**
- * A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
- * representing a section that was modified. If only one side exists,
- * the other is empty (pure insertion or deletion).
- */
-export type MergeConflict = {
-  id: string;
-  oldValue: string;
-  oldStartLine: number;
-  oldEndLine: number;
-  newValue: string;
-  newStartLine: number;
-  newEndLine: number;
-};
-
-export const CHANGE_CLASS = {
-  SAFE: 'safe',
-  CONFLICT: 'conflict',
-} as const;
-
-export type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
-
-/** Must match the CodeMirror line-height set in MergePane */
-export const LINE_HEIGHT_PX = 20;
-
-/** Must match the rendered header height in MergePane (py-3 + content + border) */
-export const PANE_HEADER_HEIGHT_PX = 58;

package/src/components/MergeEditor/decorations.ts

@@ -1,126 +0,0 @@
-import {
-  type Extension,
-  RangeSet,
-  RangeSetBuilder,
-  StateEffect,
-  StateField,
-} from '@codemirror/state';
-import {
-  Decoration,
-  type DecorationSet,
-  EditorView,
-  gutterLineClass,
-  GutterMarker,
-} from '@codemirror/view';
-
-import colors from '@keboola/tailwind-config/colors';
-
-import type { ChangeClassification } from './constants';
-import { CHANGE_CLASS } from './constants';
-
-type HighlightPayload = {
-  lines: Set<number>;
-  classification: Map<number, ChangeClassification>;
-};
-
-const setHighlightedLines = StateEffect.define<HighlightPayload>();
-
-const safeDecoration = Decoration.line({ class: 'cm-merge-safe-line' });
-const conflictDecoration = Decoration.line({ class: 'cm-merge-conflict-line' });
-
-class SafeGutterMarker extends GutterMarker {
-  override elementClass = 'cm-merge-safe-gutter';
-}
-
-class ConflictGutterMarker extends GutterMarker {
-  override elementClass = 'cm-merge-conflict-gutter';
-}
-
-const safeGutterMarker = new SafeGutterMarker();
-const conflictGutterMarker = new ConflictGutterMarker();
-
-type FieldValue = {
-  decorations: DecorationSet;
-  gutterMarkers: RangeSet<GutterMarker>;
-};
-
-export const createDiffHighlightExtension = (): Extension => {
-  const field = StateField.define<FieldValue>({
-    create: () => ({ decorations: Decoration.none, gutterMarkers: RangeSet.empty }),
-    update(value, tr) {
-      // Use the last effect if multiple are dispatched in a single transaction
-      let payload: HighlightPayload | null = null;
-      for (const effect of tr.effects) {
-        if (effect.is(setHighlightedLines)) {
-          payload = effect.value;
-        }
-      }
-
-      if (!payload) {
-        return {
-          decorations: value.decorations.map(tr.changes),
-          gutterMarkers: value.gutterMarkers.map(tr.changes),
-        };
-      }
-
-      const decoBuilder = new RangeSetBuilder<Decoration>();
-      const gutterBuilder = new RangeSetBuilder<GutterMarker>();
-      const doc = tr.state.doc;
-      const { lines, classification } = payload;
-
-      // Iterate the (typically small) highlighted set instead of all doc lines.
-      // RangeSetBuilder requires positions in order, so sort first.
-      const sorted = [...lines].filter((l) => l >= 1 && l <= doc.lines).sort((a, b) => a - b);
-      for (const i of sorted) {
-        const cls = classification.get(i);
-        if (!cls) continue;
-
-        const isSafe = cls === CHANGE_CLASS.SAFE;
-        const line = doc.line(i);
-        decoBuilder.add(line.from, line.from, isSafe ? safeDecoration : conflictDecoration);
-        gutterBuilder.add(line.from, line.from, isSafe ? safeGutterMarker : conflictGutterMarker);
-      }
-
-      return {
-        decorations: decoBuilder.finish(),
-        gutterMarkers: gutterBuilder.finish(),
-      };
-    },
-    provide: (f) => [
-      EditorView.decorations.from(f, (val) => val.decorations),
-      gutterLineClass.from(f, (val: FieldValue) => val.gutterMarkers),
-    ],
-  });
-
-  // !important needed to override CodeMirror's built-in active-line and selection backgrounds.
-  // SAFE = change present on one side only (green). CONFLICT = both sides edited this region
-  // (amber/warning — NOT red, since red reads as "deletion" and the 3-pane editor only ever
-  // displays additions in each side pane). The colored left border doubles as a scan-lane so
-  // changes are easy to spot when zoomed out.
-  const theme = EditorView.theme({
-    '.cm-merge-safe-line': {
-      backgroundColor: `${colors.primary[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors.primary[500]}`,
-    },
-    '.cm-merge-conflict-line': {
-      backgroundColor: `${colors.warning[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors.warning[500]}`,
-    },
-    '.cm-merge-safe-gutter': {
-      backgroundColor: `${colors.primary[200]} !important`,
-    },
-    '.cm-merge-conflict-gutter': {
-      backgroundColor: `${colors.warning[200]} !important`,
-    },
-  });
-
-  return [field, theme];
-};
-
-export const updateHighlightedLines = (
-  view: EditorView,
-  lines: Set<number>,
-  classification: Map<number, ChangeClassification>,
-) => {
-  view.dispatch({ effects: setHighlightedLines.of({ lines, classification }) });
-};

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

@@ -1,172 +0,0 @@
-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');
-  });
-});