feat(DatepickerField): control placeholder

src/components/datepicker-field/DatepickerField.stories.tsx

@@ -8,24 +8,21 @@ export default {
   ...meta,
 };
 
-const birthday = dateField({
+const dueDate = dateField({
   schema: (s) => {
-    const date = new Date();
-    date.setFullYear(date.getFullYear() - 15);
-
-    return s.max(date);
+    return s.min(new Date());
   },
 });
 
 export const Required: FormStory = {
   args: {
-    fields: { birthday },
+    fields: { dueDate },
     children: ({ required }) => (
       <DatepickerField
-        field={birthday}
-        label="Birthday"
+        field={dueDate}
+        label="Due Date"
         required={required}
-        helperText="You must be at least 15 years old"
+        helperText="Event must be in the future"
       />
     ),
   },

src/components/datepicker-field/DatepickerField.test.tsx

@@ -1,7 +1,7 @@
 import { dateField } from "@form-atoms/field";
 import { act, render, renderHook, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { formAtom, useFormSubmit } from "form-atoms";
+import { formAtom, useFieldActions, useFormSubmit } from "form-atoms";
 import { describe, expect, it } from "vitest";
 
 import { DatepickerField } from "./DatepickerField";
@@ -33,7 +33,7 @@ describe("<DatepickerField />", () => {
         result.current(onSubmit)();
       });
 
-      render(<DatepickerField role="dialog" field={field} label="label" />);
+      render(<DatepickerField role="dialog" field={field} />);
 
       expect(screen.getByRole("dialog")).toBeInvalid();
       expect(screen.getByText("This field is required")).toBeInTheDocument();
@@ -42,20 +42,12 @@ describe("<DatepickerField />", () => {
 
     it("submits without error when valid", async () => {
       const value = new Date();
-
       const field = dateField();
-      const form = formAtom({
-        field,
-      });
+      const form = formAtom({ field });
       const { result } = renderHook(() => useFormSubmit(form));
 
       render(
-        <DatepickerField
-          initialValue={value}
-          role="dialog"
-          field={field}
-          label="label"
-        />,
+        <DatepickerField field={field} initialValue={value} role="dialog" />,
       );
 
       const input = screen.getByRole("dialog");
@@ -74,16 +66,14 @@ describe("<DatepickerField />", () => {
   describe("with optional field", () => {
     it("submits with undefined", async () => {
       const field = dateField().optional();
-      const form = formAtom({
-        field,
-      });
+      const form = formAtom({ field });
       const { result } = renderHook(() => useFormSubmit(form));
 
-      render(<DatepickerField role="dialog" field={field} label="label" />);
+      render(<DatepickerField field={field} role="dialog" />);
 
-      const textarea = screen.getByRole("dialog");
+      const dateInput = screen.getByRole("dialog");
 
-      expect(textarea).toBeValid();
+      expect(dateInput).toBeValid();
 
       const onSubmit = vi.fn();
       await act(async () => {
@@ -93,4 +83,31 @@ describe("<DatepickerField />", () => {
       expect(onSubmit).toHaveBeenCalledWith({ field: undefined });
     });
   });
+
+  describe("placeholder", () => {
+    it("renders", () => {
+      const field = dateField();
+
+      render(<DatepickerField field={field} placeholder="Pick a date" />);
+
+      expect(screen.getByPlaceholderText("Pick a date")).toBeInTheDocument();
+    });
+
+    it("appears when the field is cleared", async () => {
+      const field = dateField({ value: new Date() });
+      const { result: fieldActions } = renderHook(() => useFieldActions(field));
+
+      render(<DatepickerField field={field} placeholder="Pick a date" />);
+
+      expect(
+        screen.queryByPlaceholderText("Pick a date"),
+      ).not.toBeInTheDocument();
+
+      await act(async () => {
+        fieldActions.current.setValue(undefined);
+      });
+
+      expect(screen.queryByPlaceholderText("Pick a date")).toBeInTheDocument();
+    });
+  });
 });

src/components/datepicker-field/DatepickerField.tsx

@@ -12,6 +12,7 @@ export const DatepickerField = ({
   helperText,
   required,
   initialValue,
+  placeholder = "Please select a date",
   ...uiProps
 }: DatepickerFIeldProps) => {
   const {
@@ -25,6 +26,13 @@ export const DatepickerField = ({
     initialValue,
   });
 
+  const emptyProps = !value
+    ? {
+        value: "",
+        placeholder,
+      }
+    : {};
+
   return (
     <FlowbiteField
       field={field}
@@ -37,6 +45,7 @@ export const DatepickerField = ({
           {...dateFieldProps}
           {...uiProps}
           {...fieldProps}
+          {...emptyProps}
           defaultDate={value}
           onSelectedDateChanged={(valueAsDate) => {
             onChange({