react-server-actions 1.0.3 → 1.0.4
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 -0
- package/dist/client/helpers.d.ts +28 -1
- package/dist/client/helpers.d.ts.map +1 -1
- package/dist/client/helpers.js +56 -7
- package/dist/client/helpers.js.map +1 -1
- package/dist/client/index.d.ts +6 -2
- package/dist/client/index.d.ts.map +1 -1
- package/dist/client/index.js +35 -9
- package/dist/client/index.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +9 -10
package/README.md
CHANGED
|
@@ -124,6 +124,17 @@ return (
|
|
|
124
124
|
);
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
+
## Caveats
|
|
128
|
+
|
|
129
|
+
### datetime-local input type
|
|
130
|
+
|
|
131
|
+
TODO: Explain how to use it
|
|
132
|
+
|
|
133
|
+
### select defaultValue
|
|
134
|
+
|
|
135
|
+
In react 19 there is an open issue https://github.com/facebook/react/issues/30580 that prevents the defaultValue to correctly set the select value.
|
|
136
|
+
According to this comment https://github.com/facebook/react/issues/30580#issuecomment-2537962675 there is a workaround by setting the 'key' attribute of the select
|
|
137
|
+
|
|
127
138
|
## Best Practices
|
|
128
139
|
|
|
129
140
|
1. Always define your schemas in a separate file for better reusability
|
package/dist/client/helpers.d.ts
CHANGED
|
@@ -1,3 +1,30 @@
|
|
|
1
1
|
import { z } from 'zod';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Get the html5 validation attributes from a Zod schema field
|
|
4
|
+
* @param schema - The Zod schema
|
|
5
|
+
* @param path - The path to the field in the schema
|
|
6
|
+
* @returns The validation attributes for the field
|
|
7
|
+
* @note It would be cool to infer also the "type" attribute of the field, but this would not be consistent because a zod rule is not a 1-1 relation with an html input.
|
|
8
|
+
* For example, a zod.number() could be an <input type="number" /> but also a <select>. A z.date() could be represented by a <input type="date" /> but also a <input type="datetime-local" />.
|
|
9
|
+
* We could make a "guess" based on the zod rule, and then could be overriden by the user, but this would lead to confusion.
|
|
10
|
+
* So we leave it as a parameter for now.
|
|
11
|
+
*/
|
|
12
|
+
export declare function getZodValidationAttributes(schema: z.ZodTypeAny, path: string[], options?: {
|
|
13
|
+
inferTypeAttr?: boolean;
|
|
14
|
+
}): {
|
|
15
|
+
type: 'string' | 'number' | 'date' | 'boolean' | 'enum';
|
|
16
|
+
attrs: Record<string, string | number | boolean>;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Convert a date to an <input type="date"> default value
|
|
20
|
+
* @param date - The date to convert
|
|
21
|
+
* @returns The input default value
|
|
22
|
+
*/
|
|
23
|
+
export declare const dateToInputDefaultValue: (date: Date) => string | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* Convert a date to an <input type="datetime-local"> default value
|
|
26
|
+
* @param date - The date to convert
|
|
27
|
+
* @returns The input default value
|
|
28
|
+
*/
|
|
29
|
+
export declare const datetimeToInputDefaultValue: (date: Date) => string;
|
|
3
30
|
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/client/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,CAAC,CAAC,UAAU,EACpB,IAAI,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/client/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,CAAC,CAAC,UAAU,EACpB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,CAAC,EAAE;IACR,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GACA;IACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CAClD,CAgHA;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,SAAU,IAAI,uBAKjD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,SAAU,IAAI,WAKrD,CAAC"}
|
package/dist/client/helpers.js
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
import { z } from 'zod';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Get the html5 validation attributes from a Zod schema field
|
|
4
|
+
* @param schema - The Zod schema
|
|
5
|
+
* @param path - The path to the field in the schema
|
|
6
|
+
* @returns The validation attributes for the field
|
|
7
|
+
* @note It would be cool to infer also the "type" attribute of the field, but this would not be consistent because a zod rule is not a 1-1 relation with an html input.
|
|
8
|
+
* For example, a zod.number() could be an <input type="number" /> but also a <select>. A z.date() could be represented by a <input type="date" /> but also a <input type="datetime-local" />.
|
|
9
|
+
* We could make a "guess" based on the zod rule, and then could be overriden by the user, but this would lead to confusion.
|
|
10
|
+
* So we leave it as a parameter for now.
|
|
11
|
+
*/
|
|
12
|
+
export function getZodValidationAttributes(schema, path, options) {
|
|
3
13
|
const def = schema._def;
|
|
14
|
+
let type = 'string';
|
|
4
15
|
const attrs = {};
|
|
5
16
|
// First handle object type to get to the actual field
|
|
6
17
|
if (def.typeName === 'ZodObject' && path.length > 0) {
|
|
7
18
|
const shape = def.shape();
|
|
8
19
|
const field = shape[path[0]];
|
|
9
|
-
return field
|
|
20
|
+
return field
|
|
21
|
+
? getZodValidationAttributes(field, path.slice(1))
|
|
22
|
+
: { type, attrs };
|
|
10
23
|
}
|
|
11
24
|
// Now we're at the actual field, check if it's optional/nullable
|
|
12
25
|
const isOptionalType = schema instanceof z.ZodOptional;
|
|
@@ -14,12 +27,13 @@ export function getZodValidationAttributes(schema, path) {
|
|
|
14
27
|
// If it's an optional/nullable type, get attributes from the inner type but don't set required
|
|
15
28
|
if (isOptionalType || isNullableType) {
|
|
16
29
|
const innerAttrs = getZodValidationAttributes(def.innerType, path);
|
|
17
|
-
delete innerAttrs.required;
|
|
30
|
+
delete innerAttrs.attrs.required;
|
|
18
31
|
return innerAttrs;
|
|
19
32
|
}
|
|
20
33
|
// Set required by default for non-optional/nullable fields
|
|
21
34
|
attrs.required = true;
|
|
22
35
|
if (def.typeName === 'ZodString') {
|
|
36
|
+
type = 'string';
|
|
23
37
|
attrs.type = 'text';
|
|
24
38
|
if (def.checks) {
|
|
25
39
|
for (const check of def.checks) {
|
|
@@ -35,14 +49,12 @@ export function getZodValidationAttributes(schema, path) {
|
|
|
35
49
|
if (check.kind === 'url') {
|
|
36
50
|
attrs.type = 'url';
|
|
37
51
|
}
|
|
38
|
-
if (check.kind === 'password') {
|
|
39
|
-
attrs.type = 'password';
|
|
40
|
-
}
|
|
41
52
|
}
|
|
42
53
|
}
|
|
43
54
|
}
|
|
44
55
|
if (def.typeName === 'ZodNumber' ||
|
|
45
56
|
(def.typeName === 'ZodCoerce' && def.schema._def.typeName === 'ZodNumber')) {
|
|
57
|
+
type = 'number';
|
|
46
58
|
attrs.type = 'number';
|
|
47
59
|
if (def.checks || (def.schema && def.schema._def.checks)) {
|
|
48
60
|
const checks = def.checks || def.schema._def.checks;
|
|
@@ -61,6 +73,7 @@ export function getZodValidationAttributes(schema, path) {
|
|
|
61
73
|
}
|
|
62
74
|
if (def.typeName === 'ZodDate' ||
|
|
63
75
|
(def.typeName === 'ZodCoerce' && def.schema._def.typeName === 'ZodDate')) {
|
|
76
|
+
type = 'date';
|
|
64
77
|
attrs.type = 'date';
|
|
65
78
|
if (def.checks || (def.schema && def.schema._def.checks)) {
|
|
66
79
|
const checks = def.checks || def.schema._def.checks;
|
|
@@ -74,6 +87,42 @@ export function getZodValidationAttributes(schema, path) {
|
|
|
74
87
|
}
|
|
75
88
|
}
|
|
76
89
|
}
|
|
77
|
-
|
|
90
|
+
if (def.typeName === 'ZodBoolean' ||
|
|
91
|
+
(def.typeName === 'ZodCoerce' && def.schema._def.typeName === 'ZodBoolean')) {
|
|
92
|
+
type = 'boolean';
|
|
93
|
+
attrs.type = 'checkbox';
|
|
94
|
+
}
|
|
95
|
+
if (def.typeName === 'ZodEnum' ||
|
|
96
|
+
(def.typeName === 'ZodCoerce' && def.schema._def.typeName === 'ZodEnum')) {
|
|
97
|
+
type = 'enum';
|
|
98
|
+
attrs.type = 'radio';
|
|
99
|
+
}
|
|
100
|
+
// If not specified, remove the type attribute
|
|
101
|
+
if (!options?.inferTypeAttr) {
|
|
102
|
+
delete attrs.type;
|
|
103
|
+
}
|
|
104
|
+
return { type, attrs };
|
|
78
105
|
}
|
|
106
|
+
/**
|
|
107
|
+
* Convert a date to an <input type="date"> default value
|
|
108
|
+
* @param date - The date to convert
|
|
109
|
+
* @returns The input default value
|
|
110
|
+
*/
|
|
111
|
+
export const dateToInputDefaultValue = (date) => {
|
|
112
|
+
const newDate = date ? new Date(date) : new Date();
|
|
113
|
+
return new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000)
|
|
114
|
+
.toISOString()
|
|
115
|
+
.split('T')[0];
|
|
116
|
+
};
|
|
117
|
+
/**
|
|
118
|
+
* Convert a date to an <input type="datetime-local"> default value
|
|
119
|
+
* @param date - The date to convert
|
|
120
|
+
* @returns The input default value
|
|
121
|
+
*/
|
|
122
|
+
export const datetimeToInputDefaultValue = (date) => {
|
|
123
|
+
const newDate = date ? new Date(date) : new Date();
|
|
124
|
+
return new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000)
|
|
125
|
+
.toISOString()
|
|
126
|
+
.slice(0, -1);
|
|
127
|
+
};
|
|
79
128
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/client/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,UAAU,0BAA0B,CACxC,MAAoB,EACpB,IAAc;
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/client/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB;;;;;;;;;GASG;AACH,MAAM,UAAU,0BAA0B,CACxC,MAAoB,EACpB,IAAc,EACd,OAEC;IAKD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC;IACxB,IAAI,IAAI,GAAsD,QAAQ,CAAC;IACvE,MAAM,KAAK,GAA8C,EAAE,CAAC;IAE5D,sDAAsD;IACtD,IAAI,GAAG,CAAC,QAAQ,KAAK,WAAW,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACpD,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;QAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAuB,CAAC,CAAC;QACnD,OAAO,KAAK;YACV,CAAC,CAAC,0BAA0B,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAClD,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACtB,CAAC;IAED,iEAAiE;IACjE,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC,CAAC,WAAW,CAAC;IACvD,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC,CAAC,WAAW,CAAC;IAEvD,+FAA+F;IAC/F,IAAI,cAAc,IAAI,cAAc,EAAE,CAAC;QACrC,MAAM,UAAU,GAAG,0BAA0B,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QACnE,OAAO,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjC,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,2DAA2D;IAC3D,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;IAEtB,IAAI,GAAG,CAAC,QAAQ,KAAK,WAAW,EAAE,CAAC;QACjC,IAAI,GAAG,QAAQ,CAAC;QAChB,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;QACpB,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;YACf,KAAK,MAAM,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;gBAC/B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;gBAChC,CAAC;gBACD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;gBAChC,CAAC;gBACD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAC3B,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;gBACvB,CAAC;gBACD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,IACE,GAAG,CAAC,QAAQ,KAAK,WAAW;QAC5B,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,EAC1E,CAAC;QACD,IAAI,GAAG,QAAQ,CAAC;QAChB,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;QACtB,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YACzD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;YACpD,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;gBAC3B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC;gBAC1B,CAAC;gBACD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC;gBAC1B,CAAC;gBACD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;gBACjB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,IACE,GAAG,CAAC,QAAQ,KAAK,SAAS;QAC1B,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,EACxE,CAAC;QACD,IAAI,GAAG,MAAM,CAAC;QACd,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;QACpB,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YACzD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;YACpD,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;gBAC3B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtD,CAAC;gBACD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACzB,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,IACE,GAAG,CAAC,QAAQ,KAAK,YAAY;QAC7B,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,EAC3E,CAAC;QACD,IAAI,GAAG,SAAS,CAAC;QACjB,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;IAC1B,CAAC;IAED,IACE,GAAG,CAAC,QAAQ,KAAK,SAAS;QAC1B,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,EACxE,CAAC;QACD,IAAI,GAAG,MAAM,CAAC;QACd,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;IACvB,CAAC;IAED,8CAA8C;IAC9C,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAC,IAAI,CAAC;IACpB,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,IAAU,EAAE,EAAE;IACpD,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IACnD,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,iBAAiB,EAAE,GAAG,KAAK,CAAC;SACrE,WAAW,EAAE;SACb,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACnB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,IAAU,EAAE,EAAE;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IACnD,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,iBAAiB,EAAE,GAAG,KAAK,CAAC;SACrE,WAAW,EAAE;SACb,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC"}
|
package/dist/client/index.d.ts
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { z } from 'zod';
|
|
3
3
|
import type { ActionResult } from '../index.js';
|
|
4
|
-
|
|
4
|
+
type UseFieldReturn = {
|
|
5
5
|
invalid: string[] | undefined;
|
|
6
6
|
value: any;
|
|
7
7
|
input: {
|
|
8
8
|
id: string;
|
|
9
9
|
name: string;
|
|
10
|
-
defaultValue: any;
|
|
11
10
|
'aria-invalid': boolean;
|
|
11
|
+
autoComplete: 'on' | 'off' | undefined;
|
|
12
|
+
defaultValue?: string;
|
|
13
|
+
defaultChecked?: boolean;
|
|
12
14
|
};
|
|
13
15
|
};
|
|
16
|
+
export declare const useField: <Schema extends z.AnyZodObject>() => UseFieldReturn;
|
|
14
17
|
export declare function Form<Schema extends z.AnyZodObject>({ children, action, state, schema, className, reset, onSuccess, onError, }: {
|
|
15
18
|
children: React.ReactNode;
|
|
16
19
|
action: (payload: FormData) => void;
|
|
@@ -25,4 +28,5 @@ export declare function FormField<Schema extends z.AnyZodObject>({ render, name,
|
|
|
25
28
|
render: (field: ReturnType<typeof useField>) => React.ReactNode;
|
|
26
29
|
name: keyof z.TypeOf<Schema>;
|
|
27
30
|
}): React.JSX.Element;
|
|
31
|
+
export {};
|
|
28
32
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA0BhD,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QAEb,cAAc,EAAE,OAAO,CAAC;QACxB,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,SAAS,CAAC;QACvC,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,cAAc,CAAC,EAAE,OAAO,CAAC;KAC1B,CAAC;CACH,CAAC;AACF,eAAO,MAAM,QAAQ,GAAI,MAAM,SAAS,CAAC,CAAC,YAAY,OAAK,cA4C1D,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC,YAAY,EAAE,EAClD,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EACT,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,CACV,WAAW,EAAE,GAAG,EAChB,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,KACnC,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,qBAsBA;AAED,wBAAgB,SAAS,CAAC,MAAM,SAAS,CAAC,CAAC,YAAY,EAAE,EACvD,MAAM,EACN,IAAI,GACL,EAAE;IACD,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,IAAI,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;CAC9B,qBAOA"}
|
package/dist/client/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React, { useEffect, useRef } from 'react';
|
|
3
3
|
import { z } from 'zod';
|
|
4
|
-
import { getZodValidationAttributes } from './helpers.js';
|
|
4
|
+
import { dateToInputDefaultValue, getZodValidationAttributes, } from './helpers.js';
|
|
5
5
|
const FormContext = React.createContext({ state: undefined, schema: undefined });
|
|
6
6
|
const useForm = () => {
|
|
7
7
|
const context = React.useContext(FormContext);
|
|
@@ -12,27 +12,52 @@ const useForm = () => {
|
|
|
12
12
|
schema: context.schema,
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
-
const FieldContext = React.createContext({
|
|
15
|
+
const FieldContext = React.createContext({
|
|
16
|
+
name: '',
|
|
17
|
+
id: '',
|
|
18
|
+
});
|
|
16
19
|
export const useField = () => {
|
|
17
20
|
'use no memo'; // the useField hook should not be memoized because the value will change
|
|
18
|
-
const { name } = React.useContext(FieldContext);
|
|
21
|
+
const { name, id } = React.useContext(FieldContext);
|
|
19
22
|
const { state, schema } = useForm();
|
|
20
23
|
if (!state || !schema)
|
|
21
24
|
throw new Error('<FormField> must be used within a <Form>');
|
|
22
|
-
const id = React.useId();
|
|
23
25
|
// Get validation attributes from schema
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
+
const { type, attrs } = getZodValidationAttributes(schema, [name]);
|
|
27
|
+
// Create the field object
|
|
28
|
+
const field = {
|
|
26
29
|
invalid: state.invalid?.[name],
|
|
27
30
|
value: state.formData?.[name],
|
|
28
31
|
input: {
|
|
29
32
|
id: id,
|
|
30
33
|
name: name,
|
|
31
|
-
defaultValue: state.formData?.[name],
|
|
32
34
|
'aria-invalid': !!state.invalid?.[name],
|
|
33
|
-
|
|
35
|
+
autoComplete: undefined,
|
|
36
|
+
...attrs,
|
|
34
37
|
},
|
|
35
38
|
};
|
|
39
|
+
// Set the default value for mantaining the state across submissions
|
|
40
|
+
let defaultValue = state.formData?.[name];
|
|
41
|
+
if (defaultValue && defaultValue instanceof Date) {
|
|
42
|
+
defaultValue = dateToInputDefaultValue(defaultValue);
|
|
43
|
+
}
|
|
44
|
+
if (type === 'enum') {
|
|
45
|
+
field.input.defaultValue = defaultValue;
|
|
46
|
+
// TODO: This is not working if the input is a radio
|
|
47
|
+
// if the input is a radio, we don't know which of the inputs is this one
|
|
48
|
+
}
|
|
49
|
+
else if (type === 'boolean') {
|
|
50
|
+
field.input.defaultChecked = defaultValue;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
field.input.defaultValue = defaultValue;
|
|
54
|
+
}
|
|
55
|
+
// Set autocomplete for string inputs
|
|
56
|
+
if (type === 'string') {
|
|
57
|
+
field.input.autoComplete = 'on';
|
|
58
|
+
}
|
|
59
|
+
console.log(field);
|
|
60
|
+
return field;
|
|
36
61
|
};
|
|
37
62
|
export function Form({ children, action, state, schema, className, reset, onSuccess, onError, }) {
|
|
38
63
|
const formRef = useRef(null);
|
|
@@ -53,7 +78,8 @@ export function Form({ children, action, state, schema, className, reset, onSucc
|
|
|
53
78
|
React.createElement("form", { action: action, ref: formRef, className: className }, children)));
|
|
54
79
|
}
|
|
55
80
|
export function FormField({ render, name, }) {
|
|
56
|
-
|
|
81
|
+
const id = React.useId();
|
|
82
|
+
return (React.createElement(FieldContext.Provider, { value: { name: name, id } },
|
|
57
83
|
React.createElement(FormFieldRenderer, { render: render })));
|
|
58
84
|
}
|
|
59
85
|
function FormFieldRenderer({ render, }) {
|
package/dist/client/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/client/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/client/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EACL,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAGpC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;AAE5C,MAAM,OAAO,GAAG,GAAkC,EAAE;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC9C,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM;QACnC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IACjD,OAAO;QACL,KAAK,EAAE,OAAO,CAAC,KAA6B;QAC5C,MAAM,EAAE,OAAO,CAAC,MAAgB;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA+B;IACrE,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,EAAE;CACP,CAAC,CAAC;AAeH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAkD,EAAE;IAC1E,aAAa,CAAC,CAAC,yEAAyE;IACxF,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,EAAU,CAAC;IAE5C,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;QACnB,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAE9D,wCAAwC;IACxC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,0BAA0B,CAAC,MAAM,EAAE,CAAC,IAAc,CAAC,CAAC,CAAC;IAE7E,0BAA0B;IAC1B,MAAM,KAAK,GAAmB;QAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC;QAC9B,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC;QAC7B,KAAK,EAAE;YACL,EAAE,EAAE,EAAE;YACN,IAAI,EAAE,IAAc;YACpB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC;YACvC,YAAY,EAAE,SAAS;YACvB,GAAG,KAAK;SACT;KACF,CAAC;IAEF,oEAAoE;IACpE,IAAI,YAAY,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,YAAY,IAAI,YAAY,YAAY,IAAI,EAAE,CAAC;QACjD,YAAY,GAAG,uBAAuB,CAAC,YAAY,CAAC,CAAC;IACvD,CAAC;IACD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QACxC,oDAAoD;QACpD,yEAAyE;IAC3E,CAAC;SAAM,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QAC9B,KAAK,CAAC,KAAK,CAAC,cAAc,GAAG,YAAY,CAAC;IAC5C,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;IAC1C,CAAC;IACD,qCAAqC;IACrC,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QACtB,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAClC,CAAC;IACD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACnB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,UAAU,IAAI,CAAgC,EAClD,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EACT,OAAO,GAaR;IACC,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC9C,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QACpB,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YACrC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IACD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,SAAS,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QAC5C,8BAAM,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,IACrD,QAAQ,CACJ,CACc,CACxB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS,CAAgC,EACvD,MAAM,EACN,IAAI,GAIL;IACC,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAc,EAAE,EAAE,EAAE;QACxD,oBAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,CACf,CACzB,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAgC,EACxD,MAAM,GAGP;IACC,MAAM,KAAK,GAAG,QAAQ,EAAU,CAAC;IACjC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { dateToInputDefaultValue, datetimeToInputDefaultValue } from './client/helpers.js';
|
|
1
2
|
import { Form, FormField, useField } from './client/index.js';
|
|
2
3
|
import { action, actionWithParam } from './server/actions.js';
|
|
3
4
|
import { initialState, setInvalid } from './server/helpers.js';
|
|
4
5
|
import { type ActionResult, type ErrorActionResult, type FieldErrors, type IdleActionResult, type InvalidActionResult, type SuccessActionResult } from './server/types.js';
|
|
5
|
-
export { action, actionWithParam,
|
|
6
|
+
export { Form, FormField, action, actionWithParam, dateToInputDefaultValue, datetimeToInputDefaultValue, initialState, setInvalid, useField, };
|
|
6
7
|
export type { ActionResult, ErrorActionResult, FieldErrors, IdleActionResult, InvalidActionResult, SuccessActionResult, };
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,MAAM,EACN,eAAe,EACf,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,IAAI,EACJ,SAAS,EACT,MAAM,EACN,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC3B,YAAY,EACZ,UAAU,EACV,QAAQ,GACT,CAAC;AACF,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GACpB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { dateToInputDefaultValue, datetimeToInputDefaultValue, } from './client/helpers.js';
|
|
1
2
|
import { Form, FormField, useField } from './client/index.js';
|
|
2
3
|
import { action, actionWithParam } from './server/actions.js';
|
|
3
4
|
import { initialState, setInvalid } from './server/helpers.js';
|
|
4
5
|
import {} from './server/types.js';
|
|
5
|
-
export { action, actionWithParam,
|
|
6
|
+
export { Form, FormField, action, actionWithParam, dateToInputDefaultValue, datetimeToInputDefaultValue, initialState, setInvalid, useField, };
|
|
6
7
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAON,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,MAAM,EACN,eAAe,EACf,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,2BAA2B,GAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAON,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,IAAI,EACJ,SAAS,EACT,MAAM,EACN,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC3B,YAAY,EACZ,UAAU,EACV,QAAQ,GACT,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-server-actions",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "A package for working with actions in React and Next.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"next",
|
|
@@ -24,14 +24,6 @@
|
|
|
24
24
|
"files": [
|
|
25
25
|
"dist"
|
|
26
26
|
],
|
|
27
|
-
"scripts": {
|
|
28
|
-
"build": "tsc",
|
|
29
|
-
"check-exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
|
|
30
|
-
"check-format": "prettier --check .",
|
|
31
|
-
"ci": "npm run build && npm run check-format && npm run check-exports",
|
|
32
|
-
"format": "prettier --write .",
|
|
33
|
-
"prepublishOnly": "npm run ci"
|
|
34
|
-
},
|
|
35
27
|
"devDependencies": {
|
|
36
28
|
"@arethetypeswrong/cli": "^0.17.4",
|
|
37
29
|
"prettier": "^3.3.3",
|
|
@@ -41,5 +33,12 @@
|
|
|
41
33
|
"@types/react": ">=18.0.0",
|
|
42
34
|
"react": ">=18.0.0",
|
|
43
35
|
"zod": ">=3.22.4"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "tsc",
|
|
39
|
+
"check-exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
|
|
40
|
+
"check-format": "prettier --check .",
|
|
41
|
+
"ci": "npm run build && npm run check-format && npm run check-exports",
|
|
42
|
+
"format": "prettier --write ."
|
|
44
43
|
}
|
|
45
|
-
}
|
|
44
|
+
}
|