@keboola/design 2.0.0 → 2.1.0

package/src/blocks/MultiCombobox/MultiCombobox.tsx

@@ -1,257 +0,0 @@
-import { type ComponentProps, Fragment, type ReactNode } from 'react';
-import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
-
-import { Combobox } from '../../components/Combobox';
-import type { Group, LabeledItem } from '../../components/Combobox/types';
-import {
-  defaultGroupToLabel,
-  defaultItemToDisabled,
-  defaultItemToIcon,
-  defaultItemToLabel,
-  isGroupItem,
-  isLabeledItem,
-} from '../../components/Combobox/utils';
-import { InputGroup } from '../../components/InputGroup';
-import { ChevronDown, X } from '../../icons';
-
-type ComboboxProps<Value> = BaseCombobox.Root.Props<Value, true>;
-type ComboboxInputProps = ComponentProps<typeof Combobox.Input>;
-type ComboboxInputGroupProps = ComponentProps<typeof Combobox.InputGroup>;
-type ComboboxItemProps = ComponentProps<typeof Combobox.Item>;
-type ComboboxChipsProps = ComponentProps<typeof Combobox.Chips>;
-
-type Indicator = NonNullable<ComboboxItemProps['indicator']>;
-
-/**
- * Props for `MultiCombobox`. Generic over `Value` (the item shape) and `GroupShape` (optional group wrapper).
- * Use `itemToLabel` / `itemToIcon` / `itemToDisabled` to project custom item shapes; use `filter` to override
- * the default substring matcher.
- */
-type Props<Value, GroupShape extends Group<Value> = Group<Value>> = Pick<
-  ComboboxInputProps,
-  'placeholder' | 'id'
-> &
-  Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'> &
-  Pick<
-    ComboboxProps<Value>,
-    | 'disabled'
-    | 'inputRef'
-    | 'value'
-    | 'defaultValue'
-    | 'onValueChange'
-    | 'itemToStringLabel'
-    | 'itemToStringValue'
-    | 'filter'
-  > &
-  Pick<ComboboxChipsProps, 'itemToChipLabel' | 'itemToChipColor' | 'maxVisible'> & {
-    items?: readonly (Value | GroupShape)[];
-
-    // root specific
-    allowClear?: boolean;
-    allowSelectAll?: boolean;
-    empty?: ReactNode;
-    indicator?: Indicator;
-
-    // item specific
-    itemToLabel?: (item: Value) => ReactNode;
-    itemToIcon?: (item: Value) => ReactNode;
-    itemToDisabled?: (item: Value) => boolean;
-
-    // gropu specific
-    groupToLabel?: (group: GroupShape) => ReactNode;
-  };
-
-const selectAllItem: LabeledItem = {
-  value: '__select_all__',
-  label: 'Select All',
-};
-
-const isSelectAllItem = <Value,>(item: Value) =>
-  isLabeledItem(item) && item.value === '__select_all__';
-
-/**
- * Multi-selection combobox with chip display and search. Built on Base UI Combobox.
- *
- * **When to use:** picking several items from a searchable enumerated list (filter by tags, assign labels).
- * Items render as chips above the input; `maxVisible` collapses excess into a `+N more` chip.
- * **When NOT to use:** for single selection use `Combobox`; for short enums without search use `Select`;
- * for free-form chip entry where the user types arbitrary new values use `Tagger`.
- * **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` for form integration.
- * Pass `allowSelectAll` for a sticky "Select All" item when the full enum is small.
- *
- * @see RECIPES.md#creatable-multi-combobox — for free-form-plus-enumerated patterns
- * @see RECIPES.md#filter-toolbar — for combining multi-select with other filter chips
- */
-export const MultiCombobox = <Value, GroupShape extends Group<Value> = Group<Value>>({
-  // root props
-  items: _itemsProp,
-  value: _valueProp,
-  defaultValue,
-  onValueChange,
-  itemToStringLabel,
-  itemToStringValue,
-  disabled,
-  filter: filterProp,
-  inputRef,
-
-  // input props
-  variant,
-  sizing,
-  focusVariant,
-  state,
-  placeholder,
-  allowClear,
-  id,
-  className,
-
-  // own props
-  allowSelectAll = false,
-  empty = 'No items',
-  indicator,
-
-  // own item props
-  itemToDisabled = defaultItemToDisabled,
-  itemToLabel = defaultItemToLabel,
-  itemToIcon = defaultItemToIcon,
-  groupToLabel = defaultGroupToLabel,
-  itemToChipLabel,
-  itemToChipColor,
-  maxVisible = 3,
-}: Props<Value, GroupShape>) => {
-  const itemsProp = _itemsProp ?? [];
-  const valueProp = _valueProp ?? [];
-  const contentVariant = variant === 'argo' ? 'argo' : 'default';
-  const chipVariant = variant === 'argo' ? 'pill' : 'default';
-
-  const allFlatItems = itemsProp.flatMap((item) => (isGroupItem(item) ? item.items : item));
-  const isAllSelected = allFlatItems.length === (valueProp?.length ?? 0);
-
-  const defaultFilter = BaseCombobox.useFilter({
-    multiple: true,
-    value: valueProp,
-  });
-
-  const itemsWithSelectAllItem = (() => {
-    if (!allowSelectAll) return itemsProp;
-    return [selectAllItem, ...itemsProp];
-  })();
-
-  const filter = (item: Value, query: string, itemToString?: (value: Value) => string) => {
-    // keep select allwasy visible
-    if (isSelectAllItem(item)) return true;
-
-    if (filterProp) return filterProp(item, query, itemToString);
-    return defaultFilter.contains(item, query, itemToString);
-  };
-
-  const value = (() => {
-    if (!allowSelectAll) return valueProp;
-    return isAllSelected ? [...valueProp, selectAllItem as Value] : valueProp;
-  })();
-
-  const handleValueChange: ComboboxProps<Value>['onValueChange'] = (next, event) => {
-    if (!onValueChange) return;
-
-    const hasSelectAll = next.some((item) => isSelectAllItem(item));
-    const newValue = (() => {
-      if (!allowSelectAll) return next;
-      if (!hasSelectAll) return isAllSelected ? [] : next;
-      return isAllSelected ? next.filter((item) => !isSelectAllItem(item)) : allFlatItems;
-    })();
-
-    onValueChange(newValue, event);
-  };
-
-  const renderItem = (item: Value) => {
-    return (
-      <Combobox.Item
-        value={item}
-        indicator={indicator}
-        icon={itemToIcon(item)}
-        disabled={itemToDisabled(item)}
-      >
-        {itemToLabel(item)}
-      </Combobox.Item>
-    );
-  };
-
-  return (
-    <Combobox.Root<Value, true>
-      multiple
-      items={itemsWithSelectAllItem}
-      value={value}
-      defaultValue={defaultValue}
-      filter={filter}
-      onValueChange={handleValueChange}
-      itemToStringLabel={itemToStringLabel}
-      itemToStringValue={itemToStringValue}
-      disabled={disabled}
-      inputRef={inputRef}
-    >
-      <BaseCombobox.Chips render={<Fragment />}>
-        <Combobox.InputGroup
-          variant={variant}
-          sizing={sizing}
-          state={state}
-          focusVariant={focusVariant}
-          className={className}
-        >
-          <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-wrap tw-items-center tw-gap-1.5 tw-px-4 tw-py-1.5">
-            <Combobox.Chips<Value>
-              maxVisible={maxVisible}
-              variant={chipVariant}
-              itemToChipLabel={itemToChipLabel ?? itemToLabel}
-              itemToChipColor={itemToChipColor}
-            />
-            <div className="tw-flex tw-flex-1 tw-items-center tw-gap-1">
-              <Combobox.Input
-                id={id}
-                placeholder={placeholder}
-                disabled={disabled}
-                className="tw-w-auto tw-min-w-[120px] tw-flex-1"
-              />
-              {allowClear && (
-                <InputGroup.Button asChild aria-label="Clear" disabled={disabled}>
-                  <BaseCombobox.Clear>
-                    <X className="tw-size-4" />
-                  </BaseCombobox.Clear>
-                </InputGroup.Button>
-              )}
-              <InputGroup.Button disabled={disabled} asChild aria-label="Open combobox">
-                <BaseCombobox.Trigger>
-                  <ChevronDown className="tw-size-4" />
-                </BaseCombobox.Trigger>
-              </InputGroup.Button>
-            </div>
-          </div>
-        </Combobox.InputGroup>
-      </BaseCombobox.Chips>
-      <Combobox.Content variant={contentVariant}>
-        <Combobox.Empty>{empty}</Combobox.Empty>
-        <Combobox.List>
-          {(itemOrGroup: Value | GroupShape) => {
-            if (isSelectAllItem(itemOrGroup)) {
-              return (
-                <Combobox.Item value={itemOrGroup} indicator="checkbox">
-                  Select All
-                </Combobox.Item>
-              );
-            }
-
-            if (isGroupItem(itemOrGroup)) {
-              const groupLabel = groupToLabel(itemOrGroup);
-              return (
-                <Combobox.Group items={itemOrGroup.items}>
-                  {groupLabel && <Combobox.GroupLabel>{groupLabel}</Combobox.GroupLabel>}
-                  <Combobox.GroupList>{renderItem}</Combobox.GroupList>
-                </Combobox.Group>
-              );
-            }
-
-            return renderItem(itemOrGroup);
-          }}
-        </Combobox.List>
-      </Combobox.Content>
-    </Combobox.Root>
-  );
-};

