@keboola/design 1.0.0

package/src/blocks/SearchInput/SearchInput.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
+
+import { Icon } from '../../components/Icon';
+import { InputGroup } from '../../components/InputGroup';
+import { debounce } 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;
+    onClear?: () => void;
+    allowClear?: boolean;
+    disableDebounce?: boolean;
+    debounceDelay?: number;
+  };
+
+export const SearchInput = ({
+  ref,
+
+  // group props
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+
+  // own props
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  onClear,
+  allowClear = false,
+  disableDebounce = false,
+  debounceDelay = 300,
+
+  // input props
+  disabled,
+  readOnly,
+  ...restInputProps
+}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
+  const [internalValue, setInternalValue] = useState<string>(
+    valueProp != null ? valueProp : (defaultValue ?? ''),
+  );
+
+  // Tracks whether a debounced call is pending so the controlled-value sync
+  // effect doesn't overwrite characters the user typed during the debounce window.
+  const debounceInFlightRef = useRef(false);
+  const cancelRef = useRef<() => void>(() => {});
+
+  const debouncedOnValueChange = useMemo(() => {
+    if (!onValueChange || disableDebounce) {
+      cancelRef.current = () => {};
+      return onValueChange;
+    }
+    const d = debounce((val: string) => {
+      debounceInFlightRef.current = false;
+      onValueChange(val);
+    }, debounceDelay);
+    cancelRef.current = d.cancel;
+    return d;
+  }, [onValueChange, disableDebounce, debounceDelay]);
+
+  // Cancel any pending debounced call when the debounced fn changes or on unmount.
+  useEffect(() => {
+    return () => cancelRef.current();
+  }, [debouncedOnValueChange]);
+
+  // Sync controlled value — but skip while a debounced call is in flight to
+  // avoid snapping the input back to the old value mid-typing.
+  useEffect(() => {
+    if (valueProp == null) return;
+    if (debounceInFlightRef.current) return;
+    setInternalValue(valueProp);
+  }, [valueProp]);
+
+  const canClear = allowClear && !!internalValue && !disabled && !readOnly;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const val = event.target.value;
+    setInternalValue(val);
+    if (!disableDebounce && debouncedOnValueChange) debounceInFlightRef.current = true;
+    debouncedOnValueChange?.(val);
+    onChange?.(event);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    onValueBlur?.(event.target.value);
+    onBlur?.(event);
+  };
+
+  const handleClear = () => {
+    cancelRef.current();
+    debounceInFlightRef.current = false;
+    setInternalValue('');
+    onValueChange?.('');
+    onClear?.();
+  };
+
+  return (
+    <InputGroup
+      state={state}
+      variant={variant}
+      sizing={sizing}
+      focusVariant={focusVariant}
+      className={className}
+    >
+      <InputGroup.Addon align="inline-start">
+        <Icon icon="magnifying-glass" className="tw-text-muted-foreground" />
+      </InputGroup.Addon>
+
+      <InputGroup.Input
+        {...restInputProps}
+        ref={ref}
+        value={internalValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+
+      {canClear && (
+        <InputGroup.Addon align="inline-end">
+          <InputGroup.Button
+            icon="xmark"
+            aria-label="Clear search"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={handleClear}
+          />
+        </InputGroup.Addon>
+      )}
+    </InputGroup>
+  );
+};

package/src/blocks/SearchInput/index.ts

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

