@keboola/design 2.0.1 → 3.0.0

package/src/blocks/ColorInput/ColorInput.tsx

@@ -1,171 +0,0 @@
-import { useRef, useState } from 'react';
-import type {
-  ChangeEventHandler,
-  ComponentProps,
-  ElementRef,
-  FocusEventHandler,
-  MouseEventHandler,
-  Ref,
-} from 'react';
-
-import { InputGroup } from '../../components/InputGroup';
-import { X } from '../../icons';
-import { cn, createChangeInputEvent, mergeRefs } from '../../utils';
-
-import { ColorPicker } from './ColorPicker';
-import { coerceHexInputValue, isCompleteHexColor } from './utils';
-
-type InputGroupProps = Pick<
-  ComponentProps<typeof InputGroup>,
-  'variant' | 'focusVariant' | 'state' | 'sizing'
->;
-
-type InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;
-
-type Props = InputGroupProps &
-  InputGroupInputProps & {
-    value?: string | null;
-    defaultValue?: string | null;
-    onValueChange?: (value: string) => void;
-    onValueBlur?: (value: string) => void;
-    allowClear?: boolean;
-  };
-
-export const ColorInput = ({
-  ref,
-
-  // group props
-  state,
-  variant,
-  focusVariant,
-  sizing,
-  className,
-
-  // own props
-  value: valueProp,
-  onValueChange,
-  onValueBlur,
-  onChange,
-  onBlur,
-  defaultValue,
-  allowClear = false,
-
-  // input props
-  disabled,
-  readOnly,
-  ...restInputProps
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const inputRef = useRef<ElementRef<'input'>>(null);
-
-  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
-  const isControlled = valueProp !== undefined;
-
-  const value = isControlled ? (valueProp ?? '') : internalValue;
-  const setValue = (nextValue: string) => {
-    if (!isControlled) setInternalValue(nextValue);
-    onValueChange?.(nextValue);
-  };
-
-  const canClear = allowClear && !!value && !disabled && !readOnly;
-  const swatchColor = coerceHexInputValue(value);
-  const isValidSwatch = isCompleteHexColor(swatchColor);
-
-  // Preserve raw text while the user is typing — sanitise on blur.
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    setValue(event.target.value);
-    onChange?.(event);
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    const newValue = event.target.value;
-    const sanitizedNewValue = coerceHexInputValue(newValue);
-
-    if (sanitizedNewValue !== newValue) {
-      // In controlled mode, let the parent decide whether to apply the
-      // sanitised value via `onValueChange` — don't fight its `value` prop.
-      if (!isControlled) event.target.value = sanitizedNewValue;
-      setValue(sanitizedNewValue);
-    }
-
-    onValueBlur?.(sanitizedNewValue);
-    onBlur?.(event);
-  };
-
-  const handlePickerChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    setValue(coerceHexInputValue(event.target.value));
-    onChange?.(event);
-  };
-
-  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
-    if (!inputRef.current) return;
-    inputRef.current.value = '';
-    setValue('');
-    onChange?.(createChangeInputEvent(inputRef.current));
-  };
-
-  return (
-    <InputGroup
-      state={state}
-      variant={variant}
-      sizing={sizing}
-      focusVariant={focusVariant}
-      className={className}
-    >
-      <InputGroup.Addon
-        align="inline-start"
-        className={cn(
-          { '-tw-ml-7 tw-opacity-0': !value },
-          'tw-transition-[opacity,margin]',
-          'tw-ease-linear',
-          'tw-duration-200',
-        )}
-      >
-        <div
-          style={isValidSwatch ? { background: swatchColor } : undefined}
-          className={cn(
-            'tw-size-5',
-            'tw-shrink-0',
-            'tw-rounded-sm',
-            'tw-border',
-            'tw-border-solid',
-            'tw-border-neutral-300',
-            {
-              'tw-bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]':
-                !isValidSwatch,
-            },
-          )}
-        />
-      </InputGroup.Addon>
-
-      <InputGroup.Input
-        {...restInputProps}
-        type="text"
-        ref={mergeRefs(ref ?? null, inputRef)}
-        value={value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        disabled={disabled}
-        readOnly={readOnly}
-      />
-
-      <InputGroup.Addon align="inline-end">
-        {canClear && (
-          <InputGroup.Button
-            // prevents input focus stealing
-            onMouseDown={(event) => event.preventDefault()}
-            onClick={handleClear}
-            aria-label="Clear color"
-          >
-            <X className="tw-size-4" />
-          </InputGroup.Button>
-        )}
-        <ColorPicker
-          disabled={disabled}
-          readOnly={readOnly}
-          value={value}
-          onChange={handlePickerChange}
-        />
-      </InputGroup.Addon>
-    </InputGroup>
-  );
-};

