DateRangePicker: add ability to use predefined ranges

src/components/DatePicker/Common.tsx

@@ -6,13 +6,7 @@ import { Container } from "../Container/Container";
 import { useCalendar, UseCalendarOptions } from "@h6s/calendar";
 import { IconButton } from "../IconButton/IconButton";
 import { Text } from "../Typography/Text/Text";
-
-const locale = "en-US";
-const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
-  day: "2-digit",
-  month: "short",
-  year: "numeric",
-});
+import { headerDateFormatter, selectedDateFormatter, weekdayFormatter } from "./utils";
 
 const explicitWidth = "250px";
 
@@ -137,12 +131,6 @@ export const DateRangePickerInput = ({
   );
 };
 
-const weekdayFormatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric",
-});
-
 const DatePickerContainer = styled(Container)`
   background: ${({ theme }) =>
     theme.click.datePicker.dateOption.color.background.default};
@@ -277,13 +265,15 @@ export const CalendarRenderer = ({
         orientation="horizontal"
       >
         <IconButton
+          data-testid="calendar-previous-month"
           icon="chevron-left"
           onClick={handlePreviousClick}
           size="sm"
           type="ghost"
         />
         <UnselectableTitle>{headerDateFormatter.format(headerDate)}</UnselectableTitle>
         <IconButton
+          data-testid="calendar-next-month"
           icon="chevron-right"
           onClick={handleNextClick}
           size="sm"

src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { isSameDate, UseCalendarOptions } from "@h6s/calendar";
-import Dropdown from "../Dropdown/Dropdown";
+import { Dropdown } from "../Dropdown/Dropdown";
 import { Body, CalendarRenderer, DatePickerInput, DateTableCell } from "./Common";
 
 interface CalendarProps {

src/components/DatePicker/DateRangePicker.stories.tsx

@@ -1,50 +1,182 @@
-import { Args } from "@storybook/react";
+import { Args, Meta, StoryObj } from "@storybook/react";
 import { DateRangePicker } from "./DateRangePicker";
+import { getPredefinedMonthsForDateRangePicker } from "./utils";
 
-const defaultStory = {
+const meta: Meta<typeof DateRangePicker> = {
+  component: DateRangePicker,
   args: {
+    maxRangeLength: undefined,
     onSelectDateRange: (startDate: Date, endDate: Date) => {
       console.log("Date range selected: ", startDate, endDate);
     },
   },
-  argTypes: {
-    startDate: {
-      control: "date",
-    },
-    endDate: {
-      control: "date",
-    },
-    futureDatesDisabled: {
-      control: "boolean",
-    },
-    placeholder: {
-      control: "text",
-    },
-    onSelectDateRange: {
-      control: "object",
-    },
+  tags: ["autodocs"],
+  title: "Display/DateRangePicker",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    predefinedDatesList: [],
   },
-  component: DateRangePicker,
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
+
     return (
       <DateRangePicker
+        key="default"
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         startDate={startDate}
       />
     );
   },
-  title: "Display/DateRangePicker",
-  tags: ["autodocs"],
 };
 
-export default defaultStory;
+export const DateRangeWithMaxRange: Story = {
+  args: {
+    maxRangeLength: 15,
+    predefinedDatesList: [],
+  },
+  render: (args: Args) => {
+    const endDate = args.endDate ? new Date(args.endDate) : undefined;
+    const startDate = args.startDate ? new Date(args.startDate) : undefined;
 
-export const Playground = {
-  ...defaultStory,
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
+        onSelectDateRange={args.onSelectDateRange}
+        placeholder={args.placeholder}
+        startDate={startDate}
+      />
+    );
+  },
+};
+
+export const DateRangeFutureStartDatesDisabled: Story = {
+  args: {
+    futureStartDatesDisabled: true,
+    predefinedDatesList: [],
+  },
+};
+
+export const PredefinedDatesLastSixMonths: Story = {
+  render: (args: Args) => {
+    const endDate = args.endDate ? new Date(args.endDate) : undefined;
+    const startDate = args.startDate ? new Date(args.startDate) : undefined;
+    const predefinedDatesList = getPredefinedMonthsForDateRangePicker(-6);
+
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
+        onSelectDateRange={args.onSelectDateRange}
+        placeholder={args.placeholder}
+        predefinedDatesList={predefinedDatesList}
+        startDate={startDate}
+      />
+    );
+  },
+};
+
+export const PredefinedDatesNextSixMonths: Story = {
+  render: (args: Args) => {
+    const endDate = args.endDate ? new Date(args.endDate) : undefined;
+    const startDate = args.startDate ? new Date(args.startDate) : undefined;
+    const predefinedDatesList = getPredefinedMonthsForDateRangePicker(6);
+
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
+        onSelectDateRange={args.onSelectDateRange}
+        placeholder={args.placeholder}
+        predefinedDatesList={predefinedDatesList}
+        startDate={startDate}
+      />
+    );
+  },
+};
+
+export const PredefinedDatesArbitraryDates: Story = {
+  render: (args: Args) => {
+    const endDate = args.endDate ? new Date(args.endDate) : undefined;
+    const startDate = args.startDate ? new Date(args.startDate) : undefined;
+    const predefinedDatesList = [
+      { startDate: new Date("04/14/2025"), endDate: new Date("05/14/2025") },
+      { startDate: new Date("05/14/2025"), endDate: new Date("06/14/2025") },
+      { startDate: new Date("06/14/2025"), endDate: new Date("07/14/2025") },
+    ];
+
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
+        onSelectDateRange={args.onSelectDateRange}
+        placeholder={args.placeholder}
+        predefinedDatesList={predefinedDatesList}
+        startDate={startDate}
+      />
+    );
+  },
+};
+
+export const PredefinedDatesScrollable: Story = {
+  render: (args: Args) => {
+    const endDate = args.endDate ? new Date(args.endDate) : undefined;
+    const startDate = args.startDate ? new Date(args.startDate) : undefined;
+    const predefinedDatesList = [
+      { startDate: new Date("09/14/2024"), endDate: new Date("10/14/2024") },
+      { startDate: new Date("10/14/2024"), endDate: new Date("11/14/2024") },
+      { startDate: new Date("11/14/2024"), endDate: new Date("12/14/2024") },
+      { startDate: new Date("12/14/2024"), endDate: new Date("01/14/2025") },
+      { startDate: new Date("01/14/2025"), endDate: new Date("02/14/2025") },
+      { startDate: new Date("02/14/2025"), endDate: new Date("03/14/2025") },
+      { startDate: new Date("03/14/2025"), endDate: new Date("04/14/2025") },
+      { startDate: new Date("04/14/2025"), endDate: new Date("05/14/2025") },
+      { startDate: new Date("05/14/2025"), endDate: new Date("06/14/2025") },
+      { startDate: new Date("06/14/2025"), endDate: new Date("07/14/2025") },
+    ];
+
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
+        onSelectDateRange={args.onSelectDateRange}
+        placeholder={args.placeholder}
+        predefinedDatesList={predefinedDatesList}
+        startDate={startDate}
+      />
+    );
+  },
 };