@nypl/design-system-react-components 0.27.0 → 0.28.0

package/src/components/DatePicker/DatePicker.stories.mdx

@@ -8,15 +8,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import DatePicker from "./DatePicker";
-import { DatePickerTypes } from "./DatePickerTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(
-  DatePickerTypes,
-  "DatePickerTypes"
-);
 
 <Meta
   title={getCategory("DatePicker")}
@@ -36,8 +29,7 @@ export const enumValues = getStorybookEnumValues(
     },
     dateType: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "DatePickerTypes.Full" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "full" } },
     },
     id: { control: false },
     isDateRange: {
@@ -78,7 +70,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -107,7 +99,7 @@ also be added through props.
     args={{
       className: undefined,
       dateFormat: "yyyy-MM-dd",
-      dateType: "DatePickerTypes.Full",
+      dateType: "full",
       helperText: "Note that the Library may be closed on Sundays.",
       helperTextFrom: "Select start date.",
       helperTextTo: "Select end date.",
@@ -131,13 +123,7 @@ also be added through props.
       showRequiredLabel: true,
     }}
   >
-    {(args) => (
-      <DatePicker
-        {...args}
-        dateType={enumValues.getValue(args.dateType)}
-        onChange={undefined}
-      />
-    )}
+    {(args) => <DatePicker {...args} onChange={undefined} />}
   </Story>
 </Canvas>
 
@@ -182,7 +168,7 @@ popup calendar.
     <DatePicker
       id="date-range"
       dateFormat="yyyy-MM-dd"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       minDate="1/1/2022"
       maxDate="7/1/2022"
       labelText="Select the date range you want to visit NYPL"
@@ -204,19 +190,19 @@ popup calendar.
 By default, the `DatePicker` will display the input date value in the full
 format that contains the year, month, and day such as "2021-01-30". Although
 this is the default, it can be explicitly set through the `dateType` prop with
-value of `DatePickerTypes.Full`.
+value of `"full"`.
 
 ### Month Date Input
 
 It's possible to select dates by skipping the day value and only selecting
-the month and the year when `dateType` is set to `DatePickerTypes.Month`. Note
+the month and the year when `dateType` is set to `"month"`. Note
 that all 12 months will appear in the popup calendar with their abbreviated names.
 
 <Canvas withToolbar>
   <Story name="Month Date Input">
     <DatePicker
       id="month-date"
-      dateType={DatePickerTypes.Month}
+      dateType="month"
       labelText="Select the month you want to visit NYPL"
       helperText="Note that the Library may be closed on Sundays."
       invalidText="Please select a valid month."
@@ -227,14 +213,14 @@ that all 12 months will appear in the popup calendar with their abbreviated name
 ### Year Date Input
 
 It's possible to select dates by only the year when `dateType` is set to
-`DatePickerTypes.Year`. Note that only 12 values will appear in the popup
-calendar; the four previous years, the current year, and the next seven years.
+`"year"`. Note that only 12 values will appear in the popup calendar; the four
+previous years, the current year, and the next seven years.
 
 <Canvas withToolbar>
   <Story name="Year Date Input">
     <DatePicker
       id="year-date"
-      dateType={DatePickerTypes.Year}
+      dateType="year"
       labelText="Select the year you want to visit NYPL"
       helperText="Note that the Library may be closed on Sundays."
     />
@@ -249,7 +235,7 @@ calendar; the four previous years, the current year, and the next seven years.
   <DSProvider>
     <DatePicker
       id="invalid-date"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the year you want to visit NYPL"
       helperText="Note that the Library may be closed on Sundays."
       invalidText="Please select a valid date."
@@ -265,7 +251,7 @@ calendar; the four previous years, the current year, and the next seven years.
   <DSProvider>
     <DatePicker
       id="disabled-date"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the year you want to visit NYPL"
       isDateRange
       isDisabled
@@ -281,8 +267,8 @@ date input, can be hidden when `showRequiredLabel` is set to `false`.
 <Canvas>
   <DSProvider>
     <DatePicker
-      id="disabled-date"
-      dateType={DatePickerTypes.Full}
+      id="required-date"
+      dateType="full"
       labelText="Select the year you want to visit NYPL"
       isDateRange
       isRequired
@@ -305,7 +291,7 @@ styleguide, we display dates as "year-month-day" by default.
   <DSProvider>
     <DatePicker
       id="init-dates"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the date you want to visit NYPL"
       initialDate="12/1/21"
       initialDateTo="12/10/21"
@@ -325,7 +311,7 @@ written in [ISO-8601 format](https://www.w3.org/TR/NOTE-datetime).
     <DatePicker
       id="format-date"
       dateFormat="MM-dd-yyyy"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the date you want to visit NYPL"
       initialDate="12/1/21"
       initialDateTo="12/10/21"
@@ -345,7 +331,7 @@ February to see the dates that are available to select in 2022.
     <DatePicker
       id="max-min-dates"
       dateFormat="MM-dd-yyyy"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the date you want to visit NYPL"
       minDate="1/1/2022"
       maxDate="3/1/2022"
@@ -358,10 +344,10 @@ February to see the dates that are available to select in 2022.
 
 ### Controlled Component Using `onChange` prop
 
-If your application uses controlled React components and the Reservoir Design 
+If your application uses controlled React components and the Reservoir Design
 System (DS) DatePicker must be controlled, you can extract the data through the
 `onChange` prop function. This will be called every time the date is updated in
-either the start date input field or the end date input field. The returned 
+either the start date input field or the end date input field. The returned
 data is an object with `startDate` and `endDate` keys and `Date` object values.
 
 ```tsx
@@ -381,7 +367,7 @@ const onChange = (data) => {
 // Example of the DS DatePicker instance with the function above:
 <DatePicker
   id="date-range"
-  dateType={DatePickerTypes.Full}
+  dateType="full"
   labelText="Select the date range you want to visit NYPL"
   invalidText="Please select a valid date range."
   onChange={onChange}
@@ -425,7 +411,7 @@ const submitForm = (formData) => {
 >
   <DatePicker
     id="date-range"
-    dateType={DatePickerTypes.Full}
+    dateType="full"
     labelText="Select the date range you want to visit NYPL"
     nameFrom="visitDateFrom"
     nameTo="visitDateTo"
@@ -446,7 +432,7 @@ const refEnd = React.createRef<TextInputRefType>();
 // ...
 <DatePicker
   id="date-range"
-  dateType={DatePickerTypes.Full}
+  dateType="full"
   labelText="Select the date range you want to visit NYPL"
   nameFrom="visitDateFrom"
   nameTo="visitDateTo"

package/src/components/DatePicker/DatePicker.test.tsx

@@ -4,13 +4,12 @@ import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
 import renderer from "react-test-renderer";
 
-import DatePicker from "./DatePicker";
-import { DatePickerTypes } from "./DatePickerTypes";
+import DatePicker, { DatePickerTypes, FullDateType } from "./DatePicker";
 import { TextInputRefType } from "../TextInput/TextInput";
 
 /** This adds a "0" padding for date values under "10". */
-const strPad = (n) => String("0" + n).slice(-2);
-const monthArray = [
+const strPad = (n: number) => String("0" + n).slice(-2);
+const monthArray: string[] = [
   "January",
   "February",
   "March",
@@ -58,11 +57,11 @@ describe("DatePicker", () => {
     return [year, month, day];
   };
   /** Returns today's date in string format based on the DatePicker type. */
-  const getTodaysDateDisplay = (type?) => {
+  const getTodaysDateDisplay = (type?: DatePickerTypes) => {
     const [year, month, day] = getTodaysValues();
-    if (DatePickerTypes.Year === type) {
+    if ("year" === type) {
       return `${year}`;
-    } else if (DatePickerTypes.Month === type) {
+    } else if ("month" === type) {
       return `${month}-${year}`;
     }
     return `${year}-${month}-${day}`;
@@ -106,12 +105,12 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Month}
+          dateType="month"
           labelText="Select the month you want to visit NYPL"
         />
       );
       const [year, month] = getTodaysValues();
-      const date = getTodaysDateDisplay(DatePickerTypes.Month);
+      const date = getTodaysDateDisplay("month");
 
       expect(
         screen.getByLabelText(/Select the month you want to visit NYPL/i)
@@ -125,12 +124,12 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Year}
+          dateType="year"
           labelText="Select the month you want to visit NYPL"
         />
       );
       const [year] = getTodaysValues();
-      const date = getTodaysDateDisplay(DatePickerTypes.Year);
+      const date = getTodaysDateDisplay("year");
 
       expect(
         screen.getByLabelText(/Select the month you want to visit NYPL/i)
@@ -316,8 +315,11 @@ describe("DatePicker", () => {
     });
 
     it("should pass the value to the `onChange` function", () => {
-      let dateObject: any = {};
-      const onChange = (data) => {
+      let dateObject: FullDateType = {
+        startDate: new Date(),
+        endDate: new Date(),
+      };
+      const onChange = (data: FullDateType) => {
         dateObject = data;
       };
       render(
@@ -370,7 +372,7 @@ describe("DatePicker", () => {
     it("should throw a warning when `onChange` is passed as well as a `ref` prop.", () => {
       const warn = jest.spyOn(console, "warn");
       const ref = React.createRef<TextInputRefType>();
-      const onChange = (_data) => {};
+      const onChange = (_data: {}) => {};
       render(
         <DatePicker
           id="datePicker"
@@ -788,7 +790,7 @@ describe("DatePicker", () => {
       userEvent.click(screen.getByText(midMonthDay));
       // So only the month should change accordingly.
       const newMonthValue = `${newDayValue.substr(0, 5)}${strPad(
-        "10"
+        10
       )}${newDayValue.substr(7)}`;
       expect(screen.getByDisplayValue(newMonthValue)).toBeInTheDocument();
     });
@@ -797,7 +799,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Month}
+          dateType="month"
           labelText="Select the month you want to visit NYPL"
         />
       );
@@ -824,7 +826,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Month}
+          dateType="month"
           initialDate="4/1/1988"
           labelText="Select the month you want to visit NYPL"
         />
@@ -864,7 +866,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Year}
+          dateType="year"
           labelText="Select the year you want to visit NYPL"
         />
       );
@@ -902,7 +904,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Year}
+          dateType="year"
           labelText="Select the year you want to visit NYPL"
         />
       );

package/src/components/DatePicker/DatePicker.tsx

@@ -2,10 +2,8 @@ import { chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState, forwardRef } from "react";
 import ReactDatePicker from "react-datepicker";
 
-import { DatePickerTypes } from "./DatePickerTypes";
 import Fieldset from "../Fieldset/Fieldset";
 import { FormRow, FormField } from "../Form/Form";
-import { FormGaps } from "../Form/FormTypes";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
@@ -14,6 +12,19 @@ import TextInput, {
   TextInputRefType,
 } from "../TextInput/TextInput";
 
+interface ReactDatePickerAttrs {
+  popperClassName: string;
+  popperPlacement: string;
+  popperModifiers: any[];
+  minDate: Date | null;
+  maxDate: Date | null;
+  dateFormat: string;
+  showMonthYearPicker?: boolean;
+  showYearPicker?: boolean;
+  yearItemNumber?: number;
+}
+export type DatePickerTypes = "full" | "month" | "year";
+
 // The object shape for the DatePicker's start and end date state values.
 export interface FullDateType {
   /** Date object that gets returned for the onChange
@@ -50,9 +61,6 @@ interface DatePickerWrapperProps extends DateRangeRowProps {
 // Interface used by the internal DS `TextInput` component as a custom
 // component for the ReactDatePicker plugin component. Internal use only.
 interface CustomTextInputProps extends Partial<InputProps> {
-  /** The ReactDatePicker plugin has its own `id` prop so we use this to pass the
-   * value from the parent `DatePicker` component. */
-  dsId: string;
   /** The ReactDatePicker plugin manipulates the ref value so we declare our
    * own for some cases. */
   dsRef?: React.Ref<TextInputRefType>;
@@ -124,16 +132,15 @@ export interface DatePickerProps extends DatePickerWrapperProps {
 const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
   (
     {
-      additionalStyles = {},
-      attributes,
-      dsId,
       dsRef,
       helperText,
+      id,
       invalidText,
       isDisabled,
       isInvalid,
       isRequired,
       labelText,
+      name,
       onChange,
       onClick,
       showLabel,
@@ -142,28 +149,30 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
       value,
     },
     ref: React.Ref<TextInputRefType>
-  ) => (
-    <TextInput
-      id={dsId}
-      showLabel={showLabel}
-      onChange={onChange}
-      value={value}
-      labelText={labelText}
-      isDisabled={isDisabled}
-      isRequired={isRequired}
-      showHelperInvalidText={showHelperInvalidText}
-      showRequiredLabel={showRequiredLabel}
-      isInvalid={isInvalid}
-      helperText={helperText}
-      invalidText={invalidText}
-      // Use either the specific prop-based or the `forwardRef` value.
-      // `react-datepicker` manipulates the `ref` value so when we
-      // want a specific ref, use the `dsRef` prop.
-      ref={dsRef || ref}
-      attributes={{ ...attributes, onClick }}
-      additionalStyles={additionalStyles}
-    />
-  )
+  ) => {
+    return (
+      <TextInput
+        helperText={helperText}
+        id={id}
+        invalidText={invalidText}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+        labelText={labelText}
+        name={name}
+        onChange={onChange}
+        onClick={onClick}
+        showHelperInvalidText={showHelperInvalidText}
+        showLabel={showLabel}
+        showRequiredLabel={showRequiredLabel}
+        value={value}
+        // Use either the specific prop-based or the `forwardRef` value.
+        // `react-datepicker` manipulates the `ref` value so when we
+        // want a specific ref, use the `dsRef` prop.
+        ref={dsRef || ref}
+      />
+    );
+  }
 );
 
 /**
@@ -216,7 +225,7 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
   children,
 }) =>
   isDateRange ? (
-    <FormRow id={`${id}-form-row`} gap={FormGaps.ExtraSmall}>
+    <FormRow id={`${id}-form-row`} gap="grid.xs">
       {children}
     </FormRow>
   ) : (
@@ -231,7 +240,7 @@ export const DatePicker = chakra(
     const {
       className,
       dateFormat = "yyyy-MM-dd",
-      dateType = DatePickerTypes.Full,
+      dateType = "full",
       helperText,
       helperTextFrom,
       helperTextTo,
@@ -268,14 +277,14 @@ export const DatePicker = chakra(
     // This updates the internal state for the start and end date values,
     // and also calls the `onChange` prop if it was passed to return the
     // date value to the parent.
-    const onChangeDefault = (date, value) => {
+    const onChangeDefault = (date: Date, value: string) => {
       setFullDate({ ...fullDate, [value]: date });
       onChange && onChange({ ...fullDate, [value]: date });
     };
-    // How many years to display in the DatePickerTypes.Year option.
+    // How many years to display in the "year" option.
     const yearsToDisplay = 12;
     // Both `ReactDatePicker` components share some props.
-    let baseDatePickerAttrs = {
+    let baseDatePickerAttrs: ReactDatePickerAttrs = {
       popperClassName: "date-picker-calendar",
       popperPlacement: "bottom-start",
       popperModifiers: [
@@ -292,7 +301,6 @@ export const DatePicker = chakra(
     };
     // Both custom `TextInput` components share some props.
     let baseCustomTextInputAttrs = {
-      dsId: `${id}-start`,
       isRequired,
       // In the date range type, don't display the "(Required)" text in
       // individual input labels. It'll display in the legend element.
@@ -305,7 +313,7 @@ export const DatePicker = chakra(
       helperText: isDateRange ? helperTextFrom : helperText,
       showHelperInvalidText,
       invalidText,
-      additionalStyles: finalStyles.subLabels,
+      __css: finalStyles.subLabels,
     };
     // These are attribute objects for the `react-datepicker` package component.
     let startDatePickerAttrs = {};
@@ -316,10 +324,10 @@ export const DatePicker = chakra(
     let startLabelText = labelText;
 
     // Update the appropriate props for the selected date type to render.
-    if (dateType === DatePickerTypes.Month) {
+    if (dateType === "month") {
       baseDatePickerAttrs["showMonthYearPicker"] = true;
       baseDatePickerAttrs.dateFormat = "MM-yyyy";
-    } else if (dateType === DatePickerTypes.Year) {
+    } else if (dateType === "year") {
       baseDatePickerAttrs["showYearPicker"] = true;
       baseDatePickerAttrs["yearItemNumber"] = yearsToDisplay;
       baseDatePickerAttrs.dateFormat = "yyyy";
@@ -354,7 +362,6 @@ export const DatePicker = chakra(
     if (isDateRange) {
       const endCustomTextInputAttrs = {
         ...baseCustomTextInputAttrs,
-        dsId: `${id}-end`,
         helperText: helperTextTo,
       };
       // These props are used to follow the pattern recommended by
@@ -375,33 +382,34 @@ export const DatePicker = chakra(
       startLabelText = "From";
       endDatePickerElement = (
         <ReactDatePicker
-          selected={fullDate.endDate}
-          onChange={(date) => onChangeDefault(date, "endDate")}
           customInput={
             <CustomTextInput
-              labelText="To"
               dsRef={refTo}
-              attributes={{ name: nameTo }}
+              labelText="To"
               {...endCustomTextInputAttrs}
             />
           }
+          id={`${id}-end`}
+          name={nameTo}
+          onChange={(date: Date) => onChangeDefault(date, "endDate")}
+          selected={fullDate.endDate}
           {...endDatePickerAttrs}
         />
       );
     }
-
     const startDatePickerElement = (
       <ReactDatePicker
-        selected={fullDate.startDate}
-        onChange={(date) => onChangeDefault(date, "startDate")}
         customInput={
           <CustomTextInput
-            labelText={startLabelText}
             dsRef={ref}
-            attributes={{ name: nameFrom }}
+            labelText={startLabelText}
             {...baseCustomTextInputAttrs}
           />
         }
+        id={`${id}-start`}
+        name={nameFrom}
+        onChange={(date: Date) => onChangeDefault(date, "startDate")}
+        selected={fullDate.startDate}
         {...startDatePickerAttrs}
       />
     );