react-form-action 0.4.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -5
- package/dist/client.d.mts +7 -6
- package/dist/client.mjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -25,6 +25,10 @@ End-to-end typesafe success, error & validation state control for Next.js 14 for
|
|
|
25
25
|
npm i react-form-action zod-form-data
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
<a aria-label="NPM version" href="https://www.npmjs.com/package/react-form-action">
|
|
29
|
+
<img alt="NPM Version" src="https://img.shields.io/npm/v/react-form-action?style=for-the-badge&labelColor=24292e">
|
|
30
|
+
</a>
|
|
31
|
+
|
|
28
32
|
## Usage
|
|
29
33
|
|
|
30
34
|
### `formAction` builder
|
|
@@ -70,9 +74,7 @@ export const signIn = authAction
|
|
|
70
74
|
return t("verificationEmail.success");
|
|
71
75
|
});
|
|
72
76
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
export const signUp = formAction
|
|
77
|
+
export const signUp = authAction
|
|
76
78
|
.input(
|
|
77
79
|
z
|
|
78
80
|
.object({
|
|
@@ -88,9 +90,13 @@ export const signUp = formAction
|
|
|
88
90
|
.run(async ({ ctx: { t }, input: { email, password } }) => {
|
|
89
91
|
// 🎉 passwords match!
|
|
90
92
|
|
|
91
|
-
await db.signUp({ email, password });
|
|
93
|
+
const tokenData = await db.signUp({ email, password });
|
|
94
|
+
|
|
95
|
+
if (!tokenData) {
|
|
96
|
+
return t("signUp.emailVerificationRequired");
|
|
97
|
+
}
|
|
92
98
|
|
|
93
|
-
return "
|
|
99
|
+
return t("singUp.success");
|
|
94
100
|
});
|
|
95
101
|
```
|
|
96
102
|
|
package/dist/client.d.mts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { FormHTMLAttributes } from 'react';
|
|
3
3
|
import { RenderProp } from 'react-render-prop-type';
|
|
4
|
-
import { b as InitialState, I as InvalidState, a as FailureState, S as SuccessState
|
|
4
|
+
import { F as FormState, b as InitialState, I as InvalidState, a as FailureState, S as SuccessState } from './createFormAction-3a51310f.js';
|
|
5
5
|
import { useFormStatus } from 'react-dom';
|
|
6
6
|
|
|
7
|
-
type FormStateProps<Data,
|
|
8
|
-
action: (state: FormState<Data,
|
|
7
|
+
type FormStateProps<Data, Error, ValidationError, Payload> = {
|
|
8
|
+
action: (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>;
|
|
9
9
|
initialData: Data;
|
|
10
10
|
permalink?: string;
|
|
11
11
|
};
|
|
@@ -13,12 +13,13 @@ declare function initial<Data>(data: Data): InitialState<Data>;
|
|
|
13
13
|
type FormMetaState<T extends FormState<unknown, unknown, unknown>> = T & {
|
|
14
14
|
isPending: boolean;
|
|
15
15
|
isInitial: T["type"] extends "initial" ? true : false;
|
|
16
|
+
isInvalid: T["type"] extends "invalid" ? true : false;
|
|
16
17
|
isFailure: T["type"] extends "failure" ? true : false;
|
|
17
18
|
isSuccess: T["type"] extends "success" ? true : false;
|
|
18
|
-
isInvalid: T["type"] extends "invalid" ? true : false;
|
|
19
19
|
};
|
|
20
|
-
|
|
20
|
+
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>>>;
|
|
21
|
+
declare function Form<Data, Error, ValidationError>({ children, action, initialData, permalink, ...props }: FormProps<Data, Error, ValidationError>): React__default.JSX.Element;
|
|
21
22
|
|
|
22
23
|
declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
|
|
23
24
|
|
|
24
|
-
export { Form, FormStatus, initial };
|
|
25
|
+
export { Form, FormProps, FormStateProps, FormStatus, initial };
|
package/dist/client.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import a from"react";import{
|
|
1
|
+
"use client";import a from"react";import{useActionState as u}from"react";import{useFormStatus as p}from"react-dom";function e({children:t}){return t(p())}function d(t){return{type:"initial",data:t,error:null,validationError:null}}function E({children:t,action:o,initialData:i,permalink:n,...s}){let[r,l]=u(o,d(i),n);return a.createElement("form",{action:l,...s},a.createElement(e,null,({pending:m})=>t({...r,isPending:m,isInitial:r.type==="initial",isInvalid:r.type==="invalid",isFailure:r.type==="failure",isSuccess:r.type==="success"})))}export{E as Form,e as FormStatus,d as initial};
|
package/dist/index.mjs
CHANGED
|
@@ -1 +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
|
|
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 d(a){return{type:"invalid",data:null,error:null,validationError:a}}return(a,S)=>e({success:o,failure:n,invalid:d})(a,S)}import{ZodFirstPartyTypeKind as C}from"zod";import{zfd as w}from"zod-form-data";var l=Symbol();function s(e,o=[],n){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,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 s(r,o)}else throw Error("Merging inputs works only for object schemas without effects.")},use(t){return s(e,[...o,t],n)},error(t){return s(e,o,t)},run:e===l?t=>y(({success:r,failure:i})=>async(u,x)=>{let m=await d(x);try{return r(await t({ctx:m}))}catch(c){if(n)return i(n({error:c,ctx:m}));throw c}}):e===l?void 0:t=>y(({success:r,failure:i,invalid:u})=>{let x=w.formData(e);return async(m,c)=>{let f=await d(c),p=x.safeParse(c);if(!p.success)return u(p.error.flatten());let h=p.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=s(l);export{y as createFormAction,b as formAction};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-form-action",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "State management helpers for the react form actions.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
"author": "Miroslav Petrik",
|
|
43
43
|
"license": "MIT",
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"react": ">=18.
|
|
46
|
-
"react-dom": ">=18.
|
|
45
|
+
"react": ">=18.3",
|
|
46
|
+
"react-dom": ">=18.3",
|
|
47
47
|
"zod": "^3",
|
|
48
48
|
"zod-form-data": "^2"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@types/react": "^18.
|
|
52
|
-
"@types/react-dom": "^18.
|
|
51
|
+
"@types/react": "^18.3.5",
|
|
52
|
+
"@types/react-dom": "^18.3.0",
|
|
53
53
|
"next": "^14.0.2",
|
|
54
54
|
"react-render-prop-type": "^0.1.0",
|
|
55
55
|
"tsup": "^7.2.0",
|