uikit-react-public 0.11.16 → 0.11.24

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/Calendar/subcomponents/AcademicWeek.tsx

@@ -0,0 +1,36 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+const NAME = 'ucl-uikit-calendar__academic-week';
+
+interface AcademicWeekProps {
+  weekNumber?: number | null;
+}
+
+const AcademicWeek = ({ weekNumber }: AcademicWeekProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 40px;
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f14};
+    color: #6345a5; // TODO: Needs a sensible design token
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      data-testid={NAME}
+      className={style}
+    >
+      {weekNumber && 'W ' + weekNumber.toString().padStart(2, '0')}
+    </div>
+  );
+};
+
+export default AcademicWeek;

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

@@ -0,0 +1,46 @@
+import { css, cx } from '@emotion/css';
+import { AcademicWeek } from './';
+import { getAcademicWeekNumbers } from '../utils';
+import { useTheme } from '../../../theme';
+
+import type { AcademicWeek as AcademicWeekType } from '../Calendar.types';
+
+const NAME = 'ucl-uikit-calendar__academic-weeks';
+
+interface AcademicWeeksProps {
+  date: Date;
+  weeks: AcademicWeekType[];
+}
+
+const AcademicWeeks = ({ date, weeks }: AcademicWeeksProps) => {
+  const [theme] = useTheme();
+
+  const academicWeekNumbers = getAcademicWeekNumbers(weeks, date);
+
+  const baseStyle = css`
+    display: flex;
+    flex-direction: column;
+    padding-top: 32px;
+    width: 50px;
+    background-color: ${theme.color.interaction.blue5};
+    user-select: none;
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      data-testid={NAME}
+      className={style}
+    >
+      {academicWeekNumbers.map((weekNumber) => (
+        <AcademicWeek
+          key={weekNumber}
+          weekNumber={weekNumber}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default AcademicWeeks;

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,8 +2,16 @@ 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: {
+      table: {
+        // We don't want to show an empty array in the controls
+        disable: true,
+      },
+    },
+  },
 } satisfies Meta<typeof Day>;
 
 export default meta;
@@ -14,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} />;
   },
 };
@@ -25,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} />;
   },
 };
@@ -36,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} />;
   },
 };
@@ -47,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} />;
   },
 };
@@ -58,7 +66,22 @@ 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} />;
+  },
+};
+
+export const WithEventDots: Story = {
+  args: {
+    date: new Date(),
+    events: [
+      { date: new Date().toISOString() },
+      { date: new Date().toISOString() },
+      { date: new Date().toISOString() },
+    ],
+  },
+  render: (args) => {
+    args.date = new Date(args.date);
     return <Day {...args} />;
   },
 };
@@ -69,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/Calendar/subcomponents/Day.tsx

@@ -0,0 +1,130 @@
+import { css, cx } from '@emotion/css';
+import { EventDot } from './';
+import { useTheme } from '../../../theme';
+import type { CalendarEvent } from '../Calendar.types';
+
+export interface DayProps {
+  date: Date;
+  onPick?: (date: Date, event: React.SyntheticEvent) => void;
+  isSelected?: boolean;
+  isToday?: boolean;
+  isInCurrentMonth?: boolean;
+  isDisabled?: boolean;
+  events?: CalendarEvent[]; // Max 3 events are displayed as dots
+}
+
+const NAME = 'ucl-uikit-calendar__day';
+
+const Day = ({
+  date,
+  onPick,
+  isSelected = false,
+  isToday = false,
+  isInCurrentMonth = true,
+  isDisabled = false,
+  events = [],
+}: DayProps) => {
+  const [theme] = useTheme();
+
+  // More than 3 dots displayed breaks the layout
+  const displayedEvents = events.slice(0, 3);
+
+  const handlePick = (event: React.MouseEvent) => {
+    if (date && !isDisabled && onPick) {
+      onPick(date, event);
+    }
+  };
+
+  const backgroundStyle = css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    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}; */
+      background-color: ${isDisabled
+        ? theme.color.neutral.grey10
+        : 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}; */
+        background-color: ${isSelected
+          ? theme.color.neutral.grey10
+          : 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.grey20};
+    `}
+  `;
+
+  const eventDotsContainerStyle = css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
+    position: absolute;
+    bottom: 3px;
+    width: 100%;
+  `;
+
+  const style = cx(NAME, backgroundStyle);
+
+  return (
+    <div
+      onClick={handlePick}
+      className={style}
+      data-testid={NAME}
+    >
+      <div className={foregroundStyle}>{date.getDate()}</div>
+      <div className={eventDotsContainerStyle}>
+        {displayedEvents.map((_event, index) => (
+          <EventDot
+            key={index}
+            inverted={isSelected}
+            inCurrentMonth={isInCurrentMonth}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Day;

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

@@ -0,0 +1,40 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+const NAME = 'ucl-uikit-calendar__event-dot';
+
+interface EventDotProps {
+  inverted: boolean;
+  inCurrentMonth: boolean;
+}
+
+const EventDot = ({ inverted, inCurrentMonth }: EventDotProps) => {
+  const [theme] = useTheme();
+
+  const invertedColour = theme.color.neutral.white;
+  const outOfCurrentMonthColour = '#8C8C8C'; // TODO: Needs adding to `defaultTheme.ts`, as a design token
+
+  const backgroundColour = inCurrentMonth
+    ? inverted
+      ? invertedColour
+      : theme.color.interaction.blue70
+    : outOfCurrentMonthColour;
+
+  const baseStyle = css`
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: ${backgroundColour};
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      data-testid={NAME}
+      className={style}
+    />
+  );
+};
+
+export default EventDot;

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

@@ -0,0 +1,117 @@
+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);
+  });
+  console.log('Events map created:', eventsMap);
+  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/Calendar/utils/getAcademicWeekNumbers/getAcademicWeekNumbers.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, test, vi } from 'vitest';
+import getAcademicWeekNumbers, { getMonday } from './getAcademicWeekNumbers';
+import type { AcademicWeek } from '../../';
+
+describe('getMonday', () => {
+  test('Returns the Monday for the week of the given date', () => {
+    const date = new Date('2025-09-03'); // Wednesday
+    const monday = getMonday(date);
+    expect(monday.getFullYear()).toBe(2025);
+    expect(monday.getMonth()).toBe(8); // September (0-indexed)
+    expect(monday.getDate()).toBe(1); // 1st September 2025
+    expect(monday.getDay()).toBe(1); // Monday
+  });
+
+  test('Works for a date that is already a Monday', () => {
+    const date = new Date('2025-10-06'); // Monday
+    const monday = getMonday(date);
+    expect(monday.getFullYear()).toBe(2025);
+    expect(monday.getMonth()).toBe(9); // October (0-indexed)
+    expect(monday.getDate()).toBe(6); // 6th October 2025
+    expect(monday.getDay()).toBe(1); // Monday
+  });
+});
+
+describe('getAcademicWeekNumbers', () => {
+  test('Returns an array of the correct numbers (works as expected)', () => {
+    const targetDate = new Date('2025-09-01'); // Monday 1st September 2025
+    const academicWeeks: AcademicWeek[] = [
+      { start: '2025-08-25', number: 1 },
+      { start: '2025-09-01', number: 2 },
+      { start: '2025-09-08', number: 3 },
+      { start: '2025-09-15', number: 4 },
+      { start: '2025-09-22', number: 5 },
+      { start: '2025-09-29', number: 6 },
+      { start: '2025-10-06', number: 7 },
+      { start: '2025-10-13', number: 8 },
+      { start: '2025-10-20', number: 9 },
+      { start: '2025-10-27', number: 10 },
+      { start: '2025-11-03', number: 11 },
+      { start: '2025-11-10', number: 12 },
+      { start: '2025-11-17', number: 13 },
+      { start: '2025-11-24', number: 14 },
+      // Etc ...
+    ];
+
+    const result = getAcademicWeekNumbers(academicWeeks, targetDate);
+    expect(result).toEqual([2, 3, 4, 5, 6]);
+  });
+
+  // Empty array for `academicWeeks` is default parameter value in `Datepicker.tsx`
+  test('Returns empty array if academicWeeks are empty', () => {
+    console.warn = vi.fn();
+    const emptyArray: AcademicWeek[] = [];
+    const result = getAcademicWeekNumbers(emptyArray, new Date());
+    expect(result).toEqual([]);
+    expect(console.warn).toHaveBeenCalledWith(
+      'Datepicker: No academic weeks provided'
+    );
+  });
+
+  test('Returns empty array if targetDate is invalid', () => {
+    const result = getAcademicWeekNumbers(
+      [{ start: '2025-08-25', number: 1 }],
+      new Date('invalid-date')
+    );
+    expect(result).toEqual([]);
+
+    const result2 = getAcademicWeekNumbers(
+      [{ start: '2025-08-25', number: 1 }],
+      null as unknown as Date
+    );
+    expect(result2).toEqual([]);
+
+    const result3 = getAcademicWeekNumbers(
+      [{ start: '2025-08-25', number: 1 }],
+      undefined as unknown as Date
+    );
+    expect(result3).toEqual([]);
+  });
+
+  test('Returns array of undefined if no academic weeks match the current date', () => {
+    // A pretend very short example for academic weeks
+    const academicWeeks: AcademicWeek[] = [
+      { start: '2025-09-01', number: 1 },
+      { start: '2025-09-08', number: 2 },
+      { start: '2025-09-15', number: 3 },
+      { start: '2025-09-22', number: 4 },
+    ];
+
+    // The date is in October, which has no matching academic weeks
+    const targetDate = new Date('2025-10-01');
+
+    const result = getAcademicWeekNumbers(academicWeeks, targetDate);
+
+    // We expect 5 weeks displayed in the calendar, with no matching academic weeks
+    expect(result).toEqual([
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    ]);
+  });
+});