@keboola/design 2.0.1 → 2.1.0

package/src/components/MarkedText/utils.test.ts

@@ -1,193 +0,0 @@
-import { createMarkedParts } from './utils';
-
-describe('MarkedText - utils - createMarkedParts', () => {
-  it('should return single unmarked part with entire source as there is no marked string', () => {
-    const result = createMarkedParts({
-      source: 'hello world',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([{ isMark: false, part: 'hello world' }]);
-  });
-
-  it('should return empty array as there is nothing to mark', () => {
-    const result = createMarkedParts({
-      source: '',
-      mark: 'hello',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([]);
-  });
-
-  it('should properly escape special regex characters', () => {
-    const result = createMarkedParts({
-      mark: '(test) [hello] $world',
-      source: 'this (test) has [hello] special $world chars',
-      isCaseSensitive: false,
-    });
-
-    expect(result.filter((p) => p.isMark)).toHaveLength(3);
-  });
-
-  it('should return original source when mark is empty', () => {
-    const result = createMarkedParts({
-      mark: '',
-      source: 'hello world',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([{ isMark: false, part: 'hello world' }]);
-  });
-
-  it('should return original source when mark is whitespace only', () => {
-    const result = createMarkedParts({
-      mark: '   ',
-      source: 'hello world',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([{ isMark: false, part: 'hello world' }]);
-  });
-
-  it('should split text correctly with single word match', () => {
-    const result = createMarkedParts({
-      mark: 'world',
-      source: 'hello world test',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: false, part: 'hello ' },
-      { isMark: true, part: 'world' },
-      { isMark: false, part: ' test' },
-    ]);
-  });
-
-  it('should split text correctly with multiple matches', () => {
-    const result = createMarkedParts({
-      mark: 'test',
-      source: 'test hello test world test',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: true, part: 'test' },
-      { isMark: false, part: ' hello ' },
-      { isMark: true, part: 'test' },
-      { isMark: false, part: ' world ' },
-      { isMark: true, part: 'test' },
-    ]);
-  });
-});
-
-describe('case sensitivity', () => {
-  it('should respect case insensitive matching', () => {
-    const result = createMarkedParts({
-      mark: 'Hello',
-      source: 'hello world Hello there',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: true, part: 'hello' },
-      { isMark: false, part: ' world ' },
-      { isMark: true, part: 'Hello' },
-      { isMark: false, part: ' there' },
-    ]);
-  });
-
-  it('should respect case sensitive matching', () => {
-    const result = createMarkedParts({
-      mark: 'Hello',
-      source: 'hello world Hello there',
-      isCaseSensitive: true,
-    });
-
-    expect(result).toEqual([
-      { isMark: false, part: 'hello world ' },
-      { isMark: true, part: 'Hello' },
-      { isMark: false, part: ' there' },
-    ]);
-  });
-
-  it('should handle mixed case in source with case insensitive search', () => {
-    const result = createMarkedParts({
-      mark: 'test',
-      source: 'Test is a TEST for testing',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: true, part: 'Test' },
-      { isMark: false, part: ' is a ' },
-      { isMark: true, part: 'TEST' },
-      { isMark: false, part: ' for ' },
-      { isMark: true, part: 'test' },
-      { isMark: false, part: 'ing' },
-    ]);
-  });
-});
-
-describe('multiple words', () => {
-  it('should split on multiple words with OR logic', () => {
-    const result = createMarkedParts({
-      mark: 'hello world',
-      source: 'hello there world peace',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: true, part: 'hello' },
-      { isMark: false, part: ' there ' },
-      { isMark: true, part: 'world' },
-      { isMark: false, part: ' peace' },
-    ]);
-  });
-
-  it('should handle multiple spaces between search terms', () => {
-    const result = createMarkedParts({
-      mark: 'hello    world',
-      source: 'hello there world peace',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: true, part: 'hello' },
-      { isMark: false, part: ' there ' },
-      { isMark: true, part: 'world' },
-      { isMark: false, part: ' peace' },
-    ]);
-  });
-
-  it('should handle overlapping search terms', () => {
-    const result = createMarkedParts({
-      mark: 'test testing',
-      source: 'testing is test work',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: true, part: 'test' },
-      { isMark: false, part: 'ing is ' },
-      { isMark: true, part: 'test' },
-      { isMark: false, part: ' work' },
-    ]);
-  });
-
-  it('should handle three or more search terms', () => {
-    const result = createMarkedParts({
-      mark: 'one two three',
-      source: 'one fish two fish red fish blue fish three',
-      isCaseSensitive: false,
-    });
-
-    expect(result).toEqual([
-      { isMark: true, part: 'one' },
-      { isMark: false, part: ' fish ' },
-      { isMark: true, part: 'two' },
-      { isMark: false, part: ' fish red fish blue fish ' },
-      { isMark: true, part: 'three' },
-    ]);
-  });
-});

package/src/components/MarkedText/utils.ts

@@ -1,37 +0,0 @@
-import { escapeStringRegexp } from '../../utils/escapeStringRegexp';
-
-const createSearchRegex = ({
-  mark,
-  isCaseSensitive = false,
-}: {
-  mark: string;
-  isCaseSensitive?: boolean;
-}) => {
-  const pattern = escapeStringRegexp(mark).split(' ').filter(Boolean).join('|');
-  return new RegExp(`(${pattern})`, `g${isCaseSensitive ? '' : 'i'}`);
-};
-
-export const createMarkedParts = ({
-  mark,
-  isCaseSensitive,
-  source,
-}: {
-  mark?: string;
-  source: string;
-  isCaseSensitive: boolean;
-}) => {
-  if (!mark?.trim()) return [{ isMark: false, part: source }];
-
-  const searchRegex = createSearchRegex({
-    mark,
-    isCaseSensitive,
-  });
-
-  return source
-    .split(searchRegex)
-    .map((part) => ({
-      isMark: searchRegex.test(part),
-      part,
-    }))
-    .filter(({ part }) => part !== '');
-};

package/src/components/MergeEditor/AcceptControls/AcceptButton.tsx

@@ -1,25 +0,0 @@
-import { ChevronsLeft, ChevronsRight } from '../../../icons';
-import { Button } from '../../Button';
-
-type Props = {
-  side: 'left' | 'right';
-  onAccept: () => void;
-  argo?: boolean;
-};
-
-export const AcceptButton = ({ side, onAccept, argo }: Props) => {
-  const label = `Accept ${side === 'left' ? 'production' : 'branch'} version`;
-  const Chevron = side === 'left' ? ChevronsRight : ChevronsLeft;
-  return (
-    <Button
-      onClick={onAccept}
-      variant="outline"
-      size="icon-sm"
-      title={label}
-      aria-label={label}
-      argo={argo}
-    >
-      <Chevron className="tw-size-5" />
-    </Button>
-  );
-};

package/src/components/MergeEditor/AcceptControls/AcceptControls.tsx

@@ -1,77 +0,0 @@
-import type { RefCallback } from 'react';
-
-import { X } from '../../../icons';
-import { cn } from '../../../utils';
-import { Button } from '../../Button';
-import { LINE_HEIGHT_PX, type MergeConflict, PANE_HEADER_HEIGHT_PX } from '../constants';
-
-import { AcceptButton } from './AcceptButton';
-
-type Props = {
-  conflicts: MergeConflict[];
-  side: 'left' | 'right';
-  onAccept: (conflict: MergeConflict) => void;
-  onDismiss?: (conflict: MergeConflict) => void;
-  contentRef?: RefCallback<HTMLDivElement>;
-  argo?: boolean;
-};
-
-// 28px column when there are conflicts to render — wide enough to fit the
-// 24px icon-xs accept chevron + dismiss icon without overflowing into the
-// adjacent panes (which use `tw-overflow-hidden` and would clip absolutely-
-// positioned children that crossed the boundary). Collapses to 0 when idle
-// so empty merges don't reserve a sliver of layout. Inner wrapper allows
-// horizontal overflow so the icon buttons' focus-visible ring stays visible
-// past the column edge. Buttons stay aligned with their source-pane chunk
-// via the parent's `translateY(-scrollTop)` follower applied to `contentRef`.
-export const AcceptControls = ({
-  conflicts,
-  side,
-  onAccept,
-  onDismiss,
-  contentRef,
-  argo,
-}: Props) => (
-  <div
-    className={cn(
-      'tw-z-10 tw-flex tw-shrink-0 tw-flex-col tw-items-center',
-      conflicts.length > 0 ? 'tw-w-7' : 'tw-w-0',
-    )}
-  >
-    {conflicts.length > 0 && (
-      <>
-        <div className="tw-shrink-0" style={{ height: `${PANE_HEADER_HEIGHT_PX}px` }} />
-        <div className="tw-relative tw-w-full tw-flex-1 tw-overflow-y-clip tw-overflow-x-visible">
-          <div ref={contentRef} className="tw-relative tw-size-full">
-            {conflicts.map((conflict) => {
-              const topLine = side === 'left' ? conflict.oldStartLine : conflict.newStartLine;
-              const topOffset = (topLine - 1) * LINE_HEIGHT_PX - 2;
-
-              return (
-                <div
-                  key={conflict.id}
-                  className="tw-absolute tw-inset-x-0 tw-flex tw-flex-col tw-items-center tw-gap-0.5"
-                  style={{ top: `${topOffset}px` }}
-                >
-                  <AcceptButton side={side} onAccept={() => onAccept(conflict)} argo={argo} />
-                  {onDismiss && (
-                    <Button
-                      onClick={() => onDismiss(conflict)}
-                      variant="outline"
-                      size="icon-sm"
-                      title="Dismiss"
-                      aria-label={`Dismiss ${side === 'left' ? 'production' : 'branch'} change`}
-                      argo={argo}
-                    >
-                      <X className="tw-size-4" />
-                    </Button>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </>
-    )}
-  </div>
-);

package/src/components/MergeEditor/ConflictStatus/ConflictStatusIndicator.tsx

@@ -1,38 +0,0 @@
-import { AlertTriangle, CircleCheck } from '../../../icons';
-import { cn } from '../../../utils';
-
-type Props = {
-  remainingConflicts: number;
-  remainingSafeChanges: number;
-};
-
-export const ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }: Props) => {
-  const hasConflicts = remainingConflicts > 0;
-  const allDone = !hasConflicts && remainingSafeChanges === 0;
-
-  const colorClass = hasConflicts
-    ? 'tw-text-warning-500'
-    : allDone
-      ? 'tw-text-primary-500'
-      : 'tw-text-neutral-400';
-
-  const parts: string[] = [];
-  if (hasConflicts) {
-    parts.push(`${remainingConflicts} conflict${remainingConflicts !== 1 ? 's' : ''}`);
-  }
-  if (remainingSafeChanges > 0) {
-    parts.push(`${remainingSafeChanges} change${remainingSafeChanges !== 1 ? 's' : ''}`);
-  }
-
-  return (
-    <p
-      className={cn(
-        'tw-m-0 tw-flex tw-items-center tw-gap-1.5 tw-text-sm tw-font-medium',
-        colorClass,
-      )}
-    >
-      {allDone ? <CircleCheck className="tw-size-4" /> : <AlertTriangle className="tw-size-4" />}
-      {allDone ? 'All changes resolved' : `${parts.join(', ')} remaining`}
-    </p>
-  );
-};

package/src/components/MergeEditor/MergeEditor.stories.tsx

@@ -1,226 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { ConflictStatusIndicator } from './ConflictStatus/ConflictStatusIndicator';
-import { MergeEditor } from './MergeEditor';
-import { PaneHeader } from './PaneHeader';
-import { useMergeDiff } from './useMergeDiff';
-
-const baseText = `{
-  "name": "My Configuration",
-  "description": "Extracts data from API",
-  "configuration": {
-    "endpoint": "/api/v1/data",
-    "method": "GET",
-    "timeout": 30
-  },
-  "rows": [
-    {
-      "id": "row-1",
-      "name": "Users",
-      "enabled": true
-    },
-    {
-      "id": "row-2",
-      "name": "Orders",
-      "enabled": true
-    }
-  ]
-}`;
-
-const productionText = `{
-  "name": "My Configuration",
-  "description": "Extracts data from REST API",
-  "configuration": {
-    "endpoint": "/api/v2/data",
-    "method": "GET",
-    "timeout": 60,
-    "retries": 3
-  },
-  "rows": [
-    {
-      "id": "row-1",
-      "name": "Users",
-      "enabled": true
-    },
-    {
-      "id": "row-2",
-      "name": "Orders",
-      "enabled": false
-    }
-  ]
-}`;
-
-const branchText = `{
-  "name": "My Updated Configuration",
-  "description": "Extracts data from API",
-  "configuration": {
-    "endpoint": "/api/v1/data",
-    "method": "POST",
-    "timeout": 30,
-    "headers": {
-      "Content-Type": "application/json"
-    }
-  },
-  "rows": [
-    {
-      "id": "row-1",
-      "name": "Active Users",
-      "enabled": true
-    },
-    {
-      "id": "row-2",
-      "name": "Orders",
-      "enabled": true
-    },
-    {
-      "id": "row-3",
-      "name": "Products",
-      "enabled": true
-    }
-  ]
-}`;
-
-type MergeEditorHookProps = {
-  base: string;
-  left: string;
-  right: string;
-  leftLabel?: string;
-  rightLabel?: string;
-  argo?: boolean;
-};
-
-const MergeEditorWithHook = ({
-  base = baseText,
-  left = productionText,
-  right = branchText,
-  leftLabel = 'Production',
-  rightLabel = 'Branch',
-  argo,
-}: Partial<MergeEditorHookProps>) => {
-  const {
-    mergeValue,
-    handleMergeChange,
-    leftConflicts,
-    rightConflicts,
-    leftHighlightedLines,
-    rightHighlightedLines,
-    leftClassification,
-    rightClassification,
-    mergeHighlightedLines,
-    mergeClassification,
-    acceptLeft,
-    acceptRight,
-    dismissLeft,
-    dismissRight,
-    totalConflicts,
-    resolvedConflicts,
-    remainingSafeChanges,
-  } = useMergeDiff(base, left, right);
-
-  const remaining = totalConflicts - resolvedConflicts;
-
-  return (
-    <div className="tw-flex tw-h-[600px] tw-flex-col tw-gap-4">
-      <div className="tw-flex tw-items-center tw-gap-4">
-        <ConflictStatusIndicator
-          remainingConflicts={remaining}
-          remainingSafeChanges={remainingSafeChanges}
-        />
-      </div>
-      <MergeEditor
-        mergeValue={mergeValue}
-        handleMergeChange={handleMergeChange}
-        leftText={left}
-        rightText={right}
-        leftConflicts={leftConflicts}
-        rightConflicts={rightConflicts}
-        leftHighlightedLines={leftHighlightedLines}
-        rightHighlightedLines={rightHighlightedLines}
-        leftClassification={leftClassification}
-        rightClassification={rightClassification}
-        mergeHighlightedLines={mergeHighlightedLines}
-        mergeClassification={mergeClassification}
-        acceptLeft={acceptLeft}
-        acceptRight={acceptRight}
-        dismissLeft={dismissLeft}
-        dismissRight={dismissRight}
-        leftHeader={<PaneHeader label={leftLabel} sublabel="Version #5" />}
-        middleHeader={<PaneHeader label="Merge Result" sublabel="Editable" />}
-        middleHeaderClassName="tw-bg-secondary-100"
-        middleClassName="tw-border-blue-400"
-        rightHeader={<PaneHeader label={rightLabel} sublabel="Version #3" />}
-        className="tw-flex-1"
-        argo={argo}
-      />
-    </div>
-  );
-};
-
-const meta: Meta<typeof MergeEditor> = {
-  component: MergeEditor,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Three-pane merge editor for resolving conflicts between two versions of a text. Left pane shows the production version, right pane shows the branch version, and the center pane is the editable merge result. Use `useMergeDiff` hook to compute all diff state from base/production/branch texts.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof MergeEditor>;
-
-export const WithConflicts: Story = {
-  render: () => <MergeEditorWithHook />,
-};
-
-// Both sides independently add new rows to the same JSON region. diff3Merge
-// classifies the affected lines as CONFLICT, so they render with amber (not red)
-// highlighting — this verifies the visual fix for "everything looks red even when
-// nothing was deleted" reported on canary-orion.
-const baseTextForRowAdditions = `{
-  "name": "Configuration",
-  "rows": [
-    { "id": "row-1", "name": "Users" }
-  ]
-}`;
-
-const productionTextWithAddedRow = `{
-  "name": "Configuration",
-  "rows": [
-    { "id": "row-1", "name": "Users" },
-    { "id": "row-prod", "name": "Production-only row" }
-  ]
-}`;
-
-const branchTextWithAddedRow = `{
-  "name": "Configuration",
-  "rows": [
-    { "id": "row-1", "name": "Users" },
-    { "id": "row-branch", "name": "Branch-only row" }
-  ]
-}`;
-
-export const BothSidesAddRows: Story = {
-  render: () => (
-    <MergeEditorWithHook
-      base={baseTextForRowAdditions}
-      left={productionTextWithAddedRow}
-      right={branchTextWithAddedRow}
-    />
-  ),
-};
-
-export const Argo: Story = {
-  render: () => <MergeEditorWithHook argo />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Same merge editor with the `argo` prop set. Accept and dismiss buttons inside the editor pick up the argo button palette while the layout chrome is unchanged.',
-      },
-    },
-  },
-};