package/src/blocks/ColorInput/ColorPicker.tsx

@@ -1,42 +0,0 @@
-import { type ComponentProps, type ElementRef, useRef } from 'react';
-
-import { Pipette } from '@keboola/design/icons';
-
-import { InputGroup } from '../../components/InputGroup';
-
-import { coerceColorPickerValue, showPicker } from './utils';
-
-type Props = Omit<ComponentProps<'input'>, 'type'>;
-
-export const ColorPicker = ({ value, disabled, readOnly, ...props }: Props) => {
-  const pickerRef = useRef<ElementRef<'input'>>(null);
-
-  const handleOpenPicker = () => {
-    if (!pickerRef.current) return;
-    showPicker(pickerRef.current);
-  };
-
-  return (
-    <div className="tw-relative">
-      <input
-        {...props}
-        ref={pickerRef}
-        type="color"
-        value={coerceColorPickerValue(value)}
-        tabIndex={-1}
-        aria-hidden
-        className="tw-pointer-events-none tw-absolute tw-left-0 tw-top-full tw-size-0 tw-opacity-0"
-        disabled={disabled}
-        readOnly={readOnly}
-      />
-      <InputGroup.Button
-        onMouseDown={(event) => event.preventDefault()}
-        disabled={disabled || readOnly}
-        onClick={handleOpenPicker}
-        aria-label="Pick color"
-      >
-        <Pipette className="tw-size-4" />
-      </InputGroup.Button>
-    </div>
-  );
-};

package/src/blocks/ColorInput/index.ts

@@ -1 +0,0 @@
-export * from './ColorInput';

package/src/blocks/ColorInput/utils.test.ts

