fix(useTextFieldProps): make textField initializable via options (#88)

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 />

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>
+  );
+};

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"
+      />
+    ),
+  },
+});

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");
+  });
+});

src/hooks/use-text-field-props/useTextFieldProps.tsx

@@ -1,16 +1,21 @@
+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>;
 
 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,
   );