From f98efa13544c2100552c9e117be311e82204cfc2 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Thu, 18 Jan 2024 14:18:01 +0100
Subject: [PATCH] fix(useDateFieldProps): make dateField initializable via
 options

---
 src/fields/date-field/DateInput.mock.tsx       | 18 ++++--------------
 src/fields/date-field/dateField.stories.tsx    | 15 +++++++++++++++
 .../use-date-field-props/useDateFieldProps.ts  |  9 ++++++---
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/fields/date-field/DateInput.mock.tsx b/src/fields/date-field/DateInput.mock.tsx
index 31ce0c7..9bc147a 100644
--- a/src/fields/date-field/DateInput.mock.tsx
+++ b/src/fields/date-field/DateInput.mock.tsx
@@ -1,21 +1,11 @@
-import { ReactNode } from "react";
-
-import { DateField } from "./dateField";
-import { FieldLabel } from "../../components";
-import { FieldErrors } from "../../components/field-errors";
-import { useDateFieldProps } from "../../hooks";
+import { FieldErrors, FieldLabel } from "../../components";
+import { DateFieldProps, useDateFieldProps } from "../../hooks";
 
 export const getDateString = (date: Date = new Date()) =>
   date.toISOString().slice(0, 10);
 
-export const DateInput = ({
-  field,
-  label,
-}: {
-  field: DateField;
-  label: ReactNode;
-}) => {
-  const { value, ...props } = useDateFieldProps(field);
+export const DateInput = ({ field, label, initialValue }: DateFieldProps) => {
+  const { value, ...props } = useDateFieldProps(field, { initialValue });
 
   return (
     <div style={{ margin: "20px 0" }}>
diff --git a/src/fields/date-field/dateField.stories.tsx b/src/fields/date-field/dateField.stories.tsx
index 3073edb..a0a346c 100644
--- a/src/fields/date-field/dateField.stories.tsx
+++ b/src/fields/date-field/dateField.stories.tsx
@@ -30,6 +30,21 @@ export const OptionalInput = formStory({
   },
 });
 
+export const InitializedInput = formStory({
+  args: {
+    fields: {
+      dueDate: dateField({ name: "dueDate" }).optional(),
+    },
+    children: ({ fields }) => (
+      <DateInput
+        field={fields.dueDate}
+        label="Due Date"
+        initialValue={new Date()}
+      />
+    ),
+  },
+});
+
 const nowPlusDays = (days = 0) => {
   const date = new Date();
   date.setDate(date.getDate() + days);
diff --git a/src/hooks/use-date-field-props/useDateFieldProps.ts b/src/hooks/use-date-field-props/useDateFieldProps.ts
index efd0d2c..7e9be57 100644
--- a/src/hooks/use-date-field-props/useDateFieldProps.ts
+++ b/src/hooks/use-date-field-props/useDateFieldProps.ts
@@ -1,7 +1,8 @@
+import { UseFieldOptions } from "form-atoms";
 import { ChangeEvent } from "react";
 
 import { FieldProps, useFieldProps } from "../";
-import { type DateField } from "../../fields/";
+import type { DateField, DateFieldValue } from "../../fields/";
 
 export type DateFieldProps = FieldProps<DateField>;
 
@@ -15,5 +16,7 @@ const getDate = (event: ChangeEvent<HTMLInputElement>) => {
     : undefined;
 };
 
-export const useDateFieldProps = (field: DateField) =>
-  useFieldProps(field, getDate);
+export const useDateFieldProps = (
+  field: DateField,
+  options?: UseFieldOptions<DateFieldValue>,
+) => useFieldProps(field, getDate, options);