react-form-action 0.2.0 → 0.3.0

package/README.md

@@ -2,6 +2,23 @@
 
 End-to-end typesafe success, error & validation state control for Next.js 14 form actions.
 
+## Features
+
+**Action Creator**
+
+- ✅ Provides `"invalid" | "success" | "failure"` response objects.
+- ✅ Define generic payload for each of the response type.
+
+**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)
+
+**Stateful `<Form />`**
+
+- ✅ `<Form />` component reads the action's response.
+- ✅ Computes progress meta-state like `isInvalid`, `isSuccess` and more.
+
 ## Install
 
 ```
@@ -28,12 +45,13 @@ const i18nMiddleware = async () => {
   return { t };
 };
 
-const authAction = formAction(emailSchema)
+const authAction = formAction
+  .input(emailschema)
   .use(i18nMiddleware)
   .use(async ({ ctx: { t } }) =>
     console.log("🎉 context enhanced by previous middlewares 🎉", t)
   )
-  .error((error) => {
+  .error(({ error }) => {
     if (error instanceof DbError) {
       return error.custom.code;
     } else {
@@ -53,15 +71,16 @@ export const resendVerifyEmailAction = authAction.run(
   }
 );
 
-export const sendResetPasswordEmail = authAction.run(
-  async ({ ctx: { t }, input: { email } }) => {
+export const signUp = authAction
+  // extend the input
+  .input(z.object({ password: z.string() }))
+  .run(async ({ ctx: { t }, input: { email, password } }) => {
     // do custom work
-    await db.emailPasswordSendPasswordResetEmail({ email });
+    await db.signupWithEmailAndPassword({ email, password });
 
     // return translated success message
-    return t("resetPasswordEmail.success");
-  }
-);
+    return t("signUp.success");
+  });
 ```
 
 ### Server Action (usable in Next.js)

package/dist/client.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { FormHTMLAttributes } from 'react';
 import { RenderProp } from 'react-render-prop-type';
-import { I as InitialState, a as InvalidState, b as FailureState, S as SuccessState, F as FormState } from './createFormAction-0c8f36ce.js';
+import { b as InitialState, I as InvalidState, a as FailureState, S as SuccessState, F as FormState } from './createFormAction-3a51310f.js';
 import { useFormStatus } from 'react-dom';
 
 type FormStateProps<Data, ValidationError, Error, Payload> = {

package/dist/{createFormAction-0c8f36ce.d.ts → createFormAction-3a51310f.d.ts}

@@ -29,4 +29,4 @@ declare function createFormAction<Data, Error = Data, ValidationError = Record<s
     invalid: (validationError: ValidationError) => InvalidState<ValidationError>;
 }) => (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>): (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>;
 
-export { FormState as F, InitialState as I, SuccessState as S, InvalidState as a, FailureState as b, createFormAction as c };
+export { FormState as F, InvalidState as I, SuccessState as S, FailureState as a, InitialState as b, createFormAction as c };

package/dist/index.d.mts

@@ -1,10 +1,11 @@
-import { F as FormState } from './createFormAction-0c8f36ce.js';
-export { b as FailureState, I as InitialState, a as InvalidState, S as SuccessState, c as createFormAction } from './createFormAction-0c8f36ce.js';
-import { ZodSchema, ZodUndefined, z } from 'zod';
+import { F as FormState, a as FailureState, S as SuccessState, I as InvalidState } from './createFormAction-3a51310f.js';
+export { b as InitialState, c as createFormAction } from './createFormAction-3a51310f.js';
+import { z, ZodRawShape, ZodObject, objectUtil, ZodSchema } from 'zod';
 
-type MiddlewareFn<Context, NewContext extends Record<string, unknown> = Record<string, unknown>> = ({ ctx }: {
-    ctx: Context;
-}) => Promise<NewContext>;
+type Flatten<T> = Identity<{
+    [K in keyof T]: T[K];
+}>;
+type Identity<T> = T;
 type InitialContext = Record<"formData", FormData>;
 /**
  * Action without schema has no input.
@@ -19,13 +20,15 @@ type SchemaAction<Data, Context, Schema extends ZodSchema> = (params: {
     ctx: Context;
     input: z.infer<Schema>;
 }) => Promise<Data>;
-type FormActionBuilder<Schema extends ZodSchema = ZodUndefined, Err = Error, Context = InitialContext> = {
+type EmptyZodObject = ZodObject<ZodRawShape>;
+type FormActionBuilder<Schema extends EmptyZodObject, Err = Error, Context = InitialContext> = {
+    input: <T extends ZodRawShape>(schema: ZodObject<T>) => FormActionBuilder<ZodObject<objectUtil.extendShape<T, Schema["shape"]>>, Err, Context>;
     /**
      * A finishing call on the builder completing your action.
      * @param action async function to execute. It will receive parsed formData as input, when the builder was initialized with a schema.
      * @returns runnable server action exportable from a module.
      */
-    run: Schema extends undefined ? <Data>(action: Action<Data, Context>) => (state: FormState<Data, Err>, payload: FormData) => Promise<Data> : <Data>(action: SchemaAction<Data, Context, Schema>) => (state: FormState<Data, Err, ZodErrorMessages<Schema>>, payload: FormData) => Promise<Data>;
+    run: Schema extends undefined ? <Data>(action: Action<Data, Context>) => (state: FormState<Data, Err>, payload: FormData) => Promise<Flatten<FailureState<Err> | SuccessState<Data>>> : <Data>(action: SchemaAction<Data, Context, Schema>) => (state: FormState<Data, Err, z.inferFlattenedErrors<Schema>>, payload: FormData) => Promise<Flatten<InvalidState<z.inferFlattenedErrors<Schema>> | FailureState<Err> | SuccessState<Data>>>;
     /**
      * A chainable context enhancing helper.
      * @param middleware A function which receives the current context, and returns an object which will be added to the context.
@@ -40,19 +43,11 @@ type FormActionBuilder<Schema extends ZodSchema = ZodUndefined, Err = Error, Con
      * @param processError A function which receives action's errors.
      * @returns FormActionBuilder
      */
-    error: <Err>(processError: (error: unknown) => Err) => FormActionBuilder<Schema, Err, Context>;
-};
-declare function formAction<Schema extends ZodSchema = ZodUndefined, Err = Error, Context = InitialContext, NewContext extends Record<string, unknown> = Record<string, unknown>>(schema?: Schema, 
-/**
- * @private
- */
-middleware?: MiddlewareFn<Context, NewContext>[], 
-/**
- * @private
- */
-processError?: (error: unknown) => Err): FormActionBuilder<Schema, Err, Context>;
-type ZodErrorMessages<Schema extends ZodSchema> = {
-    [k in keyof z.infer<Schema>]?: string;
+    error: <Err>(processError: (params: {
+        error: unknown;
+        ctx: Context;
+    }) => Err) => FormActionBuilder<Schema, Err, Context>;
 };
