uikit-react-public 0.11.13

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

@@ -0,0 +1,59 @@
+import { css } from '@emotion/css';
+import { ColumnHeadings, Day } from '../';
+import useTheme from '../../../../theme/useTheme';
+import { getDatesForCalendarGrid } from '../../utils';
+
+interface CalendarGridProps {
+  date: Date | null | undefined;
+  onDatePick: (date: Date) => void;
+}
+
+const CalendarGrid = ({
+  date,
+  onDatePick,
+}: CalendarGridProps) => {
+  const [theme] = useTheme();
+
+  const dates = date
+    ? getDatesForCalendarGrid(date)
+    : getDatesForCalendarGrid(new Date());
+
+  const gridStyle = css`
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+    text-align: center;
+    font-family: ${theme.font.family.primary};
+    font-weight: 400;
+    user-select: none;
+  `;
+
+  return (
+    <div className={gridStyle}>
+      <ColumnHeadings />
+      {dates.map((mappedDate) => (
+        <Day
+          key={mappedDate.toISOString()}
+          date={mappedDate}
+          isSelected={
+            date?.toDateString() ===
+            mappedDate.toDateString()
+          }
+          isToday={
+            mappedDate.toDateString() ===
+            new Date().toDateString()
+          }
+          isInCurrentMonth={
+            date
+              ? mappedDate.getMonth() === date?.getMonth()
+              : mappedDate.getMonth() ===
+                new Date().getMonth()
+          }
+          onPick={onDatePick}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CalendarGrid;

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

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

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

@@ -0,0 +1,64 @@
+import { css } from '@emotion/css';
+import MonthSelector from '../MonthSelector';
+import CalendarGrid from '../CalendarGrid';
+import useTheme from '../../../../theme/useTheme';
+
+interface CalendarMenuProps {
+  date: Date | null | undefined;
+  setDate: (date: Date) => void;
+  onDatePick: () => void;
+  testId?: string;
+}
+
+const CalendarMenu = ({
+  date,
+  setDate,
+  onDatePick,
+  testId = 'ucl',
+}: CalendarMenuProps) => {
+  const [theme] = useTheme();
+
+  const onMonthChange = (change: number) => {
+    const newDate = date ? new Date(date) : new Date();
+    newDate.setMonth(newDate.getMonth() + change);
+    setDate(newDate);
+  };
+
+  const style = css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    width: 280px;
+    height: 320px;
+    z-index: 10;
+    position: absolute;
+    top: 60px;
+    border: 1px solid ${theme.color.neutral.grey20};
+    padding: 16px;
+    background-color: ${theme.color.neutral.white};
+  `;
+
+  const handlePick = (pickedDate: Date) => {
+    setDate(pickedDate);
+    onDatePick();
+  };
+
+  return (
+    <div
+      className={style}
+      data-testid={testId + '-calendar-menu'}
+    >
+      <MonthSelector
+        date={date}
+        changeMonth={onMonthChange}
+      />
+      <CalendarGrid
+        date={date}
+        onDatePick={handlePick}
+      />
+    </div>
+  );
+};
+
+export default CalendarMenu;

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

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

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

@@ -0,0 +1,35 @@
+import { css } from '@emotion/css';
+import { useTheme } from '../../../../theme';
+
+const ColumnHeadings = () => {
+  const [theme] = useTheme();
+
+  const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+  const headingStyle = (isWeekend: boolean) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 32px;
+    color: ${isWeekend
+      ? theme.color.system.orange100
+      : theme.color.neutral.grey60};
+    font-weight: 700;
+  `;
+
+  return (
+    <>
+      {days.map((day, index) => (
+        <div
+          key={index}
+          className={headingStyle(index >= 5)}
+        >
+          {day}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default ColumnHeadings;

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

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

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

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

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

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

package/lib/components/Datepicker/subcomponents/Day/Day.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Day from './Day';
+
+const meta = {
+  title: 'Components/Work in progress/Datepicker/Day',
+  component: Day,
+} satisfies Meta<typeof Day>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    date: new Date(),
+  },
+  render: (args) => {
+    args.date = args.date ? new Date(args.date) : null;
+    return <Day {...args} />;
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    date: new Date(),
+    isSelected: true,
+  },
+  render: (args) => {
+    args.date = args.date ? new Date(args.date) : null;
+    return <Day {...args} />;
+  },
+};
+
+export const Today: Story = {
+  args: {
+    date: new Date(),
+    isToday: true,
+  },
+  render: (args) => {
+    args.date = args.date ? new Date(args.date) : null;
+    return <Day {...args} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    date: new Date(),
+    isDisabled: true,
+  },
+  render: (args) => {
+    args.date = args.date ? new Date(args.date) : null;
+    return <Day {...args} />;
+  },
+};
+
+export const NotInCurrentMonth: Story = {
+  args: {
+    date: new Date(),
+    isInCurrentMonth: false,
+  },
+  render: (args) => {
+    args.date = args.date ? new Date(args.date) : null;
+    return <Day {...args} />;
+  },
+};
+
+export const AlertOnPick: Story = {
+  name: '(Trigger alert on pick)',
+  args: {
+    date: new Date(),
+  },
+  render: (args) => {
+    args.date = args.date ? new Date(args.date) : null;
+    const onPick = (date: Date) => alert(`Picked date: ${date.toDateString()}`);
+    return (
+      <Day
+        {...args}
+        onPick={onPick}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,94 @@
+import { css } from '@emotion/css';
+import { useTheme } from '../../../../theme/';
+
+export interface DayProps {
+  date: Date | null | undefined;
+  isSelected?: boolean;
+  isToday?: boolean;
+  isInCurrentMonth?: boolean;
+  isDisabled?: boolean;
+  onPick?: (date: Date) => void;
+}
+
+const Day = ({
+  date,
+  isSelected,
+  isToday = false,
+  isInCurrentMonth = true,
+  isDisabled = false,
+  onPick,
+}: DayProps) => {
+  const [theme] = useTheme();
+
+  const onClick = () => {
+    if (date && onPick) onPick(date);
+  };
+
+  const backgroundStyle = css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: ${theme.color.neutral.white};
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: ${theme.color.neutral.grey10};
+    }
+
+    ${isSelected &&
+    css`
+      background-color: ${theme.color.interaction.blue70};
+      color: ${theme.color.text.inverted};
+
+      &:hover {
+        background-color: ${theme.color.interaction
+          .blue100};
+      }
+    `}
+    ${isDisabled &&
+    css`
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: ${theme.color.neutral.white};
+      }
+    `}
+  `;
+
+  const foregroundStyle = css`
+    font-family: ${theme.font.family.primary};
+    user-select: none;
+    font-size: 16px;
+
+    ${!isInCurrentMonth &&
+    css`
+      color: ${theme.color.neutral.grey40};
+    `}
+    ${isToday &&
+    css`
+      font-weight: 700;
+    `}
+    ${isDisabled &&
+    css`
+      color: ${theme.color.neutral.grey40};
+    `}
+  `;
+
+  return (
+    <div
+      className={backgroundStyle}
+      role='button'
+      aria-label={`Select ${date?.toDateString()}`}
+      onClick={onClick}
+    >
+      <div className={foregroundStyle}>
+        {date?.getDate()}
+      </div>
+    </div>
+  );
+};
+
+export default Day;

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

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