@@ -1,189 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { coerceColorPickerValue, coerceHexInputValue, isCompleteHexColor } from './utils';
-
-describe('coerceColorPickerValue', () => {
-  describe('valid hex inputs', () => {
-    it('expands 3-char hex with hash', () => {
-      expect(coerceColorPickerValue('#abc')).toBe('#aabbcc');
-    });
-
-    it('expands 3-char hex without hash', () => {
-      expect(coerceColorPickerValue('abc')).toBe('#aabbcc');
-    });
-
-    it('expands 4-char hex and drops the alpha channel', () => {
-      expect(coerceColorPickerValue('#abcd')).toBe('#aabbcc');
-    });
-
-    it('keeps 6-char hex with hash', () => {
-      expect(coerceColorPickerValue('#aabbcc')).toBe('#aabbcc');
-    });
-
-    it('keeps 6-char hex without hash', () => {
-      expect(coerceColorPickerValue('aabbcc')).toBe('#aabbcc');
-    });
-
-    it('drops alpha for 8-char hex', () => {
-      expect(coerceColorPickerValue('#aabbccdd')).toBe('#aabbcc');
-    });
-  });
-
-  describe('normalization', () => {
-    it('lowercases mixed-case hex', () => {
-      expect(coerceColorPickerValue('#AaBbCc')).toBe('#aabbcc');
-    });
-
-    it('lowercases uppercase hex', () => {
-      expect(coerceColorPickerValue('#ABCDEF')).toBe('#abcdef');
-    });
-
-    it('trims surrounding whitespace', () => {
-      expect(coerceColorPickerValue('  #abc  ')).toBe('#aabbcc');
-    });
-
-    it('trims whitespace around hex without hash', () => {
-      expect(coerceColorPickerValue('  aabbcc  ')).toBe('#aabbcc');
-    });
-  });
-
-  describe('invalid inputs fall back to #000000', () => {
-    it('rejects invalid hex characters', () => {
-      expect(coerceColorPickerValue('#xyz')).toBe('#000000');
-    });
-
-    it('rejects mixed valid/invalid characters', () => {
-      expect(coerceColorPickerValue('#aabbzz')).toBe('#000000');
-    });
-
-    it.each([
-      ['1-char', '#a'],
-      ['2-char', '#ab'],
-      ['5-char', '#abcde'],
-      ['7-char', '#abcdefa'],
-      ['9-char', '#abcdef000'],
-    ])('rejects %s hex', (_, input) => {
-      expect(coerceColorPickerValue(input)).toBe('#000000');
-    });
-
-    it('rejects empty string', () => {
-      expect(coerceColorPickerValue('')).toBe('#000000');
-    });
-
-    it('rejects whitespace-only string', () => {
-      expect(coerceColorPickerValue('   ')).toBe('#000000');
-    });
-
-    it('rejects bare hash', () => {
-      expect(coerceColorPickerValue('#')).toBe('#000000');
-    });
-  });
-
-  describe('non-string input types', () => {
-    it('handles null', () => {
-      expect(coerceColorPickerValue(null)).toBe('#000000');
-    });
-
-    it('handles undefined', () => {
-      expect(coerceColorPickerValue(undefined)).toBe('#000000');
-    });
-
-    it('handles number', () => {
-      expect(coerceColorPickerValue(0xaabbcc)).toBe('#000000');
-    });
-
-    it('handles readonly string array', () => {
-      expect(coerceColorPickerValue(['#aabbcc'])).toBe('#000000');
-    });
-  });
-});
-
-describe('coerceHexInputValue', () => {
-  it('returns empty string for null', () => {
-    expect(coerceHexInputValue(null)).toBe('');
-  });
-
-  it('returns empty string for undefined', () => {
-    expect(coerceHexInputValue(undefined)).toBe('');
-  });
-
-  it('returns empty string for empty input', () => {
-    expect(coerceHexInputValue('')).toBe('');
-  });
-
-  it('prepends # when missing', () => {
-    expect(coerceHexInputValue('aabbcc')).toBe('#aabbcc');
-  });
-
-  it('keeps valid 6-char hex with hash', () => {
-    expect(coerceHexInputValue('#aabbcc')).toBe('#aabbcc');
-  });
-
-  it('keeps valid 8-char hex (RGBA)', () => {
-    expect(coerceHexInputValue('#aabbccdd')).toBe('#aabbccdd');
-  });
-
-  it('truncates to 8 hex characters max', () => {
-    expect(coerceHexInputValue('#aabbccddee')).toBe('#aabbccdd');
-  });
-
-  it('strips invalid characters by keeping only the valid prefix', () => {
-    expect(coerceHexInputValue('#aabbzz')).toBe('#aabb');
-  });
-
-  it('returns empty string for bare hash', () => {
-    expect(coerceHexInputValue('#')).toBe('');
-  });
-
-  it('returns empty string when no valid hex digits remain', () => {
-    expect(coerceHexInputValue('zz')).toBe('');
-    expect(coerceHexInputValue('#zz')).toBe('');
-  });
-
-  it('trims surrounding whitespace', () => {
-    expect(coerceHexInputValue('  #abc  ')).toBe('#abc');
-  });
-
-  it('returns empty string for whitespace-only input', () => {
-    expect(coerceHexInputValue('   ')).toBe('');
-  });
-});
-
-describe('isCompleteHexColor', () => {
-  describe('accepts CSS-valid hex lengths', () => {
-    it.each([
-      ['3-digit', '#abc'],
-      ['4-digit (RGBA)', '#abcd'],
-      ['6-digit', '#aabbcc'],
-      ['8-digit (RGBA)', '#aabbccdd'],
-    ])('accepts %s hex', (_, input) => {
-      expect(isCompleteHexColor(input)).toBe(true);
-    });
-
-    it('accepts uppercase hex', () => {
-      expect(isCompleteHexColor('#ABCDEF')).toBe(true);
-    });
-  });
-
-  describe('rejects partial / invalid values', () => {
-    it.each([
-      ['empty', ''],
-      ['bare hash', '#'],
-      ['1-digit', '#a'],
-      ['2-digit', '#ab'],
-      ['5-digit', '#abcde'],
-      ['7-digit', '#abcdefa'],
-      ['9-digit', '#abcdef000'],
-    ])('rejects %s', (_, input) => {
-      expect(isCompleteHexColor(input)).toBe(false);
-    });
-
-    it('rejects hex without leading #', () => {
-      expect(isCompleteHexColor('aabbcc')).toBe(false);
-    });
-
-    it('rejects non-hex characters', () => {
-      expect(isCompleteHexColor('#aabbzz')).toBe(false);
-    });
-  });
-});

