@utrecht/calendar-react 1.0.0

package/src/CalendarTableWeeksContainer.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+export const CalendarTableWeeksContainer = ({ children }: PropsWithChildren) => (
+  <thead className="utrecht-calendar__table-weeks-container">
+    <tr className="utrecht-calendar__table-weeks-container-content">{children}</tr>
+  </thead>
+);

package/src/CalendarTableWeeksItem.tsx

@@ -0,0 +1,10 @@
+import { DetailedHTMLProps, PropsWithChildren, ThHTMLAttributes } from 'react';
+
+export interface CalendarTableWeeksItemProps
+  extends DetailedHTMLProps<ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement> {}
+
+export const CalendarTableWeeksItem = ({ children, ...props }: PropsWithChildren<CalendarTableWeeksItemProps>) => (
+  <th {...props} className="utrecht-calendar__table-weeks-item">
+    {children}
+  </th>
+);

package/src/IconArrowLeft.tsx

@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+export const IconArrowLeft = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41Z" fill="currentColor" />
+  </svg>
+);

package/src/IconArrowLeftDouble.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+export const IconArrowLeftDouble = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M17.59 18 19 16.59 14.42 12 19 7.41 17.59 6l-6 6 6 6Z" fill="currentColor" />
+    <path d="m11 18 1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6 6 6Z" fill="currentColor" />
+  </svg>
+);

package/src/IconArrowRight.tsx

@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+export const IconArrowRight = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41Z" fill="currentColor" />
+  </svg>
+);

package/src/IconArrowRightDouble.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+export const IconArrowRightDouble = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6-6-6Z" fill="currentColor" />
+    <path d="m13 6-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6-6-6Z" fill="currentColor" />
+  </svg>
+);

package/src/css.tsx

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import '@utrecht/calendar-css/src/index.scss';
+
+export type { CalendarProps } from './index';
+export { Calendar } from './index';

package/src/index.test.tsx

@@ -0,0 +1,145 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { formatISO } from 'date-fns';
+import { nl } from 'date-fns/locale';
+import { Calendar, Events } from './index';
+
+describe('Calendar', () => {
+  it('invokes an onclick callback with a selected date', () => {
+    let selectedDate = '';
+    render(
+      <Calendar
+        currentDate={new Date(2023, 5, 11)}
+        onCalendarClick={(date) => {
+          selectedDate = date;
+        }}
+        locale={nl}
+      />,
+    );
+
+    let dayButton = screen.getByRole('button', { name: 'donderdag 15 juni 2023' });
+    fireEvent.click(dayButton);
+
+    expect(selectedDate).toEqual(formatISO(new Date(2023, 5, 15)));
+  });
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<Calendar onCalendarClick={() => {}} />);
+
+    const calendar = container.querySelector(':only-child');
+
+    expect(calendar).toHaveClass('utrecht-calendar');
+  });
+
+  it('renders the selected date', () => {
+    const currentDate = new Date(2023, 5, 15);
+    render(<Calendar currentDate={currentDate} onCalendarClick={() => {}} locale={nl} />);
+
+    let dayButton = screen.getByRole('button', { name: 'woensdag 14 juni 2023' });
+    fireEvent.click(dayButton);
+
+    expect(dayButton).toHaveClass('utrecht-calendar__table-days-item-day--selected');
+  });
+
+  it('disables dates before the minDate value', () => {
+    const minDate = new Date(2023, 5, 15);
+    const currentDate = new Date(2023, 5, 15);
+    render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} minDate={minDate} />);
+
+    let previousDayButton = screen.getByRole('button', { name: 'woensdag 14 juni 2023' });
+    let currentDayButton = screen.getByRole('button', { name: 'donderdag 15 juni 2023' });
+
+    expect(previousDayButton).toBeDisabled();
+    expect(previousDayButton).toHaveClass('utrecht-button--disabled');
+    expect(currentDayButton).not.toBeDisabled();
+  });
+
+  it('disables dates after the maxDate value', () => {
+    const maxDate = new Date(2023, 5, 15);
+    const currentDate = new Date(2023, 5, 15);
+    render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} maxDate={maxDate} />);
+
+    let currentDayButton = screen.getByRole('button', { name: 'donderdag 15 juni 2023' });
+    let nextDayButton = screen.getByRole('button', { name: 'vrijdag 16 juni 2023' });
+
+    expect(currentDayButton).not.toBeDisabled();
+    expect(nextDayButton).toBeDisabled();
+    expect(nextDayButton).toHaveClass('utrecht-button--disabled');
+  });
+
+  it('correctly renders disabled events', () => {
+    const currentDate = new Date(2023, 5, 1);
+    const events: Events[] = [
+      {
+        date: new Date(2023, 5, 14).toISOString(),
+        disabled: true,
+      },
+      {
+        date: new Date(2023, 5, 15).toISOString(),
+        emphasis: true,
+      },
+      {
+        date: new Date(2023, 5, 16).toISOString(),
+        selected: true,
+      },
+    ];
+    render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} events={events} />);
+
+    let disabledEventButton = screen.getByRole('button', { name: 'woensdag 14 juni 2023' });
+    let emphasisEventButton = screen.getByRole('button', { name: 'donderdag 15 juni 2023' });
+    let selectedEventButton = screen.getByRole('button', { name: 'vrijdag 16 juni 2023' });
+
+    expect(disabledEventButton).toHaveClass('utrecht-button--disabled');
+    expect(disabledEventButton).toBeDisabled();
+    expect(emphasisEventButton).toHaveClass('utrecht-calendar__table-days-item-day--emphasis');
+    expect(selectedEventButton).toHaveClass('utrecht-calendar__table-days-item-day--selected');
+  });
+
+  it('navigates to previous year', () => {
+    const currentDate = new Date(2023, 2, 1);
+    const { container } = render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);
+
+    let previousYearButton = screen.getByRole('button', { name: 'Previous year' });
+    let currentDateLabel = container.querySelector('.utrecht-calendar__navigation-label');
+
+    expect(currentDateLabel).toContainHTML('maart 2023');
+    if (previousYearButton) fireEvent.click(previousYearButton);
+    expect(currentDateLabel).toContainHTML('maart 2022');
+  });
+
+  it('navigates to next year', () => {
+    const currentDate = new Date(2023, 2, 1);
+    const { container } = render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);
+
+    let nextYearButton = screen.getByRole('button', { name: 'Next year' });
+    let currentDateLabel = container.querySelector('.utrecht-calendar__navigation-label');
+
+    expect(currentDateLabel).toContainHTML('maart 2023');
+    if (nextYearButton) fireEvent.click(nextYearButton);
+    expect(currentDateLabel).toContainHTML('maart 2024');
+  });
+
+  it('navigates to previous month', () => {
+    const currentDate = new Date(2023, 2, 1);
+    const { container } = render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);
+
+    let previousMonthButton = screen.getByRole('button', { name: 'Previous month' });
+    let currentDateLabel = container.querySelector('.utrecht-calendar__navigation-label');
+
+    expect(currentDateLabel).toContainHTML('maart 2023');
+    if (previousMonthButton) fireEvent.click(previousMonthButton);
+    expect(currentDateLabel).toContainHTML('februari 2023');
+  });
+
+  it('navigates to next month', () => {
+    const currentDate = new Date(2023, 2, 1);
+    const { container } = render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);
+
+    let nextMonthButton = screen.getByRole('button', { name: 'Next month' });
+    let currentDateLabel = container.querySelector('.utrecht-calendar__navigation-label');
+
+    expect(currentDateLabel).toContainHTML('maart 2023');
+    if (nextMonthButton) fireEvent.click(nextMonthButton);
+    expect(currentDateLabel).toContainHTML('april 2023');
+  });
+});

