E&A Date Picker (Part Two) - react-calendar with USWDS tokens (#1048)

**Related Ticket:** _{link related ticket here}_

### Description of Changes
We're introducing a more flexible calendar component which will use some
USWDS design tokens and icons. The change is made based on this
discussion:
#1044 (comment)

### Notes & Questions About Changes
_{Add additonal notes and outstanding questions here related to changes
in this pull request}_

### Validation / Testing
_{Update with info on what can be manually validated in the Deploy
Preview link for example "Validate style updates to selection modal do
NOT affect cards"}_

Author: sandrahoang686

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

@@ -0,0 +1,86 @@
+// @NOTE: Optimize the import paths to the file
+@use "uswds-core/src/styles/functions/utilities" as utils;
+@use "uswds-core/src/styles/mixins/utilities" as mixins;
+@use "uswds-core/src/styles/mixins/typography" as typography;
+
+.react-calendar {
+  z-index: 99999;
+  font-family: inherit !important;
+
+  * {
+    @include typography.typeset('ui', 3);
+    font-family: inherit !important;
+  }
+
+  &__navigation {
+    margin-bottom: 0 !important;
+  }
+
+  &__month-view__weekdays__weekday {
+    color: utils.color('gray-90');
+  }
+
+  &__tile {
+
+    &--active,
+    &--hasActive {
+      background-color: utils.color('primary-vivid') !important;
+      color: utils.color('base-lightest');
+    }
+
+    &--now:not(&--active),
+    &--now:not(&--hasActive) {
+      background: none !important;
+      color: utils.color('gray-90') !important;
+
+      &:hover,
+      &:focus {
+        background-color: utils.color('gray-10') !important;
+      }
+    }
+  }
+
+  .usa-icon {
+    width: 32px;
+    height: 20px;
+  }
+
+  &__navigation-button {
+    min-width: 32px;
+  }
+
+  [class*="--weekend"]:not(.react-calendar__tile--active) {
+    color: utils.color('gray-90') !important;
+  }
+
+  abbr[title] {
+    @include mixins.u-text('normal');
+    text-decoration: none;
+  }
+
+  &__tippy {
+    box-shadow: none !important;
+    border: none !important;
+    background: transparent !important;
+
+    &[data-placement^='top'] > .tippy-arrow::before {
+      border-top-color: transparent !important;
+    }
+
+    &[data-placement^='bottom'] > .tippy-arrow::before {
+      border-bottom-color: transparent !important;
+    }
+
+    &[data-placement^='left'] > .tippy-arrow::before {
+      border-left-color: transparent !important;
+    }
+
+    &[data-placement^='right'] > .tippy-arrow::before {
+      border-right-color: transparent !important;
+    }
+
+    .tippy-content {
+      padding: 0 !important;
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+import React, { ReactNode, useRef, useState } from "react";
+import { Icon } from "@trussworks/react-uswds";
+import Calendar from 'react-calendar';
+import Tippy from "@tippyjs/react";
+import styled from "styled-components";
+
+import 'react-calendar/dist/Calendar.css';
+import './index.scss';
+
+interface SimpleDatePickerProps {
+  disabled: boolean;
+  tipContent: ReactNode;
+  onConfirm: (date: Date | null) => void;
+  triggerHeadReference: string;
+  selectedDay: Date | null;
+  renderTriggerElement: (props: {
+    onClick: () => void;
+    disabled: boolean;
+    tipContent: ReactNode;
+    triggerHeadReference: string;
+    selectedDay: Date | null;
+  }) => ReactNode;
+}
+
+const TriggerWrapper = styled.div`
+  display: flex;
+`;
+
+export const SimpleDatePicker = ({
+  disabled,
+  tipContent,
+  onConfirm,
+  triggerHeadReference,
+  selectedDay,
+  renderTriggerElement
+}: SimpleDatePickerProps) => {
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  const handleDateChange = (date: Date) => {
+    onConfirm(date);
+    setIsCalendarOpen(false);
+  };
+
+  const handleTriggerClick = () => {
+    setIsCalendarOpen(!isCalendarOpen);
+  };
+
+  const handleClickOutside = (event) => {
+    if (triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
+      setIsCalendarOpen(false);
+    }
+  };
+
+  return (
+    <div>
+      <TriggerWrapper ref={triggerRef}>
+        {renderTriggerElement({
+          onClick: handleTriggerClick,
+          disabled,
+          tipContent,
+          triggerHeadReference,
+          selectedDay,
+        })}
+      </TriggerWrapper>
+      {isCalendarOpen && (
+        <Tippy
+          className='react-calendar__tippy'
+          visible={isCalendarOpen}
+          onClickOutside={(_, event) => handleClickOutside(event)}
+          interactive={true}
+          placement='bottom'
+          content={
+            <Calendar
+              onChange={handleDateChange}
+              value={selectedDay}
+              className='react-calendar'
+              maxDetail='month'
+              nextLabel={<Icon.NavigateNext />}
+              prevLabel={<Icon.NavigateBefore />}
+              prev2Label={<Icon.NavigateFarBefore />}
+              next2Label={<Icon.NavigateFarNext />}
+            />
+          }
+        >
+          <div />
+        </Tippy>
+      )}
+    </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) {