+declare const formAction: FormActionBuilder<z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>, Error, InitialContext>;
 
-export { FormState, formAction };
+export { FailureState, FormState, InvalidState, SuccessState, formAction };

package/dist/index.mjs

@@ -1 +1 @@
-function x(r){function n(a){return{type:"success",data:a,error:null,validationError:null}}function e(a){return{type:"failure",data:null,error:a,validationError:null}}function i(a){return{type:"invalid",data:null,error:null,validationError:a}}return(a,m)=>r({success:n,failure:e,invalid:i})(a,m)}function C(r,n=[],e){async function i(t){let o={formData:t};for(let c of n){let d=await c({ctx:o});o={...o,...d}}return o}return{run:r?t=>x(({success:o,failure:c,invalid:d})=>async(S,s)=>{let l=await i(s),u=r.safeParse(s);if(!u.success)return d(D(u.error));let p=u.data;try{return o(await t({input:p,ctx:l}))}catch(E){if(e)return c(e(E));throw E}}):t=>x(({success:o,failure:c})=>async(d,S)=>{let s=await i(S);try{return o(await t({ctx:s}))}catch(l){if(e)return c(e(l));throw l}}),use(t){return C(r,[...n,t])},error(t){return C(r,n,t)}}}var D=r=>r.errors.reduce((n,{message:e,path:i})=>({...n,[i[0]]:e}),{});export{x as createFormAction,C as formAction};
+function p(a){function o(e){return{type:"success",data:e,error:null,validationError:null}}function n(e){return{type:"failure",data:null,error:e,validationError:null}}function l(e){return{type:"invalid",data:null,error:null,validationError:e}}return(e,s)=>a({success:o,failure:n,invalid:l})(e,s)}import{z as D}from"zod";import{zfd as h}from"zod-form-data";function u(a,o=[],n){async function l(t){let r={formData:t};for(let i of o){let d=await i({ctx:r});r={...r,...d}}return r}let e=t=>p(({success:r,failure:i})=>async(d,x)=>{let m=await l(x);try{return r(await t({ctx:m}))}catch(c){if(n)return i(n({error:c,ctx:m}));throw c}}),s=t=>p(({success:r,failure:i,invalid:d})=>{let x=h.formData(a);return async(m,c)=>{let E=await l(c),S=x.safeParse(c);if(!S.success)return d(S.error.flatten());let y=S.data;try{return r(await t({input:y,ctx:E}))}catch(C){if(n)return i(n({error:C,ctx:E}));throw C}}});return{input(t){let r=a.merge(t);return u(r,o)},use(t){return u(a,[...o,t])},error(t){return u(a,o,t)},run:Object.keys(a.shape).length===0?e:s}}var j=u(D.object({}));export{p as createFormAction,j as formAction};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -43,7 +43,8 @@
   "peerDependencies": {
     "react": ">=18.2",
     "react-dom": ">=18.2",
-    "zod": "^3"
+    "zod": "^3",
+    "zod-form-data": "^2"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",