@rachelallyson/hero-hook-form 1.0.0 → 1.0.1
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 +30 -11
- package/dist/index.d.ts +234 -60
- package/dist/index.js +468 -16917
- package/dist/react/index.d.ts +234 -60
- package/dist/react/index.js +275 -133
- package/package.json +29 -20
- package/dist/dist-ICUU7SXF.js +0 -8
- package/dist/index.cjs +0 -17915
- package/dist/index.d.cts +0 -362
- package/dist/react/index.cjs +0 -1297
- package/dist/react/index.d.cts +0 -354
package/dist/react/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React, { ComponentProps } from 'react';
|
|
1
|
+
import React$1, { ComponentProps } from 'react';
|
|
2
2
|
import { Input, Textarea, Select, Checkbox, Switch, RadioGroup, Button, DateInput, Slider } from '@heroui/react';
|
|
3
3
|
import * as react_hook_form from 'react-hook-form';
|
|
4
|
-
import { FieldValues, Path, RegisterOptions, Control, UseFormProps, SubmitHandler,
|
|
4
|
+
import { FieldValues, Path, RegisterOptions, Control, UseFormReturn, FieldErrors, UseFormProps, SubmitHandler, UseFormSetError } from 'react-hook-form';
|
|
5
5
|
import * as zod from 'zod';
|
|
6
|
+
import { z } from 'zod';
|
|
6
7
|
import * as _internationalized_date from '@internationalized/date';
|
|
7
8
|
import { CalendarDate } from '@internationalized/date';
|
|
8
9
|
|
|
@@ -29,7 +30,11 @@ interface BaseFormFieldConfig<TFieldValues extends FieldValues> {
|
|
|
29
30
|
isDisabled?: boolean;
|
|
30
31
|
rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
|
|
31
32
|
condition?: (values: Partial<TFieldValues>) => boolean;
|
|
33
|
+
dependsOn?: Path<TFieldValues>;
|
|
34
|
+
dependsOnValue?: unknown;
|
|
32
35
|
group?: string;
|
|
36
|
+
ariaLabel?: string;
|
|
37
|
+
ariaDescribedBy?: string;
|
|
33
38
|
}
|
|
34
39
|
interface StringFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
35
40
|
type: "input" | "textarea" | "select";
|
|
@@ -74,7 +79,17 @@ interface FileFieldConfig<TFieldValues extends FieldValues> extends BaseFormFiel
|
|
|
74
79
|
multiple?: boolean;
|
|
75
80
|
accept?: string;
|
|
76
81
|
}
|
|
77
|
-
|
|
82
|
+
interface CustomFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
83
|
+
type: "custom";
|
|
84
|
+
render: (field: {
|
|
85
|
+
name: Path<TFieldValues>;
|
|
86
|
+
control: Control<TFieldValues>;
|
|
87
|
+
form: UseFormReturn<TFieldValues>;
|
|
88
|
+
errors: FieldErrors<TFieldValues>;
|
|
89
|
+
isSubmitting: boolean;
|
|
90
|
+
}) => React.ReactNode;
|
|
91
|
+
}
|
|
92
|
+
type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues> | CustomFieldConfig<TFieldValues>;
|
|
78
93
|
interface FormConfig<TFieldValues extends FieldValues> {
|
|
79
94
|
fields: FormFieldConfig<TFieldValues>[];
|
|
80
95
|
layout?: "vertical" | "horizontal" | "grid" | "custom";
|
|
@@ -92,6 +107,16 @@ type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConf
|
|
|
92
107
|
interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
|
|
93
108
|
schema?: zod.ZodSchema<TFieldValues>;
|
|
94
109
|
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
110
|
+
onError?: (errors: FieldErrors<TFieldValues>) => void;
|
|
111
|
+
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
112
|
+
render?: (formState: {
|
|
113
|
+
form: UseFormReturn<TFieldValues>;
|
|
114
|
+
isSubmitting: boolean;
|
|
115
|
+
isSubmitted: boolean;
|
|
116
|
+
isSuccess: boolean;
|
|
117
|
+
errors: FieldErrors<TFieldValues>;
|
|
118
|
+
values: TFieldValues;
|
|
119
|
+
}) => React.ReactNode;
|
|
95
120
|
}
|
|
96
121
|
interface FormValidationError {
|
|
97
122
|
message: string;
|
|
@@ -129,6 +154,33 @@ interface FieldGroup<TFieldValues extends FieldValues> {
|
|
|
129
154
|
defaultCollapsed?: boolean;
|
|
130
155
|
fields: FormFieldConfig<TFieldValues>[];
|
|
131
156
|
}
|
|
157
|
+
interface ValidationUtils {
|
|
158
|
+
createMinLengthSchema: (min: number, fieldName: string) => zod.ZodString;
|
|
159
|
+
createMaxLengthSchema: (max: number, fieldName: string) => zod.ZodString;
|
|
160
|
+
createEmailSchema: () => zod.ZodString;
|
|
161
|
+
createRequiredSchema: (fieldName: string) => zod.ZodString;
|
|
162
|
+
createUrlSchema: () => zod.ZodString;
|
|
163
|
+
createPhoneSchema: () => zod.ZodString;
|
|
164
|
+
}
|
|
165
|
+
interface FormTestUtils<TFieldValues extends FieldValues> {
|
|
166
|
+
getField: (name: Path<TFieldValues>) => {
|
|
167
|
+
value: unknown;
|
|
168
|
+
error: unknown;
|
|
169
|
+
isDirty: boolean;
|
|
170
|
+
isTouched: boolean;
|
|
171
|
+
};
|
|
172
|
+
submitForm: () => Promise<void>;
|
|
173
|
+
resetForm: () => void;
|
|
174
|
+
getFormState: () => {
|
|
175
|
+
values: TFieldValues;
|
|
176
|
+
errors: FieldErrors<TFieldValues>;
|
|
177
|
+
isSubmitting: boolean;
|
|
178
|
+
isSubmitted: boolean;
|
|
179
|
+
isSuccess: boolean;
|
|
180
|
+
};
|
|
181
|
+
setFieldValue: (name: Path<TFieldValues>, value: unknown) => void;
|
|
182
|
+
triggerValidation: (name?: Path<TFieldValues>) => Promise<boolean>;
|
|
183
|
+
}
|
|
132
184
|
|
|
133
185
|
interface FormProps$1<T extends FieldValues> {
|
|
134
186
|
className?: string;
|
|
@@ -141,45 +193,45 @@ interface FormProps$1<T extends FieldValues> {
|
|
|
141
193
|
resetButtonText?: string;
|
|
142
194
|
showResetButton?: boolean;
|
|
143
195
|
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
144
|
-
submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
|
|
196
|
+
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
145
197
|
submitButtonText?: string;
|
|
146
198
|
subtitle?: string;
|
|
147
199
|
title?: string;
|
|
148
200
|
defaultValues?: Partial<T>;
|
|
149
201
|
}
|
|
150
|
-
declare function ConfigurableForm<T extends FieldValues>({ className, columns, defaultValues, fields, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: FormProps$1<T>): React.JSX.Element;
|
|
202
|
+
declare function ConfigurableForm<T extends FieldValues>({ className, columns, defaultValues, fields, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: FormProps$1<T>): React$1.JSX.Element;
|
|
151
203
|
|
|
152
204
|
interface FormFieldProps<TFieldValues extends FieldValues> {
|
|
153
205
|
config: FormFieldConfig<TFieldValues>;
|
|
154
206
|
form: UseFormReturn<TFieldValues>;
|
|
155
207
|
submissionState: FormSubmissionState;
|
|
156
208
|
}
|
|
157
|
-
declare function FormField<TFieldValues extends FieldValues>({ config, form, submissionState, }: FormFieldProps<TFieldValues>): React.JSX.Element | null;
|
|
209
|
+
declare function FormField<TFieldValues extends FieldValues>({ config, form, submissionState, }: FormFieldProps<TFieldValues>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
|
|
158
210
|
|
|
159
211
|
type CheckboxFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
160
|
-
checkboxProps?: Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
212
|
+
checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
161
213
|
};
|
|
162
|
-
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React.JSX.Element;
|
|
214
|
+
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
163
215
|
|
|
164
216
|
type DateFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, CalendarDate | null> & WithControl<TFieldValues> & {
|
|
165
|
-
dateProps?: Omit<React.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
217
|
+
dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
166
218
|
transform?: (value: CalendarDate | null) => CalendarDate | null;
|
|
167
219
|
};
|
|
168
|
-
declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React.JSX.Element;
|
|
220
|
+
declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
169
221
|
|
|
170
222
|
type FileFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, FileList | null> & WithControl<TFieldValues> & {
|
|
171
|
-
fileProps?: Omit<React.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
223
|
+
fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
172
224
|
transform?: (value: FileList | null) => FileList | null;
|
|
173
225
|
multiple?: boolean;
|
|
174
226
|
accept?: string;
|
|
175
227
|
};
|
|
176
|
-
declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React.JSX.Element;
|
|
228
|
+
declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
177
229
|
|
|
178
230
|
type InputFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
179
|
-
inputProps?: Omit<React.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
231
|
+
inputProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
180
232
|
transform?: (value: string) => string;
|
|
181
233
|
};
|
|
182
|
-
declare function InputField<TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>): React.JSX.Element;
|
|
234
|
+
declare function InputField<TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
183
235
|
|
|
184
236
|
interface RadioOption<TValue extends string | number> {
|
|
185
237
|
label: string;
|
|
@@ -189,9 +241,9 @@ interface RadioOption<TValue extends string | number> {
|
|
|
189
241
|
}
|
|
190
242
|
type RadioGroupFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
191
243
|
options: readonly RadioOption<TValue>[];
|
|
192
|
-
radioGroupProps?: Omit<React.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
244
|
+
radioGroupProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
193
245
|
};
|
|
194
|
-
declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React.JSX.Element;
|
|
246
|
+
declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
195
247
|
|
|
196
248
|
interface SelectOption<TValue extends string | number> {
|
|
197
249
|
label: string;
|
|
@@ -202,25 +254,25 @@ interface SelectOption<TValue extends string | number> {
|
|
|
202
254
|
type SelectFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
203
255
|
options: readonly SelectOption<TValue>[];
|
|
204
256
|
placeholder?: string;
|
|
205
|
-
selectProps?: Omit<React.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
257
|
+
selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
206
258
|
};
|
|
207
|
-
declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React.JSX.Element;
|
|
259
|
+
declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
208
260
|
|
|
209
261
|
type SliderFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, number> & WithControl<TFieldValues> & {
|
|
210
|
-
sliderProps?: Omit<React.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
262
|
+
sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
211
263
|
transform?: (value: number) => number;
|
|
212
264
|
};
|
|
213
|
-
declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React.JSX.Element;
|
|
265
|
+
declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
214
266
|
|
|
215
267
|
type SwitchFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
216
|
-
switchProps?: Omit<React.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
|
|
268
|
+
switchProps?: Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
|
|
217
269
|
};
|
|
218
|
-
declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React.JSX.Element;
|
|
270
|
+
declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
219
271
|
|
|
220
272
|
type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
221
|
-
textareaProps?: Omit<React.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
273
|
+
textareaProps?: Omit<React$1.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
222
274
|
};
|
|
223
|
-
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React.JSX.Element;
|
|
275
|
+
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
224
276
|
|
|
225
277
|
interface UseFormHelperOptions<T extends FieldValues> {
|
|
226
278
|
onError?: (error: FormValidationError) => void;
|
|
@@ -240,9 +292,9 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
|
|
|
240
292
|
submissionState: FormSubmissionState;
|
|
241
293
|
};
|
|
242
294
|
|
|
243
|
-
type InputProps = React.ComponentProps<typeof Input>;
|
|
244
|
-
type TextareaProps = React.ComponentProps<typeof Textarea>;
|
|
245
|
-
type SelectProps = React.ComponentProps<typeof Select>;
|
|
295
|
+
type InputProps = React$1.ComponentProps<typeof Input>;
|
|
296
|
+
type TextareaProps = React$1.ComponentProps<typeof Textarea>;
|
|
297
|
+
type SelectProps = React$1.ComponentProps<typeof Select>;
|
|
246
298
|
type SharedTextLikeColor = Extract<InputProps["color"], Extract<TextareaProps["color"], SelectProps["color"]>>;
|
|
247
299
|
type SharedTextLikeSize = Extract<InputProps["size"], Extract<TextareaProps["size"], SelectProps["size"]>>;
|
|
248
300
|
type SharedTextLikeVariant = Extract<InputProps["variant"], Extract<TextareaProps["variant"], SelectProps["variant"]>>;
|
|
@@ -257,13 +309,13 @@ type CommonFieldDefaults = Partial<{
|
|
|
257
309
|
}>;
|
|
258
310
|
type InputDefaults = Partial<Omit<InputProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
259
311
|
type TextareaDefaults = Partial<Omit<TextareaProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
260
|
-
type CheckboxDefaults = Partial<Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
261
|
-
type RadioGroupDefaults = Partial<Omit<React.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">>;
|
|
312
|
+
type CheckboxDefaults = Partial<Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
313
|
+
type RadioGroupDefaults = Partial<Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">>;
|
|
262
314
|
type SelectDefaults = Partial<Omit<SelectProps, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
263
|
-
type DateInputDefaults = Partial<Omit<React.ComponentProps<typeof DateInput>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
264
|
-
type SliderDefaults = Partial<Omit<React.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
265
|
-
type SwitchDefaults = Partial<Omit<React.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">>;
|
|
266
|
-
type ButtonDefaults = Partial<Omit<React.ComponentProps<typeof Button>, "type" | "isLoading">>;
|
|
315
|
+
type DateInputDefaults = Partial<Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
316
|
+
type SliderDefaults = Partial<Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
317
|
+
type SwitchDefaults = Partial<Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">>;
|
|
318
|
+
type ButtonDefaults = Partial<Omit<React$1.ComponentProps<typeof Button>, "type" | "isLoading">>;
|
|
267
319
|
interface HeroHookFormDefaultsConfig {
|
|
268
320
|
common?: CommonFieldDefaults;
|
|
269
321
|
input?: InputDefaults;
|
|
@@ -277,28 +329,28 @@ interface HeroHookFormDefaultsConfig {
|
|
|
277
329
|
submitButton?: ButtonDefaults;
|
|
278
330
|
}
|
|
279
331
|
interface HeroHookFormProviderProps {
|
|
280
|
-
children: React.ReactNode;
|
|
332
|
+
children: React$1.ReactNode;
|
|
281
333
|
defaults?: HeroHookFormDefaultsConfig;
|
|
282
334
|
}
|
|
283
|
-
declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React.JSX.Element;
|
|
335
|
+
declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React$1.JSX.Element;
|
|
284
336
|
declare function useHeroHookFormDefaults(): Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "checkbox" | "radioGroup" | "select" | "dateInput" | "slider" | "switch" | "submitButton">>;
|
|
285
337
|
|
|
286
338
|
interface FormProps<TFieldValues extends FieldValues> {
|
|
287
339
|
methods: UseFormReturn<TFieldValues>;
|
|
288
340
|
onSubmit: SubmitHandler<TFieldValues>;
|
|
289
341
|
className?: string;
|
|
290
|
-
children: React.ReactNode;
|
|
342
|
+
children: React$1.ReactNode;
|
|
291
343
|
id?: string;
|
|
292
344
|
noValidate?: boolean;
|
|
293
345
|
}
|
|
294
|
-
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React.JSX.Element;
|
|
346
|
+
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React$1.JSX.Element;
|
|
295
347
|
|
|
296
348
|
interface SubmitButtonProps {
|
|
297
|
-
children: React.ReactNode;
|
|
349
|
+
children: React$1.ReactNode;
|
|
298
350
|
isLoading?: boolean;
|
|
299
|
-
buttonProps?: Omit<React.ComponentProps<typeof Button>, "type" | "isLoading">;
|
|
351
|
+
buttonProps?: Omit<React$1.ComponentProps<typeof Button>, "type" | "isLoading">;
|
|
300
352
|
}
|
|
301
|
-
declare function SubmitButton(props: SubmitButtonProps): React.JSX.Element;
|
|
353
|
+
declare function SubmitButton(props: SubmitButtonProps): React$1.JSX.Element;
|
|
302
354
|
|
|
303
355
|
interface ServerFieldError<TFieldValues extends FieldValues> {
|
|
304
356
|
path: Path<TFieldValues>;
|
|
@@ -311,6 +363,136 @@ interface ServerFormError<TFieldValues extends FieldValues> {
|
|
|
311
363
|
}
|
|
312
364
|
declare function applyServerErrors<TFieldValues extends FieldValues>(setError: UseFormSetError<TFieldValues>, serverError: ServerFormError<TFieldValues>): void;
|
|
313
365
|
|
|
366
|
+
/**
|
|
367
|
+
* Testing utilities for forms
|
|
368
|
+
* These utilities help with testing form behavior and state
|
|
369
|
+
*/
|
|
370
|
+
/**
|
|
371
|
+
* Creates form test utilities for a given form instance
|
|
372
|
+
*/
|
|
373
|
+
declare function createFormTestUtils<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): FormTestUtils<TFieldValues>;
|
|
374
|
+
/**
|
|
375
|
+
* Mock form data for testing
|
|
376
|
+
*/
|
|
377
|
+
declare function createMockFormData<TFieldValues extends FieldValues>(overrides?: Partial<TFieldValues>): TFieldValues;
|
|
378
|
+
/**
|
|
379
|
+
* Mock form errors for testing
|
|
380
|
+
*/
|
|
381
|
+
declare function createMockFormErrors<TFieldValues extends FieldValues>(overrides?: Partial<FieldErrors<TFieldValues>>): FieldErrors<TFieldValues>;
|
|
382
|
+
/**
|
|
383
|
+
* Wait for form state to change (useful for async operations)
|
|
384
|
+
*/
|
|
385
|
+
declare function waitForFormState<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, condition: (state: unknown) => boolean, timeout?: number): Promise<void>;
|
|
386
|
+
/**
|
|
387
|
+
* Simulate user input on a field
|
|
388
|
+
*/
|
|
389
|
+
declare function simulateFieldInput<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>, value: unknown): void;
|
|
390
|
+
/**
|
|
391
|
+
* Simulate form submission
|
|
392
|
+
*/
|
|
393
|
+
declare function simulateFormSubmission<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, onSubmit: (data: TFieldValues) => void | Promise<void>): Promise<void>;
|
|
394
|
+
/**
|
|
395
|
+
* Check if form has validation errors
|
|
396
|
+
*/
|
|
397
|
+
declare function hasFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): boolean;
|
|
398
|
+
/**
|
|
399
|
+
* Get all form errors as a flat array
|
|
400
|
+
*/
|
|
401
|
+
declare function getFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): string[];
|
|
402
|
+
/**
|
|
403
|
+
* Check if a specific field has an error
|
|
404
|
+
*/
|
|
405
|
+
declare function hasFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): boolean;
|
|
406
|
+
/**
|
|
407
|
+
* Get error message for a specific field
|
|
408
|
+
*/
|
|
409
|
+
declare function getFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): string | undefined;
|
|
410
|
+
|
|
411
|
+
/**
|
|
412
|
+
* Validation utility functions for common form validation patterns
|
|
413
|
+
* These utilities help create consistent validation schemas across forms
|
|
414
|
+
*/
|
|
415
|
+
/**
|
|
416
|
+
* Creates a minimum length validation schema
|
|
417
|
+
*/
|
|
418
|
+
declare const createMinLengthSchema: (min: number, fieldName: string) => z.ZodString;
|
|
419
|
+
/**
|
|
420
|
+
* Creates a maximum length validation schema
|
|
421
|
+
*/
|
|
422
|
+
declare const createMaxLengthSchema: (max: number, fieldName: string) => z.ZodString;
|
|
423
|
+
/**
|
|
424
|
+
* Creates an email validation schema
|
|
425
|
+
*/
|
|
426
|
+
declare const createEmailSchema: () => z.ZodEmail;
|
|
427
|
+
/**
|
|
428
|
+
* Creates a required field validation schema
|
|
429
|
+
*/
|
|
430
|
+
declare const createRequiredSchema: (fieldName: string) => z.ZodString;
|
|
431
|
+
/**
|
|
432
|
+
* Creates a URL validation schema
|
|
433
|
+
*/
|
|
434
|
+
declare const createUrlSchema: () => z.ZodString;
|
|
435
|
+
/**
|
|
436
|
+
* Creates a phone number validation schema
|
|
437
|
+
*/
|
|
438
|
+
declare const createPhoneSchema: () => z.ZodString;
|
|
439
|
+
/**
|
|
440
|
+
* Creates a password validation schema with common requirements
|
|
441
|
+
*/
|
|
442
|
+
declare const createPasswordSchema: (minLength?: number) => z.ZodString;
|
|
443
|
+
/**
|
|
444
|
+
* Creates a confirm password validation schema
|
|
445
|
+
*/
|
|
446
|
+
declare const createConfirmPasswordSchema: (passwordField: string) => z.ZodString;
|
|
447
|
+
/**
|
|
448
|
+
* Creates a number validation schema with range
|
|
449
|
+
*/
|
|
450
|
+
declare const createNumberRangeSchema: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
451
|
+
/**
|
|
452
|
+
* Creates a date validation schema
|
|
453
|
+
*/
|
|
454
|
+
declare const createDateSchema: (fieldName: string) => z.ZodDate;
|
|
455
|
+
/**
|
|
456
|
+
* Creates a future date validation schema
|
|
457
|
+
*/
|
|
458
|
+
declare const createFutureDateSchema: (fieldName: string) => z.ZodDate;
|
|
459
|
+
/**
|
|
460
|
+
* Creates a past date validation schema
|
|
461
|
+
*/
|
|
462
|
+
declare const createPastDateSchema: (fieldName: string) => z.ZodDate;
|
|
463
|
+
/**
|
|
464
|
+
* Creates a file validation schema
|
|
465
|
+
*/
|
|
466
|
+
declare const createFileSchema: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
467
|
+
/**
|
|
468
|
+
* Creates a checkbox validation schema (must be checked)
|
|
469
|
+
*/
|
|
470
|
+
declare const createRequiredCheckboxSchema: (fieldName: string) => z.ZodBoolean;
|
|
471
|
+
/**
|
|
472
|
+
* Creates a conditional validation schema
|
|
473
|
+
*/
|
|
474
|
+
declare const createConditionalSchema: <T>(condition: (data: unknown) => boolean, schema: z.ZodSchema<T>, errorMessage?: string) => z.ZodAny;
|
|
475
|
+
/**
|
|
476
|
+
* Common validation patterns for forms
|
|
477
|
+
*/
|
|
478
|
+
declare const commonValidations: {
|
|
479
|
+
conditional: <T>(condition: (data: unknown) => boolean, schema: z.ZodSchema<T>, errorMessage?: string) => z.ZodAny;
|
|
480
|
+
confirmPassword: (passwordField: string) => z.ZodString;
|
|
481
|
+
date: (fieldName: string) => z.ZodDate;
|
|
482
|
+
email: z.ZodEmail;
|
|
483
|
+
file: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
484
|
+
futureDate: (fieldName: string) => z.ZodDate;
|
|
485
|
+
maxLength: (max: number, fieldName: string) => z.ZodString;
|
|
486
|
+
minLength: (min: number, fieldName: string) => z.ZodString;
|
|
487
|
+
numberRange: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
488
|
+
password: (minLength?: number) => z.ZodString;
|
|
489
|
+
pastDate: (fieldName: string) => z.ZodDate;
|
|
490
|
+
phone: z.ZodString;
|
|
491
|
+
required: (fieldName: string) => z.ZodString;
|
|
492
|
+
requiredCheckbox: (fieldName: string) => z.ZodBoolean;
|
|
493
|
+
url: z.ZodString;
|
|
494
|
+
};
|
|
495
|
+
|
|
314
496
|
interface ZodFormProps<T extends FieldValues> {
|
|
315
497
|
className?: string;
|
|
316
498
|
columns?: 1 | 2 | 3;
|
|
@@ -322,33 +504,25 @@ interface ZodFormProps<T extends FieldValues> {
|
|
|
322
504
|
resetButtonText?: string;
|
|
323
505
|
showResetButton?: boolean;
|
|
324
506
|
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
325
|
-
submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
|
|
507
|
+
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
326
508
|
submitButtonText?: string;
|
|
327
509
|
subtitle?: string;
|
|
328
510
|
title?: string;
|
|
511
|
+
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
512
|
+
render?: (formState: {
|
|
513
|
+
form: UseFormReturn<T>;
|
|
514
|
+
isSubmitting: boolean;
|
|
515
|
+
isSubmitted: boolean;
|
|
516
|
+
isSuccess: boolean;
|
|
517
|
+
errors: FieldErrors<T>;
|
|
518
|
+
values: T;
|
|
519
|
+
}) => React$1.ReactNode;
|
|
329
520
|
}
|
|
330
|
-
declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React.JSX.Element;
|
|
521
|
+
declare function ZodForm<T extends FieldValues>({ className, columns, config, errorDisplay, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
|
|
331
522
|
|
|
332
523
|
/**
|
|
333
524
|
* Hook for using Zod validation with React Hook Form
|
|
334
|
-
* This hook is only available when zod and @hookform/resolvers are installed
|
|
335
|
-
*
|
|
336
|
-
* TODO: Remove type assertion when @hookform/resolvers adds official Zod v4 support
|
|
337
|
-
*
|
|
338
|
-
* Current issue: @hookform/resolvers v5.2.1 is not compatible with Zod v4 due to
|
|
339
|
-
* internal type structure changes. The resolver expects Zod3Type<Output, Input> but
|
|
340
|
-
* Zod v4 uses a different internal structure (_zod.output vs _output).
|
|
341
|
-
*
|
|
342
|
-
* Related issues:
|
|
343
|
-
* - GitHub Issue: https://github.com/react-hook-form/resolvers/issues/813
|
|
344
|
-
* - GitHub PR: https://github.com/react-hook-form/resolvers/pull/803
|
|
345
|
-
*
|
|
346
|
-
* Workaround: Use type assertion until official support is added
|
|
347
|
-
*/
|
|
348
|
-
/**
|
|
349
|
-
* Hook for using Zod validation with React Hook Form
|
|
350
|
-
* Uses Zod's built-in type inference to avoid type assertion issues
|
|
351
525
|
*/
|
|
352
526
|
declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormConfig<TFieldValues>): react_hook_form.UseFormReturn<TFieldValues, any, TFieldValues>;
|
|
353
527
|
|
|
354
|
-
export { type BaseFormFieldConfig, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, type ConditionalValidation, ConfigurableForm, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, type FormConfig, FormField, type FormFieldConfig, type FormProps, FormProvider, type FormStep, type FormSubmissionState, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, type ServerFieldError, type ServerFormError, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, useFormHelper, useHeroHookFormDefaults, useZodForm };
|
|
528
|
+
export { type BaseFormFieldConfig, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, type ConditionalValidation, ConfigurableForm, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, type FormConfig, FormField, type FormFieldConfig, type FormProps, FormProvider, type FormStep, type FormSubmissionState, type FormTestUtils, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, type ServerFieldError, type ServerFormError, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, commonValidations, createConditionalSchema, createConfirmPasswordSchema, createDateSchema, createEmailSchema, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNumberRangeSchema, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createUrlSchema, getFieldError, getFormErrors, hasFieldError, hasFormErrors, simulateFieldInput, simulateFormSubmission, useFormHelper, useHeroHookFormDefaults, useZodForm, waitForFormState };
|