E&A Date Picker (Part One) - Integration and usage within the E&A Timeline header

.parcelrc

@@ -5,6 +5,8 @@
   "resolvers": ["parcel-resolver-ignore", "parcel-resolver-veda", "@parcel/resolver-glob", "..."],
   "transformers": {
     "raw:*": ["@parcel/transformer-raw"],
-    "*.mdx": ["parcel-transformer-mdx-frontmatter", "parcel-transformer-mdx"]
+    "*.mdx": ["parcel-transformer-mdx-frontmatter", "parcel-transformer-mdx"],
+    "*.css": ["@parcel/transformer-postcss"],
+    "*.scss": ["@parcel/transformer-sass"]
   }
 }

.sassrc.js

@@ -0,0 +1,9 @@
+const path = require('path')
+
+const CWD = process.cwd()
+
+module.exports = {
+  "includePaths": [
+    path.resolve(CWD, 'node_modules/@uswds/uswds/packages')
+  ]
+}

app/scripts/components/common/datepicker/index.scss

@@ -0,0 +1,30 @@
+@use "usa-date-picker/src/styles";
+
+.usa-date-picker {
+    position: relative;
+    width: 0;
+    height: 0;
+
+    &__calendar {
+      width: 20rem;
+      position: absolute;
+      top: 100%;
+      border: 1px solid rgb(230, 230, 230);
+    }
+
+    &--open-upwards .usa-date-picker__calendar {
+        top: auto;
+        bottom: 100%;
+      }
+
+    & *:not(:focus), & *:not(:active) {
+        font-family: themeVal('type.base.family');
+        z-index: 9999;
+    }
+
+    .usa-input,
+    &__button,
+    &__status {
+        display: none;
+    }
+}

app/scripts/components/common/datepicker/index.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode, useRef, ReactElement } from "react";
+import { DatePicker } from "@trussworks/react-uswds";
+import { format } from 'date-fns';
+
+import './index.scss';
+
+interface SimpleDatePickerProps {
+  disabled: boolean;
+  tipContent: ReactNode;
+  onConfirm: (date: string) => void;
+  triggerHeadReference: string;
+  id: string;
+  selectedDay: Date | null;
+  renderTriggerElement: (props: {
+    onClick: () => void;
+    disabled: boolean;
+    tipContent: ReactNode;
+    triggerHeadReference: string;
+    selectedDay: Date | null;
+  }) => ReactElement;
+}
+
+export const SimpleDatePicker = ({ disabled, tipContent, onConfirm, id, triggerHeadReference, selectedDay, renderTriggerElement }: SimpleDatePickerProps) => {
+    const datePickerRef = useRef<HTMLDivElement>(null);
+
+    const toggleCalendar = () => {
+      // We have no reference to the internals of the react-uswds DatePicker, so we have to query for it's trigger.
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (datePickerRef.current) {
+        const button = datePickerRef.current.querySelector('button.usa-date-picker__button')! as HTMLButtonElement;
+        button.click();
+      }
+    };
+
+    return (
+      <>
+        {renderTriggerElement({
+          onClick: toggleCalendar,
+          disabled,
+          tipContent,
+          triggerHeadReference,
+          selectedDay,
+        })}
+        <div ref={datePickerRef}>
+          <DatePicker
+            key={selectedDay ? selectedDay.toISOString() : 'default'}
+            aria-describedby='veda-date-hint'
+            aria-labelledby='veda-date-label'
+            id={id}
+            name={id}
+            onChange={onConfirm}
+            defaultValue={format(selectedDay ?? new Date(), 'yyyy-MM-dd')}
+          />
+        </div>
+      </>
+    );
+  };

app/scripts/components/datasets/s-explore/panel-date-widget.tsx

@@ -51,7 +51,7 @@ interface PanelDateWidgetProps {
   children?: ReactNode;
 }
 
-const formatDate = (date: Date | null, view: string) => {
+export const formatDate = (date: Date | null, view: string) => {
   if (!date) return 'Date';
 
   switch (view) {