uikit-react-public 0.11.16 → 0.11.24

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

@@ -3,14 +3,16 @@ import { useArgs } from '@storybook/preview-api';
 import Datepicker from './Datepicker';
 
 const meta = {
-  title: 'Components/Work in progress/Datepicker/Datepicker',
+  title: 'Components/Ready to use/Datepicker',
   component: Datepicker,
   parameters: { layout: 'padded' },
   argTypes: {
-    date: { control: { type: 'date' } },
+    value: { control: { type: 'date' } },
     minDate: { control: { type: 'date' } },
     maxDate: { control: { type: 'date' } },
+    disabled: { control: { type: 'boolean' } },
     native: { control: { type: 'boolean' } },
+    showAcademicWeeks: { control: { type: 'boolean' } },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Datepicker>;
@@ -18,52 +20,247 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const dateToISOString = (date: Date) => {
+  return date.toISOString().split('T')[0];
+};
+
 export const Default: Story = {
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null | undefined) =>
+      updateArgs({ value: value });
+    return (
+      <Datepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+// Story repeated in Calendar.stories.tsx
+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();
 
-    // Convert UNIX timestamp from Storybook controls to `Date` object
+    // Storybook controls provide UNIX timestamps for dates, need to convert
     // https://storybook.js.org/docs/essentials/controls#annotation
-    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;
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
 
-    // const onChange = (event: React.ChangeEvent<HTMLInputElement>) => updateArgs({ date: event.target.valueAsDate });
-    const onDateChange = (date: Date | null | undefined) =>
-      updateArgs({ date: date });
+    const onValueChange = (value: Date | null | undefined) =>
+      updateArgs({ value: value });
     return (
       <Datepicker
         {...args}
-        date={args.date}
-        onDateChange={onDateChange}
+        onValueChange={onValueChange}
       />
     );
   },
 };
 
-export const AsNative: Story = {
+const academicWeeks = [
+  { 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 },
+];
+
+// Story repeated in Calendar.stories.tsx
+export const WithAcademicWeeks: Story = {
+  name: 'With academic weeks',
+  args: {
+    showAcademicWeeks: true,
+    academicWeeks: academicWeeks,
+    value: new Date(academicWeeks[0].start), // So the week numbers appear on story mount
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null | undefined) =>
+      updateArgs({ value: value });
+    return (
+      <Datepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+// Story repeated in Datepicker.stories.tsx
+export const MinMaxDates: Story = {
+  name: 'With min and max dates',
+  args: {
+    // Initialise min date as 5 days into the current month
+    minDate: (() => {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), 5)
+        .toISOString()
+        .split('T')[0];
+    })(),
+    // Initialise max date as 5 days before the last day of the current month
+    maxDate: (() => {
+      const now = new Date();
+      // Get last day of current month
+      const lastDay = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0
+      ).getDate();
+      return new Date(now.getFullYear(), now.getMonth(), lastDay - 5)
+        .toISOString()
+        .split('T')[0];
+    })(),
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null | undefined) =>
+      updateArgs({ value: value });
+    return (
+      <Datepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+export const Native: Story = {
   name: 'As native fallback',
   args: {
     native: true,
-    date: null,
-    onDateChange: () => {},
   },
   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 });
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null | undefined) =>
+      updateArgs({ value: value });
     return (
       <Datepicker
         {...args}
-        date={args.date}
-        onDateChange={onDateChange}
+        onValueChange={onValueChange}
       />
     );
   },

package/lib/components/Datepicker/Datepicker.tsx

