@keboola/design 1.0.0

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

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

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

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

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

package/src/components/Search/ClearButton.tsx

@@ -0,0 +1,42 @@
+import type { MouseEventHandler } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+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}
+    >
+      <Icon className="tw-size-4" icon="xmark" />
+    </button>
+  );
+};

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

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

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

@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useState } from 'react';
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  ElementRef,
+  FocusEvent,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  MouseEvent,
+  MouseEventHandler,
+  ReactNode,
+  Ref,
+} from 'react';
+
+import { cn, debounce, noop } from '../../utils';
+import { Icon } from '../Icon';
+
+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' ? (
+        <Icon icon={['far', 'sparkles']} className="[&_path]:tw-fill-aigradient-600" />
+      ) : (
+        <Icon className="tw-text-base tw-text-neutral-400" icon="magnifying-glass" />
+      )}
+
+      <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

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

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