feat: add timescape for handling the input of dates (#394)

* feat: add `timescape`

* feat: add a function to generate a simple random id

* feat: add timescape input

* fix: applying the api changes to the datepicker inputs

* fix: remove the readonly styles

* chore: sync api for readonly

* feat: selection based style with ring on the root

* duration grid

* feat: move the time selector on the same popover

* chore: bump timescape to 0.5.0

Author: SeanCassiere

package.json

@@ -74,6 +74,7 @@
     "recharts": "2.13.0-alpha.4",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",
+    "timescape": "^0.5.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -227,9 +227,7 @@ export const CustomerStage = ({
                     readOnly
                   >
                     <FormControl>
-                      <InputDatePickerSlot
-                        placeholder={tl("display.dateOfBirth")}
-                      />
+                      <InputDatePickerSlot />
                     </FormControl>
                   </InputDatePicker>
                   <FormMessage />

src/components/add-rental/customer-information/customer-stage.tsx

@@ -160,23 +160,33 @@ export const DurationStage = ({
     name: "checkinDate",
   });
 
-  const handleCheckoutDateChange = (date: Date) => {
-    const previousCheckoutDate = form_checkoutDate;
-    const previousCheckinDate = form_checkinDate;
+  const handleCheckoutDateChange = React.useCallback(
+    (date: Date | undefined) => {
+      if (date === undefined) return;
 
-    const diffMinsBetweenDates = differenceInMinutes(
-      previousCheckinDate,
-      previousCheckoutDate
-    );
-    const checkin = add(date, {
-      minutes: diffMinsBetweenDates,
-    });
-    form.setValue("checkoutDate", date, { shouldValidate: true });
-    form.setValue("checkinDate", checkin, { shouldValidate: true });
-  };
-  const handleCheckinDateChange = (date: Date) => {
-    form.setValue("checkinDate", date, { shouldValidate: true });
-  };
+      const previousCheckoutDate = form_checkoutDate;
+      const previousCheckinDate = form_checkinDate;
+
+      const diffMinsBetweenDates = differenceInMinutes(
+        previousCheckinDate,
+        previousCheckoutDate
+      );
+      const checkin = add(date, {
+        minutes: diffMinsBetweenDates,
+      });
+      form.setValue("checkoutDate", date, { shouldValidate: true });
+      form.setValue("checkinDate", checkin, { shouldValidate: true });
+    },
+    [form, form_checkinDate, form_checkoutDate]
+  );
+  const handleCheckinDateChange = React.useCallback(
+    (date: Date | undefined) => {
+      if (date === undefined) return;
+
+      form.setValue("checkinDate", date, { shouldValidate: true });
+    },
+    [form]
+  );
 
   React.useEffect(() => {
     if (agreementNumberQuery.status !== "success") return;
@@ -198,7 +208,7 @@ export const DurationStage = ({
         className="flex flex-col gap-4 px-1 pt-4"
         autoComplete="off"
       >
-        <div className="grid gap-4 md:grid-cols-3">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           <div>
             <FormField
               control={form.control}
@@ -270,10 +280,9 @@ export const DurationStage = ({
                     mode="datetime"
                     format={dateTimeFormat}
                     timeFormat={timeFormat}
-                    required
                   >
                     <FormControl>
-                      <InputDatePickerSlot placeholder="Checkout date" />
+                      <InputDatePickerSlot />
                     </FormControl>
                   </InputDatePicker>
                   <FormMessage />
@@ -322,10 +331,9 @@ export const DurationStage = ({
                     mode="datetime"
                     format={dateTimeFormat}
                     timeFormat={timeFormat}
-                    required
                   >
                     <FormControl>
-                      <InputDatePickerSlot placeholder="Checkin date" />
+                      <InputDatePickerSlot />
                     </FormControl>
                   </InputDatePicker>
                   <FormMessage />

src/components/add-rental/rental-information/duration-stage.tsx

@@ -7,6 +7,7 @@ import {
   FieldPath,
   FieldValues,
   FormProvider,
+  useController,
   useFormContext,
 } from "react-hook-form";
 
@@ -43,9 +44,11 @@ const FormField = <
 const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
+  const { getFieldState, formState, setFocus, control, trigger } =
+    useFormContext();
 
   const fieldState = getFieldState(fieldContext.name, formState);
+  const formControl = useController({ control, name: fieldContext.name });
 
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -60,6 +63,9 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
+    onBlur: formControl.field.onBlur,
+    onFocus: () => setFocus(fieldContext.name),
+    trigger: () => trigger(fieldContext.name),
   };
 };