@sproutsocial/seeds-react-datepicker 1.0.0

package/src/DateRangePicker/DateRangePicker.stories.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import moment, { type Moment } from "moment";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Popout from "@sproutsocial/seeds-react-popout";
+import DateRangePicker from "./DateRangePicker";
+import type { EnumFocusedInput } from "./DateRangePickerTypes";
+import { StatefulDateRangePicker } from "./StatefulDateRangePicker";
+import { formatDateAsCalendarHeader } from "../common";
+
+const START_DATE = "startDate";
+const END_DATE = "endDate";
+
+const today = moment("2023-01-06");
+
+const dateProps = {
+  startDate: today,
+  endDate: today.clone().add(3, "days"),
+  initialVisibleMonth: () => today,
+  setStatusText: (dates: moment.Moment[]) =>
+    `Now showing: ${dates.map(formatDateAsCalendarHeader).join(" and ")}`,
+};
+
+const meta = {
+  title: "Components/DatePickers/DateRangePicker",
+  component: StatefulDateRangePicker,
+};
+export default meta;
+
+export const Default = {
+  args: dateProps,
+};
+
+export const NoStartingDate = {
+  args: {
+    ...dateProps,
+    startDate: null,
+    endDate: null,
+  },
+};
+
+export const StartOnPreviousMonth = {
+  args: {
+    ...dateProps,
+    initialVisibleMonth: () => dateProps.endDate.clone().subtract(1, "month"),
+  },
+};
+
+export const BlockedRanges = {
+  render: () => {
+    const endOfPreviousMonth = today
+      .clone()
+      .subtract(1, "month")
+      .endOf("month");
+    const startOfNextMonth = today.clone().add(1, "month").startOf("month");
+    return (
+      <StatefulDateRangePicker
+        {...dateProps}
+        isOutsideRange={(day) =>
+          day.isSameOrBefore(endOfPreviousMonth) ||
+          day.isSameOrAfter(startOfNextMonth)
+        }
+      />
+    );
+  },
+};
+
+export const FocusControlledPopoutDatePicker = {
+  render: () => {
+    const [focusedInput, setFocusedInput] = useState<EnumFocusedInput>(null);
+    const [dates, pickDate] = useState<{
+      startDate: Moment | null;
+      endDate: Moment | null;
+    }>({
+      startDate: null,
+      endDate: null,
+    });
+
+    const onFocusChange = (nextFocusedInput: typeof focusedInput) => {
+      setFocusedInput(nextFocusedInput);
+    };
+
+    return (
+      <Popout
+        isOpen={focusedInput !== null}
+        content={
+          <Popout.Content pt={400} p={0}>
+            <DateRangePicker
+              {...dates}
+              onDatesChange={pickDate}
+              focusedInput={focusedInput}
+              onFocusChange={onFocusChange}
+              setStatusText={dateProps.setStatusText}
+            />
+            <Box display="flex" justifyContent="space-between" p={400}>
+              <Button
+                appearance="secondary"
+                onClick={() => setFocusedInput(START_DATE)}
+              >
+                {dates.startDate
+                  ? dates.startDate.format("DD MMM YYYY")
+                  : "Choose Start Date"}
+              </Button>
+              <Button
+                appearance="secondary"
+                onClick={() => setFocusedInput(END_DATE)}
+              >
+                {dates.endDate
+                  ? dates.endDate.format("DD MMM YYYY")
+                  : "Choose End Date"}
+              </Button>
+            </Box>
+          </Popout.Content>
+        }
+      >
+        <Button
+          appearance="secondary"
+          onClick={() => setFocusedInput(START_DATE)}
+        >
+          Open Date Picker
+        </Button>
+      </Popout>
+    );
+  },
+};

