@keboola/design 2.0.1 → 3.0.0

package/src/components/Input/Input.stories.tsx

@@ -1,93 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Search } from '../../icons';
-
-import { Input } from './Input';
-
-type Story = StoryObj<typeof Input>;
-type InputProps = ComponentProps<typeof Input>;
-type State = NonNullable<InputProps['state']>;
-type Variant = NonNullable<InputProps['variant']>;
-type Sizing = NonNullable<InputProps['sizing']>;
-type RightSuffixVariant = NonNullable<InputProps['rightSuffixVariant']>;
-
-const states: State[] = ['default', 'error', 'warning'];
-const variants: Variant[] = ['primary', 'secondary'];
-const sizings: Sizing[] = ['small', 'default'];
-const rightSuffixVariants: RightSuffixVariant[] = ['default', 'addon'];
-
-/**
- *  The standard text input field that can be customized with
- *  placeholders, validation states, prefixes, suffixes, and a clear button.
- */
-export default {
-  component: Input,
-  args: {
-    placeholder: 'Placeholder',
-    variant: 'primary',
-    state: 'default',
-    sizing: 'default',
-    allowClear: false,
-    readOnly: false,
-    disabled: false,
-    focusVariant: 'default',
-  },
-  argTypes: {
-    state: {
-      description: 'Set validation state',
-      type: { name: 'enum', value: states },
-    },
-
-    variant: {
-      defaultValue: 'primary',
-      description: 'Set Variant',
-      type: { name: 'enum', value: variants },
-    },
-
-    sizing: {
-      defaultValue: 'default',
-      description: 'Set Sizing',
-      type: { name: 'enum', value: sizings },
-    },
-
-    rightSuffixVariant: {
-      defaultValue: 'default',
-      description: 'Set right suffix variant',
-      control: 'radio',
-      options: rightSuffixVariants,
-    },
-  },
-} satisfies Meta<typeof Input>;
-
-export const Basic: Story = {
-  args: {
-    rightSuffixVariant: 'default',
-  },
-};
-
-export const WithPrefix: Story = {
-  args: {
-    prefix: <Search className="tw-size-4 tw-text-neutral-400" />,
-  },
-};
-
-export const WithSuffix: Story = {
-  args: {
-    allowClear: true,
-    rightSuffix: <div className="tw-text-neutral-400">Kg</div>,
-  },
-};
-
-export const WithAddonSuffix: Story = {
-  args: {
-    rightSuffix: <div>-url-part</div>,
-    rightSuffixVariant: 'addon',
-  },
-};
-
-export const WithClear: Story = {
-  args: {
-    allowClear: true,
-  },
-};

package/src/components/Input/Input.test.tsx

