uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Timepicker/utils/convertDateToTimeString.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import convertDatetoTimeString from './convertDateToTimeString';
+
+describe('convertDatetoTimeString', () => {
+  it('should return a formatted time string for a valid Date object', () => {
+    const date = new Date();
+    date.setHours(9);
+    date.setMinutes(5);
+
+    const result = convertDatetoTimeString(date);
+    expect(result).toBe('09:05');
+  });
+
+  it('should handle single-digit hours and minutes correctly', () => {
+    const date = new Date();
+    date.setHours(3);
+    date.setMinutes(7);
+
+    const result = convertDatetoTimeString(date);
+    expect(result).toBe('03:07');
+  });
+
+  it('should handle double-digit hours and minutes correctly', () => {
+    const date = new Date();
+    date.setHours(12);
+    date.setMinutes(30);
+
+    const result = convertDatetoTimeString(date);
+    expect(result).toBe('12:30');
+  });
+
+  it('should return an empty string for null input', () => {
+    const result = convertDatetoTimeString(null);
+    expect(result).toBe('');
+  });
+
+  it('should handle midnight (00:00) correctly', () => {
+    const date = new Date();
+    date.setHours(0);
+    date.setMinutes(0);
+
+    const result = convertDatetoTimeString(date);
+    expect(result).toBe('00:00');
+  });
+
+  it('should handle the last minute of the day (23:59) correctly', () => {
+    const date = new Date();
+    date.setHours(23);
+    date.setMinutes(59);
+
+    const result = convertDatetoTimeString(date);
+    expect(result).toBe('23:59');
+  });
+});

package/lib/components/Timepicker/utils/convertDateToTimeString.ts

@@ -0,0 +1,10 @@
+const convertDatetoTimeString = (time: Date | null): string => {
+  if (!time) {
+    return '';
+  }
+  const hours = time.getHours().toString().padStart(2, '0');
+  const minutes = time.getMinutes().toString().padStart(2, '0');
+  return `${hours}:${minutes}`;
+};
+
+export default convertDatetoTimeString;

package/lib/components/Timepicker/utils/index.ts

@@ -0,0 +1 @@
+export { default as convertDatetoTimeString } from './convertDateToTimeString';

package/lib/components/WeekPicker/WeekPicker.tsx

