@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/README.md
CHANGED
|
@@ -25,26 +25,45 @@ Build beautiful, accessible forms with full TypeScript support, validation, and
|
|
|
25
25
|
|
|
26
26
|
## 🚀 Quick Start
|
|
27
27
|
|
|
28
|
+
### Option 1: All-in-One HeroUI Package (Recommended for Development)
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install @rachelallyson/hero-hook-form @heroui/react react-hook-form zod
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Option 2: Individual HeroUI Packages (Recommended for Production)
|
|
35
|
+
|
|
28
36
|
```bash
|
|
29
|
-
npm install @rachelallyson/hero-hook-form react-hook-form
|
|
37
|
+
npm install @rachelallyson/hero-hook-form react-hook-form zod
|
|
38
|
+
npm install @heroui/button @heroui/input @heroui/select # Only what you need
|
|
30
39
|
```
|
|
31
40
|
|
|
41
|
+
### Basic Usage
|
|
42
|
+
|
|
32
43
|
```tsx
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
44
|
+
import { ZodForm } from "@rachelallyson/hero-hook-form";
|
|
45
|
+
import { z } from "zod";
|
|
46
|
+
|
|
47
|
+
const schema = z.object({
|
|
48
|
+
email: z.string().email("Invalid email"),
|
|
49
|
+
name: z.string().min(1, "Name is required"),
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
const config = {
|
|
53
|
+
schema,
|
|
54
|
+
fields: [
|
|
55
|
+
{ name: "name", type: "input", label: "Name" },
|
|
56
|
+
{ name: "email", type: "input", label: "Email", inputProps: { type: "email" } },
|
|
57
|
+
],
|
|
58
|
+
};
|
|
35
59
|
|
|
36
60
|
export function ContactForm() {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<Form methods={methods} onSubmit={console.log}>
|
|
41
|
-
<InputField control={methods.control} label="Email" name="email" />
|
|
42
|
-
<SubmitButton>Send</SubmitButton>
|
|
43
|
-
</Form>
|
|
44
|
-
);
|
|
61
|
+
return <ZodForm config={config} onSubmit={console.log} />;
|
|
45
62
|
}
|
|
46
63
|
```
|
|
47
64
|
|
|
65
|
+
> 📚 **See [Installation Guide](./docs/installation.md) for detailed setup instructions and bundle optimization tips.**
|
|
66
|
+
|
|
48
67
|
## 📊 Why Hero Hook Form?
|
|
49
68
|
|
|
50
69
|
| Feature | Manual Setup | Hero Hook Form |
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React, { ComponentProps } from 'react';
|
|
1
|
+
import React$1, { ComponentProps } from 'react';
|
|
2
2
|
import { Button } 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
|
import { Checkbox } from '@heroui/checkbox';
|
|
@@ -37,7 +38,11 @@ interface BaseFormFieldConfig<TFieldValues extends FieldValues> {
|
|
|
37
38
|
isDisabled?: boolean;
|
|
38
39
|
rules?: RegisterOptions<TFieldValues, Path<TFieldValues>>;
|
|
39
40
|
condition?: (values: Partial<TFieldValues>) => boolean;
|
|
41
|
+
dependsOn?: Path<TFieldValues>;
|
|
42
|
+
dependsOnValue?: unknown;
|
|
40
43
|
group?: string;
|
|
44
|
+
ariaLabel?: string;
|
|
45
|
+
ariaDescribedBy?: string;
|
|
41
46
|
}
|
|
42
47
|
interface StringFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
43
48
|
type: "input" | "textarea" | "select";
|
|
@@ -82,7 +87,17 @@ interface FileFieldConfig<TFieldValues extends FieldValues> extends BaseFormFiel
|
|
|
82
87
|
multiple?: boolean;
|
|
83
88
|
accept?: string;
|
|
84
89
|
}
|
|
85
|
-
|
|
90
|
+
interface CustomFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
91
|
+
type: "custom";
|
|
92
|
+
render: (field: {
|
|
93
|
+
name: Path<TFieldValues>;
|
|
94
|
+
control: Control<TFieldValues>;
|
|
95
|
+
form: UseFormReturn<TFieldValues>;
|
|
96
|
+
errors: FieldErrors<TFieldValues>;
|
|
97
|
+
isSubmitting: boolean;
|
|
98
|
+
}) => React.ReactNode;
|
|
99
|
+
}
|
|
100
|
+
type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues> | CustomFieldConfig<TFieldValues>;
|
|
86
101
|
interface FormConfig<TFieldValues extends FieldValues> {
|
|
87
102
|
fields: FormFieldConfig<TFieldValues>[];
|
|
88
103
|
layout?: "vertical" | "horizontal" | "grid" | "custom";
|
|
@@ -100,6 +115,16 @@ type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConf
|
|
|
100
115
|
interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
|
|
101
116
|
schema?: zod.ZodSchema<TFieldValues>;
|
|
102
117
|
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
118
|
+
onError?: (errors: FieldErrors<TFieldValues>) => void;
|
|
119
|
+
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
120
|
+
render?: (formState: {
|
|
121
|
+
form: UseFormReturn<TFieldValues>;
|
|
122
|
+
isSubmitting: boolean;
|
|
123
|
+
isSubmitted: boolean;
|
|
124
|
+
isSuccess: boolean;
|
|
125
|
+
errors: FieldErrors<TFieldValues>;
|
|
126
|
+
values: TFieldValues;
|
|
127
|
+
}) => React.ReactNode;
|
|
103
128
|
}
|
|
104
129
|
interface FormValidationError {
|
|
105
130
|
message: string;
|
|
@@ -137,6 +162,33 @@ interface FieldGroup<TFieldValues extends FieldValues> {
|
|
|
137
162
|
defaultCollapsed?: boolean;
|
|
138
163
|
fields: FormFieldConfig<TFieldValues>[];
|
|
139
164
|
}
|
|
165
|
+
interface ValidationUtils {
|
|
166
|
+
createMinLengthSchema: (min: number, fieldName: string) => zod.ZodString;
|
|
167
|
+
createMaxLengthSchema: (max: number, fieldName: string) => zod.ZodString;
|
|
168
|
+
createEmailSchema: () => zod.ZodString;
|
|
169
|
+
createRequiredSchema: (fieldName: string) => zod.ZodString;
|
|
170
|
+
createUrlSchema: () => zod.ZodString;
|
|
171
|
+
createPhoneSchema: () => zod.ZodString;
|
|
172
|
+
}
|
|
173
|
+
interface FormTestUtils<TFieldValues extends FieldValues> {
|
|
174
|
+
getField: (name: Path<TFieldValues>) => {
|
|
175
|
+
value: unknown;
|
|
176
|
+
error: unknown;
|
|
177
|
+
isDirty: boolean;
|
|
178
|
+
isTouched: boolean;
|
|
179
|
+
};
|
|
180
|
+
submitForm: () => Promise<void>;
|
|
181
|
+
resetForm: () => void;
|
|
182
|
+
getFormState: () => {
|
|
183
|
+
values: TFieldValues;
|
|
184
|
+
errors: FieldErrors<TFieldValues>;
|
|
185
|
+
isSubmitting: boolean;
|
|
186
|
+
isSubmitted: boolean;
|
|
187
|
+
isSuccess: boolean;
|
|
188
|
+
};
|
|
189
|
+
setFieldValue: (name: Path<TFieldValues>, value: unknown) => void;
|
|
190
|
+
triggerValidation: (name?: Path<TFieldValues>) => Promise<boolean>;
|
|
191
|
+
}
|
|
140
192
|
|
|
141
193
|
interface FormProps$1<T extends FieldValues> {
|
|
142
194
|
className?: string;
|
|
@@ -149,45 +201,45 @@ interface FormProps$1<T extends FieldValues> {
|
|
|
149
201
|
resetButtonText?: string;
|
|
150
202
|
showResetButton?: boolean;
|
|
151
203
|
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
152
|
-
submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
|
|
204
|
+
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
153
205
|
submitButtonText?: string;
|
|
154
206
|
subtitle?: string;
|
|
155
207
|
title?: string;
|
|
156
208
|
defaultValues?: Partial<T>;
|
|
157
209
|
}
|
|
158
|
-
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;
|
|
210
|
+
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;
|
|
159
211
|
|
|
160
212
|
interface FormFieldProps<TFieldValues extends FieldValues> {
|
|
161
213
|
config: FormFieldConfig<TFieldValues>;
|
|
162
214
|
form: UseFormReturn<TFieldValues>;
|
|
163
215
|
submissionState: FormSubmissionState;
|
|
164
216
|
}
|
|
165
|
-
declare function FormField<TFieldValues extends FieldValues>({ config, form, submissionState, }: FormFieldProps<TFieldValues>): React.JSX.Element | null;
|
|
217
|
+
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;
|
|
166
218
|
|
|
167
219
|
type CheckboxFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
168
|
-
checkboxProps?: Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
220
|
+
checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
169
221
|
};
|
|
170
|
-
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React.JSX.Element;
|
|
222
|
+
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
171
223
|
|
|
172
224
|
type DateFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, CalendarDate | null> & WithControl<TFieldValues> & {
|
|
173
|
-
dateProps?: Omit<React.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
225
|
+
dateProps?: Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
174
226
|
transform?: (value: CalendarDate | null) => CalendarDate | null;
|
|
175
227
|
};
|
|
176
|
-
declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React.JSX.Element;
|
|
228
|
+
declare function DateField<TFieldValues extends FieldValues>(props: DateFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
177
229
|
|
|
178
230
|
type FileFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, FileList | null> & WithControl<TFieldValues> & {
|
|
179
|
-
fileProps?: Omit<React.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
231
|
+
fileProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "type">;
|
|
180
232
|
transform?: (value: FileList | null) => FileList | null;
|
|
181
233
|
multiple?: boolean;
|
|
182
234
|
accept?: string;
|
|
183
235
|
};
|
|
184
|
-
declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React.JSX.Element;
|
|
236
|
+
declare function FileField<TFieldValues extends FieldValues>(props: FileFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
185
237
|
|
|
186
238
|
type InputFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
187
|
-
inputProps?: Omit<React.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
239
|
+
inputProps?: Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
188
240
|
transform?: (value: string) => string;
|
|
189
241
|
};
|
|
190
|
-
declare function InputField<TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>): React.JSX.Element;
|
|
242
|
+
declare function InputField<TFieldValues extends FieldValues>(props: InputFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
191
243
|
|
|
192
244
|
interface RadioOption<TValue extends string | number> {
|
|
193
245
|
label: string;
|
|
@@ -197,9 +249,9 @@ interface RadioOption<TValue extends string | number> {
|
|
|
197
249
|
}
|
|
198
250
|
type RadioGroupFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
199
251
|
options: readonly RadioOption<TValue>[];
|
|
200
|
-
radioGroupProps?: Omit<React.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
252
|
+
radioGroupProps?: Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">;
|
|
201
253
|
};
|
|
202
|
-
declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React.JSX.Element;
|
|
254
|
+
declare function RadioGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: RadioGroupFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
203
255
|
|
|
204
256
|
interface SelectOption<TValue extends string | number> {
|
|
205
257
|
label: string;
|
|
@@ -210,25 +262,25 @@ interface SelectOption<TValue extends string | number> {
|
|
|
210
262
|
type SelectFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & {
|
|
211
263
|
options: readonly SelectOption<TValue>[];
|
|
212
264
|
placeholder?: string;
|
|
213
|
-
selectProps?: Omit<React.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
265
|
+
selectProps?: Omit<React$1.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
214
266
|
};
|
|
215
|
-
declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React.JSX.Element;
|
|
267
|
+
declare function SelectField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: SelectFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
216
268
|
|
|
217
269
|
type SliderFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, number> & WithControl<TFieldValues> & {
|
|
218
|
-
sliderProps?: Omit<React.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
270
|
+
sliderProps?: Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
219
271
|
transform?: (value: number) => number;
|
|
220
272
|
};
|
|
221
|
-
declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React.JSX.Element;
|
|
273
|
+
declare function SliderField<TFieldValues extends FieldValues>(props: SliderFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
222
274
|
|
|
223
275
|
type SwitchFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, boolean> & WithControl<TFieldValues> & {
|
|
224
|
-
switchProps?: Omit<React.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
|
|
276
|
+
switchProps?: Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">;
|
|
225
277
|
};
|
|
226
|
-
declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React.JSX.Element;
|
|
278
|
+
declare function SwitchField<TFieldValues extends FieldValues>(props: SwitchFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
227
279
|
|
|
228
280
|
type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFieldValues, string> & WithControl<TFieldValues> & {
|
|
229
|
-
textareaProps?: Omit<React.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
281
|
+
textareaProps?: Omit<React$1.ComponentProps<typeof Textarea>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
230
282
|
};
|
|
231
|
-
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React.JSX.Element;
|
|
283
|
+
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
232
284
|
|
|
233
285
|
interface UseFormHelperOptions<T extends FieldValues> {
|
|
234
286
|
onError?: (error: FormValidationError) => void;
|
|
@@ -248,9 +300,9 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
|
|
|
248
300
|
submissionState: FormSubmissionState;
|
|
249
301
|
};
|
|
250
302
|
|
|
251
|
-
type InputProps = React.ComponentProps<typeof Input>;
|
|
252
|
-
type TextareaProps = React.ComponentProps<typeof Textarea>;
|
|
253
|
-
type SelectProps = React.ComponentProps<typeof Select>;
|
|
303
|
+
type InputProps = React$1.ComponentProps<typeof Input>;
|
|
304
|
+
type TextareaProps = React$1.ComponentProps<typeof Textarea>;
|
|
305
|
+
type SelectProps = React$1.ComponentProps<typeof Select>;
|
|
254
306
|
type SharedTextLikeColor = Extract<InputProps["color"], Extract<TextareaProps["color"], SelectProps["color"]>>;
|
|
255
307
|
type SharedTextLikeSize = Extract<InputProps["size"], Extract<TextareaProps["size"], SelectProps["size"]>>;
|
|
256
308
|
type SharedTextLikeVariant = Extract<InputProps["variant"], Extract<TextareaProps["variant"], SelectProps["variant"]>>;
|
|
@@ -265,13 +317,13 @@ type CommonFieldDefaults = Partial<{
|
|
|
265
317
|
}>;
|
|
266
318
|
type InputDefaults = Partial<Omit<InputProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
267
319
|
type TextareaDefaults = Partial<Omit<TextareaProps, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
268
|
-
type CheckboxDefaults = Partial<Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
269
|
-
type RadioGroupDefaults = Partial<Omit<React.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">>;
|
|
320
|
+
type CheckboxDefaults = Partial<Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
321
|
+
type RadioGroupDefaults = Partial<Omit<React$1.ComponentProps<typeof RadioGroup>, "value" | "onValueChange" | "label">>;
|
|
270
322
|
type SelectDefaults = Partial<Omit<SelectProps, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
271
|
-
type DateInputDefaults = Partial<Omit<React.ComponentProps<typeof DateInput>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
272
|
-
type SliderDefaults = Partial<Omit<React.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
273
|
-
type SwitchDefaults = Partial<Omit<React.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">>;
|
|
274
|
-
type ButtonDefaults = Partial<Omit<React.ComponentProps<typeof Button$1>, "type" | "isLoading">>;
|
|
323
|
+
type DateInputDefaults = Partial<Omit<React$1.ComponentProps<typeof DateInput>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
324
|
+
type SliderDefaults = Partial<Omit<React$1.ComponentProps<typeof Slider>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">>;
|
|
325
|
+
type SwitchDefaults = Partial<Omit<React$1.ComponentProps<typeof Switch>, "isSelected" | "onValueChange" | "isInvalid" | "isDisabled">>;
|
|
326
|
+
type ButtonDefaults = Partial<Omit<React$1.ComponentProps<typeof Button$1>, "type" | "isLoading">>;
|
|
275
327
|
interface HeroHookFormDefaultsConfig {
|
|
276
328
|
common?: CommonFieldDefaults;
|
|
277
329
|
input?: InputDefaults;
|
|
@@ -285,28 +337,28 @@ interface HeroHookFormDefaultsConfig {
|
|
|
285
337
|
submitButton?: ButtonDefaults;
|
|
286
338
|
}
|
|
287
339
|
interface HeroHookFormProviderProps {
|
|
288
|
-
children: React.ReactNode;
|
|
340
|
+
children: React$1.ReactNode;
|
|
289
341
|
defaults?: HeroHookFormDefaultsConfig;
|
|
290
342
|
}
|
|
291
|
-
declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React.JSX.Element;
|
|
343
|
+
declare function HeroHookFormProvider(props: HeroHookFormProviderProps): React$1.JSX.Element;
|
|
292
344
|
declare function useHeroHookFormDefaults(): Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "checkbox" | "radioGroup" | "select" | "dateInput" | "slider" | "switch" | "submitButton">>;
|
|
293
345
|
|
|
294
346
|
interface FormProps<TFieldValues extends FieldValues> {
|
|
295
347
|
methods: UseFormReturn<TFieldValues>;
|
|
296
348
|
onSubmit: SubmitHandler<TFieldValues>;
|
|
297
349
|
className?: string;
|
|
298
|
-
children: React.ReactNode;
|
|
350
|
+
children: React$1.ReactNode;
|
|
299
351
|
id?: string;
|
|
300
352
|
noValidate?: boolean;
|
|
301
353
|
}
|
|
302
|
-
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React.JSX.Element;
|
|
354
|
+
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React$1.JSX.Element;
|
|
303
355
|
|
|
304
356
|
interface SubmitButtonProps {
|
|
305
|
-
children: React.ReactNode;
|
|
357
|
+
children: React$1.ReactNode;
|
|
306
358
|
isLoading?: boolean;
|
|
307
|
-
buttonProps?: Omit<React.ComponentProps<typeof Button$1>, "type" | "isLoading">;
|
|
359
|
+
buttonProps?: Omit<React$1.ComponentProps<typeof Button$1>, "type" | "isLoading">;
|
|
308
360
|
}
|
|
309
|
-
declare function SubmitButton(props: SubmitButtonProps): React.JSX.Element;
|
|
361
|
+
declare function SubmitButton(props: SubmitButtonProps): React$1.JSX.Element;
|
|
310
362
|
|
|
311
363
|
interface ServerFieldError<TFieldValues extends FieldValues> {
|
|
312
364
|
path: Path<TFieldValues>;
|
|
@@ -319,6 +371,136 @@ interface ServerFormError<TFieldValues extends FieldValues> {
|
|
|
319
371
|
}
|
|
320
372
|
declare function applyServerErrors<TFieldValues extends FieldValues>(setError: UseFormSetError<TFieldValues>, serverError: ServerFormError<TFieldValues>): void;
|
|
321
373
|
|
|
374
|
+
/**
|
|
375
|
+
* Testing utilities for forms
|
|
376
|
+
* These utilities help with testing form behavior and state
|
|
377
|
+
*/
|
|
378
|
+
/**
|
|
379
|
+
* Creates form test utilities for a given form instance
|
|
380
|
+
*/
|
|
381
|
+
declare function createFormTestUtils<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): FormTestUtils<TFieldValues>;
|
|
382
|
+
/**
|
|
383
|
+
* Mock form data for testing
|
|
384
|
+
*/
|
|
385
|
+
declare function createMockFormData<TFieldValues extends FieldValues>(overrides?: Partial<TFieldValues>): TFieldValues;
|
|
386
|
+
/**
|
|
387
|
+
* Mock form errors for testing
|
|
388
|
+
*/
|
|
389
|
+
declare function createMockFormErrors<TFieldValues extends FieldValues>(overrides?: Partial<FieldErrors<TFieldValues>>): FieldErrors<TFieldValues>;
|
|
390
|
+
/**
|
|
391
|
+
* Wait for form state to change (useful for async operations)
|
|
392
|
+
*/
|
|
393
|
+
declare function waitForFormState<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, condition: (state: unknown) => boolean, timeout?: number): Promise<void>;
|
|
394
|
+
/**
|
|
395
|
+
* Simulate user input on a field
|
|
396
|
+
*/
|
|
397
|
+
declare function simulateFieldInput<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>, value: unknown): void;
|
|
398
|
+
/**
|
|
399
|
+
* Simulate form submission
|
|
400
|
+
*/
|
|
401
|
+
declare function simulateFormSubmission<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, onSubmit: (data: TFieldValues) => void | Promise<void>): Promise<void>;
|
|
402
|
+
/**
|
|
403
|
+
* Check if form has validation errors
|
|
404
|
+
*/
|
|
405
|
+
declare function hasFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): boolean;
|
|
406
|
+
/**
|
|
407
|
+
* Get all form errors as a flat array
|
|
408
|
+
*/
|
|
409
|
+
declare function getFormErrors<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>): string[];
|
|
410
|
+
/**
|
|
411
|
+
* Check if a specific field has an error
|
|
412
|
+
*/
|
|
413
|
+
declare function hasFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): boolean;
|
|
414
|
+
/**
|
|
415
|
+
* Get error message for a specific field
|
|
416
|
+
*/
|
|
417
|
+
declare function getFieldError<TFieldValues extends FieldValues>(form: UseFormReturn<TFieldValues>, name: Path<TFieldValues>): string | undefined;
|
|
418
|
+
|
|
419
|
+
/**
|
|
420
|
+
* Validation utility functions for common form validation patterns
|
|
421
|
+
* These utilities help create consistent validation schemas across forms
|
|
422
|
+
*/
|
|
423
|
+
/**
|
|
424
|
+
* Creates a minimum length validation schema
|
|
425
|
+
*/
|
|
426
|
+
declare const createMinLengthSchema: (min: number, fieldName: string) => z.ZodString;
|
|
427
|
+
/**
|
|
428
|
+
* Creates a maximum length validation schema
|
|
429
|
+
*/
|
|
430
|
+
declare const createMaxLengthSchema: (max: number, fieldName: string) => z.ZodString;
|
|
431
|
+
/**
|
|
432
|
+
* Creates an email validation schema
|
|
433
|
+
*/
|
|
434
|
+
declare const createEmailSchema: () => z.ZodEmail;
|
|
435
|
+
/**
|
|
436
|
+
* Creates a required field validation schema
|
|
437
|
+
*/
|
|
438
|
+
declare const createRequiredSchema: (fieldName: string) => z.ZodString;
|
|
439
|
+
/**
|
|
440
|
+
* Creates a URL validation schema
|
|
441
|
+
*/
|
|
442
|
+
declare const createUrlSchema: () => z.ZodString;
|
|
443
|
+
/**
|
|
444
|
+
* Creates a phone number validation schema
|
|
445
|
+
*/
|
|
446
|
+
declare const createPhoneSchema: () => z.ZodString;
|
|
447
|
+
/**
|
|
448
|
+
* Creates a password validation schema with common requirements
|
|
449
|
+
*/
|
|
450
|
+
declare const createPasswordSchema: (minLength?: number) => z.ZodString;
|
|
451
|
+
/**
|
|
452
|
+
* Creates a confirm password validation schema
|
|
453
|
+
*/
|
|
454
|
+
declare const createConfirmPasswordSchema: (passwordField: string) => z.ZodString;
|
|
455
|
+
/**
|
|
456
|
+
* Creates a number validation schema with range
|
|
457
|
+
*/
|
|
458
|
+
declare const createNumberRangeSchema: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
459
|
+
/**
|
|
460
|
+
* Creates a date validation schema
|
|
461
|
+
*/
|
|
462
|
+
declare const createDateSchema: (fieldName: string) => z.ZodDate;
|
|
463
|
+
/**
|
|
464
|
+
* Creates a future date validation schema
|
|
465
|
+
*/
|
|
466
|
+
declare const createFutureDateSchema: (fieldName: string) => z.ZodDate;
|
|
467
|
+
/**
|
|
468
|
+
* Creates a past date validation schema
|
|
469
|
+
*/
|
|
470
|
+
declare const createPastDateSchema: (fieldName: string) => z.ZodDate;
|
|
471
|
+
/**
|
|
472
|
+
* Creates a file validation schema
|
|
473
|
+
*/
|
|
474
|
+
declare const createFileSchema: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
475
|
+
/**
|
|
476
|
+
* Creates a checkbox validation schema (must be checked)
|
|
477
|
+
*/
|
|
478
|
+
declare const createRequiredCheckboxSchema: (fieldName: string) => z.ZodBoolean;
|
|
479
|
+
/**
|
|
480
|
+
* Creates a conditional validation schema
|
|
481
|
+
*/
|
|
482
|
+
declare const createConditionalSchema: <T>(condition: (data: unknown) => boolean, schema: z.ZodSchema<T>, errorMessage?: string) => z.ZodAny;
|
|
483
|
+
/**
|
|
484
|
+
* Common validation patterns for forms
|
|
485
|
+
*/
|
|
486
|
+
declare const commonValidations: {
|
|
487
|
+
conditional: <T>(condition: (data: unknown) => boolean, schema: z.ZodSchema<T>, errorMessage?: string) => z.ZodAny;
|
|
488
|
+
confirmPassword: (passwordField: string) => z.ZodString;
|
|
489
|
+
date: (fieldName: string) => z.ZodDate;
|
|
490
|
+
email: z.ZodEmail;
|
|
491
|
+
file: (maxSizeInMB?: number, allowedTypes?: string[]) => z.ZodCustom<File, File>;
|
|
492
|
+
futureDate: (fieldName: string) => z.ZodDate;
|
|
493
|
+
maxLength: (max: number, fieldName: string) => z.ZodString;
|
|
494
|
+
minLength: (min: number, fieldName: string) => z.ZodString;
|
|
495
|
+
numberRange: (min: number, max: number, fieldName: string) => z.ZodNumber;
|
|
496
|
+
password: (minLength?: number) => z.ZodString;
|
|
497
|
+
pastDate: (fieldName: string) => z.ZodDate;
|
|
498
|
+
phone: z.ZodString;
|
|
499
|
+
required: (fieldName: string) => z.ZodString;
|
|
500
|
+
requiredCheckbox: (fieldName: string) => z.ZodBoolean;
|
|
501
|
+
url: z.ZodString;
|
|
502
|
+
};
|
|
503
|
+
|
|
322
504
|
interface ZodFormProps<T extends FieldValues> {
|
|
323
505
|
className?: string;
|
|
324
506
|
columns?: 1 | 2 | 3;
|
|
@@ -330,33 +512,25 @@ interface ZodFormProps<T extends FieldValues> {
|
|
|
330
512
|
resetButtonText?: string;
|
|
331
513
|
showResetButton?: boolean;
|
|
332
514
|
spacing?: "2" | "4" | "6" | "8" | "lg";
|
|
333
|
-
submitButtonProps?: Partial<React.ComponentProps<typeof Button>>;
|
|
515
|
+
submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
|
|
334
516
|
submitButtonText?: string;
|
|
335
517
|
subtitle?: string;
|
|
336
518
|
title?: string;
|
|
519
|
+
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
520
|
+
render?: (formState: {
|
|
521
|
+
form: UseFormReturn<T>;
|
|
522
|
+
isSubmitting: boolean;
|
|
523
|
+
isSubmitted: boolean;
|
|
524
|
+
isSuccess: boolean;
|
|
525
|
+
errors: FieldErrors<T>;
|
|
526
|
+
values: T;
|
|
527
|
+
}) => React$1.ReactNode;
|
|
337
528
|
}
|
|
338
|
-
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;
|
|
529
|
+
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;
|
|
339
530
|
|
|
340
531
|
/**
|
|
341
532
|
* Hook for using Zod validation with React Hook Form
|
|
342
|
-
* This hook is only available when zod and @hookform/resolvers are installed
|
|
343
|
-
*
|
|
344
|
-
* TODO: Remove type assertion when @hookform/resolvers adds official Zod v4 support
|
|
345
|
-
*
|
|
346
|
-
* Current issue: @hookform/resolvers v5.2.1 is not compatible with Zod v4 due to
|
|
347
|
-
* internal type structure changes. The resolver expects Zod3Type<Output, Input> but
|
|
348
|
-
* Zod v4 uses a different internal structure (_zod.output vs _output).
|
|
349
|
-
*
|
|
350
|
-
* Related issues:
|
|
351
|
-
* - GitHub Issue: https://github.com/react-hook-form/resolvers/issues/813
|
|
352
|
-
* - GitHub PR: https://github.com/react-hook-form/resolvers/pull/803
|
|
353
|
-
*
|
|
354
|
-
* Workaround: Use type assertion until official support is added
|
|
355
|
-
*/
|
|
356
|
-
/**
|
|
357
|
-
* Hook for using Zod validation with React Hook Form
|
|
358
|
-
* Uses Zod's built-in type inference to avoid type assertion issues
|
|
359
533
|
*/
|
|
360
534
|
declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormConfig<TFieldValues>): react_hook_form.UseFormReturn<TFieldValues, any, TFieldValues>;
|
|
361
535
|
|
|
362
|
-
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 };
|
|
536
|
+
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 };
|