@@ -1,112 +0,0 @@
-import type { ComponentProps } from 'react';
-import { act, render, screen } from '@testing-library/react';
-import { userEvent } from 'storybook/test';
-import { describe, expect, it, vi } from 'vitest';
-
-import { Input } from './Input';
-import { genInputTestId } from './utils';
-
-const testId = genInputTestId('test');
-const onChange = vi.fn();
-const onBlur = vi.fn();
-
-const InputTest = (
-  props: Pick<
-    ComponentProps<typeof Input>,
-    'allowClear' | 'value' | 'defaultValue' | 'disabled' | 'readOnly'
-  >,
-) => <Input testId={testId.toString()} {...props} onChange={onChange} onBlur={onBlur} />;
-
-describe('<Input/>', () => {
-  it('should allow null in value prop', () => {
-    render(<InputTest value={null} />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-    expect(el.value).toBe('');
-  });
-
-  it('should allow null in default value prop', () => {
-    render(<InputTest defaultValue={null} />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-    expect(el.value).toBe('');
-  });
-
-  it('should not allow typing while disabled', async () => {
-    render(<InputTest 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.toBeCalled();
-    expect(el.value).toBe('hello');
-  });
-
-  it('should work in uncontrolled state', async () => {
-    render(<InputTest defaultValue="hello" />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-
-    expect(el.value).toBe('hello');
-
-    await act(async () => {
-      await userEvent.type(el, ' world');
-    });
-
-    expect(onChange).toBeCalledTimes(6);
-    expect(onChange.mock.lastCall?.[0].target.value).toBe('hello world');
-    expect(el.value).toBe('hello world');
-  });
-
-  describe('clear button', () => {
-    it('should not be rendered when not allowed', async () => {
-      render(<InputTest defaultValue="hello" />);
-      const el = screen.getByTestId<HTMLInputElement>(testId.input);
-      expect(el.value).toBe('hello');
-      expect(screen.queryByTestId(testId.clearButton)).toBeNull();
-    });
-
-    it('should be rendered when allowed', async () => {
-      render(<InputTest defaultValue="hello" allowClear />);
-
-      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 allowed and disabled', () => {
-      render(<InputTest defaultValue="hello" allowClear disabled />);
-
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-      expect(inputEl.value).toBe('hello');
-      expect(screen.queryByTestId(testId.clearButton)).toBeNull();
-    });
-
-    it('should not be rendered when allowed and in read only', () => {
-      render(<InputTest defaultValue="hello" allowClear readOnly />);
-
-      const inputEl = screen.getByTestId<HTMLInputElement>(testId.input);
-      expect(inputEl.value).toBe('hello');
-      expect(screen.queryByTestId(testId.clearButton)).toBeNull();
-    });
-
-    it('should clear value and disappear after', async () => {
-      render(<InputTest defaultValue="hello" allowClear />);
-
-      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.mock.lastCall?.[0].target.value).toBe('');
-      expect(screen.queryByTestId(testId.clearButton)).toBeNull();
-    });
-  });
-});

package/src/components/Input/Input.tsx

@@ -1,163 +0,0 @@
-import { useRef, useState } from 'react';
-import type {
-  ChangeEventHandler,
-  ComponentProps,
-  ElementRef,
-  FocusEventHandler,
-  MouseEventHandler,
-  ReactNode,
-  Ref,
-} from 'react';
-
-import { X } from '../../icons';
-import { cn, createChangeInputEvent, mergeRefs } from '../../utils';
-import { InputGroup } from '../InputGroup/InputGroup';
-
-import { genInputTestId } from './utils';
-
-type InputGroupProps = Pick<
-  ComponentProps<typeof InputGroup>,
-  'variant' | 'focusVariant' | 'sizing' | 'state'
->;
-
-type OwnProps = {
-  prefix?: ReactNode;
-  rightSuffix?: ReactNode;
-  rightSuffixVariant?: 'addon' | 'default';
-  leftSuffix?: ReactNode;
-  allowClear?: boolean;
-  onClear?: () => void;
-  testId?: string;
-  value?: ComponentProps<'input'>['value'] | null;
-  defaultValue?: ComponentProps<'input'>['defaultValue'] | null;
-};
-
-/**
- * Props for `Input`. Combines `InputGroup` chrome (variant / sizing / state / focusVariant) with
- * input-specific slots (`prefix`, `leftSuffix`, `rightSuffix`, `allowClear`).
- */
-type Props = InputGroupProps &
-  OwnProps &
-  Omit<ComponentProps<'input'>, 'prefix' | 'value' | 'defaultValue'>;
-
-/**
- * Low-level text input with `InputGroup` chrome — addons, clear button, sizing, focus variants.
- *
- * **When to use:** when you need an input with prefix / suffix slots or a clear button and don't need the
- * `onValueChange` convenience callback. Rare on its own — most call sites should use `TextInput`.
- * **When NOT to use:** for plain text fields use `TextInput`; for fields inside a `FormGroup` use
- * `FormGroup.TextInput`; for search use `SearchInput`; for forms with validation use `useAppForm`.
- * **Composition:** wrap in `FormGroup` for shared error state, or render directly as a controlled input.
- */
-export const Input = ({
-  ref: forwardedRef,
-  state = 'default',
-  sizing = 'default',
-  className,
-  prefix = null,
-  rightSuffix = null,
-  rightSuffixVariant = 'default',
-  leftSuffix = null,
-  allowClear = false,
-  onClear,
-  disabled = false,
-  testId: prefixTestId = '',
-  autoFocus = false,
-  id,
-  name,
-  variant,
-  readOnly,
-  type = 'text',
-  focusVariant = 'default',
-  onChange,
-  onBlur,
-  value,
-  defaultValue,
-  ...inputProps
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const [hasUncontrolledValue, setHasUncontrolledValue] = useState(() => !!defaultValue);
-  const hasValue = !!value || hasUncontrolledValue;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const testId = genInputTestId(prefixTestId);
-  const isClearButtonVisible = (hasValue && !disabled && !readOnly) || !!onClear;
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const val = event.target.value;
-    setHasUncontrolledValue(val !== '');
-    onChange?.(event);
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    const val = event.target.value;
-    setHasUncontrolledValue(val !== '');
-    onBlur?.(event);
-  };
-
-  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
-    if (inputRef.current === null) return;
-    inputRef.current.value = ''; // necessary for uncontrolled state
-    inputRef.current.focus();
-    onClear?.();
-    setHasUncontrolledValue(false);
-    onChange?.(createChangeInputEvent(inputRef.current));
-  };
-
-  const isControlled = value !== undefined;
-  const valueProp = isControlled ? { value: value ?? '' } : { defaultValue: defaultValue ?? '' };
-
-  return (
-    <InputGroup
-      state={state}
-      variant={variant}
-      sizing={sizing}
-      focusVariant={focusVariant}
-      className={className}
-      data-testid={testId.inputWrapper}
-    >
-      {prefix && <InputGroup.Addon align="inline-start">{prefix}</InputGroup.Addon>}
-
-      <InputGroup.Input
-        {...inputProps}
-        {...valueProp}
-        autoFocus={autoFocus}
-        type={type}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        ref={mergeRefs(forwardedRef ?? null, inputRef)}
-        disabled={disabled}
-        id={id}
-        name={name}
-        readOnly={readOnly}
-        data-testid={testId.input}
-      />
-
-      {(leftSuffix || allowClear || rightSuffix) && (
-        <InputGroup.Addon align="inline-end">
-          {leftSuffix}
-          {allowClear && isClearButtonVisible && (
-            <InputGroup.Button
-              aria-label="Clear"
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={handleClear}
-              data-testid={testId.clearButton}
-            >
-              <X className="tw-size-4" />
-            </InputGroup.Button>
-          )}
-          {rightSuffix && (
-            <div
-              className={cn({
-                'tw-whitespace-nowrap tw-bg-neutral-200 tw-px-4 -tw-mr-4 tw-py-2.5':
-                  rightSuffixVariant === 'addon',
-              })}
-            >
-              {rightSuffix}
-            </div>
-          )}
-        </InputGroup.Addon>
-      )}
-    </InputGroup>
-  );
-};

package/src/components/Input/TextInput/TextInput.stories.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Button } from '../../Button/Button';
-
-import { TextInput } from './TextInput';
-
-type Story = StoryObj<typeof TextInput>;
-
-/**
- * Specialized wrapper around the base `Input` component. Tailored for text-specific functionalities and interactions.
- */
-export default {
-  component: TextInput,
-  args: {
-    placeholder: 'Placeholder',
-    variant: 'primary',
-    state: 'default',
-    allowClear: false,
-    readOnly: false,
-    disabled: false,
-    focusVariant: 'default',
-
-    onValueChange: action('onValueChange'),
-    onValueBlur: action('onValueBlur'),
-  },
-} satisfies Meta<typeof TextInput>;
-
-export const Basic: Story = {};
-
-const ControlledDemo = (props: ComponentProps<typeof TextInput>) => {
-  const [value, setValue] = useState('');
-  return <TextInput {...props} value={value} onValueChange={setValue} />;
-};
-
-export const Controlled: Story = {
-  render: ControlledDemo,
-};
-
-const UncontrolledDemo = (props: ComponentProps<typeof TextInput>) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const values = new FormData(event.currentTarget);
-    action('onSubmit')(Object.fromEntries(values.entries()));
-  };
-
-  return (
-    <form className="tw-flex tw-gap-2" onSubmit={handleSubmit}>
-      <TextInput
-        {...props}
-        onValueChange={action('onValueChange')}
-        onValueBlur={action('onValueBlur')}
-      />
-      <Button type="submit">Submit</Button>
-    </form>
-  );
-};
-
-export const Uncontrolled: Story = {
-  render: UncontrolledDemo,
-  args: {
-    defaultValue: 'Hello',
-    allowClear: true,
-    name: 'uncontrolled-text-input',
-  },
-};

