@keboola/design 2.0.0 → 2.1.0

package/src/components/Input/DateInput/DateInput.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react';
-import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
-import type { Matcher } from 'react-day-picker';
-
-import { Calendar as CalendarIcon } from '../../../icons';
-import { Button } from '../../Button';
-import { DatePicker } from '../../DatePicker';
-import { Input } from '../Input';
-
-import { formatDate, parseDate } from './helpers';
-
-type InputProps = ComponentProps<typeof Input>;
-
-type Props = Omit<InputProps, 'type' | 'value' | 'defaultValue'> & {
-  defaultValue?: Date | null;
-  disabledDays?: Matcher | Matcher[];
-  endMonth?: Date;
-  onValueBlur?: (value: Date | null) => void;
-  onValueChange?: (value: Date | null) => void;
-  startMonth?: Date;
-  value?: Date | null;
-};
-
-export const DateInput = ({
-  ref,
-  defaultValue,
-  disabled,
-  disabledDays,
-  endMonth,
-  onBlur,
-  onChange,
-  onValueBlur,
-  onValueChange,
-  placeholder = 'Select a date',
-  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<Date | 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 parsedDate = parseDate(newValue);
-    if (parsedDate !== null || !newValue.trim()) {
-      onValueChange?.(parsedDate);
-    }
-  };
-
-  const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
-    const formatted = formatDate(currentValue, '');
-    setInputValue(formatted);
-    setHasFocus(true);
-    props.onFocus?.(event);
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    setHasFocus(false);
-    onBlur?.(event);
-
-    const parsedDate = parseDate(event.target.value);
-    onValueBlur?.(parsedDate);
-
-    if (!isControlled) {
-      setInternalValue(parsedDate);
-    }
-  };
-
-  const handleDatePickerChange = (newValue?: Date) => {
-    const dateValue = newValue ?? null;
-
-    if (isControlled) {
-      onValueChange?.(dateValue);
-    } else {
-      setInternalValue(dateValue);
-      onValueChange?.(dateValue);
-    }
-
-    setHasFocus(false);
-    setIsOpen(false);
-  };
-
-  const handleClear = () => {
-    setInputValue('');
-    setInternalValue(null);
-    onValueChange?.(null);
-  };
-
-  const handleOpenChange = (open: boolean) => {
-    if (open) {
-      setMonth(currentValue ?? new Date());
-    }
-    setIsOpen(open);
-  };
-
-  const displayValue = hasFocus ? inputValue : formatDate(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
-            disabled={disabledDays}
-            endMonth={endMonth}
-            mode="single"
-            month={month}
-            onMonthChange={setMonth}
-            onOpenChange={handleOpenChange}
-            onSelect={handleDatePickerChange}
-            open={isOpen}
-            selected={currentValue ?? undefined}
-            startMonth={startMonth}
-          >
-            <Button aria-label="Select Date" variant="inline" size="icon-3xs">
-              <CalendarIcon className="tw-size-4" />
-            </Button>
-          </DatePicker>
-        ) : undefined
-      }
-      type="text"
-    />
-  );
-};

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

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

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

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

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

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

@@ -1,139 +0,0 @@
-import { useState } from 'react';
-import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
-import type { DateRange } from 'react-day-picker';
-
-import { Calendar as CalendarIcon } from '../../../icons';
-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" variant="inline" size="icon-3xs">
-              <CalendarIcon className="tw-size-4" />
-            </Button>
-          </DatePicker>
-        ) : undefined
-      }
-      type="text"
-    />
-  );
-};

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

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

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

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