uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Datepicker/subcomponents/DateField/DateField.tsx

@@ -1,155 +0,0 @@
-import { css } from '@emotion/css';
-import { Icon } from '../../..';
-import { useTheme } from '../../../../theme';
-import { useState, useRef, useEffect } from 'react';
-import { parseDate } from '../../utils';
-
-interface DateFieldProps {
-  date: Date | null | undefined;
-  onChange: (date: Date | null | undefined) => void;
-  testId?: string;
-}
-
-const DateField = ({
-  date,
-  onChange,
-  testId,
-}: DateFieldProps) => {
-  const [theme] = useTheme();
-
-  // Derived props (tidier than using `date?.getDate()`, etc, everywhere.)
-  const day =
-    date?.getDate().toString().padStart(2, '0') ?? '';
-  const month = date
-    ? (date.getMonth() + 1).toString().padStart(2, '0')
-    : '';
-  const year = date?.getFullYear().toString() ?? '';
-
-  const [displayDate, setDisplayDate] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    // Format: DD/MM/YYYY
-    setDisplayDate(date ? `${day}/${month}/${year}` : '');
-  }, [date, day, month, year]);
-
-  /**
-   * Handles the change event for the date input field.
-   *
-   * This function ensures that only valid characters for a date are accepted
-   * in the input field. The accepted characters include digits (0-9), slashes (/),
-   * spaces, and hyphens (-). If the input contains any other characters, the function
-   * will not update the display date.
-   *
-   * @param event - The change event triggered by the input field.
-   */
-  const handleInputChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    // Accepted characters: 0-9, /, space, hyphen
-    const regex = new RegExp('^[0123456789\\/ \\-]*$');
-    if (!regex.test(event.target.value)) return;
-
-    setDisplayDate(event.target.value);
-  };
-
-  const resetDate = () => {
-    setDisplayDate(date ? `${day}/${month}/${year}` : '');
-  };
-
-  const handleParseDate = () => {
-    const parsedDate = parseDate(displayDate);
-    if (parsedDate) onChange(parsedDate);
-    else resetDate();
-  };
-
-  const handleInputKeyDown = (
-    event: React.KeyboardEvent<HTMLDivElement>
-  ) => {
-    if (event.key === 'Enter') handleParseDate();
-    else if (event.key === 'Escape') resetDate();
-  };
-
-  const handleKeyDownEventPropagation = (
-    event: React.KeyboardEvent<HTMLDivElement>
-  ) => {
-    // Prevent event bubbling any further, so arrow keys presses don't affect `<CalendarGrid>`
-    event.stopPropagation();
-  };
-
-  const containerStyle = css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 200px;
-    height: 48px;
-    padding: 0 16px;
-    border: 1px solid ${theme.color.neutral.grey60};
-    color: ${theme.color.neutral.black};
-    background-color: ${theme.color.neutral.white};
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: ${theme.boxShadow.focus};
-    }
-  `;
-
-  const inputStyle = css`
-    width: 150px;
-    font-family: ${theme.font.family.primary};
-    font-size: 16px;
-    text-align: left;
-    border: none;
-    padding: 6px;
-    letter-spacing: 1px;
-    color: ${theme.color.text.primary};
-    caret-color: ${theme.color.text.primary};
-
-    &::placeholder {
-      color: ${theme.color.neutral.grey40};
-    }
-
-    &::selection {
-      background-color: ${theme.color.neutral.grey60};
-      color: ${theme.color.neutral.white};
-    }
-
-    &:focus {
-      outline: none;
-      background-color: ${theme.color.interaction.blue10};
-    }
-  `;
-
-  return (
-    <div
-      className={containerStyle}
-      role='group'
-      aria-label='Date input'
-      onBlur={handleParseDate}
-      onClick={() => inputRef.current?.focus()}
-      data-testid={testId + '-date-field'}
-    >
-      <div onKeyDown={handleKeyDownEventPropagation}>
-        <input
-          className={inputStyle}
-          value={displayDate}
-          placeholder='DD/MM/YYYY'
-          onChange={handleInputChange}
-          onKeyDown={handleInputKeyDown}
-          type='text'
-          inputMode='numeric'
-          ref={inputRef}
-          aria-label='Date'
-          data-testid={testId + '-input'}
-        />
-      </div>
-      <Icon.Calendar
-        onClick={handleParseDate}
-        data-testid={testId + '-calendar-icon'}
-      />
-    </div>
-  );
-};
-
-export default DateField;

package/lib/components/Datepicker/subcomponents/DateField/__tests__/DateField.test.tsx

@@ -1,191 +0,0 @@
-import {
-  describe,
-  test,
-  expect,
-  vi,
-  afterEach,
-} from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-} from '@testing-library/react';
-import { ThemeContextProvider } from '../../../../../theme';
-import DateField from '../DateField';
-
-const customRender = (ui: React.ReactElement) => {
-  return render(ui, {
-    wrapper: ({ children }) => (
-      <ThemeContextProvider>
-        {children}
-      </ThemeContextProvider>
-    ),
-  });
-};
-
-describe('DateField', () => {
-  // Run cleanup after each test
-  afterEach(() => {
-    cleanup();
-    vi.resetAllMocks();
-  });
-
-  test('Renders without crashing', () => {
-    const testId = 'abc';
-    customRender(
-      <DateField
-        date={null}
-        onChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const dateField = screen.getByTestId(
-      testId + '-date-field'
-    );
-    expect(dateField).toBeInTheDocument();
-  });
-
-  test('Displays placeholder text when `date` prop is null', () => {
-    const testId = 'abc';
-    customRender(
-      <DateField
-        date={null}
-        onChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-    expect(inputField.placeholder).toBe('DD/MM/YYYY');
-  });
-
-  test('Displays the correct date values when a date is present', () => {
-    const testId = 'abc';
-    const date = new Date('2025-02-01');
-    customRender(
-      <DateField
-        date={date}
-        onChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-    expect(inputField.value).toBe('01/02/2025');
-  });
-
-  test('Updates date value (from null)', () => {
-    const testId = 'abc';
-    const date = new Date('2025-02-01');
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={null}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    fireEvent.change(inputField, {
-      target: { value: '01/02/2025' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(date);
-  });
-
-  test('Updates date value (from existing date)', () => {
-    const testId = 'abc';
-    const date = new Date('2025-01-01');
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={date}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    fireEvent.change(inputField, {
-      target: { value: '01/02/2025' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2025-02-01')
-    );
-  });
-
-  test('Handles alternative date formats', () => {
-    const testId = 'abc';
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={null}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    // With 1 digit for day and month, and 2 digits for year
-    fireEvent.change(inputField, {
-      target: { value: '3/2/25' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2025-02-03')
-    );
-
-    // With hyphens
-    fireEvent.change(inputField, {
-      target: { value: '20-03-2026' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2026-03-20')
-    );
-
-    // With spaces
-    fireEvent.change(inputField, {
-      target: { value: '10 11 27' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2027-11-10')
-    );
-  });
-
-  test('Resets date value on ESCAPE key press', () => {
-    const testId = 'abc';
-    const date = new Date('2025-01-01');
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={date}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    fireEvent.change(inputField, {
-      target: { value: '10/10/2026' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Escape' });
-    expect(inputField.value).toBe('01/01/2025');
-  });
-
-  // Any further tests can be added here
-});

package/lib/components/Datepicker/subcomponents/DateField/index.ts

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

package/lib/components/Datepicker/subcomponents/Day/index.ts

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

package/lib/components/Datepicker/subcomponents/MonthSelector/index.ts

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

package/lib/components/Datepicker/subcomponents/Native/Native.tsx

@@ -1,59 +0,0 @@
-import { css } from '@emotion/css';
-import { theme } from '../../../../theme';
-
-interface NativeProps {
-  date?: Date | null | undefined;
-  minDate?: Date | null | undefined;
-  maxDate?: Date | null | undefined;
-  onDateChange?: (date: Date | null | undefined) => void;
-  testId?: string;
-}
-
-const Native = ({
-  date,
-  minDate,
-  maxDate,
-  onDateChange,
-  testId,
-  ...props
-}: NativeProps) => {
-  const inputStyle = css`
-    width: 200px;
-    height: 48px;
-    padding: 0 16px;
-    border: 1px solid #000;
-    color: #1a1a1a;
-    font-size: 16px;
-    font-family: sans-serif;
-    text-transform: uppercase;
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: ${theme.boxShadow.focus};
-    }
-  `;
-
-  const handleChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => onDateChange?.(event.target.valueAsDate);
-
-  return (
-    <input
-      type='date'
-      value={date ? date.toISOString().split('T')[0] : ''}
-      min={
-        minDate ? minDate.toISOString().split('T')[0] : ''
-      }
-      max={
-        maxDate ? maxDate.toISOString().split('T')[0] : ''
-      }
-      onChange={handleChange}
-      className={inputStyle}
-      data-testid={testId}
-      {...props}
-    />
-  );
-};
-
-export default Native;

package/lib/components/Datepicker/subcomponents/Native/index.ts

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

package/lib/components/Datepicker/utils/parseDateForDateField/parseDateForDateField.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import parseDateForDateField from './parseDateForDateField';
-
-describe('parseDateForDateField', () => {
-  test('Parses a valid slash-separated date string', () => {
-    const dateString = '02/03/2025';
-    const expectedDate = new Date('2025-03-02');
-    expect(parseDateForDateField(dateString)).toEqual(
-      expectedDate
-    );
-  });
-
-  test('Parses a valid hyphen-separated date string', () => {
-    const dateString = '01-02-2025';
-    const expectedDate = new Date('2025-02-01');
-    expect(parseDateForDateField(dateString)).toEqual(
-      expectedDate
-    );
-  });
-
-  test('Parses a valid space-separated date string', () => {
-    const dateString = '10 11 2025';
-    const expectedDate = new Date('2025-11-10');
-    expect(parseDateForDateField(dateString)).toEqual(
-      expectedDate
-    );
-  });
-
-  test('Parses a valid date string with leading/trailing whitespace', () => {
-    const dateString = '    11-12-2025    ';
-    const expectedDate = new Date('2025-12-11');
-    expect(parseDateForDateField(dateString)).toEqual(
-      expectedDate
-    );
-  });
-
-  test('Invalid date string returns null', () => {
-    const dateString = '1234567890';
-    expect(parseDateForDateField(dateString)).toBeNull();
-  });
-});

package/lib/components/Datepicker/utils/parseDateForDateField/parseDateForDateField.ts

@@ -1,48 +0,0 @@
-/**
- * Parses a date string and returns a `Date` object.
- *
- * Can handle date strings entered by the user as "day/month/year", "day month year", or "day-month-year".
- * If the date is not in the expected format or contains invalid numbers, it returns `null`.
- *
- * Used solely by `<DateField>` component.
- *
- * - A one-digit or two-digit year is assumed to be in the 21st century (e.g., '21' becomes '2021').
- *
- * @param {string} dateString - The date string to be parsed.
- *
- * @future Any additional validation logic for dates entered by the user should be added here.
- * For example, supporting formats like "day / month / year" (separated with a space and a slash)
- * or "daymonthyear" (without spaces or separators).
- *
- * @returns {void}
- */
-const parseDate = (dateString: string) => {
-  // Remove any leading or trailing whitespace and split the string into parts,
-  // separated by a slash, space, or hyphen
-  const dateParts = dateString.trim().split(/[-/ ]/);
-  if (dateParts.length !== 3) {
-    return null;
-  }
-
-  const parsedDay = parseInt(dateParts[0], 10); // (Second argument is just for base 10 -- decimal)
-  const parsedMonth = parseInt(dateParts[1], 10);
-  let parsedYear = parseInt(dateParts[2], 10);
-  if (
-    isNaN(parsedDay) ||
-    isNaN(parsedMonth) ||
-    isNaN(parsedYear)
-  ) {
-    return null;
-  }
-
-  // We can assume a one-digit or two-digit year is in the 21st century
-  if (
-    parsedYear.toString().length === 2 ||
-    parsedYear.toString().length === 1
-  )
-    parsedYear += 2000;
-
-  return new Date(parsedYear, parsedMonth - 1, parsedDay); // month is 0-indexed
-};
-
-export default parseDate;