@rachelallyson/hero-hook-form 1.0.0 → 1.1.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/CHANGELOG.md +54 -42
- package/README.md +161 -189
- package/dist/index.d.ts +304 -61
- package/dist/index.js +503 -16862
- package/dist/react/index.d.ts +304 -61
- package/dist/react/index.js +441 -209
- package/package.json +60 -42
- 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,10 @@
|
|
|
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
|
+
export { UseFormReturn, useFormContext } from 'react-hook-form';
|
|
5
6
|
import * as zod from 'zod';
|
|
7
|
+
import { z } from 'zod';
|
|
6
8
|
import * as _internationalized_date from '@internationalized/date';
|
|
7
9
|
import { CalendarDate } from '@internationalized/date';
|
|
8
10
|
|
|
@@ -29,7 +31,11 @@ interface BaseFormFieldConfig<TFieldValues extends FieldValues> {
|
|
|
29
31
|
isDisabled?: boolean;
|
|
30
32
|
rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
|
|
31
33
|
condition?: (values: Partial<TFieldValues>) => boolean;
|
|
34
|
+
dependsOn?: Path<TFieldValues>;
|
|
35
|
+
dependsOnValue?: unknown;
|
|
32
36
|
group?: string;
|
|
37
|
+
ariaLabel?: string;
|
|
38
|
+
ariaDescribedBy?: string;
|
|
33
39
|
}
|
|
34
40
|
interface StringFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
35
41
|
type: "input" | "textarea" | "select";
|
|
@@ -74,7 +80,22 @@ interface FileFieldConfig<TFieldValues extends FieldValues> extends BaseFormFiel
|
|
|
74
80
|
multiple?: boolean;
|
|
75
81
|
accept?: string;
|
|
76
82
|
}
|
|
77
|
-
|
|
83
|
+
interface FontPickerFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
84
|
+
type: "fontPicker";
|
|
85
|
+
defaultValue?: string;
|
|
86
|
+
fontPickerProps?: Record<string, string | number | boolean>;
|
|
87
|
+
}
|
|
88
|
+
interface CustomFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
89
|
+
type: "custom";
|
|
90
|
+
render: (field: {
|
|
91
|
+
name: Path<TFieldValues>;
|
|
92
|
+
control: Control<TFieldValues>;
|
|
93
|
+
form: UseFormReturn<TFieldValues>;
|
|
94
|
+
errors: FieldErrors<TFieldValues>;
|
|
95
|
+
isSubmitting: boolean;
|
|
96
|
+
}) => React.ReactNode;
|
|
97
|
+
}
|
|
98
|
+
type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues> | FontPickerFieldConfig<TFieldValues> | CustomFieldConfig<TFieldValues>;
|
|
78
99
|
interface FormConfig<TFieldValues extends FieldValues> {
|
|
79
100
|
fields: FormFieldConfig<TFieldValues>[];
|
|
80
101
|
layout?: "vertical" | "horizontal" | "grid" | "custom";
|
|
@@ -88,10 +109,20 @@ interface FormConfig<TFieldValues extends FieldValues> {
|
|
|
88
109
|
className?: string;
|
|
89
110
|
defaultValues?: Partial<TFieldValues>;
|
|
90
111
|
}
|
|
91
|
-
type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules">;
|
|
112
|
+
type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules">;
|
|
92
113
|
interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
|
|
93
|
-
schema
|
|
114
|
+
schema: zod.ZodSchema<TFieldValues>;
|
|
94
115
|
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
116
|
+
onError?: (errors: FieldErrors<TFieldValues>) => void;
|
|
117
|
+
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
118
|
+
render?: (formState: {
|
|
119
|
+
form: UseFormReturn<TFieldValues>;
|
|
120
|
+
isSubmitting: boolean;
|
|
121
|
+
isSubmitted: boolean;
|
|
122
|
+
isSuccess: boolean;
|
|
123
|
+
errors: FieldErrors<TFieldValues>;
|
|
124
|
+
values: TFieldValues;
|
|
125
|
+
}) => React.ReactNode;
|
|
95
126
|
}
|
|
96
127
|
interface FormValidationError {
|
|
97
128
|
message: string;
|
|
@@ -129,6 +160,33 @@ interface FieldGroup<TFieldValues extends FieldValues> {
|
|
|
129
160
|
defaultCollapsed?: boolean;
|
|
130
161
|
fields: FormFieldConfig<TFieldValues>[];
|
|
131
162
|
}
|
|
163
|
+
interface ValidationUtils {
|
|
164
|
+
createMinLengthSchema: (min: number, fieldName: string) => zod.ZodString;
|
|
165
|
+
createMaxLengthSchema: (max: number, fieldName: string) => zod.ZodString;
|
|
166
|
+
createEmailSchema: () => zod.ZodString;
|
|
167
|
+
createRequiredSchema: (fieldName: string) => zod.ZodString;
|
|
168
|
+
createUrlSchema: () => zod.ZodString;
|
|
169
|
+
createPhoneSchema: () => zod.ZodString;
|
|
170
|
+
}
|
|
171
|
+
interface FormTestUtils<TFieldValues extends FieldValues> {
|
|
172
|
+
getField: (name: Path<TFieldValues>) => {
|
|
173
|
+
value: unknown;
|
|
174
|
+
error: unknown;
|
|
175
|
+
isDirty: boolean;
|
|
176
|
+
isTouched: boolean;
|
|
177
|
+
};
|
|
178
|
+
submitForm: () => Promise<void>;
|
|
179
|
+
resetForm: () => void;
|
|
180
|
+
getFormState: () => {
|
|
181
|
+
values: TFieldValues;
|
|
182
|
+
errors: FieldErrors<TFieldValues>;
|
|
183
|
+
isSubmitting: boolean;
|
|
184
|
+
isSubmitted: boolean;
|
|
185
|
+
isSuccess: boolean;
|
|
186
|
+
};
|
|
187
|
+
setFieldValue: (name: Path<TFieldValues>, value: unknown) => void;
|
|
188
|
+
triggerValidation: (name?: Path<TFieldValues>) => Promise<boolean>;
|
|
189
|
+
}
|
|
132
190
|
|
|
133
191
|
interface FormProps$1<T extends FieldValues> {
|
|
134
192
|
className?: string;
|
|
@@ -141,45 +199,56 @@ interface FormProps$1<T extends FieldValues> {
|
|
|
141
199
|
resetButtonText?: string;
|
|
142
200
|
showResetButton?: boolean;
|
|
143
201
|
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
144
|
-
submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
|
|
202
|
+
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
145
203
|
submitButtonText?: string;
|
|
146
204
|
subtitle?: string;
|
|
147
205
|
title?: string;
|
|
148
206
|
defaultValues?: Partial<T>;
|
|
149
207
|
}
|
|
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;
|
|
208
|
+
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
209
|
|
|
152
210
|
interface FormFieldProps<TFieldValues extends FieldValues> {
|
|
153
211
|
config: FormFieldConfig<TFieldValues>;
|
|
154
212
|
form: UseFormReturn<TFieldValues>;
|
|
155
213
|
submissionState: FormSubmissionState;
|
|
156
214
|
}
|
|
157
|
-
declare function FormField<TFieldValues extends FieldValues>({ config, form, submissionState, }: FormFieldProps<TFieldValues>): React.JSX.Element | null;
|
|
215
|
+
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
216
|
|
|
159
217
|
type CheckboxFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
160
|
-
checkboxProps?: Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
218
|
+
checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
161
219
|
};
|
|
162
|
-
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React.JSX.Element;
|
|
220
|
+
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
163
221
|
|
|
164
222
|
type DateFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, CalendarDate | null> & WithControl<TFieldValues> & {
|
|
165
|
-
dateProps?: Omit<React.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
223
|
+
dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
166
224
|
transform?: (value: CalendarDate | null) => CalendarDate | null;
|
|
167
225
|
};
|
|
168
|
-
declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React.JSX.Element;
|
|
226
|
+
declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
169
227
|
|
|
170
228
|
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">;
|
|
229
|
+
fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
172
230
|
transform?: (value: FileList | null) => FileList | null;
|
|
173
231
|
multiple?: boolean;
|
|
174
232
|
accept?: string;
|
|
175
233
|
};
|
|
176
|
-
declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React.JSX.Element;
|
|
234
|
+
declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
235
|
+
|
|
236
|
+
interface FontPickerProps {
|
|
237
|
+
showFontPreview?: boolean;
|
|
238
|
+
loadAllVariants?: boolean;
|
|
239
|
+
onFontsLoaded?: (loaded: boolean) => void;
|
|
240
|
+
fontsLoadedTimeout?: number;
|
|
241
|
+
}
|
|
242
|
+
type FontPickerFieldProps<TFieldValues extends FieldValues, TValue extends string = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
243
|
+
fontPickerProps?: FontPickerProps;
|
|
244
|
+
};
|
|
245
|
+
declare function FontPickerField<TFieldValues extends FieldValues, TValue extends string = string>(props: FontPickerFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
177
246
|
|
|
178
247
|
type InputFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
179
|
-
inputProps?: Omit<React.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
248
|
+
inputProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
180
249
|
transform?: (value: string) => string;
|
|
181
250
|
};
|
|
182
|
-
declare function InputField<TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>): React.JSX.Element;
|
|
251
|
+
declare function InputField<TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
183
252
|
|
|
184
253
|
interface RadioOption<TValue extends string | number> {
|
|
185
254
|
label: string;
|
|
@@ -189,9 +258,9 @@ interface RadioOption<TValue extends string | number> {
|
|
|
189
258
|
}
|
|
190
259
|
type RadioGroupFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
191
260
|
options: readonly RadioOption<TValue>[];
|
|
192
|
-
radioGroupProps?: Omit<React.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
261
|
+
radioGroupProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
193
262
|
};
|
|
194
|
-
declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React.JSX.Element;
|
|
263
|
+
declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
195
264
|
|
|
196
265
|
interface SelectOption<TValue extends string | number> {
|
|
197
266
|
label: string;
|
|
@@ -202,25 +271,25 @@ interface SelectOption<TValue extends string | number> {
|
|
|
202
271
|
type SelectFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
203
272
|
options: readonly SelectOption<TValue>[];
|
|
204
273
|
placeholder?: string;
|
|
205
|
-
selectProps?: Omit<React.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
274
|
+
selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
206
275
|
};
|
|
207
|
-
declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React.JSX.Element;
|
|
276
|
+
declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
208
277
|
|
|
209
278
|
type SliderFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, number> & WithControl<TFieldValues> & {
|
|
210
|
-
sliderProps?: Omit<React.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
279
|
+
sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
211
280
|
transform?: (value: number) => number;
|
|
212
281
|
};
|
|
213
|
-
declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React.JSX.Element;
|
|
282
|
+
declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
214
283
|
|
|
215
284
|
type SwitchFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
216
|
-
switchProps?: Omit<React.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
|
|
285
|
+
switchProps?: Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
|
|
217
286
|
};
|
|
218
|
-
declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React.JSX.Element;
|
|
287
|
+
declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
219
288
|
|
|
220
289
|
type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
221
|
-
textareaProps?: Omit<React.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
290
|
+
textareaProps?: Omit<React$1.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
222
291
|
};
|
|
223
|
-
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React.JSX.Element;
|
|
292
|
+
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
224
293
|
|
|
225
294
|
interface UseFormHelperOptions<T extends FieldValues> {
|
|
226
295
|
onError?: (error: FormValidationError) => void;
|
|
@@ -240,9 +309,57 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
|
|
|
240
309
|
submissionState: FormSubmissionState;
|
|
241
310
|
};
|
|
242
311
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
312
|
+
/**
|
|
313
|
+
* Enhanced hook that provides both form methods and styling defaults
|
|
314
|
+
*
|
|
315
|
+
* This hook combines React Hook Form's useFormContext with Hero Hook Form's
|
|
316
|
+
* styling defaults, giving you access to both form functionality and
|
|
317
|
+
* component styling in one convenient hook.
|
|
318
|
+
*
|
|
319
|
+
* @example
|
|
320
|
+
* ```tsx
|
|
321
|
+
* import { useHeroForm } from "@rachelallyson/hero-hook-form";
|
|
322
|
+
*
|
|
323
|
+
* function MyComponent() {
|
|
324
|
+
* const { formState, getValues, setValue, defaults } = useHeroForm();
|
|
325
|
+
*
|
|
326
|
+
* // Access form state
|
|
327
|
+
* const isSubmitting = formState.isSubmitting;
|
|
328
|
+
* const errors = formState.errors;
|
|
329
|
+
*
|
|
330
|
+
* // Access form methods
|
|
331
|
+
* const values = getValues();
|
|
332
|
+
* const handleReset = () => setValue('fieldName', '');
|
|
333
|
+
*
|
|
334
|
+
* // Access styling defaults
|
|
335
|
+
* const inputDefaults = defaults.input;
|
|
336
|
+
* const buttonDefaults = defaults.submitButton;
|
|
337
|
+
* }
|
|
338
|
+
* ```
|
|
339
|
+
*/
|
|
340
|
+
declare function useHeroForm<TFieldValues extends FieldValues>(): {
|
|
341
|
+
defaults: Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "select" | "switch" | "radioGroup" | "checkbox" | "slider" | "dateInput" | "submitButton">>;
|
|
342
|
+
watch: react_hook_form.UseFormWatch<TFieldValues>;
|
|
343
|
+
getValues: react_hook_form.UseFormGetValues<TFieldValues>;
|
|
344
|
+
getFieldState: react_hook_form.UseFormGetFieldState<TFieldValues>;
|
|
345
|
+
setError: react_hook_form.UseFormSetError<TFieldValues>;
|
|
346
|
+
clearErrors: react_hook_form.UseFormClearErrors<TFieldValues>;
|
|
347
|
+
setValue: react_hook_form.UseFormSetValue<TFieldValues>;
|
|
348
|
+
trigger: react_hook_form.UseFormTrigger<TFieldValues>;
|
|
349
|
+
formState: react_hook_form.FormState<TFieldValues>;
|
|
350
|
+
resetField: react_hook_form.UseFormResetField<TFieldValues>;
|
|
351
|
+
reset: react_hook_form.UseFormReset<TFieldValues>;
|
|
352
|
+
handleSubmit: react_hook_form.UseFormHandleSubmit<TFieldValues, TFieldValues>;
|
|
353
|
+
unregister: react_hook_form.UseFormUnregister<TFieldValues>;
|
|
354
|
+
control: react_hook_form.Control<TFieldValues, any, TFieldValues>;
|
|
355
|
+
register: react_hook_form.UseFormRegister<TFieldValues>;
|
|
356
|
+
setFocus: react_hook_form.UseFormSetFocus<TFieldValues>;
|
|
357
|
+
subscribe: react_hook_form.UseFormSubscribe<TFieldValues>;
|
|
358
|
+
};
|
|
359
|
+
|
|
360
|
+
type InputProps = React$1.ComponentProps<typeof Input>;
|
|
361
|
+
type TextareaProps = React$1.ComponentProps<typeof Textarea>;
|
|
362
|
+
type SelectProps = React$1.ComponentProps<typeof Select>;
|
|
246
363
|
type SharedTextLikeColor = Extract<InputProps["color"], Extract<TextareaProps["color"], SelectProps["color"]>>;
|
|
247
364
|
type SharedTextLikeSize = Extract<InputProps["size"], Extract<TextareaProps["size"], SelectProps["size"]>>;
|
|
248
365
|
type SharedTextLikeVariant = Extract<InputProps["variant"], Extract<TextareaProps["variant"], SelectProps["variant"]>>;
|
|
@@ -257,13 +374,13 @@ type CommonFieldDefaults = Partial<{
|
|
|
257
374
|
}>;
|
|
258
375
|
type InputDefaults = Partial<Omit<InputProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
259
376
|
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">>;
|
|
377
|
+
type CheckboxDefaults = Partial<Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
378
|
+
type RadioGroupDefaults = Partial<Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">>;
|
|
262
379
|
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">>;
|
|
380
|
+
type DateInputDefaults = Partial<Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
381
|
+
type SliderDefaults = Partial<Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
382
|
+
type SwitchDefaults = Partial<Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">>;
|
|
383
|
+
type ButtonDefaults = Partial<Omit<React$1.ComponentProps<typeof Button>, "type" | "isLoading">>;
|
|
267
384
|
interface HeroHookFormDefaultsConfig {
|
|
268
385
|
common?: CommonFieldDefaults;
|
|
269
386
|
input?: InputDefaults;
|
|
@@ -277,28 +394,28 @@ interface HeroHookFormDefaultsConfig {
|
|
|
277
394
|
submitButton?: ButtonDefaults;
|
|
278
395
|
}
|
|
279
396
|
interface HeroHookFormProviderProps {
|
|
280
|
-
children: React.ReactNode;
|
|
397
|
+
children: React$1.ReactNode;
|
|
281
398
|
defaults?: HeroHookFormDefaultsConfig;
|
|
282
399
|
}
|
|
283
|
-
declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React.JSX.Element;
|
|
400
|
+
declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React$1.JSX.Element;
|
|
284
401
|
declare function useHeroHookFormDefaults(): Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "checkbox" | "radioGroup" | "select" | "dateInput" | "slider" | "switch" | "submitButton">>;
|
|
285
402
|
|
|
286
403
|
interface FormProps<TFieldValues extends FieldValues> {
|
|
287
404
|
methods: UseFormReturn<TFieldValues>;
|
|
288
405
|
onSubmit: SubmitHandler<TFieldValues>;
|
|
289
406
|
className?: string;
|
|
290
|
-
children: React.ReactNode;
|
|
407
|
+
children: React$1.ReactNode;
|
|
291
408
|
id?: string;
|
|
292
409
|
noValidate?: boolean;
|
|
293
410
|
}
|
|
294
|
-
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React.JSX.Element;
|
|
411
|
+
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React$1.JSX.Element;
|
|
295
412
|
|
|
296
413
|
interface SubmitButtonProps {
|
|
297
|
-
children: React.ReactNode;
|
|
414
|
+
children: React$1.ReactNode;
|
|
298
415
|
isLoading?: boolean;
|
|
299
|
-
buttonProps?: Omit<React.ComponentProps<typeof Button>, "type" | "isLoading">;
|
|
416
|
+
buttonProps?: Omit<React$1.ComponentProps<typeof Button>, "type" | "isLoading">;
|
|
300
417
|
}
|
|
301
|
-
declare function SubmitButton(props: SubmitButtonProps): React.JSX.Element;
|
|
418
|
+
declare function SubmitButton(props: SubmitButtonProps): React$1.JSX.Element;
|
|
302
419
|
|
|
303
420
|
interface ServerFieldError<TFieldValues extends FieldValues> {
|
|
304
421
|
path: Path<TFieldValues>;
|
|
@@ -311,6 +428,136 @@ interface ServerFormError<TFieldValues extends FieldValues> {
|
|
|
311
428
|
}
|
|
312
429
|
declare function applyServerErrors<TFieldValues extends FieldValues>(setError: UseFormSetError<TFieldValues>, serverError: ServerFormError<TFieldValues>): void;
|
|
313
430
|
|
|
431
|
+
/**
|
|
432
|
+
* Testing utilities for forms
|
|
433
|
+
* These utilities help with testing form behavior and state
|
|
434
|
+
*/
|
|
435
|
+
/**
|
|
436
|
+
* Creates form test utilities for a given form instance
|
|
437
|
+
*/
|
|
438
|
+
declare function createFormTestUtils<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): FormTestUtils<TFieldValues>;
|
|
439
|
+
/**
|
|
440
|
+
* Mock form data for testing
|
|
441
|
+
*/
|
|
442
|
+
declare function createMockFormData<TFieldValues extends FieldValues>(overrides?: Partial<TFieldValues>): TFieldValues;
|
|
443
|
+
/**
|
|
444
|
+
* Mock form errors for testing
|
|
445
|
+
*/
|
|
446
|
+
declare function createMockFormErrors<TFieldValues extends FieldValues>(overrides?: Partial<FieldErrors<TFieldValues>>): FieldErrors<TFieldValues>;
|
|
447
|
+
/**
|
|
448
|
+
* Wait for form state to change (useful for async operations)
|
|
449
|
+
*/
|
|
450
|
+
declare function waitForFormState<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, condition: (state: unknown) => boolean, timeout?: number): Promise<void>;
|
|
451
|
+
/**
|
|
452
|
+
* Simulate user input on a field
|
|
453
|
+
*/
|
|
454
|
+
declare function simulateFieldInput<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>, value: unknown): void;
|
|
455
|
+
/**
|
|
456
|
+
* Simulate form submission
|
|
457
|
+
*/
|
|
458
|
+
declare function simulateFormSubmission<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, onSubmit: (data: TFieldValues) => void | Promise<void>): Promise<void>;
|
|
459
|
+
/**
|
|
460
|
+
* Check if form has validation errors
|
|
461
|
+
*/
|
|
462
|
+
declare function hasFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): boolean;
|
|
463
|
+
/**
|
|
464
|
+
* Get all form errors as a flat array
|
|
465
|
+
*/
|
|
466
|
+
declare function getFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): string[];
|
|
467
|
+
/**
|
|
468
|
+
* Check if a specific field has an error
|
|
469
|
+
*/
|
|
470
|
+
declare function hasFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): boolean;
|
|
471
|
+
/**
|
|
472
|
+
* Get error message for a specific field
|
|
473
|
+
*/
|
|
474
|
+
declare function getFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): string | undefined;
|
|
475
|
+
|
|
476
|
+
/**
|
|
477
|
+
* Validation utility functions for common form validation patterns
|
|
478
|
+
* These utilities help create consistent validation schemas across forms
|
|
479
|
+
*/
|
|
480
|
+
/**
|
|
481
|
+
* Creates a minimum length validation schema
|
|
482
|
+
*/
|
|
483
|
+
declare const createMinLengthSchema: (min: number, fieldName: string) => z.ZodString;
|
|
484
|
+
/**
|
|
485
|
+
* Creates a maximum length validation schema
|
|
486
|
+
*/
|
|
487
|
+
declare const createMaxLengthSchema: (max: number, fieldName: string) => z.ZodString;
|
|
488
|
+
/**
|
|
489
|
+
* Creates an email validation schema
|
|
490
|
+
*/
|
|
491
|
+
declare const createEmailSchema: () => z.ZodEmail;
|
|
492
|
+
/**
|
|
493
|
+
* Creates a required field validation schema
|
|
494
|
+
*/
|
|
495
|
+
declare const createRequiredSchema: (fieldName: string) => z.ZodString;
|
|
496
|
+
/**
|
|
497
|
+
* Creates a URL validation schema
|
|
498
|
+
*/
|
|
499
|
+
declare const createUrlSchema: () => z.ZodString;
|
|
500
|
+
/**
|
|
501
|
+
* Creates a phone number validation schema
|
|
502
|
+
*/
|
|
503
|
+
declare const createPhoneSchema: () => z.ZodString;
|
|
504
|
+
/**
|
|
505
|
+
* Creates a password validation schema with common requirements
|
|
506
|
+
*/
|
|
507
|
+
declare const createPasswordSchema: (minLength?: number) => z.ZodString;
|
|
508
|
+
/**
|
|
509
|
+
* Creates a confirm password validation schema
|
|
510
|
+
*/
|
|
511
|
+
declare const createConfirmPasswordSchema: (passwordField: string) => z.ZodString;
|
|
512
|
+
/**
|
|
513
|
+
* Creates a number validation schema with range
|
|
514
|
+
*/
|
|
515
|
+
declare const createNumberRangeSchema: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
516
|
+
/**
|
|
517
|
+
* Creates a date validation schema
|
|
518
|
+
*/
|
|
519
|
+
declare const createDateSchema: (fieldName: string) => z.ZodDate;
|
|
520
|
+
/**
|
|
521
|
+
* Creates a future date validation schema
|
|
522
|
+
*/
|
|
523
|
+
declare const createFutureDateSchema: (fieldName: string) => z.ZodDate;
|
|
524
|
+
/**
|
|
525
|
+
* Creates a past date validation schema
|
|
526
|
+
*/
|
|
527
|
+
declare const createPastDateSchema: (fieldName: string) => z.ZodDate;
|
|
528
|
+
/**
|
|
529
|
+
* Creates a file validation schema
|
|
530
|
+
*/
|
|
531
|
+
declare const createFileSchema: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
532
|
+
/**
|
|
533
|
+
* Creates a checkbox validation schema (must be checked)
|
|
534
|
+
*/
|
|
535
|
+
declare const createRequiredCheckboxSchema: (fieldName: string) => z.ZodBoolean;
|
|
536
|
+
/**
|
|
537
|
+
* Creates a conditional validation schema
|
|
538
|
+
*/
|
|
539
|
+
declare const createConditionalSchema: <T>(condition: (data: unknown) => boolean, schema: z.ZodSchema<T>, errorMessage?: string) => z.ZodAny;
|
|
540
|
+
/**
|
|
541
|
+
* Common validation patterns for forms
|
|
542
|
+
*/
|
|
543
|
+
declare const commonValidations: {
|
|
544
|
+
conditional: <T>(condition: (data: unknown) => boolean, schema: z.ZodSchema<T>, errorMessage?: string) => z.ZodAny;
|
|
545
|
+
confirmPassword: (passwordField: string) => z.ZodString;
|
|
546
|
+
date: (fieldName: string) => z.ZodDate;
|
|
547
|
+
email: z.ZodEmail;
|
|
548
|
+
file: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
549
|
+
futureDate: (fieldName: string) => z.ZodDate;
|
|
550
|
+
maxLength: (max: number, fieldName: string) => z.ZodString;
|
|
551
|
+
minLength: (min: number, fieldName: string) => z.ZodString;
|
|
552
|
+
numberRange: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
553
|
+
password: (minLength?: number) => z.ZodString;
|
|
554
|
+
pastDate: (fieldName: string) => z.ZodDate;
|
|
555
|
+
phone: z.ZodString;
|
|
556
|
+
required: (fieldName: string) => z.ZodString;
|
|
557
|
+
requiredCheckbox: (fieldName: string) => z.ZodBoolean;
|
|
558
|
+
url: z.ZodString;
|
|
559
|
+
};
|
|
560
|
+
|
|
314
561
|
interface ZodFormProps<T extends FieldValues> {
|
|
315
562
|
className?: string;
|
|
316
563
|
columns?: 1 | 2 | 3;
|
|
@@ -322,33 +569,29 @@ interface ZodFormProps<T extends FieldValues> {
|
|
|
322
569
|
resetButtonText?: string;
|
|
323
570
|
showResetButton?: boolean;
|
|
324
571
|
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
325
|
-
submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
|
|
572
|
+
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
326
573
|
submitButtonText?: string;
|
|
327
574
|
subtitle?: string;
|
|
328
575
|
title?: string;
|
|
576
|
+
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
577
|
+
render?: (formState: {
|
|
578
|
+
form: UseFormReturn<T>;
|
|
579
|
+
isSubmitting: boolean;
|
|
580
|
+
isSubmitted: boolean;
|
|
581
|
+
isSuccess: boolean;
|
|
582
|
+
errors: FieldErrors<T>;
|
|
583
|
+
values: T;
|
|
584
|
+
}) => React$1.ReactNode;
|
|
329
585
|
}
|
|
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;
|
|
586
|
+
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
587
|
|
|
332
588
|
/**
|
|
333
589
|
* 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
590
|
*/
|
|
591
|
+
declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormConfig<TFieldValues>): react_hook_form.UseFormReturn<TFieldValues, any, TFieldValues>;
|
|
348
592
|
/**
|
|
349
|
-
*
|
|
350
|
-
* Uses Zod's built-in type inference to avoid type assertion issues
|
|
593
|
+
* Helper function to create Zod form configurations
|
|
351
594
|
*/
|
|
352
|
-
declare function
|
|
595
|
+
declare function createZodFormConfig<TFieldValues extends FieldValues>(schema: z.ZodSchema<TFieldValues>, fields: ZodFormFieldConfig<TFieldValues>[], defaultValues?: Partial<TFieldValues>): ZodFormConfig<TFieldValues>;
|
|
353
596
|
|
|
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 };
|
|
597
|
+
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, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, 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, createZodFormConfig, getFieldError, getFormErrors, hasFieldError, hasFormErrors, simulateFieldInput, simulateFormSubmission, useFormHelper, useHeroForm, useHeroHookFormDefaults, useZodForm, waitForFormState };
|