@@ -1,153 +1,50 @@
-import {
-  useState,
-  useRef,
-  memo,
-  InputHTMLAttributes,
-} from 'react';
-import { css, cx } from '@emotion/css';
-import {
-  Native,
-  DateField,
-  CalendarMenu,
-} from './subcomponents';
-import { useTheme } from '../../theme';
-
-export const NAME = 'ucl-datepicker';
-
-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;
-  testId?: string;
-}
+import { NativeDatepicker, CustomDatepicker } from './subcomponents';
+import { dateToLocaleISOString } from './utils';
+import type { DatepickerProps } from './Datepicker.types';
 
 const Datepicker = ({
-  date,
+  value,
+  onValueChange,
   minDate,
   maxDate,
-  onDateChange,
-  native,
-  testId = NAME,
+  disabled,
   className,
+  native,
+  nativeRef,
+  nativeHTMLAttributes,
   ...props
 }: DatepickerProps) => {
-  const [theme] = useTheme();
-  const [isOpen, setIsOpen] = useState(false);
-  const datepickerRef = useRef<HTMLDivElement>(null);
+  if (native) {
+    const nativeValue = dateToLocaleISOString(value);
 
-  if (native)
     return (
-      <Native
-        date={date}
+      <NativeDatepicker
+        value={nativeValue || ''}
+        onChange={(event) => {
+          const dateString = event.target.value;
+          onValueChange?.(dateString ? new Date(dateString) : null, event);
+        }}
+        min={minDate || undefined}
+        max={maxDate || undefined}
+        disabled={disabled}
+        className={className}
+        ref={nativeRef}
+        {...nativeHTMLAttributes}
+      />
+    );
+  } else {
+    return (
+      <CustomDatepicker
+        value={value}
+        onValueChange={onValueChange}
         minDate={minDate}
         maxDate={maxDate}
-        onDateChange={onDateChange}
-        testId={testId}
+        className={className}
+        disabled={disabled}
         {...props}
       />
     );
-
-  const blur = () =>
-    (document.activeElement as HTMLElement)?.blur();
-
-  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();
-    // Move the currently selected date in the `<CalendarGrid />`
-    else if (event.key === 'ArrowLeft' && date)
-      onDateChange(
-        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
-        )
-      );
-    else if (event.key === 'ArrowUp' && date)
-      onDateChange(
-        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
-        )
-      );
-  };
-
-  const handleOnFocus = () => setIsOpen(true);
-
-  const handleDatePick = () => blur();
-
-  const handleBlurCapture = (event: React.FocusEvent) => {
-    // Only close if focus moves outside `<Datepicker>` and its subcomponents
-    if (
-      !datepickerRef.current?.contains(
-        event.relatedTarget as Node
-      )
-    )
-      setIsOpen(false);
-  };
-
-  const baseStyle = css`
-    position: relative;
-    width: max-content;
-    user-select: none;
-
-    &:focus-visible,
-    &:focus-within {
-      box-shadow: ${theme.boxShadow.focus};
-      outline: none;
-    }
-  `;
-
-  const style = cx(baseStyle, className);
-
-  return (
-    <div
-      className={style}
-      ref={datepickerRef}
-      onFocus={handleOnFocus}
-      onBlurCapture={handleBlurCapture}
-      onKeyDown={handleKeyDown}
-      tabIndex={0}
-      data-testid={testId}
-    >
-      <DateField
-        date={date}
-        onChange={onDateChange}
-        testId={testId}
-      />
-      {isOpen && (
-        <CalendarMenu
-          date={date}
-          setDate={onDateChange}
-          onDatePick={handleDatePick}
-          testId={testId}
-        />
-      )}
-    </div>
-  );
+  }
 };
 
-export default memo(Datepicker);
+export default Datepicker;

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

@@ -0,0 +1,38 @@
+import type { InputHTMLAttributes, HTMLAttributes, RefObject } from 'react';
+import type { CalendarEvent, AcademicWeek } from '../Calendar';
+
+export type DatepickerValue = Date | null;
+
+interface BaseDatepickerProps {
+  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
+  events?: CalendarEvent[];
+  showAcademicWeeks?: boolean;
+  academicWeeks?: AcademicWeek[];
+  testId?: string;
+  disabled?: boolean;
+  ref?: RefObject<HTMLDivElement>;
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+// Valid HTML attributes for <input type="date">
+type NativeDatepickerAttributeProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  // Remove shared 'top-level' & handled props
+  'value' | 'onChange' | 'min' | 'max' | 'className' | 'disabled'
+>;
+
+// `className?: string` is received automatically from `HTMLAttributes<HTMLDivElement>`
+export interface DatepickerProps
+  extends BaseDatepickerProps,
+    HTMLAttributes<HTMLDivElement> {
+  native?: boolean;
+  // Attached as a nested object
+  nativeHTMLAttributes?: NativeDatepickerAttributeProps;
+  nativeRef?: RefObject<HTMLInputElement>;
+}