Merge pull request #259 from open-formulieren/issue/242-upgrade-calendar

Upgrade calendar

Author: sergei-maertens

package-lock.json

@@ -140,6 +140,7 @@
     "vitest": "^3.0.7"
   },
   "dependencies": {
+    "@utrecht/calendar-react": "^1.0.15",
     "@utrecht/component-library-react": "1.0.0-alpha.353",
     "clsx": "^2.1.0",
     "dompurify": "^3.2.6",

package.json

@@ -2,6 +2,8 @@ import type {Meta, StoryObj} from '@storybook/react-vite';
 import {Paragraph} from '@utrecht/component-library-react';
 import {expect, userEvent, waitFor, within} from 'storybook/test';
 
+import {withMockDate} from '@/sb-decorators';
+
 import {DatePicker, DatePickerRoot, DatePickerTrigger} from './DatePicker';
 
 export default {
@@ -36,6 +38,7 @@ export default {
         </>
       );
     },
+    withMockDate,
   ],
   args: {
     children: null,
@@ -45,6 +48,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
+    mockDate: new Date('2025-12-17T12:00:00+01:00'),
   },
 } satisfies Meta<typeof DatePicker>;
 

src/components/forms/DatePicker.stories.tsx

@@ -1,5 +1,5 @@
 @use '@utrecht/components/button';
-@use '@utrecht/components/calendar';
+@use '@utrecht/calendar-css';
 
 @use '@/scss/button-override';
 

src/components/forms/DatePickerCalendar.scss

@@ -1,6 +1,6 @@
 // Calendar component documentation:
 // https://nl-design-system.github.io/utrecht/storybook-react/index.html?path=/docs/react-component-calendar--docs
-import {Calendar} from '@utrecht/component-library-react';
+import {Calendar} from '@utrecht/calendar-react';
 import type {Locale} from 'date-fns';
 import {useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
@@ -24,7 +24,7 @@ const loadCalendarLocale = async (locale: string): Promise<Locale> => {
   }
 };
 
-const DatePickerCalendar: typeof Calendar = props => {
+const DatePickerCalendar: React.FC<React.ComponentProps<typeof Calendar>> = props => {
   const intl = useIntl();
   const [calendarLocale, setCalendarLocale] = useState<Locale | null>(null);
 

src/components/forms/DatePickerCalendar.tsx

@@ -356,10 +356,14 @@ export const NoErrorWhileFocus: Story = {
 };
 
 export const KeyboardNavigation: Story = {
+  decorators: [withMockDate],
   args: {
     name: 'test',
     label: 'Logical tab navigation',
   },
+  parameters: {
+    mockDate: new Date('2025-12-17T12:00:00+01:00'),
+  },
 
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);