Feat-630 - Redesign of Date Range Picker (#651)

* ui: implementation of redesign date-range-picker

* ui: add test to redesigned date-range-picker component

* fix ui: adjust calendar to start on sunday

* fix ui: center calendar titles

* fix ui: adjust suggested relative dates

* fix ui: rename suggestion radio test

packages/ui/src/components/calendar/option-data/months.ts

@@ -5,6 +5,21 @@ export type MONTHS_OPTION = {
   text: string;
 };
 
+export const MONTH_NAMES: string[] = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
 export const MONTHS_RANGE: MONTHS_OPTION[] = [
   { value: 0, text: "January" },
   { value: 1, text: "February" },

packages/ui/src/components/date-picker/date-picker-calendar.test.tsx

@@ -0,0 +1,91 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePickerCalendar from "./date-picker-calendar";
+import { MONTH_NAMES } from "../calendar/option-data/months";
+import userEvent from "@testing-library/user-event";
+
+describe("Date Range 2 month Calendar", () => {
+  const todayDate = new Date();
+
+  beforeEach(async () => {
+    render(
+      <DatePickerCalendar
+        key="date-range-calendar-test"
+        initDate={todayDate}
+        startDate={null}
+        endDate={null}
+        setStartDate={() => {}}
+        setEndDate={() => {}}
+        handleReset={() => {}}
+      />,
+    );
+  });
+
+  test("renders Back Arrow Icon", () => {
+    expect(screen.getByTestId("ArrowBackIosNewIcon")).toBeInTheDocument();
+  });
+
+  test("renders Forward Arrow Icon", () => {
+    expect(screen.getByTestId("ArrowForwardIosIcon")).toBeInTheDocument();
+  });
+
+  test("renders current month and next month", () => {
+    const currMonthIdx = todayDate.getMonth();
+    const nextMonthIdx = (currMonthIdx + 1) % 12;
+
+    expect(screen.getByText(MONTH_NAMES[currMonthIdx])).toBeInTheDocument();
+    expect(screen.getByText(MONTH_NAMES[nextMonthIdx])).toBeInTheDocument();
+  });
+
+  test("render current month's year and next month's year", () => {
+    const currMonthIdx = todayDate.getMonth();
+    const nextMonthIdx = (currMonthIdx + 1) % 12;
+
+    expect(screen.getByText(MONTH_NAMES[currMonthIdx])).toBeInTheDocument();
+    expect(screen.getByText(MONTH_NAMES[nextMonthIdx])).toBeInTheDocument();
+  });
+});
+
+describe("Date Range Call to Action ", () => {
+  const date = new Date("11-25-2024");
+  const user = userEvent.setup();
+  beforeEach(async () => {
+    render(
+      <DatePickerCalendar
+        key="date-range-calendar-test"
+        initDate={date}
+        startDate={null}
+        endDate={null}
+        setStartDate={() => {}}
+        setEndDate={() => {}}
+        handleReset={() => {}}
+      />,
+    );
+  });
+
+  test("renders current month and next month", () => {
+    expect(screen.getByText("November")).toBeInTheDocument();
+    expect(screen.getByText("December")).toBeInTheDocument();
+    expect(screen.getByText((_, ele) => ele?.textContent === "2024")).toBeInTheDocument();
+  });
+
+  test("render December 2024 and January 2025 when Forward Arrow is pressed", async () => {
+    const nextMonthButton = screen.getByRole("button", { name: /next-months/i });
+    await user.click(nextMonthButton);
+
+    expect(screen.getByText("December")).toBeInTheDocument();
+    expect(screen.getByText("2024")).toBeInTheDocument();
+
+    expect(screen.getByText("January")).toBeInTheDocument();
+    expect(screen.getByText("2025")).toBeInTheDocument();
+  });
+
+  test("render October 2024 and November 2024 when Forward Arrow is pressed", async () => {
+    const nextMonthButton = screen.getByRole("button", { name: /prev-months/i });
+    await user.click(nextMonthButton);
+
+    expect(screen.getByText("October")).toBeInTheDocument();
+    expect(screen.getByText("November")).toBeInTheDocument();
+    expect(screen.getByText((_, ele) => ele?.textContent === "2024")).toBeInTheDocument();
+  });
+});

packages/ui/src/components/date-picker/date-picker-calendar.tsx

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import { isEmpty } from "lodash";
+
+import { Month, MONTH_NAMES } from "../calendar/option-data/months";
+import { Year } from "../calendar/option-data/years";
+import { CalendarDate } from "../calendar/utils/create-calendar";
+import { twMerge } from "tailwind-merge";
+import { createTwoMonthCalendar, CALENDAR_MONTH } from "./utils/create-two-month-calendar";
+import { isEqual } from "../calendar/utils/is-equal";
+import { addMonths } from "date-fns";
+
+interface DatePickerCalendarProps {
+  initDate?: Date;
+  endDate: Date | null;
+  startDate: Date | null;
+  setEndDate: (arg0: Date | null) => void;
+  setStartDate: (arg0: Date | null) => void;
+  handleReset: () => void;
+}
+
+export default function DatePickerCalendar(props: DatePickerCalendarProps) {
+  const { initDate = new Date(), startDate, endDate, setStartDate, setEndDate } = props;
+
+  const [date, setDate] = useState(initDate);
+  const [month, setMonth] = useState(initDate.getMonth() as Month);
+  const [year, setYear] = useState(initDate.getFullYear());
+  const [firstMonth, secondMonth] = createTwoMonthCalendar(year as Year, month);
+
+  function handleUpdateMonth(type: "prev" | "next") {
+    const modify = type === "prev" ? -1 : 1;
+    const newDate = addMonths(new Date(date), modify);
+
+    setMonth(newDate.getMonth() as Month);
+    setYear(newDate.getFullYear() as Year);
+    setDate(newDate);
+  }
+
+  const handleSelected = ({ day, month, year }: CalendarDate) => {
+    const newDate = new Date(year, month, day);
+
+    if (!startDate && !endDate) {
+      setStartDate(newDate);
+    } else if (startDate && !endDate) {
+      setEndDate(newDate);
+    } else {
+      /**
+       * This handles the edge cases when new End date comes before start date
+       *      Note: state is represent as date, but in system refer to CalendarDate interface
+       *      EG:
+       *        t-0 state:
+       *                start : July 16, 1969
+       *                end   : July 24, 1969
+       *
+       *        t-1 state:
+       *              new End : July 15, 1969 selected
+       *
+       *    t-final state:
+       *                start : July 15, 1969
+       *                end   : null
+       */
+
+      if (startDate && newDate < startDate) {
+        setStartDate(newDate);
+        setEndDate(null);
+      } else {
+        setEndDate(newDate);
+      }
+    }
+  };
+
+  return (
+    <div data-testid="date-range-calendar" className="bg-white-100 w-[512px]">
+      <div className="flex w-full items-center justify-center">
+        <div className="flex-col items-center justify-center">
+          {/*Left Calendar Nav*/}
+          <div className="flex h-[52px] flex-1 items-center justify-between space-x-4 px-4">
+            <button aria-label="prev-months" className="px-2" onClick={() => handleUpdateMonth("prev")}>
+              <ArrowBackIosNewIcon sx={{ fontSize: 8, color: "#7A7A7B" }} />
+            </button>
+            <div className="space-x-1">
+              <span aria-label="first-date-month"> {MONTH_NAMES[month]} </span>
+              <span aria-label="first-date-year">{year}</span>
+            </div>
+            <span className="invisible h-6 w-6" />
+          </div>
+
+          {/*Left Calendar*/}
+          <div className="flex justify-center px-4 pb-2">
+            <table className="border-collaspse">
+              <thead>
+                <tr>
+                  {["S", "M", "T", "W", "T", "F", "S"].map((ele: string, index: number) => (
+                    <td
+                      key={ele + index}
+                      className="text-black-400 h-8 w-8 p-px text-center text-xs font-normal leading-[16.8px]">
+                      {ele}
+                    </td>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {firstMonth.map((week: CALENDAR_MONTH[], weekIdx: number) => (
+                  <tr key={"first-month" + weekIdx}>
+                    {week.map((ele: CALENDAR_MONTH, colIdx: number) => {
+                      if (isEmpty(ele)) {
+                        return <td key={"empty" + colIdx} className="h-8 w-8" />;
+                      }
+                      const { day, month, year } = ele as CalendarDate;
+                      const key = `first-month-${month}/${day}/${year}`;
+                      const isSelected =
+                        isEqual(ele as CalendarDate, startDate) || isEqual(ele as CalendarDate, endDate);
+                      const isCurrDate = isEqual(ele as CalendarDate, initDate);
+
+                      return (
+                        <td
+                          key={key}
+                          onClick={() => handleSelected(ele as CalendarDate)}
+                          className={twMerge(
+                            "h-8 w-8 text-center text-xs font-normal leading-[18.8px]",
+                            isCurrDate && "inline-flex items-center justify-center rounded-full border-[1px]",
+                            !isSelected && "rounded-full hover:bg-blue-200",
+                            isSelected && "text-white-100 rounded-full bg-blue-500",
+                          )}>
+                          {day}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="flex-col items-center justify-center">
+          {/**Right Calendar Nav */}
+          <div className="flex h-[52px] flex-1 items-center justify-between space-x-4 px-4">
+            <span className="invisible h-6 w-6" />
+            <div className="space-x-1">
+              <span aria-label="second-date-month"> {MONTH_NAMES[(month + 1) % 12]} </span>
+              <span aria-label="second-date-year"> {(month + 1) % 12 === 0 ? year + 1 : year} </span>
+            </div>
+            <button aria-label="next-months" className="px-2" onClick={() => handleUpdateMonth("next")}>
+              <ArrowForwardIosIcon sx={{ fontSize: 8, color: "#7A7A7B" }} />
+            </button>
+          </div>
+
+          {/**Right Calendar*/}
+          <div className="flex justify-center px-4 pb-2">
+            <table className="border-collaspse">
+              <thead>
+                <tr>
+                  {["S", "M", "T", "W", "T", "F", "S"].map((ele: string, index: number) => (
+                    <td
+                      key={ele + index}
+                      className="text-black-400 h-8 w-8 p-px text-center text-xs font-normal leading-[16.8px]">
+                      {ele}
+                    </td>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {secondMonth.map((week: CALENDAR_MONTH[], weekIdx: number) => (
+                  <tr key={"second-month" + weekIdx}>
+                    {week.map((ele: CALENDAR_MONTH, colIdx: number) => {
+                      if (isEmpty(ele)) {
+                        return <td key={"empty" + colIdx} className="h-8 w-8" />;
+                      }
+                      const { day, month, year } = ele as CalendarDate;
+                      const key = `second-month-${month}/${day}/${year}`;
+                      const isSelected =
+                        isEqual(ele as CalendarDate, startDate) || isEqual(ele as CalendarDate, endDate);
+                      const isCurrDate = isEqual(ele as CalendarDate, initDate);
+
+                      return (
+                        <td
+                          key={key}
+                          onClick={() => handleSelected(ele as CalendarDate)}
+                          className={twMerge(
+                            "h-8 w-8 text-center text-xs font-normal leading-[18.8px]",
+                            isCurrDate && "inline-flex items-center justify-center rounded-full border-[1px]",
+                            !isSelected && "rounded-full hover:bg-blue-200",
+                            isSelected && "text-white-100 rounded-full bg-blue-500",
+                          )}>
+                          {day}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/date-picker/date-picker-suggestions.test.tsx

@@ -0,0 +1,17 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePickerSuggestions from "./date-picker-suggestions";
+
+describe("Date Range Suggestions Radio Group", () => {
+  beforeEach(() => {
+    render(<DatePickerSuggestions onSuggestionChange={(value) => console.log(value)} />);
+  });
+
+  test("renders radio group and all it's options", () => {
+    expect(screen.getByLabelText("Past 1 Year"));
+    expect(screen.getByLabelText("Past 3 Months"));
+    expect(screen.getByLabelText("Past 1 Month"));
+    expect(screen.getByLabelText("Year to Date"));
+    expect(screen.queryByLabelText("It's over 9000")).not.toBeInTheDocument();
+  });
+});

packages/ui/src/components/date-picker/date-picker-suggestions.tsx

@@ -0,0 +1,25 @@
+import _ from "lodash";
+import RadioGroup from "../radio-group";
+
+interface DatePickerSuggestion {
+  onSuggestionChange: (arg0: string) => void;
+}
+
+export enum RelativeDatePresets {
+  "YEARS_1" = "Past 1 Year",
+  "MONTHS_3" = "Past 3 Months",
+  "MONTHS_1" = "Past 1 Month",
+  "YTD" = "Year to Date",
+}
+
+const CITATION_DATE_PRESETS = _.map(RelativeDatePresets, (value) => value);
+
+export default function DatePickerSuggestions(props: DatePickerSuggestion) {
+  const { onSuggestionChange } = props;
+
+  return (
+    <div className="my-4 flex flex-1 flex-col items-start justify-center">
+      <RadioGroup name="suggested date range preset" options={CITATION_DATE_PRESETS} onChange={onSuggestionChange} />
+    </div>
+  );
+}

packages/ui/src/components/date-picker/date-picker.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import DatePicker from "./date-picker";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "Components/Date Picker",
+  component: DatePicker,
+};
+
+type DatePickerStory = StoryObj<typeof DatePicker>;
+
+export const Default: DatePickerStory = {
+  render: (args) => <DatePicker {...args} />,
+  args: {
+    //todo
+  },
+};
+
+export default meta;