@keboola/design 1.0.0

package/src/blocks/MultiCombobox/MultiCombobox.stories.tsx

@@ -0,0 +1,324 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'storybook/internal/preview-api';
+
+import type { Group, LabeledItem } from '../../components/Combobox/types';
+
+import { MultiCombobox } from './MultiCombobox';
+
+type MultiComboboxProps = ComponentProps<typeof MultiCombobox>;
+type Variant = NonNullable<MultiComboboxProps['variant']>;
+type State = NonNullable<MultiComboboxProps['state']>;
+type Sizing = NonNullable<MultiComboboxProps['sizing']>;
+type FocusVariant = NonNullable<MultiComboboxProps['focusVariant']>;
+type Indicator = NonNullable<MultiComboboxProps['indicator']>;
+
+const variants: Variant[] = ['primary', 'secondary', 'argo'];
+const states: State[] = ['default', 'error', 'warning'];
+const sizings: Sizing[] = ['default', 'small', 'medium'];
+const focusVariants: FocusVariant[] = ['default', 'on', 'off'];
+const indicators: Indicator[] = ['checkbox', 'check'];
+
+type StoryArgs = Pick<
+  MultiComboboxProps,
+  | 'variant'
+  | 'focusVariant'
+  | 'state'
+  | 'allowClear'
+  | 'allowSelectAll'
+  | 'placeholder'
+  | 'sizing'
+  | 'disabled'
+  | 'className'
+  | 'indicator'
+>;
+
+/**
+ * Multi-select variant of `Combobox`. Same item shape inference and accessor
+ * contract — `value` / `onValueChange` switch to arrays.
+ */
+const meta = {
+  component: MultiCombobox,
+  args: {
+    variant: 'primary',
+    state: 'default',
+    sizing: 'default',
+    focusVariant: 'default',
+    disabled: false,
+    allowClear: false,
+    placeholder: 'Placeholder',
+    className: 'tw-w-96',
+    indicator: 'checkbox',
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: variants,
+      description: '`InputGroup` visual variant',
+    },
+    indicator: {
+      control: 'radio',
+      options: indicators,
+    },
+    state: {
+      control: 'radio',
+      options: states,
+      description: 'Validation state',
+    },
+    sizing: {
+      control: 'radio',
+      options: sizings,
+      description: 'Input height',
+    },
+    focusVariant: {
+      control: 'radio',
+      options: focusVariants,
+      description: 'Focus-ring behaviour',
+    },
+    disabled: { control: 'boolean' },
+    allowClear: {
+      control: 'boolean',
+      description: 'Render a clear button while a value is selected',
+    },
+    placeholder: { control: 'text' },
+  },
+  parameters: { layout: 'centered' },
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+
+type Story = StoryObj<StoryArgs>;
+
+const fruits: LabeledItem[] = [
+  { value: 'apple', label: 'Apple', icon: 'table' },
+  { value: 'banana', label: 'Banana', icon: 'table' },
+  { value: 'cherry', label: 'Cherry', icon: 'table' },
+  { value: 'elderberry', label: 'Elderberry', icon: 'table' },
+  { value: 'fig', label: 'Fig', icon: 'table' },
+  {
+    value: 'long-pineapple',
+    label: 'Sun-Ripened Hawaiian Golden Sweet Pineapple Slices',
+    icon: 'table',
+  },
+  {
+    value: 'long-watermelon',
+    label: 'Seedless Crimson Sweet Watermelon From Local Organic Farms',
+    icon: 'table',
+  },
+  {
+    value: 'long-dragonfruit',
+    label: 'Vietnamese Red-Fleshed Dragonfruit With Edible Black Sesame Seeds',
+    icon: 'table',
+  },
+];
+
+export const LabeledItems: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<LabeledItem[]>([]);
+
+    return <MultiCombobox {...args} items={fruits} value={value} onValueChange={setValue} />;
+  },
+};
+
+export const StringItems: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+      <MultiCombobox
+        {...args}
+        items={['apple', 'banana', 'cherry', 'elderberry', 'fig']}
+        value={value}
+        onValueChange={setValue}
+        itemToLabel={(item) => item.toLocaleUpperCase()}
+      />
+    );
+  },
+};
+
+export const NumberItems: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<number[]>([]);
+    return (
+      <MultiCombobox {...args} items={[1, 2, 3, 4, 5]} value={value} onValueChange={setValue} />
+    );
+  },
+};
+
+type Table = { name: string; id: string };
+const tables: Table[] = [
+  { id: 'apple', name: 'Apple' },
+  { id: 'banana', name: 'Banana' },
+  { id: 'cherry', name: 'Cherry' },
+  { id: 'elderberry', name: 'Elderberry' },
+  { id: 'fig', name: 'Fig' },
+];
+
+export const ArbitraryItems: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<Table[]>([]);
+    return (
+      <MultiCombobox
+        {...args}
+        items={tables}
+        value={value}
+        onValueChange={setValue}
+        itemToStringLabel={(item) => item.name}
+        itemToLabel={(item) => item.name}
+        itemToIcon={() => 'table-cells'}
+      />
+    );
+  },
+};
+
+const groupedLabeled: (Group<LabeledItem> & { label: string })[] = [
+  {
+    label: 'Citrus',
+    items: [
+      { value: 'orange', label: 'Orange' },
+      { value: 'lemon', label: 'Lemon' },
+      { value: 'lime', label: 'Lime' },
+    ],
+  },
+  {
+    label: 'Berries',
+    items: [
+      { value: 'strawberry', label: 'Strawberry' },
+      { value: 'blueberry', label: 'Blueberry' },
+      { value: 'raspberry', label: 'Raspberry' },
+    ],
+  },
+  {
+    label: 'Tropical',
+    items: [
+      { value: 'mango', label: 'Mango' },
+      { value: 'pineapple', label: 'Pineapple' },
+      { value: 'papaya', label: 'Papaya' },
+    ],
+  },
+];
+
+export const LabeledItemGrouped: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<LabeledItem[]>([]);
+
+    return (
+      <MultiCombobox
+        {...args}
+        items={groupedLabeled}
+        value={value}
+        onValueChange={setValue}
+        groupToLabel={(group) => group.label}
+      />
+    );
+  },
+};
+
+const groupedStrings: (Group<string> & { label: string })[] = [
+  {
+    label: 'Citrus',
+    items: ['orange', 'lemon', 'lime'],
+  },
+  {
+    label: 'Berries',
+    items: ['strawberry', 'blueberry', 'raspberry'],
+  },
+  {
+    label: 'Tropical',
+    items: ['mango', 'pineapple', 'papaya'],
+  },
+];
+
+export const StringItemsGrouped: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+      <MultiCombobox
+        {...args}
+        items={groupedStrings}
+        value={value}
+        onValueChange={setValue}
+        itemToLabel={(item) => item.toLocaleUpperCase()}
+        groupToLabel={(group) => group.label}
+      />
+    );
+  },
+};
+
+const groupedNumbers: (Group<number> & { label: string })[] = [
+  {
+    label: 'Small',
+    items: [1, 2, 3],
+  },
+  {
+    label: 'Medium',
+    items: [10, 20, 30],
+  },
+  {
+    label: 'Large',
+    items: [100, 200, 300],
+  },
+];
+
+export const NumberItemsGrouped: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<number[]>([]);
+
+    return (
+      <MultiCombobox
+        {...args}
+        items={groupedNumbers}
+        value={value}
+        onValueChange={setValue}
+        groupToLabel={(group) => group.label}
+      />
+    );
+  },
+};
+
+const groupedTables: (Group<Table> & { label: string })[] = [
+  {
+    label: 'Citrus',
+    items: [
+      { id: 'orange', name: 'Orange' },
+      { id: 'lemon', name: 'Lemon' },
+      { id: 'lime', name: 'Lime' },
+    ],
+  },
+  {
+    label: 'Berries',
+    items: [
+      { id: 'strawberry', name: 'Strawberry' },
+      { id: 'blueberry', name: 'Blueberry' },
+      { id: 'raspberry', name: 'Raspberry' },
+    ],
+  },
+  {
+    label: 'Tropical',
+    items: [
+      { id: 'mango', name: 'Mango' },
+      { id: 'pineapple', name: 'Pineapple' },
+      { id: 'papaya', name: 'Papaya' },
+    ],
+  },
+];
+
+export const ArbitraryItemsGrouped: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<Table[]>([]);
+
+    return (
+      <MultiCombobox
+        {...args}
+        items={groupedTables}
+        value={value}
+        onValueChange={setValue}
+        itemToStringLabel={(item) => item.name}
+        itemToLabel={(item) => item.name}
+        itemToIcon={() => 'table-cells'}
+        groupToLabel={(group) => group.label}
+      />
+    );
+  },
+};

package/src/blocks/MultiCombobox/MultiCombobox.tsx

@@ -0,0 +1,241 @@
+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 type { Icon } from '../../components/Icon';
+import { InputGroup } from '../../components/InputGroup';
+
+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 IconName = ComponentProps<typeof Icon>['icon'];
+type Indicator = NonNullable<ComboboxItemProps['indicator']>;
+
+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) => IconName | undefined;
+    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__';
+
+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 icon="xmark" aria-label="Clear" disabled={disabled}>
+                  <BaseCombobox.Clear />
+                </InputGroup.Button>
+              )}
+              <InputGroup.Button
+                disabled={disabled}
+                asChild
+                icon="chevron-down"
+                aria-label="Open combobox"
+              >
+                <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

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

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

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