@keboola/design 1.0.0

package/src/components/Command/CommandSeparator.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof CommandPrimitive.Separator>;
+
+export const CommandSeparator = ({ className, ...props }: Props) => (
+  <CommandPrimitive.Separator
+    className={cn('tw-h-px', 'tw-bg-border', 'tw-my-2', className)}
+    {...props}
+  />
+);

package/src/components/Command/index.ts

@@ -0,0 +1,6 @@
+export * from './Command';
+export * from './CommandInput';
+export * from './CommandList';
+export * from './CommandGroup';
+export * from './CommandItem';
+export { useCommandState, defaultFilter } from 'cmdk';

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from 'react';
+import type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';
+
+import type { CalendarProps } from '../Calendar';
+import { Calendar } from '../Calendar';
+import { Popover } from '../Popover';
+
+type OwnPopoverProps = PropsWithChildren &
+  Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &
+  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;
+
+type DatePickerProps = OwnPopoverProps & CalendarProps;
+
+export const DatePicker = ({
+  align = 'end',
+  alignOffset = -18,
+  children,
+  defaultOpen,
+  onOpenChange,
+  open,
+  sideOffset = 12,
+  ...calendarProps
+}: DatePickerProps) => (
+  <Popover defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>
+    <Popover.Trigger asChild>{children}</Popover.Trigger>
+    <Popover.Content
+      align={align}
+      alignOffset={alignOffset}
+      className="tw-w-auto tw-p-0"
+      sideOffset={sideOffset}
+    >
+      <Calendar {...calendarProps} />
+    </Popover.Content>
+  </Popover>
+);
+
+DatePicker.displayName = 'DatePicker';

package/src/components/DatePicker/index.ts

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

package/src/components/DiffView/DiffView.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button';
+import { Modal } from '../Modal';
+
+import { DiffView } from './DiffView';
+
+export default {
+  component: DiffView,
+} satisfies Meta<typeof DiffView>;
+
+type Story = StoryObj<typeof DiffView>;
+
+const oldValue = `{
+  "name": "orders-extractor",
+  "enabled": true,
+  "schedule": "0 2 * * *",
+  "tables": ["orders", "customers"],
+  "config": {
+    "host": "db.internal",
+    "port": 5432,
+    "database": "prod",
+    "retries": 3
+  }
+}`;
+
+const newValue = `{
+  "name": "orders-extractor",
+  "enabled": true,
+  "schedule": "0 4 * * *",
+  "tables": ["orders", "customers", "products"],
+  "config": {
+    "host": "db.internal",
+    "port": 5432,
+    "database": "prod",
+    "retries": 5,
+    "timeout": 30
+  }
+}`;
+
+export const Default: Story = {
+  args: {
+    oldValue,
+    newValue,
+    leftTitle: 'Production',
+    rightTitle: 'Branch',
+  },
+};
+
+export const Scrollable: Story = {
+  args: {
+    oldValue,
+    newValue,
+    leftTitle: 'Production',
+    rightTitle: 'Branch',
+  },
+  render: (args) => <DiffView className="tw-max-h-64" {...args} />,
+};
+
+export const InModal: Story = {
+  args: {
+    oldValue,
+    newValue,
+    leftTitle: 'Production',
+    rightTitle: 'Branch',
+  },
+  render: (args) => (
+    <Modal>
+      <Modal.Trigger asChild>
+        <Button>Open diff</Button>
+      </Modal.Trigger>
+      <Modal.Content size="large">
+        <Modal.Header title="orders-extractor — configuration changes" />
+        <Modal.Body>
+          <DiffView {...args} />
+        </Modal.Body>
+      </Modal.Content>
+    </Modal>
+  ),
+};