package/src/blocks/MultiCombobox/index.ts

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

package/src/blocks/NumberInput/NumberInput.stories.tsx

@@ -1,112 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Button } from '../../components/Button';
-
-import { NumberInput } from './NumberInput';
-
-type Story = StoryObj<typeof NumberInput>;
-type NumberInputProps = ComponentProps<typeof NumberInput>;
-type State = NonNullable<NumberInputProps['state']>;
-type Variant = NonNullable<NumberInputProps['variant']>;
-type Sizing = NonNullable<NumberInputProps['sizing']>;
-type FocusVariant = NonNullable<NumberInputProps['focusVariant']>;
-
-const states: State[] = ['default', 'error', 'warning'];
-const variants: Variant[] = ['primary', 'secondary', 'argo'];
-const sizings: Sizing[] = ['small', 'default', 'medium'];
-const focusVariants: FocusVariant[] = ['default', 'on', 'off'];
-
-/**
- * Specialized number input. Wraps `InputGroup` directly and converts the
- * native `valueAsNumber` to `number | null` (NaN becomes null). Works in both
- * controlled and uncontrolled modes.
- */
-export default {
-  component: NumberInput,
-  args: {
-    placeholder: 'Placeholder',
-    variant: 'primary',
-    state: 'default',
-    sizing: 'default',
-    focusVariant: 'default',
-    readOnly: false,
-    disabled: false,
-
-    onValueChange: action('onValueChange'),
-    onValueBlur: action('onValueBlur'),
-  },
-  argTypes: {
-    state: {
-      description: 'Set validation state',
-      type: { name: 'enum', value: states },
-    },
-
-    variant: {
-      defaultValue: 'primary',
-      description: 'Set Variant',
-      type: { name: 'enum', value: variants },
-    },
-
-    sizing: {
-      defaultValue: 'default',
-      description: 'Set Sizing',
-      type: { name: 'enum', value: sizings },
-    },
-
-    focusVariant: {
-      defaultValue: 'default',
-      description: 'Set Focus Variant',
-      type: { name: 'enum', value: focusVariants },
-    },
-
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-  },
-} satisfies Meta<typeof NumberInput>;
-
-export const Basic: Story = {};
-
-const ControlledDemo = (props: ComponentProps<typeof NumberInput>) => {
-  const [value, setValue] = useState<number | null>(null);
-  const handleOnValueChange = (next: number | null) => {
-    action('onValueChange')(next);
-    setValue(next);
-  };
-
-  return <NumberInput {...props} value={value} onValueChange={handleOnValueChange} />;
-};
-
-export const Controlled: Story = {
-  render: ControlledDemo,
-};
-
-const UncontrolledDemo = (props: ComponentProps<typeof NumberInput>) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const values = new FormData(event.currentTarget);
-    action('onSubmit')(Object.fromEntries(values.entries()));
-  };
-
-  return (
-    <form className="tw-flex tw-gap-2" onSubmit={handleSubmit}>
-      <NumberInput
-        {...props}
-        onValueChange={action('onValueChange')}
-        onValueBlur={action('onValueBlur')}
-      />
-      <Button type="submit">Submit</Button>
-    </form>
-  );
-};
-
-export const Uncontrolled: Story = {
-  render: UncontrolledDemo,
-  args: {
-    defaultValue: 42,
-    name: 'uncontrolled-number-input',
-  },
-};

