@rachelallyson/hero-hook-form 2.1.2 → 2.2.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 +56 -3
- package/dist/index.d.ts +825 -16
- package/dist/index.js +238 -137
- package/dist/react/index.d.ts +825 -16
- package/dist/react/index.js +238 -137
- package/package.json +1 -1
package/dist/react/index.d.ts
CHANGED
|
@@ -115,7 +115,19 @@ interface DynamicSectionConfig<TFieldValues extends FieldValues> extends BaseFor
|
|
|
115
115
|
condition: (formData: Partial<TFieldValues>) => boolean;
|
|
116
116
|
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
117
117
|
}
|
|
118
|
-
|
|
118
|
+
interface ContentFieldConfig<TFieldValues extends FieldValues> {
|
|
119
|
+
type: "content";
|
|
120
|
+
name?: Path<TFieldValues>;
|
|
121
|
+
title?: string;
|
|
122
|
+
description?: string;
|
|
123
|
+
render?: (field: {
|
|
124
|
+
form: UseFormReturn<TFieldValues>;
|
|
125
|
+
errors: FieldErrors<TFieldValues>;
|
|
126
|
+
isSubmitting: boolean;
|
|
127
|
+
}) => React.ReactNode;
|
|
128
|
+
className?: string;
|
|
129
|
+
}
|
|
130
|
+
type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues> | FontPickerFieldConfig<TFieldValues> | CustomFieldConfig<TFieldValues> | ConditionalFieldConfig<TFieldValues> | FieldArrayConfig<TFieldValues> | DynamicSectionConfig<TFieldValues> | ContentFieldConfig<TFieldValues>;
|
|
119
131
|
interface FormConfig<TFieldValues extends FieldValues> {
|
|
120
132
|
fields: FormFieldConfig<TFieldValues>[];
|
|
121
133
|
layout?: "vertical" | "horizontal" | "grid" | "custom";
|
|
@@ -129,7 +141,7 @@ interface FormConfig<TFieldValues extends FieldValues> {
|
|
|
129
141
|
className?: string;
|
|
130
142
|
defaultValues?: Partial<TFieldValues>;
|
|
131
143
|
}
|
|
132
|
-
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"> | Omit<CustomFieldConfig<TFieldValues>, "rules"> | Omit<ConditionalFieldConfig<TFieldValues>, "rules"> | Omit<FieldArrayConfig<TFieldValues>, "rules"> | Omit<DynamicSectionConfig<TFieldValues>, "rules">;
|
|
144
|
+
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"> | Omit<CustomFieldConfig<TFieldValues>, "rules"> | Omit<ConditionalFieldConfig<TFieldValues>, "rules"> | Omit<FieldArrayConfig<TFieldValues>, "rules"> | Omit<DynamicSectionConfig<TFieldValues>, "rules"> | ContentFieldConfig<TFieldValues>;
|
|
133
145
|
interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
|
|
134
146
|
schema: zod.ZodSchema<TFieldValues>;
|
|
135
147
|
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
@@ -208,6 +220,11 @@ interface FormTestUtils<TFieldValues extends FieldValues> {
|
|
|
208
220
|
triggerValidation: (name?: Path<TFieldValues>) => Promise<boolean>;
|
|
209
221
|
}
|
|
210
222
|
|
|
223
|
+
/**
|
|
224
|
+
* Props for the Form component.
|
|
225
|
+
*
|
|
226
|
+
* @template T - The form data type
|
|
227
|
+
*/
|
|
211
228
|
interface FormProps$1<T extends FieldValues> {
|
|
212
229
|
className?: string;
|
|
213
230
|
columns?: 1 | 2 | 3;
|
|
@@ -225,6 +242,57 @@ interface FormProps$1<T extends FieldValues> {
|
|
|
225
242
|
title?: string;
|
|
226
243
|
defaultValues?: Partial<T>;
|
|
227
244
|
}
|
|
245
|
+
/**
|
|
246
|
+
* Base form component for building forms without Zod validation.
|
|
247
|
+
*
|
|
248
|
+
* @description
|
|
249
|
+
* This component provides a flexible form solution using React Hook Form
|
|
250
|
+
* without requiring Zod schemas. It's useful when you need more control over
|
|
251
|
+
* validation or want to use React Hook Form's built-in validation rules.
|
|
252
|
+
*
|
|
253
|
+
* @template T - The form data type
|
|
254
|
+
*
|
|
255
|
+
* @param {FormProps<T>} props - Component props
|
|
256
|
+
* @param {FormFieldConfig<T>[]} props.fields - Array of field configurations
|
|
257
|
+
* @param {SubmitHandler<T>} props.onSubmit - Submit handler function
|
|
258
|
+
* @param {Partial<T>} [props.defaultValues] - Default form values
|
|
259
|
+
* @param {string} [props.title] - Optional form title
|
|
260
|
+
* @param {string} [props.subtitle] - Optional form subtitle
|
|
261
|
+
* @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout
|
|
262
|
+
* @param {1|2|3} [props.columns=1] - Number of columns for grid layout
|
|
263
|
+
* @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between fields
|
|
264
|
+
* @param {string} [props.submitButtonText="Submit"] - Submit button text
|
|
265
|
+
* @param {boolean} [props.showResetButton=false] - Whether to show reset button
|
|
266
|
+
* @param {(error: FormValidationError) => void} [props.onError] - Error callback
|
|
267
|
+
* @param {(data: T) => void} [props.onSuccess] - Success callback
|
|
268
|
+
*
|
|
269
|
+
* @returns {JSX.Element} The rendered form component
|
|
270
|
+
*
|
|
271
|
+
* @example
|
|
272
|
+
* ```tsx
|
|
273
|
+
* import { ConfigurableForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
274
|
+
*
|
|
275
|
+
* function MyForm() {
|
|
276
|
+
* return (
|
|
277
|
+
* <ConfigurableForm
|
|
278
|
+
* fields={[
|
|
279
|
+
* FormFieldHelpers.input("name", "Name"),
|
|
280
|
+
* FormFieldHelpers.input("email", "Email", "email"),
|
|
281
|
+
* ]}
|
|
282
|
+
* defaultValues={{ name: "", email: "" }}
|
|
283
|
+
* onSubmit={async (data) => {
|
|
284
|
+
* console.log("Submitted:", data);
|
|
285
|
+
* }}
|
|
286
|
+
* title="Contact Form"
|
|
287
|
+
* />
|
|
288
|
+
* );
|
|
289
|
+
* }
|
|
290
|
+
* ```
|
|
291
|
+
*
|
|
292
|
+
* @see {@link ZodForm} for Zod-integrated form with automatic validation
|
|
293
|
+
* @see {@link FormFieldHelpers} for field creation helpers
|
|
294
|
+
* @category Components
|
|
295
|
+
*/
|
|
228
296
|
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;
|
|
229
297
|
|
|
230
298
|
interface FormFieldProps<TFieldValues extends FieldValues> {
|
|
@@ -269,11 +337,13 @@ interface ServerActionFormProps<T extends FieldValues> {
|
|
|
269
337
|
title?: string;
|
|
270
338
|
}
|
|
271
339
|
/**
|
|
272
|
-
* ServerActionForm - A form component compatible with Next.js Server Actions
|
|
340
|
+
* ServerActionForm - A form component compatible with Next.js Server Actions.
|
|
273
341
|
*
|
|
342
|
+
* @description
|
|
274
343
|
* This component works with Next.js authentication patterns by using native
|
|
275
344
|
* HTML form submission with Server Actions, while still providing the
|
|
276
|
-
* beautiful HeroUI field components.
|
|
345
|
+
* beautiful HeroUI field components. It uses React's useActionState hook
|
|
346
|
+
* to manage form state and handle server responses.
|
|
277
347
|
*
|
|
278
348
|
* **Validation Options:**
|
|
279
349
|
* - **Server-side only (default)**: Form submits directly to Server Action
|
|
@@ -284,22 +354,77 @@ interface ServerActionFormProps<T extends FieldValues> {
|
|
|
284
354
|
* - If your Server Action calls `redirect()`, success messages won't display
|
|
285
355
|
* (the page navigates away). Use URL params or cookies for success messages
|
|
286
356
|
* when redirecting.
|
|
357
|
+
* - Server Actions receive FormData, not JSON, so field values are strings
|
|
358
|
+
*
|
|
359
|
+
* @template T - The form data type
|
|
360
|
+
*
|
|
361
|
+
* @param {ServerActionFormProps<T>} props - Component props
|
|
362
|
+
* @param {ServerAction<ActionState, FormData>} props.action - Next.js Server Action function
|
|
363
|
+
* @param {FormFieldConfig<T>[]} props.fields - Array of field configurations
|
|
364
|
+
* @param {z.ZodSchema<T>} [props.clientValidationSchema] - Optional Zod schema for client-side validation
|
|
365
|
+
* @param {Partial<T>} [props.defaultValues] - Default form values
|
|
366
|
+
* @param {ActionState} [props.initialState] - Initial state for useActionState
|
|
367
|
+
* @param {string} [props.title] - Optional form title
|
|
368
|
+
* @param {string} [props.subtitle] - Optional form subtitle
|
|
369
|
+
* @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout style
|
|
370
|
+
* @param {1|2|3} [props.columns=1] - Number of columns for grid layout
|
|
371
|
+
* @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between form fields
|
|
372
|
+
* @param {string} [props.submitButtonText="Submit"] - Text for the submit button
|
|
373
|
+
* @param {boolean} [props.showResetButton=false] - Whether to show a reset button
|
|
374
|
+
* @param {(error: {...}) => void} [props.onError] - Error callback
|
|
375
|
+
* @param {(data: FormData) => void} [props.onSuccess] - Success callback
|
|
376
|
+
*
|
|
377
|
+
* @returns {JSX.Element} The rendered form component
|
|
287
378
|
*
|
|
288
379
|
* @example
|
|
380
|
+
* Server-side only validation:
|
|
289
381
|
* ```tsx
|
|
290
|
-
*
|
|
382
|
+
* import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
383
|
+
* import { signup } from "@/app/actions/auth";
|
|
384
|
+
*
|
|
291
385
|
* <ServerActionForm
|
|
292
386
|
* action={signup}
|
|
293
|
-
* fields={[
|
|
387
|
+
* fields={[
|
|
388
|
+
* FormFieldHelpers.input("name", "Name"),
|
|
389
|
+
* FormFieldHelpers.input("email", "Email", "email"),
|
|
390
|
+
* FormFieldHelpers.input("password", "Password", "password"),
|
|
391
|
+
* ]}
|
|
294
392
|
* />
|
|
393
|
+
* ```
|
|
394
|
+
*
|
|
395
|
+
* @example
|
|
396
|
+
* Client + Server validation:
|
|
397
|
+
* ```tsx
|
|
398
|
+
* import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
399
|
+
* import { signup } from "@/app/actions/auth";
|
|
400
|
+
* import { z } from "zod";
|
|
401
|
+
*
|
|
402
|
+
* const signupSchema = z.object({
|
|
403
|
+
* name: z.string().min(2),
|
|
404
|
+
* email: z.string().email(),
|
|
405
|
+
* password: z.string().min(8),
|
|
406
|
+
* });
|
|
295
407
|
*
|
|
296
|
-
* // Client + Server validation
|
|
297
408
|
* <ServerActionForm
|
|
298
409
|
* action={signup}
|
|
299
410
|
* clientValidationSchema={signupSchema}
|
|
300
|
-
* fields={[
|
|
411
|
+
* fields={[
|
|
412
|
+
* FormFieldHelpers.input("name", "Name"),
|
|
413
|
+
* FormFieldHelpers.input("email", "Email", "email"),
|
|
414
|
+
* FormFieldHelpers.input("password", "Password", "password"),
|
|
415
|
+
* ]}
|
|
416
|
+
* onError={(error) => {
|
|
417
|
+
* console.error("Form errors:", error.errors);
|
|
418
|
+
* }}
|
|
419
|
+
* onSuccess={(data) => {
|
|
420
|
+
* console.log("Form submitted:", data);
|
|
421
|
+
* }}
|
|
301
422
|
* />
|
|
302
423
|
* ```
|
|
424
|
+
*
|
|
425
|
+
* @see {@link ZodForm} for client-side only forms with Zod validation
|
|
426
|
+
* @see {@link ConfigurableForm} for forms without Server Actions
|
|
427
|
+
* @category Components
|
|
303
428
|
*/
|
|
304
429
|
declare function ServerActionForm<T extends FieldValues>({ action, className, clientValidationSchema, columns, defaultValues, fields, initialState, layout, onError, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ServerActionFormProps<T>): React$1.JSX.Element;
|
|
305
430
|
|
|
@@ -380,6 +505,11 @@ type TextareaFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFiel
|
|
|
380
505
|
};
|
|
381
506
|
declare function TextareaField<TFieldValues extends FieldValues>(props: TextareaFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
382
507
|
|
|
508
|
+
/**
|
|
509
|
+
* Options for the useFormHelper hook.
|
|
510
|
+
*
|
|
511
|
+
* @template T - The form data type
|
|
512
|
+
*/
|
|
383
513
|
interface UseFormHelperOptions<T extends FieldValues> {
|
|
384
514
|
onError?: (error: FormValidationError) => void;
|
|
385
515
|
onSubmit: SubmitHandler<T>;
|
|
@@ -387,6 +517,86 @@ interface UseFormHelperOptions<T extends FieldValues> {
|
|
|
387
517
|
defaultValues?: Partial<T>;
|
|
388
518
|
methods?: UseFormReturn<T>;
|
|
389
519
|
}
|
|
520
|
+
/**
|
|
521
|
+
* Hook for managing form state with enhanced features.
|
|
522
|
+
*
|
|
523
|
+
* @description
|
|
524
|
+
* Provides form state management with loading states, error handling,
|
|
525
|
+
* and submission tracking. Automatically handles form validation and
|
|
526
|
+
* provides callbacks for success and error cases. This hook wraps
|
|
527
|
+
* React Hook Form's useForm with additional state management.
|
|
528
|
+
*
|
|
529
|
+
* @template T - The form data type
|
|
530
|
+
*
|
|
531
|
+
* @param {UseFormHelperOptions<T>} options - Hook options
|
|
532
|
+
* @param {Partial<T>} [options.defaultValues] - Default form values
|
|
533
|
+
* @param {UseFormReturn<T>} [options.methods] - Optional existing form instance
|
|
534
|
+
* @param {SubmitHandler<T>} options.onSubmit - Submit handler function
|
|
535
|
+
* @param {(error: FormValidationError) => void} [options.onError] - Error handler callback
|
|
536
|
+
* @param {(data: T) => void} [options.onSuccess] - Success handler callback
|
|
537
|
+
*
|
|
538
|
+
* @returns {Object} Form helper with state and methods
|
|
539
|
+
* @returns {UseFormReturn<T>} form - React Hook Form instance
|
|
540
|
+
* @returns {() => Promise<void>} handleSubmit - Submit handler function
|
|
541
|
+
* @returns {() => void} resetForm - Reset form function
|
|
542
|
+
* @returns {boolean} isSubmitting - Whether form is currently submitting
|
|
543
|
+
* @returns {boolean} isSubmitted - Whether form has been submitted
|
|
544
|
+
* @returns {boolean} isSuccess - Whether last submission was successful
|
|
545
|
+
* @returns {string|undefined} error - Error message if submission failed
|
|
546
|
+
* @returns {FormSubmissionState} submissionState - Complete submission state object
|
|
547
|
+
*
|
|
548
|
+
* @example
|
|
549
|
+
* ```tsx
|
|
550
|
+
* import { useFormHelper } from "@rachelallyson/hero-hook-form";
|
|
551
|
+
*
|
|
552
|
+
* function MyForm() {
|
|
553
|
+
* const { form, handleSubmit, isSubmitting, error } = useFormHelper({
|
|
554
|
+
* defaultValues: { email: "", name: "" },
|
|
555
|
+
* onSubmit: async (data) => {
|
|
556
|
+
* await submitToServer(data);
|
|
557
|
+
* },
|
|
558
|
+
* onError: (error) => {
|
|
559
|
+
* console.error("Validation errors:", error);
|
|
560
|
+
* },
|
|
561
|
+
* onSuccess: (data) => {
|
|
562
|
+
* console.log("Success:", data);
|
|
563
|
+
* },
|
|
564
|
+
* });
|
|
565
|
+
*
|
|
566
|
+
* return (
|
|
567
|
+
* <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
|
|
568
|
+
* <button disabled={isSubmitting}>
|
|
569
|
+
* {isSubmitting ? "Submitting..." : "Submit"}
|
|
570
|
+
* </button>
|
|
571
|
+
* {error && <div className="error">{error}</div>}
|
|
572
|
+
* </form>
|
|
573
|
+
* );
|
|
574
|
+
* }
|
|
575
|
+
* ```
|
|
576
|
+
*
|
|
577
|
+
* @example
|
|
578
|
+
* Using with existing form instance:
|
|
579
|
+
* ```tsx
|
|
580
|
+
* import { useForm } from "react-hook-form";
|
|
581
|
+
* import { useFormHelper } from "@rachelallyson/hero-hook-form";
|
|
582
|
+
*
|
|
583
|
+
* function MyForm() {
|
|
584
|
+
* const existingForm = useForm({ defaultValues: { email: "" } });
|
|
585
|
+
* const { handleSubmit, isSubmitting } = useFormHelper({
|
|
586
|
+
* methods: existingForm,
|
|
587
|
+
* onSubmit: async (data) => {
|
|
588
|
+
* await submitToServer(data);
|
|
589
|
+
* },
|
|
590
|
+
* });
|
|
591
|
+
*
|
|
592
|
+
* // Use existingForm and handleSubmit together
|
|
593
|
+
* }
|
|
594
|
+
* ```
|
|
595
|
+
*
|
|
596
|
+
* @see {@link useHeroForm} for alternative hook with different API
|
|
597
|
+
* @see {@link ConfigurableForm} for component that uses this hook
|
|
598
|
+
* @category Hooks
|
|
599
|
+
*/
|
|
390
600
|
declare function useFormHelper<T extends FieldValues>({ defaultValues, methods, onError, onSubmit, onSuccess, }: UseFormHelperOptions<T>): {
|
|
391
601
|
error: string | undefined;
|
|
392
602
|
form: UseFormReturn<T>;
|
|
@@ -399,11 +609,19 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
|
|
|
399
609
|
};
|
|
400
610
|
|
|
401
611
|
/**
|
|
402
|
-
* Enhanced hook that provides both form methods and styling defaults
|
|
612
|
+
* Enhanced hook that provides both form methods and styling defaults.
|
|
403
613
|
*
|
|
614
|
+
* @description
|
|
404
615
|
* This hook combines React Hook Form's useFormContext with Hero Hook Form's
|
|
405
616
|
* styling defaults, giving you access to both form functionality and
|
|
406
|
-
* component styling in one convenient hook.
|
|
617
|
+
* component styling in one convenient hook. Must be used within a FormProvider
|
|
618
|
+
* context (provided by ZodForm, ConfigurableForm, or manual FormProvider).
|
|
619
|
+
*
|
|
620
|
+
* @template TFieldValues - The form data type
|
|
621
|
+
*
|
|
622
|
+
* @returns {Object} Enhanced form object with all React Hook Form methods and Hero Hook Form defaults
|
|
623
|
+
* @returns {UseFormReturn<TFieldValues>} All React Hook Form methods (formState, getValues, setValue, etc.)
|
|
624
|
+
* @returns {HeroHookFormDefaultsConfig} defaults - Hero Hook Form styling defaults
|
|
407
625
|
*
|
|
408
626
|
* @example
|
|
409
627
|
* ```tsx
|
|
@@ -425,6 +643,10 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
|
|
|
425
643
|
* const buttonDefaults = defaults.submitButton;
|
|
426
644
|
* }
|
|
427
645
|
* ```
|
|
646
|
+
*
|
|
647
|
+
* @see {@link useFormHelper} for form state management with callbacks
|
|
648
|
+
* @see {@link useFormContext} from React Hook Form for base functionality
|
|
649
|
+
* @category Hooks
|
|
428
650
|
*/
|
|
429
651
|
declare function useHeroForm<TFieldValues extends FieldValues>(): {
|
|
430
652
|
defaults: Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "select" | "switch" | "radioGroup" | "checkbox" | "slider" | "dateInput" | "submitButton">>;
|
|
@@ -499,6 +721,11 @@ interface FormProps<TFieldValues extends FieldValues> {
|
|
|
499
721
|
}
|
|
500
722
|
declare function FormProvider<TFieldValues extends FieldValues>(props: FormProps<TFieldValues>): React$1.JSX.Element;
|
|
501
723
|
|
|
724
|
+
/**
|
|
725
|
+
* Enhanced form state with submission tracking and error management.
|
|
726
|
+
*
|
|
727
|
+
* @template T - The form data type
|
|
728
|
+
*/
|
|
502
729
|
interface EnhancedFormState<T extends FieldValues> {
|
|
503
730
|
status: "idle" | "submitting" | "success" | "error";
|
|
504
731
|
isSubmitting: boolean;
|
|
@@ -514,6 +741,11 @@ interface EnhancedFormState<T extends FieldValues> {
|
|
|
514
741
|
handleError: (error: string) => void;
|
|
515
742
|
reset: () => void;
|
|
516
743
|
}
|
|
744
|
+
/**
|
|
745
|
+
* Options for the useEnhancedFormState hook.
|
|
746
|
+
*
|
|
747
|
+
* @template T - The form data type
|
|
748
|
+
*/
|
|
517
749
|
interface UseEnhancedFormStateOptions<T extends FieldValues> {
|
|
518
750
|
onSuccess?: (data: T) => void;
|
|
519
751
|
onError?: (error: string) => void;
|
|
@@ -522,6 +754,81 @@ interface UseEnhancedFormStateOptions<T extends FieldValues> {
|
|
|
522
754
|
autoReset?: boolean;
|
|
523
755
|
resetDelay?: number;
|
|
524
756
|
}
|
|
757
|
+
/**
|
|
758
|
+
* Hook for managing enhanced form state with submission tracking.
|
|
759
|
+
*
|
|
760
|
+
* @description
|
|
761
|
+
* Provides advanced form state management including submission status,
|
|
762
|
+
* error tracking, touched/dirty field tracking, and automatic reset
|
|
763
|
+
* functionality. Useful for building forms with rich UI feedback.
|
|
764
|
+
*
|
|
765
|
+
* @template T - The form data type
|
|
766
|
+
*
|
|
767
|
+
* @param {UseFormReturn<T>} form - React Hook Form instance
|
|
768
|
+
* @param {UseEnhancedFormStateOptions<T>} [options] - Configuration options
|
|
769
|
+
* @param {(data: T) => void} [options.onSuccess] - Success callback
|
|
770
|
+
* @param {(error: string) => void} [options.onError] - Error callback
|
|
771
|
+
* @param {string} [options.successMessage] - Custom success message
|
|
772
|
+
* @param {string} [options.errorMessage] - Custom error message
|
|
773
|
+
* @param {boolean} [options.autoReset=true] - Automatically reset after success
|
|
774
|
+
* @param {number} [options.resetDelay=3000] - Delay before auto-reset (ms)
|
|
775
|
+
*
|
|
776
|
+
* @returns {EnhancedFormState<T>} Enhanced form state object
|
|
777
|
+
* @returns {"idle"|"submitting"|"success"|"error"} status - Current submission status
|
|
778
|
+
* @returns {boolean} isSubmitting - Whether form is currently submitting
|
|
779
|
+
* @returns {boolean} isSuccess - Whether last submission was successful
|
|
780
|
+
* @returns {boolean} isError - Whether last submission had an error
|
|
781
|
+
* @returns {string|undefined} error - Error message if submission failed
|
|
782
|
+
* @returns {T|undefined} submittedData - Data from last successful submission
|
|
783
|
+
* @returns {Set<Path<T>>} touchedFields - Set of touched field paths
|
|
784
|
+
* @returns {Set<Path<T>>} dirtyFields - Set of dirty field paths
|
|
785
|
+
* @returns {boolean} hasErrors - Whether form has validation errors
|
|
786
|
+
* @returns {number} errorCount - Number of validation errors
|
|
787
|
+
* @returns {(data: T) => void} handleSuccess - Function to mark submission as successful
|
|
788
|
+
* @returns {(error: string) => void} handleError - Function to mark submission as failed
|
|
789
|
+
* @returns {() => void} reset - Function to reset state to idle
|
|
790
|
+
*
|
|
791
|
+
* @example
|
|
792
|
+
* ```tsx
|
|
793
|
+
* import { useEnhancedFormState } from "@rachelallyson/hero-hook-form";
|
|
794
|
+
* import { useForm } from "react-hook-form";
|
|
795
|
+
*
|
|
796
|
+
* function MyForm() {
|
|
797
|
+
* const form = useForm();
|
|
798
|
+
* const state = useEnhancedFormState(form, {
|
|
799
|
+
* onSuccess: (data) => {
|
|
800
|
+
* console.log("Success:", data);
|
|
801
|
+
* },
|
|
802
|
+
* onError: (error) => {
|
|
803
|
+
* console.error("Error:", error);
|
|
804
|
+
* },
|
|
805
|
+
* autoReset: true,
|
|
806
|
+
* resetDelay: 3000,
|
|
807
|
+
* });
|
|
808
|
+
*
|
|
809
|
+
* const handleSubmit = async (data) => {
|
|
810
|
+
* try {
|
|
811
|
+
* await submitToServer(data);
|
|
812
|
+
* state.handleSuccess(data);
|
|
813
|
+
* } catch (error) {
|
|
814
|
+
* state.handleError(error.message);
|
|
815
|
+
* }
|
|
816
|
+
* };
|
|
817
|
+
*
|
|
818
|
+
* return (
|
|
819
|
+
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
820
|
+
* {/* form fields *\/}
|
|
821
|
+
* {state.isSubmitting && <div>Submitting...</div>}
|
|
822
|
+
* {state.isSuccess && <div>Success!</div>}
|
|
823
|
+
* {state.error && <div>Error: {state.error}</div>}
|
|
824
|
+
* </form>
|
|
825
|
+
* );
|
|
826
|
+
* }
|
|
827
|
+
* ```
|
|
828
|
+
*
|
|
829
|
+
* @see {@link ZodForm} which uses this hook internally
|
|
830
|
+
* @category Hooks
|
|
831
|
+
*/
|
|
525
832
|
declare function useEnhancedFormState<T extends FieldValues>(form: UseFormReturn<T>, options?: UseEnhancedFormStateOptions<T>): EnhancedFormState<T>;
|
|
526
833
|
|
|
527
834
|
interface SubmitButtonProps {
|
|
@@ -535,15 +842,99 @@ interface SubmitButtonProps {
|
|
|
535
842
|
}
|
|
536
843
|
declare function SubmitButton(props: SubmitButtonProps): React$1.JSX.Element;
|
|
537
844
|
|
|
845
|
+
/**
|
|
846
|
+
* Server field error structure.
|
|
847
|
+
*
|
|
848
|
+
* @template TFieldValues - The form data type
|
|
849
|
+
*/
|
|
538
850
|
interface ServerFieldError<TFieldValues extends FieldValues> {
|
|
539
851
|
path: Path<TFieldValues>;
|
|
540
852
|
message: string;
|
|
541
853
|
type?: string;
|
|
542
854
|
}
|
|
855
|
+
/**
|
|
856
|
+
* Server form error structure containing field errors.
|
|
857
|
+
*
|
|
858
|
+
* @template TFieldValues - The form data type
|
|
859
|
+
*/
|
|
543
860
|
interface ServerFormError<TFieldValues extends FieldValues> {
|
|
544
861
|
message?: string;
|
|
545
862
|
fieldErrors?: readonly ServerFieldError<TFieldValues>[];
|
|
546
863
|
}
|
|
864
|
+
/**
|
|
865
|
+
* Applies server-side validation errors to a React Hook Form instance.
|
|
866
|
+
*
|
|
867
|
+
* @description
|
|
868
|
+
* Maps server-returned field errors to React Hook Form's error state.
|
|
869
|
+
* Useful for displaying validation errors from API responses. This function
|
|
870
|
+
* iterates through the field errors and sets them on the form using
|
|
871
|
+
* React Hook Form's setError function.
|
|
872
|
+
*
|
|
873
|
+
* @template TFieldValues - The form data type
|
|
874
|
+
*
|
|
875
|
+
* @param {UseFormSetError<TFieldValues>} setError - React Hook Form's setError function
|
|
876
|
+
* @param {ServerFormError<TFieldValues>} serverError - Server error containing field errors
|
|
877
|
+
*
|
|
878
|
+
* @example
|
|
879
|
+
* ```tsx
|
|
880
|
+
* import { applyServerErrors } from "@rachelallyson/hero-hook-form";
|
|
881
|
+
* import { useForm } from "react-hook-form";
|
|
882
|
+
*
|
|
883
|
+
* function MyForm() {
|
|
884
|
+
* const form = useForm();
|
|
885
|
+
*
|
|
886
|
+
* const handleSubmit = async (data) => {
|
|
887
|
+
* try {
|
|
888
|
+
* const response = await fetch("/api/submit", {
|
|
889
|
+
* method: "POST",
|
|
890
|
+
* body: JSON.stringify(data),
|
|
891
|
+
* });
|
|
892
|
+
*
|
|
893
|
+
* if (!response.ok) {
|
|
894
|
+
* const errorData = await response.json();
|
|
895
|
+
* applyServerErrors(form.setError, errorData);
|
|
896
|
+
* }
|
|
897
|
+
* } catch (error) {
|
|
898
|
+
* console.error("Error:", error);
|
|
899
|
+
* }
|
|
900
|
+
* };
|
|
901
|
+
*
|
|
902
|
+
* return (
|
|
903
|
+
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
904
|
+
* {/* form fields go here *\/}
|
|
905
|
+
* </form>
|
|
906
|
+
* );
|
|
907
|
+
* }
|
|
908
|
+
* ```
|
|
909
|
+
*
|
|
910
|
+
* @example
|
|
911
|
+
* With ZodForm error handling:
|
|
912
|
+
* ```tsx
|
|
913
|
+
* import { ZodForm, applyServerErrors } from "@rachelallyson/hero-hook-form";
|
|
914
|
+
*
|
|
915
|
+
* function MyForm() {
|
|
916
|
+
* const form = useForm();
|
|
917
|
+
*
|
|
918
|
+
* const handleSubmit = async (data) => {
|
|
919
|
+
* try {
|
|
920
|
+
* await submitToServer(data);
|
|
921
|
+
* } catch (error) {
|
|
922
|
+
* if (error.fieldErrors) {
|
|
923
|
+
* applyServerErrors(form.setError, {
|
|
924
|
+
* fieldErrors: error.fieldErrors,
|
|
925
|
+
* });
|
|
926
|
+
* }
|
|
927
|
+
* }
|
|
928
|
+
* };
|
|
929
|
+
*
|
|
930
|
+
* return <ZodForm config={{ schema, fields }} onSubmit={handleSubmit} />;
|
|
931
|
+
* }
|
|
932
|
+
* ```
|
|
933
|
+
*
|
|
934
|
+
* @see {@link ServerFormError} for error structure
|
|
935
|
+
* @see {@link ServerFieldError} for field error structure
|
|
936
|
+
* @category Utilities
|
|
937
|
+
*/
|
|
547
938
|
declare function applyServerErrors<TFieldValues extends FieldValues>(setError: UseFormSetError<TFieldValues>, serverError: ServerFormError<TFieldValues>): void;
|
|
548
939
|
|
|
549
940
|
/**
|
|
@@ -692,6 +1083,11 @@ declare const commonValidations: {
|
|
|
692
1083
|
url: z.ZodString;
|
|
693
1084
|
};
|
|
694
1085
|
|
|
1086
|
+
/**
|
|
1087
|
+
* Props for the ZodForm component.
|
|
1088
|
+
*
|
|
1089
|
+
* @template T - The form data type inferred from the Zod schema
|
|
1090
|
+
*/
|
|
695
1091
|
interface ZodFormProps<T extends FieldValues> {
|
|
696
1092
|
className?: string;
|
|
697
1093
|
columns?: 1 | 2 | 3;
|
|
@@ -716,6 +1112,101 @@ interface ZodFormProps<T extends FieldValues> {
|
|
|
716
1112
|
values: T;
|
|
717
1113
|
}) => React$1.ReactNode;
|
|
718
1114
|
}
|
|
1115
|
+
/**
|
|
1116
|
+
* ZodForm component for building type-safe forms with Zod validation.
|
|
1117
|
+
*
|
|
1118
|
+
* @description
|
|
1119
|
+
* This component provides a complete form solution with automatic validation,
|
|
1120
|
+
* error handling, and type safety. It integrates React Hook Form with Zod
|
|
1121
|
+
* schemas and HeroUI components. The form automatically validates inputs based
|
|
1122
|
+
* on the provided Zod schema and displays error messages inline.
|
|
1123
|
+
*
|
|
1124
|
+
* @template T - The form data type inferred from the Zod schema
|
|
1125
|
+
*
|
|
1126
|
+
* @param {ZodFormProps<T>} props - Component props
|
|
1127
|
+
* @param {ZodFormConfig<T>} props.config - Form configuration with schema and fields
|
|
1128
|
+
* @param {SubmitHandler<T>} props.onSubmit - Submit handler function called with validated data
|
|
1129
|
+
* @param {string} [props.title] - Optional form title displayed above the form
|
|
1130
|
+
* @param {string} [props.subtitle] - Optional form subtitle displayed below the title
|
|
1131
|
+
* @param {"vertical"|"horizontal"|"grid"} [props.layout="vertical"] - Form layout style
|
|
1132
|
+
* @param {1|2|3} [props.columns=1] - Number of columns for grid layout (only applies when layout="grid")
|
|
1133
|
+
* @param {"2"|"4"|"6"|"8"|"lg"} [props.spacing="4"] - Spacing between form fields
|
|
1134
|
+
* @param {string} [props.submitButtonText="Submit"] - Text for the submit button
|
|
1135
|
+
* @param {boolean} [props.showResetButton=false] - Whether to show a reset button
|
|
1136
|
+
* @param {string} [props.resetButtonText="Reset"] - Text for the reset button
|
|
1137
|
+
* @param {(error: FormValidationError) => void} [props.onError] - Error callback for validation errors
|
|
1138
|
+
* @param {(data: T) => void} [props.onSuccess] - Success callback called after successful submission
|
|
1139
|
+
* @param {(formState: {...}) => React.ReactNode} [props.render] - Custom render function for advanced use cases
|
|
1140
|
+
*
|
|
1141
|
+
* @returns {JSX.Element} The rendered form component with validation and error handling
|
|
1142
|
+
*
|
|
1143
|
+
* @example
|
|
1144
|
+
* ```tsx
|
|
1145
|
+
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
1146
|
+
* import { z } from "zod";
|
|
1147
|
+
*
|
|
1148
|
+
* const schema = z.object({
|
|
1149
|
+
* email: z.string().email("Please enter a valid email"),
|
|
1150
|
+
* name: z.string().min(2, "Name must be at least 2 characters"),
|
|
1151
|
+
* message: z.string().min(10, "Message must be at least 10 characters"),
|
|
1152
|
+
* });
|
|
1153
|
+
*
|
|
1154
|
+
* function ContactForm() {
|
|
1155
|
+
* const handleSubmit = async (data) => {
|
|
1156
|
+
* console.log("Form submitted:", data);
|
|
1157
|
+
* // Handle form submission (e.g., API call)
|
|
1158
|
+
* };
|
|
1159
|
+
*
|
|
1160
|
+
* return (
|
|
1161
|
+
* <ZodForm
|
|
1162
|
+
* config={{
|
|
1163
|
+
* schema,
|
|
1164
|
+
* fields: [
|
|
1165
|
+
* FormFieldHelpers.input("name", "Name"),
|
|
1166
|
+
* FormFieldHelpers.input("email", "Email", "email"),
|
|
1167
|
+
* FormFieldHelpers.textarea("message", "Message"),
|
|
1168
|
+
* ],
|
|
1169
|
+
* }}
|
|
1170
|
+
* onSubmit={handleSubmit}
|
|
1171
|
+
* title="Contact Us"
|
|
1172
|
+
* subtitle="Send us a message and we'll get back to you"
|
|
1173
|
+
* />
|
|
1174
|
+
* );
|
|
1175
|
+
* }
|
|
1176
|
+
* ```
|
|
1177
|
+
*
|
|
1178
|
+
* @example
|
|
1179
|
+
* Grid layout with multiple columns:
|
|
1180
|
+
* ```tsx
|
|
1181
|
+
* <ZodForm
|
|
1182
|
+
* config={{ schema, fields }}
|
|
1183
|
+
* layout="grid"
|
|
1184
|
+
* columns={2}
|
|
1185
|
+
* spacing="6"
|
|
1186
|
+
* />
|
|
1187
|
+
* ```
|
|
1188
|
+
*
|
|
1189
|
+
* @example
|
|
1190
|
+
* Custom render function for advanced control:
|
|
1191
|
+
* ```tsx
|
|
1192
|
+
* <ZodForm
|
|
1193
|
+
* config={{ schema, fields }}
|
|
1194
|
+
* onSubmit={handleSubmit}
|
|
1195
|
+
* render={({ form, isSubmitting, errors, values }) => (
|
|
1196
|
+
* <div>
|
|
1197
|
+
* <button disabled={isSubmitting}>
|
|
1198
|
+
* {isSubmitting ? "Submitting..." : "Submit"}
|
|
1199
|
+
* </button>
|
|
1200
|
+
* </div>
|
|
1201
|
+
* )}
|
|
1202
|
+
* />
|
|
1203
|
+
* ```
|
|
1204
|
+
*
|
|
1205
|
+
* @see {@link Form} for the base form component without Zod
|
|
1206
|
+
* @see {@link FormFieldHelpers} for field creation helpers
|
|
1207
|
+
* @see {@link createBasicFormBuilder} for builder pattern alternative
|
|
1208
|
+
* @category Components
|
|
1209
|
+
*/
|
|
719
1210
|
declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
|
|
720
1211
|
|
|
721
1212
|
/**
|
|
@@ -728,8 +1219,34 @@ declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormCon
|
|
|
728
1219
|
declare function createZodFormConfig<TFieldValues extends FieldValues>(schema: z.ZodSchema<TFieldValues>, fields: ZodFormFieldConfig<TFieldValues>[], defaultValues?: Partial<TFieldValues>): ZodFormConfig<TFieldValues>;
|
|
729
1220
|
|
|
730
1221
|
/**
|
|
731
|
-
* Basic form field builder
|
|
732
|
-
*
|
|
1222
|
+
* Basic form field builder for creating form field configurations.
|
|
1223
|
+
*
|
|
1224
|
+
* @description
|
|
1225
|
+
* Provides a fluent API for building form field configurations. This builder
|
|
1226
|
+
* focuses on the most common use cases and eliminates the need for "as const"
|
|
1227
|
+
* assertions. Use this for simple forms with standard field types.
|
|
1228
|
+
*
|
|
1229
|
+
* @template T - The form data type
|
|
1230
|
+
*
|
|
1231
|
+
* @example
|
|
1232
|
+
* ```tsx
|
|
1233
|
+
* import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
|
|
1234
|
+
*
|
|
1235
|
+
* const fields = createBasicFormBuilder()
|
|
1236
|
+
* .input("name", "Name")
|
|
1237
|
+
* .input("email", "Email", "email")
|
|
1238
|
+
* .textarea("message", "Message")
|
|
1239
|
+
* .select("country", "Country", [
|
|
1240
|
+
* { label: "US", value: "us" },
|
|
1241
|
+
* { label: "CA", value: "ca" },
|
|
1242
|
+
* ])
|
|
1243
|
+
* .checkbox("newsletter", "Subscribe to newsletter")
|
|
1244
|
+
* .build();
|
|
1245
|
+
* ```
|
|
1246
|
+
*
|
|
1247
|
+
* @see {@link createAdvancedBuilder} for more advanced features
|
|
1248
|
+
* @see {@link FormFieldHelpers} for helper function alternative
|
|
1249
|
+
* @category Builders
|
|
733
1250
|
*/
|
|
734
1251
|
declare class BasicFormBuilder<T extends FieldValues> {
|
|
735
1252
|
private fields;
|
|
@@ -752,6 +1269,18 @@ declare class BasicFormBuilder<T extends FieldValues> {
|
|
|
752
1269
|
* Add a checkbox field
|
|
753
1270
|
*/
|
|
754
1271
|
checkbox(name: Path<T>, label: string): this;
|
|
1272
|
+
/**
|
|
1273
|
+
* Add a content field for headers, questions, or custom content between fields
|
|
1274
|
+
*/
|
|
1275
|
+
content(title?: string | null, description?: string | null, options?: {
|
|
1276
|
+
render?: (field: {
|
|
1277
|
+
form: any;
|
|
1278
|
+
errors: any;
|
|
1279
|
+
isSubmitting: boolean;
|
|
1280
|
+
}) => React$1.ReactNode;
|
|
1281
|
+
className?: string;
|
|
1282
|
+
name?: Path<T>;
|
|
1283
|
+
}): this;
|
|
755
1284
|
/**
|
|
756
1285
|
* Add a switch field
|
|
757
1286
|
*/
|
|
@@ -762,17 +1291,97 @@ declare class BasicFormBuilder<T extends FieldValues> {
|
|
|
762
1291
|
build(): ZodFormFieldConfig<T>[];
|
|
763
1292
|
}
|
|
764
1293
|
/**
|
|
765
|
-
*
|
|
1294
|
+
* Creates a basic form builder for simple form construction.
|
|
1295
|
+
*
|
|
1296
|
+
* @description
|
|
1297
|
+
* Provides a fluent API for building form field configurations. Best for
|
|
1298
|
+
* simple forms with standard field types. Returns a builder instance with
|
|
1299
|
+
* chainable methods for adding fields.
|
|
1300
|
+
*
|
|
1301
|
+
* @template T - The form data type
|
|
1302
|
+
*
|
|
1303
|
+
* @returns {BasicFormBuilder<T>} Builder instance with chainable methods
|
|
1304
|
+
*
|
|
1305
|
+
* @example
|
|
1306
|
+
* ```tsx
|
|
1307
|
+
* import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
|
|
1308
|
+
*
|
|
1309
|
+
* const fields = createBasicFormBuilder()
|
|
1310
|
+
* .input("name", "Name")
|
|
1311
|
+
* .input("email", "Email", "email")
|
|
1312
|
+
* .textarea("message", "Message")
|
|
1313
|
+
* .select("country", "Country", [
|
|
1314
|
+
* { label: "US", value: "us" },
|
|
1315
|
+
* { label: "CA", value: "ca" },
|
|
1316
|
+
* ])
|
|
1317
|
+
* .checkbox("newsletter", "Subscribe to newsletter")
|
|
1318
|
+
* .build();
|
|
1319
|
+
*
|
|
1320
|
+
* // Use with ZodForm
|
|
1321
|
+
* <ZodForm config={{ schema, fields }} onSubmit={handleSubmit} />
|
|
1322
|
+
* ```
|
|
1323
|
+
*
|
|
1324
|
+
* @see {@link createAdvancedBuilder} for more advanced features
|
|
1325
|
+
* @see {@link FormFieldHelpers} for helper function alternative
|
|
1326
|
+
* @see {@link defineInferredForm} for type-inferred forms
|
|
1327
|
+
* @category Builders
|
|
766
1328
|
*/
|
|
767
1329
|
declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuilder<T>;
|
|
768
1330
|
/**
|
|
769
|
-
*
|
|
1331
|
+
* Helper functions for creating form field configurations.
|
|
1332
|
+
*
|
|
1333
|
+
* @description
|
|
1334
|
+
* Simple helper functions for common field types. This is the recommended
|
|
1335
|
+
* approach for most use cases as it's straightforward and doesn't require
|
|
1336
|
+
* method chaining. Each helper returns a field configuration object.
|
|
1337
|
+
*
|
|
1338
|
+
* @example
|
|
1339
|
+
* ```tsx
|
|
1340
|
+
* import { FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
1341
|
+
*
|
|
1342
|
+
* const fields = [
|
|
1343
|
+
* FormFieldHelpers.input("name", "Name"),
|
|
1344
|
+
* FormFieldHelpers.input("email", "Email", "email"),
|
|
1345
|
+
* FormFieldHelpers.textarea("message", "Message"),
|
|
1346
|
+
* FormFieldHelpers.select("country", "Country", [
|
|
1347
|
+
* { label: "US", value: "us" },
|
|
1348
|
+
* { label: "CA", value: "ca" },
|
|
1349
|
+
* ]),
|
|
1350
|
+
* FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
|
|
1351
|
+
* ];
|
|
1352
|
+
* ```
|
|
1353
|
+
*
|
|
1354
|
+
* @see {@link createBasicFormBuilder} for builder pattern alternative
|
|
1355
|
+
* @category Builders
|
|
770
1356
|
*/
|
|
771
1357
|
declare const FormFieldHelpers: {
|
|
772
1358
|
/**
|
|
773
1359
|
* Create a checkbox field
|
|
774
1360
|
*/
|
|
775
1361
|
checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
|
|
1362
|
+
/**
|
|
1363
|
+
* Create a content field for headers, questions, or custom content between fields
|
|
1364
|
+
*
|
|
1365
|
+
* @example
|
|
1366
|
+
* ```tsx
|
|
1367
|
+
* // Simple header
|
|
1368
|
+
* FormFieldHelpers.content("Personal Information", "Please provide your details")
|
|
1369
|
+
*
|
|
1370
|
+
* // Custom render
|
|
1371
|
+
* FormFieldHelpers.content(null, null, {
|
|
1372
|
+
* render: () => <div>Custom content</div>
|
|
1373
|
+
* })
|
|
1374
|
+
* ```
|
|
1375
|
+
*/
|
|
1376
|
+
content: <T extends FieldValues>(title?: string | null, description?: string | null, options?: {
|
|
1377
|
+
render?: (field: {
|
|
1378
|
+
form: any;
|
|
1379
|
+
errors: any;
|
|
1380
|
+
isSubmitting: boolean;
|
|
1381
|
+
}) => React$1.ReactNode;
|
|
1382
|
+
className?: string;
|
|
1383
|
+
name?: Path<T>;
|
|
1384
|
+
}) => ZodFormFieldConfig<T>;
|
|
776
1385
|
/**
|
|
777
1386
|
* Create a date field
|
|
778
1387
|
*/
|
|
@@ -1181,15 +1790,115 @@ declare class FieldTemplateBuilder<T extends FieldValues> {
|
|
|
1181
1790
|
*/
|
|
1182
1791
|
declare function createNestedPathBuilder<T extends FieldValues>(): NestedPathBuilder<T>;
|
|
1183
1792
|
|
|
1793
|
+
/**
|
|
1794
|
+
* Options for the useDebouncedValidation hook.
|
|
1795
|
+
*/
|
|
1184
1796
|
interface UseDebouncedValidationOptions {
|
|
1185
1797
|
delay?: number;
|
|
1186
1798
|
fields?: string[];
|
|
1187
1799
|
enabled?: boolean;
|
|
1188
1800
|
}
|
|
1801
|
+
/**
|
|
1802
|
+
* Hook for debouncing form validation to improve performance.
|
|
1803
|
+
*
|
|
1804
|
+
* @description
|
|
1805
|
+
* Delays validation until the user stops typing, reducing unnecessary
|
|
1806
|
+
* validation calls and improving form performance. Useful for forms with
|
|
1807
|
+
* expensive validation logic or many fields.
|
|
1808
|
+
*
|
|
1809
|
+
* @template T - The form data type
|
|
1810
|
+
*
|
|
1811
|
+
* @param {UseFormReturn<T>} form - React Hook Form instance
|
|
1812
|
+
* @param {UseDebouncedValidationOptions} [options] - Configuration options
|
|
1813
|
+
* @param {number} [options.delay=300] - Delay in milliseconds before validation
|
|
1814
|
+
* @param {string[]} [options.fields] - Specific fields to watch (if not provided, watches all)
|
|
1815
|
+
* @param {boolean} [options.enabled=true] - Whether debouncing is enabled
|
|
1816
|
+
*
|
|
1817
|
+
* @returns {Object} Debounced validation utilities
|
|
1818
|
+
* @returns {() => void} debouncedTrigger - Function to trigger debounced validation
|
|
1819
|
+
* @returns {boolean} isDebouncing - Whether validation is currently debouncing
|
|
1820
|
+
*
|
|
1821
|
+
* @example
|
|
1822
|
+
* ```tsx
|
|
1823
|
+
* import { useDebouncedValidation } from "@rachelallyson/hero-hook-form";
|
|
1824
|
+
* import { useForm } from "react-hook-form";
|
|
1825
|
+
*
|
|
1826
|
+
* function MyForm() {
|
|
1827
|
+
* const form = useForm();
|
|
1828
|
+
* const { debouncedTrigger, isDebouncing } = useDebouncedValidation(form, {
|
|
1829
|
+
* delay: 500,
|
|
1830
|
+
* fields: ["email", "username"], // Only watch these fields
|
|
1831
|
+
* });
|
|
1832
|
+
*
|
|
1833
|
+
* return (
|
|
1834
|
+
* <form>
|
|
1835
|
+
* <input
|
|
1836
|
+
* {...form.register("email")}
|
|
1837
|
+
* onChange={(e) => {
|
|
1838
|
+
* form.setValue("email", e.target.value);
|
|
1839
|
+
* debouncedTrigger();
|
|
1840
|
+
* }}
|
|
1841
|
+
* />
|
|
1842
|
+
* {isDebouncing && <span>Validating...</span>}
|
|
1843
|
+
* </form>
|
|
1844
|
+
* );
|
|
1845
|
+
* }
|
|
1846
|
+
* ```
|
|
1847
|
+
*
|
|
1848
|
+
* @see {@link useDebouncedFieldValidation} for single field debouncing
|
|
1849
|
+
* @category Hooks
|
|
1850
|
+
*/
|
|
1189
1851
|
declare function useDebouncedValidation<T extends Record<string, any>>(form: UseFormReturn<T>, options?: UseDebouncedValidationOptions): {
|
|
1190
1852
|
debouncedTrigger: () => void;
|
|
1191
1853
|
isDebouncing: boolean;
|
|
1192
1854
|
};
|
|
1855
|
+
/**
|
|
1856
|
+
* Hook for debouncing validation of a single field.
|
|
1857
|
+
*
|
|
1858
|
+
* @description
|
|
1859
|
+
* Similar to useDebouncedValidation but optimized for a single field.
|
|
1860
|
+
* Automatically triggers validation when the specified field changes.
|
|
1861
|
+
*
|
|
1862
|
+
* @template T - The form data type
|
|
1863
|
+
*
|
|
1864
|
+
* @param {UseFormReturn<T>} form - React Hook Form instance
|
|
1865
|
+
* @param {keyof T} fieldName - Name of the field to debounce
|
|
1866
|
+
* @param {Object} [options] - Configuration options
|
|
1867
|
+
* @param {number} [options.delay=300] - Delay in milliseconds before validation
|
|
1868
|
+
* @param {boolean} [options.enabled=true] - Whether debouncing is enabled
|
|
1869
|
+
*
|
|
1870
|
+
* @returns {Object} Debounced field validation utilities
|
|
1871
|
+
* @returns {() => void} debouncedFieldTrigger - Function to trigger debounced validation for this field
|
|
1872
|
+
* @returns {boolean} isDebouncing - Whether validation is currently debouncing
|
|
1873
|
+
*
|
|
1874
|
+
* @example
|
|
1875
|
+
* ```tsx
|
|
1876
|
+
* import { useDebouncedFieldValidation } from "@rachelallyson/hero-hook-form";
|
|
1877
|
+
* import { useForm } from "react-hook-form";
|
|
1878
|
+
*
|
|
1879
|
+
* function MyForm() {
|
|
1880
|
+
* const form = useForm();
|
|
1881
|
+
* const { debouncedFieldTrigger, isDebouncing } = useDebouncedFieldValidation(
|
|
1882
|
+
* form,
|
|
1883
|
+
* "email",
|
|
1884
|
+
* { delay: 500 }
|
|
1885
|
+
* );
|
|
1886
|
+
*
|
|
1887
|
+
* return (
|
|
1888
|
+
* <input
|
|
1889
|
+
* {...form.register("email")}
|
|
1890
|
+
* onChange={(e) => {
|
|
1891
|
+
* form.setValue("email", e.target.value);
|
|
1892
|
+
* debouncedFieldTrigger();
|
|
1893
|
+
* }}
|
|
1894
|
+
* />
|
|
1895
|
+
* );
|
|
1896
|
+
* }
|
|
1897
|
+
* ```
|
|
1898
|
+
*
|
|
1899
|
+
* @see {@link useDebouncedValidation} for multiple fields
|
|
1900
|
+
* @category Hooks
|
|
1901
|
+
*/
|
|
1193
1902
|
declare function useDebouncedFieldValidation<T extends Record<string, any>>(form: UseFormReturn<T>, fieldName: keyof T, options?: {
|
|
1194
1903
|
delay?: number;
|
|
1195
1904
|
enabled?: boolean;
|
|
@@ -1198,6 +1907,11 @@ declare function useDebouncedFieldValidation<T extends Record<string, any>>(form
|
|
|
1198
1907
|
isDebouncing: boolean;
|
|
1199
1908
|
};
|
|
1200
1909
|
|
|
1910
|
+
/**
|
|
1911
|
+
* Options for the useInferredForm hook.
|
|
1912
|
+
*
|
|
1913
|
+
* @template T - The form data type
|
|
1914
|
+
*/
|
|
1201
1915
|
interface UseInferredFormOptions<T extends FieldValues> {
|
|
1202
1916
|
defaultValues?: Partial<T>;
|
|
1203
1917
|
mode?: "onChange" | "onBlur" | "onSubmit" | "onTouched" | "all";
|
|
@@ -1206,9 +1920,97 @@ interface UseInferredFormOptions<T extends FieldValues> {
|
|
|
1206
1920
|
shouldUnregister?: boolean;
|
|
1207
1921
|
delayError?: number;
|
|
1208
1922
|
}
|
|
1923
|
+
/**
|
|
1924
|
+
* Hook for creating a form instance from an inferred form configuration.
|
|
1925
|
+
*
|
|
1926
|
+
* @description
|
|
1927
|
+
* Creates a React Hook Form instance with Zod validation resolver
|
|
1928
|
+
* from a type-inferred form configuration. Automatically sets up
|
|
1929
|
+
* validation based on the provided schema and fields.
|
|
1930
|
+
*
|
|
1931
|
+
* @template T - The form data type
|
|
1932
|
+
*
|
|
1933
|
+
* @param {any} schema - Zod schema for validation
|
|
1934
|
+
* @param {ZodFormFieldConfig<T>[]} fields - Field configurations
|
|
1935
|
+
* @param {UseInferredFormOptions<T>} [options] - Form options
|
|
1936
|
+
* @param {Partial<T>} [options.defaultValues] - Default form values
|
|
1937
|
+
* @param {"onChange"|"onBlur"|"onSubmit"|"onTouched"|"all"} [options.mode="onChange"] - Validation mode
|
|
1938
|
+
* @param {"onChange"|"onBlur"|"onSubmit"} [options.reValidateMode="onChange"] - Re-validation mode
|
|
1939
|
+
* @param {boolean} [options.shouldFocusError=true] - Focus first error field
|
|
1940
|
+
* @param {boolean} [options.shouldUnregister=false] - Unregister fields on unmount
|
|
1941
|
+
* @param {number} [options.delayError=0] - Delay before showing errors
|
|
1942
|
+
*
|
|
1943
|
+
* @returns {UseFormReturn<T>} React Hook Form instance
|
|
1944
|
+
*
|
|
1945
|
+
* @example
|
|
1946
|
+
* ```tsx
|
|
1947
|
+
* import { useInferredForm, defineInferredForm, field } from "@rachelallyson/hero-hook-form";
|
|
1948
|
+
*
|
|
1949
|
+
* const formConfig = defineInferredForm({
|
|
1950
|
+
* name: field.string("Name").min(2),
|
|
1951
|
+
* email: field.email("Email"),
|
|
1952
|
+
* });
|
|
1953
|
+
*
|
|
1954
|
+
* function MyForm() {
|
|
1955
|
+
* const form = useInferredForm(
|
|
1956
|
+
* formConfig.schema,
|
|
1957
|
+
* formConfig.fields,
|
|
1958
|
+
* { mode: "onBlur" }
|
|
1959
|
+
* );
|
|
1960
|
+
*
|
|
1961
|
+
* return (
|
|
1962
|
+
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
1963
|
+
* {/* form fields *\/}
|
|
1964
|
+
* </form>
|
|
1965
|
+
* );
|
|
1966
|
+
* }
|
|
1967
|
+
* ```
|
|
1968
|
+
*
|
|
1969
|
+
* @see {@link defineInferredForm} for creating type-inferred form configurations
|
|
1970
|
+
* @see {@link useTypeInferredForm} for alternative API
|
|
1971
|
+
* @category Hooks
|
|
1972
|
+
*/
|
|
1209
1973
|
declare function useInferredForm<T extends FieldValues>(schema: any, fields: ZodFormFieldConfig<T>[], options?: UseInferredFormOptions<T>): UseFormReturn<T>;
|
|
1210
1974
|
/**
|
|
1211
|
-
* Hook that works with type-inferred
|
|
1975
|
+
* Hook that works with type-inferred form configurations.
|
|
1976
|
+
*
|
|
1977
|
+
* @description
|
|
1978
|
+
* Alternative API for useInferredForm that accepts a form configuration
|
|
1979
|
+
* object instead of separate schema and fields parameters. Useful when
|
|
1980
|
+
* working with defineInferredForm results.
|
|
1981
|
+
*
|
|
1982
|
+
* @template T - The form data type
|
|
1983
|
+
*
|
|
1984
|
+
* @param {Object} formConfig - Form configuration object
|
|
1985
|
+
* @param {any} formConfig.schema - Zod schema for validation
|
|
1986
|
+
* @param {ZodFormFieldConfig<T>[]} formConfig.fields - Field configurations
|
|
1987
|
+
* @param {UseInferredFormOptions<T>} [options] - Form options
|
|
1988
|
+
*
|
|
1989
|
+
* @returns {UseFormReturn<T>} React Hook Form instance
|
|
1990
|
+
*
|
|
1991
|
+
* @example
|
|
1992
|
+
* ```tsx
|
|
1993
|
+
* import { useTypeInferredForm, defineInferredForm, field } from "@rachelallyson/hero-hook-form";
|
|
1994
|
+
*
|
|
1995
|
+
* const formConfig = defineInferredForm({
|
|
1996
|
+
* name: field.string("Name").min(2),
|
|
1997
|
+
* email: field.email("Email"),
|
|
1998
|
+
* });
|
|
1999
|
+
*
|
|
2000
|
+
* function MyForm() {
|
|
2001
|
+
* const form = useTypeInferredForm(formConfig);
|
|
2002
|
+
*
|
|
2003
|
+
* return (
|
|
2004
|
+
* <form onSubmit={form.handleSubmit(handleSubmit)}>
|
|
2005
|
+
* {/* form fields *\/}
|
|
2006
|
+
* </form>
|
|
2007
|
+
* );
|
|
2008
|
+
* }
|
|
2009
|
+
* ```
|
|
2010
|
+
*
|
|
2011
|
+
* @see {@link useInferredForm} for direct schema/fields API
|
|
2012
|
+
* @see {@link defineInferredForm} for creating type-inferred form configurations
|
|
2013
|
+
* @category Hooks
|
|
1212
2014
|
*/
|
|
1213
2015
|
declare function useTypeInferredForm<T extends FieldValues>(formConfig: {
|
|
1214
2016
|
schema: any;
|
|
@@ -1222,6 +2024,13 @@ interface ConditionalFieldProps<TFieldValues extends FieldValues> {
|
|
|
1222
2024
|
}
|
|
1223
2025
|
declare function ConditionalField<TFieldValues extends FieldValues>({ className, config, control, }: ConditionalFieldProps<TFieldValues>): React$1.JSX.Element | null;
|
|
1224
2026
|
|
|
2027
|
+
interface ContentFieldProps<TFieldValues extends FieldValues> {
|
|
2028
|
+
config: ContentFieldConfig<TFieldValues>;
|
|
2029
|
+
form: UseFormReturn<TFieldValues>;
|
|
2030
|
+
submissionState: FormSubmissionState;
|
|
2031
|
+
}
|
|
2032
|
+
declare function ContentField<TFieldValues extends FieldValues>({ config, form, submissionState, }: ContentFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
2033
|
+
|
|
1225
2034
|
interface FieldArrayFieldProps<TFieldValues extends FieldValues> {
|
|
1226
2035
|
config: FieldArrayConfig<TFieldValues>;
|
|
1227
2036
|
className?: string;
|
|
@@ -1372,4 +2181,4 @@ declare const validationUtils: {
|
|
|
1372
2181
|
}>;
|
|
1373
2182
|
};
|
|
1374
2183
|
|
|
1375
|
-
export { AdvancedFieldBuilder, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, type FormProps, FormProvider, FormStatus, type FormStatusProps, type FormStep, type FormSubmissionState, type FormTestUtils, FormToast, type FormToastProps, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, ServerActionForm, 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, TypeInferredBuilder, type UseDebouncedValidationOptions, type UseEnhancedFormStateOptions, type UseInferredFormOptions, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, asyncValidation, commonValidations, createAdvancedBuilder, createBasicFormBuilder, createDateSchema, createEmailSchema, createField, createFieldArrayBuilder, createFieldArrayItemBuilder, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNestedPathBuilder, createNumberRangeSchema, createOptimizedFieldHandler, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createTypeInferredBuilder, createUrlSchema, createZodFormConfig, crossFieldValidation, debounce, deepEqual, defineInferredForm, errorMessages, field, getFieldError, getFormErrors, hasFieldError, hasFormErrors, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
|
|
2184
|
+
export { AdvancedFieldBuilder, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, ContentField, type ContentFieldConfig, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, type FormProps, FormProvider, FormStatus, type FormStatusProps, type FormStep, type FormSubmissionState, type FormTestUtils, FormToast, type FormToastProps, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, ServerActionForm, 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, TypeInferredBuilder, type UseDebouncedValidationOptions, type UseEnhancedFormStateOptions, type UseInferredFormOptions, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, asyncValidation, commonValidations, createAdvancedBuilder, createBasicFormBuilder, createDateSchema, createEmailSchema, createField, createFieldArrayBuilder, createFieldArrayItemBuilder, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNestedPathBuilder, createNumberRangeSchema, createOptimizedFieldHandler, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createTypeInferredBuilder, createUrlSchema, createZodFormConfig, crossFieldValidation, debounce, deepEqual, defineInferredForm, errorMessages, field, getFieldError, getFormErrors, hasFieldError, hasFormErrors, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
|