@keboola/design 1.0.0

package/src/components/Input/DateInput/helpers.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest';
+
+import { formatDate, parseDate } from './helpers';
+
+describe('formatDate', () => {
+  it('should return formatted date string when date is provided', () => {
+    const date = new Date('2024-01-15');
+    const result = formatDate(date, '');
+
+    expect(result).toBe(date.toLocaleDateString());
+  });
+
+  it('should return inputValue when date is undefined', () => {
+    const inputValue = 'custom input';
+    const result = formatDate(undefined, inputValue);
+
+    expect(result).toBe(inputValue);
+  });
+
+  it('should return inputValue when date is null', () => {
+    const inputValue = 'custom input';
+    const result = formatDate(null, inputValue);
+
+    expect(result).toBe(inputValue);
+  });
+
+  it('should return empty string when date is undefined and inputValue is empty', () => {
+    const result = formatDate(undefined, '');
+
+    expect(result).toBe('');
+  });
+});
+
+describe('parseDate', () => {
+  it('should parse valid date string', () => {
+    const result = parseDate('2024-01-15');
+
+    expect(result).toBeInstanceOf(Date);
+    expect(result?.getFullYear()).toBe(2024);
+    expect(result?.getMonth()).toBe(0); // January is 0
+    expect(result?.getDate()).toBe(15);
+  });
+
+  it('should return null for empty string', () => {
+    const result = parseDate('');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for whitespace-only string', () => {
+    const result = parseDate('   ');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for invalid date string', () => {
+    const result = parseDate('not a date');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for partially invalid date', () => {
+    const result = parseDate('2024-13-99');
+
+    expect(result).toBeNull();
+  });
+
+  it('should parse various date formats', () => {
+    const formats = ['2024-01-15', 'Jan 15, 2024', '01/15/2024', '2024/01/15'];
+
+    formats.forEach((format) => {
+      const result = parseDate(format);
+      expect(result).toBeInstanceOf(Date);
+      expect(isNaN(result!.getTime())).toBe(false);
+    });
+  });
+
+  it('should round-trip with toLocaleDateString', () => {
+    const original = new Date(2026, 3, 19); // April 19, 2026
+    const formatted = original.toLocaleDateString();
+    const parsed = parseDate(formatted);
+
+    expect(parsed).toBeInstanceOf(Date);
+    expect(parsed?.getFullYear()).toBe(2026);
+    expect(parsed?.getMonth()).toBe(3);
+    expect(parsed?.getDate()).toBe(19);
+  });
+
+  it('should correctly parse edited locale date without day/month swap', () => {
+    // Simulates: user sees "19. 4. 2026" (or locale equivalent), edits day to 1
+    const original = new Date(2026, 3, 19); // April 19
+    const formatted = original.toLocaleDateString(); // e.g. "19. 4. 2026" or "4/19/2026"
+    // Replace the day number with 1
+    const edited = formatted.replace('19', '1');
+    const parsed = parseDate(edited);
+
+    expect(parsed).toBeInstanceOf(Date);
+    expect(parsed?.getFullYear()).toBe(2026);
+    expect(parsed?.getMonth()).toBe(3); // April
+    expect(parsed?.getDate()).toBe(1);
+  });
+});

package/src/components/Input/DateInput/helpers.ts

