uikit-react-public 0.11.16 → 0.11.20

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 import Datepicker from './Datepicker';
+import type { AcademicWeek } from './Datepicker.types';
 
 const meta = {
   title: 'Components/Work in progress/Datepicker/Datepicker',
@@ -11,6 +12,7 @@ const meta = {
     minDate: { control: { type: 'date' } },
     maxDate: { control: { type: 'date' } },
     native: { control: { type: 'boolean' } },
+    showAcademicWeeks: { control: { type: 'boolean' } },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Datepicker>;
@@ -68,3 +70,134 @@ export const AsNative: Story = {
     );
   },
 };
+
+const dateToISOString = (date: Date) => {
+  return date.toISOString().split('T')[0];
+};
+
+export const WithEvents: Story = {
+  name: 'With events',
+  args: {
+    date: null,
+    onDateChange: () => {},
+    // IIFE gives us event dots for the current month
+    events: (() => {
+      const currentDate = new Date();
+      const currentYear = currentDate.getFullYear();
+      const currentMonth = currentDate.getMonth();
+      return [
+        // Grey event dots
+        { date: dateToISOString(new Date(currentYear, currentMonth, -2)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, -1)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, -1)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
+        // Blue event dots
+        { date: dateToISOString(new Date(currentYear, currentMonth, 1)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 2)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 2)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 3)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 3)) },
+        { date: dateToISOString(new Date(currentYear, currentMonth, 3)) },
+      ];
+    })(),
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    args.date = args.date ? new Date(args.date) : null;
+    args.minDate = args.minDate ? new Date(args.minDate) : null;
+    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
+    const onDateChange = (date: Date | null | undefined) =>
+      updateArgs({ date: date });
+    return (
+      <Datepicker
+        {...args}
+        date={args.date}
+        onDateChange={onDateChange}
+        events={args.events}
+      />
+    );
+  },
+};
+
+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 },
+  { start: '2025-12-01', number: 15 },
+  { start: '2025-12-08', number: 16 },
+  { start: '2025-12-15', number: 17 },
+  { start: '2025-12-22', number: 18 },
+  { start: '2025-12-29', number: 19 },
+  { start: '2026-01-05', number: 20 },
+  { start: '2026-01-12', number: 21 },
+  { start: '2026-01-19', number: 22 },
+  { start: '2026-01-26', number: 23 },
+  { start: '2026-02-02', number: 24 },
+  { start: '2026-02-09', number: 25 },
+  { start: '2026-02-16', number: 26 },
+  { start: '2026-02-23', number: 27 },
+  { start: '2026-03-02', number: 28 },
+  { start: '2026-03-09', number: 29 },
+  { start: '2026-03-16', number: 30 },
+  { start: '2026-03-23', number: 31 },
+  { start: '2026-03-30', number: 32 },
+  { start: '2026-04-06', number: 33 },
+  { start: '2026-04-13', number: 34 },
+  { start: '2026-04-20', number: 35 },
+  { start: '2026-04-27', number: 36 },
+  { start: '2026-05-04', number: 37 },
+  { start: '2026-05-11', number: 38 },
+  { start: '2026-05-18', number: 39 },
+  { start: '2026-05-25', number: 40 },
+  { start: '2026-06-01', number: 41 },
+  { start: '2026-06-08', number: 42 },
+  { start: '2026-06-15', number: 43 },
+  { start: '2026-06-22', number: 44 },
+  { start: '2026-06-29', number: 45 },
+  { start: '2026-07-06', number: 46 },
+  { start: '2026-07-13', number: 47 },
+  { start: '2026-07-20', number: 48 },
+  { start: '2026-07-27', number: 49 },
+  { start: '2026-08-03', number: 50 },
+  { start: '2026-08-10', number: 51 },
+  { start: '2026-08-17', number: 52 },
+  { start: '2026-08-24', number: 53 },
+];
+
+export const WithAcademicWeeks: Story = {
+  name: 'With academic weeks',
+  args: {
+    date: null,
+    onDateChange: () => {},
+    showAcademicWeeks: true,
+    academicWeeks: academicWeeks,
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    args.date = args.date ? new Date(args.date) : null;
+    args.minDate = args.minDate ? new Date(args.minDate) : null;
+    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
+    const onDateChange = (date: Date | null | undefined) =>
+      updateArgs({ date: date });
+    return (
+      <Datepicker
+        {...args}
+        date={args.date}
+        onDateChange={onDateChange}
+      />
+    );
+  },
+};

