date picker wrapper for react-day-picker

example/src/App.js

@@ -32,6 +32,7 @@ import {
   Loader,
   Select,
   Option,
+  DatePicker,
   // IMPORT_INJECTOR
 } from '@cision/rover-ui';
 
@@ -49,6 +50,8 @@ const App = () => {
   const [inputTimeValue, setInputTimeValue] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isKiteVisible, setIsKiteVisible] = useState(false);
+  const [selectedDay, setSelectedDay] = useState(new Date());
+  const [showInlineCalendar, setShowInlineCalendar] = useState(false);
 
   const toggleTooltip = function () {
     setTooltipOpen((prev) => !prev);
@@ -61,6 +64,15 @@ const App = () => {
     </React.Fragment>
   );
 
+  const handleDateClick = (day) => {
+    setSelectedDay(day);
+  };
+
+  const handleInlineDateClick = (day) => {
+    setSelectedDay(day);
+    setShowInlineCalendar(false);
+  };
+
   return (
     <div className="p-8 bg-gray-200 grid grid-cols-1 md:grid-cols-2 gap-6">
       <Section title="Badge">
@@ -518,6 +530,34 @@ const App = () => {
         </Select.WithRef>{' '}
         (required)
       </Section>
+      <Section title="DatePicker">
+        <DatePicker
+          showOutsideDays
+          onDayClick={handleDateClick}
+          selectedDays={selectedDay}
+        />
+        <br />
+        <Input
+          value={selectedDay.toISOString().split('T')[0]}
+          onClick={() => setShowInlineCalendar(true)}
+        />
+        {showInlineCalendar && (
+          <Paper
+            style={{
+              boxShadow: '0px 0px 2px 2px rgb(0 0 0 / 20%)',
+              display: 'table',
+              padding: '2px',
+              position: 'absolute',
+            }}
+          >
+            <DatePicker
+              showOutsideDays
+              onDayClick={handleInlineDateClick}
+              selectedDays={selectedDay}
+            />
+          </Paper>
+        )}
+      </Section>
 
       {/** USAGE_INJECTOR */}
     </div>

package.json

@@ -158,6 +158,7 @@
     "@cision/react-container-query": "1.0.0-alpha.3",
     "classnames": "^2.2.6",
     "lodash": "^4.17.19",
-    "nanoid": "^3.1.23"
+    "nanoid": "^3.1.23",
+    "react-day-picker": "^7.4.10"
   }
 }

src/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,132 @@
+.container {
+  display: inline-block;
+}
+
+.wrapper {
+  border-radius: var(--rvr-border-radius);
+}
+
+.interactionDisabled {
+  cursor: default;
+}
+
+.navBar {
+  position: relative;
+}
+
+.navButtonPrev,
+.navButtonNext {
+  position: absolute;
+  border: solid var(--rvr-color-font);
+  border-width: 3px 3px 0px 0px;
+  display: inline-block;
+  padding: 5px;
+}
+
+.navButtonPrev {
+  transform: rotate(-135deg);
+  top: 18px;
+  left: 18px;
+}
+
+.navButtonNext {
+  transform: rotate(45deg);
+  top: 18px;
+  right: 18px;
+}
+
+.navButtonInteractionDisabled {
+  opacity: 0;
+}
+
+.months {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.month {
+  padding: 12px;
+}
+
+.caption {
+  font-weight: var(--rvr-font-weight-bold);
+  text-align: center;
+  color: var(--rvr-black);
+}
+
+.weekdaysBody {
+  display: table-header-group;
+}
+
+.weekdaysRow {
+  display: table-row;
+}
+
+.weekday {
+  color: var(--rvr-color-font);
+  display: table-cell;
+  text-align: center;
+  padding: 4px 6px;
+}
+.weekday > abbr {
+  text-decoration: none;
+}
+
+.weekNumber {
+  display: table-cell;
+  color: var(--rvr-color-font);
+  padding: 4px 6px;
+  border-right: solid 1px var(--rvr-color-disabled);
+}
+
+.body {
+  display: table-row-group;
+}
+
+.week {
+  display: table-row;
+}
+
+.day {
+  display: table-cell;
+  text-align: center;
+  padding: 4px 6px;
+  border-radius: var(--rvr-border-radius);
+  color: var(--rvr-black);
+}
+
+.day[aria-disabled='false'] {
+  cursor: pointer;
+}
+
+.day:hover[aria-disabled='false'][aria-selected='false'] {
+  background-color: var(--rvr-color-highlight);
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.todayButton {
+  color: var(--rvr-btn-color-link-active);
+}
+
+.today {
+  text-decoration: underline;
+  font-weight: var(--rvr-font-weight-bold);
+}
+
+.selected {
+  background-color: var(--rvr-color-primary);
+  color: var(--rvr-white);
+}
+
+.disabled {
+  color: var(--rvr-color-disabled);
+}
+
+.outside {
+  color: var(--rvr-color-disabled);
+}

src/components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import DatePicker from '.';
+
+describe('DatePicker', () => {
+  it('renders', () => {
+    render(<DatePicker />);
+  });
+
+  describe('when rendered with classnames props', () => {
+    it('should append the custom class to the exisiting class', () => {
+      const styleOverride = { wrapper: 'customWrapperClass' };
+      const { getByTestId } = render(
+        <div data-testid="datePickerElem">
+          <DatePicker classNames={styleOverride} />
+        </div>
+      );
+
+      const DatePickerElem = getByTestId('datePickerElem') as HTMLDivElement;
+      const wrapperElem = DatePickerElem.firstChild
+        ?.firstChild as HTMLDivElement;
+
+      expect(wrapperElem.className).toContain('customWrapperClass');
+    });
+  });
+});

src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import DayPicker from 'react-day-picker';
+import { DayPickerProps } from 'react-day-picker/types/Props';
+
+import 'react-day-picker/lib/style.css';
+import { ClassNames } from 'react-day-picker/types/ClassNames';
+import styles from './DatePicker.module.css';
+
+interface DatePickerProps extends Omit<DayPickerProps, 'classNames'> {
+  classNames?: {
+    container?: string;
+    wrapper?: string;
+    interactionDisabled?: string;
+    navBar?: string;
+    navButtonPrev?: string;
+    navButtonNext?: string;
+    navButtonInteractionDisabled?: string;
+    months?: string;
+    month?: string;
+    caption?: string;
+    weekdays?: string;
+    weekdaysRow?: string;
+    weekday?: string;
+    weekNumber?: string;
+    body?: string;
+    week?: string;
+    day?: string;
+    footer?: string;
+    todayButton?: string;
+    today?: string;
+    selected?: string;
+    disabled?: string;
+    outside?: string;
+  };
+}
+
+const DatePicker: React.FC<DatePickerProps> = ({ ...passedProps }) => {
+  const styleOverride = {
+    container: styles.container,
+    wrapper: styles.wrapper,
+    interactionDisabled: styles.interactionDisabled,
+    navBar: styles.navBar,
+    navButtonPrev: styles.navButtonPrev,
+    navButtonNext: styles.navButtonNext,
+    navButtonInteractionDisabled: styles.navButtonInteractionDisabled,
+    months: styles.months,
+    month: styles.month,
+    caption: styles.caption,
+    weekdays: styles.weekdaysBody,
+    weekdaysRow: styles.weekdaysRow,
+    weekday: styles.weekday,
+    weekNumber: styles.weekNumber,
+    body: styles.body,
+    week: styles.week,
+    day: styles.day,
+    footer: styles.footer,
+    todayButton: styles.todayButton,
+    today: styles.today,
+    selected: styles.selected,
+    disabled: styles.disabled,
+    outside: styles.outside,
+  } as ClassNames;
+
+  if (passedProps.classNames) {
+    Object.entries(passedProps.classNames).forEach((classes) => {
+      if (classes.length === 2) {
+        styleOverride[classes[0]] = `${styleOverride[classes[0]]} ${
+          classes[1]
+        }`;
+      }
+    });
+  }
+
+  return <DayPicker {...passedProps} classNames={styleOverride} />;
+};
+
+export default DatePicker;

src/components/DatePicker/README.md

@@ -0,0 +1,11 @@
+# \<DatePicker \\\>
+
+Render a date picker UI, this is a pass-through component to the [react-day-picker](https://react-day-picker.js.org/) library.
+
+### Override Classes
+
+This date picker has been restyle using rover-ui themes/colors. Consuming application can override these classes with their own classes via `classNames` prop, see [/api/Daypicker#classNames](https://react-day-picker.js.org/api/DayPicker#classNames)
+
+```jsx
+<DatePicker classNames={{ navBar: 'AdditionalClassToRestyle' }} />
+```

src/components/DatePicker/index.ts

@@ -0,0 +1 @@
+export { default } from './DatePicker';