@keboola/design 2.0.1 → 2.1.0

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -1,43 +0,0 @@
-import { Fragment } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Separator } from '../Separator';
-
-import { ScrollArea } from './ScrollArea';
-
-const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
-
-const meta = {
-  component: ScrollArea,
-  argTypes: {
-    type: {
-      description: 'Set type of scrollbar visibility',
-      type: { name: 'enum', value: ['auto', 'always', 'scroll', 'hover'] },
-    },
-  },
-  args: {
-    type: 'hover',
-    className: 'tw-h-72 tw-w-40 tw-rounded tw-border tw-border-solid tw-border-neutral-100',
-  },
-  render: (args) => (
-    <ScrollArea {...args}>
-      <div className="tw-p-4">
-        <h4 className="tw-mb-4 tw-text-sm tw-font-medium tw-leading-none">Tags</h4>
-        {tags.map((tag) => (
-          <Fragment key={tag}>
-            <div key={tag} className="tw-text-sm">
-              {tag}
-            </div>
-            <Separator orientation="horizontal" className="tw-my-2" />
-          </Fragment>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -1,50 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import { cn } from '../../utils';
-
-import { ScrollBar } from './ScrollBar';
-
-type Props = ComponentProps<typeof ScrollAreaPrimitive.Root> & {
-  viewPortClassName?: string;
-  scrollBarClassName?: string;
-  orientation?: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>['orientation'];
-};
-
-export const ScrollArea = ({
-  ref,
-  className,
-  children,
-  viewPortClassName,
-  orientation,
-  scrollBarClassName,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <ScrollAreaPrimitive.Root
-    data-slot="scroll-area"
-    className={cn(
-      'tw-peer/scroll-area tw-relative tw-overflow-hidden focus-visible:tw-outline-none',
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport
-      ref={ref}
-      className={cn(
-        'tw-h-full tw-w-full tw-rounded-[inherit] focus-visible:tw-outline-none',
-        viewPortClassName,
-      )}
-    >
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    {orientation ? (
-      <ScrollBar className={scrollBarClassName} orientation={orientation} />
-    ) : (
-      <>
-        <ScrollBar className={scrollBarClassName} orientation="vertical" />
-        <ScrollBar className={scrollBarClassName} orientation="horizontal" />
-      </>
-    )}
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-);

package/src/components/ScrollArea/ScrollBar.tsx

@@ -1,32 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>;
-
-export const ScrollBar = ({ className, orientation = 'vertical', ...props }: Props) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    orientation={orientation}
-    className={cn(
-      'tw-flex tw-touch-none tw-select-none tw-transition-color',
-      '[data-state="hidden"]:tw-bg-pink-500',
-      {
-        'tw-h-full tw-w-2.5 tw-p-px': orientation === 'vertical',
-        'tw-h-2.5 tw-flex-col tw-p-px': orientation === 'horizontal',
-      },
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb
-      className={cn(
-        'tw-relative',
-        'tw-flex-1',
-        'tw-rounded-full',
-        'tw-bg-neutral-200',
-        'hover:tw-bg-neutral-400',
-      )}
-    />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-);

package/src/components/ScrollArea/index.ts

@@ -1,2 +0,0 @@
-export * from './ScrollArea';
-export * from './ScrollBar';

package/src/components/Search/ClearButton.tsx

@@ -1,42 +0,0 @@
-import type { MouseEventHandler } from 'react';
-
-import { X } from '../../icons';
-import { cn } from '../../utils';
-
-type Props = {
-  onClick: MouseEventHandler<HTMLButtonElement>;
-  testId?: string;
-};
-
-export const ClearButton = ({ onClick, testId }: Props) => {
-  // Prevent default, as we do not want to lose input focus.
-  const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {
-    event.preventDefault();
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      tabIndex={-1} // clear button should not be focusable
-      onMouseDown={handleMouseDown}
-      className={cn(
-        // reset
-        'tw-border-none',
-        'tw-bg-transparent',
-        'tw-p-0',
-
-        // positioning
-        'tw-flex',
-        'tw-items-center',
-
-        'tw-cursor-pointer',
-        'tw-text-neutral-300',
-        'hover:tw-text-neutral-800',
-      )}
-      data-testid={testId}
-    >
-      <X className="tw-size-4" />
-    </button>
-  );
-};

package/src/components/Search/Search.stories.tsx

@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Button } from '../Button/Button';
-import { RadioGroup } from '../RadioGroup';
-
-import { Search } from './Search';
-import { SearchForm } from './SearchForm';
-
-type Story = StoryObj<typeof Search>;
-
-/**
- * @deprecated
- *
- * `Search` is kept **only for the legacy (non-sidebar) layout** in kbc-ui. Do not use it in new code.
- *
- * ### Use instead
- *
- * | Need | Component |
- * |------|-----------|
- * | Standard filter / search field | [`SearchInput`](?path=/docs/blocks-searchinput--docs) — built on `InputGroup`, supports `variant`, `sizing`, debounce, and optional clear button |
- * | AI / prompt input | [`PromptInput`](?path=/docs/blocks-aikit-promptinput--docs) — gradient border, textarea, send button; use `variant="ai"` for the sparkle-icon look |
- */
-const meta: Meta<typeof Search> = {
-  component: Search,
-  args: {
-    placeholder: 'Search',
-    disabled: false,
-    readOnly: false,
-    disableDebounce: false,
-  },
-  parameters: {
-    backgrounds: {
-      default: 'Gray',
-    },
-  },
-};
-
-export default meta;
-
-export const Basic: Story = {};
-
-export const WithRadioGroup: Story = {
-  args: {
-    suffix: (
-      <RadioGroup variant="button" onValueChange={action('radioGroupChange')}>
-        <RadioGroup.Item value="all">All</RadioGroup.Item>
-        <RadioGroup.Separator />
-        <RadioGroup.Item value="enabled">Enabled</RadioGroup.Item>
-        <RadioGroup.Item value="disbled">Disabled</RadioGroup.Item>
-      </RadioGroup>
-    ),
-  },
-};
-
-const SEARCH_NAME = 'search';
-
-export const AsSearchForm: Story = {
-  args: {
-    name: SEARCH_NAME,
-    suffix: (
-      <Button type="submit" variant="secondary" size="small">
-        Search
-      </Button>
-    ),
-  },
-
-  render: (props) => <SearchForm {...props} onSubmit={action('submit')} />,
-};
-
-export const AIVariant: Story = {
-  args: {
-    variant: 'ai',
-    placeholder: 'Search specific component or write your usecase',
-    defaultValue: 'I need to download data from marketing campaigns',
-  },
-};

package/src/components/Search/Search.test.tsx

@@ -1,224 +0,0 @@
-import type { ComponentProps } from 'react';
-import { act, render, screen } from '@testing-library/react';
-import { userEvent } from 'storybook/test';
-import { vi } from 'vitest';
-
-import { Search } from './Search';
-import { genSearchTestId } from './utils';
-
-type Props = ComponentProps<typeof Search>;
-
-const testId = genSearchTestId('test');
-const onChange = vi.fn();
-const onBlur = vi.fn();
-
-const SearchTest = (
-  props: Pick<
-    Props,
-    'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'disableDebounce' | 'debounceDelay'
-  >,
-) => <Search testId={testId.toString()} onChange={onChange} onBlur={onBlur} {...props} />;
-
-describe('<Search />', () => {
-  beforeEach(() => {
-    onChange.mockClear();
-    onBlur.mockClear();
-  });
-
-  it('should allow null in value prop', () => {
-    render(<SearchTest value={null} />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-    expect(el.value).toBe('');
-  });
-
-  it('should allow null in default value prop', () => {
-    render(<SearchTest defaultValue={null} />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-    expect(el.value).toBe('');
-  });
-
-  it('should not allow typing while disabled', async () => {
-    render(<SearchTest defaultValue="hello" disabled />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-    expect(el.value).toBe('hello');
-
-    await act(async () => {
-      await userEvent.type(el, ' world');
-    });
-
-    expect(onChange).not.toHaveBeenCalled();
-    expect(el.value).toBe('hello');
-  });
-
-  it('should work in uncontrolled state', async () => {
-    render(<SearchTest disableDebounce defaultValue="hello" />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-
-    expect(el.value).toBe('hello');
-
-    await act(async () => {
-      await userEvent.type(el, ' world');
-    });
-
-    expect(onChange).toHaveBeenCalledTimes(6);
-    expect(onChange).toHaveBeenCalledWith('hello world', expect.any(Object));
-    expect(el.value).toBe('hello world');
-  });
-
-  it('should work in controlled state without debounce', async () => {
-    const user = userEvent.setup();
-    const { rerender } = render(<SearchTest disableDebounce value="hello" />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-
-    expect(el.value).toBe('hello');
-
-    rerender(<SearchTest disableDebounce value="new value" />);
-    expect(el.value).toBe('new value');
-
-    // Simulate user typing
-    await act(async () => {
-      await user.type(el, ' test');
-    });
-
-    expect(onChange).toHaveBeenCalledTimes(5);
-    expect(onChange).toHaveBeenLastCalledWith('new value test', expect.any(Object));
-    expect(el.value).toBe('new value test');
-
-    // Value should remain as set by prop since it's controlled
-    rerender(<SearchTest disableDebounce value="new" />);
-    expect(el.value).toBe('new');
-  });
-
-  describe('clear button', () => {
-    it('should be rendered', async () => {
-      render(<SearchTest defaultValue="hello" />);
-
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-      const clearBtnEl = screen.queryByTestId<HTMLButtonElement>(testId.clearButton);
-      expect(inputEl.value).toBe('hello');
-      expect(clearBtnEl).not.toBeNull();
-    });
-
-    it('should not be rendered when disabled', () => {
-      render(<SearchTest defaultValue="hello" disabled />);
-
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-      const clearBtnEl = screen.queryByTestId<HTMLButtonElement>(testId.clearButton);
-      expect(inputEl.value).toBe('hello');
-      expect(clearBtnEl).toBeNull();
-    });
-
-    it('should not be rendered when in read only', () => {
-      render(<SearchTest defaultValue="hello" readOnly />);
-
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-      const clearBtnEl = screen.queryByTestId<HTMLButtonElement>(testId.clearButton);
-      expect(inputEl.value).toBe('hello');
-      expect(clearBtnEl).toBeNull();
-    });
-
-    it('should clear value and disappear after', async () => {
-      render(<SearchTest defaultValue="hello" />);
-
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-      const clearBtnEl = screen.queryByTestId<HTMLButtonElement>(testId.clearButton);
-
-      expect(inputEl.value).toBe('hello');
-      expect(clearBtnEl).not.toBeNull();
-
-      await act(async () => {
-        await userEvent.click(clearBtnEl!);
-      });
-
-      expect(inputEl.value).toBe('');
-      expect(onChange).toHaveBeenCalledWith('', expect.any(Object));
-      expect(screen.queryByTestId<HTMLButtonElement>(testId.clearButton)).toBeNull();
-    });
-  });
-
-  describe('debounce', () => {
-    beforeEach(() => {
-      vi.useFakeTimers();
-      onChange.mockClear();
-      onBlur.mockClear();
-    });
-
-    afterEach(() => {
-      vi.useRealTimers();
-      vi.clearAllTimers();
-      vi.resetAllMocks();
-    });
-
-    it('should debounce onChange calls by 300ms', async () => {
-      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime, delay: 10 });
-      render(<SearchTest debounceDelay={300} />);
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-
-      // Type each character and verify no immediate calls
-      await act(async () => {
-        await user.type(inputEl, 'test');
-      });
-
-      expect(onChange).not.toHaveBeenCalled();
-
-      // After all typing, advance timer once
-      vi.advanceTimersByTime(300);
-
-      // Should only be called once with final value
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith('test', expect.any(Object));
-    });
-
-    it('should not work in controlled state with debounce', async () => {
-      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-      const { rerender } = render(<SearchTest debounceDelay={300} value="hello" />);
-      const el = screen.getByTestId<HTMLInputElement>(testId.input);
-
-      expect(el.value).toBe('hello');
-
-      rerender(<SearchTest debounceDelay={300} value="new value" />);
-      expect(el.value).toBe('new value');
-
-      await act(async () => {
-        await user.type(el, ' test');
-      });
-
-      vi.advanceTimersByTime(300);
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith('new value test', expect.any(Object));
-
-      // Value should not update since it's controlled
-      expect(el.value).toBe('new value test');
-
-      // Verify disabling debounce works
-      rerender(<SearchTest disableDebounce value="final value" />);
-      expect(el.value).toBe('final value');
-    });
-
-    it('should cancel pending debounced calls when cleared', async () => {
-      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-      render(<SearchTest debounceDelay={300} />);
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-
-      await act(async () => {
-        await user.type(inputEl, 't');
-        await user.type(inputEl, 'e');
-        await user.type(inputEl, 's');
-        await user.type(inputEl, 't');
-      });
-      vi.advanceTimersByTime(299);
-      expect(onChange).not.toHaveBeenCalled();
-
-      vi.advanceTimersByTime(300);
-      expect(onChange).toHaveBeenCalledTimes(1);
-
-      const clearBtn = screen.getByTestId<HTMLButtonElement>(testId.clearButton);
-      await act(async () => {
-        await user.click(clearBtn);
-      });
-
-      expect(onChange).toHaveBeenCalledTimes(2);
-    });
-  });
-});

package/src/components/Search/Search.tsx

@@ -1,139 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import type {
-  ChangeEvent,
-  ChangeEventHandler,
-  ElementRef,
-  FocusEvent,
-  FocusEventHandler,
-  InputHTMLAttributes,
-  MouseEvent,
-  MouseEventHandler,
-  ReactNode,
-  Ref,
-} from 'react';
-
-import { Search as SearchIcon, Sparkles } from '../../icons';
-import { cn, debounce, noop } from '../../utils';
-
-import { ClearButton } from './ClearButton';
-import { searchInputClassnames, searchWrapperVariants } from './styles';
-import { genSearchTestId } from './utils';
-
-type SearchChangeEventHandler = (
-  value: string,
-  event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
-) => void;
-
-type SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;
-
-type Props = {
-  suffix?: ReactNode;
-  disableDebounce?: boolean;
-  debounceDelay?: number;
-  onChange?: SearchChangeEventHandler;
-  onBlur?: SearchBlurEventHandler;
-  value?: string | null;
-  defaultValue?: string | null;
-  testId?: string;
-  onClear?: () => void;
-  variant?: 'default' | 'ai';
-} & Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'type' | 'onBlur' | 'onChange' | 'value' | 'defaultValue' | 'prefix' | 'suffix'
->;
-
-/**
- * @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.
- */
-export const Search = ({
-  ref,
-  suffix,
-  className,
-  onBlur,
-  onChange = noop,
-  disabled = false,
-  readOnly = false,
-  disableDebounce = false,
-  debounceDelay = 300,
-  value: externalValue,
-  defaultValue,
-  testId: prefixTestId = '',
-  placeholder = 'Search',
-  onClear,
-  variant = 'default',
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const [internalValue, setInternalValue] = useState(() =>
-    externalValue != null ? externalValue : defaultValue,
-  );
-  const hasValue = internalValue !== '';
-
-  const isClearButtonVisible = hasValue && !disabled && !readOnly;
-  const testId = genSearchTestId(prefixTestId);
-
-  const debouncedOnChange = useMemo(
-    () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),
-    [disableDebounce, debounceDelay, onChange],
-  );
-
-  useEffect(() => {
-    if (externalValue == null) return; // uncontrolled state
-    // oxlint-disable-next-line react-x/set-state-in-effect
-    setInternalValue(externalValue);
-  }, [externalValue]);
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const currentValue = event.target.value;
-    setInternalValue(currentValue);
-    debouncedOnChange(currentValue, event);
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    const currentValue = event.target.value;
-    setInternalValue(currentValue);
-    onBlur?.(currentValue, event);
-  };
-
-  const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {
-    setInternalValue('');
-    onChange?.('', event);
-    onClear?.();
-  };
-
-  return (
-    <div
-      className={cn(
-        searchWrapperVariants({ variant }),
-        {
-          'tw-cursor-not-allowed tw-opacity-40': disabled,
-        },
-        className,
-      )}
-      data-testid={testId.wrapper}
-    >
-      {variant === 'ai' ? (
-        <Sparkles className="tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" />
-      ) : (
-        <SearchIcon className="tw-size-4 tw-shrink-0 tw-text-neutral-400" />
-      )}
-
-      <input
-        {...rest}
-        ref={ref}
-        placeholder={placeholder}
-        data-testid={testId.input}
-        type="text"
-        value={internalValue ?? ''}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        className={searchInputClassnames}
-        disabled={disabled}
-        readOnly={readOnly}
-      />
-
-      {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}
-
-      {suffix}
-    </div>
-  );
-};

package/src/components/Search/SearchForm.tsx

@@ -1,37 +0,0 @@
-import type { ComponentProps, ElementRef, FormEventHandler, Ref } from 'react';
-
-import { Search } from './Search';
-
-type Props = {
-  onSubmit: (value: string) => void;
-} & Omit<ComponentProps<typeof Search>, 'onClear' | 'onBlur' | 'onSubmit'>;
-
-export const SearchForm = ({
-  ref,
-  onSubmit,
-  name = 'search-field',
-  ...props
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;
-    onSubmit(searchEl.value);
-  };
-
-  const onClear = () => {
-    onSubmit('');
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <Search
-        {...props}
-        ref={ref}
-        onClear={onClear}
-        name={name}
-        // Debounce has no meaning when we use submit, which is triggered by pressing enter.
-        disableDebounce
-      />
-    </form>
-  );
-};

package/src/components/Search/index.ts

@@ -1,2 +0,0 @@
-export * from './Search';
-export * from './SearchForm';