react-form-action 0.4.1 → 0.5.0

package/README.md

@@ -25,6 +25,10 @@ End-to-end typesafe success, error & validation state control for Next.js 14 for
 npm i react-form-action zod-form-data
 ```
 
+<a aria-label="NPM version" href="https://www.npmjs.com/package/react-form-action">
+  <img alt="NPM Version" src="https://img.shields.io/npm/v/react-form-action?style=for-the-badge&labelColor=24292e">
+</a>
+
 ## Usage
 
 ### `formAction` builder
@@ -46,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) {
@@ -70,9 +74,7 @@ export const signIn = authAction
     return t("verificationEmail.success");
   });
 
-import { formAction } from "react-fomr-action";
-
-export const signUp = formAction
+export const signUp = authAction
   .input(
     z
       .object({
@@ -83,14 +85,18 @@ export const signUp = formAction
       .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!
 
-    await db.signUp({ email, password });
+    const tokenData = await db.signUp({ email, password });
+
+    if (!tokenData) {
+      return t("signUp.emailVerificationRequired");
+    }
 
-    return "We've sent you an email!";
+    return t("singUp.success");
   });
 ```
 
@@ -155,7 +161,7 @@ export const updateUser = createFormAction<
 
       return failure({ message: "Failed to update user." });
     }