@@ -0,0 +1,26 @@
+import { CustomDatepicker } from './subcomponents';
+import type { DatepickerProps } from '../Datepicker';
+
+const WeekPicker = ({
+  value,
+  onValueChange,
+  minDate,
+  maxDate,
+  disabled,
+  className,
+  ...props
+}: DatepickerProps) => {
+  return (
+    <CustomDatepicker
+      value={value}
+      onValueChange={onValueChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      className={className}
+      disabled={disabled}
+      {...props}
+    />
+  );
+};
+
+export default WeekPicker;

package/lib/components/WeekPicker/index.ts

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

package/lib/components/WeekPicker/subcomponents/CustomDatepicker.tsx

@@ -0,0 +1,298 @@
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { css, cx } from '@emotion/css';
+import { VisibleField } from './';
+import { Panel } from '../../Datepicker/subcomponents';
+import { Calendar, Icon, IconButton } from '../..';
+import { parseInputValue } from '../../Datepicker/utils';
+import type { DatepickerValue } from '../../Datepicker/Datepicker.types';
+import type { CalendarEvent, AcademicWeek } from '../../Calendar';
+
+interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: DatepickerValue;
+  onValueChange?: (
+    value: DatepickerValue,
+    event?: React.SyntheticEvent
+  ) => void;
+  minDate?: string | null; // ISO date string: YYYY-MM-DD
+  maxDate?: string | null; // ISO date string: YYYY-MM-DD
+  disabled?: boolean;
+  events?: CalendarEvent[];
+  showAcademicWeeks?: boolean;
+  academicWeeks?: AcademicWeek[];
+  testId?: string;
+  ref?: React.RefObject<HTMLDivElement>;
+  inputRef?: React.RefObject<HTMLInputElement>;
+}
+
+const NAME = 'ucl-uikit-weekpicker';
+
+const CustomDatepicker = ({
+  value = null,
+  onValueChange = () => {},
+  minDate,
+  maxDate,
+  disabled = false,
+  events,
+  showAcademicWeeks,
+  academicWeeks = [],
+  testId = NAME,
+  className,
+  ref,
+  inputRef,
+  ...props
+}: CustomDatepickerProps) => {
+  if (value && isNaN(value.getTime())) {
+    console.warn('CustomDatepicker: value is invalid, defaulting to null');
+    value = null;
+  }
+
+  function parseDateFromInput(input: string): Date | null {
+    if (!input) return null;
+    const parts = input.split('/');
+    if (parts.length !== 3) return null;
+
+    const day = parseInt(parts[0]);
+    const month = parseInt(parts[1]) - 1;
+    const year = parseInt(parts[2]);
+
+    const date = new Date(year, month, day);
+    return isNaN(date.getTime()) ? null : date;
+  }
+
+  function getWeekRange(date: Date, startOnMonday = true) {
+    const input = new Date(date);
+    input.setHours(0, 0, 0, 0);
+
+    const day = input.getDay();
+
+    const diffToMonday = startOnMonday ? (day === 0 ? -6 : 1 - day) : -day;
+
+    const start = new Date(input);
+    start.setDate(input.getDate() + diffToMonday);
+
+    const end = new Date(start);
+    end.setDate(start.getDate() + 6);
+
+    return { start, end };
+  }
+
+  const internalRef = useRef<HTMLDivElement>(null);
+  const effectiveRef = ref || internalRef;
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const effectiveInputRef = inputRef || internalInputRef;
+
+  const [panelOpen, setPanelOpen] = useState(false);
+
+  // Derived props (tidier than using `date?.getDate()`, etc, everywhere.)
+  const day = value?.getDate().toString().padStart(2, '0') ?? '';
+  const month = value ? (value.getMonth() + 1).toString().padStart(2, '0') : '';
+  const year = value?.getFullYear().toString() ?? '';
+  const formattedDateString = value ? `${day}/${month}/${year}` : '';
+
+  const [inputValue, setInputValue] = useState(formattedDateString);
+
+  const resetField = useCallback(() => {
+    setInputValue(formattedDateString);
+  }, [setInputValue, formattedDateString]);
+
+  useEffect(() => {
+    // Reset the input field when the value changes.
+    resetField();
+  }, [value, resetField]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+
+  const handleParseInput = (event: React.SyntheticEvent) => {
+    // `parseInputValue` checks the date is valid and within min/max range.
+    const parseDate = parseInputValue(inputValue, minDate, maxDate);
+    if (parseDate) {
+      onValueChange(parseDate, event);
+    } else {
+      resetField();
+    }
+  };
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleParseInput(event);
+    } else if (event.key === 'Escape') {
+      resetField();
+      effectiveInputRef.current?.blur();
+      setPanelOpen(false);
+    } else if (event.key === 'Tab') {
+      resetField();
+      setPanelOpen(false);
+    }
+  };
+
+  // If `value` is out of range, automatically set it to null.
+  // This is validation to prevent parent components passing invalid dates.
+  useEffect(() => {
+    const isDateOutOfRange = (date: Date | null): boolean => {
+      if (!date) return false;
+
+      const normaliseDate = (date: Date) => {
+        date.setHours(0, 0, 0, 0); // Normalize to UTC midnight to avoid time zone issues
+        return date;
+      };
+
+      const parsedMinDate = minDate ? normaliseDate(new Date(minDate)) : null;
+      const parsedMaxDate = maxDate ? normaliseDate(new Date(maxDate)) : null;
+      const normalisedDate = normaliseDate(date);
+
+      if (parsedMinDate && normalisedDate < parsedMinDate) return true;
+      if (parsedMaxDate && normalisedDate > parsedMaxDate) return true;
+      return false;
+    };
+
+    if (value && isDateOutOfRange(value)) {
+      console.warn('CustomDatepicker: value is out of range, setting to null');
+      onValueChange(null);
+    }
+  }, [value, minDate, maxDate, onValueChange]);
+
+  // Close the panel & reset the input field if we click away.
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        effectiveRef.current &&
+        !effectiveRef.current.contains(event.target as Node)
+      ) {
+        setPanelOpen(false);
+        resetField();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [effectiveRef, setPanelOpen, resetField]);
+
+  useEffect(() => {
+    // Close the panel if the <Datepicker> becomes disabled
+    if (disabled && panelOpen) setPanelOpen(false);
+  }, [disabled, panelOpen]);
+
+  const handlePickCalendarDate = (
+    date: Date | null,
+    event?: React.SyntheticEvent
+  ) => {
+    if (onValueChange) {
+      onValueChange(date, event);
+    }
+    setPanelOpen(false);
+  };
+
+  const handleShowPanel = () => {
+    if (disabled) return;
+    setPanelOpen(true);
+  };
+
+  const handleTogglePanel = () => {
+    if (disabled) return;
+    setPanelOpen((prev) => !prev);
+  };
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+  `;
+
+  const style = cx(NAME, className, baseStyle);
+
+  const parsedDate = parseDateFromInput(inputValue);
+  const weekRange = parsedDate ? getWeekRange(parsedDate) : null;
+
+  let academicWeekNumber: number | null = null;
+  if (parsedDate) {
+    for (let i = 0; i < academicWeeks.length; i++) {
+      const weekStart = new Date(academicWeeks[i].start);
+      const nextWeekStart =
+        i + 1 < academicWeeks.length
+          ? new Date(academicWeeks[i + 1].start)
+          : null;
+
+      weekStart.setHours(0, 0, 0, 0);
+      if (nextWeekStart) nextWeekStart.setHours(0, 0, 0, 0);
+
+      if (
+        parsedDate >= weekStart &&
+        (!nextWeekStart || parsedDate < nextWeekStart)
+      ) {
+        academicWeekNumber = academicWeeks[i].number;
+        break;
+      }
+    }
+  }
+
+  const handlePrevWeek = () => {
+    if (!parsedDate) return;
+    const newDate = new Date(parsedDate);
+    newDate.setDate(parsedDate.getDate() - 7);
+    onValueChange(newDate);
+  };
+
+  const handleNextWeek = () => {
+    if (!parsedDate) return;
+    const newDate = new Date(parsedDate);
+    newDate.setDate(parsedDate.getDate() + 7);
+    onValueChange(newDate);
+  };
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      ref={effectiveRef}
+      {...props}
+    >
+      <IconButton
+        onClick={handlePrevWeek}
+        disabled={disabled}
+        aria-label='Go to previous week'
+      >
+        <Icon.ChevronLeft />
+      </IconButton>
+      <VisibleField
+        inputValue={inputValue}
+        onInputChange={handleInputChange}
+        onInputKeyDown={handleInputKeyDown}
+        onInputFocus={handleShowPanel}
+        onButtonClick={handleTogglePanel}
+        disabled={disabled}
+        inputRef={effectiveInputRef}
+        beginningOfWeek={weekRange ? weekRange.start.toDateString() : ''}
+        endOfWeek={weekRange ? weekRange.end.toDateString() : ''}
+        academicWeekNumber={academicWeekNumber ?? undefined}
+      />
+      <IconButton
+        onClick={handleNextWeek}
+        disabled={disabled}
+        aria-label='Go to next week'
+      >
+        <Icon.ChevronRight />
+      </IconButton>
+      {panelOpen && (
+        <Panel>
+          <Calendar
+            pickedDate={value}
+            onDatePick={handlePickCalendarDate}
+            minDate={minDate}
+            maxDate={maxDate}
+            events={events}
+            showAcademicWeeks={showAcademicWeeks}
+            academicWeeks={academicWeeks}
+          />
+        </Panel>
+      )}
+    </div>
+  );
+};
+
+export default CustomDatepicker;

package/lib/components/WeekPicker/subcomponents/DatepickerInput.tsx

@@ -0,0 +1,111 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+import { useState } from 'react';
+
+interface DatepickerInputProps {
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onFocus: () => void;
+  disabled: boolean;
+  ref: React.RefObject<HTMLInputElement | null>;
+  beginningOfWeek?: string;
+  endOfWeek?: string;
+  academicWeekNumber?: number;
+}
+
+const NAME = 'ucl-uikit-weekpicker__input';
+
+const DatepickerInput = ({
+  value,
+  onChange,
+  onKeyDown,
+  onFocus,
+  disabled,
+  beginningOfWeek,
+  endOfWeek,
+  academicWeekNumber,
+  ref,
+}: DatepickerInputProps) => {
+  const [theme] = useTheme();
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  const baseStyle = css`
+    width: 100%;
+    height: 100%;
+    border: none;
+    color: ${theme.color.text.primary};
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    letter-spacing: 1px;
+    caret-color: ${theme.color.text.primary};
+    padding: 0px;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: #8c8c8c; // TODO: Needs a design token -- Figma says 'color/text/tertiary'
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    background-color: ${theme.color.neutral.white};
+
+    &::placeholder {
+      color: ${theme.color.text.disabled};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, disabled && disabledStyle);
+
+  const formatStart = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-GB', {
+      day: '2-digit',
+      month: 'short',
+    });
+  };
+
+  const formatEnd = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-GB', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    });
+  };
+
+  const formattedLabel =
+    beginningOfWeek && endOfWeek
+      ? `${formatStart(beginningOfWeek)} - ${formatEnd(endOfWeek)}`
+      : '';
+
+  const displayValue = isFocused ? value : formattedLabel;
+
+  return (
+    <input
+      value={displayValue}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      onFocus={() => {
+        setIsFocused(true);
+        onFocus();
+      }}
+      onBlur={() => setIsFocused(false)}
+      disabled={disabled}
+      type='text'
+      inputMode='numeric'
+      placeholder='DD/MM/YYYY'
+      className={style}
+      data-testid={NAME}
+      ref={ref}
+      aria-label={`Currently selected date: ${value} - Week from ${formattedLabel}. ${academicWeekNumber ? `(Academic Week ${academicWeekNumber})` : ''}`}
+    />
+  );
+};
+
+export default DatepickerInput;