package/src/blocks/SearchInputWithNavigation/SearchInputWithNavigation.stories.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SearchInputWithNavigation } from './SearchInputWithNavigation';
+
+type SearchInputWithNavigationProps = ComponentProps<typeof SearchInputWithNavigation>;
+
+const SearchInputWithNavigationDemo = (props: Partial<SearchInputWithNavigationProps>) => {
+  const [value, setValue] = useState('');
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+  const totalResults = 30;
+
+  const handleNavigateNext = () => {
+    setCurrentIndex((prev) => {
+      if (prev === null) return 1;
+      return prev >= totalResults ? 1 : prev + 1;
+    });
+  };
+
+  const handleNavigatePrevious = () => {
+    setCurrentIndex((prev) => {
+      if (prev === null) return totalResults;
+      return prev <= 1 ? totalResults : prev - 1;
+    });
+  };
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+    if (newValue === '') {
+      setCurrentIndex(null);
+    } else if (totalResults > 0 && currentIndex === null) {
+      setCurrentIndex(1);
+    }
+  };
+
+  const handleClear = () => {
+    setValue('');
+    setCurrentIndex(null);
+  };
+
+  return (
+    <SearchInputWithNavigation
+      {...props}
+      value={value}
+      onValueChange={handleValueChange}
+      currentIndex={currentIndex}
+      totalResults={totalResults}
+      onNavigateNext={handleNavigateNext}
+      onNavigatePrevious={handleNavigatePrevious}
+      onClear={handleClear}
+    />
+  );
+};
+
+export default {
+  component: SearchInputWithNavigation,
+  render: SearchInputWithNavigationDemo,
+  args: {
+    placeholder: 'Search...',
+    variant: 'secondary',
+  },
+} satisfies Meta<typeof SearchInputWithNavigation>;
+
+type Story = StoryObj<typeof SearchInputWithNavigation>;
+
+export const WithResults: Story = {};
+
+export const PrimaryVariant: Story = {
+  args: {
+    variant: 'primary',
+  },
+};

package/src/blocks/SearchInputWithNavigation/SearchInputWithNavigation.tsx

@@ -0,0 +1,89 @@
+import type { ComponentProps, KeyboardEvent, Ref } from 'react';
+
+import { Button, ButtonGroup, cn, Icon, Separator, TextInput } from '@keboola/design';
+
+import { keyCodes } from '../../constants/keyCodes';
+
+type SearchInputWithNavigationProps = {
+  currentIndex: number | null;
+  totalResults: number;
+  onValueChange: (value: string) => void;
+  onNavigateNext: () => void;
+  onNavigatePrevious: () => void;
+
+  value?: string;
+  placeholder?: string;
+  variant?: 'primary' | 'secondary';
+  onClear?: () => void;
+  focusVariant?: ComponentProps<typeof TextInput>['focusVariant'];
+  className?: string;
+};
+
+export const SearchInputWithNavigation = ({
+  ref,
+  value,
+  onValueChange,
+  placeholder = 'Search...',
+  variant = 'secondary',
+  onClear,
+  focusVariant,
+  currentIndex,
+  totalResults,
+  onNavigateNext,
+  onNavigatePrevious,
+  className,
+}: SearchInputWithNavigationProps & { ref?: Ref<HTMLInputElement> }) => {
+  const withControls = totalResults > 0;
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === keyCodes.ENTER) {
+      e.preventDefault();
+
+      e.shiftKey ? onNavigatePrevious() : onNavigateNext();
+    }
+  };
+
+  return (
+    <TextInput
+      ref={ref}
+      allowClear
+      value={value}
+      placeholder={placeholder}
+      onValueChange={onValueChange}
+      onClear={onClear}
+      prefix={<Icon className="tw-text-neutral-400" icon="magnifying-glass" />}
+      focusVariant={focusVariant}
+      onKeyDown={handleKeyDown}
+      variant={variant}
+      className={className}
+      leftSuffix={
+        <div
+          className={cn('tw-flex tw-items-center tw-gap-3', {
+            'tw-hidden': !withControls,
+          })}
+        >
+          <span className="tw-text-xs tw-text-neutral-400">
+            {totalResults > 0 ? (currentIndex ?? 0) : 0}/{totalResults}
+          </span>
+          <Separator orientation="vertical" size="3/4" />
+          <ButtonGroup>
+            <Button
+              variant="inline"
+              size="icon-3xs"
+              onClick={onNavigatePrevious}
+              disabled={!totalResults}
+              icon="angle-up"
+            />
+            <Button
+              variant="inline"
+              size="icon-3xs"
+              onClick={onNavigateNext}
+              disabled={!totalResults}
+              icon="angle-down"
+            />
+          </ButtonGroup>
+        </div>
+      }
+    />
+  );
+};