package/src/components/Input/TextInput/TextInput.test.tsx

@@ -1,52 +0,0 @@
-import type { ComponentProps } from 'react';
-import { act, render, screen } from '@testing-library/react';
-import { userEvent } from 'storybook/test';
-import { describe, expect, it, vi } from 'vitest';
-
-import { genInputTestId } from '../utils';
-
-import { TextInput } from './TextInput';
-
-const testId = genInputTestId('test');
-const onValueChange = vi.fn();
-const onValueBlur = vi.fn();
-
-const TextInputTest = (
-  props: Pick<
-    ComponentProps<typeof TextInput>,
-    'allowClear' | 'value' | 'defaultValue' | 'disabled'
-  >,
-) => (
-  <TextInput
-    testId={testId.toString()}
-    onValueChange={onValueChange}
-    onValueBlur={onValueBlur}
-    {...props}
-  />
-);
-
-describe('<TextInput/>', () => {
-  it('should correctly call onValueChange with value as param', async () => {
-    render(<TextInputTest defaultValue="hello" />);
-    const el = screen.getByTestId<HTMLInputElement>(testId.input);
-
-    expect(el.value).toBe('hello');
-
-    await act(async () => {
-      await userEvent.type(el, ' world');
-    });
-
-    expect(onValueChange).toBeCalledTimes(6);
-    expect(onValueChange).toBeCalledWith('hello world');
-    expect(el.value).toBe('hello world');
-
-    // Simulate tabbing away from the input
-    await act(async () => {
-      await userEvent.tab();
-    });
-
-    expect(onValueBlur).toBeCalledTimes(1);
-    expect(onValueBlur).toBeCalledWith('hello world');
-    expect(el.value).toBe('hello world');
-  });
-});

