@keboola/design 2.0.1 → 2.1.0

package/src/components/Command/CommandList.tsx

@@ -1,32 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-
-import { cn } from '../../utils';
-import { ScrollArea } from '../ScrollArea';
-
-type Props = ComponentProps<typeof CommandPrimitive.List> &
-  Pick<ComponentProps<typeof ScrollArea>, 'viewPortClassName'>;
-
-export const CommandList = ({
-  ref,
-  className,
-  children,
-  viewPortClassName,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <ScrollArea
-    ref={ref}
-    className={cn(
-      'group-data-[variant=argo]/command:tw-px-4',
-      'group-data-[variant=argo]/command:tw-pb-4',
-      className,
-    )}
-    viewPortClassName={cn(
-      '[&_[cmdk-list-sizer]]:tw-flex',
-      '[&_[cmdk-list-sizer]]:tw-flex-col',
-      viewPortClassName,
-    )}
-  >
-    <CommandPrimitive.List {...props}>{children}</CommandPrimitive.List>
-  </ScrollArea>
-);

package/src/components/Command/CommandSeparator.tsx

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

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

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

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

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

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

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

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

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

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

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

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