@paragrav/rhf-utils 0.0.147 → 0.59.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/README.md +273 -118
- package/dist/dts/Register.d.ts +16 -0
- package/dist/dts/_exports/config.d.ts +2 -0
- package/dist/dts/_exports/errors.d.ts +3 -0
- package/dist/dts/_exports/form.d.ts +7 -0
- package/dist/dts/_exports/index.d.ts +13 -0
- package/dist/dts/_exports/relay.d.ts +8 -0
- package/dist/dts/_exports/submit.d.ts +4 -0
- package/dist/dts/_exports/trpc.d.ts +2 -0
- package/dist/dts/_exports/types.d.ts +7 -0
- package/dist/dts/_exports/zod.d.ts +6 -0
- package/dist/dts/client/config/RhfUtilsClientConfigType.d.ts +63 -0
- package/dist/dts/client/config/context/RhfUtilsClientConfigContext.d.ts +3 -0
- package/dist/dts/client/config/context/RhfUtilsClientConfigProvider.d.ts +7 -0
- package/dist/dts/client/config/context/useRhfUtilsClientConfig.d.ts +1 -0
- package/dist/{types → dts}/devtool/LazyDevTool.d.ts +3 -4
- package/dist/dts/devtool/LazyDevToolViaProviders.d.ts +1 -0
- package/dist/{types → dts}/errors/flat/FlatFieldErrorsList.d.ts +2 -2
- package/dist/{types → dts}/errors/flat/context/FlatFieldErrorsContextProvider.d.ts +3 -3
- package/dist/{types → dts}/errors/flat/context/useFlatFieldErrorsContext.d.ts +1 -2
- package/dist/dts/errors/flat/context/useFlatFieldErrorsContextHasOnlyOrphans.d.ts +6 -0
- package/dist/{types → dts}/errors/flat/context/useFlatFieldErrorsContextOutput.d.ts +1 -2
- package/dist/dts/errors/flat/filterFlatFieldErrors.d.ts +7 -0
- package/dist/{types → dts}/errors/flat/flattenFieldErrors.d.ts +1 -2
- package/dist/{types → dts}/errors/flat/getFlatFieldErrors.d.ts +2 -1
- package/dist/dts/errors/getRefdFromFlatFieldErrors.d.ts +1 -0
- package/dist/{types → dts}/errors/isFieldErrorRefd.d.ts +1 -2
- package/dist/dts/errors/isFlatFieldErrorEntryRefd.d.ts +5 -0
- package/dist/{types → dts}/errors/message/FormErrorMessage.d.ts +2 -2
- package/dist/{types → dts}/errors/message/RhfUtilsFieldErrorMessage.d.ts +2 -2
- package/dist/{types → dts}/errors/nonfield/RhfUtilsNonFieldErrorMarker.d.ts +2 -2
- package/dist/dts/errors/nonfield/RhfUtilsNonFieldErrorMarkerHtmlAttribute.d.ts +4 -0
- package/dist/{types → dts}/errors/nonfield/isNonFieldError.d.ts +1 -2
- package/dist/dts/errors/nonfield/isNonFieldErrorMarkerInDOM.d.ts +5 -0
- package/dist/dts/errors/orphan/getIsOrphanFormErrorWithParentElement.d.ts +5 -0
- package/dist/dts/errors/orphan/getOrphansFromFlatFieldErrors.d.ts +2 -0
- package/dist/dts/errors/orphan/isOrphanFormError.d.ts +2 -0
- package/dist/dts/errors/output/consoleErrors.d.ts +5 -0
- package/dist/dts/errors/root/RootErrorsListFromFlatFieldErrorsContext.d.ts +1 -0
- package/dist/dts/errors/root/getRootsFromFlatFieldErrors.d.ts +1 -0
- package/dist/{types → dts}/errors/root/isFlatFieldErrorEntryPathRoot.d.ts +1 -2
- package/dist/{types → dts}/errors/root/isFormErrorPathRoot.d.ts +1 -2
- package/dist/{types → dts}/errors/trpc/makeOnSubmitTrpcClientErrorHandler.d.ts +2 -3
- package/dist/dts/errors/trpc/trpcClientErrorMessageSchema.d.ts +19 -0
- package/dist/dts/errors/trpc/trpcClientErrorToFormSubmitFieldErrorsSchemaTransformer.d.ts +23 -0
- package/dist/dts/form/RHF_UseFormReturnWithoutProxiesType.d.ts +15 -0
- package/dist/dts/form/RhfUtilsFormComponentPropsType.d.ts +17 -0
- package/dist/dts/form/RhfUtilsFormStateWithUtilsType.d.ts +7 -0
- package/dist/dts/form/UseRhfUtilsFormChildrenPropsType.d.ts +25 -0
- package/dist/dts/form/_Controller.d.ts +4 -0
- package/dist/dts/form/context/utils/RhfUtilsContextPropsType.d.ts +11 -0
- package/dist/dts/form/context/utils/RhfUtilsContextProvider.d.ts +9 -0
- package/dist/dts/form/context/utils/useRhfUtilsContext.d.ts +5 -0
- package/dist/dts/form/context/utils/useRhfUtilsContextRequestSubmit.d.ts +4 -0
- package/dist/dts/form/defaults/UseRhfUtilsFormGlobalDefaults.d.ts +24 -0
- package/dist/dts/form/defaults/UseRhfUtilsFormInstanceDefaults.d.ts +18 -0
- package/dist/dts/form/defaults/UseRhfUtilsFormResolvedDefaultsType.d.ts +12 -0
- package/dist/dts/form/defaults/form/UseRhfUtilsFormInstanceFormProps.d.ts +6 -0
- package/dist/dts/form/defaults/form/getRhfUtilsFormResolvedFormProps.d.ts +2 -0
- package/dist/dts/form/defaults/form/useRhfUtilsFormResolvedFormProps.d.ts +293 -0
- package/dist/{types/form/RhfUtilsFormOptions.d.ts → dts/form/options/RhfUtilsFormOptionsType.d.ts} +6 -7
- package/dist/dts/form/options/getRhfUtilsFormResolvedOptions.d.ts +2 -0
- package/dist/dts/form/options/useRhfUtilsFormResolvedOptions.d.ts +8 -0
- package/dist/dts/form/providers/RhfUtilsFormProviders.d.ts +6 -0
- package/dist/dts/form/providers/RhfUtilsFormProvidersPropsType.d.ts +15 -0
- package/dist/dts/form/rhf/UseFormPropsType.d.ts +4 -0
- package/dist/dts/form/rhf/getRhfUtilsFormResolvedRhfProps.d.ts +4 -0
- package/dist/dts/form/rhf/useRhfFormWithResolvedProps.d.ts +5 -0
- package/dist/dts/form/state/relay/FormStateRelayContextProvider.d.ts +4 -0
- package/dist/dts/form/state/relay/FormStateRelayedAggregatedType.d.ts +10 -0
- package/dist/dts/form/state/relay/FormStateRelayedItemType.d.ts +11 -0
- package/dist/dts/form/state/relay/FormStateRelayedOptionsType.d.ts +20 -0
- package/dist/dts/form/state/relay/FormStateRelayedType.d.ts +3 -0
- package/dist/dts/form/state/relay/pull/hooks.d.ts +31 -0
- package/dist/dts/form/state/relay/push/FormStateRelayPusher.d.ts +4 -0
- package/dist/dts/form/state/relay/push/useFormStateRelayPusher.d.ts +3 -0
- package/dist/dts/form/state/relay/useFormStateRelayContext.d.ts +20 -0
- package/dist/dts/form/state/relay/utils.d.ts +4 -0
- package/dist/dts/form/utils/getSubmitterButtonData.d.ts +6 -0
- package/dist/{types → dts}/form/utils/useFormRequestSubmit.d.ts +1 -2
- package/dist/dts/form/utils/useHandleCancelWithCheckIfCanBe.d.ts +4 -0
- package/dist/dts/form/utils/useHandleCancelWithCheckIfCanBeViaProviders.d.ts +2 -0
- package/dist/{types → dts}/form/utils/useShouldFormBlockNavigation.d.ts +1 -2
- package/dist/dts/form/with-handlers-and-children/RhfUtilsForm.d.ts +3 -0
- package/dist/dts/form/with-handlers-and-children/RhfUtilsFormProps.d.ts +46 -0
- package/dist/dts/form/with-handlers-and-children/_ChildrenViaProviders.d.ts +3 -0
- package/dist/dts/form/with-handlers-and-children/_FormWithSubmitHandler.d.ts +4 -0
- package/dist/dts/form/with-handlers-and-children/_useHandleSubmit.d.ts +11 -0
- package/dist/dts/form/with-providers/RhfUtilsFormWithProviders.d.ts +8 -0
- package/dist/dts/form/with-providers/RhfUtilsFormWithProvidersProps.d.ts +4 -0
- package/dist/dts/resolvers/ObjectSchema.d.ts +7 -0
- package/dist/dts/resolvers/zod/RhfUtilsUseZodFormChildrenFCType.d.ts +7 -0
- package/dist/dts/resolvers/zod/RhfUtilsUseZodFormChildrenPropsType.d.ts +4 -0
- package/dist/dts/resolvers/zod/ZodTypeSafeFieldValuesType.d.ts +5 -0
- package/dist/dts/resolvers/zod/consts.d.ts +4 -0
- package/dist/dts/resolvers/zod/form/RhfUtilsZodForm.d.ts +7 -0
- package/dist/dts/resolvers/zod/getZodResolver.d.ts +4 -0
- package/dist/dts/resolvers/zod/providers/RhfUtilsZodFormProviders.d.ts +8 -0
- package/dist/dts/resolvers/zod/with-providers/RhfUtilsZodFormWithProviders.d.ts +10 -0
- package/dist/dts/submit/UseRhfUtilsFormOnSubmitContextType.d.ts +23 -0
- package/dist/dts/submit/error/FormSubmitError.d.ts +6 -0
- package/dist/{types → dts}/submit/error/FormSubmitFieldErrors.d.ts +1 -1
- package/dist/dts/submit/error/setCtxErrorsByFormSubmitFieldErrors.d.ts +8 -0
- package/dist/dts/submit/last-error/LastSubmitErrorContextProvider.d.ts +4 -0
- package/dist/dts/submit/last-error/LastSubmitErrorContextType.d.ts +8 -0
- package/dist/dts/submit/last-error/useLastSubmitError.d.ts +4 -0
- package/dist/dts/submit/last-error/useLastSubmitErrorContext.d.ts +3 -0
- package/dist/dts/submit/last-error/useLastSubmitErrorContextWith.d.ts +2 -0
- package/dist/{types → dts}/submit/useFormOnSubmitSuccessfulAndReset.d.ts +1 -2
- package/dist/dts/submit/useFormOnSubmitted.d.ts +4 -0
- package/dist/{types → dts}/submit/useResetFormOnSubmitted.d.ts +1 -2
- package/dist/dts/submit/useRhfUtilsFormOnSubmitContext.d.ts +3 -0
- package/dist/dts/submit/useSubmitFormOnChange.d.ts +15 -0
- package/dist/dts/submit/useSubmitFormOnEvent.d.ts +9 -0
- package/dist/dts/submit/useSubmitFormOnWatch.d.ts +14 -0
- package/dist/dts/utils/PassthroughChildren.d.ts +7 -0
- package/dist/{types → dts}/utils/createContext.d.ts +1 -2
- package/dist/dts/utils/fixedForwardRef.d.ts +5 -0
- package/dist/dts/utils/isEmptyObject.d.ts +1 -0
- package/dist/dts/utils/types.d.ts +3 -0
- package/dist/{types → dts}/utils/useImperativeForwardedRef.d.ts +1 -2
- package/dist/dts/utils/useIsFirstRender.d.ts +7 -0
- package/dist/dts/utils/useRefIfValueWasTrue.d.ts +2 -0
- package/dist/dts/utils/useToggle.d.ts +2 -0
- package/dist/dts/vite-env.d.ts +1 -0
- package/dist/esm/getFlatFieldErrors.mjs +55 -0
- package/dist/esm/index.mjs +503 -383
- package/dist/esm/relay.mjs +222 -0
- package/dist/esm/trpc.mjs +8 -9
- package/package.json +95 -23
- package/LICENSE.md +0 -21
- package/dist/esm/createContext.mjs +0 -16
- package/dist/esm/group.mjs +0 -74
- package/dist/esm/useFlatFieldErrorsContext.mjs +0 -10
- package/dist/esm/utils.mjs +0 -20
- package/dist/types/_exports/group.d.ts +0 -9
- package/dist/types/_exports/index.d.ts +0 -15
- package/dist/types/_exports/trpc.d.ts +0 -2
- package/dist/types/_exports/utils.d.ts +0 -1
- package/dist/types/client/config/RhfUtilsClientConfig.d.ts +0 -70
- package/dist/types/client/config/useRhfUtilsClientConfigContext.d.ts +0 -4
- package/dist/types/client/context.d.ts +0 -2
- package/dist/types/client/index.d.ts +0 -25
- package/dist/types/client/utils.d.ts +0 -12
- package/dist/types/client/zod/RhfUtilsUseFormChildrenZodFC.d.ts +0 -12
- package/dist/types/client/zod/RhfUtilsUseFormChildrenZodProps.d.ts +0 -4
- package/dist/types/client/zod/ZodTypeFieldValues.d.ts +0 -3
- package/dist/types/client/zod/consts.d.ts +0 -4
- package/dist/types/client/zod/context/RhfUtilsClientForZodContextProvider.d.ts +0 -7
- package/dist/types/client/zod/context/RhfUtilsZodForm.d.ts +0 -8
- package/dist/types/client/zod/context/useRhfUtilsClientForZodContext.d.ts +0 -5
- package/dist/types/client/zod/context/useRhfUtilsZodForm.d.ts +0 -7
- package/dist/types/client/zod/createRhfUtilsClientForZod.d.ts +0 -3
- package/dist/types/errors/flat/context/useFlatFieldErrorsContextHasOnlyOrphans.d.ts +0 -7
- package/dist/types/errors/flat/filterFlatFieldErrors.d.ts +0 -8
- package/dist/types/errors/getRefdFromFlatFieldErrors.d.ts +0 -2
- package/dist/types/errors/isFlatFieldErrorEntryRefd.d.ts +0 -6
- package/dist/types/errors/nonfield/RhfUtilsNonFieldErrorMarkerHtmlAttribute.d.ts +0 -5
- package/dist/types/errors/nonfield/isNonFieldErrorMarkerInDOM.d.ts +0 -6
- package/dist/types/errors/orphan/getIsOrphanFormErrorWithParentElement.d.ts +0 -6
- package/dist/types/errors/orphan/getOrphansFromFlatFieldErrors.d.ts +0 -3
- package/dist/types/errors/orphan/isOrphanFormError.d.ts +0 -3
- package/dist/types/errors/output/consoleErrors.d.ts +0 -6
- package/dist/types/errors/root/RootErrorsListFromFlatFieldErrorsContext.d.ts +0 -2
- package/dist/types/errors/root/getRootsFromFlatFieldErrors.d.ts +0 -2
- package/dist/types/errors/trpc/trpcClientErrorMessageSchema.d.ts +0 -23
- package/dist/types/errors/trpc/trpcClientErrorToFormSubmitFieldErrorsSchemaTransformer.d.ts +0 -27
- package/dist/types/form/Form.d.ts +0 -10
- package/dist/types/form/FormWithProviders.d.ts +0 -12
- package/dist/types/form/RhfUtilsFormProviders.d.ts +0 -11
- package/dist/types/form/UseRhfUtilsFormChildrenProps.d.ts +0 -19
- package/dist/types/form/UseRhfUtilsFormOnSubmitContext.d.ts +0 -28
- package/dist/types/form/UseRhfUtilsFormProps.d.ts +0 -22
- package/dist/types/form/UseRhfUtilsFormReturn.d.ts +0 -19
- package/dist/types/form/_Controller.d.ts +0 -5
- package/dist/types/form/context/group/FormGroupContextProvider.d.ts +0 -4
- package/dist/types/form/context/group/index.d.ts +0 -14
- package/dist/types/form/context/group/useFormGroupChildIsMountedTracker.d.ts +0 -5
- package/dist/types/form/context/group/useFormGroupChildIsSubmittingTracker.d.ts +0 -5
- package/dist/types/form/context/group/useFormGroupChildTracker.d.ts +0 -6
- package/dist/types/form/context/group/useFormGroupIsAnyBusy.d.ts +0 -2
- package/dist/types/form/context/group/useFormGroupIsChildBusy.d.ts +0 -2
- package/dist/types/form/context/group/useFormGroupIsParentBusy.d.ts +0 -2
- package/dist/types/form/context/group/useFormGroupParentTracker.d.ts +0 -7
- package/dist/types/form/context/group/useFormOrParentIsBusy.d.ts +0 -2
- package/dist/types/form/context/utils/RhfUtilsContextProvider.d.ts +0 -8
- package/dist/types/form/context/utils/useRhfUtilsContext.d.ts +0 -13
- package/dist/types/form/context/utils/useRhfUtilsContextRequestSubmit.d.ts +0 -5
- package/dist/types/form/useFormIsBusy.d.ts +0 -2
- package/dist/types/form/useRhfUtilsForm.d.ts +0 -15
- package/dist/types/form/utils/getSubmitterButtonData.d.ts +0 -7
- package/dist/types/register.d.ts +0 -7
- package/dist/types/submit/error/FormSubmitError.d.ts +0 -6
- package/dist/types/submit/error/setCtxErrorsByFormSubmitFieldErrors.d.ts +0 -9
- package/dist/types/submit/useFormOnSubmitted.d.ts +0 -5
- package/dist/types/submit/useSubmitFormOnChange.d.ts +0 -8
- package/dist/types/utils/PassthroughChildren.d.ts +0 -7
- package/dist/types/utils/fixedForwardRef.d.ts +0 -6
- package/dist/types/utils/isEmptyObject.d.ts +0 -2
- package/dist/types/utils/types.d.ts +0 -1
- package/dist/types/utils/useRefIfValueWasTrue.d.ts +0 -2
- package/dist/types/utils/useThrowAsyncError.d.ts +0 -5
- package/dist/types/utils/useToggle.d.ts +0 -3
- /package/dist/{types → dts}/errors/flat/context/FlatFieldErrorsOutputConfig.d.ts +0 -0
- /package/dist/{types → dts}/errors/flat/types.d.ts +0 -0
- /package/dist/{types → dts}/errors/nonfield/RhfUtilsNonFieldErrorMarker.spec.d.ts +0 -0
- /package/dist/{types → dts}/errors/nonfield/RhfUtilsNonFieldErrorMarker.utils.d.ts +0 -0
- /package/dist/{types → dts}/errors/output/types.d.ts +0 -0
- /package/dist/{types → dts}/errors/root/consts.d.ts +0 -0
- /package/dist/{types/form/SafeFieldValues.d.ts → dts/form/rhf/SafeFieldValuesType.d.ts} +0 -0
- /package/dist/{types → dts}/main.d.ts +0 -0
- /package/dist/{types → dts}/utils/timeoutAsync.d.ts +0 -0
- /package/dist/{types → dts}/utils/useDebouncedOnChangeValue.d.ts +0 -0
package/README.md
CHANGED
|
@@ -7,46 +7,51 @@ Integration and utility library for [react-hook-form](https://www.react-hook-for
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
9
|
- TypeScript-first
|
|
10
|
-
- global configuration (`RhfUtilsClientConfig`)
|
|
10
|
+
- global configuration (🔗 [`RhfUtilsClientConfig`](#config) section)
|
|
11
11
|
- RHF (`UseFormProps`) and utilities (`RhfUtilsFormOptions`) options defaults
|
|
12
|
-
- inject your own hooks and UI (`
|
|
13
|
-
- server error transformation (`onSubmitErrorUnknown`)
|
|
14
|
-
-
|
|
15
|
-
-
|
|
12
|
+
- inject your own hooks and UI (`FormComponent`)
|
|
13
|
+
- server error transformation (`onSubmitErrorUnknown`) ✨
|
|
14
|
+
- handle cancel prompt (`useCanFormBeCancelled`) ✨
|
|
15
|
+
- RHF `FormState.errors` logging/throwing (`RhfUtilsClientConfig.fieldErrors`) ✨
|
|
16
|
+
- form-level configuration (🔗 [`RhfUtilsZodForm`](#form) section)
|
|
16
17
|
- RHF and utilities options overrides
|
|
17
18
|
- extendable utilities options type (`RhfUtilsFormOptions`)
|
|
18
19
|
- throw error (`FormSubmitError`) in submit handler to add errors to RHF context and fail submit
|
|
19
|
-
- handle submit error (`onSubmitError`)
|
|
20
|
-
-
|
|
20
|
+
- handle submit error (`onSubmitError` / `useLastSubmitError`)
|
|
21
|
+
- context injection for children (`RhfUtilsZodForm.Children`), including:
|
|
21
22
|
- formId, formRef, RHF context, utilities options
|
|
22
23
|
- schema-typed Controller component and FormSubmitError class
|
|
23
|
-
-
|
|
24
|
+
- form state relay (🔗 [`FormStateRelayContextProvider`](#form-state-relay) section) ✨
|
|
25
|
+
- access specific form's state from outside that form/provider
|
|
26
|
+
- assign forms into groups and watch collectively
|
|
27
|
+
- simpler/flatter `FieldErrors` structure (🔗 [`FlatFieldErrors`](#flatfielderrors) section)
|
|
28
|
+
- find orphans errors (🔗 [orphan errors](#orphan-errors) section) ✨
|
|
24
29
|
- context groups errors into `all`, `fields`, `roots`, and `orphans` (`useFlatFieldErrorsContext`)
|
|
25
|
-
- safer `FieldValues` type (`SafeFieldValues`)
|
|
30
|
+
- safer `FieldValues` type (🔗 [`SafeFieldValues`](#safefieldvalues) section)
|
|
26
31
|
- `zod` support, including input/output types for transformations
|
|
27
|
-
- ~
|
|
32
|
+
- ~2.8kB min+gzip core (excluding [peer dependencies](#peer-dependencies))
|
|
28
33
|
|
|
29
34
|
## Install
|
|
30
35
|
|
|
31
36
|
```sh
|
|
32
37
|
npm install @paragrav/rhf-utils # npm
|
|
33
|
-
pnpm
|
|
38
|
+
pnpm add @paragrav/rhf-utils # pnpm
|
|
34
39
|
yarn add @paragrav/rhf-utils # yarn
|
|
35
40
|
```
|
|
36
41
|
|
|
37
42
|
## Quick Start
|
|
38
43
|
|
|
39
44
|
- 🔗 [Config](#config) (`RhfUtilsClientConfig`): define your global config (optional)
|
|
40
|
-
- 🔗 [Provider](#provider) (`
|
|
41
|
-
- 🔗 [Form](#form) (`
|
|
45
|
+
- 🔗 [Provider](#config-provider) (`RhfUtilsClientConfigProvider`): add to your global stack
|
|
46
|
+
- 🔗 [Form With Providers](#form-with-providers) (`RhfUtilsZodFormWithProviders`): use as form component
|
|
47
|
+
- 🔗 [Form State Relay](#form-state-relay) (`FormStateRelayContextProvider`): relay form state
|
|
42
48
|
|
|
43
49
|
## Config
|
|
44
50
|
|
|
45
|
-
Create a config (`RhfUtilsClientConfig`) object with desired global config and default options. Config applies across all forms, and defaults can be overridden per form.
|
|
51
|
+
Create a config (`RhfUtilsClientConfig`) object with desired **global** config and default options. Config applies across all forms, and defaults can be overridden per form.
|
|
46
52
|
|
|
47
53
|
```tsx
|
|
48
54
|
export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
49
|
-
// overridable at individual form level
|
|
50
55
|
defaults: {
|
|
51
56
|
// globally-relevant subset of RHF's `UseFormProps` options
|
|
52
57
|
rhf: {
|
|
@@ -66,17 +71,16 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
66
71
|
},
|
|
67
72
|
},
|
|
68
73
|
|
|
69
|
-
// optional form component (defaults to primitive HTML form)
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
FormChildrenWrapper: (
|
|
75
|
-
// UseRhfUtilsFormChildrenProps
|
|
74
|
+
// optional form component to use (defaults to primitive HTML form)
|
|
75
|
+
// also, is used to inject your own hooks and components
|
|
76
|
+
// for all RhfUtilsZodForm instances
|
|
77
|
+
FormComponent: (
|
|
78
|
+
// RhfUtilsFormComponentProps
|
|
76
79
|
{
|
|
80
|
+
formProps, // computed form props
|
|
77
81
|
formId, // unique id string
|
|
78
82
|
formRef, // ref
|
|
79
|
-
context, // rhf UseFormReturn
|
|
83
|
+
context, // rhf UseFormReturn (without proxy `formState`)
|
|
80
84
|
options, // RhfUtilsFormOptions (with any custom props)
|
|
81
85
|
Controller, // rhf controller (SafeFieldValues-typed; no schema at this level)
|
|
82
86
|
FormSubmitError, // error class (SafeFieldValues-typed; no schema at this level)
|
|
@@ -92,16 +96,31 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
92
96
|
});
|
|
93
97
|
|
|
94
98
|
return (
|
|
95
|
-
|
|
99
|
+
<Form.Root {...formProps} ref={formRef}>
|
|
96
100
|
{/* RhfUtilsZodForm.Children "outlet" (see "Component Hierarchy" section) */}
|
|
97
101
|
{children}
|
|
98
102
|
|
|
99
103
|
{/* root errors list */}
|
|
100
104
|
<RootErrorsList />
|
|
101
|
-
|
|
105
|
+
</Form.Root>
|
|
102
106
|
);
|
|
103
107
|
},
|
|
104
108
|
|
|
109
|
+
// hook that returns callback to determine whether form can be cancelled
|
|
110
|
+
// if `true`, `RhfUtilsZodForm.onCancel` at form-level is called (e.g., parent component hides form)
|
|
111
|
+
// this allows you to handle non-navigational blocking/prompting
|
|
112
|
+
// NOTE: this library is router-agnostic, so navigation blocking should happen elsewhere
|
|
113
|
+
// (i.e., calling your own hook in `FormComponent`)
|
|
114
|
+
useCanFormBeCancelled: () => {
|
|
115
|
+
const { isDirty } = useFormState();
|
|
116
|
+
|
|
117
|
+
// return callback to be called at event-time
|
|
118
|
+
return ({ options }) =>
|
|
119
|
+
!options.enableMyPrompter || // my prompter option not enabled
|
|
120
|
+
!isDirty || // or rhf form state not dirty
|
|
121
|
+
confirm('Are you sure you want to cancel?'); // or user confirms
|
|
122
|
+
},
|
|
123
|
+
|
|
105
124
|
// non-FormSubmitError thrown in onSubmit
|
|
106
125
|
// use case: handle and transform server error data for frontend
|
|
107
126
|
onSubmitErrorUnknown: (
|
|
@@ -134,113 +153,181 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
134
153
|
};
|
|
135
154
|
```
|
|
136
155
|
|
|
137
|
-
## Provider
|
|
156
|
+
## Config Provider
|
|
138
157
|
|
|
139
158
|
Add the context provider to your global provider stack.
|
|
140
159
|
|
|
141
160
|
```tsx
|
|
142
|
-
<
|
|
161
|
+
<RhfUtilsClientConfigProvider config={rhfUtilsClientConfig}>
|
|
143
162
|
{children}
|
|
144
|
-
</
|
|
163
|
+
</RhfUtilsClientConfigProvider>
|
|
145
164
|
```
|
|
146
165
|
|
|
147
|
-
|
|
166
|
+
## Form With Providers
|
|
148
167
|
|
|
149
|
-
|
|
168
|
+
Currently, only `zod` schemas are supported.
|
|
150
169
|
|
|
151
170
|
```tsx
|
|
152
|
-
<
|
|
153
|
-
schema={
|
|
154
|
-
|
|
155
|
-
|
|
171
|
+
<RhfUtilsZodFormWithProviders
|
|
172
|
+
schema={z.object({
|
|
173
|
+
email: z.string().min(1).email(),
|
|
174
|
+
password: z.string().min(1),
|
|
175
|
+
passwordConfirm: z.string().min(1),
|
|
176
|
+
})}
|
|
177
|
+
defaultValues={{ email: '', password: '', passwordConfirm: '' }}
|
|
178
|
+
getApiData={({ email, password }) => ({ email, password })}
|
|
179
|
+
// cancel handler (passed to `Children` below)
|
|
180
|
+
// execution routed through `RhfUtilsClientConfig.useCanFormBeCancelled`, if provided
|
|
181
|
+
onCancel={handleCancel}
|
|
182
|
+
// submit handlers
|
|
183
|
+
onBeforeSubmitInvariants={async (
|
|
184
|
+
{ input, output, api }, // schema input (form values), output; api data (via getApiData)
|
|
185
|
+
context, // UseRhfUtilsFormOnSubmitContext (id, ref, rhf context (without proxy formState), utils options, schema-typed FormSubmitError class)
|
|
186
|
+
event, // SubmitEvent
|
|
187
|
+
) => [
|
|
188
|
+
[
|
|
189
|
+
'passwordConfirm', // type safe
|
|
190
|
+
'Passwords must match.',
|
|
191
|
+
data.password === data.passwordConfirm,
|
|
192
|
+
],
|
|
193
|
+
]}
|
|
194
|
+
onBeforeSubmit={({ input, output, api }, context, event) => {
|
|
195
|
+
if (!isValid(input.email))
|
|
196
|
+
throw new context.FormSubmitError({
|
|
197
|
+
email: { message: 'Email is invalid.' },
|
|
198
|
+
});
|
|
156
199
|
}}
|
|
157
200
|
// submit handler
|
|
158
|
-
onSubmit={
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
) => {
|
|
163
|
-
await loginService(data);
|
|
164
|
-
props.onSuccess();
|
|
165
|
-
}}
|
|
201
|
+
onSubmit={({ input, output, api }, context, event) => registerService(api)}
|
|
202
|
+
onSubmitSuccess={(onSubmitResult, { input, output, api }, context, event) =>
|
|
203
|
+
navigate('/app/' + onSubmitResult.id)
|
|
204
|
+
}
|
|
166
205
|
// handle error declaratively (i.e., no throw/catch)
|
|
167
|
-
onSubmitError={({
|
|
168
|
-
error
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
206
|
+
onSubmitError={({ error, context, event }) => {
|
|
207
|
+
handleError(error);
|
|
208
|
+
}}
|
|
209
|
+
onSubmitFinally={() => {
|
|
210
|
+
setState();
|
|
211
|
+
}}
|
|
212
|
+
// form-specific options/overrides (merged with defaults)
|
|
213
|
+
rhf={{
|
|
214
|
+
mode: 'onBlur',
|
|
215
|
+
}}
|
|
216
|
+
utils={{
|
|
217
|
+
submitOnWatch: { debounce: 250 },
|
|
218
|
+
// custom option props
|
|
219
|
+
// (see "Extend RhfUtilsFormOptions" section)
|
|
220
|
+
enableMyOptionalFormHook: true,
|
|
173
221
|
}}
|
|
222
|
+
// surfaced form element attributes
|
|
223
|
+
id="my-form-id"
|
|
224
|
+
className="my-special-form-class" // merged with global defaults
|
|
225
|
+
// other form element attributes
|
|
226
|
+
form={{ noValidate: true }} // merged with global defaults
|
|
174
227
|
// fields
|
|
175
228
|
Children={({
|
|
176
229
|
// UseRhfUtilsFormChildrenProps
|
|
177
|
-
formId, // unique id string
|
|
230
|
+
formId, // unique id string (auto-gen if not supplied)
|
|
178
231
|
formRef, // ref
|
|
179
|
-
context, // rhf UseFormReturn
|
|
232
|
+
context, // rhf UseFormReturn (without proxy `formState`)
|
|
180
233
|
options, // RhfUtilsFormOptions
|
|
181
234
|
Controller, // schema-typed rhf controller
|
|
182
235
|
FormSubmitError, // schema-typed error class
|
|
236
|
+
onCancel, // wrapped cancel handler from above
|
|
183
237
|
}) => (
|
|
184
238
|
<>
|
|
185
239
|
<Controller
|
|
186
240
|
name="email" // schema-typed field name
|
|
187
241
|
render={({ field, formState: { isSubmitting } }) => (
|
|
188
|
-
<
|
|
189
|
-
|
|
190
|
-
|
|
242
|
+
<Stack>
|
|
243
|
+
<label>
|
|
244
|
+
Email
|
|
245
|
+
<input {...field} disabled={isSubmitting} />
|
|
246
|
+
</label>
|
|
247
|
+
|
|
191
248
|
<ErrorMessage path={field.name} />
|
|
192
|
-
</
|
|
249
|
+
</Stack>
|
|
193
250
|
)}
|
|
194
251
|
/>
|
|
195
252
|
|
|
253
|
+
<button type="button" onClick={onCancel}>
|
|
254
|
+
Cancel
|
|
255
|
+
</button>
|
|
196
256
|
<button type="submit">Login</button>
|
|
197
257
|
</>
|
|
198
258
|
)}
|
|
199
|
-
// form-specific options/overrides (merged with defaults)
|
|
200
|
-
rhf={{
|
|
201
|
-
mode: 'onBlur',
|
|
202
|
-
}}
|
|
203
|
-
utils={{
|
|
204
|
-
submitOnChange: true,
|
|
205
|
-
// custom option props
|
|
206
|
-
// (see "Extend RhfUtilsFormOptions" section)
|
|
207
|
-
enableMyOptionalFormHook: true,
|
|
208
|
-
}}
|
|
209
|
-
form={{
|
|
210
|
-
// class names are merged together with global defaults
|
|
211
|
-
className: 'my-special-form-class',
|
|
212
|
-
}}
|
|
213
259
|
/>
|
|
214
260
|
```
|
|
215
261
|
|
|
216
262
|
### Form Children
|
|
217
263
|
|
|
218
|
-
`Children` prop takes a component which is rendered as a child of the form (and, if supplied, of `RhfUtilsClientConfig.
|
|
264
|
+
`Children` prop takes a component which is rendered as a child of the form (and, if supplied, of `RhfUtilsClientConfig.FormComponent`). It receives `UseRhfUtilsFormChildrenProps` as props, including a type-safe `Controller` component.
|
|
219
265
|
|
|
220
|
-
If you prefer to define your `Children` component as standalone:
|
|
266
|
+
If you prefer to define your `Children` component as standalone, you will need to specify any dependencies as `props` (e.g., `onEvent` callback):
|
|
221
267
|
|
|
222
268
|
```tsx
|
|
223
|
-
const Children:
|
|
269
|
+
const Children: RhfUtilsUseZodFormChildrenFC<
|
|
270
|
+
typeof schema,
|
|
271
|
+
{ onEvent: () => void } // other props (if required)
|
|
272
|
+
> = ({ ... }) => {};
|
|
273
|
+
|
|
274
|
+
// or
|
|
224
275
|
|
|
225
|
-
function Children({...}:
|
|
276
|
+
function Children({ ... }: RhfUtilsUseZodFormChildrenProps<
|
|
277
|
+
typeof schema,
|
|
278
|
+
{ onEvent: () => void } // other props (if required)
|
|
279
|
+
>) {}
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
And pass other props manually, if applicable:
|
|
283
|
+
|
|
284
|
+
```tsx
|
|
285
|
+
<RhfUtilsZodFormWithProviders
|
|
286
|
+
Children={(rhfUtilsZodFormChildrenProps) => (
|
|
287
|
+
<Children
|
|
288
|
+
{...rhfUtilsZodFormChildrenProps}
|
|
289
|
+
props={{ onEvent: handleEvent }}
|
|
290
|
+
/>
|
|
291
|
+
)}
|
|
292
|
+
/>
|
|
226
293
|
```
|
|
227
294
|
|
|
228
295
|
## Form Component Hierarchy
|
|
229
296
|
|
|
230
|
-
`RhfUtilsZodForm` renders as:
|
|
297
|
+
For each form instance, `RhfUtilsZodForm` renders as the following:
|
|
231
298
|
|
|
232
299
|
```tsx
|
|
233
|
-
<ReactHookForm.FormProvider>
|
|
234
|
-
<RhfUtilsProviders>
|
|
235
|
-
<RhfUtilsClientConfig.FormComponent> // from global config (or
|
|
236
|
-
<
|
|
237
|
-
<RhfUtilsZodForm.Children /> // form instance component prop
|
|
238
|
-
</RhfUtilsClientConfig.FormChildrenWrapper>
|
|
300
|
+
<ReactHookForm.FormProvider> // standard rhf provider
|
|
301
|
+
<RhfUtilsProviders> // rhf utils internal providers
|
|
302
|
+
<RhfUtilsClientConfig.FormComponent> // from global config (or native form, if not provided)
|
|
303
|
+
<RhfUtilsZodForm.Children /> // form instance component prop
|
|
239
304
|
</RhfUtilsClientConfig.FormComponent>
|
|
240
305
|
<RhfUtilsProviders>
|
|
241
306
|
</ReactHookForm.FormProvider>
|
|
242
307
|
```
|
|
243
308
|
|
|
309
|
+
## De-couple Providers from Form
|
|
310
|
+
|
|
311
|
+
Sometimes you need to control the nesting of the Form element. For example, to appease HTML rules or expand the scope of the Provider.
|
|
312
|
+
|
|
313
|
+
```tsx
|
|
314
|
+
<aside>
|
|
315
|
+
<RhfUtilsZodFormProviders formId="my-form">
|
|
316
|
+
<main>
|
|
317
|
+
<RhfUtilsZodForm />
|
|
318
|
+
</main>
|
|
319
|
+
|
|
320
|
+
<footer>
|
|
321
|
+
<SubmitButton form="my-form">
|
|
322
|
+
|
|
323
|
+
<MyFormErrorsViaProviders>
|
|
324
|
+
</footer>
|
|
325
|
+
</RhfUtilsZodFormProviders>
|
|
326
|
+
</aside>
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
For similar pattern, especially across more than one form, see [Form State Relay](#form-state-relay) section.
|
|
330
|
+
|
|
244
331
|
## `FormSubmitError`
|
|
245
332
|
|
|
246
333
|
This is an `Error`-based class that you can use to throw a schema-typed error in your submit handler.
|
|
@@ -250,21 +337,23 @@ This is an `Error`-based class that you can use to throw a schema-typed error in
|
|
|
250
337
|
### Example
|
|
251
338
|
|
|
252
339
|
```tsx
|
|
253
|
-
<
|
|
254
|
-
|
|
255
|
-
if (
|
|
340
|
+
<RhfUtilsZodFormWithProviders
|
|
341
|
+
onBeforeSubmit={async ({ input, output, api }, { FormSubmitError }) => {
|
|
342
|
+
if (!isValid(data))
|
|
256
343
|
throw new FormSubmitError({
|
|
257
344
|
'street.address': { message: 'Street address invalid.' },
|
|
258
345
|
});
|
|
259
|
-
|
|
260
|
-
await post('/backend');
|
|
261
346
|
}}
|
|
262
347
|
/>
|
|
263
348
|
```
|
|
264
349
|
|
|
265
350
|
Any non-`FormSubmitError` error thrown from your submit handler (e.g., fetch/axios error) can be transformed by `RhfUtilsClientConfig`'s `onSubmitErrorUnknown` callback. This takes an `unknown` error and can return a `FormSubmitFieldErrors` object, which is merged into RHF's form state errors.
|
|
266
351
|
|
|
267
|
-
Most common use case will be transforming backend errors to frontend shape.
|
|
352
|
+
Most common use case will be transforming backend errors to frontend shape expected by RHF.
|
|
353
|
+
|
|
354
|
+
### Last Submit Error
|
|
355
|
+
|
|
356
|
+
Sometimes, perhaps outside any specific `FormContext`, you need direct access to the actual error object that was thrown, which caused the last submit to fail. The `useLastSubmitError` hook allows you to do just this. (You can probably handle most form-specific cases via `onSubmitErrorUnknown`, which receives error as well.)
|
|
268
357
|
|
|
269
358
|
## `RhfUtilsFormOptions`
|
|
270
359
|
|
|
@@ -275,12 +364,8 @@ type RhfUtilsFormOptions = {
|
|
|
275
364
|
/** Stop propagation of submit event. */
|
|
276
365
|
stopSubmitPropagation?: boolean;
|
|
277
366
|
|
|
278
|
-
/**
|
|
279
|
-
|
|
280
|
-
* - `true`: no debounce
|
|
281
|
-
* - number: milliseconds to debounce
|
|
282
|
-
*/
|
|
283
|
-
submitOnChange?: boolean | number;
|
|
367
|
+
/** Request submit on change. */
|
|
368
|
+
submitOnChange?: { debounce?: number };
|
|
284
369
|
|
|
285
370
|
/**
|
|
286
371
|
* Reset form values and state (e.g., isDirty, etc.) after submit -- on success and/or error.
|
|
@@ -311,7 +396,8 @@ import '@paragrav/rhf-utils';
|
|
|
311
396
|
declare module '@paragrav/rhf-utils' {
|
|
312
397
|
export interface Register {
|
|
313
398
|
RhfUtilsFormOptions: {
|
|
314
|
-
/** Custom props for your custom hooks/behaviors. */
|
|
399
|
+
/** Custom props for your custom options/hooks/behaviors. */
|
|
400
|
+
enableMyPrompter?: boolean;
|
|
315
401
|
enableMyOptionalFormHook?: boolean;
|
|
316
402
|
configMyOptionalFormHook?: MyCustomFormHookConfig;
|
|
317
403
|
};
|
|
@@ -319,6 +405,100 @@ declare module '@paragrav/rhf-utils' {
|
|
|
319
405
|
}
|
|
320
406
|
```
|
|
321
407
|
|
|
408
|
+
## <a id="form-state-relay" /> Form State Relay _(~1.2kB min+gzip)_
|
|
409
|
+
|
|
410
|
+
Sometimes you need to access one or more forms' state outside the form (and its providers).
|
|
411
|
+
|
|
412
|
+
### Single form state
|
|
413
|
+
|
|
414
|
+
Use case: display a form's errors (or any other state) outside form and its context.
|
|
415
|
+
|
|
416
|
+
```tsx
|
|
417
|
+
<FormStateRelayContextProvider> // relay provider
|
|
418
|
+
<ReactHookForm.FormProvider> // rhf provider
|
|
419
|
+
<FormStateRelayPusher /> // push form state
|
|
420
|
+
<ReactHookForm.FormProvider>
|
|
421
|
+
|
|
422
|
+
<WatchOutsideFormContext /> // watch form state
|
|
423
|
+
</FormStateRelayContextProvider>;
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
Push can be configured via `FormStateRelayPusher` component or `useFormStateRelayPush` hook with `FormStateRelayPushOptions` options.
|
|
427
|
+
|
|
428
|
+
```ts
|
|
429
|
+
type FormStateRelayPushOptions = {
|
|
430
|
+
group?: string | string[]; // assign group(s) to watch multiple forms in aggregate
|
|
431
|
+
flaggedState?: {
|
|
432
|
+
isMounted?: true; // flag form when mounted -- e.g., forms that are hidden by default
|
|
433
|
+
};
|
|
434
|
+
};
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
```tsx
|
|
438
|
+
function WatchOutsideFormContext() {
|
|
439
|
+
// FormStateWithUtils (either via RHF -- when requested within form context -- or relay when not)
|
|
440
|
+
const formState = useFormStateWithUtilsViaRhfOrRelay();
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
// when watching a single form, original RHF FormState with generally-typed SafeFieldValues
|
|
444
|
+
type FormStateRelayed = FormState<SafeFieldValues>;
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
The `useFormStateWithUtilsViaRhfOrRelay` hook uses `useFormStateRelayPullOnlyOrThrow` internally. It provides additional naivety when consumer doesn't know which context between RHF or Relay is present. (This is useful when building base components -- e.g., buttons -- which may exist outside of form context.)
|
|
448
|
+
|
|
449
|
+
### Multiple forms
|
|
450
|
+
|
|
451
|
+
Use cases:
|
|
452
|
+
|
|
453
|
+
- disable parent form when ANY child is "flagged" (i.e., dirty)
|
|
454
|
+
- disable ALL children when parent is "flagged" (i.e., submitting)
|
|
455
|
+
- confirm navigation when ANY mounted form is "flagged" (i.e., dirty)
|
|
456
|
+
|
|
457
|
+
```tsx
|
|
458
|
+
function ParentForm() {
|
|
459
|
+
const childrenFormState = useFormStateRelayWatchGroup('children'); // FormStateRelayedAggregated
|
|
460
|
+
|
|
461
|
+
return (
|
|
462
|
+
<ReactHookForm.FormProvider>
|
|
463
|
+
<FormStateRelayPusher formId="parent" /> // pusher
|
|
464
|
+
<input type="submit" disabled={childrenFormState.isDirty} />
|
|
465
|
+
</ReactHookForm.FormProvider>
|
|
466
|
+
);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
function ChildForm() {
|
|
470
|
+
const parentFormState = useFormStateRelayWatchId('parent'); // FormStateRelayed
|
|
471
|
+
|
|
472
|
+
return (
|
|
473
|
+
<ReactHookForm.FormProvider>
|
|
474
|
+
<FormStateRelayPusher group="children" /> // pusher
|
|
475
|
+
<input type="submit" disabled={parentFormState.isSubmitting} />
|
|
476
|
+
</ReactHookForm.FormProvider>
|
|
477
|
+
);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
type FormStateRelayedAggregated = FormStateRelayed & {
|
|
481
|
+
// object values reduced to booleans for non-empty-ness
|
|
482
|
+
dirtyFields: boolean;
|
|
483
|
+
touchedFields: boolean;
|
|
484
|
+
validatingFields: boolean;
|
|
485
|
+
error: boolean;
|
|
486
|
+
// composites
|
|
487
|
+
isSubmitUnsuccessful: boolean;
|
|
488
|
+
isMountedFlagged: boolean; // via RelayedFormOptions['flaggedState']['isMounted']
|
|
489
|
+
};
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
You can also aggregate any (i.e., all) forms via `useFormStateRelayPullAny`, which returns `FormStateRelayedAggregated` as well.
|
|
493
|
+
|
|
494
|
+
```tsx
|
|
495
|
+
<FormStateRelayContextProvider>
|
|
496
|
+
<ParentForm />
|
|
497
|
+
<ChildForm />
|
|
498
|
+
<Child2Form />
|
|
499
|
+
</FormStateRelayContextProvider>
|
|
500
|
+
```
|
|
501
|
+
|
|
322
502
|
## Field Errors
|
|
323
503
|
|
|
324
504
|
### FlatFieldErrors
|
|
@@ -386,32 +566,7 @@ _If you include the marker in bulk error lists, it will defeat the purpose of th
|
|
|
386
566
|
|
|
387
567
|
## Other Features
|
|
388
568
|
|
|
389
|
-
###
|
|
390
|
-
|
|
391
|
-
Sometimes you need to group multiple forms together.
|
|
392
|
-
|
|
393
|
-
Use case: disable parent form when any child is "busy"; disable all children when parent is "busy".
|
|
394
|
-
|
|
395
|
-
Use `FormGroupContextProvider` to wrap your children and parent forms.
|
|
396
|
-
|
|
397
|
-
```tsx
|
|
398
|
-
<FormGroupContextProvider>
|
|
399
|
-
<ChildForm1 />
|
|
400
|
-
<ChildForm2 />
|
|
401
|
-
<ParentForm />
|
|
402
|
-
</FormGroupContextProvider>
|
|
403
|
-
```
|
|
404
|
-
|
|
405
|
-
In your parent form, use the hook `useFormGroupParentTracker`, which returns `boolean` value indicating whether any child forms is busy.
|
|
406
|
-
|
|
407
|
-
In children forms, there are two options. You can choose to consider form "busy" when:
|
|
408
|
-
|
|
409
|
-
- `isSubmitting` is `true` by using `useFormGroupChildIsSubmittingTracker` hook
|
|
410
|
-
- it is mounted by using `useFormGroupChildIsMountedTracker` hook
|
|
411
|
-
|
|
412
|
-
Both hooks return `boolean` value indicating whether parent form is busy.
|
|
413
|
-
|
|
414
|
-
### TRPC.io Utils _(0.4kB min+gzip)_
|
|
569
|
+
### TRPC.io Utils _(0.41kB min+gzip)_
|
|
415
570
|
|
|
416
571
|
#### `trpcClientErrorToFormSubmitFieldErrorsSchemaTransformer`
|
|
417
572
|
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Use this to extend internal types.
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* ```ts
|
|
6
|
+
* declare module '@paragrav/rhf-utils' {
|
|
7
|
+
* export interface Register {
|
|
8
|
+
* RhfUtilsFormOptions: {
|
|
9
|
+
* myCustomOption?: boolean;
|
|
10
|
+
* };
|
|
11
|
+
* }
|
|
12
|
+
* }
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-empty-object-type
|
|
16
|
+
export interface Register {}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { useFlatFieldErrorsContext } from '../errors/flat/context/useFlatFieldErrorsContext';
|
|
2
|
+
export { useFlatFieldErrorsContextHasOnlyOrphans } from '../errors/flat/context/useFlatFieldErrorsContextHasOnlyOrphans';
|
|
3
|
+
export { RhfUtilsNonFieldErrorMarker } from '../errors/nonfield/RhfUtilsNonFieldErrorMarker';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { useRhfUtilsContext } from '../form/context/utils/useRhfUtilsContext';
|
|
2
|
+
export type { RhfUtilsFormOptions } from '../form/options/RhfUtilsFormOptionsType';
|
|
3
|
+
export type { SafeFieldValues } from '../form/rhf/SafeFieldValuesType';
|
|
4
|
+
export type { RHF_UseFormReturnWithoutProxies as UseFormReturnWithoutProxies } from '../form/RHF_UseFormReturnWithoutProxiesType';
|
|
5
|
+
export type { RhfUtilsFormComponentProps } from '../form/RhfUtilsFormComponentPropsType';
|
|
6
|
+
export type { UseRhfUtilsFormChildrenProps } from '../form/UseRhfUtilsFormChildrenPropsType';
|
|
7
|
+
export { useFormRequestSubmit } from '../form/utils/useFormRequestSubmit';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license @paragrav/rhf-utils
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2024-present paragrav.dev
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
export * from './config';
|
|
10
|
+
export * from './errors';
|
|
11
|
+
export * from './form';
|
|
12
|
+
export * from './submit';
|
|
13
|
+
export * from './zod';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { FormStateRelayContextProvider } from '../form/state/relay/FormStateRelayContextProvider';
|
|
2
|
+
export type { FormStateRelayedAggregated } from '../form/state/relay/FormStateRelayedAggregatedType';
|
|
3
|
+
export type { FormStateRelayedItemWithUtils } from '../form/state/relay/FormStateRelayedItemType';
|
|
4
|
+
export type { FormStateRelayedOptions } from '../form/state/relay/FormStateRelayedOptionsType';
|
|
5
|
+
export type { FormStateRelayed } from '../form/state/relay/FormStateRelayedType';
|
|
6
|
+
export { useFormStateRelayPullAny, useFormStateRelayPullById, useFormStateRelayPullGroup, useFormStateRelayPullOnlyOrThrow, useFormStateWithUtilsViaRhfOrRelay, } from '../form/state/relay/pull/hooks';
|
|
7
|
+
export { FormStateRelayPusher } from '../form/state/relay/push/FormStateRelayPusher';
|
|
8
|
+
export { useFormStateRelayPusher } from '../form/state/relay/push/useFormStateRelayPusher';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { FormSubmitError } from '../submit/error/FormSubmitError';
|
|
2
|
+
export type { FormSubmitFieldErrors } from '../submit/error/FormSubmitFieldErrors';
|
|
3
|
+
export { useLastSubmitError } from '../submit/last-error/useLastSubmitError';
|
|
4
|
+
export type { UseRhfUtilsFormOnSubmitContext, UseRhfUtilsFormOnSubmitErrorContext, } from '../submit/UseRhfUtilsFormOnSubmitContextType';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { RhfUtilsZodForm } from '../resolvers/zod/form/RhfUtilsZodForm';
|
|
2
|
+
export { RhfUtilsZodFormProviders } from '../resolvers/zod/providers/RhfUtilsZodFormProviders';
|
|
3
|
+
export { RhfUtilsZodFormWithProviders } from '../resolvers/zod/with-providers/RhfUtilsZodFormWithProviders';
|
|
4
|
+
export type { RhfUtilsUseZodFormChildrenFC } from '../resolvers/zod/RhfUtilsUseZodFormChildrenFCType';
|
|
5
|
+
export type { RhfUtilsUseZodFormChildrenProps } from '../resolvers/zod/RhfUtilsUseZodFormChildrenPropsType';
|
|
6
|
+
export type { ZodTypeSafeFieldValues } from '../resolvers/zod/ZodTypeSafeFieldValuesType';
|