@keboola/design 1.0.0

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

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

@@ -0,0 +1,147 @@
+import { useRef, useState } from 'react';
+import type {
+  ChangeEventHandler,
+  ComponentProps,
+  ElementRef,
+  FocusEventHandler,
+  MouseEventHandler,
+  ReactNode,
+  Ref,
+} from 'react';
+
+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;
+};
+
+type Props = InputGroupProps &
+  OwnProps &
+  Omit<ComponentProps<'input'>, 'prefix' | 'value' | 'defaultValue'>;
+
+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
+              icon="xmark"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={handleClear}
+              data-testid={testId.clearButton}
+            />
+          )}
+          {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

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

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

@@ -0,0 +1,57 @@
+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;
+  onValueChange?: (value: string) => void;
+  onValueBlur?: (value: string) => void;
+  type?: 'text' | 'email' | 'password' | 'datetime-local' | 'date';
+};
+
+export type Props = OwnProps & NativeProps;
+
+const sanitizeTextInputValue = (value: string | null | undefined) => {
+  if (typeof value === 'string' && value.trim() === '') return '';
+  return value;
+};
+
+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

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

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

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

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

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
+
+import { cn } from '../../../utils';
+import { Button } from '../../Button';
+import { TimePicker } from '../../TimePicker';
+import { Input } from '../Input';
+
+type InputProps = ComponentProps<typeof Input>;
+
+type Props = Omit<
+  InputProps,
+  'type' | 'value' | 'defaultValue' | 'rightSuffix' | 'rightSuffixVariant'
+> & {
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  onValueBlur?: (value: string | null) => void;
+};
+
+export const TimeInput = ({
+  ref,
+  defaultValue,
+  disabled,
+  onBlur,
+  onChange,
+  onValueBlur,
+  onValueChange,
+  placeholder = 'Select time',
+  readOnly,
+  value,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<string | null>(defaultValue ?? null);
+
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const newValue = event.target.value || null;
+    onChange?.(event);
+    onValueChange?.(newValue);
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    const newValue = event.target.value || null;
+    onBlur?.(event);
+    onValueBlur?.(newValue);
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+  };
+
+  const handleTimePickerSelect = (time: string) => {
+    if (!isControlled) setInternalValue(time);
+    onValueChange?.(time);
+  };
+
+  const handleClear = () => {
+    if (!isControlled) setInternalValue(null);
+    onValueChange?.(null);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  return (
+    <Input
+      {...props}
+      ref={ref}
+      type="time"
+      disabled={disabled}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      // hide native time picker indicator to avoid confusion with custom picker
+      className={cn('[&_input::-webkit-calendar-picker-indicator]:tw-hidden', className)}
+      value={currentValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onClear={currentValue ? handleClear : undefined}
+      rightSuffix={
+        !disabled && !readOnly ? (
+          <TimePicker
+            open={isOpen}
+            onOpenChange={handleOpenChange}
+            onSelect={handleTimePickerSelect}
+            selected={currentValue}
+          >
+            <Button aria-label="Select Time" icon="clock" variant="inline" size="icon-3xs" />
+          </TimePicker>
+        ) : undefined
+      }
+    />
+  );
+};

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

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

package/src/components/Input/index.ts

@@ -0,0 +1,4 @@
+export * from './DateInput';
+export * from './DateRangeInput';
+export * from './TextInput';
+export * from './TimeInput';

package/src/components/Input/utils.ts

@@ -0,0 +1,11 @@
+import { createPrefixedString } from '../../utils';
+
+export const genInputTestId = (prefix: string = '') => {
+  const ps = createPrefixedString(prefix);
+  return {
+    toString: () => prefix,
+    inputWrapper: ps`input-wrapper`,
+    input: ps`input`,
+    clearButton: ps`clear-button`,
+  };
+};