react-form-action 1.1.1 → 1.2.1

package/README.md

@@ -50,7 +50,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 +85,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 +161,7 @@ export const updateUser = createFormAction<
 
       return failure({ message: "Failed to update user." });
     }
-  },
+  }
 );
 ```
 
@@ -206,6 +206,55 @@ export function UpdateUserForm() {
 }
 ```
 
+### `<ZodFieldError>` 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:
+
+```tsx
+"use client";
+import { Form, ZodFieldError } from "react-form-action/client";
+
+export const signUp = authAction
+  .input(
+    z
+      .object({
+        user: z.object({
+          email: z.string().email(),
+          name: z.string(),
+        }),
+        password: z.string().min(8),
+        confirm: z.string(),
+      })
+      .refine((data) => data.password === data.confirm, {
+        message: "Passwords don't match",
+      })
+  )
+  .run(async ({ ctx, input }) => {
+    // implementation
+  });
+
+export function SignUpForm() {
+  return (
+    <Form action={signUp} initialData="">
+      {({ error, data, validationError }) => (
+        <>
+          {/*
+            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>
+  );
+}
+```
+
 ### Bonus `<FormStatus>`
 
 The `useFormStatus` hook data exposed via render prop:

package/dist/client.d.mts

@@ -3,6 +3,7 @@ import React__default, { FormHTMLAttributes } from 'react';
 import { RenderProp } from 'react-render-prop-type';
 import { F as FormState, b as InitialState, I as InvalidState, a as FailureState, S as SuccessState } from './createFormAction-3a51310f.js';
 import { useFormStatus } from 'react-dom';
+import { ZodFormattedError } from 'zod';
 
 type FormStateProps<Data, Error, ValidationError, Payload> = {
     action: (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>;
@@ -24,4 +25,16 @@ declare function Form<Data, Error, ValidationError>({ children, action, initialD
 
 declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
 
-export { Form, FormProps, FormStateProps, FormStatus, initial };
+declare const SEPARATOR: ".";
+type Paths<Err extends object> = {
+    [k in keyof Err]: k extends string ? Err[k] extends object ? `${k}${typeof SEPARATOR}${Paths<Err[k]>}` : k : never;
+}[keyof Err];
+type ZodFieldErrorProps<Errors extends ZodFormattedError<any>> = Errors extends ZodFormattedError<infer E extends object> ? {
+    errors: Errors;
+    name?: "" | Paths<E>;
+} & Partial<RenderProp<{
+    errors: readonly string[];
+}>> : any;
+declare function ZodFieldError<Errors extends ZodFormattedError<any>>({ errors, name, children, }: ZodFieldErrorProps<Errors>): React__default.ReactNode;
+
+export { Form, FormProps, FormStateProps, FormStatus, ZodFieldError, ZodFieldErrorProps, initial };

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import o from"react";import{useActionState as F}from"react";import{useFormStatus as S}from"react-dom";function e({children:r}){return r(S())}function c(r){return{type:"initial",data:r,error:null,validationError:null}}var a={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function x({children:r,action:i,initialData:n,permalink:s,...l}){let[t,m]=F(i,c(n),s),u=t.type==="initial"?{...t,...a,isInitial:!0}:t.type==="invalid"?{...t,...a,isInvalid:!0}:t.type==="failure"?{...t,...a,isFailure:!0}:{...t,...a,isSuccess:!0};return o.createElement("form",{action:m,...l},o.createElement(e,null,({pending:p})=>r({...u,isPending:p})))}export{x as Form,e as FormStatus,c as initial};
+"use client";import l from"react";import{useActionState as F}from"react";import{useFormStatus as c}from"react-dom";function s({children:t}){return t(c())}function f(t){return{type:"initial",data:t,error:null,validationError:null}}var i={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function T({children:t,action:a,initialData:n,permalink:e,...o}){let[r,m]=F(a,f(n),e),d=r.type==="initial"?{...r,...i,isInitial:!0}:r.type==="invalid"?{...r,...i,isInvalid:!0}:r.type==="failure"?{...r,...i,isFailure:!0}:{...r,...i,isSuccess:!0};return l.createElement("form",{action:m,...o},l.createElement(s,null,({pending:u})=>t({...d,isPending:u})))}import p from"react";var E=".",S=Object.freeze({_errors:Object.freeze([])});function v({errors:t,name:a="",children:n=({errors:e})=>p.createElement(p.Fragment,null,e[0])}){if(a.length===0)return n({errors:t._errors});let e=a.split(E),o=t;for(;e.length;){let r=e.shift();o=o[r]??S}return n({errors:o._errors})}export{T as Form,s as FormStatus,v as ZodFieldError,f as initial};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -16,7 +16,8 @@
     "test": "vitest",
     "typecheck": "vitest --typecheck",
     "format": "prettier . --write",
-    "format:check": "prettier . --check"
+    "format:check": "prettier . --check",
+    "ncu": "ncu --interactive --format group"
   },
   "exports": {
     ".": {
@@ -44,20 +45,27 @@
   "author": "Miroslav Petrik",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=18.3",
-    "react-dom": ">=18.3",
+    "react": ">=19",
+    "react-dom": ">=19",
     "zod": "^3",
     "zod-form-data": "^2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "next": "^14.0.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "happy-dom": "^15.11.7",
+    "npm-check-updates": "^17.1.11",
     "prettier": "^3.3.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-render-prop-type": "^0.1.0",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
-    "vitest": "^1.2.2",
+    "vitest": "^1.3.1",
     "zod": "^3.22.4",
     "zod-form-data": "^2.0.2"
   }