package/src/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback, useState, type KeyboardEvent } from "react";
+import moment from "moment";
+import DayPickerRangeController from "react-dates/lib/components/DayPickerRangeController";
+import { ReactDatesCssOverrides } from "../styles";
+import {
+  commonDatePickerProps,
+  DefaultSetStatusText,
+  getVisibleMonths,
+} from "../common";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+import type { TypeDateRangePickerProps } from "./DateRangePickerTypes";
+
+const DateRangePicker = ({
+  startDate = null,
+  endDate = null,
+  onDatesChange,
+  setStatusText = DefaultSetStatusText,
+  initialVisibleMonth,
+  numberOfMonths = 2,
+  onFocusChange,
+  onBlur,
+  focusedInput,
+  ...rest
+}: TypeDateRangePickerProps) => {
+  const [statusText, updateStatusText] = useState(() =>
+    setStatusText(
+      getVisibleMonths(
+        moment(initialVisibleMonth?.() ?? startDate ?? undefined),
+        numberOfMonths
+      )
+    )
+  );
+  interface HandleMonthClick {
+    (month: moment.Moment): void;
+  }
+
+  const handleMonthClick: HandleMonthClick = useCallback(
+    (month) => {
+      updateStatusText(setStatusText(getVisibleMonths(month, numberOfMonths)));
+    },
+    [numberOfMonths, setStatusText]
+  );
+  const wrappedOnBlur = useCallback<
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (event: undefined | KeyboardEvent<HTMLDivElement>) => void
+  >(
+    (event) => {
+      // for some reason onBlur is called with no event on day selection 🤷
+      if (!event) {
+        return;
+      }
+      onFocusChange?.(null);
+      onBlur?.(event);
+    },
+    [onBlur, onFocusChange]
+  );
+
+  return (
+    <>
+      <ReactDatesCssOverrides />
+      <VisuallyHidden>
+        <div role="status">{statusText}</div>
+      </VisuallyHidden>
+      <DayPickerRangeController
+        {...commonDatePickerProps}
+        startDate={startDate}
+        endDate={endDate}
+        onDatesChange={onDatesChange}
+        numberOfMonths={numberOfMonths}
+        initialVisibleMonth={initialVisibleMonth || null}
+        focusedInput={focusedInput}
+        isFocused={focusedInput !== null}
+        onBlur={wrappedOnBlur}
+        onFocusChange={onFocusChange}
+        onPrevMonthClick={handleMonthClick}
+        onNextMonthClick={handleMonthClick}
+        {...rest}
+      />
+    </>
+  );
+};
+
+export default DateRangePicker;

package/src/DateRangePicker/DateRangePickerTypes.ts

@@ -0,0 +1,35 @@
+import type { Moment } from "moment";
+import type { TypeCommonDatePickerProps } from "../types";
+
+export type EnumFocusedInput = null | "startDate" | "endDate";
+
+export interface TypeStatefulDateRangePickerProps
+  extends TypeCommonDatePickerProps {
+  startDate?: Moment | null;
+  endDate?: Moment | null;
+  focusedInput?: EnumFocusedInput;
+  onDatesChange?: (arg0: {
+    startDate: Moment | null;
+    endDate: Moment | null;
+  }) => void;
+  onFocusChange?: (arg0: EnumFocusedInput) => void;
+  setStatusText?: (dates: Moment[]) => string;
+}
+
+export interface TypeDateRangePickerProps
+  extends Required<
+      Pick<
+        TypeStatefulDateRangePickerProps,
+        "focusedInput" | "onDatesChange" | "onFocusChange"
+      >
+    >,
+    Pick<
+      TypeStatefulDateRangePickerProps,
+      | "startDate"
+      | "endDate"
+      | "setStatusText"
+      | "initialVisibleMonth"
+      | "numberOfMonths"
+    > {
+  onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+}

package/src/DateRangePicker/StatefulDateRangePicker.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+// @ts-ignore unknown types
+import { START_DATE } from "react-dates/constants";
+import type { TypeStatefulDateRangePickerProps } from "./DateRangePickerTypes";
+import DateRangePicker from "./DateRangePicker";
+
+export const StatefulDateRangePicker = ({
+  startDate,
+  endDate,
+  onDatesChange,
+  onFocusChange,
+  ...rest
+}: TypeStatefulDateRangePickerProps) => {
+  const [dates, setDate] = useState({
+    startDate,
+    endDate,
+  });
+  const [focusedInput, setFocusedInput] = React.useState(START_DATE);
+
+  // @ts-ignore unknown types
+  const handleDatesChange = (nextDates) => {
+    onDatesChange && onDatesChange(nextDates);
+    setDate(nextDates);
+  };
+
+  // @ts-ignore unknown types
+  const handleFocusChange = (nextFocusedInput) => {
+    onFocusChange && onFocusChange(nextFocusedInput);
+    setFocusedInput(
+      // null means that we've selected an end date. we want to go back to START_DATE
+      // so the user can modify their selection. if focusedInput === null then it won't
+      // respond to click or keyboard events
+      nextFocusedInput === null ? START_DATE : nextFocusedInput
+    );
+  };
+
+  return (
+    <DateRangePicker
+      startDate={dates.startDate}
+      endDate={dates.endDate}
+      focusedInput={focusedInput}
+      onDatesChange={handleDatesChange}
+      onFocusChange={handleFocusChange}
+      {...rest}
+    />
+  );
+};

