feat(DatePicker): New DatePicker component

.nx/version-plans/version-plan-1775495905156.md

@@ -0,0 +1,5 @@
+---
+gamut: minor
+---
+
+New DatePicker component

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Gamut Exported Keys 1`] = `
 [
@@ -14,6 +14,12 @@ exports[`Gamut Exported Keys 1`] = `
   "BodyPortal",
   "Box",
   "Breadcrumbs",
+  "CalendarBody",
+  "CalendarFooter",
+  "CalendarHeader",
+  "CalendarNavLastMonth",
+  "CalendarNavNextMonth",
+  "CalendarWrapper",
   "Card",
   "Checkbox",
   "Coachmark",
@@ -33,6 +39,11 @@ exports[`Gamut Exported Keys 1`] = `
   "CTAButton",
   "DataList",
   "DataTable",
+  "DatePicker",
+  "DatePickerCalendar",
+  "DatePickerContext",
+  "DatePickerInput",
+  "DatePickerProvider",
   "DelayedRenderWrapper",
   "Dialog",
   "Disclosure",
@@ -113,6 +124,7 @@ exports[`Gamut Exported Keys 1`] = `
   "ToolTip",
   "USE_DEBOUNCED_FIELD_DIRTY_KEY",
   "useConnectedForm",
+  "useDatePicker",
   "useDebouncedField",
   "useField",
   "useFormState",

packages/gamut/jest.config.ts

@@ -8,5 +8,5 @@ export default base('gamut', {
   setupFiles: ['<rootDir>/../../script/jest/base-setup.js'],
   setupFilesAfterEnv: ['<rootDir>/../../script/jest/rtl-setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  transformIgnorePatterns: ['node_modules/(?!(@vidstack/react)/)'],
+  transformIgnorePatterns: ['node_modules/(?!(@vidstack/react|@formatjs)/)'],
 });

packages/gamut/package.json

@@ -9,6 +9,7 @@
     "@codecademy/gamut-patterns": "0.10.28",
     "@codecademy/gamut-styles": "17.13.1",
     "@codecademy/variance": "0.26.1",
+    "@formatjs/intl-locale": "^5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",

packages/gamut/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,174 @@
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+
+import { Box, FlexBox } from '../Box';
+import { PopoverContainer } from '../PopoverContainer';
+import { DatePickerCalendar } from './DatePickerCalendar';
+import {
+  getDefaultRangeQuickActions,
+  getDefaultSingleQuickActions,
+} from './DatePickerCalendar/utils/quickActions';
+import { DatePickerProvider } from './DatePickerContext';
+import type {
+  DatePickerContextValue,
+  DatePickerRangeContextValue,
+} from './DatePickerContext/types';
+import { DatePickerInput } from './DatePickerInput';
+import type { DatePickerProps } from './types';
+import { useResolvedLocale } from './utils/locale';
+import { DEFAULT_DATE_PICKER_TRANSLATIONS } from './utils/translations';
+
+export const DatePicker: React.FC<DatePickerProps> = (props) => {
+  const {
+    locale,
+    shouldDisableDate,
+    children,
+    mode,
+    translations: translationsProp,
+    inputSize,
+    quickActions,
+  } = props;
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [focusGridSignal, setFocusGridSignal] = useState(false);
+  const [gridFocusRequested, setGridFocusRequested] = useState(false);
+  const [activeRangePart, setActiveRangePart] =
+    useState<DatePickerRangeContextValue['activeRangePart']>(null);
+  const inputRef = useRef<HTMLDivElement | null>(null);
+  const dialogId = useId();
+  const calendarDialogId = `datepicker-dialog-${dialogId.replace(/:/g, '')}`;
+
+  const clearGridFocusRequest = useCallback(() => {
+    setGridFocusRequested(false);
+  }, []);
+
+  const resolvedLocale = useResolvedLocale(locale);
+
+  const openCalendar = useCallback(() => {
+    setIsCalendarOpen(true);
+  }, []);
+
+  const focusCalendar = useCallback(() => {
+    setGridFocusRequested(true);
+    setFocusGridSignal((signal) => !signal);
+  }, []);
+
+  const closeCalendar = useCallback(() => {
+    setIsCalendarOpen(false);
+    setActiveRangePart(null);
+    setGridFocusRequested(false);
+    const shell = inputRef.current;
+    const toFocus =
+      shell?.querySelector<HTMLElement>('[role="spinbutton"]') ?? shell;
+    toFocus?.focus();
+  }, []);
+
+  const contextValue = useMemo<DatePickerContextValue>(() => {
+    const translations = {
+      ...DEFAULT_DATE_PICKER_TRANSLATIONS,
+      ...translationsProp,
+    };
+    const resolvedQuickActions =
+      quickActions ??
+      (mode === 'range'
+        ? getDefaultRangeQuickActions(translations)
+        : getDefaultSingleQuickActions(resolvedLocale));
+    const base = {
+      isCalendarOpen,
+      openCalendar,
+      focusCalendar,
+      focusGridSignal,
+      gridFocusRequested,
+      clearGridFocusRequest,
+      closeCalendar,
+      locale: resolvedLocale,
+      shouldDisableDate,
+      calendarDialogId,
+      translations,
+      quickActions: quickActions === null ? [] : resolvedQuickActions,
+    };
+    return mode === 'range'
+      ? {
+          ...base,
+          mode: 'range',
+          startDate: props.startDate,
+          endDate: props.endDate,
+          activeRangePart,
+          setActiveRangePart,
+          onRangeSelection: (startDate: Date | null, endDate: Date | null) => {
+            props.onStartSelected(startDate);
+            props.onEndSelected(endDate);
+          },
+        }
+      : {
+          ...base,
+          mode: 'single',
+          selectedDate: props.selectedDate,
+          onSelection: props.onSelected,
+        };
+  }, [
+    translationsProp,
+    quickActions,
+    mode,
+    resolvedLocale,
+    isCalendarOpen,
+    openCalendar,
+    focusCalendar,
+    focusGridSignal,
+    gridFocusRequested,
+    clearGridFocusRequest,
+    closeCalendar,
+    shouldDisableDate,
+    calendarDialogId,
+    props,
+    activeRangePart,
+  ]);
+
+  const content =
+    children !== undefined ? (
+      children
+    ) : (
+      <>
+        <FlexBox
+          gap={inputSize === 'small' ? 4 : 8}
+          ref={inputRef}
+          width="fit-content"
+        >
+          {mode === 'range' ? (
+            <>
+              <DatePickerInput rangePart="start" size={inputSize} />
+              <Box alignSelf="center" mt={32}>
+                {/* TODO: Adjust for RTL */}
+                <MiniArrowRightIcon />
+              </Box>
+              <DatePickerInput rangePart="end" size={inputSize} />
+            </>
+          ) : (
+            <DatePickerInput size={inputSize} />
+          )}
+        </FlexBox>
+        <PopoverContainer
+          alignment="bottom-left"
+          allowPageInteraction
+          focusOnProps={{ autoFocus: false, focusLock: false }}
+          invertAxis="x"
+          isOpen={isCalendarOpen}
+          targetRef={inputRef}
+          x={-20}
+          y={-16}
+          onRequestClose={closeCalendar}
+        >
+          <div
+            aria-label={contextValue.translations.calendarDialogAriaLabel}
+            id={calendarDialogId}
+            role="dialog"
+          >
+            <DatePickerCalendar dialogId={calendarDialogId} />
+          </div>
+        </PopoverContainer>
+      </>
+    );
+
+  return (
+    <DatePickerProvider value={contextValue}>{content}</DatePickerProvider>
+  );
+};