@rachelallyson/hero-hook-form 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +54 -42
- package/README.md +131 -178
- package/dist/index.d.ts +73 -4
- package/dist/index.js +170 -80
- package/dist/react/index.d.ts +73 -4
- package/dist/react/index.js +170 -80
- package/package.json +41 -32
package/dist/react/index.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
2
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
3
|
+
}) : x)(function(x) {
|
|
4
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
5
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
6
|
+
});
|
|
7
|
+
|
|
1
8
|
// src/components/Form.tsx
|
|
2
|
-
import
|
|
9
|
+
import React13 from "react";
|
|
3
10
|
import { Button as Button2 } from "@heroui/react";
|
|
4
11
|
|
|
5
12
|
// src/hooks/useFormHelper.ts
|
|
@@ -68,7 +75,7 @@ function useFormHelper({
|
|
|
68
75
|
}
|
|
69
76
|
|
|
70
77
|
// src/components/FormField.tsx
|
|
71
|
-
import
|
|
78
|
+
import React12 from "react";
|
|
72
79
|
import { useWatch } from "react-hook-form";
|
|
73
80
|
|
|
74
81
|
// src/fields/CheckboxField.tsx
|
|
@@ -349,13 +356,60 @@ function FileField(props) {
|
|
|
349
356
|
);
|
|
350
357
|
}
|
|
351
358
|
|
|
352
|
-
// src/fields/
|
|
359
|
+
// src/fields/FontPickerField.tsx
|
|
353
360
|
import React5 from "react";
|
|
354
361
|
import { Controller as Controller4 } from "react-hook-form";
|
|
362
|
+
var FontPickerComponent = null;
|
|
363
|
+
try {
|
|
364
|
+
const fontPickerModule = __require("@rachelallyson/heroui-font-picker");
|
|
365
|
+
FontPickerComponent = fontPickerModule.FontPicker;
|
|
366
|
+
} catch (e) {
|
|
367
|
+
console.debug("Font picker package not available - FontPickerField will show fallback UI");
|
|
368
|
+
}
|
|
369
|
+
function FontPickerField(props) {
|
|
370
|
+
const {
|
|
371
|
+
className,
|
|
372
|
+
control,
|
|
373
|
+
description,
|
|
374
|
+
fontPickerProps,
|
|
375
|
+
isDisabled,
|
|
376
|
+
label,
|
|
377
|
+
name,
|
|
378
|
+
rules
|
|
379
|
+
} = props;
|
|
380
|
+
if (!FontPickerComponent) {
|
|
381
|
+
return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-warning-800 text-sm" }, "Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features."))));
|
|
382
|
+
}
|
|
383
|
+
return /* @__PURE__ */ React5.createElement(
|
|
384
|
+
Controller4,
|
|
385
|
+
{
|
|
386
|
+
control,
|
|
387
|
+
name,
|
|
388
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React5.createElement(
|
|
389
|
+
FontPickerComponent,
|
|
390
|
+
{
|
|
391
|
+
label,
|
|
392
|
+
description,
|
|
393
|
+
value: field.value ?? "",
|
|
394
|
+
onSelectionChange: (value) => field.onChange(value),
|
|
395
|
+
errorMessage: fieldState.error?.message,
|
|
396
|
+
isDisabled,
|
|
397
|
+
className,
|
|
398
|
+
...fontPickerProps
|
|
399
|
+
}
|
|
400
|
+
),
|
|
401
|
+
rules
|
|
402
|
+
}
|
|
403
|
+
);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// src/fields/InputField.tsx
|
|
407
|
+
import React6 from "react";
|
|
408
|
+
import { Controller as Controller5 } from "react-hook-form";
|
|
355
409
|
function CoercedInput(props) {
|
|
356
410
|
const { description, disabled, errorMessage, field, inputProps, label } = props;
|
|
357
411
|
const defaults = useHeroHookFormDefaults();
|
|
358
|
-
return /* @__PURE__ */
|
|
412
|
+
return /* @__PURE__ */ React6.createElement(
|
|
359
413
|
Input,
|
|
360
414
|
{
|
|
361
415
|
...defaults.input,
|
|
@@ -383,12 +437,12 @@ function InputField(props) {
|
|
|
383
437
|
rules,
|
|
384
438
|
transform
|
|
385
439
|
} = props;
|
|
386
|
-
return /* @__PURE__ */
|
|
387
|
-
|
|
440
|
+
return /* @__PURE__ */ React6.createElement(
|
|
441
|
+
Controller5,
|
|
388
442
|
{
|
|
389
443
|
control,
|
|
390
444
|
name,
|
|
391
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
445
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
|
|
392
446
|
CoercedInput,
|
|
393
447
|
{
|
|
394
448
|
description,
|
|
@@ -417,8 +471,8 @@ function InputField(props) {
|
|
|
417
471
|
}
|
|
418
472
|
|
|
419
473
|
// src/fields/RadioGroupField.tsx
|
|
420
|
-
import
|
|
421
|
-
import { Controller as
|
|
474
|
+
import React7 from "react";
|
|
475
|
+
import { Controller as Controller6 } from "react-hook-form";
|
|
422
476
|
function RadioGroupField(props) {
|
|
423
477
|
const {
|
|
424
478
|
className,
|
|
@@ -432,12 +486,12 @@ function RadioGroupField(props) {
|
|
|
432
486
|
rules
|
|
433
487
|
} = props;
|
|
434
488
|
const defaults = useHeroHookFormDefaults();
|
|
435
|
-
return /* @__PURE__ */
|
|
436
|
-
|
|
489
|
+
return /* @__PURE__ */ React7.createElement(
|
|
490
|
+
Controller6,
|
|
437
491
|
{
|
|
438
492
|
control,
|
|
439
493
|
name,
|
|
440
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
494
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
|
|
441
495
|
RadioGroup,
|
|
442
496
|
{
|
|
443
497
|
...defaults.radioGroup,
|
|
@@ -450,7 +504,7 @@ function RadioGroupField(props) {
|
|
|
450
504
|
onBlur: field.onBlur,
|
|
451
505
|
onValueChange: (val) => field.onChange(val)
|
|
452
506
|
},
|
|
453
|
-
options.map((opt) => /* @__PURE__ */
|
|
507
|
+
options.map((opt) => /* @__PURE__ */ React7.createElement(
|
|
454
508
|
Radio,
|
|
455
509
|
{
|
|
456
510
|
key: String(opt.value),
|
|
@@ -459,15 +513,15 @@ function RadioGroupField(props) {
|
|
|
459
513
|
},
|
|
460
514
|
opt.label
|
|
461
515
|
))
|
|
462
|
-
), fieldState.error?.message ? /* @__PURE__ */
|
|
516
|
+
), fieldState.error?.message ? /* @__PURE__ */ React7.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
|
|
463
517
|
rules
|
|
464
518
|
}
|
|
465
519
|
);
|
|
466
520
|
}
|
|
467
521
|
|
|
468
522
|
// src/fields/SelectField.tsx
|
|
469
|
-
import
|
|
470
|
-
import { Controller as
|
|
523
|
+
import React8 from "react";
|
|
524
|
+
import { Controller as Controller7 } from "react-hook-form";
|
|
471
525
|
function SelectField(props) {
|
|
472
526
|
const {
|
|
473
527
|
className,
|
|
@@ -482,14 +536,14 @@ function SelectField(props) {
|
|
|
482
536
|
selectProps
|
|
483
537
|
} = props;
|
|
484
538
|
const defaults = useHeroHookFormDefaults();
|
|
485
|
-
return /* @__PURE__ */
|
|
486
|
-
|
|
539
|
+
return /* @__PURE__ */ React8.createElement(
|
|
540
|
+
Controller7,
|
|
487
541
|
{
|
|
488
542
|
control,
|
|
489
543
|
name,
|
|
490
544
|
render: ({ field, fieldState }) => {
|
|
491
545
|
const selectedKey = field.value;
|
|
492
|
-
return /* @__PURE__ */
|
|
546
|
+
return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement(
|
|
493
547
|
Select,
|
|
494
548
|
{
|
|
495
549
|
...defaults.select,
|
|
@@ -507,7 +561,7 @@ function SelectField(props) {
|
|
|
507
561
|
field.onChange(next);
|
|
508
562
|
}
|
|
509
563
|
},
|
|
510
|
-
options.map((opt) => /* @__PURE__ */
|
|
564
|
+
options.map((opt) => /* @__PURE__ */ React8.createElement(
|
|
511
565
|
SelectItem,
|
|
512
566
|
{
|
|
513
567
|
key: String(opt.value),
|
|
@@ -524,12 +578,12 @@ function SelectField(props) {
|
|
|
524
578
|
}
|
|
525
579
|
|
|
526
580
|
// src/fields/SliderField.tsx
|
|
527
|
-
import
|
|
528
|
-
import { Controller as
|
|
581
|
+
import React9 from "react";
|
|
582
|
+
import { Controller as Controller8 } from "react-hook-form";
|
|
529
583
|
function CoercedSlider(props) {
|
|
530
584
|
const { description, disabled, errorMessage, field, label, sliderProps } = props;
|
|
531
585
|
const defaults = useHeroHookFormDefaults();
|
|
532
|
-
return /* @__PURE__ */
|
|
586
|
+
return /* @__PURE__ */ React9.createElement(
|
|
533
587
|
Slider,
|
|
534
588
|
{
|
|
535
589
|
...defaults.slider,
|
|
@@ -557,12 +611,12 @@ function SliderField(props) {
|
|
|
557
611
|
sliderProps,
|
|
558
612
|
transform
|
|
559
613
|
} = props;
|
|
560
|
-
return /* @__PURE__ */
|
|
561
|
-
|
|
614
|
+
return /* @__PURE__ */ React9.createElement(
|
|
615
|
+
Controller8,
|
|
562
616
|
{
|
|
563
617
|
control,
|
|
564
618
|
name,
|
|
565
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
619
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
|
|
566
620
|
CoercedSlider,
|
|
567
621
|
{
|
|
568
622
|
description,
|
|
@@ -582,8 +636,8 @@ function SliderField(props) {
|
|
|
582
636
|
}
|
|
583
637
|
|
|
584
638
|
// src/fields/SwitchField.tsx
|
|
585
|
-
import
|
|
586
|
-
import { Controller as
|
|
639
|
+
import React10 from "react";
|
|
640
|
+
import { Controller as Controller9 } from "react-hook-form";
|
|
587
641
|
function SwitchField(props) {
|
|
588
642
|
const {
|
|
589
643
|
className,
|
|
@@ -596,12 +650,12 @@ function SwitchField(props) {
|
|
|
596
650
|
switchProps
|
|
597
651
|
} = props;
|
|
598
652
|
const defaults = useHeroHookFormDefaults();
|
|
599
|
-
return /* @__PURE__ */
|
|
600
|
-
|
|
653
|
+
return /* @__PURE__ */ React10.createElement(
|
|
654
|
+
Controller9,
|
|
601
655
|
{
|
|
602
656
|
control,
|
|
603
657
|
name,
|
|
604
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
658
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
|
|
605
659
|
Switch,
|
|
606
660
|
{
|
|
607
661
|
...defaults.switch,
|
|
@@ -612,15 +666,15 @@ function SwitchField(props) {
|
|
|
612
666
|
onValueChange: (val) => field.onChange(val)
|
|
613
667
|
},
|
|
614
668
|
label
|
|
615
|
-
), description ? /* @__PURE__ */
|
|
669
|
+
), description ? /* @__PURE__ */ React10.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React10.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
|
|
616
670
|
rules
|
|
617
671
|
}
|
|
618
672
|
);
|
|
619
673
|
}
|
|
620
674
|
|
|
621
675
|
// src/fields/TextareaField.tsx
|
|
622
|
-
import
|
|
623
|
-
import { Controller as
|
|
676
|
+
import React11 from "react";
|
|
677
|
+
import { Controller as Controller10 } from "react-hook-form";
|
|
624
678
|
function TextareaField(props) {
|
|
625
679
|
const {
|
|
626
680
|
className,
|
|
@@ -633,12 +687,12 @@ function TextareaField(props) {
|
|
|
633
687
|
textareaProps
|
|
634
688
|
} = props;
|
|
635
689
|
const defaults = useHeroHookFormDefaults();
|
|
636
|
-
return /* @__PURE__ */
|
|
637
|
-
|
|
690
|
+
return /* @__PURE__ */ React11.createElement(
|
|
691
|
+
Controller10,
|
|
638
692
|
{
|
|
639
693
|
control,
|
|
640
694
|
name,
|
|
641
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
695
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
|
|
642
696
|
Textarea,
|
|
643
697
|
{
|
|
644
698
|
...defaults.textarea,
|
|
@@ -687,7 +741,7 @@ function FormField({
|
|
|
687
741
|
};
|
|
688
742
|
switch (config.type) {
|
|
689
743
|
case "input":
|
|
690
|
-
return /* @__PURE__ */
|
|
744
|
+
return /* @__PURE__ */ React12.createElement(
|
|
691
745
|
InputField,
|
|
692
746
|
{
|
|
693
747
|
...baseProps,
|
|
@@ -697,7 +751,7 @@ function FormField({
|
|
|
697
751
|
}
|
|
698
752
|
);
|
|
699
753
|
case "textarea":
|
|
700
|
-
return /* @__PURE__ */
|
|
754
|
+
return /* @__PURE__ */ React12.createElement(
|
|
701
755
|
TextareaField,
|
|
702
756
|
{
|
|
703
757
|
...baseProps,
|
|
@@ -707,7 +761,7 @@ function FormField({
|
|
|
707
761
|
}
|
|
708
762
|
);
|
|
709
763
|
case "select":
|
|
710
|
-
return /* @__PURE__ */
|
|
764
|
+
return /* @__PURE__ */ React12.createElement(
|
|
711
765
|
SelectField,
|
|
712
766
|
{
|
|
713
767
|
...baseProps,
|
|
@@ -721,7 +775,7 @@ function FormField({
|
|
|
721
775
|
}
|
|
722
776
|
);
|
|
723
777
|
case "checkbox":
|
|
724
|
-
return /* @__PURE__ */
|
|
778
|
+
return /* @__PURE__ */ React12.createElement(
|
|
725
779
|
CheckboxField,
|
|
726
780
|
{
|
|
727
781
|
...baseProps,
|
|
@@ -731,7 +785,7 @@ function FormField({
|
|
|
731
785
|
}
|
|
732
786
|
);
|
|
733
787
|
case "radio":
|
|
734
|
-
return /* @__PURE__ */
|
|
788
|
+
return /* @__PURE__ */ React12.createElement(
|
|
735
789
|
RadioGroupField,
|
|
736
790
|
{
|
|
737
791
|
...baseProps,
|
|
@@ -745,7 +799,7 @@ function FormField({
|
|
|
745
799
|
}
|
|
746
800
|
);
|
|
747
801
|
case "switch":
|
|
748
|
-
return /* @__PURE__ */
|
|
802
|
+
return /* @__PURE__ */ React12.createElement(
|
|
749
803
|
SwitchField,
|
|
750
804
|
{
|
|
751
805
|
...baseProps,
|
|
@@ -755,7 +809,7 @@ function FormField({
|
|
|
755
809
|
}
|
|
756
810
|
);
|
|
757
811
|
case "slider":
|
|
758
|
-
return /* @__PURE__ */
|
|
812
|
+
return /* @__PURE__ */ React12.createElement(
|
|
759
813
|
SliderField,
|
|
760
814
|
{
|
|
761
815
|
...baseProps,
|
|
@@ -765,7 +819,7 @@ function FormField({
|
|
|
765
819
|
}
|
|
766
820
|
);
|
|
767
821
|
case "date":
|
|
768
|
-
return /* @__PURE__ */
|
|
822
|
+
return /* @__PURE__ */ React12.createElement(
|
|
769
823
|
DateField,
|
|
770
824
|
{
|
|
771
825
|
...baseProps,
|
|
@@ -775,7 +829,7 @@ function FormField({
|
|
|
775
829
|
}
|
|
776
830
|
);
|
|
777
831
|
case "file":
|
|
778
|
-
return /* @__PURE__ */
|
|
832
|
+
return /* @__PURE__ */ React12.createElement(
|
|
779
833
|
FileField,
|
|
780
834
|
{
|
|
781
835
|
...baseProps,
|
|
@@ -786,6 +840,16 @@ function FormField({
|
|
|
786
840
|
multiple: config.multiple
|
|
787
841
|
}
|
|
788
842
|
);
|
|
843
|
+
case "fontPicker":
|
|
844
|
+
return /* @__PURE__ */ React12.createElement(
|
|
845
|
+
FontPickerField,
|
|
846
|
+
{
|
|
847
|
+
...baseProps,
|
|
848
|
+
control,
|
|
849
|
+
defaultValue: config.defaultValue,
|
|
850
|
+
fontPickerProps: config.fontPickerProps
|
|
851
|
+
}
|
|
852
|
+
);
|
|
789
853
|
case "custom":
|
|
790
854
|
return config.render({
|
|
791
855
|
control,
|
|
@@ -837,12 +901,12 @@ function ConfigurableForm({
|
|
|
837
901
|
});
|
|
838
902
|
const renderFields = () => {
|
|
839
903
|
if (layout === "grid") {
|
|
840
|
-
return /* @__PURE__ */
|
|
904
|
+
return /* @__PURE__ */ React13.createElement(
|
|
841
905
|
"div",
|
|
842
906
|
{
|
|
843
907
|
className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
|
|
844
908
|
},
|
|
845
|
-
fields.map((field) => /* @__PURE__ */
|
|
909
|
+
fields.map((field) => /* @__PURE__ */ React13.createElement(
|
|
846
910
|
FormField,
|
|
847
911
|
{
|
|
848
912
|
key: field.name,
|
|
@@ -854,7 +918,7 @@ function ConfigurableForm({
|
|
|
854
918
|
);
|
|
855
919
|
}
|
|
856
920
|
if (layout === "horizontal") {
|
|
857
|
-
return /* @__PURE__ */
|
|
921
|
+
return /* @__PURE__ */ React13.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
|
|
858
922
|
FormField,
|
|
859
923
|
{
|
|
860
924
|
key: field.name,
|
|
@@ -864,7 +928,7 @@ function ConfigurableForm({
|
|
|
864
928
|
}
|
|
865
929
|
)));
|
|
866
930
|
}
|
|
867
|
-
return /* @__PURE__ */
|
|
931
|
+
return /* @__PURE__ */ React13.createElement("div", { className: `space-y-${spacing}` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
|
|
868
932
|
FormField,
|
|
869
933
|
{
|
|
870
934
|
key: field.name,
|
|
@@ -878,23 +942,23 @@ function ConfigurableForm({
|
|
|
878
942
|
e.preventDefault();
|
|
879
943
|
void handleSubmit();
|
|
880
944
|
};
|
|
881
|
-
return /* @__PURE__ */
|
|
945
|
+
return /* @__PURE__ */ React13.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React13.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React13.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React13.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React13.createElement(
|
|
882
946
|
"div",
|
|
883
947
|
{
|
|
884
948
|
className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
|
|
885
949
|
"data-testid": "success-message"
|
|
886
950
|
},
|
|
887
|
-
/* @__PURE__ */
|
|
888
|
-
/* @__PURE__ */
|
|
889
|
-
), error && /* @__PURE__ */
|
|
951
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
|
|
952
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
|
|
953
|
+
), error && /* @__PURE__ */ React13.createElement(
|
|
890
954
|
"div",
|
|
891
955
|
{
|
|
892
956
|
className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
|
|
893
957
|
"data-testid": "error-message"
|
|
894
958
|
},
|
|
895
|
-
/* @__PURE__ */
|
|
896
|
-
/* @__PURE__ */
|
|
897
|
-
), renderFields(), /* @__PURE__ */
|
|
959
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
|
|
960
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
|
|
961
|
+
), renderFields(), /* @__PURE__ */ React13.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React13.createElement(
|
|
898
962
|
Button2,
|
|
899
963
|
{
|
|
900
964
|
color: "primary",
|
|
@@ -904,7 +968,7 @@ function ConfigurableForm({
|
|
|
904
968
|
...submitButtonProps
|
|
905
969
|
},
|
|
906
970
|
submitButtonText
|
|
907
|
-
), showResetButton && /* @__PURE__ */
|
|
971
|
+
), showResetButton && /* @__PURE__ */ React13.createElement(
|
|
908
972
|
Button2,
|
|
909
973
|
{
|
|
910
974
|
isDisabled: isSubmitting,
|
|
@@ -916,11 +980,24 @@ function ConfigurableForm({
|
|
|
916
980
|
)));
|
|
917
981
|
}
|
|
918
982
|
|
|
983
|
+
// src/hooks/useHeroForm.ts
|
|
984
|
+
import { useFormContext } from "react-hook-form";
|
|
985
|
+
function useHeroForm() {
|
|
986
|
+
const form = useFormContext();
|
|
987
|
+
const defaults = useHeroHookFormDefaults();
|
|
988
|
+
return {
|
|
989
|
+
// All React Hook Form methods and state
|
|
990
|
+
...form,
|
|
991
|
+
// Hero Hook Form styling defaults
|
|
992
|
+
defaults
|
|
993
|
+
};
|
|
994
|
+
}
|
|
995
|
+
|
|
919
996
|
// src/providers/FormProvider.tsx
|
|
920
|
-
import
|
|
997
|
+
import React14 from "react";
|
|
921
998
|
import { FormProvider as RHFProvider } from "react-hook-form";
|
|
922
999
|
function FormProvider(props) {
|
|
923
|
-
return /* @__PURE__ */
|
|
1000
|
+
return /* @__PURE__ */ React14.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React14.createElement(
|
|
924
1001
|
"form",
|
|
925
1002
|
{
|
|
926
1003
|
className: props.className,
|
|
@@ -933,15 +1010,14 @@ function FormProvider(props) {
|
|
|
933
1010
|
}
|
|
934
1011
|
|
|
935
1012
|
// src/submit/SubmitButton.tsx
|
|
936
|
-
import
|
|
937
|
-
import { useFormContext } from "react-hook-form";
|
|
1013
|
+
import React15 from "react";
|
|
938
1014
|
function SubmitButton(props) {
|
|
939
|
-
const ctx =
|
|
1015
|
+
const ctx = useFormContext2();
|
|
940
1016
|
const loading = props.isLoading ?? ctx.formState.isSubmitting;
|
|
941
1017
|
const isDisabledFromProps = props.buttonProps?.isDisabled ?? false;
|
|
942
1018
|
const isDisabled = Boolean(isDisabledFromProps) || Boolean(loading);
|
|
943
1019
|
const defaults = useHeroHookFormDefaults();
|
|
944
|
-
return /* @__PURE__ */
|
|
1020
|
+
return /* @__PURE__ */ React15.createElement(
|
|
945
1021
|
Button,
|
|
946
1022
|
{
|
|
947
1023
|
type: "submit",
|
|
@@ -949,7 +1025,7 @@ function SubmitButton(props) {
|
|
|
949
1025
|
...props.buttonProps,
|
|
950
1026
|
isDisabled
|
|
951
1027
|
},
|
|
952
|
-
loading ? /* @__PURE__ */
|
|
1028
|
+
loading ? /* @__PURE__ */ React15.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Spinner, { size: "sm" }), "Submitting\u2026") : props.children
|
|
953
1029
|
);
|
|
954
1030
|
}
|
|
955
1031
|
|
|
@@ -1141,8 +1217,11 @@ var commonValidations = {
|
|
|
1141
1217
|
url: createUrlSchema()
|
|
1142
1218
|
};
|
|
1143
1219
|
|
|
1220
|
+
// src/index.ts
|
|
1221
|
+
import { useFormContext as useFormContext2 } from "react-hook-form";
|
|
1222
|
+
|
|
1144
1223
|
// src/components/ZodForm.tsx
|
|
1145
|
-
import
|
|
1224
|
+
import React16 from "react";
|
|
1146
1225
|
import { Button as Button3 } from "@heroui/react";
|
|
1147
1226
|
|
|
1148
1227
|
// src/zod-integration.ts
|
|
@@ -1178,6 +1257,13 @@ function useZodForm(config) {
|
|
|
1178
1257
|
}
|
|
1179
1258
|
return useForm2(config);
|
|
1180
1259
|
}
|
|
1260
|
+
function createZodFormConfig(schema, fields, defaultValues) {
|
|
1261
|
+
return {
|
|
1262
|
+
schema,
|
|
1263
|
+
fields,
|
|
1264
|
+
...defaultValues && { defaultValues }
|
|
1265
|
+
};
|
|
1266
|
+
}
|
|
1181
1267
|
|
|
1182
1268
|
// src/components/ZodForm.tsx
|
|
1183
1269
|
function ZodForm({
|
|
@@ -1199,7 +1285,7 @@ function ZodForm({
|
|
|
1199
1285
|
title
|
|
1200
1286
|
}) {
|
|
1201
1287
|
const form = useZodForm(config);
|
|
1202
|
-
const [submissionState, setSubmissionState] =
|
|
1288
|
+
const [submissionState, setSubmissionState] = React16.useState({
|
|
1203
1289
|
error: void 0,
|
|
1204
1290
|
isSubmitted: false,
|
|
1205
1291
|
isSubmitting: false,
|
|
@@ -1256,12 +1342,12 @@ function ZodForm({
|
|
|
1256
1342
|
};
|
|
1257
1343
|
const renderFields = () => {
|
|
1258
1344
|
if (layout === "grid") {
|
|
1259
|
-
return /* @__PURE__ */
|
|
1345
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1260
1346
|
"div",
|
|
1261
1347
|
{
|
|
1262
1348
|
className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
|
|
1263
1349
|
},
|
|
1264
|
-
config.fields.map((field) => /* @__PURE__ */
|
|
1350
|
+
config.fields.map((field) => /* @__PURE__ */ React16.createElement(
|
|
1265
1351
|
FormField,
|
|
1266
1352
|
{
|
|
1267
1353
|
key: field.name,
|
|
@@ -1273,7 +1359,7 @@ function ZodForm({
|
|
|
1273
1359
|
);
|
|
1274
1360
|
}
|
|
1275
1361
|
if (layout === "horizontal") {
|
|
1276
|
-
return /* @__PURE__ */
|
|
1362
|
+
return /* @__PURE__ */ React16.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
|
|
1277
1363
|
FormField,
|
|
1278
1364
|
{
|
|
1279
1365
|
key: field.name,
|
|
@@ -1283,7 +1369,7 @@ function ZodForm({
|
|
|
1283
1369
|
}
|
|
1284
1370
|
)));
|
|
1285
1371
|
}
|
|
1286
|
-
return /* @__PURE__ */
|
|
1372
|
+
return /* @__PURE__ */ React16.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
|
|
1287
1373
|
FormField,
|
|
1288
1374
|
{
|
|
1289
1375
|
key: field.name,
|
|
@@ -1297,7 +1383,7 @@ function ZodForm({
|
|
|
1297
1383
|
e.preventDefault();
|
|
1298
1384
|
void handleSubmit();
|
|
1299
1385
|
};
|
|
1300
|
-
|
|
1386
|
+
React16.useEffect(() => {
|
|
1301
1387
|
if (config.onError && Object.keys(form.formState.errors).length > 0) {
|
|
1302
1388
|
config.onError(form.formState.errors);
|
|
1303
1389
|
}
|
|
@@ -1312,23 +1398,23 @@ function ZodForm({
|
|
|
1312
1398
|
values: form.getValues()
|
|
1313
1399
|
});
|
|
1314
1400
|
}
|
|
1315
|
-
return /* @__PURE__ */
|
|
1401
|
+
return /* @__PURE__ */ React16.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React16.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React16.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React16.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), submissionState.isSubmitted && submissionState.isSuccess && /* @__PURE__ */ React16.createElement(
|
|
1316
1402
|
"div",
|
|
1317
1403
|
{
|
|
1318
1404
|
className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
|
|
1319
1405
|
"data-testid": "success-message"
|
|
1320
1406
|
},
|
|
1321
|
-
/* @__PURE__ */
|
|
1322
|
-
/* @__PURE__ */
|
|
1323
|
-
), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */
|
|
1407
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
|
|
1408
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
|
|
1409
|
+
), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */ React16.createElement(
|
|
1324
1410
|
"div",
|
|
1325
1411
|
{
|
|
1326
1412
|
className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
|
|
1327
1413
|
"data-testid": "error-message"
|
|
1328
1414
|
},
|
|
1329
|
-
/* @__PURE__ */
|
|
1330
|
-
/* @__PURE__ */
|
|
1331
|
-
), renderFields(), /* @__PURE__ */
|
|
1415
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
|
|
1416
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-danger-700 text-sm mt-1" }, submissionState.error)
|
|
1417
|
+
), renderFields(), /* @__PURE__ */ React16.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React16.createElement(
|
|
1332
1418
|
Button3,
|
|
1333
1419
|
{
|
|
1334
1420
|
color: "primary",
|
|
@@ -1338,7 +1424,7 @@ function ZodForm({
|
|
|
1338
1424
|
...submitButtonProps
|
|
1339
1425
|
},
|
|
1340
1426
|
submitButtonText
|
|
1341
|
-
), showResetButton && /* @__PURE__ */
|
|
1427
|
+
), showResetButton && /* @__PURE__ */ React16.createElement(
|
|
1342
1428
|
Button3,
|
|
1343
1429
|
{
|
|
1344
1430
|
isDisabled: submissionState.isSubmitting,
|
|
@@ -1354,6 +1440,7 @@ export {
|
|
|
1354
1440
|
ConfigurableForm,
|
|
1355
1441
|
DateField,
|
|
1356
1442
|
FileField,
|
|
1443
|
+
FontPickerField,
|
|
1357
1444
|
FormField,
|
|
1358
1445
|
FormProvider,
|
|
1359
1446
|
HeroHookFormProvider,
|
|
@@ -1385,13 +1472,16 @@ export {
|
|
|
1385
1472
|
createRequiredCheckboxSchema,
|
|
1386
1473
|
createRequiredSchema,
|
|
1387
1474
|
createUrlSchema,
|
|
1475
|
+
createZodFormConfig,
|
|
1388
1476
|
getFieldError,
|
|
1389
1477
|
getFormErrors,
|
|
1390
1478
|
hasFieldError,
|
|
1391
1479
|
hasFormErrors,
|
|
1392
1480
|
simulateFieldInput,
|
|
1393
1481
|
simulateFormSubmission,
|
|
1482
|
+
useFormContext2 as useFormContext,
|
|
1394
1483
|
useFormHelper,
|
|
1484
|
+
useHeroForm,
|
|
1395
1485
|
useHeroHookFormDefaults,
|
|
1396
1486
|
useZodForm,
|
|
1397
1487
|
waitForFormState
|