feat(DatePicker): New DatePicker component

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -13,8 +13,13 @@ exports[`Gamut Exported Keys 1`] = `
   "BodyPortal",
   "Box",
   "Breadcrumbs",
+  "Calendar",
+  "CalendarBody",
+  "CalendarFooter",
+  "CalendarHeader",
   "Card",
   "Checkbox",
+  "clampToMonth",
   "Coachmark",
   "Column",
   "ConnectedCheckbox",
@@ -32,6 +37,11 @@ exports[`Gamut Exported Keys 1`] = `
   "CTAButton",
   "DataList",
   "DataTable",
+  "DatePicker",
+  "DatePickerCalendar",
+  "DatePickerContext",
+  "DatePickerInput",
+  "DatePickerProvider",
   "DelayedRenderWrapper",
   "Dialog",
   "Disclosure",
@@ -46,14 +56,21 @@ exports[`Gamut Exported Keys 1`] = `
   "FocusTrap",
   "focusVisibleStyle",
   "Form",
+  "formatDateForInput",
+  "formatDateRangeForInput",
+  "formatMonthYear",
   "FormError",
   "FormGroup",
   "FormGroupDescription",
   "FormGroupLabel",
   "FormPropsContext",
   "FormRequiredText",
   "generateResponsiveClassnames",
+  "getDayOfWeek",
   "getFocusableElements",
+  "getMonthGrid",
+  "getWeekdayFullNames",
+  "getWeekdayLabels",
   "GridBox",
   "GridForm",
   "GridFormContent",
@@ -63,6 +80,11 @@ exports[`Gamut Exported Keys 1`] = `
   "InfoTip",
   "Input",
   "isClickableCrumb",
+  "isDateDisabled",
+  "isDateInRange",
+  "isPastDate",
+  "isSameDay",
+  "isValidDate",
   "LayoutGrid",
   "List",
   "ListCol",
@@ -75,6 +97,8 @@ exports[`Gamut Exported Keys 1`] = `
   "omitProps",
   "Overlay",
   "Pagination",
+  "parseDateFromInput",
+  "parseDateRangeFromInput",
   "Popover",
   "PopoverContainer",
   "PreviewTip",
@@ -112,6 +136,7 @@ exports[`Gamut Exported Keys 1`] = `
   "ToolTip",
   "USE_DEBOUNCED_FIELD_DIRTY_KEY",
   "useConnectedForm",
+  "useDatePicker",
   "useDebouncedField",
   "useField",
   "useFormState",

packages/gamut/src/DatePicker/Calendar/Calendar.tsx

@@ -0,0 +1,26 @@
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import * as React from 'react';
+
+import { Box } from '../../Box';
+
+/**
+ * Outer wrapper for the calendar (header + body + footer).
+ * Used by DatePickerCalendar to group the calendar content.
+ * Renders a CheckerDense pattern shadow at offset left 8, top 8.
+ */
+export const Calendar: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <Box position="relative" width="max-content">
+    <CheckerDense left={8} position="absolute" top={8} />
+    <Box
+      bg="background"
+      border={1}
+      borderRadius="sm"
+      position="relative"
+      zIndex={1}
+    >
+      {children}
+    </Box>
+  </Box>
+);

packages/gamut/src/DatePicker/Calendar/CalendarBody.tsx