package/src/components/DiffView/DiffView.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+
+import { cn } from '../../utils';
+
+import { DiffViewMark } from './DiffViewMark';
+import { DiffViewTd } from './DiffViewTd';
+import { DiffViewTh } from './DiffViewTh';
+import { computeDiffRows, computeLineInformation } from './util';
+
+type Props = {
+  oldValue: string;
+  newValue: string;
+  ignoreWhitespace?: boolean;
+  className?: string;
+
+  leftTitleGutter?: ReactNode;
+  leftTitle: ReactNode;
+  rightTitle: ReactNode;
+  rightTitleGutter?: ReactNode;
+};
+
+export const DiffView = ({
+  leftTitle,
+  leftTitleGutter,
+  rightTitle,
+  rightTitleGutter,
+  oldValue,
+  newValue,
+  ignoreWhitespace,
+  className,
+}: Props) => {
+  const [expandedBlocks, setExpandedBlocks] = useState<number[]>([]);
+  const { lineInformation, diffLines } = computeLineInformation(
+    oldValue,
+    newValue,
+    ignoreWhitespace,
+  );
+  const rows = computeDiffRows(lineInformation, diffLines, expandedBlocks);
+
+  const handleExpand = (blockNumber: number) => {
+    setExpandedBlocks((curr) => [...curr, blockNumber]);
+  };
+
+  return (
+    <div
+      className={cn(
+        'tailwindcss-preflight',
+        'tw-bg-neutral-100',
+        'tw-border',
+        'tw-rounded-2xl',
+        'tw-overflow-auto',
+        className,
+      )}
+    >
+      <table className="tw-w-full tw-table-fixed tw-bg-neutral-50">
+        <thead className="tw-sticky tw-top-0 tw-z-10  tw-shadow-sm">
+          <tr>
+            <DiffViewTh variant="gutter">{leftTitleGutter}</DiffViewTh>
+            <DiffViewTh>{leftTitle}</DiffViewTh>
+            <DiffViewTh variant="gutter">{rightTitleGutter}</DiffViewTh>
+            <DiffViewTh>{rightTitle}</DiffViewTh>
+          </tr>
+        </thead>
+
+        <tbody>
+          {rows.map((row) => {
+            if (row.kind === 'fold')
+              return (
+                <tr key={row.key}>
+                  <DiffViewTd colSpan={4}>
+                    <button
+                      type="button"
+                      onClick={() => handleExpand(row.blockStart)}
+                      className={cn(
+                        'tw-w-full',
+                        'tw-text-center',
+                        'tw-bg-secondary-100',
+                        'hover:tw-bg-secondary-200',
+                        'tw-underline',
+                        'tw-p-2',
+                      )}
+                    >
+                      Expand {row.lineCount} lines ...
+                    </button>
+                  </DiffViewTd>
+                </tr>
+              );
+
+            return (
+              <tr key={row.key}>
+                <DiffViewTd variant="gutter" diff={row.left.type}>
+                  {row.left.lineNumber}
+                </DiffViewTd>
+
+                <DiffViewTd variant="code" diff={row.left.type}>
+                  {row.left.words.map((val, index) => {
+                    if (val.type === 'default') return val.value;
+                    return (
+                      // oxlint-disable-next-line react/no-array-index-key
+                      <DiffViewMark key={`${val.value}-${val.type}-${index}`} diff={val.type}>
+                        {val.value}
+                      </DiffViewMark>
+                    );
+                  })}
+                </DiffViewTd>
+
+                <DiffViewTd variant="gutter" diff={row.right.type}>
+                  {row.right.lineNumber}
+                </DiffViewTd>
+
+                <DiffViewTd variant="code" diff={row.right.type}>
+                  {row.right.words.map((val, index) => {
+                    if (val.type === 'default') return val.value;
+
+                    return (
+                      // oxlint-disable-next-line react/no-array-index-key
+                      <DiffViewMark key={`${val.value}-${val.type}-${index}`} diff={val.type}>
+                        {val.value}
+                      </DiffViewMark>
+                    );
+                  })}
+                </DiffViewTd>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/components/DiffView/DiffViewMark.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const variants = cva(['tw-p-0.5', 'tw-text-inherit', 'tw-inline-flex'], {
+  variants: {
+    diff: {
+      added: ['tw-bg-primary-200'],
+      removed: ['tw-bg-error-300'],
+    },
+  },
+});
+
+type Props = ComponentProps<'span'> & VariantProps<typeof variants>;
+
+export const DiffViewMark = ({ diff, children, className, ...props }: Props) => (
+  <mark {...props} className={cn(variants({ diff, className }))}>
+    {children}
+  </mark>
+);

package/src/components/DiffView/DiffViewTd.tsx

@@ -0,0 +1,84 @@
+import type { ComponentProps } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const variants = cva(
+  [
+    // reset global styles
+    '[&_pre]:tw-p-0',
+    '[&_pre]:tw-m-0',
+    '[&_pre]:tw-border-none',
+    '[&_pre]:tw-rounded-none',
+
+    'tw-align-top',
+    '[&_pre]:tw-bg-inherit',
+    '[&_pre]:tw-text-inherit',
+    '[&_pre]:tw-px-2',
+    '[&_pre]:!tw-leading-7',
+    '[&_pre]:tw-text-sm',
+    '[&_pre]:tw-whitespace-pre-wrap',
+  ],
+  {
+    defaultVariants: {
+      variant: 'default',
+      diff: 'default',
+    },
+    variants: {
+      variant: {
+        default: [],
+        gutter: ['tw-w-14', 'tw-text-right', 'tw-whitespace-nowrap', 'tw-select-none'],
+        code: [],
+      },
+      diff: {
+        default: [],
+        added: [],
+        removed: [],
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'gutter',
+        diff: 'default',
+        className: ['tw-bg-neutral-100', 'tw-text-neutral-400'],
+      },
+      {
+        variant: 'gutter',
+        diff: 'added',
+        className: ['tw-bg-primary-200', 'tw-text-primary-600'],
+      },
+      {
+        variant: 'gutter',
+        diff: 'removed',
+        className: ['tw-bg-error-200', 'tw-text-error-500'],
+      },
+      {
+        variant: 'code',
+        diff: 'default',
+        className: ['tw-bg-neutral-50', 'tw-text-neutral-800'],
+      },
+      {
+        variant: 'code',
+        diff: 'added',
+        className: ['tw-bg-primary-100'],
+      },
+      {
+        variant: 'code',
+        diff: 'removed',
+        className: ['tw-bg-error-100'],
+      },
+    ],
+  },
+);
+
+type Props = ComponentProps<'td'> & VariantProps<typeof variants>;
+
+export const DiffViewTd = ({ diff, variant = 'default', children, className, ...props }: Props) => {
+  const needsCodeFormatting = variant === 'code' || variant === 'gutter';
+
+  return (
+    <td {...props} className={cn(variants({ variant, className, diff }))}>
+      {needsCodeFormatting ? <pre>{children}</pre> : children}
+    </td>
+  );
+};

package/src/components/DiffView/DiffViewTh.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'th'> & {
+  variant?: 'default' | 'gutter';
+};
+
+export const DiffViewTh = ({ variant = 'default', children, className, ...props }: Props) => (
+  <th
+    {...props}
+    className={cn(
+      'tw-bg-white',
+      'tw-py-3',
+      'tw-border-b',
+      { 'tw-w-14': variant === 'gutter' },
+      { 'last:tw-pr-8': variant === 'default' },
+      className,
+    )}
+  >
+    {children}
+  </th>
+);

package/src/components/DiffView/index.ts

@@ -0,0 +1,11 @@
+export { DiffView } from './DiffView';
+export {
+  DiffType,
+  computeLineInformation,
+  computeDiffRows,
+  type DiffInformation,
+  type LineInformation,
+  type SideInformation,
+  type WordInformation,
+  type DiffRow,
+} from './util';

package/src/components/DiffView/util.test.ts

@@ -0,0 +1,231 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  computeDiffRows,
+  computeLineInformation,
+  type DiffRow,
+  DiffType,
+  type LineInformation,
+} from './util';
+
+const unchangedLine = (lineNumber: number, value = `line ${lineNumber}`): LineInformation => ({
+  left: { type: DiffType.DEFAULT, lineNumber, value },
+  right: { type: DiffType.DEFAULT, lineNumber, value },
+});
+
+const unchangedRows = (count: number): LineInformation[] =>
+  Array.from({ length: count }, (_, i) => unchangedLine(i + 1));
+
+const asLineRow = (row: DiffRow): Extract<DiffRow, { kind: 'line' }> => {
+  if (row.kind !== 'line') throw new Error('expected line row');
+  return row;
+};
+
+const asFoldRow = (row: DiffRow): Extract<DiffRow, { kind: 'fold' }> => {
+  if (row.kind !== 'fold') throw new Error('expected fold row');
+  return row;
+};
+
+describe('DiffType', () => {
+  it('exposes default/added/removed as string constants', () => {
+    expect(DiffType.DEFAULT).toBe('default');
+    expect(DiffType.ADDED).toBe('added');
+    expect(DiffType.REMOVED).toBe('removed');
+  });
+});
+
+describe('computeLineInformation', () => {
+  it('returns no diff lines for identical strings', () => {
+    const { lineInformation, diffLines } = computeLineInformation('a\nb\nc', 'a\nb\nc');
+
+    expect(diffLines).toEqual([]);
+    expect(lineInformation).toHaveLength(3);
+    for (const line of lineInformation) {
+      expect(line.left.type).toBe(DiffType.DEFAULT);
+      expect(line.right.type).toBe(DiffType.DEFAULT);
+      expect(line.left.value).toBe(line.right.value);
+    }
+  });
+
+  it('assigns incrementing line numbers to unchanged lines', () => {
+    const { lineInformation } = computeLineInformation('a\nb\nc', 'a\nb\nc');
+
+    expect(lineInformation.map((l) => l.left.lineNumber)).toEqual([1, 2, 3]);
+    expect(lineInformation.map((l) => l.right.lineNumber)).toEqual([1, 2, 3]);
+  });
+
+  it('trims trailing newlines before diffing so they do not show as changes', () => {
+    const { diffLines } = computeLineInformation('a\nb\n', 'a\nb');
+    expect(diffLines).toEqual([]);
+  });
+
+  it('marks a pure addition as ADDED on the right with an empty left side', () => {
+    const { lineInformation, diffLines } = computeLineInformation('a\nb', 'a\nb\nc');
+
+    expect(diffLines).toEqual([2]);
+    const added = lineInformation[2]!;
+    expect(added.right.type).toBe(DiffType.ADDED);
+    expect(added.right.value).toBe('c');
+    expect(added.right.lineNumber).toBe(3);
+    expect(added.left.type).toBeUndefined();
+    expect(added.left.lineNumber).toBeUndefined();
+  });
+
+  it('marks a pure removal as REMOVED on the left with an empty right side', () => {
+    const { lineInformation, diffLines } = computeLineInformation('a\nb\nc', 'a\nb');
+
+    expect(diffLines).toEqual([2]);
+    const removed = lineInformation[2]!;
+    expect(removed.left.type).toBe(DiffType.REMOVED);
+    expect(removed.left.value).toBe('c');
+    expect(removed.left.lineNumber).toBe(3);
+    expect(removed.right.type).toBeUndefined();
+  });
+
+  it('treats adjacent remove+add as a modification with word-level diff arrays', () => {
+    const { lineInformation, diffLines } = computeLineInformation('hello world', 'hello there');
+
+    expect(diffLines).toEqual([0]);
+    const modification = lineInformation[0]!;
+    expect(modification.left.type).toBe(DiffType.REMOVED);
+    expect(modification.right.type).toBe(DiffType.ADDED);
+    expect(Array.isArray(modification.left.value)).toBe(true);
+    expect(Array.isArray(modification.right.value)).toBe(true);
+  });
+
+  it('substitutes a blank space for an empty removed line so line numbers stay visible', () => {
+    const { lineInformation } = computeLineInformation('a\n\nb', 'a\nb');
+    const blankRemoved = lineInformation.find((l) => l.left.type === DiffType.REMOVED);
+
+    expect(blankRemoved).toBeDefined();
+    expect(blankRemoved!.left.value).toBe(' ');
+  });
+
+  it('respects ignoreWhitespace for trivial whitespace-only differences', () => {
+    const sensitive = computeLineInformation('a\n  b', 'a\nb', false);
+    const insensitive = computeLineInformation('a\n  b', 'a\nb', true);
+
+    expect(sensitive.diffLines.length).toBeGreaterThan(0);
+    expect(insensitive.diffLines).toEqual([]);
+  });
+});
+
+describe('computeDiffRows', () => {
+  const TAIL_BLOCK = Number.POSITIVE_INFINITY;
+
+  it('returns an empty array for empty input', () => {
+    expect(computeDiffRows([], [], [])).toEqual([]);
+  });
+
+  it('folds the whole tail when every line is unchanged (no diffs)', () => {
+    const rows = computeDiffRows(unchangedRows(10), [], []);
+
+    expect(rows).toHaveLength(1);
+    const fold = asFoldRow(rows[0]!);
+    expect(fold.lineCount).toBe(10);
+    expect(fold.blockStart).toBe(TAIL_BLOCK);
+  });
+
+  it('reveals every line when the tail block is expanded', () => {
+    const rows = computeDiffRows(unchangedRows(10), [], [TAIL_BLOCK]);
+
+    expect(rows).toHaveLength(10);
+    expect(rows.every((r) => r.kind === 'line')).toBe(true);
+  });
+
+  it('keeps 3 lines of context before a diff and folds earlier unchanged lines', () => {
+    // 10 unchanged + 1 modified line. Context (EXTRA_LINES=3) shows lines 7,8,9
+    // before the diff at index 10; lines 0..6 collapse into one fold row.
+    const lines: LineInformation[] = [
+      ...unchangedRows(10),
+      {
+        left: { type: DiffType.REMOVED, lineNumber: 11, value: 'old' },
+        right: { type: DiffType.ADDED, lineNumber: 11, value: 'new' },
+      },
+    ];
+
+    const rows = computeDiffRows(lines, [10], []);
+
+    expect(rows).toHaveLength(5); // 1 fold + 3 context + 1 diff
+    const fold = asFoldRow(rows[0]!);
+    expect(fold.lineCount).toBe(7);
+    expect(fold.blockStart).toBe(10);
+    expect(rows.slice(1).every((r) => r.kind === 'line')).toBe(true);
+  });
+
+  it('does not fold the lead-in context when the diff is within EXTRA_LINES of the top', () => {
+    // Diff at index 2: only 2 unchanged lines before it → no fold needed.
+    const lines: LineInformation[] = [
+      ...unchangedRows(2),
+      {
+        left: { type: DiffType.REMOVED, lineNumber: 3, value: 'old' },
+        right: { type: DiffType.ADDED, lineNumber: 3, value: 'new' },
+      },
+    ];
+
+    const rows = computeDiffRows(lines, [2], []);
+
+    expect(rows).toHaveLength(3);
+    expect(rows.every((r) => r.kind === 'line')).toBe(true);
+  });
+
+  it('expanding a block replaces the fold row with the previously hidden lines', () => {
+    const lines: LineInformation[] = [
+      ...unchangedRows(10),
+      {
+        left: { type: DiffType.REMOVED, lineNumber: 11, value: 'old' },
+        right: { type: DiffType.ADDED, lineNumber: 11, value: 'new' },
+      },
+    ];
+
+    const rows = computeDiffRows(lines, [10], [10]);
+
+    expect(rows).toHaveLength(11);
+    expect(rows.every((r) => r.kind === 'line')).toBe(true);
+  });
+
+  it('normalizes an array side.value into a words array', () => {
+    const lines: LineInformation[] = [
+      {
+        left: {
+          type: DiffType.REMOVED,
+          lineNumber: 1,
+          value: [
+            { type: DiffType.DEFAULT, lineNumber: 0, value: 'hello ' },
+            { type: DiffType.REMOVED, lineNumber: 0, value: 'world' },
+          ],
+        },
+        right: {
+          type: DiffType.ADDED,
+          lineNumber: 1,
+          value: [
+            { type: DiffType.DEFAULT, lineNumber: 0, value: 'hello ' },
+            { type: DiffType.ADDED, lineNumber: 0, value: 'there' },
+          ],
+        },
+      },
+    ];
+
+    const rows = computeDiffRows(lines, [0], []);
+
+    const row = asLineRow(rows[0]!);
+    expect(row.left.type).toBe(DiffType.REMOVED);
+    expect(row.right.type).toBe(DiffType.ADDED);
+    expect(row.left.words.map((w) => w.type)).toEqual([DiffType.DEFAULT, DiffType.REMOVED]);
+    expect(row.right.words.map((w) => w.value)).toEqual(['hello ', 'there']);
+  });
+
+  it('wraps a string side.value into a single DEFAULT word entry', () => {
+    const rows = computeDiffRows([unchangedLine(1, 'hello')], [], []);
+
+    const row = asLineRow(rows[0]!);
+    expect(row.left.words).toEqual([{ type: DiffType.DEFAULT, lineNumber: 0, value: 'hello' }]);
+    expect(row.right.words).toEqual([{ type: DiffType.DEFAULT, lineNumber: 0, value: 'hello' }]);
+  });
+
+  it('assigns stable keys derived from left/right line numbers for line rows', () => {
+    const rows = computeDiffRows(unchangedRows(2), [], [TAIL_BLOCK]);
+
+    expect(rows.map((r) => r.key)).toEqual(['1-1', '2-2']);
+  });
+});