@keboola/design 1.0.0

package/src/components/MarkdownEditor/theme.ts

@@ -0,0 +1,39 @@
+import type { EditorThemeClasses } from 'lexical';
+
+/**
+ * Lexical editor theme — maps node types to CSS classes.
+ * The editor container uses `tw-prose` so semantic elements (headings, lists, blockquotes, etc.)
+ * are styled by Tailwind Typography. We only need explicit classes for text formatting
+ * (bold, italic, etc.) because Lexical renders those as `<span>` elements.
+ */
+export const editorTheme: EditorThemeClasses = {
+  link: 'tw-cursor-pointer !tw-text-secondary-500 tw-underline',
+  text: {
+    bold: 'tw-font-bold',
+    italic: 'tw-italic',
+    strikethrough: 'tw-line-through',
+    underline: 'tw-underline',
+    code: 'tw-rounded tw-bg-neutral-100 tw-px-1 tw-py-0.5 tw-font-mono tw-text-[0.85em]',
+  },
+  list: {
+    ol: '!tw-list-decimal',
+    ul: '!tw-list-disc',
+    checklist: '!tw-list-none !tw-pl-0',
+    listitemChecked: [
+      'tw-relative !tw-pl-6 tw-list-none tw-outline-none tw-line-through tw-text-neutral-400',
+      'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
+      'before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid',
+      'before:tw-bg-secondary-500 before:tw-border-secondary-500 before:tw-cursor-pointer',
+      'after:tw-content-[""] after:tw-absolute after:tw-left-[5.5px] after:tw-top-[5.5px]',
+      'after:tw-w-1 after:tw-h-2 after:tw-border-white after:tw-border-solid',
+      'after:tw-border-r-[1.5px] after:tw-border-b-[1.5px] after:tw-border-t-0 after:tw-border-l-0',
+      'after:tw-rotate-45',
+    ].join(' '),
+    listitemUnchecked: [
+      'tw-relative !tw-pl-6 tw-list-none tw-outline-none',
+      'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
+      'before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid',
+      'before:tw-border-neutral-200 before:tw-bg-white before:tw-cursor-pointer',
+    ].join(' '),
+  },
+};

package/src/components/MarkdownEditor/transformers.ts

