@keboola/design 1.0.0

package/src/components/CollapsiblePanel.tsx

@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { cva } from 'class-variance-authority';
+
+import { Icon } from '../components/Icon';
+import { keyCodes } from '../constants/keyCodes';
+import { cn } from '../utils';
+
+import { Collapse } from './Collapse';
+
+const headerVariants = cva(
+  'tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-rounded tw-px-4 tw-py-2.5 tw-text-sm tw-text-neutral-400',
+  {
+    variants: {
+      variant: {
+        default: 'tw-bg-neutral-100',
+        white: 'tw-bg-white',
+      },
+      isDisabled: {
+        true: 'tw-cursor-not-allowed tw-opacity-50',
+        false: '',
+      },
+      hasEnforcedState: {
+        true: '',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        isDisabled: false,
+        hasEnforcedState: false,
+        class: 'tw-cursor-pointer hover:tw-text-secondary-500',
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      isDisabled: false,
+      hasEnforcedState: false,
+    },
+  },
+);
+
+type Props = {
+  header: ReactNode;
+  isDisabled?: boolean;
+  defaultExpanded?: boolean;
+  className?: string;
+  bodyClassName?: string;
+  headerClassName?: string;
+  isOpen?: boolean;
+  onToggle?: (event?: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+  variant?: 'default' | 'white';
+  children: ReactNode;
+};
+
+export const CollapsiblePanel = ({
+  header,
+  className,
+  bodyClassName,
+  headerClassName,
+  defaultExpanded = false,
+  isDisabled = false,
+  children,
+  isOpen,
+  onToggle,
+  variant = 'default',
+}: Props) => {
+  const [isUncontrolledOpen, setIsUncontrolledOpen] = useState(defaultExpanded);
+  const open = isOpen ?? isUncontrolledOpen;
+  const hasEnforcedState = isOpen !== undefined && onToggle === undefined;
+
+  const handleCollapse = (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => {
+    if (event) {
+      event.stopPropagation();
+    }
+    if (!isDisabled) {
+      setIsUncontrolledOpen(!isUncontrolledOpen);
+    }
+  };
+
+  const handleClick = (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => {
+    if (onToggle) {
+      onToggle(e);
+      return;
+    }
+    handleCollapse(e);
+  };
+
+  const handleKeyUp = (e: KeyboardEvent<HTMLDivElement>) => {
+    if ([keyCodes.ENTER, keyCodes.SPACE].includes(e.key)) {
+      handleClick(e);
+    }
+  };
+
+  return (
+    <Collapse
+      open={open}
+      className={cn(
+        'tw-rounded !tw-border !tw-border-solid !tw-border-neutral-200 tw-bg-white',
+        className,
+      )}
+      header={
+        <div
+          className={cn(headerVariants({ variant, isDisabled, hasEnforcedState }), headerClassName)}
+          {...(!hasEnforcedState &&
+            !isDisabled && {
+              role: 'button',
+              tabIndex: 0,
+              onClick: handleClick,
+              onKeyUp: handleKeyUp,
+            })}
+        >
+          <div className="tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-py-px tw-text-sm tw-font-medium tw-text-neutral-800">
+            {header}
+          </div>
+          {!isDisabled && (
+            <div className="tw-ml-auto tw-shrink-0">
+              <Icon
+                icon="chevron-down"
+                className={cn('tw-text-xs group-data-[state=open]:tw-rotate-180')}
+              />
+            </div>
+          )}
+        </div>
+      }
+    >
+      <div className={cn('tw-px-4 tw-py-3', bodyClassName)}>{children}</div>
+    </Collapse>
+  );
+};

package/src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,426 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+import { useState } from 'storybook/internal/preview-api';
+
+import { Combobox } from './Combobox';
+import type { Group, LabeledItem } from './types';
+
+type ComboboxProps = ComponentProps<typeof Combobox>;
+type Variant = NonNullable<ComboboxProps['variant']>;
+type State = NonNullable<ComboboxProps['state']>;
+type Sizing = NonNullable<ComboboxProps['sizing']>;
+type FocusVariant = NonNullable<ComboboxProps['focusVariant']>;
+type Indicator = NonNullable<ComboboxProps['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<
+  ComboboxProps,
+  | 'variant'
+  | 'focusVariant'
+  | 'state'
+  | 'sizing'
+  | 'placeholder'
+  | 'empty'
+  | 'allowClear'
+  | 'className'
+  | 'disabled'
+  | 'indicator'
+  | 'allowCreate'
+>;
+
+export default {
+  component: Combobox,
+  args: {
+    variant: 'primary',
+    state: 'default',
+    sizing: 'default',
+    focusVariant: 'default',
+    disabled: false,
+    allowClear: false,
+    placeholder: 'Placeholder',
+    className: 'tw-w-96',
+    indicator: 'checkbox',
+    allowCreate: false,
+  },
+  argTypes: {
+    empty: {
+      control: 'text',
+      description: 'Content to render when no items are available',
+    },
+    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>;
+
+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' },
+];
+
+export const LabeledItems: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<LabeledItem | null>(null);
+
+    return (
+      <Combobox
+        {...args}
+        items={fruits}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+      />
+    );
+  },
+};
+
+export const StringItems: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string | null>(null);
+
+    return (
+      <Combobox
+        {...args}
+        items={['apple', 'banana', 'cherry', 'elderberry', 'fig']}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        itemToLabel={(item) => item.toLocaleUpperCase()}
+      />
+    );
+  },
+};
+
+export const NumberItems: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<number | null>(null);
+    return (
+      <Combobox
+        {...args}
+        items={[1, 2, 3, 4, 5]}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+      />
+    );
+  },
+};
+
+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 | null>(null);
+    return (
+      <Combobox
+        {...args}
+        items={tables}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        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 | null>(null);
+
+    return (
+      <Combobox
+        {...args}
+        items={groupedLabeled}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        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 | null>(null);
+
+    return (
+      <Combobox
+        {...args}
+        items={groupedStrings}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        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 | null>(null);
+
+    return (
+      <Combobox
+        {...args}
+        items={groupedNumbers}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        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 | null>(null);
+
+    return (
+      <Combobox
+        {...args}
+        items={groupedTables}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        itemToStringLabel={(item) => item.name}
+        itemToLabel={(item) => item.name}
+        itemToIcon={() => 'table-cells'}
+        groupToLabel={(group) => group.label}
+      />
+    );
+  },
+};
+
+export const CreatableLabeledItemsGrouped: Story = {
+  args: { allowCreate: true },
+  render: (args) => {
+    const [value, setValue] = useState<LabeledItem | null>(null);
+    return (
+      <Combobox
+        {...args}
+        items={groupedLabeled}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        groupToLabel={(group) => group.label}
+      />
+    );
+  },
+};
+
+export const CreatableLabeledItems: Story = {
+  args: { allowCreate: true },
+  render: (args) => {
+    const [value, setValue] = useState<LabeledItem | null>(null);
+    return (
+      <Combobox
+        {...args}
+        items={fruits}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+      />
+    );
+  },
+};
+
+export const CreatableArbitraryItems: Story = {
+  args: { allowCreate: true },
+  render: (args) => {
+    const [value, setValue] = useState<Table | null>(null);
+    return (
+      <Combobox<Table>
+        {...args}
+        items={tables}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+        itemToStringLabel={(item) => item.name}
+        itemToLabel={(item) => item.name}
+        itemToIcon={() => 'table-cells'}
+        queryToCreateValue={(query) => ({
+          id: query.toLowerCase().replace(/\s+/g, '-'),
+          name: query,
+        })}
+      />
+    );
+  },
+};
+
+export const CreatableStringItems: Story = {
+  args: { allowCreate: true },
+  render: (args) => {
+    const stringItems = fruits.map((f) => f.value);
+    const [value, setValue] = useState<string | null>(null);
+    return (
+      <Combobox<string>
+        {...args}
+        items={stringItems}
+        value={value}
+        onValueChange={(val) => {
+          action('onValueChange')(val);
+          setValue(val);
+        }}
+      />
+    );
+  },
+};

package/src/components/Combobox/Combobox.test.tsx

@@ -0,0 +1,165 @@
+import { useState } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from 'storybook/test';
+import { describe, expect, it } from 'vitest';
+
+import { Combobox } from './Combobox';
+import type { LabeledItem } from './types';
+
+const fruits: LabeledItem[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+];
+
+const Harness = (props: { allowCreate?: boolean }) => {
+  const [value, setValue] = useState<LabeledItem | null>(null);
+  return (
+    <Combobox
+      items={fruits}
+      value={value}
+      onValueChange={setValue}
+      allowCreate={props.allowCreate}
+      placeholder="pick"
+    />
+  );
+};
+
+describe('<Combobox/> creatable', () => {
+  it('input shows label when selecting an existing item (no prior typing)', async () => {
+    render(<Harness allowCreate />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+
+    await userEvent.click(input);
+    const appleOption = await screen.findByRole('option', { name: /Apple/i });
+    await userEvent.click(appleOption);
+
+    await waitFor(() => {
+      expect(input.value).toBe('Apple');
+    });
+  });
+
+  it('input shows label when selecting an existing item after typing to filter', async () => {
+    render(<Harness allowCreate />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+
+    await userEvent.click(input);
+    await userEvent.type(input, 'App');
+    const appleOption = await screen.findByRole('option', { name: /Apple/i });
+    await userEvent.click(appleOption);
+
+    await waitFor(() => {
+      expect(input.value).toBe('Apple');
+    });
+  });
+
+  it('input shows label when selecting an existing item without allowCreate', async () => {
+    render(<Harness />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+
+    await userEvent.click(input);
+    const appleOption = await screen.findByRole('option', { name: /Apple/i });
+    await userEvent.click(appleOption);
+
+    await waitFor(() => {
+      expect(input.value).toBe('Apple');
+    });
+  });
+
+  it('input reflects each typed character without lag', async () => {
+    render(<Harness allowCreate />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+
+    await userEvent.click(input);
+    await userEvent.type(input, 'A');
+    expect(input.value).toBe('A');
+
+    await userEvent.type(input, 'p');
+    expect(input.value).toBe('Ap');
+
+    await userEvent.type(input, 'p');
+    expect(input.value).toBe('App');
+  });
+
+  it('shows label for controlled value that is non-null on initial render', async () => {
+    const Controlled = () => {
+      const [value, setValue] = useState<LabeledItem | null>(fruits[0] ?? null); // pre-selected Apple
+      return (
+        <Combobox
+          items={fruits}
+          value={value}
+          onValueChange={setValue}
+          placeholder="pick"
+          allowCreate
+        />
+      );
+    };
+    render(<Controlled />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+
+    // The input should immediately show "Apple" on mount because value is controlled
+    await waitFor(() => {
+      expect(input.value).toBe('Apple');
+    });
+  });
+
+  it('updates input when controlled value changes externally', async () => {
+    const Controlled = ({ external }: { external: LabeledItem | null }) => (
+      <Combobox
+        items={fruits}
+        value={external}
+        onValueChange={() => {}}
+        placeholder="pick"
+        allowCreate
+      />
+    );
+    const { rerender } = render(<Controlled external={null} />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+    expect(input.value).toBe('');
+
+    rerender(<Controlled external={fruits[1] ?? null} />);
+    await waitFor(() => {
+      expect(input.value).toBe('Banana');
+    });
+  });
+
+  it('creatable: input shows the raw query (not the internal prefix) after creating', async () => {
+    render(<Harness allowCreate />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+
+    await userEvent.click(input);
+    await userEvent.type(input, 'Mango');
+
+    const createOption = await screen.findByRole('option', { name: /Create "Mango"/i });
+    await userEvent.click(createOption);
+
+    await waitFor(() => {
+      expect(input.value).toBe('Mango');
+    });
+    // Must never contain the internal CREATABLE_VALUE_PREFIX.
+    expect(input.value).not.toContain('__creatable__');
+  });
+
+  it('exactly mirrors the Creatable storybook story flow', async () => {
+    render(<Harness allowCreate />);
+    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
+
+    // 1. Initial state — empty input
+    expect(input.value).toBe('');
+
+    // 2. Open popup by clicking
+    await userEvent.click(input);
+
+    // 3. Type to filter
+    await userEvent.type(input, 'Apple');
+    expect(input.value).toBe('Apple');
+
+    // 4. Click the existing Apple option
+    const appleOption = await screen.findByRole('option', { name: /^Apple$/i });
+    await userEvent.click(appleOption);
+
+    // 5. Input should show "Apple"
+    await waitFor(() => {
+      expect(input.value).toBe('Apple');
+    });
+  });
+});