package/src/blocks/ColorInput/utils.ts

@@ -1,74 +0,0 @@
-import type { ComponentProps } from 'react';
-
-const HEX_CHARSET = /^[0-9a-fA-F]+$/;
-// `#` + 3, 4, 6, or 8 hex digits — every length CSS accepts as a hex color.
-const COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
-// Longest hex body CSS accepts (`#rrggbbaa` without the hash).
-const MAX_HEX_BODY_LENGTH = 8;
-// Native <input type="color"> default when fed anything unparseable.
-const PICKER_FALLBACK = '#000000';
-
-const extractHexBody = (value: unknown): string | null => {
-  if (typeof value !== 'string') return null;
-  const trimmed = value.trim();
-  if (trimmed === '') return null;
-  return trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;
-};
-
-export const isCompleteHexColor = (value: string): boolean => COMPLETE_HEX_PATTERN.test(value);
-
-// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
-export const showPicker = (input: HTMLInputElement) => {
-  const isShowPickerSupported = 'showPicker' in HTMLInputElement.prototype;
-  isShowPickerSupported ? input.showPicker() : input.click();
-};
-
-/**
- * Coerces free-form text into a partial hex color for the visible text
- * input. Allows up to 8 hex digits to support `#rrggbbaa` (RGBA / alpha).
- *
- * Behaviour:
- * - empty / null / undefined / non-string → `''`
- * - trims surrounding whitespace
- * - prepends `#` when the user types raw hex without it
- * - keeps only the leading run of valid hex digits, dropping the rest
- * - caps total length at `# + 8` hex digits
- * - returns `''` when no valid hex digits remain (e.g. bare `#`, `zz`) so
- *   the input doesn't sit on a lonely `#`
- *
- * Note: the result may be a *prefix* (e.g. `#a`, `#ab`) that is not yet a
- * valid CSS color — gate any rendering on `isCompleteHexColor`.
- */
-export const coerceHexInputValue = (value?: string | null): string => {
-  const body = extractHexBody(value);
-  if (body === null) return '';
-  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];
-  if (!validBody) return '';
-  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;
-};
-
-/**
- * Coerces any value into the strict lowercase `#rrggbb` form required by the
- * native `<input type="color">`. Anything the picker can't render is
- * collapsed to `#000000`.
- *
- * - 3-digit shorthand (`#abc`) → expanded to 6 digits (`#aabbcc`)
- * - 4/8-digit RGBA → alpha channel is dropped
- * - invalid characters, wrong length, or non-string types → `#000000`
- *
- * The native picker silently lowercases its value; we lowercase here too so
- * controlled consumers see the same string round-trip.
- */
-export const coerceColorPickerValue = (value: ComponentProps<'input'>['value'] | null) => {
-  const body = extractHexBody(value);
-  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;
-
-  if (body.length === 3 || body.length === 4) {
-    const [r, g, b] = body;
-    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
-  }
-  if (body.length === 6 || body.length === 8) {
-    return `#${body.slice(0, 6).toLowerCase()}`;
-  }
-  return PICKER_FALLBACK;
-};