package/src/blocks/SearchInputWithNavigation/index.ts

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

package/src/blocks/SplitButton/SplitButton.stories.tsx

@@ -0,0 +1,88 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Modal } from '../../components/Modal';
+
+import { SplitButton } from './SplitButton';
+
+type SplitButtonProps = ComponentProps<typeof SplitButton>;
+type Variant = NonNullable<SplitButtonProps['variant']>;
+type Size = NonNullable<SplitButtonProps['size']>;
+
+const variants: Variant[] = ['primary', 'secondary', 'outline', 'danger'];
+const sizes: Size[] = ['large', 'medium', 'small'];
+
+export default {
+  component: SplitButton,
+  args: {
+    children: 'Save',
+    disabled: false,
+    variant: 'primary',
+    size: 'medium',
+    isLoading: false,
+    argo: false,
+  },
+  argTypes: {
+    variant: {
+      description: 'Set Variant',
+      type: {
+        name: 'enum',
+        value: variants,
+      },
+    },
+
+    size: {
+      description: 'Set Size',
+      type: {
+        name: 'enum',
+        value: sizes,
+      },
+    },
+  },
+} satisfies Meta<typeof SplitButton>;
+
+type Story = StoryObj<typeof SplitButton>;
+
+export const Default: Story = {
+  render: (args) => (
+    <SplitButton
+      {...args}
+      actions={
+        <SplitButton.Actions>
+          <SplitButton.Action icon="trash">Action 1</SplitButton.Action>
+          <SplitButton.Action icon="pen">Action 2</SplitButton.Action>
+        </SplitButton.Actions>
+      }
+    >
+      {args.children}
+    </SplitButton>
+  ),
+};
+
+/**
+ * SplitButton component without any actions, renders only the main button.
+ */
+export const NoActions: Story = {
+  render: (args) => <SplitButton {...args}>{args.children}</SplitButton>,
+};
+
+export const PrimaryButtonAsTrigger: Story = {
+  args: {
+    actions: (
+      <SplitButton.Actions>
+        <SplitButton.Action icon="trash">Action 1</SplitButton.Action>
+        <SplitButton.Action icon="pen">Action 2</SplitButton.Action>
+      </SplitButton.Actions>
+    ),
+  },
+  render: (args) => {
+    return (
+      <Modal>
+        <Modal.Trigger asChild>
+          <SplitButton {...args}>{args.children}</SplitButton>
+        </Modal.Trigger>
+        <Modal.Content>Content</Modal.Content>
+      </Modal>
+    );
+  },
+};

package/src/blocks/SplitButton/SplitButton.tsx

