From fcdcc6e151cc95d36140ae2366ae3c52903e32c2 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Tue, 17 Dec 2024 13:25:55 +0100
Subject: [PATCH 01/10] feat(createForm): Form with embedded context

---
 src/Form.tsx            |  4 ++--
 src/createForm.test.tsx | 51 +++++++++++++++++++++++++++++++++++++++++
 src/createForm.tsx      | 45 ++++++++++++++++++++++++++++++++++++
 3 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 src/createForm.test.tsx
 create mode 100644 src/createForm.tsx

diff --git a/src/Form.tsx b/src/Form.tsx
index b0c46d2..e47e5e5 100644
--- a/src/Form.tsx
+++ b/src/Form.tsx
@@ -15,7 +15,7 @@ import { useActionState } from "react";
 export type FormStateProps<Data, Error, ValidationError, Payload> = {
   action: (
     state: FormState<Data, Error, ValidationError>,
-    payload: Payload,
+    payload: Payload
   ) => Promise<FormState<Data, Error, ValidationError>>;
   initialData: Data;
   permalink?: string;
@@ -76,7 +76,7 @@ export function Form<Data, Error, ValidationError>({
   const [state, formAction, isPending] = useActionState(
     action,
     initial(initialData),
-    permalink,
+    permalink
   );
   const [, startTransition] = useTransition();
 
diff --git a/src/createForm.test.tsx b/src/createForm.test.tsx
new file mode 100644
index 0000000..9e04dfe
--- /dev/null
+++ b/src/createForm.test.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { describe, test, expect } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+import { act, render, screen } from "@testing-library/react";
+import { z } from "zod";
+import { createForm } from "./createForm";
+import { formAction } from "./formAction";
+
+describe("createForm", () => {
+  describe("Pending", () => {
+    test("it renders children when the action is pending", async () => {
+      const signUp = formAction
+        .input(
+          z.object({
+            email: z.string().email(),
+          })
+        )
+        .run(async () => {
+          await new Promise(() => {
+            /* never resolve */
+          });
+          return null;
+        });
+
+      const { Form, Pending } = createForm(signUp);
+
+      function SignUpForm() {
+        return (
+          <Form initialData={null}>
+            <input type="text" name="email" data-testid="email" />
+            <button type="submit" data-testid="submit" />
+            <Pending>
+              <p>Please wait...</p>
+            </Pending>
+          </Form>
+        );
+      }
+
+      render(<SignUpForm />);
+
+      const email = screen.getByTestId("email");
+      await act(() => userEvent.type(email, "form@action.com"));
+
+      const submit = screen.getByTestId("submit");
+      await act(() => userEvent.click(submit));
+
+      // @ts-expect-error
+      expect(screen.getByText("Please wait...")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/createForm.tsx b/src/createForm.tsx
new file mode 100644
index 0000000..4a93418
--- /dev/null
+++ b/src/createForm.tsx
@@ -0,0 +1,45 @@
+import React, { createContext, use, type PropsWithChildren } from "react";
+import type { FormAction, FormState } from "./createFormAction";
+import { Form, type FormMetaState } from "./Form";
+
+const FormContext = createContext<FormMetaState<
+  FormState<unknown, unknown, unknown>
+> | null>(null);
+
+const useFormContext = () => {
+  const ctx = use(FormContext);
+
+  if (!ctx) {
+    throw new Error("Form Context must be initialized before use.");
+  }
+
+  return ctx;
+};
+
+export function createForm<
+  Data,
+  Error = Data,
+  ValidationError = Record<string, never>,
+>(action: FormAction<Data, Error, ValidationError>) {
+  const ContextForm = ({
+    children,
+    ...props
+  }: PropsWithChildren<{ initialData: Data }>) => {
+    return (
+      <Form action={action} {...props}>
+        {(state) => <FormContext value={state}>{children}</FormContext>}
+      </Form>
+    );
+  };
+
+  function Pending({ children }: PropsWithChildren) {
+    const { isPending } = useFormContext();
+
+    return isPending && children;
+  }
+
+  return {
+    Form: ContextForm,
+    Pending,
+  };
+}

From 170181c75d198fd2d6b75983fad759792300f417 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Tue, 17 Dec 2024 13:34:44 +0100
Subject: [PATCH 02/10] feat(FormContext): export as public api.

---
 src/FormContext.tsx | 24 ++++++++++++++++++++++++
 src/createForm.tsx  | 26 ++++++++------------------
 src/index.ts        |  1 +
 3 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 src/FormContext.tsx

diff --git a/src/FormContext.tsx b/src/FormContext.tsx
new file mode 100644
index 0000000..77f6829
--- /dev/null
+++ b/src/FormContext.tsx
@@ -0,0 +1,24 @@
+import { createContext, use } from "react";
+import type { FormState } from "./createFormAction";
+import type { FormMetaState } from "./Form";
+
+/**
+ * A context exposing the form action state.
+ * @private You don't need to use this component directly. Use the `createForm` function instead.
+ */
+export const FormContext = createContext<FormMetaState<
+  FormState<unknown, unknown, unknown>
+> | null>(null);
+
+/**
+ * A hook to consume the form action state from the context.
+ */
+export const useFormContext = () => {
+  const ctx = use(FormContext);
+
+  if (!ctx) {
+    throw new Error("Form Context must be initialized before use.");
+  }
+
+  return ctx;
+};
diff --git a/src/createForm.tsx b/src/createForm.tsx
index 4a93418..d98820e 100644
--- a/src/createForm.tsx
+++ b/src/createForm.tsx
@@ -1,21 +1,11 @@
-import React, { createContext, use, type PropsWithChildren } from "react";
-import type { FormAction, FormState } from "./createFormAction";
-import { Form, type FormMetaState } from "./Form";
-
-const FormContext = createContext<FormMetaState<
-  FormState<unknown, unknown, unknown>
-> | null>(null);
-
-const useFormContext = () => {
-  const ctx = use(FormContext);
-
-  if (!ctx) {
-    throw new Error("Form Context must be initialized before use.");
-  }
-
-  return ctx;
-};
-
+import React, { type PropsWithChildren } from "react";
+import type { FormAction } from "./createFormAction";
+import { Form } from "./Form";
+import { FormContext, useFormContext } from "./FormContext";
+
+/**
+ * Creates a Form component which state is accessible via context - useFormContext() hook.
+ */
 export function createForm<
   Data,
   Error = Data,
diff --git a/src/index.ts b/src/index.ts
index e798621..b32d79b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,3 @@
 export * from "./createFormAction";
 export * from "./formAction";
+export * from "./FormContext";

From d2835b127006d5a9e7175122eca552dd68f26163 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Tue, 17 Dec 2024 13:43:14 +0100
Subject: [PATCH 03/10] feat(Pending): make standalone component

---
 src/Pending.test.tsx    | 51 +++++++++++++++++++++++++++++++++
 src/Pending.tsx         | 11 +++++++
 src/createForm.test.tsx | 63 ++++++++++++++++++-----------------------
 src/createForm.tsx      | 19 ++++---------
 src/index.ts            |  1 +
 5 files changed, 96 insertions(+), 49 deletions(-)
 create mode 100644 src/Pending.test.tsx
 create mode 100644 src/Pending.tsx

diff --git a/src/Pending.test.tsx b/src/Pending.test.tsx
new file mode 100644
index 0000000..eab58be
--- /dev/null
+++ b/src/Pending.test.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { describe, test, expect } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+import { act, render, screen } from "@testing-library/react";
+import { z } from "zod";
+
+import { formAction } from "./formAction";
+import { createForm } from "./createForm";
+import { Pending } from "./Pending";
+
+describe("Pending", () => {
+  test("it renders children when the action is pending", async () => {
+    const signUp = formAction
+      .input(
+        z.object({
+          email: z.string().email(),
+        })
+      )
+      .run(async () => {
+        await new Promise(() => {
+          /* never resolve */
+        });
+        return null;
+      });
+
+    const { Form } = createForm(signUp);
+
+    function SignUpForm() {
+      return (
+        <Form initialData={null}>
+          <input type="text" name="email" data-testid="email" />
+          <button type="submit" data-testid="submit" />
+          <Pending>
+            <p>Please wait...</p>
+          </Pending>
+        </Form>
+      );
+    }
+
+    render(<SignUpForm />);
+
+    const email = screen.getByTestId("email");
+    await act(() => userEvent.type(email, "form@action.com"));
+
+    const submit = screen.getByTestId("submit");
+    await act(() => userEvent.click(submit));
+
+    // @ts-expect-error
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+});
diff --git a/src/Pending.tsx b/src/Pending.tsx
new file mode 100644
index 0000000..ff1e92f
--- /dev/null
+++ b/src/Pending.tsx
@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from "react";
+import { useFormContext } from "./FormContext";
+
+/**
+ * Conditionally renders the children, when the form action is in the "pending" state.
+ */
+export function Pending({ children }: PropsWithChildren) {
+  const { isPending } = useFormContext();
+
+  return isPending && children;
+}
diff --git a/src/createForm.test.tsx b/src/createForm.test.tsx
index 9e04dfe..77f97c8 100644
--- a/src/createForm.test.tsx
+++ b/src/createForm.test.tsx
@@ -1,51 +1,42 @@
 import React from "react";
 import { describe, test, expect } from "vitest";
-import { userEvent } from "@testing-library/user-event";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { z } from "zod";
 import { createForm } from "./createForm";
 import { formAction } from "./formAction";
+import { useFormContext } from ".";
 
 describe("createForm", () => {
-  describe("Pending", () => {
-    test("it renders children when the action is pending", async () => {
-      const signUp = formAction
-        .input(
-          z.object({
-            email: z.string().email(),
-          })
-        )
-        .run(async () => {
-          await new Promise(() => {
-            /* never resolve */
-          });
-          return null;
-        });
+  test("it creates a Form which provides a context", async () => {
+    const signUp = formAction
+      .input(
+        z.object({
+          email: z.string().email(),
+        })
+      )
+      .run(async () => {
+        return null;
+      });
 
-      const { Form, Pending } = createForm(signUp);
+    const { Form } = createForm(signUp);
 
-      function SignUpForm() {
-        return (
-          <Form initialData={null}>
-            <input type="text" name="email" data-testid="email" />
-            <button type="submit" data-testid="submit" />
-            <Pending>
-              <p>Please wait...</p>
-            </Pending>
-          </Form>
-        );
-      }
+    function ContextConsumer() {
+      const state = useFormContext();
 
-      render(<SignUpForm />);
+      return state.type;
+    }
 
-      const email = screen.getByTestId("email");
-      await act(() => userEvent.type(email, "form@action.com"));
+    function SignUpForm() {
+      return (
+        <Form initialData={null}>
+          <ContextConsumer />
+        </Form>
+      );
+    }
 
-      const submit = screen.getByTestId("submit");
-      await act(() => userEvent.click(submit));
+    render(<SignUpForm />);
 
-      // @ts-expect-error
-      expect(screen.getByText("Please wait...")).toBeInTheDocument();
-    });
+    // @ts-expect-error
+    expect(screen.getByText("initial")).toBeInTheDocument();
   });
 });
diff --git a/src/createForm.tsx b/src/createForm.tsx
index d98820e..f0461a0 100644
--- a/src/createForm.tsx
+++ b/src/createForm.tsx
@@ -1,7 +1,7 @@
 import React, { type PropsWithChildren } from "react";
 import type { FormAction } from "./createFormAction";
-import { Form } from "./Form";
-import { FormContext, useFormContext } from "./FormContext";
+import { Form as BaseForm } from "./Form";
+import { FormContext } from "./FormContext";
 
 /**
  * Creates a Form component which state is accessible via context - useFormContext() hook.
@@ -11,25 +11,18 @@ export function createForm<
   Error = Data,
   ValidationError = Record<string, never>,
 >(action: FormAction<Data, Error, ValidationError>) {
-  const ContextForm = ({
+  const Form = ({
     children,
     ...props
   }: PropsWithChildren<{ initialData: Data }>) => {
     return (
-      <Form action={action} {...props}>
+      <BaseForm action={action} {...props}>
         {(state) => <FormContext value={state}>{children}</FormContext>}
-      </Form>
+      </BaseForm>
     );
   };
 
-  function Pending({ children }: PropsWithChildren) {
-    const { isPending } = useFormContext();
-
-    return isPending && children;
-  }
-
   return {
-    Form: ContextForm,
-    Pending,
+    Form,
   };
 }
diff --git a/src/index.ts b/src/index.ts
index b32d79b..a1fdbc8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
 export * from "./createFormAction";
 export * from "./formAction";
 export * from "./FormContext";
+export * from "./Pending";

From ab7801e6ec40cf7a07c2f74afe73a6d963240bf9 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Wed, 18 Dec 2024 11:16:49 +0100
Subject: [PATCH 04/10] fix: export context & Pending as client components

---
 src/client.ts | 2 ++
 src/index.ts  | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/client.ts b/src/client.ts
index fb907c8..c1c6970 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -1,4 +1,6 @@
 "use client";
 export * from "./Form";
+export * from "./FormContext";
 export * from "./FormStatus";
+export * from "./Pending";
 export * from "./ZodFieldError";
diff --git a/src/index.ts b/src/index.ts
index a1fdbc8..8967e10 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,3 @@
+export * from "./createForm";
 export * from "./createFormAction";
 export * from "./formAction";
-export * from "./FormContext";
-export * from "./Pending";

From 658fe5e3d90fad3eef7c2a5f56a70586896930fb Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Thu, 19 Dec 2024 15:11:31 +0100
Subject: [PATCH 05/10] feat(createForm): Build form with a context

---
 README.md               | 55 ++++++++++++++++++++++++++++++++++++++---
 package-lock.json       |  4 +--
 package.json            |  2 +-
 src/FormContext.tsx     |  2 ++
 src/client.ts           |  2 ++
 src/createForm.test.tsx |  2 +-
 src/createForm.tsx      |  2 ++
 src/index.ts            |  1 -
 8 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 23ef58c..d3c1ddb 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,11 @@ End-to-end typesafe success, error & validation state control for Next.js 14 for
 - ✅ `<Form />` component reads the action's response.
 - ✅ Computes progress meta-state like `isInvalid`, `isSuccess` and more.
 
+**Context**
+
+- ✅ Access the action state via `useFormContext()` hook.
+- ✅ Keeps JSX markup free of render-props.
+
 ## Install
 
 ```
@@ -50,7 +55,7 @@ const i18nMiddleware = async () => {
 const authAction = formAction
   .use(i18nMiddleware)
   .use(async ({ ctx: { t } }) =>
-    console.log("🎉 context enhanced by previous middlewares 🎉", t),
+    console.log("🎉 context enhanced by previous middlewares 🎉", t)
   )
   .error(({ error }) => {
     if (error instanceof DbError) {
@@ -85,7 +90,7 @@ export const signUp = authAction
       .refine((data) => data.password === data.confirm, {
         message: "Passwords don't match",
         path: ["confirm"],
-      }),
+      })
   ) // if using refinement, only one input call is permited, as schema with ZodEffects is not extendable.
   .run(async ({ ctx: { t }, input: { email, password } }) => {
     // 🎉 passwords match!
@@ -161,7 +166,7 @@ export const updateUser = createFormAction<
 
       return failure({ message: "Failed to update user." });
     }
-  },
+  }
 );
 ```
 
@@ -206,6 +211,50 @@ export function UpdateUserForm() {
 }
 ```
 
+### Context Form
+
+```tsx
+// Example route: /app/auth/signup/SignUpForm.tsx
+"use client";
+
+import { createForm, Pending, useFormContext } from "react-form-action/client";
+import { signupAction } from "./actions";
+
+// This call will succeed only in client component
+const { Form } = createForm(signupAction);
+
+function Error() {
+  // read any state from the FormContext:
+  const {
+    error,
+    data,
+    validationError,
+    isPending,
+    isFailure,
+    isInvalid,
+    isSuccess,
+    isInitial
+  } = useFormContext();
+
+  return isFailure && "Failed to submit". // use the error somehow
+}
+
+// render this form on your RSC page (/app/auth/signup/page.tsx)
+export function SignupForm() {
+  // This Form does not use render props.
+  return (
+    <Form>
+      <input name="email" />
+      <input name="password" />
+      <Pending>
+        {/* This renders only when the action is pending. */}
+        <p>Please wait...</p>
+      </Pending>
+    </Form>
+  );
+}
+```
+
 ### `<ZodFieldError>` Component
 
 Actions created with `formAction` builder will have the `validationError` of [`ZodFormattedError`](https://zod.dev/ERROR_HANDLING?id=formatting-errors) type.
diff --git a/package-lock.json b/package-lock.json
index 625e629..ea0d949 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-form-action",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "react-form-action",
-      "version": "1.2.3",
+      "version": "1.3.0",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/dom": "^10.4.0",
diff --git a/package.json b/package.json
index f4a4bb8..86a3a02 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
diff --git a/src/FormContext.tsx b/src/FormContext.tsx
index 77f6829..e9ca414 100644
--- a/src/FormContext.tsx
+++ b/src/FormContext.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, use } from "react";
 import type { FormState } from "./createFormAction";
 import type { FormMetaState } from "./Form";
diff --git a/src/client.ts b/src/client.ts
index c1c6970..907af86 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -1,4 +1,6 @@
 "use client";
+
+export * from "./createForm";
 export * from "./Form";
 export * from "./FormContext";
 export * from "./FormStatus";
diff --git a/src/createForm.test.tsx b/src/createForm.test.tsx
index 77f97c8..7c514ce 100644
--- a/src/createForm.test.tsx
+++ b/src/createForm.test.tsx
@@ -4,7 +4,7 @@ import { render, screen } from "@testing-library/react";
 import { z } from "zod";
 import { createForm } from "./createForm";
 import { formAction } from "./formAction";
-import { useFormContext } from ".";
+import { useFormContext } from "./FormContext";
 
 describe("createForm", () => {
   test("it creates a Form which provides a context", async () => {
diff --git a/src/createForm.tsx b/src/createForm.tsx
index f0461a0..3b92437 100644
--- a/src/createForm.tsx
+++ b/src/createForm.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { type PropsWithChildren } from "react";
 import type { FormAction } from "./createFormAction";
 import { Form as BaseForm } from "./Form";
diff --git a/src/index.ts b/src/index.ts
index 8967e10..e798621 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,2 @@
-export * from "./createForm";
 export * from "./createFormAction";
 export * from "./formAction";

From b88d30afa955e9e06f3ea25a1d3da70c6f86cd04 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 20 Dec 2024 14:34:14 +0100
Subject: [PATCH 06/10] feat(Action): access action state by context

Enables reading action state outside of <form> element
---
 package-lock.json       |   4 +-
 package.json            |   2 +-
 src/Action.test.tsx     |  50 ++++++++++++++++
 src/Action.tsx          | 127 ++++++++++++++++++++++++++++++++++++++++
 src/ActionForm.tsx      |  34 +++++++++++
 src/Form.test.tsx       |   6 +-
 src/Form.tsx            |  17 +++---
 src/FormContext.tsx     |   4 +-
 src/createFormAction.ts |  16 ++---
 src/formAction.test.ts  |  22 +++----
 src/formAction.ts       |  44 +++++++-------
 11 files changed, 269 insertions(+), 57 deletions(-)
 create mode 100644 src/Action.test.tsx
 create mode 100644 src/Action.tsx
 create mode 100644 src/ActionForm.tsx

diff --git a/package-lock.json b/package-lock.json
index ea0d949..ecbd8d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-form-action",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "react-form-action",
-      "version": "1.3.0",
+      "version": "1.4.0",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/dom": "^10.4.0",
diff --git a/package.json b/package.json
index 86a3a02..1159c8c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
diff --git a/src/Action.test.tsx b/src/Action.test.tsx
new file mode 100644
index 0000000..6e30333
--- /dev/null
+++ b/src/Action.test.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { describe, test, expect } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+import { act, render, screen } from "@testing-library/react";
+import { z } from "zod";
+import { Action, useActionContext } from "./Action";
+import { formAction } from "./formAction";
+import { ActionForm } from "./ActionForm";
+
+describe("Action", () => {
+  test("it enables form to consume action via context", async () => {
+    function ValidationError() {
+      const { isInvalid } = useActionContext();
+
+      return isInvalid && <p>Invalid email</p>;
+    }
+
+    const subscribeAction = formAction
+      .input(
+        z.object({
+          email: z.string().email(),
+        })
+      )
+      .run(async () => {
+        return null;
+      });
+
+    function SubscribeForm() {
+      return (
+        <Action action={subscribeAction} initialData={null}>
+          <ActionForm>
+            <input type="text" name="email" data-testid="email" />
+            <button type="submit" data-testid="submit" />
+          </ActionForm>
+          <ValidationError />
+        </Action>
+      );
+    }
+
+    render(<SubscribeForm />);
+
+    await act(() => userEvent.type(screen.getByTestId("email"), "fake"));
+    await act(() => userEvent.click(screen.getByTestId("submit")));
+
+    expect(
+      screen.getByText("Invalid email")
+      // @ts-expect-error
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/Action.tsx b/src/Action.tsx
new file mode 100644
index 0000000..87ff534
--- /dev/null
+++ b/src/Action.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import React, { type PropsWithChildren } from "react";
+import { createContext, use } from "react";
+import type {
+  ActionState,
+  InitialState,
+  InvalidState,
+  FailureState,
+  SuccessState,
+  FormAction,
+} from "./createFormAction";
+import { useActionState } from "react";
+
+export type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
+  action: FormAction<Data, Error, ValidationError>;
+  initialData: Data;
+  permalink?: string;
+}>;
+
+export function initial<Data>(data: Data): InitialState<Data> {
+  return { type: "initial", data, error: null, validationError: null };
+}
+
+type ActionStatusFlags<
+  T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown,
+> = {
+  isInitial: T extends "initial" ? true : false;
+  isInvalid: T extends "invalid" ? true : false;
+  isFailure: T extends "failure" ? true : false;
+  isSuccess: T extends "success" ? true : false;
+};
+
+export type ActionContextState<
+  T extends ActionState<unknown, unknown, unknown>,
+> = T &
+  ActionStatusFlags<T["type"]> & {
+    /**
+     * The dispatch function returned from React.useActionState()
+     */
+    action: (payload: FormData) => void;
+    isPending: boolean;
+  };
+
+// & RenderProp<
+//   | ActionContextState<InitialState<Data>>
+//   | ActionContextState<InvalidState<ValidationError>>
+//   | ActionContextState<FailureState<Error>>
+//   | ActionContextState<SuccessState<Data>>
+// >;
+
+const neverMetaState: ActionStatusFlags = {
+  isInitial: false,
+  isInvalid: false,
+  isFailure: false,
+  isSuccess: false,
+};
+
+/**
+ * A context exposing the form action state.
+ */
+const ActionContext = createContext<ActionContextState<
+  ActionState<unknown, unknown, unknown>
+> | null>(null);
+
+/**
+ * A hook to consume the form action state from the context.
+ */
+export const useActionContext = () => {
+  const ctx = use(ActionContext);
+
+  if (!ctx) {
+    throw new Error(
+      "ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?"
+    );
+  }
+
+  return ctx;
+};
+
+export function Action<Data, Error, ValidationError>({
+  children,
+  action: formAction,
+  initialData,
+  permalink,
+}: ActionProps<Data, Error, ValidationError>) {
+  const [state, action, isPending] = useActionState(
+    formAction,
+    initial(initialData),
+    permalink
+  );
+
+  const metaState =
+    state.type === "initial"
+      ? {
+          ...state,
+          ...neverMetaState,
+          action,
+          isPending,
+          isInitial: true as const,
+        }
+      : state.type === "invalid"
+        ? {
+            ...state,
+            ...neverMetaState,
+            action,
+            isPending,
+            isInvalid: true as const,
+          }
+        : state.type === "failure"
+          ? {
+              ...state,
+              ...neverMetaState,
+              action,
+              isPending,
+              isFailure: true as const,
+            }
+          : {
+              ...state,
+              ...neverMetaState,
+              action,
+              isPending,
+              isSuccess: true as const,
+            };
+
+  return <ActionContext value={metaState}>{children}</ActionContext>;
+}
diff --git a/src/ActionForm.tsx b/src/ActionForm.tsx
new file mode 100644
index 0000000..3f8518c
--- /dev/null
+++ b/src/ActionForm.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import React, { startTransition } from "react";
+import type { FormHTMLAttributes, FormEvent } from "react";
+
+import { useActionContext } from "./Action";
+
+export type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action"> & {
+  /**
+   * Opt-in into automatic form reset by using the form "action" prop.
+   * By default, the onSubmit with a custom transition which opts-out of the implicit form reset.
+   * See for more. https://github.com/facebook/react/issues/29034
+   * @default false
+   */
+  autoReset?: boolean;
+};
+
+export function ActionForm({ autoReset = false, ...props }: FormProps) {
+  const { action } = useActionContext();
+
+  const submitStrategy = autoReset
+    ? { action }
+    : {
+        onSubmit: (event: FormEvent<HTMLFormElement>) => {
+          event.preventDefault();
+          const form = event.currentTarget;
+          startTransition(() => {
+            action(new FormData(form));
+          });
+        },
+      };
+
+  return <form {...submitStrategy} {...props} />;
+}
diff --git a/src/Form.test.tsx b/src/Form.test.tsx
index 049aede..08276fe 100644
--- a/src/Form.test.tsx
+++ b/src/Form.test.tsx
@@ -21,7 +21,7 @@ describe("Form", () => {
           })
           .refine((data) => data.password === data.confirm, {
             message: "Passwords don't match",
-          }),
+          })
       )
       .run(async () => {
         // implementation
@@ -72,11 +72,11 @@ describe("Form", () => {
     // @ts-expect-error
     expect(screen.getByText("Passwords don't match")).toBeInTheDocument();
     expect(
-      screen.getByText("Invalid email"),
+      screen.getByText("Invalid email")
       // @ts-expect-error
     ).toBeInTheDocument();
     expect(
-      screen.getByText("String must contain at least 8 character(s)"),
+      screen.getByText("String must contain at least 8 character(s)")
       // @ts-expect-error
     ).toBeInTheDocument();
   });
diff --git a/src/Form.tsx b/src/Form.tsx
index e47e5e5..6c842f2 100644
--- a/src/Form.tsx
+++ b/src/Form.tsx
@@ -4,7 +4,7 @@ import React, { useTransition } from "react";
 import type { FormHTMLAttributes, FormEvent } from "react";
 import type { RenderProp } from "react-render-prop-type";
 import type {
-  FormState,
+  ActionState,
   InitialState,
   InvalidState,
   FailureState,
@@ -14,9 +14,9 @@ import { useActionState } from "react";
 
 export type FormStateProps<Data, Error, ValidationError, Payload> = {
   action: (
-    state: FormState<Data, Error, ValidationError>,
+    state: ActionState<Data, Error, ValidationError>,
     payload: Payload
-  ) => Promise<FormState<Data, Error, ValidationError>>;
+  ) => Promise<ActionState<Data, Error, ValidationError>>;
   initialData: Data;
   permalink?: string;
   /**
@@ -33,7 +33,7 @@ export function initial<Data>(data: Data): InitialState<Data> {
 }
 
 type FormStatusFlags<
-  T extends FormState<unknown, unknown, unknown>["type"] | unknown = unknown,
+  T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown,
 > = {
   isInitial: T extends "initial" ? true : false;
   isInvalid: T extends "invalid" ? true : false;
@@ -41,10 +41,11 @@ type FormStatusFlags<
   isSuccess: T extends "success" ? true : false;
 };
 
-export type FormMetaState<T extends FormState<unknown, unknown, unknown>> = T &
-  FormStatusFlags<T["type"]> & {
-    isPending: boolean;
-  };
+export type FormMetaState<T extends ActionState<unknown, unknown, unknown>> =
+  T &
+    FormStatusFlags<T["type"]> & {
+      isPending: boolean;
+    };
 
 export type FormProps<Data, Error, ValidationError> = Omit<
   FormHTMLAttributes<HTMLFormElement>,
diff --git a/src/FormContext.tsx b/src/FormContext.tsx
index e9ca414..e4af136 100644
--- a/src/FormContext.tsx
+++ b/src/FormContext.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext, use } from "react";
-import type { FormState } from "./createFormAction";
+import type { ActionState } from "./createFormAction";
 import type { FormMetaState } from "./Form";
 
 /**
@@ -9,7 +9,7 @@ import type { FormMetaState } from "./Form";
  * @private You don't need to use this component directly. Use the `createForm` function instead.
  */
 export const FormContext = createContext<FormMetaState<
-  FormState<unknown, unknown, unknown>
+  ActionState<unknown, unknown, unknown>
 > | null>(null);
 
 /**
diff --git a/src/createFormAction.ts b/src/createFormAction.ts
index 2f99aea..c2bef31 100644
--- a/src/createFormAction.ts
+++ b/src/createFormAction.ts
@@ -26,7 +26,7 @@ export type SuccessState<T> = {
   validationError: null;
 };
 
-export type FormState<Data, Error, ValidationError = Record<string, never>> =
+export type ActionState<Data, Error, ValidationError = Record<string, never>> =
   | InitialState<Data>
   | InvalidState<ValidationError>
   | FailureState<Error>
@@ -38,9 +38,9 @@ export type FormAction<
   ValidationError = Record<string, never>,
   Payload = FormData,
 > = (
-  state: FormState<Data, Error, ValidationError>,
-  payload: Payload,
-) => Promise<FormState<Data, Error, ValidationError>>;
+  state: ActionState<Data, Error, ValidationError>,
+  payload: Payload
+) => Promise<ActionState<Data, Error, ValidationError>>;
 
 export function createFormAction<
   Data,
@@ -52,9 +52,9 @@ export function createFormAction<
     success: (data: Data) => SuccessState<Data>;
     failure: (error: Error) => FailureState<Error>;
     invalid: (
-      validationError: ValidationError,
+      validationError: ValidationError
     ) => InvalidState<ValidationError>;
-  }) => FormAction<Data, Error, ValidationError, Payload>,
+  }) => FormAction<Data, Error, ValidationError, Payload>
 ) {
   function success(data: Data): SuccessState<Data> {
     return { type: "success", data, error: null, validationError: null };
@@ -63,11 +63,11 @@ export function createFormAction<
     return { type: "failure", data: null, error, validationError: null };
   }
   function invalid(
-    validationError: ValidationError,
+    validationError: ValidationError
   ): InvalidState<ValidationError> {
     return { type: "invalid", data: null, error: null, validationError };
   }
 
-  return (state: FormState<Data, Error, ValidationError>, payload: Payload) =>
+  return (state: ActionState<Data, Error, ValidationError>, payload: Payload) =>
     formAction({ success, failure, invalid })(state, payload);
 }
diff --git a/src/formAction.test.ts b/src/formAction.test.ts
index c7961eb..354a334 100644
--- a/src/formAction.test.ts
+++ b/src/formAction.test.ts
@@ -16,7 +16,7 @@ describe("formAction", () => {
     const result = await formAction.run(async () => 42)(
       // @ts-expect-error undefined is ok, we don't use initial state
       undefined,
-      undefined,
+      undefined
     );
 
     expect(result).toHaveProperty("type", "success");
@@ -30,7 +30,7 @@ describe("formAction", () => {
     });
 
     await expect(() =>
-      action(initial(null), new FormData()),
+      action(initial(null), new FormData())
     ).rejects.toThrowError();
   });
 
@@ -58,7 +58,7 @@ describe("formAction", () => {
       });
       const failedWithNumber = await throwsNumber(
         initial(null),
-        new FormData(),
+        new FormData()
       );
       expect(failedWithNumber).toHaveProperty("type", "failure");
       expect(failedWithNumber).toHaveProperty("error", "unknown");
@@ -98,7 +98,7 @@ describe("formAction", () => {
       await formAction.run(handler)(
         // @ts-expect-error undefined is ok, we don't use initial state
         undefined,
-        formData,
+        formData
       );
 
       expect(handler).toBeCalledWith({ ctx: { formData } });
@@ -124,7 +124,7 @@ describe("formAction", () => {
     const action = formAction.input(
       z.object({
         allright: zfd.checkbox(),
-      }),
+      })
     );
 
     describe("formData parsing", () => {
@@ -132,7 +132,7 @@ describe("formAction", () => {
         .input(
           z.object({
             user: z.object({ name: z.string().min(3) }),
-          }),
+          })
         )
         .run(async ({ input }) => input);
 
@@ -144,7 +144,7 @@ describe("formAction", () => {
         const result = await nestedObjectInput(
           // @ts-expect-error undefined is ok
           undefined,
-          formData,
+          formData
         );
 
         expect(result).toHaveProperty("type", "success");
@@ -164,7 +164,7 @@ describe("formAction", () => {
         const result = await nestedObjectInput(
           // @ts-expect-error undefined is ok
           undefined,
-          formData,
+          formData
         );
 
         expect(result).toHaveProperty("type", "invalid");
@@ -197,11 +197,11 @@ describe("formAction", () => {
 
       const result = await foo.run(
         async ({ input: { age, allright } }) =>
-          `You are ${age} y.o. and feeling ${allright ? "ok" : "ko"}`,
+          `You are ${age} y.o. and feeling ${allright ? "ok" : "ko"}`
       )(
         // @ts-expect-error undefined is ok
         undefined,
-        formData,
+        formData
       );
 
       expect(result).toHaveProperty("type", "success");
@@ -230,7 +230,7 @@ describe("formAction", () => {
         .run(async ({ input }) => {})(
         // @ts-expect-error
         undefined,
-        formData,
+        formData
       );
 
       expect(result).toHaveProperty("validationError", {
diff --git a/src/formAction.ts b/src/formAction.ts
index 2481316..ed0255b 100644
--- a/src/formAction.ts
+++ b/src/formAction.ts
@@ -13,7 +13,7 @@ import {
   FailureState,
   InvalidState,
   SuccessState,
-  FormState,
+  ActionState,
 } from "./createFormAction";
 import { zfd } from "zod-form-data";
 
@@ -65,7 +65,7 @@ type FormActionBuilder<
               ? "Your input contains effect which prevents merging it with the previous inputs."
               : T
             : T
-      : "The schema output must be an object.",
+      : "The schema output must be an object."
   ) => FormActionBuilder<
     Schema extends ZodObject<infer O1 extends ZodRawShape>
       ? // merging won't work for effects, but that is sanitized in input parameter
@@ -83,10 +83,10 @@ type FormActionBuilder<
    */
   run: Schema extends ZodTypeAny
     ? <Data>(
-        action: SchemaAction<Data, Context, Schema>,
+        action: SchemaAction<Data, Context, Schema>
       ) => (
-        state: FormState<Data, Err, z.inferFormattedError<Schema>>,
-        payload: FormData,
+        state: ActionState<Data, Err, z.inferFormattedError<Schema>>,
+        payload: FormData
       ) => Promise<
         Flatten<
           | InvalidState<z.inferFormattedError<Schema>>
@@ -95,10 +95,10 @@ type FormActionBuilder<
         >
       >
     : <Data>(
-        action: Action<Data, Context>,
+        action: Action<Data, Context>
       ) => (
-        state: FormState<Data, Err>,
-        payload: FormData,
+        state: ActionState<Data, Err>,
+        payload: FormData
       ) => Promise<Flatten<FailureState<Err> | SuccessState<Data>>>;
   /**
    * A chainable context enhancing helper.
@@ -106,7 +106,7 @@ type FormActionBuilder<
    * @returns FormActionBuilder
    */
   use: <NewContext extends Record<string, unknown>>(
-    middleware: ({ ctx }: { ctx: Context }) => Promise<NewContext>,
+    middleware: ({ ctx }: { ctx: Context }) => Promise<NewContext>
   ) => FormActionBuilder<Schema, Err, Context & NewContext>;
   /**
    * A chainable error handler to handle errors thrown while running the action passed to .run().
@@ -115,7 +115,7 @@ type FormActionBuilder<
    * @returns FormActionBuilder
    */
   error: <Err>(
-    processError: (params: { error: unknown; ctx: Context }) => Err,
+    processError: (params: { error: unknown; ctx: Context }) => Err
   ) => FormActionBuilder<Schema, Err, Context>;
 };
 
@@ -127,7 +127,7 @@ function formActionBuilder<
 >(
   schema: Schema,
   middleware: MiddlewareFn<Context, NewContext>[] = [],
-  processError?: (params: { error: unknown; ctx: Context }) => Err,
+  processError?: (params: { error: unknown; ctx: Context }) => Err
 ): FormActionBuilder<Schema, Err, Context> {
   async function createContext(formData: FormData) {
     let ctx = { formData } as Context;
@@ -174,7 +174,7 @@ function formActionBuilder<
 
                 if (!result.success) {
                   return invalid(
-                    result.error.format() as z.inferFormattedError<RealSchema>,
+                    result.error.format() as z.inferFormattedError<RealSchema>
                   );
                 }
 
@@ -190,7 +190,7 @@ function formActionBuilder<
                   throw error;
                 }
               };
-            },
+            }
           );
         };
 
@@ -200,15 +200,15 @@ function formActionBuilder<
         return formActionBuilder<T, Err, Context & NewContext>(
           newInput,
           middleware,
-          processError,
+          processError
         );
       } else if (schema._def.effect) {
         throw new Error(
-          "Previous input is not augmentable because it contains an effect.",
+          "Previous input is not augmentable because it contains an effect."
         );
       } else if (newInput._def.effect) {
         throw new Error(
-          "Your input contains effect which prevents merging it with the previous inputs.",
+          "Your input contains effect which prevents merging it with the previous inputs."
         );
       } else if (schema._def.typeName === ZodFirstPartyTypeKind.ZodObject) {
         // @ts-ignore
@@ -216,30 +216,30 @@ function formActionBuilder<
 
         return formActionBuilder<typeof merged, Err, Context & NewContext>(
           merged,
-          middleware,
+          middleware
         );
       } else {
         throw Error(
-          "Merging inputs works only for object schemas without effects.",
+          "Merging inputs works only for object schemas without effects."
         );
       }
     },
     use<NewContext extends Record<string, unknown>>(
-      newMiddleware: ({ ctx }: { ctx: Context }) => Promise<NewContext>,
+      newMiddleware: ({ ctx }: { ctx: Context }) => Promise<NewContext>
     ) {
       return formActionBuilder<Schema, Err, Context & NewContext>(
         schema,
         [...middleware, newMiddleware],
-        processError,
+        processError
       );
     },
     error<Err>(
-      processError: (params: { error: unknown; ctx: Context }) => Err,
+      processError: (params: { error: unknown; ctx: Context }) => Err
     ) {
       return formActionBuilder<Schema, Err, Context>(
         schema,
         middleware,
-        processError,
+        processError
       );
     },
     run: schema === emptyInput ? run : runSchema,

From 6208c33f4498d813e83048aa06dd6664b7cbef36 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 20 Dec 2024 14:39:51 +0100
Subject: [PATCH 07/10] fix(Action): export client components

---
 package-lock.json  |  4 ++--
 package.json       |  2 +-
 src/Action.tsx     | 18 ++----------------
 src/ActionForm.tsx |  7 +++++--
 src/client.ts      |  2 ++
 5 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ecbd8d4..cea602d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-form-action",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "react-form-action",
-      "version": "1.4.0",
+      "version": "1.4.1",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/dom": "^10.4.0",
diff --git a/package.json b/package.json
index 1159c8c..6adfc16 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
diff --git a/src/Action.tsx b/src/Action.tsx
index 87ff534..1545f0c 100644
--- a/src/Action.tsx
+++ b/src/Action.tsx
@@ -2,14 +2,7 @@
 
 import React, { type PropsWithChildren } from "react";
 import { createContext, use } from "react";
-import type {
-  ActionState,
-  InitialState,
-  InvalidState,
-  FailureState,
-  SuccessState,
-  FormAction,
-} from "./createFormAction";
+import type { ActionState, InitialState, FormAction } from "./createFormAction";
 import { useActionState } from "react";
 
 export type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
@@ -18,7 +11,7 @@ export type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
   permalink?: string;
 }>;
 
-export function initial<Data>(data: Data): InitialState<Data> {
+function initial<Data>(data: Data): InitialState<Data> {
   return { type: "initial", data, error: null, validationError: null };
 }
 
@@ -42,13 +35,6 @@ export type ActionContextState<
     isPending: boolean;
   };
 
-// & RenderProp<
-//   | ActionContextState<InitialState<Data>>
-//   | ActionContextState<InvalidState<ValidationError>>
-//   | ActionContextState<FailureState<Error>>
-//   | ActionContextState<SuccessState<Data>>
-// >;
-
 const neverMetaState: ActionStatusFlags = {
   isInitial: false,
   isInvalid: false,
diff --git a/src/ActionForm.tsx b/src/ActionForm.tsx
index 3f8518c..f818f7e 100644
--- a/src/ActionForm.tsx
+++ b/src/ActionForm.tsx
@@ -5,7 +5,10 @@ import type { FormHTMLAttributes, FormEvent } from "react";
 
 import { useActionContext } from "./Action";
 
-export type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action"> & {
+export type ActionFormProps = Omit<
+  FormHTMLAttributes<HTMLFormElement>,
+  "action"
+> & {
   /**
    * Opt-in into automatic form reset by using the form "action" prop.
    * By default, the onSubmit with a custom transition which opts-out of the implicit form reset.
@@ -15,7 +18,7 @@ export type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action"> & {
   autoReset?: boolean;
 };
 
-export function ActionForm({ autoReset = false, ...props }: FormProps) {
+export function ActionForm({ autoReset = false, ...props }: ActionFormProps) {
   const { action } = useActionContext();
 
   const submitStrategy = autoReset
diff --git a/src/client.ts b/src/client.ts
index 907af86..438337f 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -1,5 +1,7 @@
 "use client";
 
+export * from "./Action";
+export * from "./ActionForm";
 export * from "./createForm";
 export * from "./Form";
 export * from "./FormContext";

From 16ee7183e2c3599b9abb6df44998d52888ae0eb2 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 20 Dec 2024 17:46:46 +0100
Subject: [PATCH 08/10] feat(createComponents): Bound the ZodFieldError with
 context

---
 package-lock.json        |  4 ++--
 package.json             |  2 +-
 src/Action.test.tsx      | 12 +++++-------
 src/Action.tsx           | 33 ++++++++++++++++++++++++-------
 src/Pending.test.tsx     | 21 ++++++++++----------
 src/Pending.tsx          |  4 ++--
 src/client.ts            |  2 +-
 src/createComponents.tsx | 32 ++++++++++++++++++++++++++++++
 src/createForm.test.tsx  | 42 ----------------------------------------
 src/createForm.tsx       | 30 ----------------------------
 10 files changed, 80 insertions(+), 102 deletions(-)
 create mode 100644 src/createComponents.tsx
 delete mode 100644 src/createForm.test.tsx
 delete mode 100644 src/createForm.tsx

diff --git a/package-lock.json b/package-lock.json
index cea602d..a0120e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-form-action",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "react-form-action",
-      "version": "1.4.1",
+      "version": "1.5.0",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/dom": "^10.4.0",
diff --git a/package.json b/package.json
index 6adfc16..f915d43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
diff --git a/src/Action.test.tsx b/src/Action.test.tsx
index 6e30333..ab868f4 100644
--- a/src/Action.test.tsx
+++ b/src/Action.test.tsx
@@ -7,14 +7,10 @@ import { Action, useActionContext } from "./Action";
 import { formAction } from "./formAction";
 import { ActionForm } from "./ActionForm";
 
+import { createComponents } from "./createComponents";
+
 describe("Action", () => {
   test("it enables form to consume action via context", async () => {
-    function ValidationError() {
-      const { isInvalid } = useActionContext();
-
-      return isInvalid && <p>Invalid email</p>;
-    }
-
     const subscribeAction = formAction
       .input(
         z.object({
@@ -25,14 +21,16 @@ describe("Action", () => {
         return null;
       });
 
+    const { FieldError } = createComponents(subscribeAction);
+
     function SubscribeForm() {
       return (
         <Action action={subscribeAction} initialData={null}>
           <ActionForm>
             <input type="text" name="email" data-testid="email" />
+            <FieldError name="email" />
             <button type="submit" data-testid="submit" />
           </ActionForm>
-          <ValidationError />
         </Action>
       );
     }
diff --git a/src/Action.tsx b/src/Action.tsx
index 1545f0c..c44cd5e 100644
--- a/src/Action.tsx
+++ b/src/Action.tsx
@@ -2,7 +2,14 @@
 
 import React, { type PropsWithChildren } from "react";
 import { createContext, use } from "react";
-import type { ActionState, InitialState, FormAction } from "./createFormAction";
+import type {
+  ActionState,
+  InitialState,
+  InvalidState,
+  SuccessState,
+  FailureState,
+  FormAction,
+} from "./createFormAction";
 import { useActionState } from "react";
 
 export type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
@@ -42,17 +49,28 @@ const neverMetaState: ActionStatusFlags = {
   isSuccess: false,
 };
 
+/**
+ * NOTE: ActionContextState<ActionState<...>> would not allow discriminate the union inside of the ActionState.
+ */
+type SpreadActionContext<
+  Data = unknown,
+  Error = unknown,
+  ValidationError = unknown,
+> =
+  | ActionContextState<InitialState<Data>>
+  | ActionContextState<InvalidState<ValidationError>>
+  | ActionContextState<FailureState<Error>>
+  | ActionContextState<SuccessState<Data>>;
+
 /**
  * A context exposing the form action state.
  */
-const ActionContext = createContext<ActionContextState<
-  ActionState<unknown, unknown, unknown>
-> | null>(null);
+const ActionContext = createContext<SpreadActionContext | null>(null);
 
 /**
  * A hook to consume the form action state from the context.
  */
-export const useActionContext = () => {
+export function useActionContext<Data, Error, ValidationError>() {
   const ctx = use(ActionContext);
 
   if (!ctx) {
@@ -61,8 +79,9 @@ export const useActionContext = () => {
     );
   }
 
-  return ctx;
-};
+  // Generics shouldn't be used for explicit casts, I know
+  return ctx as SpreadActionContext<Data, Error, ValidationError>;
+}
 
 export function Action<Data, Error, ValidationError>({
   children,
diff --git a/src/Pending.test.tsx b/src/Pending.test.tsx
index eab58be..11fce1e 100644
--- a/src/Pending.test.tsx
+++ b/src/Pending.test.tsx
@@ -4,9 +4,10 @@ import { userEvent } from "@testing-library/user-event";
 import { act, render, screen } from "@testing-library/react";
 import { z } from "zod";
 
+import { Action } from "./Action";
 import { formAction } from "./formAction";
-import { createForm } from "./createForm";
 import { Pending } from "./Pending";
+import { ActionForm } from "./ActionForm";
 
 describe("Pending", () => {
   test("it renders children when the action is pending", async () => {
@@ -23,17 +24,17 @@ describe("Pending", () => {
         return null;
       });
 
-    const { Form } = createForm(signUp);
-
     function SignUpForm() {
       return (
-        <Form initialData={null}>
-          <input type="text" name="email" data-testid="email" />
-          <button type="submit" data-testid="submit" />
-          <Pending>
-            <p>Please wait...</p>
-          </Pending>
-        </Form>
+        <Action action={signUp} initialData={null}>
+          <ActionForm>
+            <input type="text" name="email" data-testid="email" />
+            <button type="submit" data-testid="submit" />
+            <Pending>
+              <p>Please wait...</p>
+            </Pending>
+          </ActionForm>
+        </Action>
       );
     }
 
diff --git a/src/Pending.tsx b/src/Pending.tsx
index ff1e92f..ac8e98c 100644
--- a/src/Pending.tsx
+++ b/src/Pending.tsx
@@ -1,11 +1,11 @@
 import { type PropsWithChildren } from "react";
-import { useFormContext } from "./FormContext";
+import { useActionContext } from "./Action";
 
 /**
  * Conditionally renders the children, when the form action is in the "pending" state.
  */
 export function Pending({ children }: PropsWithChildren) {
-  const { isPending } = useFormContext();
+  const { isPending } = useActionContext();
 
   return isPending && children;
 }
diff --git a/src/client.ts b/src/client.ts
index 438337f..d102abb 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -2,7 +2,7 @@
 
 export * from "./Action";
 export * from "./ActionForm";
-export * from "./createForm";
+export * from "./createComponents";
 export * from "./Form";
 export * from "./FormContext";
 export * from "./FormStatus";
diff --git a/src/createComponents.tsx b/src/createComponents.tsx
new file mode 100644
index 0000000..faf5742
--- /dev/null
+++ b/src/createComponents.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React, { type PropsWithChildren } from "react";
+import { type ZodFormattedError } from "zod";
+import type { FormAction } from "./createFormAction";
+import { useActionContext } from "./Action";
+import { InferZodErrorPaths, ZodFieldError } from "./ZodFieldError";
+
+/**
+ * Creates a typed components for actions created with the formAction builder.
+ */
+export function createComponents<
+  Data,
+  Error,
+  ValidationError extends ZodFormattedError<any>,
+>(action: FormAction<Data, Error, ValidationError>) {
+  function FieldError({
+    name,
+  }: PropsWithChildren<{ name?: "" | InferZodErrorPaths<ValidationError> }>) {
+    const { isInvalid, validationError } = useActionContext<
+      Data,
+      Error,
+      ValidationError
+    >();
+
+    return isInvalid && <ZodFieldError errors={validationError} name={name} />;
+  }
+
+  return {
+    FieldError,
+  };
+}
diff --git a/src/createForm.test.tsx b/src/createForm.test.tsx
deleted file mode 100644
index 7c514ce..0000000
--- a/src/createForm.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import { describe, test, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { z } from "zod";
-import { createForm } from "./createForm";
-import { formAction } from "./formAction";
-import { useFormContext } from "./FormContext";
-
-describe("createForm", () => {
-  test("it creates a Form which provides a context", async () => {
-    const signUp = formAction
-      .input(
-        z.object({
-          email: z.string().email(),
-        })
-      )
-      .run(async () => {
-        return null;
-      });
-
-    const { Form } = createForm(signUp);
-
-    function ContextConsumer() {
-      const state = useFormContext();
-
-      return state.type;
-    }
-
-    function SignUpForm() {
-      return (
-        <Form initialData={null}>
-          <ContextConsumer />
-        </Form>
-      );
-    }
-
-    render(<SignUpForm />);
-
-    // @ts-expect-error
-    expect(screen.getByText("initial")).toBeInTheDocument();
-  });
-});
diff --git a/src/createForm.tsx b/src/createForm.tsx
deleted file mode 100644
index 3b92437..0000000
--- a/src/createForm.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import React, { type PropsWithChildren } from "react";
-import type { FormAction } from "./createFormAction";
-import { Form as BaseForm } from "./Form";
-import { FormContext } from "./FormContext";
-
-/**
- * Creates a Form component which state is accessible via context - useFormContext() hook.
- */
-export function createForm<
-  Data,
-  Error = Data,
-  ValidationError = Record<string, never>,
->(action: FormAction<Data, Error, ValidationError>) {
-  const Form = ({
-    children,
-    ...props
-  }: PropsWithChildren<{ initialData: Data }>) => {
-    return (
-      <BaseForm action={action} {...props}>
-        {(state) => <FormContext value={state}>{children}</FormContext>}
-      </BaseForm>
-    );
-  };
-
-  return {
-    Form,
-  };
-}

From c0628f9bb3f252287779857d35c5eec8dcfc8358 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Mon, 23 Dec 2024 14:24:37 +0100
Subject: [PATCH 09/10] chore: remove old Form component

---
 src/Action.test.tsx                           |   2 +-
 ...Form.test-d.ts => ActionContext.test-d.ts} |  45 ++-----
 src/Form.test.tsx                             |  83 -------------
 src/Form.tsx                                  | 115 ------------------
 src/FormContext.tsx                           |  26 ----
 src/client.ts                                 |   2 -
 6 files changed, 13 insertions(+), 260 deletions(-)
 rename src/{Form.test-d.ts => ActionContext.test-d.ts} (57%)
 delete mode 100644 src/Form.test.tsx
 delete mode 100644 src/Form.tsx
 delete mode 100644 src/FormContext.tsx

diff --git a/src/Action.test.tsx b/src/Action.test.tsx
index ab868f4..48f9458 100644
--- a/src/Action.test.tsx
+++ b/src/Action.test.tsx
@@ -3,7 +3,7 @@ import { describe, test, expect } from "vitest";
 import { userEvent } from "@testing-library/user-event";
 import { act, render, screen } from "@testing-library/react";
 import { z } from "zod";
-import { Action, useActionContext } from "./Action";
+import { Action } from "./Action";
 import { formAction } from "./formAction";
 import { ActionForm } from "./ActionForm";
 
diff --git a/src/Form.test-d.ts b/src/ActionContext.test-d.ts
similarity index 57%
rename from src/Form.test-d.ts
rename to src/ActionContext.test-d.ts
index fc37a12..6acdc19 100644
--- a/src/Form.test-d.ts
+++ b/src/ActionContext.test-d.ts
@@ -1,39 +1,18 @@
 import { expectTypeOf, describe, test } from "vitest";
-import { z } from "zod";
-import { formAction } from "./formAction";
-import type { FormProps } from "./Form";
+import { useActionContext } from "./Action";
 
-describe("FormProps", () => {
-  test("children props have mutually exclusive progress flags", () => {
-    const signUpSchema = z.object({
-      email: z.string().email(),
-      password: z.string(),
-    });
-
-    const signUpAction = formAction
-      .input(signUpSchema)
-      .error(() => {
-        const dbError = {
-          type: "ProtocolError",
-          message: "Email already exists",
-        };
-        return dbError;
-      })
-      .run(async () => {
-        return "We've sent you and email";
-      });
-
-    function fakeFormRender<A, B, C>(props: FormProps<A, B, C>) {
-      return props.children;
-    }
-
-    const children = fakeFormRender({
-      action: signUpAction,
-      initialData: "Please sign up",
-      children: () => null,
-    });
+describe("useActionContext", () => {
+  test("context value has mutually exclusive progress flags", () => {
+    const ctx = useActionContext<
+      string,
+      { type: string; message: string },
+      {
+        email?: { _errors: string[] };
+        password?: { _errors: string[] };
+      }
+    >();
 
-    expectTypeOf<typeof children>().parameter(0).toMatchTypeOf<
+    expectTypeOf<typeof ctx>().toMatchTypeOf<
       | {
           isPending: boolean;
           type: "initial";
diff --git a/src/Form.test.tsx b/src/Form.test.tsx
deleted file mode 100644
index 08276fe..0000000
--- a/src/Form.test.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from "react";
-import { describe, test, expect } from "vitest";
-import { userEvent } from "@testing-library/user-event";
-import { act, render, screen } from "@testing-library/react";
-import { z } from "zod";
-import { Form } from "./Form";
-import { formAction } from "./formAction";
-import { ZodFieldError } from "./ZodFieldError";
-
-describe("Form", () => {
-  test("it integrates with ZodFieldError", async () => {
-    const signUp = formAction
-      .input(
-        z
-          .object({
-            user: z.object({
-              email: z.string().email(),
-            }),
-            password: z.string().min(8),
-            confirm: z.string(),
-          })
-          .refine((data) => data.password === data.confirm, {
-            message: "Passwords don't match",
-          })
-      )
-      .run(async () => {
-        // implementation
-        return "success";
-      });
-
-    function SignUpForm() {
-      return (
-        <Form action={signUp} initialData="">
-          {({ isInvalid, validationError }) => {
-            return (
-              <>
-                {isInvalid && (
-                  <p>
-                    <ZodFieldError errors={validationError} />
-                  </p>
-                )}
-                <input type="text" name="user.email" data-testid="email" />
-                {isInvalid && (
-                  <ZodFieldError errors={validationError} name="user.email" />
-                )}
-                <input type="text" name="password" data-testid="pass" />
-                {isInvalid && (
-                  <p>
-                    <ZodFieldError errors={validationError} name="password" />
-                  </p>
-                )}
-                <input type="text" name="confirm" />
-                <button type="submit" data-testid="submit" />
-              </>
-            );
-          }}
-        </Form>
-      );
-    }
-
-    render(<SignUpForm />);
-
-    const email = screen.getByTestId("email");
-    await act(() => userEvent.type(email, "fake"));
-
-    const pass = screen.getByTestId("pass");
-    await act(() => userEvent.type(pass, "short"));
-
-    const submit = screen.getByTestId("submit");
-    await act(() => userEvent.click(submit));
-
-    // @ts-expect-error
-    expect(screen.getByText("Passwords don't match")).toBeInTheDocument();
-    expect(
-      screen.getByText("Invalid email")
-      // @ts-expect-error
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText("String must contain at least 8 character(s)")
-      // @ts-expect-error
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/Form.tsx b/src/Form.tsx
deleted file mode 100644
index 6c842f2..0000000
--- a/src/Form.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-
-import React, { useTransition } from "react";
-import type { FormHTMLAttributes, FormEvent } from "react";
-import type { RenderProp } from "react-render-prop-type";
-import type {
-  ActionState,
-  InitialState,
-  InvalidState,
-  FailureState,
-  SuccessState,
-} from "./createFormAction";
-import { useActionState } from "react";
-
-export type FormStateProps<Data, Error, ValidationError, Payload> = {
-  action: (
-    state: ActionState<Data, Error, ValidationError>,
-    payload: Payload
-  ) => Promise<ActionState<Data, Error, ValidationError>>;
-  initialData: Data;
-  permalink?: string;
-  /**
-   * Opt-in into automatic form reset by using the form "action" prop.
-   * By default, the onSubmit with a custom transition which opts-out of the implicit form reset.
-   * See for more. https://github.com/facebook/react/issues/29034
-   * @default false
-   */
-  autoReset?: boolean;
-};
-
-export function initial<Data>(data: Data): InitialState<Data> {
-  return { type: "initial", data, error: null, validationError: null };
-}
-
-type FormStatusFlags<
-  T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown,
-> = {
-  isInitial: T extends "initial" ? true : false;
-  isInvalid: T extends "invalid" ? true : false;
-  isFailure: T extends "failure" ? true : false;
-  isSuccess: T extends "success" ? true : false;
-};
-
-export type FormMetaState<T extends ActionState<unknown, unknown, unknown>> =
-  T &
-    FormStatusFlags<T["type"]> & {
-      isPending: boolean;
-    };
-
-export type FormProps<Data, Error, ValidationError> = Omit<
-  FormHTMLAttributes<HTMLFormElement>,
-  "action" | "children"
-> &
-  FormStateProps<Data, Error, ValidationError, FormData> &
-  RenderProp<
-    | FormMetaState<InitialState<Data>>
-    | FormMetaState<InvalidState<ValidationError>>
-    | FormMetaState<FailureState<Error>>
-    | FormMetaState<SuccessState<Data>>
-  >;
-
-const neverMetaState: FormStatusFlags = {
-  isInitial: false,
-  isInvalid: false,
-  isFailure: false,
-  isSuccess: false,
-};
-
-export function Form<Data, Error, ValidationError>({
-  children,
-  action,
-  initialData,
-  permalink,
-  autoReset = false,
-  ...props
-}: FormProps<Data, Error, ValidationError>) {
-  const [state, formAction, isPending] = useActionState(
-    action,
-    initial(initialData),
-    permalink
-  );
-  const [, startTransition] = useTransition();
-
-  const metaState =
-    state.type === "initial"
-      ? { ...state, ...neverMetaState, isPending, isInitial: true as const }
-      : state.type === "invalid"
-        ? { ...state, ...neverMetaState, isPending, isInvalid: true as const }
-        : state.type === "failure"
-          ? { ...state, ...neverMetaState, isPending, isFailure: true as const }
-          : {
-              ...state,
-              ...neverMetaState,
-              isPending,
-              isSuccess: true as const,
-            };
-
-  const submitStrategy = autoReset
-    ? { action: formAction }
-    : {
-        onSubmit: (event: FormEvent<HTMLFormElement>) => {
-          event.preventDefault();
-          const form = event.currentTarget;
-          startTransition(() => {
-            formAction(new FormData(form));
-          });
-        },
-      };
-
-  return (
-    <form {...submitStrategy} {...props}>
-      {children(metaState)}
-    </form>
-  );
-}
diff --git a/src/FormContext.tsx b/src/FormContext.tsx
deleted file mode 100644
index e4af136..0000000
--- a/src/FormContext.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-import { createContext, use } from "react";
-import type { ActionState } from "./createFormAction";
-import type { FormMetaState } from "./Form";
-
-/**
- * A context exposing the form action state.
- * @private You don't need to use this component directly. Use the `createForm` function instead.
- */
-export const FormContext = createContext<FormMetaState<
-  ActionState<unknown, unknown, unknown>
-> | null>(null);
-
-/**
- * A hook to consume the form action state from the context.
- */
-export const useFormContext = () => {
-  const ctx = use(FormContext);
-
-  if (!ctx) {
-    throw new Error("Form Context must be initialized before use.");
-  }
-
-  return ctx;
-};
diff --git a/src/client.ts b/src/client.ts
index d102abb..abfc88e 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -3,8 +3,6 @@
 export * from "./Action";
 export * from "./ActionForm";
 export * from "./createComponents";
-export * from "./Form";
-export * from "./FormContext";
 export * from "./FormStatus";
 export * from "./Pending";
 export * from "./ZodFieldError";

From e3ddaf9b898f395dac2892e8a7498ea250a24637 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Mon, 23 Dec 2024 17:51:33 +0100
Subject: [PATCH 10/10] feat: v2 with context support

---
 README.md                | 280 ++++++++++++++++++++++++---------------
 package-lock.json        |   4 +-
 package.json             |   2 +-
 src/Action.tsx           |   9 +-
 src/createComponents.tsx |   6 +-
 src/createFormAction.ts  |   4 +
 src/formAction.test.ts   |  11 +-
 7 files changed, 190 insertions(+), 126 deletions(-)

diff --git a/README.md b/README.md
index d3c1ddb..41645ce 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,29 @@
 # react-form-action
 
-End-to-end typesafe success, error & validation state control for Next.js 14 form actions.
+End-to-end typesafe success, error & validation state control for Next.js form actions.
 
 ## Features
 
 **Action Creator**
 
-- ✅ Provides `"invalid" | "success" | "failure"` response objects.
+- ✅ Provides envelope objects with `"initial" | "invalid" | "success" | "failure"` response types.
 - ✅ Define generic payload for each of the response type.
 
-**Form Action builder**
+**tRPC-like Form Action builder**
 
-- ✅ tRPC-like builder API for `.input(zodSchema)` & context `.use(middleware)`
-- ✅ Parses `formData` with [`zod-form-data`](https://www.npmjs.com/package/zod-form-data)
+- ✅ Define payload schema with the `.input(zodSchema)` to validate the `formData`
+- ✅ Reuse business logic with the `.use(middleware)` method.
+- ✅ Reuse error handling with the `.error(handler)`.
 
-**Stateful `<Form />`**
+**React Context access with the `<Action action={myFormAction} />` component**
 
-- ✅ `<Form />` component reads the action's response.
-- ✅ Computes progress meta-state like `isInvalid`, `isSuccess` and more.
+- ✅ The `useActionState()` accessible via the `useActionContext()` hook.
+- ✅ Computes progress flags like `isInvalid`, `isSuccess` based on the envelope type.
 
-**Context**
+**Context-bound `<Form />` component**
 
-- ✅ Access the action state via `useFormContext()` hook.
-- ✅ Keeps JSX markup free of render-props.
+- ✅ Reads the `action` from the `<Action />` context.
+- ✅ Opt-out from the default form reset after action submit.
 
 ## Install
 
@@ -34,10 +35,95 @@ npm i react-form-action zod-form-data
   <img alt="NPM Version" src="https://img.shields.io/npm/v/react-form-action?style=for-the-badge&labelColor=24292e">
 </a>
 
+## Getting Started
+
+#### 1️⃣ Create a Server Action
+
+```tsx
+// app/subscibe/action.ts
+"use server";
+
+import { formAction } from "react-form-action";
+import { z } from "zod";
+
+export const subscribeAction = formAction
+  .input(z.object({ email: z.string().email() }))
+  .run(async ({ input }) => {
+    return input.email;
+  });
+```
+
+#### 2️⃣ Create a Client Form Component
+
+```tsx
+// app/subscibe/SubscribeForm.tsx
+"use client";
+
+import {
+  Action,
+  Form,
+  Pending,
+  useActionContext,
+} from "react-form-action/client";
+
+import { subscribeAction } from "./action";
+
+const { FieldError } = createComponents(subscribeAction);
+
+export function SubscribeForm() {
+  return (
+    <Action action={subscribeAction} initialData="">
+      <SuccessMessage />
+      <Form>
+        <input name="email" />
+        {/*💡 The name prop supports autocompletion */}
+        <FieldError name="email" />
+      </Form>
+      <SubmitButton />
+      <Pending>Please wait...</Pending>
+    </Action>
+  );
+}
+
+function SuccessMessage() {
+  // Pass action to cast the type of the "data" value
+  const { isSuccess, data } = useActionContext(subscribeAction);
+
+  return isSuccess && <p>Email {data} was registered.</p>;
+}
+
+function SubmitButton() {
+  // no need for action when reading a generic value
+  const { isPending } = useActionContext();
+
+  return (
+    <button type="submit" disabled={isPending}>
+      {isPending ? "Submitting..." : "Submit"}
+    </button>
+  );
+}
+```
+
+#### 3️⃣ Render the form on a Page
+
+```tsx
+// app/subscibe/page.tsx
+
+import { SubscribeForm } from "./SubscribeForm";
+
+function SuccessMessage() {}
+
+export function Page() {
+  return <SubscribeForm />;
+}
+```
+
 ## Usage
 
 ### `formAction` builder
 
+The [`zod-form-data`](https://www.npmjs.com/package/zod-form-data) powered action builder.
+
 ```ts
 // app/actions/auth.ts
 "use server";
@@ -105,7 +191,9 @@ export const signUp = authAction
   });
 ```
 
-### Server Action (usable in Next.js)
+### Action Creator
+
+Low-level action creator, which provides the `success`, `failure` and `invalid` envelope constructors. With the `createFormAction` you must handle the native `FormData` by yourself.
 
 ```ts
 "use server";
@@ -170,61 +258,21 @@ export const updateUser = createFormAction<
 );
 ```
 
-### `<Form>` Component
+### Action Context
 
-```tsx
-"use client";
-// Form connects the formAction to the formState & provides the meta state props via render prop
-import { Form } from "react-form-action/client";
-
-import { updateUser } from "@/actions";
-
-export function UpdateUserForm() {
-  return (
-    <Form action={updateUser} initialData="foobar">
-      {({
-        error,
-        data,
-        validationError,
-        isPending,
-        isFailure,
-        isInvalid,
-        isSuccess,
-        isInitial,
-      }) => (
-        <>
-          {/* safely access the data or error by checking the mutually exclusive boolean flags: */}
-          {isSuccess && <p className="success-message">{data}</p>}
-          {isFailure && <p className="error-message">{error.message}</p>}
-          <input type="text" name="name" disabled={isPending} />
-          {isInvalid && (
-            <span className="input-error">{validationError.name}</span>
-          )}
-
-          <button disabled={isPending}>
-            {isPending ? "Submitting..." : "Submit"}
-          </button>
-        </>
-      )}
-    </Form>
-  );
-}
-```
-
-### Context Form
+The `<Action>` components enables you to access your `action`'s state with the `useActionContext()` hook:
 
 ```tsx
-// Example route: /app/auth/signup/SignUpForm.tsx
+// 👉 Define standalone client form component (e.g. /app/auth/signup/SignUpForm.tsx)
 "use client";
 
-import { createForm, Pending, useFormContext } from "react-form-action/client";
-import { signupAction } from "./actions";
+import { Action, Form, useActionContext } from "react-form-action/client";
+import type { PropsWithChildren } from "react";
 
-// This call will succeed only in client component
-const { Form } = createForm(signupAction);
+import { signupAction } from "./action";
 
-function Error() {
-  // read any state from the FormContext:
+function Pending({ children }: PropsWithChildren) {
+  // read any state from the ActionContext:
   const {
     error,
     data,
@@ -233,36 +281,64 @@ function Error() {
     isFailure,
     isInvalid,
     isSuccess,
-    isInitial
-  } = useFormContext();
+    isInitial,
+  } = useActionContext();
 
-  return isFailure && "Failed to submit". // use the error somehow
+  return isPending && children;
 }
 
-// render this form on your RSC page (/app/auth/signup/page.tsx)
+// 💡 render this form on your RSC page (/app/auth/signup/page.tsx)
 export function SignupForm() {
-  // This Form does not use render props.
   return (
-    <Form>
-      <input name="email" />
-      <input name="password" />
+    <Action action={signupAction}>
+      <Form>
+        <input name="email" />
+        <input name="password" />
+      </Form>
+      {/* 🎆 Read the pending state outside the <Form> */}
       <Pending>
-        {/* This renders only when the action is pending. */}
+        {/* This renders only when the action is pending. 😎 */}
         <p>Please wait...</p>
       </Pending>
-    </Form>
+    </Action>
   );
 }
 ```
 
-### `<ZodFieldError>` Component
+### `<Form>` Component
 
-Actions created with `formAction` builder will have the `validationError` of [`ZodFormattedError`](https://zod.dev/ERROR_HANDLING?id=formatting-errors) type.
-To easily access the nested error, use the helper `<ZodFieldError>` component:
+The `<form>` submits the action in `onSubmit` handler to [prevent automatic form reset](https://github.com/facebook/react/issues/29034).
+Pass `autoReset` prop to use the `action` prop instead and keep the default reset.
 
 ```tsx
 "use client";
-import { Form, ZodFieldError } from "react-form-action/client";
+
+import { Action, Form } from "react-form-action/client";
+
+import { updateUser } from "./action";
+
+export function UpdateUserForm() {
+  return (
+    <Action action={updateUser}>
+      <Form autoReset>{/* ... */}</Form>
+    </Action>
+  );
+}
+```
+
+### Context Bound Components `createComponents()`
+
+Use the `createComponents(action)` helper to create components which use the ActionContext and have types bound to the action type.
+
+### `<FielError>` Component
+
+```tsx
+"use client";
+
+// ⚠️ createComponents is usable only in "use client" components
+import { Form, createComponents } from "react-form-action/client";
+
+import { authAction } from "./actions";
 
 export const signUp = authAction
   .input(
@@ -280,51 +356,47 @@ export const signUp = authAction
       })
   )
   .run(async ({ ctx, input }) => {
-    // implementation
+    return null;
   });
 
+// 🌟 The FieldError is now bound do the signUp input schema which allows autocompletion for its "name" prop
+// ⚠️ Usable only with actions created with the formAction builder
+const { FieldError } = createComponents(signUp);
+
 export function SignUpForm() {
   return (
-    <Form action={signUp} initialData="">
-      {({ isInvalid, validationError }) =>
-        {/* Render ZodFieldError behind the isInvalid flag to narrow type (omits the possibility of null) */}
-        isInvalid && (
-          <>
-            {/*
-              When the "name" prop is ommited, the top-level error will be rendered e.g.:
-              "Passwords don't match"
-            */}
-            <ZodFieldError errors={validationError} />
-            {/* Access fields by their name: */}
-            <ZodFieldError errors={validationError} name="password" />
-            {/* Access nested fields by dot access notation: */}
-            <ZodFieldError errors={validationError} name="user.email" />
-          </>
-        )
-      }
-    </Form>
+    <Action action={signUp} initialData={null}>
+      <Form>
+        {/* 1️⃣ When the "name" prop is ommited, the top-level error will be rendered e.g.:
+          "Passwords don't match" */}
+        <FieldError />
+        {/* 2️⃣ Access fields by their name: */}
+        <FieldError name="password" />
+        {/* 3️⃣ Access nested fields by dot access notation: */}
+        <FieldError name="user.email" />
+      </Form>
+    </Action>
   );
 }
 ```
 
-### Bonus `<FormStatus>`
+### `<Pending>`
 
-The `useFormStatus` hook data exposed via render prop:
+Render children when the action is pending:
 
 ```tsx
-import { FormStatus } from "react-form-action/client";
+import { Action, Pending } from "react-form-action/client";
 
-// <FormStatus> alleviates the need to create a separate <SubmitButton> component using the useFormStatus hook
+import { Spinner } from "./components";
 
 return function MyForm() {
   return (
-    <form action={action}>
-      <FormStatus>
-        {({ pending }) => (
-          <button type="submit">{pending ? "Submitting..." : "Submit"} </button>
-        )}
-      </FormStatus>
-    </form>
+    <Action action={action}>
+      {/* 👉 Unlike the React.useFormStatus() hook, we don't need here the <form> element at all. */}
+      <Pending>
+        <Spinner />
+      </Pending>
+    </Action>
   );
 };
 ```
diff --git a/package-lock.json b/package-lock.json
index a0120e1..a6d85cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-form-action",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "react-form-action",
-      "version": "1.5.0",
+      "version": "2.0.0",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/dom": "^10.4.0",
diff --git a/package.json b/package.json
index f915d43..b21e6cd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
diff --git a/src/Action.tsx b/src/Action.tsx
index c44cd5e..996a886 100644
--- a/src/Action.tsx
+++ b/src/Action.tsx
@@ -10,6 +10,7 @@ import type {
   FailureState,
   FormAction,
 } from "./createFormAction";
+import { initial } from "./createFormAction";
 import { useActionState } from "react";
 
 export type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
@@ -18,10 +19,6 @@ export type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
   permalink?: string;
 }>;
 
-function initial<Data>(data: Data): InitialState<Data> {
-  return { type: "initial", data, error: null, validationError: null };
-}
-
 type ActionStatusFlags<
   T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown,
 > = {
@@ -70,7 +67,9 @@ const ActionContext = createContext<SpreadActionContext | null>(null);
 /**
  * A hook to consume the form action state from the context.
  */
-export function useActionContext<Data, Error, ValidationError>() {
+export function useActionContext<Data, Error, ValidationError>(
+  action?: FormAction<Data, Error, ValidationError>
+) {
   const ctx = use(ActionContext);
 
   if (!ctx) {
diff --git a/src/createComponents.tsx b/src/createComponents.tsx
index faf5742..f4cdafe 100644
--- a/src/createComponents.tsx
+++ b/src/createComponents.tsx
@@ -17,11 +17,7 @@ export function createComponents<
   function FieldError({
     name,
   }: PropsWithChildren<{ name?: "" | InferZodErrorPaths<ValidationError> }>) {
-    const { isInvalid, validationError } = useActionContext<
-      Data,
-      Error,
-      ValidationError
-    >();
+    const { isInvalid, validationError } = useActionContext(action);
 
     return isInvalid && <ZodFieldError errors={validationError} name={name} />;
   }
diff --git a/src/createFormAction.ts b/src/createFormAction.ts
index c2bef31..f351cc5 100644
--- a/src/createFormAction.ts
+++ b/src/createFormAction.ts
@@ -42,6 +42,10 @@ export type FormAction<
   payload: Payload
 ) => Promise<ActionState<Data, Error, ValidationError>>;
 
+export function initial<Data>(data: Data): InitialState<Data> {
+  return { type: "initial", data, error: null, validationError: null };
+}
+
 export function createFormAction<
   Data,
   Error = Data,
diff --git a/src/formAction.test.ts b/src/formAction.test.ts
index 354a334..e5400a1 100644
--- a/src/formAction.test.ts
+++ b/src/formAction.test.ts
@@ -1,14 +1,7 @@
 import { it, describe, vi, expect } from "vitest";
-import {
-  AnyZodObject,
-  ZodEffects,
-  ZodObject,
-  ZodType,
-  ZodTypeAny,
-  z,
-} from "zod";
+import { z } from "zod";
 import { formAction } from "./formAction";
-import { initial } from "./Form";
+import { initial } from "./createFormAction";
 import { zfd } from "zod-form-data";
 
 describe("formAction", () => {