@weser/forms 0.0.17 → 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/dist/createForm.d.ts +253 -0
- package/dist/createForm.js +19 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -0
- package/dist/types.d.ts +9 -6
- package/dist/useField.d.ts +7 -7
- package/dist/useField.js +7 -5
- package/dist/useForm.d.ts +17 -9
- package/dist/useForm.js +19 -12
- package/dist/useForm.jsx +112 -0
- package/package.json +5 -2
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
import { ZodObject, ZodRawShape } from 'zod';
|
|
2
|
+
import type { ChangeEvent, ReactNode } from 'react';
|
|
3
|
+
export default function createForm<T extends ZodRawShape>(schema: ZodObject<T>): {
|
|
4
|
+
useForm: () => {
|
|
5
|
+
isValidating: boolean;
|
|
6
|
+
useFormField: <T_1 = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof T, options?: Omit<import("./types.js").Options<T_1, C>, "name" | "formatErrorMessage" | "_onInit" | "_onUpdate" | "_storedField">) => {
|
|
7
|
+
valid: boolean;
|
|
8
|
+
update: (data: Partial<import("./types.js").T_Field<T_1>>) => void;
|
|
9
|
+
reset: () => void;
|
|
10
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
11
|
+
errorMessage: string | undefined;
|
|
12
|
+
inputProps: {
|
|
13
|
+
onFocus: () => void;
|
|
14
|
+
onBlur: () => void;
|
|
15
|
+
value: any;
|
|
16
|
+
disabled: boolean;
|
|
17
|
+
name: string | undefined;
|
|
18
|
+
'data-valid': boolean;
|
|
19
|
+
onChange: (e: C) => void;
|
|
20
|
+
} | {
|
|
21
|
+
onFocus: () => void;
|
|
22
|
+
onBlur?: undefined;
|
|
23
|
+
value: any;
|
|
24
|
+
disabled: boolean;
|
|
25
|
+
name: string | undefined;
|
|
26
|
+
'data-valid': boolean;
|
|
27
|
+
onChange: (e: C) => void;
|
|
28
|
+
};
|
|
29
|
+
props: {
|
|
30
|
+
onFocus: () => void;
|
|
31
|
+
onBlur: () => void;
|
|
32
|
+
value: any;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
name: string | undefined;
|
|
35
|
+
valid: boolean;
|
|
36
|
+
errorMessage: string | undefined;
|
|
37
|
+
onChange: (e: C) => void;
|
|
38
|
+
} | {
|
|
39
|
+
onFocus: () => void;
|
|
40
|
+
onBlur?: undefined;
|
|
41
|
+
value: any;
|
|
42
|
+
disabled: boolean;
|
|
43
|
+
name: string | undefined;
|
|
44
|
+
valid: boolean;
|
|
45
|
+
errorMessage: string | undefined;
|
|
46
|
+
onChange: (e: C) => void;
|
|
47
|
+
};
|
|
48
|
+
_initial: {
|
|
49
|
+
value: T_1;
|
|
50
|
+
disabled: boolean;
|
|
51
|
+
touched: boolean;
|
|
52
|
+
dirty: boolean;
|
|
53
|
+
valid: boolean;
|
|
54
|
+
errorMessage: string | undefined;
|
|
55
|
+
};
|
|
56
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
57
|
+
value: T_1;
|
|
58
|
+
disabled: boolean;
|
|
59
|
+
touched: boolean;
|
|
60
|
+
dirty: boolean;
|
|
61
|
+
};
|
|
62
|
+
handleSubmit: (onSubmit: (data: import("zod/v4/core").$InferObjectOutput<T, {}>) => void, onError?: ((issues: import("zod/v4/core").$ZodIssue[]) => void) | undefined) => (e: import("react").FormEvent<HTMLFormElement>) => Promise<void>;
|
|
63
|
+
checkDirty: () => boolean;
|
|
64
|
+
reset: () => void;
|
|
65
|
+
};
|
|
66
|
+
useFormContext: () => {
|
|
67
|
+
isValidating: boolean;
|
|
68
|
+
useFormField: <T_1 = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof T, options?: Omit<import("./types.js").Options<T_1, C>, "name" | "formatErrorMessage" | "_onInit" | "_onUpdate" | "_storedField">) => {
|
|
69
|
+
valid: boolean;
|
|
70
|
+
update: (data: Partial<import("./types.js").T_Field<T_1>>) => void;
|
|
71
|
+
reset: () => void;
|
|
72
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
73
|
+
errorMessage: string | undefined;
|
|
74
|
+
inputProps: {
|
|
75
|
+
onFocus: () => void;
|
|
76
|
+
onBlur: () => void;
|
|
77
|
+
value: any;
|
|
78
|
+
disabled: boolean;
|
|
79
|
+
name: string | undefined;
|
|
80
|
+
'data-valid': boolean;
|
|
81
|
+
onChange: (e: C) => void;
|
|
82
|
+
} | {
|
|
83
|
+
onFocus: () => void;
|
|
84
|
+
onBlur?: undefined;
|
|
85
|
+
value: any;
|
|
86
|
+
disabled: boolean;
|
|
87
|
+
name: string | undefined;
|
|
88
|
+
'data-valid': boolean;
|
|
89
|
+
onChange: (e: C) => void;
|
|
90
|
+
};
|
|
91
|
+
props: {
|
|
92
|
+
onFocus: () => void;
|
|
93
|
+
onBlur: () => void;
|
|
94
|
+
value: any;
|
|
95
|
+
disabled: boolean;
|
|
96
|
+
name: string | undefined;
|
|
97
|
+
valid: boolean;
|
|
98
|
+
errorMessage: string | undefined;
|
|
99
|
+
onChange: (e: C) => void;
|
|
100
|
+
} | {
|
|
101
|
+
onFocus: () => void;
|
|
102
|
+
onBlur?: undefined;
|
|
103
|
+
value: any;
|
|
104
|
+
disabled: boolean;
|
|
105
|
+
name: string | undefined;
|
|
106
|
+
valid: boolean;
|
|
107
|
+
errorMessage: string | undefined;
|
|
108
|
+
onChange: (e: C) => void;
|
|
109
|
+
};
|
|
110
|
+
_initial: {
|
|
111
|
+
value: T_1;
|
|
112
|
+
disabled: boolean;
|
|
113
|
+
touched: boolean;
|
|
114
|
+
dirty: boolean;
|
|
115
|
+
valid: boolean;
|
|
116
|
+
errorMessage: string | undefined;
|
|
117
|
+
};
|
|
118
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
119
|
+
value: T_1;
|
|
120
|
+
disabled: boolean;
|
|
121
|
+
touched: boolean;
|
|
122
|
+
dirty: boolean;
|
|
123
|
+
};
|
|
124
|
+
handleSubmit: (onSubmit: (data: import("zod/v4/core").$InferObjectOutput<T, {}>) => void, onError?: ((issues: import("zod/v4/core").$ZodIssue[]) => void) | undefined) => (e: import("react").FormEvent<HTMLFormElement>) => Promise<void>;
|
|
125
|
+
checkDirty: () => boolean;
|
|
126
|
+
reset: () => void;
|
|
127
|
+
};
|
|
128
|
+
FormProvider: import("react").ComponentType<{
|
|
129
|
+
value: {
|
|
130
|
+
isValidating: boolean;
|
|
131
|
+
useFormField: <T_1 = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof T, options?: Omit<import("./types.js").Options<T_1, C>, "name" | "formatErrorMessage" | "_onInit" | "_onUpdate" | "_storedField">) => {
|
|
132
|
+
valid: boolean;
|
|
133
|
+
update: (data: Partial<import("./types.js").T_Field<T_1>>) => void;
|
|
134
|
+
reset: () => void;
|
|
135
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
136
|
+
errorMessage: string | undefined;
|
|
137
|
+
inputProps: {
|
|
138
|
+
onFocus: () => void;
|
|
139
|
+
onBlur: () => void;
|
|
140
|
+
value: any;
|
|
141
|
+
disabled: boolean;
|
|
142
|
+
name: string | undefined;
|
|
143
|
+
'data-valid': boolean;
|
|
144
|
+
onChange: (e: C) => void;
|
|
145
|
+
} | {
|
|
146
|
+
onFocus: () => void;
|
|
147
|
+
onBlur?: undefined;
|
|
148
|
+
value: any;
|
|
149
|
+
disabled: boolean;
|
|
150
|
+
name: string | undefined;
|
|
151
|
+
'data-valid': boolean;
|
|
152
|
+
onChange: (e: C) => void;
|
|
153
|
+
};
|
|
154
|
+
props: {
|
|
155
|
+
onFocus: () => void;
|
|
156
|
+
onBlur: () => void;
|
|
157
|
+
value: any;
|
|
158
|
+
disabled: boolean;
|
|
159
|
+
name: string | undefined;
|
|
160
|
+
valid: boolean;
|
|
161
|
+
errorMessage: string | undefined;
|
|
162
|
+
onChange: (e: C) => void;
|
|
163
|
+
} | {
|
|
164
|
+
onFocus: () => void;
|
|
165
|
+
onBlur?: undefined;
|
|
166
|
+
value: any;
|
|
167
|
+
disabled: boolean;
|
|
168
|
+
name: string | undefined;
|
|
169
|
+
valid: boolean;
|
|
170
|
+
errorMessage: string | undefined;
|
|
171
|
+
onChange: (e: C) => void;
|
|
172
|
+
};
|
|
173
|
+
_initial: {
|
|
174
|
+
value: T_1;
|
|
175
|
+
disabled: boolean;
|
|
176
|
+
touched: boolean;
|
|
177
|
+
dirty: boolean;
|
|
178
|
+
valid: boolean;
|
|
179
|
+
errorMessage: string | undefined;
|
|
180
|
+
};
|
|
181
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
182
|
+
value: T_1;
|
|
183
|
+
disabled: boolean;
|
|
184
|
+
touched: boolean;
|
|
185
|
+
dirty: boolean;
|
|
186
|
+
};
|
|
187
|
+
handleSubmit: (onSubmit: (data: import("zod/v4/core").$InferObjectOutput<T, {}>) => void, onError?: ((issues: import("zod/v4/core").$ZodIssue[]) => void) | undefined) => (e: import("react").FormEvent<HTMLFormElement>) => Promise<void>;
|
|
188
|
+
checkDirty: () => boolean;
|
|
189
|
+
reset: () => void;
|
|
190
|
+
};
|
|
191
|
+
} & {
|
|
192
|
+
children?: ReactNode;
|
|
193
|
+
}>;
|
|
194
|
+
Field: <T_2 = string, C_1 = ChangeEvent<HTMLInputElement>>({ name, children, ...options }: {
|
|
195
|
+
name: keyof T;
|
|
196
|
+
children: (field: {
|
|
197
|
+
valid: boolean;
|
|
198
|
+
update: (data: Partial<import("./types.js").T_Field<T_2>>) => void;
|
|
199
|
+
reset: () => void;
|
|
200
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
201
|
+
errorMessage: string | undefined;
|
|
202
|
+
inputProps: {
|
|
203
|
+
onFocus: () => void;
|
|
204
|
+
onBlur: () => void;
|
|
205
|
+
value: any;
|
|
206
|
+
disabled: boolean;
|
|
207
|
+
name: string | undefined;
|
|
208
|
+
'data-valid': boolean;
|
|
209
|
+
onChange: (e: C_1) => void;
|
|
210
|
+
} | {
|
|
211
|
+
onFocus: () => void;
|
|
212
|
+
onBlur?: undefined;
|
|
213
|
+
value: any;
|
|
214
|
+
disabled: boolean;
|
|
215
|
+
name: string | undefined;
|
|
216
|
+
'data-valid': boolean;
|
|
217
|
+
onChange: (e: C_1) => void;
|
|
218
|
+
};
|
|
219
|
+
props: {
|
|
220
|
+
onFocus: () => void;
|
|
221
|
+
onBlur: () => void;
|
|
222
|
+
value: any;
|
|
223
|
+
disabled: boolean;
|
|
224
|
+
name: string | undefined;
|
|
225
|
+
valid: boolean;
|
|
226
|
+
errorMessage: string | undefined;
|
|
227
|
+
onChange: (e: C_1) => void;
|
|
228
|
+
} | {
|
|
229
|
+
onFocus: () => void;
|
|
230
|
+
onBlur?: undefined;
|
|
231
|
+
value: any;
|
|
232
|
+
disabled: boolean;
|
|
233
|
+
name: string | undefined;
|
|
234
|
+
valid: boolean;
|
|
235
|
+
errorMessage: string | undefined;
|
|
236
|
+
onChange: (e: C_1) => void;
|
|
237
|
+
};
|
|
238
|
+
_initial: {
|
|
239
|
+
value: T_2;
|
|
240
|
+
disabled: boolean;
|
|
241
|
+
touched: boolean;
|
|
242
|
+
dirty: boolean;
|
|
243
|
+
valid: boolean;
|
|
244
|
+
errorMessage: string | undefined;
|
|
245
|
+
};
|
|
246
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
247
|
+
value: T_2;
|
|
248
|
+
disabled: boolean;
|
|
249
|
+
touched: boolean;
|
|
250
|
+
dirty: boolean;
|
|
251
|
+
}) => ReactNode;
|
|
252
|
+
} & import("./types.js").Options<T_2, C_1>) => ReactNode;
|
|
253
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createContext } from '@weser/context';
|
|
2
|
+
import _useForm from './useForm.js';
|
|
3
|
+
export default function createForm(schema) {
|
|
4
|
+
function useForm() {
|
|
5
|
+
return _useForm(schema);
|
|
6
|
+
}
|
|
7
|
+
const [useFormContext, FormProvider] = createContext(null);
|
|
8
|
+
function Field({ name, children, ...options }) {
|
|
9
|
+
const { useFormField } = useFormContext();
|
|
10
|
+
const field = useFormField(name, options);
|
|
11
|
+
return children(field);
|
|
12
|
+
}
|
|
13
|
+
return {
|
|
14
|
+
useForm,
|
|
15
|
+
useFormContext,
|
|
16
|
+
FormProvider,
|
|
17
|
+
Field,
|
|
18
|
+
};
|
|
19
|
+
}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { ZodObject } from 'zod';
|
|
1
2
|
import { $ZodIssue } from 'zod/v4/core';
|
|
2
|
-
export type
|
|
3
|
+
export type T_FieldName<T extends ZodObject<any>> = keyof T['shape'];
|
|
4
|
+
export type T_Field<T> = {
|
|
3
5
|
value: T;
|
|
4
6
|
disabled: boolean;
|
|
5
7
|
touched: boolean;
|
|
@@ -7,15 +9,16 @@ export type Field<T> = {
|
|
|
7
9
|
valid: boolean;
|
|
8
10
|
errorMessage?: string;
|
|
9
11
|
};
|
|
10
|
-
export type Options<T> = {
|
|
12
|
+
export type Options<T, C> = {
|
|
11
13
|
name?: string;
|
|
12
14
|
value?: T;
|
|
13
15
|
disabled?: boolean;
|
|
14
16
|
touched?: boolean;
|
|
15
17
|
showValidationOn?: 'submit' | 'blur' | 'change';
|
|
16
|
-
|
|
18
|
+
parseEvent?: (e: C) => T;
|
|
19
|
+
formatValue?: (value: T) => any;
|
|
17
20
|
formatErrorMessage?: (error: $ZodIssue, value: T, name?: string) => string;
|
|
18
|
-
_onInit?: (field:
|
|
19
|
-
_onUpdate?: (field: Partial<
|
|
20
|
-
_storedField?:
|
|
21
|
+
_onInit?: (field: T_Field<T>) => void;
|
|
22
|
+
_onUpdate?: (field: Partial<T_Field<T>>) => void;
|
|
23
|
+
_storedField?: T_Field<T>;
|
|
21
24
|
};
|
package/dist/useField.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { ChangeEvent } from 'react';
|
|
2
2
|
import { ZodType } from 'zod';
|
|
3
3
|
import { $ZodIssue } from 'zod/v4/core';
|
|
4
|
-
import {
|
|
5
|
-
export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn,
|
|
4
|
+
import { T_Field, Options } from './types.js';
|
|
5
|
+
export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn, parseEvent, formatValue, formatErrorMessage, _onInit, _onUpdate, _storedField, }?: Options<T, C>): {
|
|
6
6
|
valid: boolean;
|
|
7
|
-
update: (data: Partial<
|
|
7
|
+
update: (data: Partial<T_Field<T>>) => void;
|
|
8
8
|
reset: () => void;
|
|
9
9
|
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
10
10
|
errorMessage: string | undefined;
|
|
11
11
|
inputProps: {
|
|
12
12
|
onFocus: () => void;
|
|
13
13
|
onBlur: () => void;
|
|
14
|
-
value:
|
|
14
|
+
value: any;
|
|
15
15
|
disabled: boolean;
|
|
16
16
|
name: string | undefined;
|
|
17
17
|
'data-valid': boolean;
|
|
@@ -19,7 +19,7 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
|
|
|
19
19
|
} | {
|
|
20
20
|
onFocus: () => void;
|
|
21
21
|
onBlur?: undefined;
|
|
22
|
-
value:
|
|
22
|
+
value: any;
|
|
23
23
|
disabled: boolean;
|
|
24
24
|
name: string | undefined;
|
|
25
25
|
'data-valid': boolean;
|
|
@@ -28,7 +28,7 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
|
|
|
28
28
|
props: {
|
|
29
29
|
onFocus: () => void;
|
|
30
30
|
onBlur: () => void;
|
|
31
|
-
value:
|
|
31
|
+
value: any;
|
|
32
32
|
disabled: boolean;
|
|
33
33
|
name: string | undefined;
|
|
34
34
|
valid: boolean;
|
|
@@ -37,7 +37,7 @@ export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(
|
|
|
37
37
|
} | {
|
|
38
38
|
onFocus: () => void;
|
|
39
39
|
onBlur?: undefined;
|
|
40
|
-
value:
|
|
40
|
+
value: any;
|
|
41
41
|
disabled: boolean;
|
|
42
42
|
name: string | undefined;
|
|
43
43
|
valid: boolean;
|
package/dist/useField.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
2
|
import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
const defaultParseEvent = (e) => e.target.value;
|
|
4
|
+
const defaultFormatValue = (value) => value;
|
|
5
|
+
export default function useField(schema, { name, value = '', disabled = false, touched = false, showValidationOn = 'submit', parseEvent = (defaultParseEvent), formatValue = (defaultFormatValue), formatErrorMessage = defaultFormatErrorMessage, _onInit, _onUpdate, _storedField, } = {}) {
|
|
5
6
|
function _validate(value) {
|
|
6
7
|
const { success, error } = schema.safeParse(value);
|
|
7
8
|
if (!success && error.issues.length > 0) {
|
|
@@ -62,7 +63,7 @@ export default function useField(schema, { name, value = '', disabled = false, t
|
|
|
62
63
|
return schema.safeParse(field.value);
|
|
63
64
|
}
|
|
64
65
|
function onChange(e) {
|
|
65
|
-
update({ value:
|
|
66
|
+
update({ value: parseEvent(e) });
|
|
66
67
|
}
|
|
67
68
|
// Only show validation error when is touched
|
|
68
69
|
const valid = !field.touched ? true : !field.errorMessage;
|
|
@@ -88,8 +89,9 @@ export default function useField(schema, { name, value = '', disabled = false, t
|
|
|
88
89
|
errorMessage,
|
|
89
90
|
}));
|
|
90
91
|
}
|
|
92
|
+
const inputValue = formatValue(field.value);
|
|
91
93
|
const inputProps = {
|
|
92
|
-
value:
|
|
94
|
+
value: inputValue,
|
|
93
95
|
disabled: field.disabled,
|
|
94
96
|
name,
|
|
95
97
|
'data-valid': valid,
|
|
@@ -97,7 +99,7 @@ export default function useField(schema, { name, value = '', disabled = false, t
|
|
|
97
99
|
...getListeners(),
|
|
98
100
|
};
|
|
99
101
|
const props = {
|
|
100
|
-
value:
|
|
102
|
+
value: inputValue,
|
|
101
103
|
disabled: field.disabled,
|
|
102
104
|
name,
|
|
103
105
|
valid,
|
package/dist/useForm.d.ts
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
1
|
import { FormEvent, ChangeEvent } from 'react';
|
|
2
|
-
import { z, ZodObject,
|
|
2
|
+
import { z, ZodObject, ZodRawShape } from 'zod';
|
|
3
3
|
import { $ZodIssue } from 'zod/v4/core';
|
|
4
4
|
import { Options } from './types.js';
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
import useField from './useField.js';
|
|
6
|
+
type FieldsMap = Record<string, ReturnType<typeof useField<any, any>>>;
|
|
7
|
+
type Config = {
|
|
8
|
+
formatErrorMessage?: (error: $ZodIssue, value: any, name?: string) => string;
|
|
9
|
+
_onUpdate?: (fields: FieldsMap) => void;
|
|
10
|
+
};
|
|
11
|
+
export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, { formatErrorMessage, _onUpdate }?: Config): {
|
|
12
|
+
isValidating: boolean;
|
|
13
|
+
useFormField: <T = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof S, options?: Omit<Options<T, C>, 'formatErrorMessage' | 'name' | '_onInit' | '_onUpdate' | '_storedField'>) => {
|
|
7
14
|
valid: boolean;
|
|
8
|
-
update: (data: Partial<import("./types.js").
|
|
15
|
+
update: (data: Partial<import("./types.js").T_Field<T>>) => void;
|
|
9
16
|
reset: () => void;
|
|
10
17
|
validate: () => z.ZodSafeParseResult<unknown>;
|
|
11
18
|
errorMessage: string | undefined;
|
|
12
19
|
inputProps: {
|
|
13
20
|
onFocus: () => void;
|
|
14
21
|
onBlur: () => void;
|
|
15
|
-
value:
|
|
22
|
+
value: any;
|
|
16
23
|
disabled: boolean;
|
|
17
24
|
name: string | undefined;
|
|
18
25
|
'data-valid': boolean;
|
|
@@ -20,7 +27,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
|
|
|
20
27
|
} | {
|
|
21
28
|
onFocus: () => void;
|
|
22
29
|
onBlur?: undefined;
|
|
23
|
-
value:
|
|
30
|
+
value: any;
|
|
24
31
|
disabled: boolean;
|
|
25
32
|
name: string | undefined;
|
|
26
33
|
'data-valid': boolean;
|
|
@@ -29,7 +36,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
|
|
|
29
36
|
props: {
|
|
30
37
|
onFocus: () => void;
|
|
31
38
|
onBlur: () => void;
|
|
32
|
-
value:
|
|
39
|
+
value: any;
|
|
33
40
|
disabled: boolean;
|
|
34
41
|
name: string | undefined;
|
|
35
42
|
valid: boolean;
|
|
@@ -38,7 +45,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
|
|
|
38
45
|
} | {
|
|
39
46
|
onFocus: () => void;
|
|
40
47
|
onBlur?: undefined;
|
|
41
|
-
value:
|
|
48
|
+
value: any;
|
|
42
49
|
disabled: boolean;
|
|
43
50
|
name: string | undefined;
|
|
44
51
|
valid: boolean;
|
|
@@ -59,7 +66,8 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, for
|
|
|
59
66
|
touched: boolean;
|
|
60
67
|
dirty: boolean;
|
|
61
68
|
};
|
|
62
|
-
handleSubmit: (onSubmit: (data: z.infer<typeof schema>) => void, onError?: (
|
|
69
|
+
handleSubmit: (onSubmit: (data: z.infer<typeof schema>) => void, onError?: (issues: Array<$ZodIssue>) => void) => (e: FormEvent<HTMLFormElement>) => Promise<void>;
|
|
63
70
|
checkDirty: () => boolean;
|
|
64
71
|
reset: () => void;
|
|
65
72
|
};
|
|
73
|
+
export {};
|
package/dist/useForm.js
CHANGED
|
@@ -1,14 +1,8 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
1
|
+
import { useRef, useState } from 'react';
|
|
2
2
|
import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
|
|
3
3
|
import useField from './useField.js';
|
|
4
|
-
function
|
|
5
|
-
const
|
|
6
|
-
for (const name in fields) {
|
|
7
|
-
obj[name] = fields[name].value;
|
|
8
|
-
}
|
|
9
|
-
return obj;
|
|
10
|
-
}
|
|
11
|
-
export default function useForm(schema, formatErrorMessage = defaultFormatErrorMessage) {
|
|
4
|
+
export default function useForm(schema, { formatErrorMessage = defaultFormatErrorMessage, _onUpdate } = {}) {
|
|
5
|
+
const [isValidating, setIsValidating] = useState(false);
|
|
12
6
|
const fields = useRef({});
|
|
13
7
|
function useFormField(_name, options = {}) {
|
|
14
8
|
const name = String(_name);
|
|
@@ -31,6 +25,9 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
|
|
|
31
25
|
...fields.current[name],
|
|
32
26
|
...data,
|
|
33
27
|
};
|
|
28
|
+
if (_onUpdate) {
|
|
29
|
+
_onUpdate(fields.current);
|
|
30
|
+
}
|
|
34
31
|
},
|
|
35
32
|
});
|
|
36
33
|
return field;
|
|
@@ -58,12 +55,14 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
|
|
|
58
55
|
return false;
|
|
59
56
|
}
|
|
60
57
|
function handleSubmit(onSubmit, onError) {
|
|
61
|
-
return (e) => {
|
|
58
|
+
return async (e) => {
|
|
62
59
|
e.stopPropagation();
|
|
63
60
|
e.preventDefault();
|
|
64
61
|
touchFields();
|
|
65
62
|
const data = mapFieldsToData(fields.current);
|
|
66
|
-
|
|
63
|
+
setIsValidating(true);
|
|
64
|
+
const parsed = await schema.safeParseAsync(data);
|
|
65
|
+
setIsValidating(false);
|
|
67
66
|
if (parsed.success) {
|
|
68
67
|
onSubmit(parsed.data);
|
|
69
68
|
}
|
|
@@ -72,7 +71,7 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
|
|
|
72
71
|
_applyErrors(parsed.error.issues);
|
|
73
72
|
}
|
|
74
73
|
if (onError) {
|
|
75
|
-
onError(parsed.error);
|
|
74
|
+
onError(parsed.error.issues);
|
|
76
75
|
}
|
|
77
76
|
}
|
|
78
77
|
};
|
|
@@ -86,9 +85,17 @@ export default function useForm(schema, formatErrorMessage = defaultFormatErrorM
|
|
|
86
85
|
}
|
|
87
86
|
}
|
|
88
87
|
return {
|
|
88
|
+
isValidating,
|
|
89
89
|
useFormField,
|
|
90
90
|
handleSubmit,
|
|
91
91
|
checkDirty,
|
|
92
92
|
reset,
|
|
93
93
|
};
|
|
94
94
|
}
|
|
95
|
+
function mapFieldsToData(fields) {
|
|
96
|
+
const obj = {};
|
|
97
|
+
for (const name in fields) {
|
|
98
|
+
obj[name] = fields[name].value;
|
|
99
|
+
}
|
|
100
|
+
return obj;
|
|
101
|
+
}
|
package/dist/useForm.jsx
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { useRef, useState, } from 'react';
|
|
2
|
+
import { createContext } from '@weser/context';
|
|
3
|
+
import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
|
|
4
|
+
import useField from './useField.js';
|
|
5
|
+
export function createForm(schema) {
|
|
6
|
+
function _useForm() {
|
|
7
|
+
return useForm(schema);
|
|
8
|
+
}
|
|
9
|
+
const [useFormContext, FormProvider] = createContext(null);
|
|
10
|
+
return {
|
|
11
|
+
useForm: _useForm,
|
|
12
|
+
useFormContext,
|
|
13
|
+
FormProvider,
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function mapFieldsToData(fields) {
|
|
17
|
+
const obj = {};
|
|
18
|
+
for (const name in fields) {
|
|
19
|
+
obj[name] = fields[name].value;
|
|
20
|
+
}
|
|
21
|
+
return obj;
|
|
22
|
+
}
|
|
23
|
+
export default function useForm(schema, formatErrorMessage = defaultFormatErrorMessage) {
|
|
24
|
+
const [isValidating, setIsValidating] = useState(false);
|
|
25
|
+
const fields = useRef({});
|
|
26
|
+
function useFormField(_name, options = {}) {
|
|
27
|
+
const name = String(_name);
|
|
28
|
+
const shape = schema.shape[_name];
|
|
29
|
+
const stored = fields.current[name];
|
|
30
|
+
const field = useField(shape, {
|
|
31
|
+
...options,
|
|
32
|
+
name,
|
|
33
|
+
formatErrorMessage,
|
|
34
|
+
// internals
|
|
35
|
+
_storedField: stored,
|
|
36
|
+
_onInit: (data) => {
|
|
37
|
+
fields.current[name] = {
|
|
38
|
+
...field,
|
|
39
|
+
...data,
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
_onUpdate: (data) => {
|
|
43
|
+
fields.current[name] = {
|
|
44
|
+
...fields.current[name],
|
|
45
|
+
...data,
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
});
|
|
49
|
+
return field;
|
|
50
|
+
}
|
|
51
|
+
function touchFields() {
|
|
52
|
+
for (const name in fields.current) {
|
|
53
|
+
fields.current[name].update({
|
|
54
|
+
touched: true,
|
|
55
|
+
// force revalidate
|
|
56
|
+
value: fields.current[name].value,
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
function reset() {
|
|
61
|
+
for (const name in fields.current) {
|
|
62
|
+
fields.current[name].reset();
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
function checkDirty() {
|
|
66
|
+
for (const name in fields.current) {
|
|
67
|
+
if (fields.current[name].dirty) {
|
|
68
|
+
return true;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
function handleSubmit(onSubmit, onError) {
|
|
74
|
+
return async (e) => {
|
|
75
|
+
e.stopPropagation();
|
|
76
|
+
e.preventDefault();
|
|
77
|
+
touchFields();
|
|
78
|
+
// TODO: abort if fields are invalid already
|
|
79
|
+
// collect validation for each field
|
|
80
|
+
const data = mapFieldsToData(fields.current);
|
|
81
|
+
setIsValidating(true);
|
|
82
|
+
const parsed = await schema.safeParseAsync(data);
|
|
83
|
+
setIsValidating(false);
|
|
84
|
+
if (parsed.success) {
|
|
85
|
+
onSubmit(parsed.data);
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
if (parsed.error.issues.length > 0) {
|
|
89
|
+
_applyErrors(parsed.error.issues);
|
|
90
|
+
}
|
|
91
|
+
if (onError) {
|
|
92
|
+
onError(parsed.error);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
function _applyErrors(issues) {
|
|
98
|
+
for (const issue of issues) {
|
|
99
|
+
const field = fields.current[issue.path[0]];
|
|
100
|
+
if (field) {
|
|
101
|
+
field._applyError(issue);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
106
|
+
useFormField,
|
|
107
|
+
handleSubmit,
|
|
108
|
+
checkDirty,
|
|
109
|
+
isValidating,
|
|
110
|
+
reset,
|
|
111
|
+
};
|
|
112
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@weser/forms",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "React hooks for forms with zod schemas",
|
|
5
5
|
"author": "Robin Weser <robin@weser.io>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,6 +43,9 @@
|
|
|
43
43
|
"forms",
|
|
44
44
|
"zod"
|
|
45
45
|
],
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@weser/context": "1.0.0"
|
|
48
|
+
},
|
|
46
49
|
"peerDependencies": {
|
|
47
50
|
"react": ">16.3.0",
|
|
48
51
|
"zod": ">=4"
|
|
@@ -55,5 +58,5 @@
|
|
|
55
58
|
"typescript": "^5.4.5",
|
|
56
59
|
"zod": "^4.1.11"
|
|
57
60
|
},
|
|
58
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "afc0628ca4aeaba255eef9716652640fdc5b50c4"
|
|
59
62
|
}
|