@@ -0,0 +1,68 @@
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+
+import { Button } from '../../components/Button';
+import { ButtonGroup } from '../../components/ButtonGroup';
+import { DropdownMenu } from '../../components/DropdownMenu';
+
+type Variant = ComponentProps<typeof Button>['variant'];
+type Size = NonNullable<ComponentProps<typeof Button>['size']>;
+type SpitButtonSize = Exclude<
+  Size,
+  'icon' | 'icon-lg' | 'icon-sm' | 'icon-xs' | 'icon-2xs' | 'icon-3xs'
+>;
+
+type Props = {
+  actions?: ReactNode;
+  isActionsOpen?: boolean;
+  onActionsOpenChange?: (open: boolean) => void;
+  // inline and invisible aren't supported in SplitButton
+  variant?: Exclude<Variant, 'inline' | 'invisible'>;
+  size?: SpitButtonSize;
+} & Omit<ComponentProps<typeof Button>, 'variant' | 'size'>;
+
+const iconSizeMap: Record<SpitButtonSize, Size> = {
+  medium: 'icon',
+  large: 'icon-lg',
+  small: 'icon-sm',
+};
+
+const SplitButtonBase = ({
+  ref,
+  disabled,
+  actions,
+  variant,
+  size = 'medium',
+  isActionsOpen,
+  onActionsOpenChange,
+  argo = false,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <ButtonGroup space="compact">
+    <Button {...rest} ref={ref} disabled={disabled} variant={variant} size={size} argo={argo} />
+
+    {actions && (
+      <DropdownMenu
+        open={isActionsOpen}
+        onOpenChange={onActionsOpenChange}
+        variant={argo ? 'argo' : 'default'}
+      >
+        {/* The trigger button is disabled if the main button is disabled, disabled has to be on trigger to prevent dropdown opening*/}
+        <DropdownMenu.Trigger asChild disabled={disabled}>
+          <Button
+            argo={argo}
+            size={iconSizeMap[size]}
+            variant={variant}
+            icon="caret-down"
+            aria-label="Additional actions"
+          />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">{actions}</DropdownMenu.Content>
+      </DropdownMenu>
+    )}
+  </ButtonGroup>
+);
+
+export const SplitButton = Object.assign(SplitButtonBase, {
+  Action: DropdownMenu.Item,
+  Actions: DropdownMenu.Group,
+});

package/src/blocks/SplitButton/index.ts

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

package/src/blocks/Tagger/TagItem.tsx

@@ -0,0 +1,29 @@
+import { Badge } from '../../components/Badge';
+
+import type { TagOption } from './types';
+
+type Props = {
+  tag: TagOption;
+  onRemove?: (value: TagOption) => void;
+  disabled?: boolean;
+};
+
+export const TagItem = ({ tag, onRemove, disabled = false }: Props) => {
+  const handleRemove = () => {
+    onRemove?.(tag);
+  };
+
+  const isDisabled = disabled || !!tag.disabled;
+
+  return (
+    <Badge.Root variant="tag" color={tag.color}>
+      <Badge.Label>{tag.name}</Badge.Label>
+
+      {onRemove && !isDisabled && (
+        <Badge.Addon variant="floating" align="inline-end">
+          <Badge.Button onClick={handleRemove} icon="xmark" aria-label="Remove Tag" />
+        </Badge.Addon>
+      )}
+    </Badge.Root>
+  );
+};

package/src/blocks/Tagger/TagSelectPopover/TagSelectCreateItem.tsx

@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'react';
+import { useCommandState } from 'cmdk';
+
+import { Command } from '../../../components/Command';
+import { cn } from '../../../utils';
+
+type Props = {
+  onCreate?: (search: string) => void;
+} & Pick<ComponentProps<typeof Command.Item>, 'value'>;
+
+export const TagSelectCreateItem = ({ onCreate, value }: Props) => {
+  const search = useCommandState((state) => state.search);
+  const isCreateItemVisible = useCommandState((state) => state.filtered.count === 1);
+
+  const isSearched = search.length > 0;
+
+  const handleOnSelect: ComponentProps<typeof Command.Item>['onSelect'] = () => {
+    onCreate?.(search);
+  };
+
+  return (
+    <Command.Item
+      variant="default"
+      onSelect={handleOnSelect}
+      value={value}
+      className={cn('[&_svg]:tw-text-primary-500', {
+        'tw-hidden': !isCreateItemVisible,
+      })}
+      icon="plus"
+    >
+      Create{' '}
+      {isSearched ? (
+        <>
+          "<span className="-tw-mx-2 tw-max-w-24 tw-truncate">{search}</span>"
+        </>
+      ) : (
+        ''
+      )}{' '}
+      Tag
+    </Command.Item>
+  );
+};

package/src/blocks/Tagger/TagSelectPopover/TagSelectItem.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from 'react';
+import { useCommandState } from 'cmdk';
+
+import { Badge } from '../../../components/Badge';
+import { Command } from '../../../components/Command';
+import { MarkedText } from '../../../components/MarkedText';
+import { Truncated } from '../../../components/Truncated';
+import type { TagOption } from '../types';
+
+type Props = {
+  option: TagOption;
+} & Pick<ComponentProps<typeof Command.Item>, 'onSelect' | 'checked'>;
+
+export const TagSelectItem = ({ option, onSelect, checked }: Props) => {
+  const search = useCommandState((state) => state.search);
+
+  return (
+    <Command.Item
+      variant="checkbox"
+      key={option.name}
+      value={option.name}
+      onSelect={onSelect}
+      checked={checked}
+      disabled={option.disabled}
+    >
+      <Badge variant="tag" color={option.color} className="tw-max-w-64">
+        <Truncated tooltip={option.name} text={<MarkedText source={option.name} mark={search} />} />
+      </Badge>
+    </Command.Item>
+  );
+};

package/src/blocks/Tagger/TagSelectPopover/TagSelectList.tsx

@@ -0,0 +1,67 @@
+import { type ComponentProps, useState } from 'react';
+import { defaultFilter } from 'cmdk';
+
+import { Command } from '../../../components/Command';
+import { Icon } from '../../../components/Icon';
+import type { TagOption } from '../types';
+
+import { TagSelectCreateItem } from './TagSelectCreateItem';
+import { TagSelectItem } from './TagSelectItem';
+import { TagSelectValue } from './TagSelectValue';
+
+const CREATE_ITEM_VALUE = 'create-new-tag';
+
+type Props = {
+  options?: TagOption[];
+} & Pick<ComponentProps<typeof TagSelectValue>, 'onAdd'> &
+  Pick<ComponentProps<typeof TagSelectCreateItem>, 'onCreate'>;
+
+const defaultOptions: TagOption[] = [];
+
+export const TagSelectList = ({ options = defaultOptions, onAdd, onCreate }: Props) => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const handleOnSelect: ComponentProps<typeof Command.Item>['onSelect'] = (value) => {
+    setSelected((currSelected) =>
+      currSelected.includes(value)
+        ? currSelected.filter((x) => x !== value)
+        : [...currSelected, value],
+    );
+  };
+
+  const handleFilter: ComponentProps<typeof Command>['filter'] = (value, search, keywords) => {
+    // never fi†lter out the create item
+    if (value === CREATE_ITEM_VALUE) return 1;
+    return defaultFilter(value, search, keywords);
+  };
+
+  return (
+    <>
+      <Command filter={handleFilter} className="tw-flex tw-flex-col">
+        <div className="tw-border-b tw-border-neutral-100 tw-p-3">
+          <Command.Input
+            variant="secondary"
+            prefix={<Icon icon="search" className="tw-size-4 tw-text-neutral-400" />}
+            placeholder="Search tags"
+            allowClear
+          />
+        </div>
+
+        <Command.List className="tw-p-3" viewPortClassName="tw-max-h-60" data-content>
+          <TagSelectCreateItem value={CREATE_ITEM_VALUE} onCreate={onCreate} />
+
+          {options.map((option) => (
+            <TagSelectItem
+              key={option.name}
+              option={option}
+              onSelect={handleOnSelect}
+              checked={selected.includes(option.name)}
+            />
+          ))}
+        </Command.List>
+      </Command>
+
+      <TagSelectValue value={selected} onAdd={onAdd} />
+    </>
+  );
+};

package/src/blocks/Tagger/TagSelectPopover/TagSelectPopover.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { Popover } from '../../../components/Popover';
+
+import { TagSelectList } from './TagSelectList';
+
+type Props = {
+  children: ReactNode;
+} & ComponentProps<typeof TagSelectList>;
+
+export const TagSelectPopover = ({ children, onAdd, options, onCreate }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleAdd: ComponentProps<typeof TagSelectList>['onAdd'] = (selected) => {
+    onAdd?.(selected);
+    setIsOpen(false);
+  };
+
+  const handleCreate: ComponentProps<typeof TagSelectList>['onCreate'] = (search) => {
+    onCreate?.(search);
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <Popover.Trigger asChild>{children}</Popover.Trigger>
+
+      <Popover.Content side="bottom" align="center" className="tw-w-80">
+        <TagSelectList onCreate={handleCreate} onAdd={handleAdd} options={options} />
+      </Popover.Content>
+    </Popover>
+  );
+};