@sproutsocial/seeds-react-datepicker 1.0.0

package/src/SingleDatePicker/SingleDatePicker.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useState } from "react";
+import moment from "moment";
+import DayPickerSingleDateController from "react-dates/lib/components/DayPickerSingleDateController";
+import { ReactDatesCssOverrides } from "../styles";
+import {
+  commonDatePickerProps,
+  DefaultSetStatusText,
+  getVisibleMonths,
+} from "../common";
+import type { TypeSingleDatePickerProps } from "./SingleDatePickerTypes";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+
+const noop = () => {};
+
+const SingleDatePicker = ({
+  onDateChange,
+  setStatusText = DefaultSetStatusText,
+  date = null,
+  focused = false,
+  onFocusChange = noop,
+  initialVisibleMonth,
+  numberOfMonths = 1,
+  onBlur,
+  ...rest
+}: TypeSingleDatePickerProps) => {
+  const [statusText, updateStatusText] = useState(() =>
+    setStatusText(
+      getVisibleMonths(
+        moment(initialVisibleMonth?.() || date || undefined),
+        numberOfMonths
+      )
+    )
+  );
+
+  const handleMonthClick = useCallback(
+    // @ts-ignore unknown types
+    (date) => {
+      updateStatusText(setStatusText(getVisibleMonths(date, numberOfMonths)));
+    },
+    [numberOfMonths, setStatusText]
+  );
+  const wrappedOnBlur = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(
+    (event) => {
+      onFocusChange?.({ focused: false });
+      onBlur?.(event);
+    },
+    [onBlur, onFocusChange]
+  );
+
+  return (
+    <>
+      <ReactDatesCssOverrides />
+      <VisuallyHidden>
+        <div role="status">{statusText}</div>
+      </VisuallyHidden>
+      <DayPickerSingleDateController
+        {...commonDatePickerProps}
+        date={date}
+        numberOfMonths={numberOfMonths}
+        onDateChange={onDateChange}
+        initialVisibleMonth={initialVisibleMonth || null}
+        focused={focused}
+        onBlur={wrappedOnBlur}
+        onFocusChange={onFocusChange}
+        onPrevMonthClick={handleMonthClick}
+        onNextMonthClick={handleMonthClick}
+        {...rest}
+      />
+    </>
+  );
+};
+
+export default React.memo<TypeSingleDatePickerProps>(SingleDatePicker);

package/src/SingleDatePicker/SingleDatePickerTypes.ts

@@ -0,0 +1,25 @@
+import type { Moment } from "moment";
+import type { TypeCommonDatePickerProps } from "../types";
+
+export interface TypeStatefulSingleDatePickerProps
+  extends TypeCommonDatePickerProps {
+  date?: Moment | null;
+  onDateChange?: (date: Moment | null) => void;
+  focused?: boolean;
+  onFocusChange?: (arg0: { focused: boolean }) => void;
+  setStatusText?: (dates: Moment[]) => string;
+}
+
+export interface TypeSingleDatePickerProps
+  extends Required<Pick<TypeStatefulSingleDatePickerProps, "onDateChange">>,
+    Pick<
+      TypeStatefulSingleDatePickerProps,
+      | "date"
+      | "focused"
+      | "onFocusChange"
+      | "setStatusText"
+      | "initialVisibleMonth"
+      | "numberOfMonths"
+    > {
+  onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+}

package/src/SingleDatePicker/StatefulSingleDatePicker.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import type { TypeStatefulSingleDatePickerProps } from "./SingleDatePickerTypes";
+import SingleDatePicker from "./SingleDatePicker";
+
+export const StatefulSingleDatePicker = ({
+  date,
+  onDateChange,
+  ...rest
+}: TypeStatefulSingleDatePickerProps) => {
+  const [stateDate, setDate] = useState(date);
+
+  // @ts-ignore unknown types
+  const handleDateChange = (date) => {
+    onDateChange && onDateChange(date);
+    setDate(date);
+  };
+
+  return (
+    <SingleDatePicker
+      date={stateDate}
+      onDateChange={handleDateChange}
+      {...rest}
+    />
+  );
+};