package/src/blocks/NumberInput/NumberInput.test.tsx

@@ -1,148 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { NumberInput } from './NumberInput';
-
-const getInput = () => screen.getByPlaceholderText('number') as HTMLInputElement;
-
-describe('<NumberInput />', () => {
-  describe('controlled state', () => {
-    it('renders empty when value is null', () => {
-      render(<NumberInput placeholder="number" value={null} />);
-      expect(getInput().value).toBe('');
-    });
-
-    it('renders empty when value is undefined and no defaultValue', () => {
-      render(<NumberInput placeholder="number" />);
-      expect(getInput().value).toBe('');
-    });
-
-    it('renders the controlled value', () => {
-      render(<NumberInput placeholder="number" value={42} onValueChange={vi.fn()} />);
-      expect(getInput().value).toBe('42');
-    });
-
-    it('emits onValueChange with parsed number on input', () => {
-      const onValueChange = vi.fn();
-      render(<NumberInput placeholder="number" value={null} onValueChange={onValueChange} />);
-      fireEvent.change(getInput(), { target: { value: '7' } });
-      expect(onValueChange).toHaveBeenCalledWith(7);
-    });
-
-    it('emits onValueChange(null) when input is cleared', () => {
-      const onValueChange = vi.fn();
-      render(<NumberInput placeholder="number" value={5} onValueChange={onValueChange} />);
-      fireEvent.change(getInput(), { target: { value: '' } });
-      expect(onValueChange).toHaveBeenCalledWith(null);
-    });
-
-    it('emits onValueBlur with the current numeric value', () => {
-      const onValueBlur = vi.fn();
-      render(<NumberInput placeholder="number" value={3} onValueBlur={onValueBlur} />);
-      fireEvent.blur(getInput());
-      expect(onValueBlur).toHaveBeenCalledWith(3);
-    });
-
-    it('emits onValueBlur(null) when blurring an empty input', () => {
-      const onValueBlur = vi.fn();
-      render(<NumberInput placeholder="number" value={null} onValueBlur={onValueBlur} />);
-      fireEvent.blur(getInput());
-      expect(onValueBlur).toHaveBeenCalledWith(null);
-    });
-  });
-
-  describe('uncontrolled state', () => {
-    it('seeds the input from defaultValue', () => {
-      render(<NumberInput placeholder="number" defaultValue={5} />);
-      expect(getInput().value).toBe('5');
-    });
-
-    it('treats null defaultValue as empty', () => {
-      render(<NumberInput placeholder="number" defaultValue={null} />);
-      expect(getInput().value).toBe('');
-    });
-
-    it('propagates user typing through onValueChange', () => {
-      const onValueChange = vi.fn();
-      render(<NumberInput placeholder="number" onValueChange={onValueChange} />);
-      const input = getInput();
-      fireEvent.change(input, { target: { value: '12' } });
-      expect(input.value).toBe('12');
-      expect(onValueChange).toHaveBeenLastCalledWith(12);
-    });
-  });
-
-  describe('NaN handling', () => {
-    it('emits null (never NaN) when the input has no parseable value', () => {
-      const onValueChange = vi.fn();
-      render(<NumberInput placeholder="number" defaultValue={5} onValueChange={onValueChange} />);
-      fireEvent.change(getInput(), { target: { value: '' } });
-      expect(onValueChange).toHaveBeenCalledWith(null);
-      expect(onValueChange).not.toHaveBeenCalledWith(Number.NaN);
-    });
-  });
-
-  describe('pass-through', () => {
-    it('forwards min / max / step / disabled / readOnly / id / name to the underlying input', () => {
-      render(
-        <NumberInput
-          placeholder="number"
-          id="qty"
-          name="quantity"
-          min={1}
-          max={10}
-          step={2}
-          disabled
-          readOnly
-        />,
-      );
-      const input = getInput();
-      expect(input.id).toBe('qty');
-      expect(input.name).toBe('quantity');
-      expect(input.min).toBe('1');
-      expect(input.max).toBe('10');
-      expect(input.step).toBe('2');
-      expect(input.disabled).toBe(true);
-      expect(input.readOnly).toBe(true);
-      expect(input.type).toBe('number');
-    });
-  });
-
-  describe('forwardRef', () => {
-    it('forwards ref to the <input type="number"> element', () => {
-      let captured: HTMLInputElement | null = null;
-      render(
-        <NumberInput
-          placeholder="number"
-          ref={(node) => {
-            captured = node;
-          }}
-        />,
-      );
-      expect(captured).toBe(getInput());
-      expect(captured!.type).toBe('number');
-    });
-  });
-
-  describe('external onChange / onBlur', () => {
-    it('fires onChange alongside onValueChange', () => {
-      const onChange = vi.fn();
-      const onValueChange = vi.fn();
-      render(
-        <NumberInput placeholder="number" onChange={onChange} onValueChange={onValueChange} />,
-      );
-      fireEvent.change(getInput(), { target: { value: '9' } });
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith(9);
-    });
-
-    it('fires onBlur alongside onValueBlur', () => {
-      const onBlur = vi.fn();
-      const onValueBlur = vi.fn();
-      render(<NumberInput placeholder="number" onBlur={onBlur} onValueBlur={onValueBlur} />);
-      fireEvent.blur(getInput());
-      expect(onBlur).toHaveBeenCalledTimes(1);
-      expect(onValueBlur).toHaveBeenCalled();
-    });
-  });
-});

