@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/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
|
|
@@ -344,13 +351,60 @@ function FileField(props) {
|
|
|
344
351
|
);
|
|
345
352
|
}
|
|
346
353
|
|
|
347
|
-
// src/fields/
|
|
354
|
+
// src/fields/FontPickerField.tsx
|
|
348
355
|
import React5 from "react";
|
|
349
356
|
import { Controller as Controller4 } from "react-hook-form";
|
|
357
|
+
var FontPickerComponent = null;
|
|
358
|
+
try {
|
|
359
|
+
const fontPickerModule = __require("@rachelallyson/heroui-font-picker");
|
|
360
|
+
FontPickerComponent = fontPickerModule.FontPicker;
|
|
361
|
+
} catch (e) {
|
|
362
|
+
console.debug("Font picker package not available - FontPickerField will show fallback UI");
|
|
363
|
+
}
|
|
364
|
+
function FontPickerField(props) {
|
|
365
|
+
const {
|
|
366
|
+
className,
|
|
367
|
+
control,
|
|
368
|
+
description,
|
|
369
|
+
fontPickerProps,
|
|
370
|
+
isDisabled,
|
|
371
|
+
label,
|
|
372
|
+
name,
|
|
373
|
+
rules
|
|
374
|
+
} = props;
|
|
375
|
+
if (!FontPickerComponent) {
|
|
376
|
+
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."))));
|
|
377
|
+
}
|
|
378
|
+
return /* @__PURE__ */ React5.createElement(
|
|
379
|
+
Controller4,
|
|
380
|
+
{
|
|
381
|
+
control,
|
|
382
|
+
name,
|
|
383
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React5.createElement(
|
|
384
|
+
FontPickerComponent,
|
|
385
|
+
{
|
|
386
|
+
label,
|
|
387
|
+
description,
|
|
388
|
+
value: field.value ?? "",
|
|
389
|
+
onSelectionChange: (value) => field.onChange(value),
|
|
390
|
+
errorMessage: fieldState.error?.message,
|
|
391
|
+
isDisabled,
|
|
392
|
+
className,
|
|
393
|
+
...fontPickerProps
|
|
394
|
+
}
|
|
395
|
+
),
|
|
396
|
+
rules
|
|
397
|
+
}
|
|
398
|
+
);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
// src/fields/InputField.tsx
|
|
402
|
+
import React6 from "react";
|
|
403
|
+
import { Controller as Controller5 } from "react-hook-form";
|
|
350
404
|
function CoercedInput(props) {
|
|
351
405
|
const { description, disabled, errorMessage, field, inputProps, label } = props;
|
|
352
406
|
const defaults = useHeroHookFormDefaults();
|
|
353
|
-
return /* @__PURE__ */
|
|
407
|
+
return /* @__PURE__ */ React6.createElement(
|
|
354
408
|
Input,
|
|
355
409
|
{
|
|
356
410
|
...defaults.input,
|
|
@@ -378,12 +432,12 @@ function InputField(props) {
|
|
|
378
432
|
rules,
|
|
379
433
|
transform
|
|
380
434
|
} = props;
|
|
381
|
-
return /* @__PURE__ */
|
|
382
|
-
|
|
435
|
+
return /* @__PURE__ */ React6.createElement(
|
|
436
|
+
Controller5,
|
|
383
437
|
{
|
|
384
438
|
control,
|
|
385
439
|
name,
|
|
386
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
440
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
|
|
387
441
|
CoercedInput,
|
|
388
442
|
{
|
|
389
443
|
description,
|
|
@@ -412,8 +466,8 @@ function InputField(props) {
|
|
|
412
466
|
}
|
|
413
467
|
|
|
414
468
|
// src/fields/RadioGroupField.tsx
|
|
415
|
-
import
|
|
416
|
-
import { Controller as
|
|
469
|
+
import React7 from "react";
|
|
470
|
+
import { Controller as Controller6 } from "react-hook-form";
|
|
417
471
|
function RadioGroupField(props) {
|
|
418
472
|
const {
|
|
419
473
|
className,
|
|
@@ -427,12 +481,12 @@ function RadioGroupField(props) {
|
|
|
427
481
|
rules
|
|
428
482
|
} = props;
|
|
429
483
|
const defaults = useHeroHookFormDefaults();
|
|
430
|
-
return /* @__PURE__ */
|
|
431
|
-
|
|
484
|
+
return /* @__PURE__ */ React7.createElement(
|
|
485
|
+
Controller6,
|
|
432
486
|
{
|
|
433
487
|
control,
|
|
434
488
|
name,
|
|
435
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
489
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
|
|
436
490
|
RadioGroup,
|
|
437
491
|
{
|
|
438
492
|
...defaults.radioGroup,
|
|
@@ -445,7 +499,7 @@ function RadioGroupField(props) {
|
|
|
445
499
|
onBlur: field.onBlur,
|
|
446
500
|
onValueChange: (val) => field.onChange(val)
|
|
447
501
|
},
|
|
448
|
-
options.map((opt) => /* @__PURE__ */
|
|
502
|
+
options.map((opt) => /* @__PURE__ */ React7.createElement(
|
|
449
503
|
Radio,
|
|
450
504
|
{
|
|
451
505
|
key: String(opt.value),
|
|
@@ -454,15 +508,15 @@ function RadioGroupField(props) {
|
|
|
454
508
|
},
|
|
455
509
|
opt.label
|
|
456
510
|
))
|
|
457
|
-
), fieldState.error?.message ? /* @__PURE__ */
|
|
511
|
+
), fieldState.error?.message ? /* @__PURE__ */ React7.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
|
|
458
512
|
rules
|
|
459
513
|
}
|
|
460
514
|
);
|
|
461
515
|
}
|
|
462
516
|
|
|
463
517
|
// src/fields/SelectField.tsx
|
|
464
|
-
import
|
|
465
|
-
import { Controller as
|
|
518
|
+
import React8 from "react";
|
|
519
|
+
import { Controller as Controller7 } from "react-hook-form";
|
|
466
520
|
function SelectField(props) {
|
|
467
521
|
const {
|
|
468
522
|
className,
|
|
@@ -477,14 +531,14 @@ function SelectField(props) {
|
|
|
477
531
|
selectProps
|
|
478
532
|
} = props;
|
|
479
533
|
const defaults = useHeroHookFormDefaults();
|
|
480
|
-
return /* @__PURE__ */
|
|
481
|
-
|
|
534
|
+
return /* @__PURE__ */ React8.createElement(
|
|
535
|
+
Controller7,
|
|
482
536
|
{
|
|
483
537
|
control,
|
|
484
538
|
name,
|
|
485
539
|
render: ({ field, fieldState }) => {
|
|
486
540
|
const selectedKey = field.value;
|
|
487
|
-
return /* @__PURE__ */
|
|
541
|
+
return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement(
|
|
488
542
|
Select,
|
|
489
543
|
{
|
|
490
544
|
...defaults.select,
|
|
@@ -502,7 +556,7 @@ function SelectField(props) {
|
|
|
502
556
|
field.onChange(next);
|
|
503
557
|
}
|
|
504
558
|
},
|
|
505
|
-
options.map((opt) => /* @__PURE__ */
|
|
559
|
+
options.map((opt) => /* @__PURE__ */ React8.createElement(
|
|
506
560
|
SelectItem,
|
|
507
561
|
{
|
|
508
562
|
key: String(opt.value),
|
|
@@ -519,12 +573,12 @@ function SelectField(props) {
|
|
|
519
573
|
}
|
|
520
574
|
|
|
521
575
|
// src/fields/SliderField.tsx
|
|
522
|
-
import
|
|
523
|
-
import { Controller as
|
|
576
|
+
import React9 from "react";
|
|
577
|
+
import { Controller as Controller8 } from "react-hook-form";
|
|
524
578
|
function CoercedSlider(props) {
|
|
525
579
|
const { description, disabled, errorMessage, field, label, sliderProps } = props;
|
|
526
580
|
const defaults = useHeroHookFormDefaults();
|
|
527
|
-
return /* @__PURE__ */
|
|
581
|
+
return /* @__PURE__ */ React9.createElement(
|
|
528
582
|
Slider,
|
|
529
583
|
{
|
|
530
584
|
...defaults.slider,
|
|
@@ -552,12 +606,12 @@ function SliderField(props) {
|
|
|
552
606
|
sliderProps,
|
|
553
607
|
transform
|
|
554
608
|
} = props;
|
|
555
|
-
return /* @__PURE__ */
|
|
556
|
-
|
|
609
|
+
return /* @__PURE__ */ React9.createElement(
|
|
610
|
+
Controller8,
|
|
557
611
|
{
|
|
558
612
|
control,
|
|
559
613
|
name,
|
|
560
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
614
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
|
|
561
615
|
CoercedSlider,
|
|
562
616
|
{
|
|
563
617
|
description,
|
|
@@ -577,8 +631,8 @@ function SliderField(props) {
|
|
|
577
631
|
}
|
|
578
632
|
|
|
579
633
|
// src/fields/SwitchField.tsx
|
|
580
|
-
import
|
|
581
|
-
import { Controller as
|
|
634
|
+
import React10 from "react";
|
|
635
|
+
import { Controller as Controller9 } from "react-hook-form";
|
|
582
636
|
function SwitchField(props) {
|
|
583
637
|
const {
|
|
584
638
|
className,
|
|
@@ -591,12 +645,12 @@ function SwitchField(props) {
|
|
|
591
645
|
switchProps
|
|
592
646
|
} = props;
|
|
593
647
|
const defaults = useHeroHookFormDefaults();
|
|
594
|
-
return /* @__PURE__ */
|
|
595
|
-
|
|
648
|
+
return /* @__PURE__ */ React10.createElement(
|
|
649
|
+
Controller9,
|
|
596
650
|
{
|
|
597
651
|
control,
|
|
598
652
|
name,
|
|
599
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
653
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
|
|
600
654
|
Switch,
|
|
601
655
|
{
|
|
602
656
|
...defaults.switch,
|
|
@@ -607,15 +661,15 @@ function SwitchField(props) {
|
|
|
607
661
|
onValueChange: (val) => field.onChange(val)
|
|
608
662
|
},
|
|
609
663
|
label
|
|
610
|
-
), description ? /* @__PURE__ */
|
|
664
|
+
), 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),
|
|
611
665
|
rules
|
|
612
666
|
}
|
|
613
667
|
);
|
|
614
668
|
}
|
|
615
669
|
|
|
616
670
|
// src/fields/TextareaField.tsx
|
|
617
|
-
import
|
|
618
|
-
import { Controller as
|
|
671
|
+
import React11 from "react";
|
|
672
|
+
import { Controller as Controller10 } from "react-hook-form";
|
|
619
673
|
function TextareaField(props) {
|
|
620
674
|
const {
|
|
621
675
|
className,
|
|
@@ -628,12 +682,12 @@ function TextareaField(props) {
|
|
|
628
682
|
textareaProps
|
|
629
683
|
} = props;
|
|
630
684
|
const defaults = useHeroHookFormDefaults();
|
|
631
|
-
return /* @__PURE__ */
|
|
632
|
-
|
|
685
|
+
return /* @__PURE__ */ React11.createElement(
|
|
686
|
+
Controller10,
|
|
633
687
|
{
|
|
634
688
|
control,
|
|
635
689
|
name,
|
|
636
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
690
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
|
|
637
691
|
Textarea,
|
|
638
692
|
{
|
|
639
693
|
...defaults.textarea,
|
|
@@ -682,7 +736,7 @@ function FormField({
|
|
|
682
736
|
};
|
|
683
737
|
switch (config.type) {
|
|
684
738
|
case "input":
|
|
685
|
-
return /* @__PURE__ */
|
|
739
|
+
return /* @__PURE__ */ React12.createElement(
|
|
686
740
|
InputField,
|
|
687
741
|
{
|
|
688
742
|
...baseProps,
|
|
@@ -692,7 +746,7 @@ function FormField({
|
|
|
692
746
|
}
|
|
693
747
|
);
|
|
694
748
|
case "textarea":
|
|
695
|
-
return /* @__PURE__ */
|
|
749
|
+
return /* @__PURE__ */ React12.createElement(
|
|
696
750
|
TextareaField,
|
|
697
751
|
{
|
|
698
752
|
...baseProps,
|
|
@@ -702,7 +756,7 @@ function FormField({
|
|
|
702
756
|
}
|
|
703
757
|
);
|
|
704
758
|
case "select":
|
|
705
|
-
return /* @__PURE__ */
|
|
759
|
+
return /* @__PURE__ */ React12.createElement(
|
|
706
760
|
SelectField,
|
|
707
761
|
{
|
|
708
762
|
...baseProps,
|
|
@@ -716,7 +770,7 @@ function FormField({
|
|
|
716
770
|
}
|
|
717
771
|
);
|
|
718
772
|
case "checkbox":
|
|
719
|
-
return /* @__PURE__ */
|
|
773
|
+
return /* @__PURE__ */ React12.createElement(
|
|
720
774
|
CheckboxField,
|
|
721
775
|
{
|
|
722
776
|
...baseProps,
|
|
@@ -726,7 +780,7 @@ function FormField({
|
|
|
726
780
|
}
|
|
727
781
|
);
|
|
728
782
|
case "radio":
|
|
729
|
-
return /* @__PURE__ */
|
|
783
|
+
return /* @__PURE__ */ React12.createElement(
|
|
730
784
|
RadioGroupField,
|
|
731
785
|
{
|
|
732
786
|
...baseProps,
|
|
@@ -740,7 +794,7 @@ function FormField({
|
|
|
740
794
|
}
|
|
741
795
|
);
|
|
742
796
|
case "switch":
|
|
743
|
-
return /* @__PURE__ */
|
|
797
|
+
return /* @__PURE__ */ React12.createElement(
|
|
744
798
|
SwitchField,
|
|
745
799
|
{
|
|
746
800
|
...baseProps,
|
|
@@ -750,7 +804,7 @@ function FormField({
|
|
|
750
804
|
}
|
|
751
805
|
);
|
|
752
806
|
case "slider":
|
|
753
|
-
return /* @__PURE__ */
|
|
807
|
+
return /* @__PURE__ */ React12.createElement(
|
|
754
808
|
SliderField,
|
|
755
809
|
{
|
|
756
810
|
...baseProps,
|
|
@@ -760,7 +814,7 @@ function FormField({
|
|
|
760
814
|
}
|
|
761
815
|
);
|
|
762
816
|
case "date":
|
|
763
|
-
return /* @__PURE__ */
|
|
817
|
+
return /* @__PURE__ */ React12.createElement(
|
|
764
818
|
DateField,
|
|
765
819
|
{
|
|
766
820
|
...baseProps,
|
|
@@ -770,7 +824,7 @@ function FormField({
|
|
|
770
824
|
}
|
|
771
825
|
);
|
|
772
826
|
case "file":
|
|
773
|
-
return /* @__PURE__ */
|
|
827
|
+
return /* @__PURE__ */ React12.createElement(
|
|
774
828
|
FileField,
|
|
775
829
|
{
|
|
776
830
|
...baseProps,
|
|
@@ -781,6 +835,16 @@ function FormField({
|
|
|
781
835
|
multiple: config.multiple
|
|
782
836
|
}
|
|
783
837
|
);
|
|
838
|
+
case "fontPicker":
|
|
839
|
+
return /* @__PURE__ */ React12.createElement(
|
|
840
|
+
FontPickerField,
|
|
841
|
+
{
|
|
842
|
+
...baseProps,
|
|
843
|
+
control,
|
|
844
|
+
defaultValue: config.defaultValue,
|
|
845
|
+
fontPickerProps: config.fontPickerProps
|
|
846
|
+
}
|
|
847
|
+
);
|
|
784
848
|
case "custom":
|
|
785
849
|
return config.render({
|
|
786
850
|
control,
|
|
@@ -832,12 +896,12 @@ function ConfigurableForm({
|
|
|
832
896
|
});
|
|
833
897
|
const renderFields = () => {
|
|
834
898
|
if (layout === "grid") {
|
|
835
|
-
return /* @__PURE__ */
|
|
899
|
+
return /* @__PURE__ */ React13.createElement(
|
|
836
900
|
"div",
|
|
837
901
|
{
|
|
838
902
|
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"}`
|
|
839
903
|
},
|
|
840
|
-
fields.map((field) => /* @__PURE__ */
|
|
904
|
+
fields.map((field) => /* @__PURE__ */ React13.createElement(
|
|
841
905
|
FormField,
|
|
842
906
|
{
|
|
843
907
|
key: field.name,
|
|
@@ -849,7 +913,7 @@ function ConfigurableForm({
|
|
|
849
913
|
);
|
|
850
914
|
}
|
|
851
915
|
if (layout === "horizontal") {
|
|
852
|
-
return /* @__PURE__ */
|
|
916
|
+
return /* @__PURE__ */ React13.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
|
|
853
917
|
FormField,
|
|
854
918
|
{
|
|
855
919
|
key: field.name,
|
|
@@ -859,7 +923,7 @@ function ConfigurableForm({
|
|
|
859
923
|
}
|
|
860
924
|
)));
|
|
861
925
|
}
|
|
862
|
-
return /* @__PURE__ */
|
|
926
|
+
return /* @__PURE__ */ React13.createElement("div", { className: `space-y-${spacing}` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
|
|
863
927
|
FormField,
|
|
864
928
|
{
|
|
865
929
|
key: field.name,
|
|
@@ -873,23 +937,23 @@ function ConfigurableForm({
|
|
|
873
937
|
e.preventDefault();
|
|
874
938
|
void handleSubmit();
|
|
875
939
|
};
|
|
876
|
-
return /* @__PURE__ */
|
|
940
|
+
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(
|
|
877
941
|
"div",
|
|
878
942
|
{
|
|
879
943
|
className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
|
|
880
944
|
"data-testid": "success-message"
|
|
881
945
|
},
|
|
882
|
-
/* @__PURE__ */
|
|
883
|
-
/* @__PURE__ */
|
|
884
|
-
), error && /* @__PURE__ */
|
|
946
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
|
|
947
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
|
|
948
|
+
), error && /* @__PURE__ */ React13.createElement(
|
|
885
949
|
"div",
|
|
886
950
|
{
|
|
887
951
|
className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
|
|
888
952
|
"data-testid": "error-message"
|
|
889
953
|
},
|
|
890
|
-
/* @__PURE__ */
|
|
891
|
-
/* @__PURE__ */
|
|
892
|
-
), renderFields(), /* @__PURE__ */
|
|
954
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
|
|
955
|
+
/* @__PURE__ */ React13.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
|
|
956
|
+
), renderFields(), /* @__PURE__ */ React13.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React13.createElement(
|
|
893
957
|
Button2,
|
|
894
958
|
{
|
|
895
959
|
color: "primary",
|
|
@@ -899,7 +963,7 @@ function ConfigurableForm({
|
|
|
899
963
|
...submitButtonProps
|
|
900
964
|
},
|
|
901
965
|
submitButtonText
|
|
902
|
-
), showResetButton && /* @__PURE__ */
|
|
966
|
+
), showResetButton && /* @__PURE__ */ React13.createElement(
|
|
903
967
|
Button2,
|
|
904
968
|
{
|
|
905
969
|
isDisabled: isSubmitting,
|
|
@@ -911,11 +975,24 @@ function ConfigurableForm({
|
|
|
911
975
|
)));
|
|
912
976
|
}
|
|
913
977
|
|
|
978
|
+
// src/hooks/useHeroForm.ts
|
|
979
|
+
import { useFormContext } from "react-hook-form";
|
|
980
|
+
function useHeroForm() {
|
|
981
|
+
const form = useFormContext();
|
|
982
|
+
const defaults = useHeroHookFormDefaults();
|
|
983
|
+
return {
|
|
984
|
+
// All React Hook Form methods and state
|
|
985
|
+
...form,
|
|
986
|
+
// Hero Hook Form styling defaults
|
|
987
|
+
defaults
|
|
988
|
+
};
|
|
989
|
+
}
|
|
990
|
+
|
|
914
991
|
// src/providers/FormProvider.tsx
|
|
915
|
-
import
|
|
992
|
+
import React14 from "react";
|
|
916
993
|
import { FormProvider as RHFProvider } from "react-hook-form";
|
|
917
994
|
function FormProvider(props) {
|
|
918
|
-
return /* @__PURE__ */
|
|
995
|
+
return /* @__PURE__ */ React14.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React14.createElement(
|
|
919
996
|
"form",
|
|
920
997
|
{
|
|
921
998
|
className: props.className,
|
|
@@ -928,15 +1005,14 @@ function FormProvider(props) {
|
|
|
928
1005
|
}
|
|
929
1006
|
|
|
930
1007
|
// src/submit/SubmitButton.tsx
|
|
931
|
-
import
|
|
932
|
-
import { useFormContext } from "react-hook-form";
|
|
1008
|
+
import React15 from "react";
|
|
933
1009
|
function SubmitButton(props) {
|
|
934
|
-
const ctx =
|
|
1010
|
+
const ctx = useFormContext2();
|
|
935
1011
|
const loading = props.isLoading ?? ctx.formState.isSubmitting;
|
|
936
1012
|
const isDisabledFromProps = props.buttonProps?.isDisabled ?? false;
|
|
937
1013
|
const isDisabled = Boolean(isDisabledFromProps) || Boolean(loading);
|
|
938
1014
|
const defaults = useHeroHookFormDefaults();
|
|
939
|
-
return /* @__PURE__ */
|
|
1015
|
+
return /* @__PURE__ */ React15.createElement(
|
|
940
1016
|
Button,
|
|
941
1017
|
{
|
|
942
1018
|
type: "submit",
|
|
@@ -944,7 +1020,7 @@ function SubmitButton(props) {
|
|
|
944
1020
|
...props.buttonProps,
|
|
945
1021
|
isDisabled
|
|
946
1022
|
},
|
|
947
|
-
loading ? /* @__PURE__ */
|
|
1023
|
+
loading ? /* @__PURE__ */ React15.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Spinner, { size: "sm" }), "Submitting\u2026") : props.children
|
|
948
1024
|
);
|
|
949
1025
|
}
|
|
950
1026
|
|
|
@@ -1136,8 +1212,11 @@ var commonValidations = {
|
|
|
1136
1212
|
url: createUrlSchema()
|
|
1137
1213
|
};
|
|
1138
1214
|
|
|
1215
|
+
// src/index.ts
|
|
1216
|
+
import { useFormContext as useFormContext2 } from "react-hook-form";
|
|
1217
|
+
|
|
1139
1218
|
// src/components/ZodForm.tsx
|
|
1140
|
-
import
|
|
1219
|
+
import React16 from "react";
|
|
1141
1220
|
import { Button as Button3 } from "@heroui/react";
|
|
1142
1221
|
|
|
1143
1222
|
// src/zod-integration.ts
|
|
@@ -1173,6 +1252,13 @@ function useZodForm(config) {
|
|
|
1173
1252
|
}
|
|
1174
1253
|
return useForm2(config);
|
|
1175
1254
|
}
|
|
1255
|
+
function createZodFormConfig(schema, fields, defaultValues) {
|
|
1256
|
+
return {
|
|
1257
|
+
schema,
|
|
1258
|
+
fields,
|
|
1259
|
+
...defaultValues && { defaultValues }
|
|
1260
|
+
};
|
|
1261
|
+
}
|
|
1176
1262
|
|
|
1177
1263
|
// src/components/ZodForm.tsx
|
|
1178
1264
|
function ZodForm({
|
|
@@ -1194,7 +1280,7 @@ function ZodForm({
|
|
|
1194
1280
|
title
|
|
1195
1281
|
}) {
|
|
1196
1282
|
const form = useZodForm(config);
|
|
1197
|
-
const [submissionState, setSubmissionState] =
|
|
1283
|
+
const [submissionState, setSubmissionState] = React16.useState({
|
|
1198
1284
|
error: void 0,
|
|
1199
1285
|
isSubmitted: false,
|
|
1200
1286
|
isSubmitting: false,
|
|
@@ -1251,12 +1337,12 @@ function ZodForm({
|
|
|
1251
1337
|
};
|
|
1252
1338
|
const renderFields = () => {
|
|
1253
1339
|
if (layout === "grid") {
|
|
1254
|
-
return /* @__PURE__ */
|
|
1340
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1255
1341
|
"div",
|
|
1256
1342
|
{
|
|
1257
1343
|
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"}`
|
|
1258
1344
|
},
|
|
1259
|
-
config.fields.map((field) => /* @__PURE__ */
|
|
1345
|
+
config.fields.map((field) => /* @__PURE__ */ React16.createElement(
|
|
1260
1346
|
FormField,
|
|
1261
1347
|
{
|
|
1262
1348
|
key: field.name,
|
|
@@ -1268,7 +1354,7 @@ function ZodForm({
|
|
|
1268
1354
|
);
|
|
1269
1355
|
}
|
|
1270
1356
|
if (layout === "horizontal") {
|
|
1271
|
-
return /* @__PURE__ */
|
|
1357
|
+
return /* @__PURE__ */ React16.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
|
|
1272
1358
|
FormField,
|
|
1273
1359
|
{
|
|
1274
1360
|
key: field.name,
|
|
@@ -1278,7 +1364,7 @@ function ZodForm({
|
|
|
1278
1364
|
}
|
|
1279
1365
|
)));
|
|
1280
1366
|
}
|
|
1281
|
-
return /* @__PURE__ */
|
|
1367
|
+
return /* @__PURE__ */ React16.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
|
|
1282
1368
|
FormField,
|
|
1283
1369
|
{
|
|
1284
1370
|
key: field.name,
|
|
@@ -1292,7 +1378,7 @@ function ZodForm({
|
|
|
1292
1378
|
e.preventDefault();
|
|
1293
1379
|
void handleSubmit();
|
|
1294
1380
|
};
|
|
1295
|
-
|
|
1381
|
+
React16.useEffect(() => {
|
|
1296
1382
|
if (config.onError && Object.keys(form.formState.errors).length > 0) {
|
|
1297
1383
|
config.onError(form.formState.errors);
|
|
1298
1384
|
}
|
|
@@ -1307,23 +1393,23 @@ function ZodForm({
|
|
|
1307
1393
|
values: form.getValues()
|
|
1308
1394
|
});
|
|
1309
1395
|
}
|
|
1310
|
-
return /* @__PURE__ */
|
|
1396
|
+
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(
|
|
1311
1397
|
"div",
|
|
1312
1398
|
{
|
|
1313
1399
|
className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
|
|
1314
1400
|
"data-testid": "success-message"
|
|
1315
1401
|
},
|
|
1316
|
-
/* @__PURE__ */
|
|
1317
|
-
/* @__PURE__ */
|
|
1318
|
-
), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */
|
|
1402
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
|
|
1403
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
|
|
1404
|
+
), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */ React16.createElement(
|
|
1319
1405
|
"div",
|
|
1320
1406
|
{
|
|
1321
1407
|
className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
|
|
1322
1408
|
"data-testid": "error-message"
|
|
1323
1409
|
},
|
|
1324
|
-
/* @__PURE__ */
|
|
1325
|
-
/* @__PURE__ */
|
|
1326
|
-
), renderFields(), /* @__PURE__ */
|
|
1410
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
|
|
1411
|
+
/* @__PURE__ */ React16.createElement("p", { className: "text-danger-700 text-sm mt-1" }, submissionState.error)
|
|
1412
|
+
), renderFields(), /* @__PURE__ */ React16.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React16.createElement(
|
|
1327
1413
|
Button3,
|
|
1328
1414
|
{
|
|
1329
1415
|
color: "primary",
|
|
@@ -1333,7 +1419,7 @@ function ZodForm({
|
|
|
1333
1419
|
...submitButtonProps
|
|
1334
1420
|
},
|
|
1335
1421
|
submitButtonText
|
|
1336
|
-
), showResetButton && /* @__PURE__ */
|
|
1422
|
+
), showResetButton && /* @__PURE__ */ React16.createElement(
|
|
1337
1423
|
Button3,
|
|
1338
1424
|
{
|
|
1339
1425
|
isDisabled: submissionState.isSubmitting,
|
|
@@ -1349,6 +1435,7 @@ export {
|
|
|
1349
1435
|
ConfigurableForm,
|
|
1350
1436
|
DateField,
|
|
1351
1437
|
FileField,
|
|
1438
|
+
FontPickerField,
|
|
1352
1439
|
FormField,
|
|
1353
1440
|
FormProvider,
|
|
1354
1441
|
HeroHookFormProvider,
|
|
@@ -1380,13 +1467,16 @@ export {
|
|
|
1380
1467
|
createRequiredCheckboxSchema,
|
|
1381
1468
|
createRequiredSchema,
|
|
1382
1469
|
createUrlSchema,
|
|
1470
|
+
createZodFormConfig,
|
|
1383
1471
|
getFieldError,
|
|
1384
1472
|
getFormErrors,
|
|
1385
1473
|
hasFieldError,
|
|
1386
1474
|
hasFormErrors,
|
|
1387
1475
|
simulateFieldInput,
|
|
1388
1476
|
simulateFormSubmission,
|
|
1477
|
+
useFormContext2 as useFormContext,
|
|
1389
1478
|
useFormHelper,
|
|
1479
|
+
useHeroForm,
|
|
1390
1480
|
useHeroHookFormDefaults,
|
|
1391
1481
|
useZodForm,
|
|
1392
1482
|
waitForFormState
|