package/src/SingleDatePicker/__tests__/SingleDatePicker.test.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import moment, { type Moment } from "moment";
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import {
+  formatDateAsCalendarDay,
+  formatDateAsCalendarHeader,
+  getVisibleMonthWithReactDatesInternalApi,
+} from "../../common";
+import { SingleDatePicker, StatefulSingleDatePicker } from "../index";
+import Popout from "@sproutsocial/seeds-react-popout";
+import Button from "@sproutsocial/seeds-react-button";
+
+const today = moment();
+
+describe("SingleDatePicker", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  test("should select today's date", async () => {
+    render(<StatefulSingleDatePicker date={today} setStatusText={() => ""} />);
+    await waitFor(() => {
+      expect(
+        screen.getByLabelText(`Selected. ${formatDateAsCalendarDay(today)}`)
+      ).toBeInTheDocument();
+    });
+  });
+
+  test("should change dates", async () => {
+    render(<StatefulSingleDatePicker date={today} setStatusText={() => ""} />);
+    const threeDaysFromNow = formatDateAsCalendarDay(
+      today.clone().add(3, "days")
+    );
+    fireEvent.click(screen.getByLabelText(threeDaysFromNow));
+    await waitFor(() => {
+      expect(
+        screen.getByLabelText(`Selected. ${threeDaysFromNow}`)
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByLabelText(`Selected. ${formatDateAsCalendarDay(today)}`)
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test("should go to previous month", async () => {
+    const { container } = render(
+      <StatefulSingleDatePicker date={today} setStatusText={() => ""} />
+    );
+    expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
+      formatDateAsCalendarHeader(today)
+    );
+    fireEvent.click(
+      screen.getByLabelText("Move backward to switch to the previous month.")
+    );
+    await waitFor(() => {
+      expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
+        formatDateAsCalendarHeader(today.clone().subtract(1, "month"))
+      );
+    });
+  });
+
+  test("should go to next month", async () => {
+    const { container } = render(
+      <StatefulSingleDatePicker date={today} setStatusText={() => ""} />
+    );
+    expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
+      formatDateAsCalendarHeader(today)
+    );
+    fireEvent.click(
+      screen.getByLabelText("Move forward to switch to the next month.")
+    );
+    await waitFor(() => {
+      expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
+        formatDateAsCalendarHeader(today.clone().add(1, "month"))
+      );
+    });
+  });
+
+  test("should call onDateChange", async () => {
+    const onDateChange = jest.fn();
+    render(
+      <StatefulSingleDatePicker
+        date={today}
+        onDateChange={onDateChange}
+        setStatusText={() => ""}
+      />
+    );
+    const threeDaysFromNow = today.clone().add(3, "days");
+    fireEvent.click(
+      screen.getByLabelText(formatDateAsCalendarDay(threeDaysFromNow))
+    );
+    await waitFor(() => {
+      expect(onDateChange).toHaveBeenCalledTimes(1);
+      expect(onDateChange.mock.calls[0][0].isValid()).toEqual(true);
+    });
+  });
+
+  // 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 [focused, setIsFocused] = React.useState(false);
+      const [date, pickDate] = React.useState<Moment | null>(initialDate);
+
+      const onFocusChange = ({ focused }: { focused: boolean }) =>
+        setIsFocused(focused);
+
+      return (
+        <Popout
+          isOpen={focused}
+          setIsOpen={setIsFocused}
+          content={
+            <Popout.Content p={0} py={400}>
+              <SingleDatePicker
+                date={date}
+                onDateChange={pickDate}
+                focused={focused}
+                onFocusChange={onFocusChange}
+                setStatusText={() => "status text"}
+              />
+            </Popout.Content>
+          }
+        >
+          <Button appearance="secondary" onClick={() => setIsFocused(true)}>
+            {buttonText}
+          </Button>
+        </Popout>
+      );
+    };
+
+    render(<FocusControlledPopoutDatePicker />);
+
+    expect(screen.getByText(buttonText)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText(buttonText));
+
+    await waitFor(() => {
+      expect(screen.getByText("January 2020")).toBeInTheDocument();
+    });
+
+    fireEvent.keyDown(screen.getByText("January 2020"), { key: "Escape" });
+
+    await waitFor(() => {
+      expect(screen.queryByText("January 2020")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/SingleDatePicker/__tests__/SingleDatePicker.typetest.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { SingleDatePicker, StatefulSingleDatePicker } from "../index";
+
+const mockedRequiredProps = {
+  onDateChange: jest.fn(),
+  setStatusText: jest.fn(),
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SingleDatePickerTypes() {
+  return (
+    <>
+      <StatefulSingleDatePicker setStatusText={() => ""} />
+      <StatefulSingleDatePicker date={null} setStatusText={() => ""} />
+      {/* @ts-expect-error - test that invalid type is rejected */}
+      <StatefulSingleDatePicker date="invalid" />
+
+      <SingleDatePicker {...mockedRequiredProps} />
+      <SingleDatePicker {...mockedRequiredProps} date={null} />
+      {/* @ts-expect-error - test missing required props is rejected */}
+      <SingleDatePicker />
+    </>
+  );
+}

package/src/SingleDatePicker/index.ts

@@ -0,0 +1,6 @@
+import SingleDatePicker from "./SingleDatePicker";
+
+export default SingleDatePicker;
+export { SingleDatePicker };
+export * from "./StatefulSingleDatePicker";
+export * from "./SingleDatePickerTypes";

package/src/common.tsx

@@ -0,0 +1,60 @@
+import "react-dates/initialize";
+import "react-dates/lib/css/_datepicker.css";
+import type { Moment } from "moment";
+import React from "react";
+import Icon, { type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import { CalendarDay } from "./styles";
+import type { TypeCommonDatePickerProps } from "./types";
+
+type TypeCalendarNavButtonType = "left" | "right";
+
+const iconNames: { [key in TypeCalendarNavButtonType]: TypeIconName } = {
+  left: "arrow-left-solid",
+  right: "arrow-right-solid",
+};
+
+export const CalendarNavButton = ({
+  type,
+}: {
+  type: TypeCalendarNavButtonType;
+}) => <Icon size="mini" name={iconNames[type]} aria-hidden />;
+
+export const commonDatePickerProps: TypeCommonDatePickerProps = {
+  hideKeyboardShortcutsPanel: true,
+  daySize: 30,
+  navPrev: <CalendarNavButton type="left" />,
+  navNext: <CalendarNavButton type="right" />,
+  renderDayContents: (day, modifiers) => (
+    <CalendarDay day={day} modifiers={modifiers}>
+      {day.format("D")}
+    </CalendarDay>
+  ),
+  initialVisibleMonth: null,
+};
+// Testing utilities
+
+export const formatDateAsCalendarHeader = (date: Moment): string =>
+  date.format("MMMM YYYY");
+
+export const formatDateAsCalendarDay = (date: Moment): string =>
+  date.format("dddd, MMMM D, YYYY");
+
+export const getVisibleMonthWithReactDatesInternalApi = (
+  container: HTMLElement
+): string =>
+  container.querySelector("[data-visible=true] strong")?.textContent ?? "";
+
+// Receives a single Moment and returns an array of Moments, one for each currently visible month.
+// @ts-ignore unknown types
+export const getVisibleMonths = (initialMonth, numberOfMonths) => {
+  const months = [initialMonth];
+  for (let i = 1; i < numberOfMonths; i++) {
+    months.push(initialMonth.clone().add(i, "month"));
+  }
+  return months;
+};
+
+// Default setStatusText prop for both SingleDatePicker and DateRangePicker
+// @ts-ignore unknown types
+export const DefaultSetStatusText = (dates) =>
+  dates.map(formatDateAsCalendarHeader).join(", ");

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./SingleDatePicker";
+export * from "./DateRangePicker";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,224 @@
+import styled, { createGlobalStyle, css } from "styled-components";
+import moment from "moment";
+import type { ModifiersShape } from "react-dates";
+import { disabled } from "@sproutsocial/seeds-react-mixins";
+import Box from "@sproutsocial/seeds-react-box";
+
+/*
+ * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.
+ *
+ * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,
+ * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,
+ * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,
+ * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,
+ * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,
+ * selected-end-no-selected-start
+ *
+ */
+const isSelected = (modifiers: ModifiersShape) =>
+  modifiers.has("selected-span") ||
+  modifiers.has("selected") ||
+  modifiers.has("selected-start") ||
+  modifiers.has("selected-end") ||
+  modifiers.has("hovered-span") ||
+  modifiers.has("after-hovered-start");
+
+const isOutOfRange = (modifiers: ModifiersShape) =>
+  modifiers.has("blocked-out-of-range");
+
+const isHoveredAndInRange = (modifiers: ModifiersShape) =>
+  modifiers.has("hovered") && !modifiers.has("blocked-out-of-range");
+
+const shouldHaveLeftPill = (modifiers: ModifiersShape, day: moment.Moment) => {
+  if (!isSelected(modifiers)) {
+    return false;
+  }
+
+  if (
+    modifiers.has("selected") ||
+    modifiers.has("selected-start") ||
+    modifiers.has("first-day-of-week") ||
+    day.isSame(moment(day).startOf("month"), "day")
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+const shouldHaveRightPill = (modifiers: ModifiersShape, day: moment.Moment) => {
+  if (!isSelected(modifiers)) {
+    return false;
+  }
+
+  if (
+    modifiers.has("selected") ||
+    modifiers.has("selected-end") ||
+    modifiers.has("last-day-of-week") ||
+    day.isSame(moment(day).endOf("month"), "day")
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export const CalendarDay = styled(Box)<{
+  modifiers: ModifiersShape;
+  day: moment.Moment;
+}>`
+  ${({ modifiers, day, theme }) => {
+    if (isSelected(modifiers)) {
+      return css`
+        background-color: ${theme.colors.container.background.selected};
+        color: ${theme.colors.text.inverse};
+        margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};
+        margin-right: ${shouldHaveRightPill(modifiers, day) &&
+        theme.space[200]};
+        border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) &&
+        theme.radii.pill};
+        border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) &&
+        theme.radii.pill};
+        border-top-right-radius: ${shouldHaveRightPill(modifiers, day) &&
+        theme.radii.pill};
+        border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) &&
+        theme.radii.pill};
+      `;
+    }
+
+    if (isHoveredAndInRange(modifiers)) {
+      return css`
+        margin: 0 ${theme.space[200]};
+        border-radius: ${theme.radii.pill};
+        border: 1px solid ${theme.colors.container.border.selected};
+      `;
+    } else if (isOutOfRange(modifiers)) {
+      return css`
+        color: ${theme.colors.text.subtext};
+        ${disabled};
+      `;
+    }
+  }};
+`;
+
+export const ReactDatesCssOverrides = createGlobalStyle`
+	.DayPicker {
+		box-sizing: content-box;
+		font-weight: ${({ theme }) => theme.fontWeights.normal};
+		font-family: ${(props) => props.theme.fontFamily};
+
+		/* override react-dates height to better reflect how tall the component actually is */
+		/* adding margin/padding will be more truer to our seeds system because the height */
+		/* of the calendar adds an extra row of padding if we do not override it */
+		&_transitionContainer {
+			/* need !important because react-dates sets height on the element itself */
+			height: 228px !important;
+		}
+
+		&_weekHeader {
+			color: ${({ theme }) => theme.colors.text.headline};
+			border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+
+ 			/* Magic number to match position of .CalendarMonth_caption */
+			top: 26px;
+
+			/* Magic number to make the bottom border line stretch the full width */
+			width: 230px;
+
+			&_ul {
+ 				/* Magic number to line up day name headings over the correct numbers */
+				padding-left: 10px;
+			}
+		}
+
+		&_weekHeaders__horizontal {
+			margin-left: 0
+		}
+
+		&_weekHeader_li {
+			${({ theme }) => theme.typography[200]}
+			color: ${({ theme }) => theme.colors.text.subtext};
+			font-weight: ${({ theme }) => theme.fontWeights.semibold};
+			margin: 0;
+		}
+
+		&__horizontal {
+			box-shadow: none;
+			background: ${({ theme }) => theme.colors.container.background.base};
+		}
+	}
+
+    .CalendarDay {
+		background-color: transparent;
+
+        &__selected, &__selected_span, &:hover {
+            background-color: transparent;
+		}
+
+		&__default {
+			color: ${({ theme }) => theme.colors.text.body};
+		}
+		&__default,
+		&__default:hover {
+			border: none;
+			color: ${({ theme }) => theme.colors.text.body};
+		}
+	}
+
+    .CalendarMonth {
+		${({ theme }) => theme.typography[200]}
+		background: ${({ theme }) => theme.colors.container.background.base};
+
+ 		/* spacing between visible months and months off canvas */
+		padding: 0 15px;
+
+		&_caption {
+			${({ theme }) => theme.typography[200]}
+			color: ${({ theme }) => theme.colors.text.headline};
+			padding-top: 0;
+			background: ${({ theme }) => theme.colors.container.background.base};
+
+			strong {
+				font-weight: ${({ theme }) => theme.fontWeights.semibold};
+			}
+
+		}
+		&_table {
+			line-height: 21.333px;
+			tr {
+				vertical-align: middle;
+			}
+			td {
+				padding: 0;
+				border-bottom: none;
+			}
+		}
+	}
+
+	.CalendarMonthGrid {
+		background: ${({ theme }) => theme.colors.container.background.base};
+	}
+
+	/* Left and Right Arrow Buttons to navigate months */
+	.DayPickerNavigation_button__horizontal {
+		color: ${({ theme }) => theme.colors.button.pill.text.base};
+		top: -4px;
+		padding: 7px 8px;
+		position: absolute;
+		line-height: 0.78;
+		border-radius: 9999px;
+		border: none;
+		background: ${({ theme }) => theme.colors.button.pill.background.base};
+
+		&:nth-child(1) {
+			left: 22px;
+		}
+		&:nth-child(2) {
+			right: 22px;
+		}
+
+		&:hover {
+			background: ${({ theme }) => theme.colors.button.pill.background.hover};
+		}
+	}
+`;

package/src/types.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { Moment } from "moment";
+import type { ModifiersShape } from "react-dates";
+
+export interface TypeCommonDatePickerProps {
+  daySize?: number;
+  isOutsideRange?: (date: Moment) => boolean;
+  hideKeyboardShortcutsPanel?: boolean;
+  navPrev?: React.ReactNode;
+  navNext?: React.ReactNode;
+  numberOfMonths?: number;
+  renderDayContents?: (
+    day: Moment,
+    modifiers: ModifiersShape
+  ) => React.ReactNode;
+  keepOpenOnDateSelect?: boolean;
+  initialVisibleMonth?: (() => Moment) | null;
+  minimumNights?: number;
+  phrases?: Record<
+    string,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    Node | ((arg0: { date: Moment }) => React.ReactNode)
+  >;
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));