package/src/blocks/EmptyConfigurationActionCard/EmptyConfigurationActionCard.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../../components/Button';
-
-import { EmptyConfigurationActionCard } from './EmptyConfigurationActionCard';
-
-type Story = StoryObj<typeof EmptyConfigurationActionCard>;
-
-export default {
-  component: EmptyConfigurationActionCard,
-  args: {
-    title: 'Rows',
-    children: (
-      <>
-        <p>No rows created.</p>
-        <Button onClick={() => {}}>Add Row</Button>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Empty card component for configuration detail, centers children in Chrome and Safari.',
-      },
-    },
-  },
-} satisfies Meta<typeof EmptyConfigurationActionCard>;
-
-export const Basic: Story = {};

package/src/blocks/EmptyConfigurationActionCard/EmptyConfigurationActionCard.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { Card } from '../../components/Card';
-
-type Props = {
-  title: string;
-  children: ReactNode;
-  className?: string;
-};
-
-export const EmptyConfigurationActionCard = ({ title, children, className }: Props) => {
-  return (
-    <Card className={className}>
-      <Card.Header>
-        <Card.Title>{title}</Card.Title>
-      </Card.Header>
-      <Card.Content className="tw-flex tw-flex-col tw-items-center">{children}</Card.Content>
-    </Card>
-  );
-};

package/src/blocks/EmptyConfigurationActionCard/index.ts

@@ -1 +0,0 @@
-export * from './EmptyConfigurationActionCard';

package/src/blocks/EmptyState/EmptyState.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../../components/Button';
-import { Bell, List, Search, Table } from '../../icons';
-
-import { EmptyState } from './EmptyState';
-
-type Story = StoryObj<typeof EmptyState>;
-
-export default {
-  component: EmptyState,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Empty state block for use when a list, table, or search returns no results. Slots compose existing `Button` and `Icon`. Supports `default` and `compact` variants. Default icon color is `tw-text-muted-foreground` — pass `className` on `EmptyState.Icon` to override.',
-      },
-    },
-  },
-} satisfies Meta<typeof EmptyState>;
-
-export const ListEmpty: Story = {
-  name: 'List empty',
-  render: () => (
-    <EmptyState>
-      <EmptyState.Icon>
-        <List />
-      </EmptyState.Icon>
-      <EmptyState.Title>No items yet</EmptyState.Title>
-      <EmptyState.Description>
-        Get started by creating your first item. It will appear here once added.
-      </EmptyState.Description>
-      <EmptyState.Actions>
-        <Button onClick={() => {}}>Create item</Button>
-      </EmptyState.Actions>
-    </EmptyState>
-  ),
-};
-
-export const TableEmpty: Story = {
-  name: 'Table empty',
-  render: () => (
-    <EmptyState>
-      <EmptyState.Icon>
-        <Table />
-      </EmptyState.Icon>
-      <EmptyState.Title>No rows found</EmptyState.Title>
-      <EmptyState.Description>
-        This table has no rows. Add your first row to get started.
-      </EmptyState.Description>
-      <EmptyState.Actions>
-        <Button onClick={() => {}}>Add row</Button>
-        <Button variant="outline" onClick={() => {}}>
-          Import data
-        </Button>
-      </EmptyState.Actions>
-    </EmptyState>
-  ),
-};
-
-export const SearchNoResults: Story = {
-  name: 'Search — no results',
-  render: () => (
-    <EmptyState>
-      <EmptyState.Icon>
-        <Search />
-      </EmptyState.Icon>
-      <EmptyState.Title>No results found</EmptyState.Title>
-      <EmptyState.Description>
-        We couldn&apos;t find anything matching your search. Try a different query or clear your
-        filters.
-      </EmptyState.Description>
-      <EmptyState.Actions>
-        <Button variant="outline" onClick={() => {}}>
-          Clear search
-        </Button>
-      </EmptyState.Actions>
-    </EmptyState>
-  ),
-};
-
-export const CompactListEmpty: Story = {
-  name: 'Compact — list empty',
-  render: () => (
-    <EmptyState variant="compact">
-      <EmptyState.Icon variant="compact">
-        <Bell />
-      </EmptyState.Icon>
-      <EmptyState.Title variant="compact">No notifications</EmptyState.Title>
-      <EmptyState.Description variant="compact">You&apos;re all caught up!</EmptyState.Description>
-    </EmptyState>
-  ),
-};