Feat/date value datepicker

.changeset/old-jobs-decide.md

@@ -0,0 +1,22 @@
+---
+"flowbite-react": patch
+---
+
+### Datepicker Component Updates
+
+The Datepicker has been enhanced with several improvements:
+
+1. **Controlled Inputs**: Supports controlled inputs via `value` and `defaultValue` props, enabling programmatic date updates without manual clicks.
+2. **State Management**: Optimized internal state management using `useMemo` and `useEffect`.
+3. **Documentation**: Added sections in documentation for controlled usage and handling `null` values.
+4. **Test Cases**: Comprehensive unit tests added for date handling.
+5. **Storybook**: Improved stories, showcasing different states (controlled/uncontrolled).
+
+### Files Updated:
+
+- `apps/web/content/docs/components/datepicker.mdx`: Added controlled usage section.
+- `Datepicker.spec.tsx`: Added unit tests.
+- `Datepicker.stories.tsx`: Enhanced story variants.
+- `Datepicker.tsx`: Expanded `DatepickerProps`.
+- `DatepickerContext.tsx`: Adjusted `selectedDate` type.
+- `Decades.tsx`, `Months.tsx`, `Years.tsx`: Updated logic to check for `selectedDate`.

apps/web/content/docs/components/datepicker.mdx

@@ -69,6 +69,12 @@ Use the `inline` prop to show the datepicker component without having to click i
 
 <Example name="datepicker.inline" />
 
+## Controlled Date/Datepicker.
+
+Use `<Datepicker value={}` to create a controlled `<Datepicker />`. Pass `null` to clear the input.
+
+<Example name="datepicker.value" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

packages/ui/src/components/Datepicker/Datepicker.spec.tsx

@@ -57,17 +57,17 @@ describe("Components / Datepicker", () => {
     expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
   });
 
-  it("should call `onSelectedDateChange` when a new date is selected", async () => {
-    const onSelectedDateChange = vi.fn();
+  it("should call `onChange` when a new date is selected", async () => {
+    const onChange = vi.fn();
     const todaysDayOfMonth = new Date().getDate();
     const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
 
-    render(<Datepicker onSelectedDateChanged={onSelectedDateChange} />);
+    render(<Datepicker onChange={onChange} />);
 
     await userEvent.click(screen.getByRole("textbox"));
     await userEvent.click(screen.getAllByText(anotherDay)[0]);
 
-    expect(onSelectedDateChange).toHaveBeenCalledOnce();
+    expect(onChange).toHaveBeenCalledOnce();
   });
 
   // TODO: fix
@@ -80,7 +80,7 @@ describe("Components / Datepicker", () => {
 
   it("should render 1990 - 2100 year range when selecting decade", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -96,7 +96,7 @@ describe("Components / Datepicker", () => {
 
   it("should allow selecting earlier decades when setting max date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} maxDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} maxDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -113,7 +113,7 @@ describe("Components / Datepicker", () => {
 
   it("should disallow selecting later decades when setting max date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} maxDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} maxDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -130,7 +130,7 @@ describe("Components / Datepicker", () => {
 
   it("should disallow selecting earlier decades when setting min date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} minDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} minDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -147,7 +147,7 @@ describe("Components / Datepicker", () => {
 
   it("should allow selecting later decades when setting min date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} minDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} minDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -167,7 +167,7 @@ describe("Components / Datepicker", () => {
     const maxDate = new Date(2030, 1, 1);
     const testDate = new Date(2024, 6, 1);
 
-    render(<Datepicker defaultDate={testDate} minDate={minDate} maxDate={maxDate} />);
+    render(<Datepicker defaultValue={testDate} minDate={minDate} maxDate={maxDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);

packages/ui/src/components/Datepicker/Datepicker.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import { useEffect, useState } from "react";
 import type { DatepickerProps } from "./Datepicker";
 import { Datepicker } from "./Datepicker";
 import { getFirstDateInRange, WeekStart } from "./helpers";
@@ -13,6 +14,9 @@ export default {
         options: ["en", "pt-BR"],
       },
     },
+    value: { control: { type: "date", format: "MM/DD/YYYY" } },
+    defaultValue: { control: { type: "date", format: "MM/DD/YYYY" } },
+    label: { control: { type: "text" } },
     weekStart: {
       options: Object.values(WeekStart).filter((x) => typeof x === "string"),
       mapping: Object.entries(WeekStart)
@@ -28,6 +32,36 @@ export default {
   },
 } as Meta;
 
+const ControlledTemplate: StoryFn<DatepickerProps> = (args) => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(args.value ?? null);
+
+  const handleChange = (date: Date | null) => {
+    setSelectedDate(date);
+  };
+
+  useEffect(() => {
+    const date = args.value && new Date(args.value);
+    setSelectedDate(date ?? null);
+  }, [args.value]);
+
+  // https://github.com/storybookjs/storybook/issues/11822
+  if (args.minDate) {
+    args.minDate = new Date(args.minDate);
+  }
+  if (args.maxDate) {
+    args.maxDate = new Date(args.maxDate);
+  }
+
+  // update defaultValue based on the range
+  if (args.minDate && args.maxDate) {
+    if (args.defaultValue) {
+      args.defaultValue = getFirstDateInRange(args.defaultValue, args.minDate, args.maxDate);
+    }
+  }
+
+  return <Datepicker {...args} value={selectedDate} onChange={handleChange} />;
+};
+
 const Template: StoryFn<DatepickerProps> = (args) => {
   // https://github.com/storybookjs/storybook/issues/11822
   if (args.minDate) {
@@ -37,27 +71,80 @@ const Template: StoryFn<DatepickerProps> = (args) => {
     args.maxDate = new Date(args.maxDate);
   }
 
-  // update defaultDate based on the range
+  // update defaultValue based on the range
   if (args.minDate && args.maxDate) {
-    if (args.defaultDate) {
-      // https://github.com/storybookjs/storybook/issues/11822
-      args.defaultDate = getFirstDateInRange(new Date(args.defaultDate), args.minDate, args.maxDate);
+    if (args.defaultValue) {
+      args.defaultValue = getFirstDateInRange(args.defaultValue, args.minDate, args.maxDate);
     }
   }
 
   return <Datepicker {...args} />;
 };
 
+export const ControlledDefaultEmpty = ControlledTemplate.bind({});
+ControlledDefaultEmpty.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  value: null,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  theme: {},
+  label: "No date selected",
+};
+
 export const Default = Template.bind({});
 Default.args = {
   open: false,
   autoHide: true,
   showClearButton: true,
   showTodayButton: true,
-  defaultDate: new Date(),
+  value: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  theme: {},
+};
+
+export const NullDateValue = Template.bind({});
+NullDateValue.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  theme: {},
+};
+
+export const DateValueSet = Template.bind({});
+DateValueSet.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  defaultValue: new Date(),
+  theme: {},
+};
+
+export const EmptyDates = Template.bind({});
+EmptyDates.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  defaultValue: undefined,
+  value: undefined,
   minDate: undefined,
   maxDate: undefined,
   language: "en",
   weekStart: WeekStart.Sunday,
   theme: {},
+  label: "No date selected",
 };