package/src/DateRangePicker/__tests__/DateRangePicker.test.tsx

@@ -0,0 +1,257 @@
+import React, { useState } from "react";
+import moment, { type Moment } from "moment";
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import { formatDateAsCalendarDay } from "../../common";
+import {
+  DateRangePicker,
+  type EnumFocusedInput,
+  StatefulDateRangePicker,
+} from "../index";
+import Popout from "@sproutsocial/seeds-react-popout";
+import Button from "@sproutsocial/seeds-react-button";
+
+// @ts-ignore Unknown types
+const getStartDate = (options, date) =>
+  // eslint-disable-next-line testing-library/prefer-screen-queries
+  options.queryByLabelText(
+    `Selected as start date. ${formatDateAsCalendarDay(date)}`
+  );
+
+// @ts-ignore Unknown types
+const getEndDate = (options, date) =>
+  // eslint-disable-next-line testing-library/prefer-screen-queries
+  options.queryByLabelText(
+    `Selected as end date. ${formatDateAsCalendarDay(date)}`
+  );
+
+// @ts-ignore Unknown types
+const clickOnStartDate = (options, date) =>
+  fireEvent.click(
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    options.getByLabelText(
+      `Choose ${formatDateAsCalendarDay(
+        date
+      )} as your check-in date. It’s available.`
+    )
+  );
+
+// @ts-ignore Unknown types
+const clickOnEndDate = (options, date) =>
+  fireEvent.click(
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    options.getByLabelText(
+      `Choose ${formatDateAsCalendarDay(
+        date
+      )} as your check-out date. It’s available.`
+    )
+  );
+
+describe("date range picker", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  test("should start and end on a date range", async () => {
+    const today = moment();
+    const oneWeekFromToday = today.clone().add(1, "week");
+    render(
+      <StatefulDateRangePicker
+        startDate={today}
+        endDate={oneWeekFromToday}
+        setStatusText={() => ""}
+      />
+    );
+    await waitFor(() => {
+      expect(getStartDate(screen, today)).toBeInTheDocument();
+      expect(getEndDate(screen, oneWeekFromToday)).toBeInTheDocument();
+    });
+  });
+
+  test("should select a new start and end date", async () => {
+    const today = moment();
+    const oneWeekFromToday = today.clone().add(1, "week");
+    const oneMonthFromNow = today.clone().add(1, "month");
+    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, "week");
+    render(
+      <StatefulDateRangePicker
+        startDate={today}
+        endDate={oneWeekFromToday}
+        setStatusText={() => ""}
+      />
+    );
+    await waitFor(() => {
+      expect(getStartDate(screen, today)).toBeInTheDocument();
+      expect(getEndDate(screen, oneWeekFromToday)).toBeInTheDocument();
+    });
+    clickOnStartDate(screen, oneMonthFromNow);
+    clickOnEndDate(screen, oneMonthPlusOneWeekFromNow);
+    await waitFor(() => {
+      expect(getStartDate(screen, today)).not.toBeInTheDocument();
+      expect(getEndDate(screen, oneWeekFromToday)).not.toBeInTheDocument();
+      expect(getStartDate(screen, oneMonthFromNow)).toBeInTheDocument();
+      expect(
+        getEndDate(screen, oneMonthPlusOneWeekFromNow)
+      ).toBeInTheDocument();
+    });
+  });
+
+  test("should call onDateChange", async () => {
+    const onDatesChange = jest.fn();
+    const today = moment();
+    const oneWeekFromToday = today.clone().add(1, "week");
+    const twoWeeksFromToday = today.clone().add(2, "week");
+    const threeWeeksFromToday = today.clone().add(3, "week");
+    render(
+      <StatefulDateRangePicker
+        startDate={today}
+        endDate={oneWeekFromToday}
+        onDatesChange={onDatesChange}
+        setStatusText={() => ""}
+      />
+    );
+    clickOnStartDate(screen, twoWeeksFromToday);
+    await waitFor(() => {
+      expect(onDatesChange).toHaveBeenCalledTimes(1);
+      expect(onDatesChange.mock.calls[0][0].startDate.isValid()).toEqual(true);
+    });
+    clickOnEndDate(screen, threeWeeksFromToday);
+    await waitFor(() => {
+      expect(onDatesChange).toHaveBeenCalledTimes(2);
+      expect(onDatesChange.mock.calls[1][0].endDate.isValid()).toEqual(true);
+    });
+  });
+
+  test("should call onFocusChange", async () => {
+    const onFocusChange = jest.fn();
+    const today = moment();
+    const oneWeekFromToday = today.clone().add(1, "week");
+    const oneMonthFromNow = today.clone().add(1, "month");
+    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, "week");
+    render(
+      <StatefulDateRangePicker
+        startDate={today}
+        endDate={oneWeekFromToday}
+        onFocusChange={onFocusChange}
+        setStatusText={() => ""}
+      />
+    );
+    clickOnStartDate(screen, oneMonthFromNow);
+    await waitFor(() => {
+      expect(onFocusChange).toHaveBeenCalledTimes(1);
+      expect(onFocusChange).toHaveBeenCalledWith("endDate");
+    });
+    clickOnEndDate(screen, oneMonthPlusOneWeekFromNow);
+    await waitFor(() => {
+      expect(onFocusChange).toHaveBeenCalledTimes(2);
+      expect(onFocusChange).toHaveBeenCalledWith(null);
+    });
+  });
+
+  // TODO: This test times out. We'll come back to fix later
+  xtest("should close on escape key press", async () => {
+    const buttonText = "Date Picker";
+    const initialDate = moment("2020-01-01");
+
+    const FocusControlledPopoutDatePicker = () => {
+      const [isOpen, setIsOpen] = useState(false);
+      const [focusedInput, setFocusedInput] = useState<EnumFocusedInput>(null);
+      const [dates, pickDate] = useState<{
+        startDate: Moment | null;
+        endDate: Moment | null;
+      }>({
+        startDate: null,
+        endDate: null,
+      });
+
+      const onFocusChange = (nextFocusedInput: typeof focusedInput) => {
+        if (nextFocusedInput) {
+          setIsOpen(true);
+        } else {
+          setIsOpen(false);
+        }
+        setFocusedInput(nextFocusedInput);
+      };
+
+      return (
+        <Popout
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          content={
+            <Popout.Content pt={400} p={0}>
+              <DateRangePicker
+                {...dates}
+                onDatesChange={pickDate}
+                focusedInput={focusedInput}
+                onFocusChange={onFocusChange}
+                setStatusText={() => ""}
+                initialVisibleMonth={() => initialDate}
+              />
+              <Button
+                appearance="secondary"
+                onClick={() => {
+                  setIsOpen(true);
+                  setFocusedInput("startDate");
+                }}
+              >
+                {dates.startDate
+                  ? dates.startDate.format("DD MMM YYYY")
+                  : "Choose Start Date"}
+              </Button>
+              <Button
+                appearance="secondary"
+                onClick={() => {
+                  setIsOpen(true);
+                  setFocusedInput("endDate");
+                }}
+              >
+                {dates.endDate
+                  ? dates.endDate.format("DD MMM YYYY")
+                  : "Choose End Date"}
+              </Button>
+            </Popout.Content>
+          }
+        >
+          <Button
+            appearance="secondary"
+            onClick={() => {
+              setIsOpen(true);
+              setFocusedInput("startDate");
+            }}
+          >
+            {buttonText}
+          </Button>
+        </Popout>
+      );
+    };
+
+    render(<FocusControlledPopoutDatePicker />);
+
+    expect(screen.getByText(buttonText)).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(screen.getByText(buttonText));
+      jest.runAllTimers();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("January 2020")).toBeInTheDocument();
+      expect(screen.getByText("February 2020")).toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.keyDown(screen.getByText("January 2020"), { key: "Escape" });
+      jest.runAllTimers();
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText("January 2020")).not.toBeInTheDocument();
+      expect(screen.queryByText("February 2020")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/DateRangePicker/__tests__/DateRangePicker.typetest.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { DateRangePicker, StatefulDateRangePicker } from "../../index";
+
+const mockedRequiredProps = {
+  focusedInput: null,
+  onDatesChange: jest.fn(),
+  onFocusChange: jest.fn(),
+  setStatusText: jest.fn(),
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DateRangePickerTypes() {
+  return (
+    <>
+      <StatefulDateRangePicker setStatusText={() => ""} />
+      <StatefulDateRangePicker
+        startDate={null}
+        endDate={null}
+        setStatusText={() => ""}
+      />
+      {/* @ts-expect-error - test that invalid type is rejected */}
+      <StatefulDateRangePicker startDate="invalid" />
+
+      <DateRangePicker {...mockedRequiredProps} />
+      <DateRangePicker
+        {...mockedRequiredProps}
+        startDate={null}
+        endDate={null}
+      />
+      {/* @ts-expect-error - test missing required props is rejected */}
+      <DateRangePicker />
+    </>
+  );
+}

package/src/DateRangePicker/index.ts

@@ -0,0 +1,6 @@
+import DateRangePicker from "./DateRangePicker";
+
+export default DateRangePicker;
+export { DateRangePicker };
+export * from "./StatefulDateRangePicker";
+export * from "./DateRangePickerTypes";

package/src/SingleDatePicker/SingleDatePicker.stories.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import moment, { type Moment } from "moment";
+import Button from "@sproutsocial/seeds-react-button";
+import Popout from "@sproutsocial/seeds-react-popout";
+import SingleDatePicker from "./SingleDatePicker";
+import { StatefulSingleDatePicker } from "./StatefulSingleDatePicker";
+import { formatDateAsCalendarHeader } from "../common";
+
+const today = moment("2023-01-06");
+interface DateProps {
+  date: Moment | null;
+  focused: boolean;
+  initialVisibleMonth: () => Moment;
+  setStatusText: (dates: Moment[]) => string;
+}
+
+const dateProps: DateProps = {
+  date: today,
+  focused: true,
+  initialVisibleMonth: () => today,
+  setStatusText: (dates: Moment[]) =>
+    `Now showing: ${dates.map(formatDateAsCalendarHeader).join(" and ")}`,
+};
+
+const meta = {
+  title: "Components/DatePickers/SingleDatePicker",
+  component: StatefulSingleDatePicker,
+};
+export default meta;
+
+export const Default = {
+  args: dateProps,
+};
+
+export const NoStartingDate = {
+  args: {
+    ...dateProps,
+    date: null,
+  },
+};
+
+export const TwoMonthDatePicker = {
+  args: {
+    ...dateProps,
+    numberOfMonths: 2,
+  },
+};
+
+export const DatePickerInPopout = {
+  render: () => (
+    <Popout
+      content={
+        <Popout.Content p={0} py={400}>
+          <StatefulSingleDatePicker {...dateProps} />
+        </Popout.Content>
+      }
+    >
+      <Button appearance="secondary">Open Date Picker</Button>
+    </Popout>
+  ),
+};
+
+export const FocusControlledPopoutDatePicker = {
+  render: () => {
+    const [focused, setIsFocused] = useState(false);
+    const [date, pickDate] = useState<Moment | null>(moment());
+
+    const onFocusChange = ({ focused }: { focused: boolean }) =>
+      setIsFocused(focused);
+
+    return (
+      <Popout
+        isOpen={focused}
+        content={
+          <Popout.Content p={0} py={400}>
+            <SingleDatePicker
+              date={date}
+              onDateChange={pickDate}
+              focused={focused}
+              onFocusChange={onFocusChange}
+              setStatusText={dateProps.setStatusText}
+            />
+          </Popout.Content>
+        }
+      >
+        <Button appearance="secondary" onClick={() => setIsFocused(true)}>
+          Open Date Picker
+        </Button>
+      </Popout>
+    );
+  },
+};