@@ -0,0 +1,59 @@
+export const formatDate = (date: Date | null | undefined, inputValue: string): string => {
+  if (!date) {
+    return inputValue;
+  }
+  return date.toLocaleDateString();
+};
+
+// Detect locale day/month/year order once, matching toLocaleDateString() output
+const datePartOrder = new Intl.DateTimeFormat()
+  .formatToParts(new Date(2000, 0, 2))
+  .filter(
+    (p): p is { type: 'day' | 'month' | 'year'; value: string } =>
+      p.type === 'day' || p.type === 'month' || p.type === 'year',
+  )
+  .map((p) => p.type);
+
+export const parseDate = (value: string): Date | null => {
+  if (!value.trim()) return null;
+
+  // Try locale-aware parsing first (matches toLocaleDateString round-trip)
+  const nums = value.match(/\d+/g)?.map(Number);
+  if (nums && nums.length >= 3) {
+    const parts = Object.fromEntries(datePartOrder.map((type, i) => [type, nums[i]]));
+    const year = parts.year;
+    const month = parts.month;
+    const day = parts.day;
+
+    if (
+      year != null &&
+      month != null &&
+      day != null &&
+      month >= 1 &&
+      month <= 12 &&
+      day >= 1 &&
+      day <= 31
+    ) {
+      const date = new Date(year, month - 1, day);
+      if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {
+        return date;
+      }
+    }
+  }
+
+  // Fallback: detect ISO YYYY-MM-DD and construct as local midnight to avoid UTC offset issues
+  const isoMatch = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+  if (isoMatch) {
+    const y = Number(isoMatch[1]);
+    const m = Number(isoMatch[2]) - 1;
+    const d = Number(isoMatch[3]);
+    const date = new Date(y, m, d);
+    if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d) {
+      return date;
+    }
+    return null;
+  }
+
+  const fallback = new Date(value);
+  return isNaN(fallback.getTime()) ? null : fallback;
+};

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

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

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

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import type { DateRange } from 'react-day-picker';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DateRangeInput } from './DateRangeInput';
+
+type Story = StoryObj<typeof DateRangeInput>;
+
+export default {
+  component: DateRangeInput,
+  args: {
+    allowClear: false,
+    disabled: false,
+    focusVariant: 'off',
+    endMonth: new Date(2050, 11), // Allow dates up to December 2050
+    readOnly: false,
+    startMonth: new Date(1900, 0), // Allow dates from January 1900
+  },
+} satisfies Meta<typeof DateRangeInput>;
+
+const defaultRange: DateRange = {
+  from: new Date('2026-01-06'),
+  to: new Date('2026-01-10'),
+};
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<DateRange | null>(defaultRange);
+
+    return (
+      <DateRangeInput {...args} value={value} onValueChange={setValue} onValueBlur={setValue} />
+    );
+  },
+};
+
+export const Empty: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<DateRange | null>(null);
+
+    return (
+      <DateRangeInput {...args} value={value} onValueChange={setValue} onValueBlur={setValue} />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<DateRange | null>(defaultRange);
+
+    return <DateRangeInput {...args} disabled value={value} onValueChange={setValue} />;
+  },
+};
+
+export const ReadOnly: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<DateRange | null>(defaultRange);
+
+    return <DateRangeInput {...args} readOnly value={value} onValueChange={setValue} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: (args) => {
+    return <DateRangeInput {...args} defaultValue={defaultRange} />;
+  },
+};