package/src/index.tsx

@@ -0,0 +1,199 @@
+import {
+  addMonths,
+  addWeeks,
+  addYears,
+  eachDayOfInterval,
+  endOfDay,
+  endOfWeek,
+  format,
+  formatISO,
+  getYear,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  Locale,
+  parseISO,
+  setMonth,
+  setYear,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from 'date-fns';
+import { enUS } from 'date-fns/locale';
+import chunk from 'lodash.chunk';
+import { useState } from 'react';
+import { CalendarNavigation } from './CalendarNavigation';
+import { CalendarNavigationButtons } from './CalendarNavigationButtons';
+import { CalendarNavigationLabel } from './CalendarNavigationLabel';
+import { CalendarTableDaysContainer } from './CalendarTableDaysContainer';
+import { CalendarTableDaysItem } from './CalendarTableDaysItem';
+import { CalendarTableDaysItemDay } from './CalendarTableDaysItemDay';
+import { CalendarTableWeeksContainer } from './CalendarTableWeeksContainer';
+import { CalendarTableWeeksItem } from './CalendarTableWeeksItem';
+import { IconArrowLeft } from './IconArrowLeft';
+import { IconArrowLeftDouble } from './IconArrowLeftDouble';
+import { IconArrowRight } from './IconArrowRight';
+import { IconArrowRightDouble } from './IconArrowRightDouble';
+
+function createCalendar(today: Date): Date[] {
+  const start = startOfWeek(startOfMonth(today), {
+    weekStartsOn: 1 /* Monday */,
+  });
+  const end = endOfWeek(addWeeks(start, 5), {
+    weekStartsOn: 1 /* Monday */,
+  });
+  return eachDayOfInterval({ start, end });
+}
+
+export type Events = {
+  date: string;
+  emphasis?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+};
+
+export interface CalendarProps {
+  /**
+   * `onCalendarClick` It's a callback function that returns the selected date, triggered when you click on the day
+   *
+   * */
+  onCalendarClick: (date: string) => void;
+  /**
+   * `events` An array of event objects that contain some properties that allow you to change the calendar day style base on your value
+   * `{date?: Date; emphasis?: boolean; selected?: boolean; disabled?: boolean;}`
+   *
+   * */
+  events?: Events[];
+  /**
+   * `currentDate` The default value is `new Date()`, but you can provide a different date
+   *   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+   * */
+  currentDate?: Date;
+  /**
+   * `locale` to change the calendar language by using 'date-fns/locale'
+   *  `import { nl, enUS } from 'date-fns/locale';`
+   * */
+  locale?: Locale;
+  previousYearButtonTitle?: string;
+  nextYearButtonTitle?: string;
+  previousMonthButtonTitle?: string;
+  nextMonthButtonTitle?: string;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+/**
+ * Calendar Component
+ * powered by date-fns, so that make it easy to use the `date-fns` date functions & locale
+ * */
+
+export const Calendar = ({
+  onCalendarClick,
+  events,
+  currentDate,
+  locale = enUS,
+  previousYearButtonTitle = 'Previous year',
+  nextYearButtonTitle = 'Next year',
+  previousMonthButtonTitle = 'Previous month',
+  nextMonthButtonTitle = 'Next month',
+  minDate,
+  maxDate,
+}: CalendarProps) => {
+  const [visibleMonth, setVisibleMonth] = useState(currentDate || new Date());
+  const [selectedDate, setSelectedDate] = useState(currentDate);
+  const calendar = createCalendar(visibleMonth);
+  const start = startOfWeek(visibleMonth, { weekStartsOn: 1 });
+  const end = endOfWeek(visibleMonth, { weekStartsOn: 1 });
+
+  const currentWeek = eachDayOfInterval({ start, end }).map((day) => day);
+  const chunksWeeks = chunk(calendar, calendar.length / 6);
+
+  const weeks = chunksWeeks.map((week) =>
+    week.map((date) => {
+      const currentEvent =
+        events && events.length > 0 && events.find((e) => isSameDay(endOfDay(parseISO(e.date)), date));
+      if (currentEvent) {
+        return {
+          date,
+          emphasis: currentEvent.emphasis,
+          selected: currentEvent.selected,
+          disabled: currentEvent.disabled,
+        };
+      } else {
+        return {
+          date,
+          emphasis: false,
+          selected: false,
+          disabled: false,
+        };
+      }
+    }),
+  );
+
+  return (
+    <div className="utrecht-calendar">
+      <CalendarNavigation>
+        <CalendarNavigationButtons
+          previousIcon={<IconArrowLeftDouble title={previousYearButtonTitle} />}
+          nextIcon={<IconArrowRightDouble title={nextYearButtonTitle} />}
+          onPreviousClick={() => setVisibleMonth(setYear(visibleMonth, getYear(visibleMonth) - 1))}
+          onNextClick={() => setVisibleMonth(addYears(visibleMonth, 1))}
+        >
+          <CalendarNavigationButtons
+            previousIcon={<IconArrowLeft title={previousMonthButtonTitle} />}
+            nextIcon={<IconArrowRight title={nextMonthButtonTitle} />}
+            onPreviousClick={() => setVisibleMonth(setMonth(visibleMonth, visibleMonth.getMonth() - 1))}
+            onNextClick={() => setVisibleMonth(addMonths(visibleMonth, 1))}
+          >
+            <CalendarNavigationLabel dateTime={format(visibleMonth, 'yyyy-mm')}>
+              {format(visibleMonth, 'LLLL Y', { locale })}
+            </CalendarNavigationLabel>
+          </CalendarNavigationButtons>
+        </CalendarNavigationButtons>
+      </CalendarNavigation>
+      <table className="utrecht-calendar__table" role="grid">
+        <CalendarTableWeeksContainer>
+          {currentWeek &&
+            currentWeek.length > 0 &&
+            currentWeek.map((day, index) => (
+              <CalendarTableWeeksItem scope="col" abbr={format(day, 'EEEE', { locale })} key={index}>
+                {format(day, 'EEEEEE', { locale })}
+              </CalendarTableWeeksItem>
+            ))}
+        </CalendarTableWeeksContainer>
+        <CalendarTableDaysContainer>
+          {weeks &&
+            weeks.length > 0 &&
+            weeks.map((week, index) => (
+              <CalendarTableDaysItem key={index}>
+                {week.map((day, index) => {
+                  return (
+                    <CalendarTableDaysItemDay
+                      isToday={isSameDay(day.date, Date.now())}
+                      dayOutOfTheMonth={!isSameMonth(day.date, visibleMonth)}
+                      key={index}
+                      onClick={() => {
+                        setVisibleMonth(day.date);
+                        setSelectedDate(day.date);
+                        onCalendarClick(formatISO(day.date));
+                      }}
+                      aria-label={format(day.date, 'eeee dd LLLL Y', { locale })}
+                      day={day.date.getDate().toString()}
+                      emphasis={day.emphasis}
+                      selected={day.selected || (selectedDate && isSameDay(day.date, selectedDate))}
+                      disabled={
+                        day.disabled ||
+                        (minDate && isBefore(day.date, startOfDay(minDate))) ||
+                        (maxDate && isAfter(day.date, endOfDay(maxDate)))
+                      }
+                    />
+                  );
+                })}
+              </CalendarTableDaysItem>
+            ))}
+        </CalendarTableDaysContainer>
+      </table>
+    </div>
+  );
+};