uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Calendar/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Calendar';
+export type {
+  CalendarProps,
+  CalendarEvent,
+  AcademicWeek,
+} from './Calendar.types';

package/lib/components/{Datepicker → Calendar}/subcomponents/AcademicWeek.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
 
-const NAME = 'ucl-uikit-datepicker__academic-week';
+const NAME = 'ucl-uikit-calendar__academic-week';
 
 interface AcademicWeekProps {
   weekNumber?: number | null;

package/lib/components/{Datepicker → Calendar}/subcomponents/AcademicWeeks.tsx

@@ -1,20 +1,21 @@
 import { css, cx } from '@emotion/css';
-import AcademicWeek from './AcademicWeek';
-import { getAcademicWeekNumbers } from './../utils';
+import { AcademicWeek } from './';
+import { getAcademicWeekNumbers } from '../utils';
 import { useTheme } from '../../../theme';
-import type { AcademicWeek as AcademicWeekType } from '../Datepicker.types';
 
-const NAME = 'ucl-uikit-datepicker__academic-weeks';
+import type { AcademicWeek as AcademicWeekType } from '../Calendar.types';
+
+const NAME = 'ucl-uikit-calendar__academic-weeks';
 
 interface AcademicWeeksProps {
   date: Date;
-  academicWeeks: AcademicWeekType[];
+  weeks: AcademicWeekType[];
 }
 
-const AcademicWeeks = ({ date, academicWeeks }: AcademicWeeksProps) => {
+const AcademicWeeks = ({ date, weeks }: AcademicWeeksProps) => {
   const [theme] = useTheme();
 
-  const academicWeekNumbers = getAcademicWeekNumbers(academicWeeks, date);
+  const academicWeekNumbers = getAcademicWeekNumbers(weeks, date);
 
   const baseStyle = css`
     display: flex;
@@ -22,6 +23,7 @@ const AcademicWeeks = ({ date, academicWeeks }: AcademicWeeksProps) => {
     padding-top: 32px;
     width: 50px;
     background-color: ${theme.color.interaction.blue5};
+    user-select: none;
   `;
 
   const style = cx(NAME, baseStyle);

package/lib/components/Calendar/subcomponents/ColumnHeading.tsx

@@ -0,0 +1,40 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+interface ColumnHeadingProps {
+  index: number;
+  day: string; // 'M', 'T', 'W', 'T', 'F', 'S', 'S'
+  isWeekend: boolean;
+}
+
+const NAME = 'ucl-uikit-calendar__column-heading';
+
+const ColumnHeading = ({ index, day, isWeekend }: ColumnHeadingProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = 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;
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+      key={index}
+    >
+      {day}
+    </div>
+  );
+};
+
+export default ColumnHeading;

package/lib/components/{Datepicker/subcomponents/MonthSelector/MonthSelector.tsx → Calendar/subcomponents/Controls.tsx}

@@ -1,16 +1,15 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { Icon } from '../../..';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../theme';
 
-interface MonthSelectorProps {
-  date: Date | null | undefined;
+interface ControlsProps {
+  month: Date;
   changeMonth: (change: number) => void;
 }
 
-const MonthSelector = ({
-  date,
-  changeMonth,
-}: MonthSelectorProps) => {
+const NAME = 'ucl-uikit-calendar__controls';
+
+const Controls = ({ month, changeMonth }: ControlsProps) => {
   const [theme] = useTheme();
 
   const baseStyle = css`
@@ -37,27 +36,28 @@ const MonthSelector = ({
     }
   `;
 
+  const style = cx(NAME, baseStyle);
+
   return (
-    <div className={baseStyle}>
+    <div
+      className={style}
+      data-testid={NAME}
+    >
       <Icon.ChevronLeft
         className={chevronIconStyle}
         onClick={() => changeMonth(-1)}
       />
       <span className={monthAndYearStyle}>
         <span>
-          {date
-            ? date.toLocaleDateString('default', {
+          {month
+            ? month.toLocaleDateString('default', {
                 month: 'long',
               })
             : new Date().toLocaleDateString('default', {
                 month: 'long',
               })}
         </span>
-        <span>
-          {date
-            ? date.getFullYear()
-            : new Date().getFullYear()}
-        </span>
+        <span>{month ? month.getFullYear() : new Date().getFullYear()}</span>
       </span>
       <Icon.ChevronRight
         className={chevronIconStyle}
@@ -67,4 +67,4 @@ const MonthSelector = ({
   );
 };
 
-export default MonthSelector;
+export default Controls;

package/lib/components/{Datepicker/subcomponents/Day → Calendar/subcomponents}/Day.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Day from './Day';
 
 const meta = {
-  title: 'Components/Work in progress/Datepicker/Day',
+  title: 'Components/Work in progress/Calendar/Day',
   component: Day,
   argTypes: {
     events: {
@@ -22,7 +22,7 @@ export const Default: Story = {
     date: new Date(),
   },
   render: (args) => {
-    args.date = args.date ? new Date(args.date) : null;
+    args.date = new Date(args.date);
     return <Day {...args} />;
   },
 };
@@ -33,7 +33,7 @@ export const Selected: Story = {
     isSelected: true,
   },
   render: (args) => {
-    args.date = args.date ? new Date(args.date) : null;
+    args.date = new Date(args.date);
     return <Day {...args} />;
   },
 };
@@ -44,7 +44,7 @@ export const Today: Story = {
     isToday: true,
   },
   render: (args) => {
-    args.date = args.date ? new Date(args.date) : null;
+    args.date = new Date(args.date);
     return <Day {...args} />;
   },
 };
@@ -55,7 +55,7 @@ export const Disabled: Story = {
     isDisabled: true,
   },
   render: (args) => {
-    args.date = args.date ? new Date(args.date) : null;
+    args.date = new Date(args.date);
     return <Day {...args} />;
   },
 };
@@ -66,7 +66,7 @@ export const NotInCurrentMonth: Story = {
     isInCurrentMonth: false,
   },
   render: (args) => {
-    args.date = args.date ? new Date(args.date) : null;
+    args.date = new Date(args.date);
     return <Day {...args} />;
   },
 };
@@ -81,7 +81,7 @@ export const WithEventDots: Story = {
     ],
   },
   render: (args) => {
-    args.date = args.date ? new Date(args.date) : null;
+    args.date = new Date(args.date);
     return <Day {...args} />;
   },
 };
@@ -92,7 +92,7 @@ export const AlertOnPick: Story = {
     date: new Date(),
   },
   render: (args) => {
-    args.date = args.date ? new Date(args.date) : null;
+    args.date = new Date(args.date);
     const onPick = (date: Date) => alert(`Picked date: ${date.toDateString()}`);
     return (
       <Day

package/lib/components/{Datepicker/subcomponents/Day → Calendar/subcomponents}/Day.tsx

@@ -1,11 +1,11 @@
-import { css } from '@emotion/css';
-import EventDot from '../EventDot';
-import { useTheme } from '../../../../theme/';
-import { CalendarEvent } from '../../Datepicker.types';
+import { css, cx } from '@emotion/css';
+import { EventDot } from './';
+import { useTheme } from '../../../theme';
+import type { CalendarEvent } from '../Calendar.types';
 
 export interface DayProps {
-  date: Date | null | undefined;
-  onPick?: (date: Date) => void;
+  date: Date;
+  onPick?: (date: Date, event: React.SyntheticEvent) => void;
   isSelected?: boolean;
   isToday?: boolean;
   isInCurrentMonth?: boolean;
@@ -13,6 +13,8 @@ export interface DayProps {
   events?: CalendarEvent[]; // Max 3 events are displayed as dots
 }
 
+const NAME = 'ucl-uikit-calendar__day';
+
 const Day = ({
   date,
   onPick,
@@ -27,8 +29,10 @@ const Day = ({
   // More than 3 dots displayed breaks the layout
   const displayedEvents = events.slice(0, 3);
 
-  const onClick = () => {
-    if (date && onPick) onPick(date);
+  const handlePick = (event: React.MouseEvent) => {
+    if (date && !isDisabled && onPick) {
+      onPick(date, event);
+    }
   };
 
   const backgroundStyle = css`
@@ -48,7 +52,11 @@ const Day = ({
 
     ${isSelected &&
     css`
-      background-color: ${theme.color.interaction.blue70};
+      /* background-color: ${theme.color.interaction.blue70}; */
+      background-color: ${isDisabled
+        ? theme.color.neutral.grey10
+        : theme.color.interaction.blue70};
+
       color: ${theme.color.text.inverted};
 
       &:hover {
@@ -60,7 +68,10 @@ const Day = ({
       cursor: not-allowed;
 
       &:hover {
-        background-color: ${theme.color.neutral.white};
+        /* background-color: ${theme.color.neutral.white}; */
+        background-color: ${isSelected
+          ? theme.color.neutral.grey10
+          : theme.color.neutral.white};
       }
     `}
   `;
@@ -80,7 +91,7 @@ const Day = ({
     `}
     ${isDisabled &&
     css`
-      color: ${theme.color.neutral.grey40};
+      color: ${theme.color.neutral.grey20};
     `}
   `;
 
@@ -94,14 +105,15 @@ const Day = ({
     width: 100%;
   `;
 
+  const style = cx(NAME, backgroundStyle);
+
   return (
     <div
-      className={backgroundStyle}
-      role='button'
-      aria-label={`Select ${date?.toDateString()}`}
-      onClick={onClick}
+      onClick={handlePick}
+      className={style}
+      data-testid={NAME}
     >
-      <div className={foregroundStyle}>{date?.getDate()}</div>
+      <div className={foregroundStyle}>{date.getDate()}</div>
       <div className={eventDotsContainerStyle}>
         {displayedEvents.map((_event, index) => (
           <EventDot

package/lib/components/{Datepicker → Calendar}/subcomponents/EventDot.tsx

@@ -1,12 +1,12 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
 
-const NAME = 'ucl-uikit-datepicker__event-dot';
+const NAME = 'ucl-uikit-calendar__event-dot';
 
-type EventDotProps = {
+interface EventDotProps {
   inverted: boolean;
   inCurrentMonth: boolean;
-};
+}
 
 const EventDot = ({ inverted, inCurrentMonth }: EventDotProps) => {
   const [theme] = useTheme();

package/lib/components/Calendar/subcomponents/Grid.tsx

@@ -0,0 +1,116 @@
+import { css, cx } from '@emotion/css';
+import { useMemo } from 'react';
+import { ColumnHeading, Day } from './';
+import { getDatesForCalendarGrid } from '../utils';
+import { useTheme } from '../../../theme';
+import type { CalendarEvent } from '../Calendar.types';
+
+interface GridProps {
+  month: Date; // 1st day of the month
+  pickedDate: Date | null;
+  onDatePick?: (date: Date, event: React.SyntheticEvent) => void;
+  minDate: Date | null;
+  maxDate: Date | null;
+  events: CalendarEvent[];
+}
+
+const NAME = 'ucl-uikit-calendar__grid';
+
+// Helper function: Convert ISO string 'yyyy-mm-dd' to local Date without timezone shift
+function toLocalDate(dateStr: string): Date {
+  const [year, month, day] = dateStr.split('-').map(Number);
+  return new Date(year, month - 1, day);
+}
+
+function getDateKey(date: Date): string {
+  return date.toISOString().split('T')[0];
+}
+
+// Create events map grouped by date
+function createEventsMap(
+  events: CalendarEvent[]
+): Map<string, CalendarEvent[]> {
+  const eventsMap = new Map<string, CalendarEvent[]>();
+
+  events.forEach((event) => {
+    const eventDate = toLocalDate(event.date);
+    const dateKey = getDateKey(eventDate);
+
+    if (!eventsMap.has(dateKey)) {
+      eventsMap.set(dateKey, []);
+    }
+    eventsMap.get(dateKey)!.push(event);
+  });
+  return eventsMap;
+}
+
+const Grid = ({
+  month,
+  pickedDate,
+  onDatePick = () => {},
+  minDate,
+  maxDate,
+  events,
+}: GridProps) => {
+  // Fix minDate timezone issues by zeroing time if valid
+  if (minDate && !isNaN(minDate.getTime())) minDate.setHours(0, 0, 0, 0);
+
+  const [theme] = useTheme();
+
+  const daysOfTheWeek = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+  const dates = getDatesForCalendarGrid(month);
+
+  const eventsMap = useMemo(() => createEventsMap(events), [events]);
+
+  const baseStyle = 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;
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+    >
+      {daysOfTheWeek.map((day, index) => (
+        <ColumnHeading
+          key={index}
+          index={index}
+          day={day}
+          isWeekend={index >= 5}
+        />
+      ))}
+      {dates.map((mappedDate) => {
+        const dateKey = getDateKey(mappedDate);
+        const dateEvents = eventsMap.get(dateKey) || [];
+
+        return (
+          <Day
+            key={mappedDate.toISOString()}
+            date={mappedDate}
+            isSelected={
+              pickedDate?.toDateString() === mappedDate.toDateString()
+            }
+            isToday={mappedDate.toDateString() === new Date().toDateString()}
+            isInCurrentMonth={month.getMonth() === mappedDate.getMonth()}
+            isDisabled={
+              (minDate !== null && mappedDate < minDate) ||
+              (maxDate !== null && mappedDate > maxDate)
+            }
+            onPick={onDatePick}
+            events={dateEvents}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Grid;

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

@@ -0,0 +1,7 @@
+export { default as Controls } from './Controls';
+export { default as AcademicWeeks } from './AcademicWeeks';
+export { default as AcademicWeek } from './AcademicWeek';
+export { default as Grid } from './Grid';
+export { default as ColumnHeading } from './ColumnHeading';
+export { default as Day } from './Day';
+export { default as EventDot } from './EventDot';

package/lib/components/{Datepicker → Calendar}/utils/getAcademicWeekNumbers/getAcademicWeekNumbers.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest';
 import getAcademicWeekNumbers, { getMonday } from './getAcademicWeekNumbers';
-import type { AcademicWeek } from '../../Datepicker.types';
+import type { AcademicWeek } from '../../';
 
 describe('getMonday', () => {
   test('Returns the Monday for the week of the given date', () => {

package/lib/components/{Datepicker → Calendar}/utils/getAcademicWeekNumbers/getAcademicWeekNumbers.ts

@@ -1,4 +1,4 @@
-import type { AcademicWeek } from '../../Datepicker.types';
+import type { AcademicWeek } from '../../';
 
 // The 'calendar period' is defined here as all the dates the calendar displays,
 // which may include some dates in the previous month and some dates in the next month.

package/lib/components/{Datepicker → Calendar}/utils/getDatesForCalendarGrid/getDatesForCalendarGrid.test.ts

@@ -1,78 +1,51 @@
 import { describe, expect, test } from 'vitest';
 import getDatesForCalendarGrid from './getDatesForCalendarGrid';
 
+// Note by Alex HF (2025-07-04): Some of these tests seem a bit excessive.
+// I pasted them in from my orginal <Datepicker> work.
+
 describe('getDatesForCalendarGrid', () => {
   test('Returns an array of Date objects', () => {
     const result = getDatesForCalendarGrid(new Date());
-    expect(
-      result.every((date) => date instanceof Date)
-    ).toBe(true);
+    expect(result.every((date) => date instanceof Date)).toBe(true);
   });
 
   test('Throws an error if no date is provided', () => {
     // @ts-expect-error - Expected behaviour is an error to be thrown
-    expect(() => getDatesForCalendarGrid()).toThrowError(
+    expect(() => getDatesForCalendarGrid()).toThrowError('No date provided');
+    // @ts-expect-error - Expected behaviour is an error to be thrown
+    expect(() => getDatesForCalendarGrid(null)).toThrowError(
       'No date provided'
     );
-    expect(() =>
-      // @ts-expect-error - Expected behaviour is an error to be thrown
-      getDatesForCalendarGrid(null)
-    ).toThrowError('No date provided');
-    expect(() =>
-      // @ts-expect-error - Expected behaviour is an error to be thrown
-      getDatesForCalendarGrid(undefined)
-    ).toThrowError('No date provided');
     // @ts-expect-error - Expected behaviour is an error to be thrown
-    expect(() => getDatesForCalendarGrid('')).toThrowError(
+    expect(() => getDatesForCalendarGrid(undefined)).toThrowError(
       'No date provided'
     );
     // @ts-expect-error - Expected behaviour is an error to be thrown
-    expect(() => getDatesForCalendarGrid(0)).toThrowError(
+    expect(() => getDatesForCalendarGrid('')).toThrowError('No date provided');
+    // @ts-expect-error - Expected behaviour is an error to be thrown
+    expect(() => getDatesForCalendarGrid(0)).toThrowError('No date provided');
+    // @ts-expect-error - Expected behaviour is an error to be thrown
+    expect(() => getDatesForCalendarGrid('1st of March')).toThrowError(
       'No date provided'
     );
-    expect(() =>
-      // @ts-expect-error - Expected behaviour is an error to be thrown
-      getDatesForCalendarGrid('1st of March')
-    ).toThrowError('No date provided');
   });
 
   test('Total dates returned are always divisible by 7', () => {
-    expect(
-      getDatesForCalendarGrid(new Date(2025, 1, 1)).length %
-        7
-    ).toBe(0);
-    expect(
-      getDatesForCalendarGrid(new Date(2025, 2, 5)).length %
-        7
-    ).toBe(0);
-    expect(
-      getDatesForCalendarGrid(new Date(2025, 3, 15))
-        .length % 7
-    ).toBe(0);
-    expect(
-      getDatesForCalendarGrid(new Date(2025, 4, 20))
-        .length % 7
-    ).toBe(0);
-    expect(
-      getDatesForCalendarGrid(new Date(2025, 5, 25))
-        .length % 7
-    ).toBe(0);
-    expect(
-      getDatesForCalendarGrid(new Date(2025, 6, 30))
-        .length % 7
-    ).toBe(0);
-    expect(
-      getDatesForCalendarGrid(new Date(2025, 12, 0))
-        .length % 7
-    ).toBe(0);
+    expect(getDatesForCalendarGrid(new Date(2025, 1, 1)).length % 7).toBe(0);
+    expect(getDatesForCalendarGrid(new Date(2025, 2, 5)).length % 7).toBe(0);
+    expect(getDatesForCalendarGrid(new Date(2025, 3, 15)).length % 7).toBe(0);
+    expect(getDatesForCalendarGrid(new Date(2025, 4, 20)).length % 7).toBe(0);
+    expect(getDatesForCalendarGrid(new Date(2025, 5, 25)).length % 7).toBe(0);
+    expect(getDatesForCalendarGrid(new Date(2025, 6, 30)).length % 7).toBe(0);
+    expect(getDatesForCalendarGrid(new Date(2025, 12, 0)).length % 7).toBe(0);
   });
 
-  test('If date is in Jan 2025, returns all dates in January 2024', () => {
+  test('If date is in Jan 2025, returns all dates in January 2025', () => {
     const date = new Date(2025, 0, 1);
     const result = getDatesForCalendarGrid(date);
     const janDates = [];
-    for (let i = 1; i <= 31; i++)
-      janDates.push(new Date(2025, 0, i));
+    for (let i = 1; i <= 31; i++) janDates.push(new Date(2025, 0, i));
     janDates.forEach((dateInJan) => {
       expect(result).toContainEqual(dateInJan);
     });
@@ -88,12 +61,8 @@ describe('getDatesForCalendarGrid', () => {
   test('If date is in Jan 2025, returns 1st & 2nd Feb 2025 at the end', () => {
     const date = new Date(2025, 0, 1);
     const result = getDatesForCalendarGrid(date);
-    expect(result[result.length - 2]).toEqual(
-      new Date(2025, 1, 1)
-    );
-    expect(result[result.length - 1]).toEqual(
-      new Date(2025, 1, 2)
-    );
+    expect(result[result.length - 2]).toEqual(new Date(2025, 1, 1));
+    expect(result[result.length - 1]).toEqual(new Date(2025, 1, 2));
   });
 
   test('If month starts on a Sunday, the total dates returned are divisible by 7', () => {
@@ -101,12 +70,12 @@ describe('getDatesForCalendarGrid', () => {
     const result = getDatesForCalendarGrid(date);
     expect(result.length % 7).toBe(0);
   });
+
   test('handles February in leap year correctly', () => {
     const leapYear = new Date(2024, 1, 1); // February 2024
     const result = getDatesForCalendarGrid(leapYear);
     const febDates = [];
-    for (let i = 1; i <= 29; i++)
-      febDates.push(new Date(2024, 1, i));
+    for (let i = 1; i <= 29; i++) febDates.push(new Date(2024, 1, i));
     febDates.forEach((date) => {
       expect(result).toContainEqual(date);
     });
@@ -116,8 +85,7 @@ describe('getDatesForCalendarGrid', () => {
     const nonLeapYear = new Date(2025, 1, 1); // February 2025
     const result = getDatesForCalendarGrid(nonLeapYear);
     const febDates = [];
-    for (let i = 1; i <= 28; i++)
-      febDates.push(new Date(2025, 1, i));
+    for (let i = 1; i <= 28; i++) febDates.push(new Date(2025, 1, i));
     febDates.forEach((date) => {
       expect(result).toContainEqual(date);
     });
@@ -127,18 +95,14 @@ describe('getDatesForCalendarGrid', () => {
     const date = new Date(2025, 3, 1); // April 2025
     const result = getDatesForCalendarGrid(date);
     for (let i = 1; i < result.length; i++) {
-      expect(result[i].getTime()).toBeGreaterThan(
-        result[i - 1].getTime()
-      );
+      expect(result[i].getTime()).toBeGreaterThan(result[i - 1].getTime());
     }
   });
 
   test('correctly handles months with 31 days', () => {
     const date = new Date(2025, 0, 1); // January 2025
     const result = getDatesForCalendarGrid(date);
-    expect(
-      result.filter((d) => d.getMonth() === 0).length
-    ).toBe(31);
+    expect(result.filter((d) => d.getMonth() === 0).length).toBe(31);
   });
 
   test('week always starts with Monday', () => {