package/lib/components/Datepicker/Datepicker.tsx

@@ -1,26 +1,21 @@
-import {
-  useState,
-  useRef,
-  memo,
-  InputHTMLAttributes,
-} from 'react';
+import { useState, useRef, memo, InputHTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import {
-  Native,
-  DateField,
-  CalendarMenu,
-} from './subcomponents';
+import { Native, DateField, CalendarMenu } from './subcomponents';
 import { useTheme } from '../../theme';
+import { CalendarEvent } from './Datepicker.types';
+import type { AcademicWeek } from './Datepicker.types';
 
 export const NAME = 'ucl-datepicker';
 
-export interface DatepickerProps
-  extends InputHTMLAttributes<HTMLInputElement> {
+export interface DatepickerProps extends InputHTMLAttributes<HTMLInputElement> {
   date: Date | null | undefined;
   minDate?: Date | null | undefined;
   maxDate?: Date | null | undefined;
   onDateChange: (date: Date | null | undefined) => void;
   native?: boolean;
+  events?: CalendarEvent[];
+  showAcademicWeeks?: boolean;
+  academicWeeks?: AcademicWeek[]; // Array of academic week strings in YYYY-MM-DD format
   testId?: string;
 }
 
@@ -29,7 +24,10 @@ const Datepicker = ({
   minDate,
   maxDate,
   onDateChange,
-  native,
+  native = false,
+  events = [],
+  showAcademicWeeks = false,
+  academicWeeks = [],
   testId = NAME,
   className,
   ...props
@@ -50,48 +48,28 @@ const Datepicker = ({
       />
     );
 
-  const blur = () =>
-    (document.activeElement as HTMLElement)?.blur();
+  const blur = () => (document.activeElement as HTMLElement)?.blur();
 
-  const handleKeyDown = (
-    event: React.KeyboardEvent<HTMLDivElement>
-  ) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     // Keyboard mappings for interacting with the date `<CalendarMenu>`
     // Escape & Enter both close the `<CalendarMenu>`
-    if (event.key === 'Escape' || event.key === 'Enter')
-      blur();
+    if (event.key === 'Escape' || event.key === 'Enter') blur();
     // Move the currently selected date in the `<CalendarGrid />`
     else if (event.key === 'ArrowLeft' && date)
       onDateChange(
-        new Date(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() - 1
-        )
+        new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1)
       );
     else if (event.key === 'ArrowRight' && date)
       onDateChange(
-        new Date(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + 1
-        )
+        new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)
       );
     else if (event.key === 'ArrowUp' && date)
       onDateChange(
-        new Date(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() - 7
-        )
+        new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7)
       );
     else if (event.key === 'ArrowDown' && date)
       onDateChange(
-        new Date(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + 7
-        )
+        new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7)
       );
   };
 
@@ -101,11 +79,7 @@ const Datepicker = ({
 
   const handleBlurCapture = (event: React.FocusEvent) => {
     // Only close if focus moves outside `<Datepicker>` and its subcomponents
-    if (
-      !datepickerRef.current?.contains(
-        event.relatedTarget as Node
-      )
-    )
+    if (!datepickerRef.current?.contains(event.relatedTarget as Node))
       setIsOpen(false);
   };
 
@@ -143,6 +117,9 @@ const Datepicker = ({
           date={date}
           setDate={onDateChange}
           onDatePick={handleDatePick}
+          events={events}
+          showAcademicWeeks={showAcademicWeeks}
+          academicWeeks={academicWeeks}
           testId={testId}
         />
       )}

package/lib/components/Datepicker/Datepicker.types.ts

@@ -0,0 +1,9 @@
+// Used to display EventDots inside `<Day>` component
+export type CalendarEvent = {
+  date: string; // Date string in YYYY-MM-DD format
+};
+
+export type AcademicWeek = {
+  start: string; // Date string in YYYY-MM-DD format
+  number: number;
+};