@@ -0,0 +1,179 @@
+import type {
+  ElementTransformer,
+  MultilineElementTransformer,
+  TextMatchTransformer,
+  Transformer,
+} from '@lexical/markdown';
+import { CHECK_LIST, TRANSFORMERS } from '@lexical/markdown';
+import {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode,
+} from '@lexical/react/LexicalHorizontalRuleNode';
+
+import { $createImageNode, $isImageNode, ImageNode } from './nodes/ImageNode';
+import { $createMermaidNode, $isMermaidNode, MermaidNode } from './nodes/MermaidNode';
+
+/** Markdown image: `![alt](src)` */
+const IMAGE: TextMatchTransformer = {
+  dependencies: [ImageNode],
+  export: (node) => {
+    if (!$isImageNode(node)) return null;
+    return `![${node.getAlt()}](${node.getSrc()})`;
+  },
+  importRegExp: /!\[([^\]]*)\]\(([^)]+)\)/,
+  regExp: /!\[([^\]]*)\]\(([^)]+)\)$/,
+  replace: (textNode, match) => {
+    const [, alt = '', src = ''] = match;
+    const imageNode = $createImageNode(src, alt);
+    textNode.replace(imageNode);
+  },
+  trigger: ')',
+  type: 'text-match',
+};
+
+/** Horizontal rule: `---`, `***`, or `___` */
+const HORIZONTAL_RULE: ElementTransformer = {
+  dependencies: [HorizontalRuleNode],
+  export: (node) => {
+    return $isHorizontalRuleNode(node) ? '---' : null;
+  },
+  regExp: /^(---|\*\*\*|___)$/,
+  replace: (parentNode) => {
+    const node = $createHorizontalRuleNode();
+    parentNode.replace(node);
+  },
+  type: 'element',
+};
+
+/** Fenced mermaid block: ` ```mermaid ... ``` ` → MermaidNode (rendered as diagram) */
+const MERMAID: MultilineElementTransformer = {
+  dependencies: [MermaidNode],
+  export: (node) => {
+    if (!$isMermaidNode(node)) return null;
+    return '```mermaid\n' + node.getCode() + '\n```';
+  },
+  regExpStart: /^[ \t]*(`{3,})mermaid(?:\s.*)?$/,
+  regExpEnd: {
+    optional: true,
+    regExp: /^[ \t]*`{3,}$/,
+  },
+  replace: (rootNode, _children, _startMatch, _endMatch, linesInBetween) => {
+    if (!linesInBetween) return;
+    const code = linesInBetween.join('\n').trim();
+    if (code) {
+      rootNode.append($createMermaidNode(code));
+    }
+  },
+  handleImportAfterStartMatch: ({
+    lines,
+    rootNode,
+    startLineIndex,
+    startMatch,
+  }): [boolean, number] => {
+    const fence = startMatch[1];
+    if (!fence) return [false, startLineIndex];
+    const fenceLength = fence.trim().length;
+    const endRegex = new RegExp(`^[ \\t]*\`{${fenceLength},}$`);
+
+    for (let i = startLineIndex + 1; i < lines.length; i++) {
+      if (endRegex.test(lines[i] ?? '')) {
+        const code = lines
+          .slice(startLineIndex + 1, i)
+          .join('\n')
+          .trim();
+        if (code) {
+          rootNode.append($createMermaidNode(code));
+        }
+        return [true, i];
+      }
+    }
+
+    // No closing fence — consume remaining lines
+    const code = lines
+      .slice(startLineIndex + 1)
+      .join('\n')
+      .trim();
+    if (code) {
+      rootNode.append($createMermaidNode(code));
+    }
+    return [true, lines.length - 1];
+  },
+  type: 'multiline-element',
+};
+
+/**
+ * Custom transformers = our additions + built-in Lexical transformers.
+ * MERMAID is placed before TRANSFORMERS so it intercepts ` ```mermaid ``` ` before the generic CODE transformer.
+ * IMAGE is placed before built-in LINK to prevent `![alt](url)` from being parsed as `!` + link.
+ */
+export const CUSTOM_TRANSFORMERS: Transformer[] = [
+  IMAGE,
+  HORIZONTAL_RULE,
+  CHECK_LIST,
+  MERMAID,
+  ...TRANSFORMERS,
+];
+
+// --- Table pre/post-processing ---
+// GFM tables can't round-trip through Lexical's markdown (no built-in table transformer).
+// We wrap them in fenced code blocks on import and unwrap on export to preserve them exactly.
+
+const TABLE_FENCE_LANG = '__kbc_table__';
+
+const isTableLine = (line: string): boolean => {
+  const trimmed = line.trim();
+  return trimmed.startsWith('|') && trimmed.endsWith('|');
+};
+
+const CODE_FENCE_REGEX = /^[ \t]*`{3,}/;
+
+/** Wrap GFM tables in code fences so they survive Lexical's markdown round-trip. */
+export const preprocessMarkdown = (markdown: string): string => {
+  const lines = markdown.split('\n');
+  const result: string[] = [];
+  let tableLines: string[] = [];
+  let insideCodeFence = false;
+
+  const flushTable = () => {
+    if (tableLines.length >= 2) {
+      result.push(`\`\`\`${TABLE_FENCE_LANG}`);
+      result.push(...tableLines);
+      result.push('```');
+    } else {
+      // Single pipe line isn't a table — keep as-is
+      result.push(...tableLines);
+    }
+    tableLines = [];
+  };
+
+  for (const line of lines) {
+    if (CODE_FENCE_REGEX.test(line)) {
+      if (tableLines.length > 0) flushTable();
+      insideCodeFence = !insideCodeFence;
+      result.push(line);
+      continue;
+    }
+
+    if (insideCodeFence) {
+      result.push(line);
+      continue;
+    }
+
+    if (isTableLine(line)) {
+      tableLines.push(line);
+    } else {
+      if (tableLines.length > 0) flushTable();
+      result.push(line);
+    }
+  }
+  if (tableLines.length > 0) flushTable();
+
+  return result.join('\n');
+};
+
+/** Unwrap code-fenced tables back to raw GFM table markdown. */
+export const postprocessMarkdown = (markdown: string): string => {
+  const regex = new RegExp(`\`\`\`${TABLE_FENCE_LANG}\\n([\\s\\S]*?)\\n\`\`\``, 'g');
+  return markdown.replace(regex, '$1');
+};