package/src/blocks/NumberInput/NumberInput.tsx

@@ -1,89 +0,0 @@
-import type {
-  ChangeEvent,
-  ChangeEventHandler,
-  ComponentProps,
-  ElementRef,
-  FocusEventHandler,
-  ReactNode,
-  Ref,
-} from 'react';
-
-import { InputGroup } from '../../components/InputGroup';
-
-type InputGroupProps = Pick<
-  ComponentProps<typeof InputGroup>,
-  'variant' | 'focusVariant' | 'state' | 'sizing'
->;
-
-type InputGroupInputProps = Omit<
-  ComponentProps<typeof InputGroup.Input>,
-  'value' | 'defaultValue' | 'type' | 'prefix'
->;
-
-type Props = InputGroupProps &
-  InputGroupInputProps & {
-    value?: number | null;
-    defaultValue?: number | null;
-    onValueChange?: (value: number | null) => void;
-    onValueBlur?: (value: number | null) => void;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
-  };
-
-const toNumberOrNull = (event: ChangeEvent<HTMLInputElement>) =>
-  Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
-
-export const NumberInput = ({
-  ref,
-  state,
-  variant,
-  focusVariant,
-  sizing,
-  className,
-
-  value,
-  defaultValue,
-  onValueChange,
-  onValueBlur,
-  onChange,
-  onBlur,
-
-  prefix,
-  suffix,
-
-  ...inputProps
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    onValueChange?.(toNumberOrNull(event));
-    onChange?.(event);
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    onValueBlur?.(toNumberOrNull(event));
-    onBlur?.(event);
-  };
-
-  const isControlled = value !== undefined;
-  const valueProp = isControlled ? { value: value ?? '' } : { defaultValue: defaultValue ?? '' };
-
-  return (
-    <InputGroup
-      state={state}
-      variant={variant}
-      sizing={sizing}
-      focusVariant={focusVariant}
-      className={className}
-    >
-      {prefix && <InputGroup.Addon align="inline-start">{prefix}</InputGroup.Addon>}
-      <InputGroup.Input
-        {...inputProps}
-        {...valueProp}
-        ref={ref}
-        type="number"
-        onChange={handleChange}
-        onBlur={handleBlur}
-      />
-      {suffix && <InputGroup.Addon align="inline-end">{suffix}</InputGroup.Addon>}
-    </InputGroup>
-  );
-};

package/src/blocks/NumberInput/index.ts

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