package/src/components/Input/DateRangeInput/DateRangeInput.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
+import type { DateRange } from 'react-day-picker';
+
+import { Button } from '../../Button';
+import { DatePicker } from '../../DatePicker';
+import { Input } from '../Input';
+
+import { formatDateRange, parseDateRange } from './helpers';
+
+type InputProps = ComponentProps<typeof Input>;
+
+type Props = Omit<InputProps, 'type' | 'value' | 'defaultValue'> & {
+  defaultValue?: DateRange | null;
+  endMonth?: Date;
+  onValueBlur?: (value: DateRange | null) => void;
+  onValueChange?: (value: DateRange | null) => void;
+  startMonth?: Date;
+  value?: DateRange | null;
+};
+
+export const DateRangeInput = ({
+  ref,
+  defaultValue,
+  disabled,
+  endMonth,
+  onBlur,
+  onChange,
+  onValueBlur,
+  onValueChange,
+  placeholder = 'Select a date range',
+  readOnly,
+  startMonth,
+  value,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
+  const [inputValue, setInputValue] = useState('');
+  const [hasFocus, setHasFocus] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<DateRange | null>(defaultValue ?? null);
+  const [month, setMonth] = useState<Date>(new Date());
+
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    onChange?.(event);
+
+    const parsedRange = parseDateRange(newValue);
+    if (parsedRange !== null || !newValue.trim()) {
+      onValueChange?.(parsedRange);
+    }
+  };
+
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
+    const formatted = formatDateRange(currentValue, '');
+    setInputValue(formatted);
+    setHasFocus(true);
+    props.onFocus?.(event);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setHasFocus(false);
+    onBlur?.(event);
+
+    const parsedRange = parseDateRange(event.target.value);
+    onValueBlur?.(parsedRange);
+
+    if (!isControlled) {
+      setInternalValue(parsedRange);
+    }
+  };
+
+  const handleDatePickerChange = (newValue: DateRange | undefined) => {
+    const rangeValue = newValue ?? null;
+
+    if (isControlled) {
+      onValueChange?.(rangeValue);
+    } else {
+      setInternalValue(rangeValue);
+      onValueChange?.(rangeValue);
+    }
+
+    setHasFocus(false);
+  };
+
+  const handleClear = () => {
+    setInputValue('');
+    setInternalValue(null);
+    onValueChange?.(null);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setMonth(currentValue?.from ?? new Date());
+    }
+    setIsOpen(open);
+  };
+
+  const displayValue = hasFocus ? inputValue : formatDateRange(currentValue, '');
+
+  return (
+    <Input
+      {...props}
+      disabled={disabled}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      onClear={handleClear}
+      onFocus={handleFocus}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      ref={ref}
+      value={displayValue}
+      rightSuffix={
+        !disabled && !readOnly ? (
+          <DatePicker
+            endMonth={endMonth}
+            mode="range"
+            month={month}
+            onMonthChange={setMonth}
+            onOpenChange={handleOpenChange}
+            onSelect={handleDatePickerChange}
+            open={isOpen}
+            startMonth={startMonth}
+            selected={currentValue ?? undefined}
+          >
+            <Button
+              aria-label="Select Date Range"
+              icon="calendar"
+              variant="inline"
+              size="icon-3xs"
+            />
+          </DatePicker>
+        ) : undefined
+      }
+      type="text"
+    />
+  );
+};

package/src/components/Input/DateRangeInput/helpers.test.ts

