From 256cc1475630c41bc80c867d8cf06eb6cae58771 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Thu, 18 Jan 2024 14:47:43 +0100
Subject: [PATCH] fix(useTextFieldProps): make textField initializable via
 options (#88)

---
 src/fields/text-field/Docs.mdx                |  8 ++--
 src/fields/text-field/TextInput.mock.tsx      | 21 +++++++++
 src/fields/text-field/textField.stories.tsx   | 45 +++++++++++++++++++
 .../useTextFieldProps.test.ts                 | 17 +++++++
 .../useTextFieldProps.tsx                     |  9 +++-
 5 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 src/fields/text-field/TextInput.mock.tsx
 create mode 100644 src/fields/text-field/textField.stories.tsx
 create mode 100644 src/hooks/use-text-field-props/useTextFieldProps.test.ts

diff --git a/src/fields/text-field/Docs.mdx b/src/fields/text-field/Docs.mdx
index 821c9f2..c50d95a 100644
--- a/src/fields/text-field/Docs.mdx
+++ b/src/fields/text-field/Docs.mdx
@@ -1,8 +1,8 @@
-import { Meta, Markdown } from "@storybook/blocks";
-
+import { Meta, Markdown, Stories } from "@storybook/blocks";
+import * as TextFieldStories from "./textField.stories";
 import Config from "./config.md?raw";
 
-<Meta title="fields/textField" />
+<Meta title="fields/textField" of={TextFieldStories} />
 
 # `textField(): ZodField<string>`
 
@@ -19,3 +19,5 @@ const bio = textField().optional();
 ## Initial Config
 
 <Markdown>{Config}</Markdown>
+
+<Stories />
diff --git a/src/fields/text-field/TextInput.mock.tsx b/src/fields/text-field/TextInput.mock.tsx
new file mode 100644
index 0000000..519996e
--- /dev/null
+++ b/src/fields/text-field/TextInput.mock.tsx
@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+
+import { FieldErrors, FieldLabel } from "../../components";
+import { TextFieldProps, useTextFieldProps } from "../../hooks";
+
+export const TextInput = ({
+  field,
+  label,
+  initialValue,
+  ...inputProps
+}: TextFieldProps & ComponentProps<"input">) => {
+  const props = useTextFieldProps(field, { initialValue });
+
+  return (
+    <p>
+      <FieldLabel field={field} label={label} />
+      <input {...inputProps} {...props} />
+      <FieldErrors field={field} />
+    </p>
+  );
+};
diff --git a/src/fields/text-field/textField.stories.tsx b/src/fields/text-field/textField.stories.tsx
new file mode 100644
index 0000000..6e1ec98
--- /dev/null
+++ b/src/fields/text-field/textField.stories.tsx
@@ -0,0 +1,45 @@
+import { textField } from "./textField";
+import { TextInput } from "./TextInput.mock";
+import { formStory, meta } from "../../scenarios/StoryForm";
+
+export default {
+  ...meta,
+  title: "fields/textField",
+};
+
+export const Required = formStory({
+  args: {
+    fields: {
+      name: textField({ name: "name" }),
+    },
+    children: ({ fields }) => (
+      <TextInput field={fields.name} label="Your Name" />
+    ),
+  },
+});
+
+export const Optional = formStory({
+  args: {
+    fields: {
+      nick: textField({ name: "nick" }).optional(),
+    },
+    children: ({ fields }) => (
+      <TextInput field={fields.nick} label="Your Nick" />
+    ),
+  },
+});
+
+export const Initialized = formStory({
+  args: {
+    fields: {
+      title: textField({ name: "title" }).optional(),
+    },
+    children: ({ fields }) => (
+      <TextInput
+        field={fields.title}
+        label="Blog Post Title"
+        initialValue="How to initialize input"
+      />
+    ),
+  },
+});
diff --git a/src/hooks/use-text-field-props/useTextFieldProps.test.ts b/src/hooks/use-text-field-props/useTextFieldProps.test.ts
new file mode 100644
index 0000000..7980a41
--- /dev/null
+++ b/src/hooks/use-text-field-props/useTextFieldProps.test.ts
@@ -0,0 +1,17 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { useTextFieldProps } from "./useTextFieldProps";
+import { textField } from "../../fields";
+
+describe("useTextFieldProps()", () => {
+  it("initializes the field via options", async () => {
+    const field = textField();
+
+    const props = renderHook(() =>
+      useTextFieldProps(field, { initialValue: "hello" }),
+    );
+
+    expect(props.result.current.value).toBe("hello");
+  });
+});
diff --git a/src/hooks/use-text-field-props/useTextFieldProps.tsx b/src/hooks/use-text-field-props/useTextFieldProps.tsx
index c8625b2..b961926 100644
--- a/src/hooks/use-text-field-props/useTextFieldProps.tsx
+++ b/src/hooks/use-text-field-props/useTextFieldProps.tsx
@@ -1,7 +1,8 @@
+import { UseFieldOptions } from "form-atoms";
 import { ChangeEvent } from "react";
 
 import { FieldProps, useFieldProps } from "../";
-import { type TextField } from "../../fields";
+import type { TextField, TextFieldValue } from "../../fields";
 
 export type TextFieldProps = FieldProps<TextField>;
 
@@ -9,8 +10,12 @@ const getEventValue = (
   event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>,
 ) => event.currentTarget.value;
 
-export const useTextFieldProps = (field: TextField) =>
+export const useTextFieldProps = (
+  field: TextField,
+  options: UseFieldOptions<TextFieldValue>,
+) =>
   useFieldProps<TextField, HTMLInputElement | HTMLTextAreaElement>(
     field,
     getEventValue,
+    options,
   );