package/src/components/Input/TextInput/TextInput.tsx

@@ -1,73 +0,0 @@
-import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
-
-import { Input } from '../Input';
-
-type NativeProps = Omit<
-  ComponentProps<typeof Input>,
-  'type' | 'value' | 'defaultValue' | 'accept' | 'step'
->;
-
-type OwnProps = {
-  value?: string | null;
-  defaultValue?: string | null;
-  /** Called with the unwrapped string value on every change. For the raw event use `onChange`. */
-  onValueChange?: (value: string) => void;
-  /** Called with the unwrapped string value on blur. For the raw event use `onBlur`. */
-  onValueBlur?: (value: string) => void;
-  type?: 'text' | 'email' | 'password' | 'datetime-local' | 'date';
-};
-
-/**
- * Props for `TextInput`. Extends `Input` with string-typed `value` / `defaultValue` and convenience
- * `onValueChange` / `onValueBlur` callbacks. `null` / `undefined` are coerced to empty strings.
- */
-export type Props = OwnProps & NativeProps;
-
-const sanitizeTextInputValue = (value: string | null | undefined) => {
-  if (typeof value === 'string' && value.trim() === '') return '';
-  return value;
-};
-
-/**
- * Standard text input with a string-only API. The default choice for a bare text input.
- *
- * **When to use:** any plain text / email / password / date-input field outside `useAppForm`. Pair with
- * `onValueChange` instead of unwrapping `event.target.value` from `onChange`.
- * **When NOT to use:** for fields inside a labelled group use `FormGroup.TextInput`; for forms with
- * validation use `useAppForm` + `field.TextField`; for search use `SearchInput`.
- * **Composition:** wrap in a `FormGroup` for shared error / help-text state, or render directly inside
- * page layouts. In kbc-ui forms prefer `variant="secondary"` (gray background).
- */
-export const TextInput = ({
-  ref,
-  value,
-  defaultValue,
-  type = 'text',
-  onValueChange,
-  onChange,
-  onValueBlur,
-  onBlur,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    onValueChange?.(event.target.value);
-    onChange?.(event);
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    onValueBlur?.(event.target.value);
-    onBlur?.(event);
-  };
-
-  return (
-    <Input
-      {...props}
-      ref={ref}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      type={type}
-      value={sanitizeTextInputValue(value)}
-      defaultValue={sanitizeTextInputValue(defaultValue)}
-    />
-  );
-};

