@keboola/design 2.0.1 → 3.0.0

package/src/blocks/SearchInput/SearchInput.tsx

@@ -1,172 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
-
-import { InputGroup } from '../../components/InputGroup';
-import { Search, X } from '../../icons';
-import { debounce } from '../../utils';
-
-type InputGroupProps = Pick<
-  ComponentProps<typeof InputGroup>,
-  'variant' | 'focusVariant' | 'state' | 'sizing'
->;
-
-type InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;
-
-/**
- * Props for `SearchInput`. `onValueChange` is debounced by default (300ms) so callers can wire it directly
- * to expensive filter / fetch operations without `useMemo` plumbing. `value={null}` / `value={undefined}`
- * is treated as "not provided" — the component falls back to `defaultValue` (or, if absent, internal
- * state initialized to empty). `value={""}` is controlled-empty.
- */
-type Props = InputGroupProps &
-  InputGroupInputProps & {
-    value?: string | null;
-    defaultValue?: string | null;
-    /** Called with the latest string value after the debounce window (default 300ms). Fires synchronously on clear and when `disableDebounce` is set. For sync echo of every keystroke use `onChange`. */
-    onValueChange?: (value: string) => void;
-    /** Called with the string value on blur. */
-    onValueBlur?: (value: string) => void;
-    /** Called when the user clicks the clear button. Receives no arguments — the value is reset to "". */
-    onClear?: () => void;
-    /** Render the trailing clear (x) button when there's a non-empty value. */
-    allowClear?: boolean;
-    /** Bypass the debounce — `onValueChange` fires synchronously on every keystroke. */
-    disableDebounce?: boolean;
-    /** Debounce window in ms. Default 300. Ignored when `disableDebounce` is set. */
-    debounceDelay?: number;
-  };
-
-/**
- * Debounced search input with a leading magnifying-glass icon and optional clear button.
- *
- * **When to use:** the search field inside `PageToolbar.Search`, list / table search, combobox-less
- * free-text filters. `onValueChange` is debounced so callers can wire it directly to fetches without
- * `useMemo` plumbing.
- * **When NOT to use:** for a plain string input use `TextInput`; for selecting from a known enumerated
- * list use `Combobox` (which has its own search built in); for free-form tag entry use `Tagger`.
- * **Composition:** typically rendered in `PageToolbar.Search` next to `MultiCombobox` filter pills. Use
- * `allowClear` for the canonical x-to-reset affordance.
- *
- * @see RECIPES.md#filter-toolbar — for the search + filter chips toolbar pattern
- */
-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">
-        <Search className="tw-size-4 tw-shrink-0 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
-            aria-label="Clear search"
-            onMouseDown={(event) => event.preventDefault()}
-            onClick={handleClear}
-          >
-            <X className="tw-size-4" />
-          </InputGroup.Button>
-        </InputGroup.Addon>
-      )}
-    </InputGroup>
-  );
-};

package/src/blocks/SearchInput/index.ts

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

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

@@ -1,73 +0,0 @@
-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

@@ -1,92 +0,0 @@
-import type { ComponentProps, KeyboardEvent, Ref } from 'react';
-
-import { Button, ButtonGroup, cn, Separator, TextInput } from '@keboola/design';
-
-import { keyCodes } from '../../constants/keyCodes';
-import { ChevronDown, ChevronUp, Search } from '../../icons';
-
-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={<Search className="tw-size-4 tw-shrink-0 tw-text-neutral-400" />}
-      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}
-            >
-              <ChevronUp className="tw-size-4" />
-            </Button>
-            <Button
-              variant="inline"
-              size="icon-3xs"
-              onClick={onNavigateNext}
-              disabled={!totalResults}
-            >
-              <ChevronDown className="tw-size-4" />
-            </Button>
-          </ButtonGroup>
-        </div>
-      }
-    />
-  );
-};

package/src/blocks/SearchInputWithNavigation/index.ts

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

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

@@ -1,91 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Pencil, Trash2 } from '@keboola/design/icons';
-
-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>Action 1</SplitButton.Action>
-          <SplitButton.Action>Action 2</SplitButton.Action>
-        </SplitButton.Actions>
-      }
-      icon={<Pencil className="tw-size-4" />}
-    >
-      {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={<Trash2 />}>Action 1</SplitButton.Action>
-        <SplitButton.Action icon={<Pencil />}>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

@@ -1,81 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-
-import { ChevronDown } from '@keboola/design/icons';
-
-import { Button } from '../../components/Button';
-import { ButtonGroup } from '../../components/ButtonGroup';
-import { DropdownMenu } from '../../components/DropdownMenu';
-import { renderLegacyIcon } from '../../utils/legacyIcon';
-
-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;
-  /** Optional leading-icon slot — pass a Lucide icon node. */
-  icon?: ReactNode;
-  // inline and invisible aren't supported in SplitButton
-  variant?: Exclude<Variant, 'inline' | 'invisible'>;
-  size?: SpitButtonSize;
-} & Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'icon'>;
-
-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,
-  icon,
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <ButtonGroup space="compact">
-    <Button {...rest} ref={ref} disabled={disabled} variant={variant} size={size} argo={argo}>
-      {/* Suppress the leading icon while Button renders its spinner so the two
-          glyphs don't double-stack. */}
-      {!rest.isLoading && renderLegacyIcon(icon)}
-      {children}
-    </Button>
-
-    {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}
-            aria-label="Additional actions"
-          >
-            <ChevronDown className="tw-size-5" />
-          </Button>
-        </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

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

package/src/blocks/Tagger/TagItem.tsx

@@ -1,32 +0,0 @@
-import { Badge } from '../../components/Badge';
-import { X } from '../../icons';
-
-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} aria-label="Remove Tag">
-            <X className="tw-size-3" />
-          </Badge.Button>
-        </Badge.Addon>
-      )}
-    </Badge.Root>
-  );
-};

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

@@ -1,44 +0,0 @@
-import type { ComponentProps } from 'react';
-import { useCommandState } from 'cmdk';
-
-import { Plus } from '@keboola/design/icons';
-
-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 className="tw-size-4" />}
-    >
-      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

@@ -1,31 +0,0 @@
-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>
-  );
-};