DateRangePicker allows arbitrary dates; scrollable date list

Author: hoorayimhelping

src/components/DatePicker/Common.tsx

@@ -8,7 +8,7 @@ import { IconButton } from "../IconButton/IconButton";
 import { Text } from "../Typography/Text/Text";
 
 const locale = "en-US";
-const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
+export const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
   month: "short",
   year: "numeric",

src/components/DatePicker/DateRangePicker.stories.tsx

@@ -1,7 +1,37 @@
-import { Args } from "@storybook/react";
-import { DateRangePicker } from "./DateRangePicker";
+import { Args, Meta, StoryObj } from "@storybook/react";
+import { DateRange, DateRangePicker } from "./DateRangePicker";
+import dayjs from "dayjs";
 
-const defaultStory = {
+const getMonthsByNumber = (numberOfMonths: number): Array<DateRange> => {
+  const now = dayjs();
+
+  if (numberOfMonths < 0) {
+    const lastSixMonths: Array<DateRange> = [];
+    for (let i = 0; i < Math.abs(numberOfMonths); i++) {
+      const date = now.subtract(i, "month");
+      lastSixMonths.push({
+        startDate: date.startOf("month").toDate(),
+        endDate: i === 0 ? now.toDate() : date.endOf("month").toDate(),
+      });
+    }
+
+    return lastSixMonths.reverse();
+  }
+
+  const nextSixMonths: Array<DateRange> = [];
+  for (let i = 0; i < numberOfMonths; i++) {
+    const date = now.add(i, "month");
+    nextSixMonths.push({
+      startDate: date.startOf("month").toDate(),
+      endDate: i === 0 ? now.toDate() : date.endOf("month").toDate(),
+    });
+  }
+
+  return nextSixMonths;
+};
+
+const meta: Meta<typeof DateRangePicker> = {
+  component: DateRangePicker,
   args: {
     onSelectDateRange: (startDate: Date, endDate: Date) => {
       console.log("Date range selected: ", startDate, endDate);
@@ -20,21 +50,25 @@ const defaultStory = {
     placeholder: {
       control: "text",
     },
-    predefinedDatesCount: {
-      control: "number",
-      default: 0,
-    },
     onSelectDateRange: {
       control: "object",
     },
   },
-  component: DateRangePicker,
+  tags: ["autodocs"],
+  title: "Display/DateRangePicker",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    predefinedDatesList: [],
+  },
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const predefinedDatesCount = args.predefinedDatesCount
-      ? args.predefinedDatesCount
-      : undefined;
 
     return (
       <DateRangePicker
@@ -44,17 +78,107 @@ const defaultStory = {
         futureDatesDisabled={args.futureDatesDisabled}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
-        predefinedDatesCount={predefinedDatesCount}
         startDate={startDate}
       />
     );
   },
-  title: "Display/DateRangePicker",
-  tags: ["autodocs"],
 };
 
-export default defaultStory;
+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 = getMonthsByNumber(-6);
+
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        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 = getMonthsByNumber(6);
+
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        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}
+        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") },
+    ];
 
-export const Playground = {
-  ...defaultStory,
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        onSelectDateRange={args.onSelectDateRange}
+        placeholder={args.placeholder}
+        predefinedDatesList={predefinedDatesList}
+        startDate={startDate}
+      />
+    );
+  },
 };