package/src/components/MarkedText/MarkedText.stories.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TextInput } from '../Input';
+
+import { MarkedText } from './MarkedText';
+
+export default {
+  component: MarkedText,
+  args: {
+    source: 'This is a text with marked words.',
+    mark: 'marked',
+  },
+} satisfies Meta<typeof MarkedText>;
+
+type Story = StoryObj<typeof MarkedText>;
+
+export const Default: Story = {};
+
+const MarkedTextDemo = (props: ComponentProps<typeof MarkedText>) => {
+  const [search, setSearch] = useState('');
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-4">
+      <TextInput
+        value={search}
+        placeholder="Search..."
+        onValueChange={setSearch}
+        variant="secondary"
+      />
+      <MarkedText {...props} mark={search} />
+    </div>
+  );
+};
+
+export const WithInput: Story = {
+  args: {
+    source:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur interdum, nisl nunc egestas nunc, vitae tincidunt nisl nunc euismod nunc. Sed euismod, nisi vel consectetur interdum, nisl nunc egestas nunc, vitae tincidunt nisl nunc euismod nunc.\n' +
+      'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n' +
+      'Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.\n' +
+      'Sed porttitor lectus nibh. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat.\n' +
+      'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Vivamus suscipit tortor eget felis porttitor volutpat.',
+  },
+  render: MarkedTextDemo,
+};

package/src/components/MarkedText/MarkedText.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { createMarkedParts } from './utils';
+
+type Props = {
+  source: string;
+  className?: string;
+  mark?: string;
+  isCaseSensitive?: boolean;
+} & ComponentProps<'span'>;
+
+export const MarkedText = ({
+  ref,
+  source,
+  mark,
+  isCaseSensitive = false,
+  ...spanProps
+}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
+  const parts = useMemo(
+    () =>
+      createMarkedParts({
+        mark,
+        source,
+        isCaseSensitive,
+      }),
+    [isCaseSensitive, mark, source],
+  );
+
+  return (
+    <span {...spanProps} ref={ref}>
+      {/* oxlint-disable-next-line react/no-array-index-key */}
+      {parts.map(({ isMark, part }, index) => (isMark ? <mark key={index}>{part}</mark> : part))}
+    </span>
+  );
+};

package/src/components/MarkedText/index.ts

@@ -0,0 +1 @@
+export { MarkedText } from './MarkedText';

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

@@ -0,0 +1,193 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,20 @@
+import { Button } from '../../Button';
+
+type Props = {
+  side: 'left' | 'right';
+  onAccept: () => void;
+};
+
+export const AcceptButton = ({ side, onAccept }: Props) => {
+  const label = `Accept ${side === 'left' ? 'production' : 'branch'} version`;
+  return (
+    <Button
+      icon={side === 'left' ? ['far', 'chevrons-right'] : ['far', 'chevrons-left']}
+      onClick={onAccept}
+      variant="outline"
+      size="icon"
+      title={label}
+      aria-label={label}
+    />
+  );
+};

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

@@ -0,0 +1,66 @@
+import type { RefCallback } from 'react';
+
+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>;
+};
+
+// 40px column when there are conflicts to render — wide enough to fit the
+// 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 (4px) 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 }: Props) => (
+  <div
+    className={cn(
+      'tw-z-10 tw-flex tw-shrink-0 tw-flex-col tw-items-center',
+      conflicts.length > 0 ? 'tw-w-10' : '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)} />
+                  {onDismiss && (
+                    <Button
+                      icon="xmark"
+                      onClick={() => onDismiss(conflict)}
+                      variant="outline"
+                      size="icon"
+                      title="Dismiss"
+                      aria-label={`Dismiss ${side === 'left' ? 'production' : 'branch'} change`}
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </>
+    )}
+  </div>
+);

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

@@ -0,0 +1,38 @@
+import { cn } from '../../../utils';
+import { Icon } from '../../Icon';
+
+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,
+      )}
+    >
+      <Icon icon={allDone ? 'circle-check' : 'triangle-exclamation'} />
+      {allDone ? 'All changes resolved' : `${parts.join(', ')} remaining`}
+    </p>
+  );
+};