@@ -0,0 +1,146 @@
+import { describe, expect, it } from 'vitest';
+
+import { formatDateRange, parseDateRange } from './helpers';
+
+describe('formatDateRange', () => {
+  it('should return formatted date range when range is provided', () => {
+    const range = {
+      from: new Date('2024-01-15'),
+      to: new Date('2024-01-20'),
+    };
+    const result = formatDateRange(range, '');
+
+    const expectedFrom = range.from.toLocaleDateString();
+    const expectedTo = range.to.toLocaleDateString();
+    expect(result).toBe(`${expectedFrom} - ${expectedTo}`);
+  });
+
+  it('should return inputValue when range is undefined', () => {
+    const inputValue = 'custom input';
+    const result = formatDateRange(undefined, inputValue);
+
+    expect(result).toBe(inputValue);
+  });
+
+  it('should return inputValue when range is null', () => {
+    const inputValue = 'custom input';
+    const result = formatDateRange(null, inputValue);
+
+    expect(result).toBe(inputValue);
+  });
+
+  it('should handle range with only from date', () => {
+    const range = {
+      from: new Date('2024-01-15'),
+      to: undefined,
+    };
+    const result = formatDateRange(range, '');
+
+    const expectedFrom = range.from.toLocaleDateString();
+    expect(result).toBe(`${expectedFrom} - undefined`);
+  });
+
+  it('should handle range with only to date', () => {
+    const range = {
+      from: undefined,
+      to: new Date('2024-01-20'),
+    };
+    const result = formatDateRange(range, '');
+
+    const expectedTo = range.to.toLocaleDateString();
+    expect(result).toBe(`undefined - ${expectedTo}`);
+  });
+});
+
+describe('parseDateRange', () => {
+  it('should parse valid date range string', () => {
+    const result = parseDateRange('2024-01-15 - 2024-01-20');
+
+    expect(result).not.toBeNull();
+    expect(result?.from).toBeInstanceOf(Date);
+    expect(result?.to).toBeInstanceOf(Date);
+    expect(result?.from?.getFullYear()).toBe(2024);
+    expect(result?.from?.getMonth()).toBe(0);
+    expect(result?.from?.getDate()).toBe(15);
+    expect(result?.to?.getFullYear()).toBe(2024);
+    expect(result?.to?.getMonth()).toBe(0);
+    expect(result?.to?.getDate()).toBe(20);
+  });
+
+  it('should return null for empty string', () => {
+    const result = parseDateRange('');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for string without separator', () => {
+    const result = parseDateRange('2024-01-15');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for string with only one date', () => {
+    const result = parseDateRange('2024-01-15 - ');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for invalid from date', () => {
+    const result = parseDateRange('invalid - 2024-01-20');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for invalid to date', () => {
+    const result = parseDateRange('2024-01-15 - invalid');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for both invalid dates', () => {
+    const result = parseDateRange('invalid - invalid');
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null for date range without spaces around separator', () => {
+    const result = parseDateRange('2024-01-15-2024-01-20');
+
+    expect(result).toBeNull();
+  });
+
+  it('should handle date range with extra spaces before/after parts', () => {
+    const result = parseDateRange('  2024-01-15   - 2024-01-20  ');
+
+    expect(result).not.toBeNull();
+    expect(result?.from).toBeInstanceOf(Date);
+    expect(result?.to).toBeInstanceOf(Date);
+  });
+
+  it('should return null for multiple separators', () => {
+    const result = parseDateRange('2024-01-15 - 2024-01-20 - 2024-01-25');
+
+    expect(result).toBeNull();
+  });
+
+  it('should parse various date formats in range', () => {
+    const validRanges = [
+      'Jan 15, 2024 - Jan 20, 2024',
+      '01/15/2024 - 01/20/2024',
+      '2024/01/15 - 2024/01/20',
+    ];
+
+    validRanges.forEach((rangeStr) => {
+      const result = parseDateRange(rangeStr);
+      expect(result).not.toBeNull();
+      expect(result?.from).toBeInstanceOf(Date);
+      expect(result?.to).toBeInstanceOf(Date);
+      if (result?.from) {
+        expect(isNaN(result.from.getTime())).toBe(false);
+      }
+      if (result?.to) {
+        expect(isNaN(result.to.getTime())).toBe(false);
+      }
+    });
+  });
+});

package/src/components/Input/DateRangeInput/helpers.ts

@@ -0,0 +1,36 @@
+import type { DateRange } from 'react-day-picker';
+
+export const formatDateRange = (
+  range: DateRange | null | undefined,
+  inputValue: string,
+): string => {
+  if (!range) {
+    return inputValue;
+  }
+
+  const { from, to } = range;
+  const fromStr = from?.toLocaleDateString();
+  const toStr = to?.toLocaleDateString();
+  return `${fromStr} - ${toStr}`;
+};
+
+export const parseDateRange = (value: string): DateRange | null => {
+  const parts = value.split(' - ');
+  if (parts.length !== 2) {
+    return null;
+  }
+
+  const [fromPart, toPart] = parts;
+  if (!fromPart || !toPart) {
+    return null;
+  }
+
+  const from = new Date(fromPart.trim());
+  const to = new Date(toPart.trim());
+
+  if (isNaN(from.getTime()) || isNaN(to.getTime())) {
+    return null;
+  }
+
+  return { from, to };
+};

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

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

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

@@ -0,0 +1,93 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '../Icon';
+
+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: <Icon className="tw-text-neutral-400" icon="magnifying-glass" />,
+  },
+};
+
+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,
+  },
+};