package/lib/components/WeekPicker/subcomponents/VisibleField.tsx

@@ -0,0 +1,126 @@
+import { css, cx } from '@emotion/css';
+import { DatepickerInput } from './';
+import { Icon } from '../../..';
+import { useTheme } from '../../../theme';
+import React from 'react';
+
+interface VisibleFieldProps {
+  inputValue: string;
+  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onInputFocus: () => void;
+  onButtonClick: () => void;
+  disabled: boolean;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  beginningOfWeek?: string;
+  endOfWeek?: string;
+  academicWeekNumber?: number;
+}
+
+const NAME = 'ucl-uikit-weekpicker__visible-field';
+
+const VisibleField = ({
+  inputValue,
+  onInputChange,
+  onInputKeyDown,
+  onInputFocus,
+  onButtonClick,
+  disabled,
+  inputRef,
+  beginningOfWeek,
+  endOfWeek,
+  academicWeekNumber,
+}: VisibleFieldProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // width: 100%;
+    // height: 100%;
+    box-sizing: border-box;
+    border: 1px solid ${theme.color.neutral.grey60};
+    background-color: ${theme.color.neutral.white};
+    padding: 3px 16px;
+
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    background-color: ${theme.color.neutral.white};
+    border-color: ${theme.color.neutral.grey20};
+
+    cursor: not-allowed;
+    // And child elements
+    & * {
+      cursor: not-allowed;
+    }
+  `;
+
+  // The container for the <Icon.Calendar> is a <div> not an <IconButton>,
+  // so that the orange border only appears when the input has focus and the user can type.
+  // The container increases the clickable area of the icon.
+  const iconButtonStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: pointer;
+    padding-right: 8px;
+  `;
+
+  // `min-width` here accounts for a recurring problem,
+  // in which icons shrink when horizontal space is limited.
+  // TODO: This ought to be fixed in the <Icon> component itself.
+  const iconStyle = css`
+    min-width: 16px;
+    color: ${disabled
+      ? theme.color.text.disabled
+      : theme.color.text.primary}; // TODO: Needs a design token
+  `;
+
+  const style = cx(NAME, baseStyle, disabled && disabledStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+    >
+      <div
+        onClick={onButtonClick}
+        className={iconButtonStyle}
+      >
+        <Icon.Calendar
+          className={iconStyle}
+          size={16}
+        />
+      </div>
+      <DatepickerInput
+        value={inputValue}
+        onChange={onInputChange}
+        onKeyDown={onInputKeyDown}
+        onFocus={onInputFocus}
+        disabled={disabled}
+        ref={inputRef}
+        beginningOfWeek={beginningOfWeek}
+        endOfWeek={endOfWeek}
+        academicWeekNumber={academicWeekNumber}
+      />
+      {academicWeekNumber !== undefined && (
+        <span
+          className={css`
+            color: ${theme.color.text.secondary};
+          `}
+        >
+          W{academicWeekNumber}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default VisibleField;

package/lib/components/WeekPicker/subcomponents/index.ts

@@ -0,0 +1,3 @@
+export { default as CustomDatepicker } from './CustomDatepicker';
+export { default as VisibleField } from './VisibleField';
+export { default as DatepickerInput } from './DatepickerInput';

package/lib/components/index.ts

@@ -7,6 +7,9 @@ export type { InputProps } from './Input';
 export { default as Link } from './Link';
 export type { LinkProps } from './Link';
 
+export { default as StandaloneLink } from './StandaloneLink';
+export type { StandaloneLinkProps } from './StandaloneLink';
+
 export { default as Button } from './Button';
 export type { ButtonProps } from './Button';
 
@@ -130,3 +133,20 @@ export type { RadioProps, LabelledRadioProps } from './Radio';
 
 export { default as Datepicker } from './Datepicker';
 export type { DatepickerProps } from './Datepicker';
+
+export { default as Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
+
+export { default as WeekPicker } from './WeekPicker';
+
+export { default as FileInput } from './FileInput';
+export type { FileInputProps } from './FileInput';
+
+export { default as Timepicker } from './Timepicker';
+export type { TimepickerProps } from './Timepicker';
+
+export { default as CookieNotice } from './CookieNotice';
+export type { CookieNoticeProps } from './CookieNotice';
+
+export { default as Search } from './Search';
+export type { SearchProps } from './Search';

package/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useFocusTrap } from './useFocusTrap';
+export { default as useMediaQuery } from './useMediaQuery';