-  }
+  },
 );
 ```
 

package/dist/client.d.mts

@@ -1,24 +1,27 @@
 import * as React from 'react';
 import React__default, { FormHTMLAttributes } from 'react';
 import { RenderProp } from 'react-render-prop-type';
-import { b as InitialState, I as InvalidState, a as FailureState, S as SuccessState, F as FormState } from './createFormAction-3a51310f.js';
+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';
 
-type FormStateProps<Data, ValidationError, Error, Payload> = {
-    action: (state: FormState<Data, ValidationError, Error>, payload: Payload) => Promise<FormState<Data, ValidationError, Error>>;
+type FormStateProps<Data, Error, ValidationError, Payload> = {
+    action: (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>;
     initialData: Data;
     permalink?: string;
 };
 declare function initial<Data>(data: Data): InitialState<Data>;
-type FormMetaState<T extends FormState<unknown, unknown, unknown>> = T & {
+type FormStatusFlags<T extends FormState<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;
+};
+type FormMetaState<T extends FormState<unknown, unknown, unknown>> = T & FormStatusFlags<T["type"]> & {
     isPending: boolean;
-    isInitial: T["type"] extends "initial" ? true : false;
-    isFailure: T["type"] extends "failure" ? true : false;
-    isSuccess: T["type"] extends "success" ? true : false;
-    isInvalid: T["type"] extends "invalid" ? true : false;
 };
-declare function Form<Data, ValidationError, Error>({ children, action, initialData, permalink, ...props }: Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "children"> & FormStateProps<Data, ValidationError, Error, FormData> & RenderProp<FormMetaState<InitialState<Data>> | FormMetaState<InvalidState<Error>> | FormMetaState<FailureState<Error>> | FormMetaState<SuccessState<Data>>>): React__default.JSX.Element;
+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>>>;
+declare function Form<Data, Error, ValidationError>({ children, action, initialData, permalink, ...props }: FormProps<Data, Error, ValidationError>): React__default.JSX.Element;
 
 declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
 
-export { Form, FormStatus, initial };
+export { Form, FormProps, FormStateProps, FormStatus, initial };

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import a from"react";import{useFormState as u}from"react-dom";import{useFormStatus as p}from"react-dom";function e({children:t}){return t(p())}function S(t){return{type:"initial",data:t,error:null,validationError:null}}function E({children:t,action:o,initialData:i,permalink:n,...s}){let[r,m]=u(o,S(i),n);return a.createElement("form",{action:m,...s},a.createElement(e,null,({pending:l})=>t({...r,isPending:l,isInitial:r.type==="initial",isInvalid:r.type==="invalid",isFailure:r.type==="failure",isSuccess:r.type==="success"})))}export{E as Form,e as FormStatus,S as initial};
+"use client";import o from"react";import{useFormState as S}from"react-dom";import{useFormStatus as F}from"react-dom";function e({children:r}){return r(F())}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]=S(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};

package/dist/index.mjs

@@ -1 +1 @@
-function y(e){function o(a){return{type:"success",data:a,error:null,validationError:null}}function n(a){return{type:"failure",data:null,error:a,validationError:null}}function s(a){return{type:"invalid",data:null,error:null,validationError:a}}return(a,S)=>e({success:o,failure:n,invalid:s})(a,S)}import{ZodFirstPartyTypeKind as C}from"zod";import{zfd as w}from"zod-form-data";var l=Symbol();function d(e,o=[],n){async function s(t){let r={formData:t};for(let i of o){let u=await i({ctx:r});r={...r,...u}}return r}return{input(t){if(e===l)return d(t,o,n);if(e._def.effect)throw new Error("Previous input is not augmentable because it contains an effect.");if(t._def.effect)throw new Error("Your input contains effect which prevents merging it with the previous inputs.");if(e._def.typeName===C.ZodObject){let r=e.merge(t);return d(r,o)}else throw Error("Merging inputs works only for object schemas without effects.")},use(t){return d(e,[...o,t],n)},error(t){return d(e,o,t)},run:e===l?t=>y(({success:r,failure:i})=>async(u,x)=>{let p=await s(x);try{return r(await t({ctx:p}))}catch(c){if(n)return i(n({error:c,ctx:p}));throw c}}):e===l?void 0:t=>y(({success:r,failure:i,invalid:u})=>{let x=w.formData(e);return async(p,c)=>{let f=await s(c),m=x.safeParse(c);if(!m.success)return u(m.error.flatten());let h=m.data;try{return r(await t({input:h,ctx:f}))}catch(E){if(n)return i(n({error:E,ctx:f}));throw E}}})}}var b=d(l);export{y as createFormAction,b as formAction};
+function S(e){function o(n){return{type:"success",data:n,error:null,validationError:null}}function a(n){return{type:"failure",data:null,error:n,validationError:null}}function d(n){return{type:"invalid",data:null,error:null,validationError:n}}return(n,f)=>e({success:o,failure:a,invalid:d})(n,f)}import{ZodFirstPartyTypeKind as C}from"zod";import{zfd as w}from"zod-form-data";var l=Symbol();function s(e,o=[],a){async function d(t){let r={formData:t};for(let i of o){let u=await i({ctx:r});r={...r,...u}}return r}return{input(t){if(e===l)return s(t,o,a);if(e._def.effect)throw new Error("Previous input is not augmentable because it contains an effect.");if(t._def.effect)throw new Error("Your input contains effect which prevents merging it with the previous inputs.");if(e._def.typeName===C.ZodObject){let r=e.merge(t);return s(r,o)}else throw Error("Merging inputs works only for object schemas without effects.")},use(t){return s(e,[...o,t],a)},error(t){return s(e,o,t)},run:e===l?t=>S(({success:r,failure:i})=>async(u,m)=>{let x=await d(m);try{return r(await t({ctx:x}))}catch(c){if(a)return i(a({error:c,ctx:x}));throw c}}):e===l?void 0:t=>S(({success:r,failure:i,invalid:u})=>{let m=w.formData(e);return async(x,c)=>{let y=await d(c),p=m.safeParse(c);if(!p.success)return u(p.error.format());let h=p.data;try{return r(await t({input:h,ctx:y}))}catch(E){if(a)return i(a({error:E,ctx:y}));throw E}}})}}var b=s(l);export{S as createFormAction,b as formAction};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -14,7 +14,9 @@
   "scripts": {
     "build": "tsup",
     "test": "vitest",
-    "typecheck": "vitest --typecheck"
+    "typecheck": "vitest --typecheck",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check"
   },
   "exports": {
     ".": {
@@ -51,6 +53,7 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "next": "^14.0.2",
+    "prettier": "^3.3.3",
     "react-render-prop-type": "^0.1.0",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",