package/src/components/Input/TextInput/index.ts

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

package/src/components/Input/TimeInput/TimeInput.stories.tsx

@@ -1,89 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Button } from '../../Button/Button';
-import { Label } from '../../Label';
-import { DateInput } from '../DateInput';
-
-import { TimeInput } from './TimeInput';
-
-type Story = StoryObj<typeof TimeInput>;
-
-export default {
-  component: TimeInput,
-  args: {
-    placeholder: 'Placeholder',
-    variant: 'primary',
-    state: 'default',
-    allowClear: false,
-    readOnly: false,
-    disabled: false,
-    focusVariant: 'default',
-
-    onValueChange: action('onValueChange'),
-    onValueBlur: action('onValueBlur'),
-  },
-} satisfies Meta<typeof TimeInput>;
-
-export const Basic: Story = {};
-
-const ControlledDemo = (props: ComponentProps<typeof TimeInput>) => {
-  const [value, setValue] = useState<string | null>('');
-  return <TimeInput {...props} value={value} onValueChange={setValue} />;
-};
-
-export const Controlled: Story = {
-  render: ControlledDemo,
-};
-
-const UncontrolledDemo = (props: ComponentProps<typeof TimeInput>) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const values = new FormData(event.currentTarget);
-    action('onSubmit')(Object.fromEntries(values.entries()));
-  };
-
-  return (
-    <form className="tw-flex tw-gap-2" onSubmit={handleSubmit}>
-      <TimeInput
-        {...props}
-        onValueChange={action('onValueChange')}
-        onValueBlur={action('onValueBlur')}
-      />
-      <Button type="submit">Submit</Button>
-    </form>
-  );
-};
-
-export const Uncontrolled: Story = {
-  render: UncontrolledDemo,
-  args: {
-    defaultValue: '12:00',
-    allowClear: true,
-    name: 'uncontrolled-time-input',
-  },
-};
-
-const DateTimeDemo = () => {
-  const [date, setDate] = useState<Date | null>(() => new Date('2026-01-06'));
-  const [time, setTime] = useState<string | null>('14:30');
-
-  return (
-    <div className="tw-flex tw-items-end tw-gap-4">
-      <div className="tw-flex tw-flex-col tw-gap-1">
-        <Label>Date</Label>
-        <DateInput value={date} onValueChange={setDate} onValueBlur={setDate} focusVariant="off" />
-      </div>
-      <div className="tw-flex tw-flex-col tw-gap-1">
-        <Label>Time</Label>
-        <TimeInput value={time} onValueChange={setTime} />
-      </div>
-    </div>
-  );
-};
-
-export const DateTimePicker: Story = {
-  render: DateTimeDemo,
-};