@@ -0,0 +1,218 @@
+import { css, states } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import * as React from 'react';
+
+import { TextButton } from '../../Button';
+import { CalendarBodyProps } from './types';
+import {
+  getMonthGrid,
+  isDateDisabled,
+  isDateInRange,
+  isSameDay,
+} from './utils/dateGrid';
+import { getWeekdayFullNames, getWeekdayLabels } from './utils/format';
+import { getDatesWithRow, keyHandler } from './utils/keyHandler';
+
+const TableHeader = styled.th(
+  css({
+    fontSize: 14,
+    fontWeight: 'base',
+    color: 'text-disabled',
+    textAlign: 'center',
+  })
+);
+
+const DateButton = styled(TextButton)(
+  states({
+    isToday: {
+      position: 'relative',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 4,
+        left: '50%',
+        width: 4,
+        height: 4,
+        borderRadius: 'full',
+        bg: 'hyper',
+      },
+    },
+    isSelected: {
+      bg: 'text',
+      color: 'background',
+      '&:hover, &:focus': {
+        bg: 'secondary-hover',
+        color: 'background',
+      },
+      '&::after': {
+        bg: 'background',
+      },
+    },
+    isInRange: {
+      bg: 'text-disabled',
+      color: 'background',
+      borderRadius: 'none',
+      '&:hover, &:focus': {
+        bg: 'secondary-hover',
+        color: 'background',
+      },
+      '&::after': {
+        bg: 'background',
+      },
+    },
+    disabled: {
+      color: 'text-disabled',
+      textDecoration: 'line-through',
+    },
+  }),
+  css({
+    fontWeight: 'base',
+    width: '32px',
+  })
+);
+
+export const CalendarBody: React.FC<CalendarBodyProps> = ({
+  visibleDate,
+  selectedDate,
+  endDate = null,
+  disabledDates = [],
+  onDateSelect,
+  locale,
+  weekStartsOn = 0,
+  labelledById,
+  focusedDate,
+  onFocusedDateChange,
+  onVisibleDateChange,
+  onEscapeKeyPress,
+}) => {
+  const year = visibleDate.getFullYear();
+  const month = visibleDate.getMonth();
+  const weeks = getMonthGrid(year, month, weekStartsOn);
+  const weekdayLabels = getWeekdayLabels(locale, weekStartsOn);
+  const weekdayFullNames = getWeekdayFullNames(locale, weekStartsOn);
+  const buttonRefs = useRef<Map<number, HTMLElement>>(new Map());
+
+  const datesWithRow = useMemo(() => getDatesWithRow(weeks), [weeks]);
+  const focusTarget = focusedDate ?? selectedDate;
+
+  const isToday = useCallback(
+    (d: Date | null) => d !== null && isSameDay(d, new Date()),
+    []
+  );
+
+  const focusButton = useCallback((date: Date | null) => {
+    if (date === null) return;
+    const key = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate()
+    ).getTime();
+    buttonRefs.current.get(key)?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (focusTarget !== null) focusButton(focusTarget);
+  }, [focusTarget, focusButton]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent, date: Date) =>
+      keyHandler(
+        e,
+        date,
+        onFocusedDateChange,
+        datesWithRow,
+        month,
+        year,
+        disabledDates,
+        onDateSelect,
+        onEscapeKeyPress,
+        onVisibleDateChange
+      ),
+    [
+      onFocusedDateChange,
+      datesWithRow,
+      month,
+      year,
+      disabledDates,
+      onDateSelect,
+      onEscapeKeyPress,
+      onVisibleDateChange,
+    ]
+  );
+
+  const setButtonRef = useCallback((date: Date, el: HTMLElement | null) => {
+    const k = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate()
+    ).getTime();
+    if (el) buttonRefs.current.set(k, el);
+    else buttonRefs.current.delete(k);
+  }, []);
+
+  return (
+    <table aria-labelledby={labelledById} role="grid" width="100%">
+      <thead>
+        <tr>
+          {weekdayLabels.map((label, i) => (
+            <TableHeader abbr={weekdayFullNames[i]} key={label} scope="col">
+              {label}
+            </TableHeader>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {weeks.map((week, rowIndex) => (
+          <tr key={week.join('-')}>
+            {week.map((date, colIndex) => {
+              if (date === null) {
+                return (
+                  // fix this error
+                  // eslint-disable-next-line react/no-array-index-key, jsx-a11y/control-has-associated-label
+                  <td key={`empty-${rowIndex}-${colIndex}`} role="gridcell" />
+                );
+              }
+              const selected =
+                isSameDay(date, selectedDate) || isSameDay(date, endDate);
+              const inRange =
+                !!selectedDate &&
+                !!endDate &&
+                isDateInRange(date, selectedDate, endDate);
+              const disabled = isDateDisabled(date, disabledDates);
+              const today = isToday(date);
+              // this is making the selected date a differnet color bc it is focused, look into further
+              const isFocused =
+                focusTarget !== null && isSameDay(date, focusTarget);
+
+              return (
+                <td
+                  aria-selected={selected}
+                  key={date.getTime()}
+                  role="gridcell"
+                >
+                  <DateButton
+                    disabled={disabled}
+                    isInRange={inRange}
+                    isSelected={selected}
+                    isToday={today}
+                    ref={(el) => setButtonRef(date, el as HTMLElement | null)}
+                    tabIndex={isFocused ? 0 : -1}
+                    variant="secondary"
+                    onClick={() => onDateSelect(date)}
+                    onFocus={() => onFocusedDateChange?.(date)}
+                    onKeyDown={(e: React.KeyboardEvent) =>
+                      handleKeyDown(e, date)
+                    }
+                  >
+                    {date.getDate()}
+                  </DateButton>
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

packages/gamut/src/DatePicker/Calendar/CalendarFooter.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { FlexBox } from '../../Box';
+import { TextButton } from '../../Button';
+import { CalendarFooterProps } from './types';
+import { getRelativeTodayLabel } from './utils/format';
+
+// function formatQuickActionLabel(action: QuickAction): string {
+//   const { num, timePeriod } = action;
+//   const period =
+//     timePeriod === 'day'
+//       ? num === 1
+//         ? 'day'
+//         : 'days'
+//       : timePeriod === 'week'
+//       ? num === 1
+//         ? 'week'
+//         : 'weeks'
+//       : timePeriod === 'month'
+//       ? num === 1
+//         ? 'month'
+//         : 'months'
+//       : num === 1
+//       ? 'year'
+//       : 'years';
+//   return `${num} ${period}`;
+// }
+
+export const CalendarFooter: React.FC<CalendarFooterProps> = ({
+  onClearDate,
+  onTodayClick,
+  locale,
+  clearText,
+  disabled,
+  showClearButton,
+}) => {
+  // const actions = quickActions.slice(0, 3);
+
+  return (
+    <FlexBox
+      alignItems="center"
+      borderTop={1}
+      justifyContent="space-between"
+      p={12}
+    >
+      {showClearButton && (
+        <TextButton disabled={disabled} onClick={() => onClearDate?.()}>
+          {clearText}
+        </TextButton>
+      )}
+      <FlexBox gap={32}>
+        <TextButton onClick={() => onTodayClick?.()}>
+          {getRelativeTodayLabel(locale)}
+        </TextButton>
+      </FlexBox>
+    </FlexBox>
+  );
+};