remix-validated-form 4.6.4 → 4.6.6

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.
Files changed (59) hide show
  1. package/.turbo/turbo-build.log +12 -12
  2. package/.turbo/turbo-typecheck.log +1 -0
  3. package/README.md +10 -9
  4. package/browser/ValidatedForm.d.ts +3 -3
  5. package/browser/hooks.d.ts +1 -1
  6. package/browser/internal/formContext.d.ts +3 -3
  7. package/browser/internal/getInputProps.d.ts +7 -7
  8. package/browser/internal/hydratable.d.ts +1 -1
  9. package/browser/internal/state/createFormStore.d.ts +3 -3
  10. package/browser/internal/state/fieldArray.d.ts +5 -5
  11. package/browser/internal/state/types.d.ts +1 -1
  12. package/browser/server.d.ts +1 -1
  13. package/browser/unreleased/formStateHooks.d.ts +2 -2
  14. package/browser/userFacingFormContext.d.ts +1 -1
  15. package/browser/validation/types.d.ts +15 -15
  16. package/dist/index.cjs.js +1928 -0
  17. package/dist/index.cjs.js.map +1 -0
  18. package/dist/index.d.ts +337 -0
  19. package/dist/{remix-validated-form.es.js → index.esm.js} +573 -869
  20. package/dist/index.esm.js.map +1 -0
  21. package/package.json +14 -11
  22. package/src/ValidatedForm.tsx +19 -6
  23. package/src/hooks.ts +1 -1
  24. package/src/internal/formContext.ts +2 -2
  25. package/src/server.ts +1 -1
  26. package/stats.html +1 -1
  27. package/tsup.config.ts +3 -0
  28. package/dist/remix-validated-form.cjs.js +0 -27
  29. package/dist/remix-validated-form.cjs.js.map +0 -1
  30. package/dist/remix-validated-form.es.js.map +0 -1
  31. package/dist/remix-validated-form.umd.js +0 -27
  32. package/dist/remix-validated-form.umd.js.map +0 -1
  33. package/dist/types/ValidatedForm.d.ts +0 -50
  34. package/dist/types/hooks.d.ts +0 -67
  35. package/dist/types/index.d.ts +0 -7
  36. package/dist/types/internal/MultiValueMap.d.ts +0 -11
  37. package/dist/types/internal/constants.d.ts +0 -3
  38. package/dist/types/internal/flatten.d.ts +0 -1
  39. package/dist/types/internal/formContext.d.ts +0 -12
  40. package/dist/types/internal/getInputProps.d.ts +0 -29
  41. package/dist/types/internal/hooks.d.ts +0 -35
  42. package/dist/types/internal/hydratable.d.ts +0 -14
  43. package/dist/types/internal/logic/getCheckboxChecked.d.ts +0 -1
  44. package/dist/types/internal/logic/getRadioChecked.d.ts +0 -1
  45. package/dist/types/internal/logic/requestSubmit.d.ts +0 -5
  46. package/dist/types/internal/state/arrayUtil.d.ts +0 -12
  47. package/dist/types/internal/state/controlledFields.d.ts +0 -7
  48. package/dist/types/internal/state/createFormStore.d.ts +0 -79
  49. package/dist/types/internal/state/fieldArray.d.ts +0 -28
  50. package/dist/types/internal/state/storeHooks.d.ts +0 -3
  51. package/dist/types/internal/state/types.d.ts +0 -1
  52. package/dist/types/internal/submissionCallbacks.d.ts +0 -1
  53. package/dist/types/internal/util.d.ts +0 -5
  54. package/dist/types/server.d.ts +0 -21
  55. package/dist/types/unreleased/formStateHooks.d.ts +0 -64
  56. package/dist/types/userFacingFormContext.d.ts +0 -85
  57. package/dist/types/validation/createValidator.d.ts +0 -7
  58. package/dist/types/validation/types.d.ts +0 -58
  59. package/vite.config.ts +0 -7
@@ -1,17 +1,17 @@
1
1
  $ vite build
2
- vite v2.9.5 building for production...
2
+ vite v2.9.15 building for production...
3
3
  transforming...
4
- ✓ 289 modules transformed.
4
+ ✓ 291 modules transformed.
5
5
  rendering chunks...
6
- dist/remix-validated-form.cjs.js  32.65 KiB / gzip: 11.34 KiB
7
- dist/remix-validated-form.cjs.js.map 168.30 KiB
8
- dist/remix-validated-form.es.js  66.83 KiB / gzip: 15.64 KiB
9
- dist/remix-validated-form.es.js.map 165.89 KiB
10
- dist/remix-validated-form.umd.js  32.84 KiB / gzip: 11.42 KiB
11
- dist/remix-validated-form.umd.js.map 168.25 KiB
12
- 
13
- [vite:dts] Start generate declaration files...
14
- [vite:dts] Declaration files built in 2581ms.
15
- 
6
+ dist/remix-validated-form.cjs.js  32.76 KiB / gzip: 11.39 KiB
7
+ dist/remix-validated-form.cjs.js.map 168.68 KiB
8
+ dist/remix-validated-form.es.js  67.07 KiB / gzip: 15.71 KiB
9
+ dist/remix-validated-form.es.js.map 166.22 KiB
16
10
  No name was provided for external module 'react' in output.globals – guessing 'React'
17
11
  No name was provided for external module '@remix-run/react' in output.globals – guessing 'react'
12
+ dist/remix-validated-form.umd.js  32.95 KiB / gzip: 11.46 KiB
13
+ dist/remix-validated-form.umd.js.map 168.64 KiB
14
+ 
15
+ [vite:dts] Start generate declaration files...
16
+ [vite:dts] Declaration files built in 1834ms.
17
+ 
@@ -0,0 +1 @@
1
+ $ tsc --noEmit
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Remix Validated Form
2
2
 
3
- A form library built for [remix](https://remix.run) to make validation easy.
3
+ A form library built for [Remix](https://remix.run) to make validation easy.
4
4
 
5
5
  - Client-side, field-by-field and form-level validation
6
6
  - Re-use validation on the server
@@ -107,7 +107,8 @@ export const MySubmitButton = () => {
107
107
  Now that we have our components, making a form is easy!
108
108
 
109
109
  ```tsx
110
- import { ActionFunction, LoaderFunction, redirect, useLoaderData } from "remix";
110
+ import { DataFunctionArgs, json, redirect } from "@remix-run/node";
111
+ import { useLoaderData } from "@remix-run/react";
111
112
  import * as yup from "yup";
112
113
  import { validationError, ValidatedForm, withYup } from "remix-validated-form";
113
114
  import { MyInput, MySubmitButton } from "~/components/Input";
@@ -121,7 +122,7 @@ const validator = withYup(
121
122
  })
122
123
  );
123
124
 
124
- export const action: ActionFunction = async ({ request }) => {
125
+ export const action = async ({ request }: DataFunctionArgs) => {
125
126
  const fieldValues = await validator.validate(await request.formData());
126
127
  if (fieldValues.error) return validationError(fieldValues.error);
127
128
  const { firstName, lastName, email } = fieldValues.data;
@@ -131,18 +132,18 @@ export const action: ActionFunction = async ({ request }) => {
131
132
  return redirect("/");
132
133
  };
133
134
 
134
- export const loader: LoaderFunction = () => {
135
- return {
135
+ export const loader = async (args: DataFunctionArgs) => {
136
+ return json({
136
137
  defaultValues: {
137
138
  firstName: "Jane",
138
139
  lastName: "Doe",
139
140
  email: "jane.doe@example.com",
140
141
  },
141
- };
142
+ });
142
143
  };
143
144
 
144
145
  export default function MyForm() {
145
- const { defaultValues } = useLoaderData();
146
+ const { defaultValues } = useLoaderData<typeof loader>();
146
147
  return (
147
148
  <ValidatedForm
148
149
  validator={validator}
@@ -164,7 +165,7 @@ You can use nested objects and arrays by using a period (`.`) or brackets (`[]`)
164
165
 
165
166
  ```tsx
166
167
  export default function MyForm() {
167
- const { defaultValues } = useLoaderData();
168
+ const { defaultValues } = useLoaderData<typeof loader>();
168
169
  return (
169
170
  <ValidatedForm
170
171
  validator={validator}
@@ -257,7 +258,7 @@ We recommend this approach since the validation will still work even if JS is di
257
258
  ## How do we trigger toast messages on success?
258
259
 
259
260
  Problem: how do we trigger a toast message on success if the action redirects away from the form route? The Remix solution is to flash a message in the session and pick this up in a loader function, probably in root.tsx
260
- See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) documentation for more information.
261
+ See the [Remix](https://remix.run/docs/en/v1/utils/sessions#sessionflashkey-value) documentation for more information.
261
262
 
262
263
  ## Why is my cancel button triggering form submission?
263
264
 
@@ -1,7 +1,7 @@
1
- import { Form as RemixForm, useFetcher } from "@remix-run/react";
1
+ import { FetcherWithComponents, Form as RemixForm } from "@remix-run/react";
2
2
  import React, { ComponentProps } from "react";
3
3
  import { Validator } from "./validation/types";
4
- export declare type FormProps<DataType> = {
4
+ export type FormProps<DataType> = {
5
5
  /**
6
6
  * A `Validator` object that describes how to validate the form.
7
7
  */
@@ -16,7 +16,7 @@ export declare type FormProps<DataType> = {
16
16
  * The form will use the fetcher for loading states, action data, etc
17
17
  * instead of the default form action.
18
18
  */
19
- fetcher?: ReturnType<typeof useFetcher>;
19
+ fetcher?: FetcherWithComponents<any>;
20
20
  /**
21
21
  * Accepts an object of default values for the form
22
22
  * that will automatically be propagated to the form fields via `useField`.
@@ -13,7 +13,7 @@ export declare const useIsSubmitting: (formId?: string) => boolean;
13
13
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
14
14
  */
15
15
  export declare const useIsValid: (formId?: string) => boolean;
16
- export declare type FieldProps = {
16
+ export type FieldProps = {
17
17
  /**
18
18
  * The validation error message if there is one.
19
19
  */
@@ -1,12 +1,12 @@
1
1
  /// <reference types="react" />
2
- import { useFetcher } from "@remix-run/react";
3
- export declare type InternalFormContextValue = {
2
+ import { FetcherWithComponents } from "@remix-run/react";
3
+ export type InternalFormContextValue = {
4
4
  formId: string | symbol;
5
5
  action?: string;
6
6
  subaction?: string;
7
7
  defaultValuesProp?: {
8
8
  [fieldName: string]: any;
9
9
  };
10
- fetcher?: ReturnType<typeof useFetcher>;
10
+ fetcher?: FetcherWithComponents<unknown>;
11
11
  };
12
12
  export declare const InternalFormContext: import("react").Context<InternalFormContextValue | null>;
@@ -1,10 +1,10 @@
1
- export declare type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
2
- export declare type ValidationBehaviorOptions = {
1
+ export type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
2
+ export type ValidationBehaviorOptions = {
3
3
  initial: ValidationBehavior;
4
4
  whenTouched: ValidationBehavior;
5
5
  whenSubmitted: ValidationBehavior;
6
6
  };
7
- export declare type CreateGetInputPropsOptions = {
7
+ export type CreateGetInputPropsOptions = {
8
8
  clearError: () => void;
9
9
  validate: () => void;
10
10
  defaultValue?: any;
@@ -14,9 +14,9 @@ export declare type CreateGetInputPropsOptions = {
14
14
  validationBehavior?: Partial<ValidationBehaviorOptions>;
15
15
  name: string;
16
16
  };
17
- declare type HandledProps = "name" | "defaultValue" | "defaultChecked";
18
- declare type Callbacks = "onChange" | "onBlur";
19
- declare type MinimalInputProps = {
17
+ type HandledProps = "name" | "defaultValue" | "defaultChecked";
18
+ type Callbacks = "onChange" | "onBlur";
19
+ type MinimalInputProps = {
20
20
  onChange?: (...args: any[]) => void;
21
21
  onBlur?: (...args: any[]) => void;
22
22
  defaultValue?: any;
@@ -24,6 +24,6 @@ declare type MinimalInputProps = {
24
24
  name?: string;
25
25
  type?: string;
26
26
  };
27
- export declare type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
27
+ export type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
28
28
  export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
29
29
  export {};
@@ -3,7 +3,7 @@
3
3
  * around data that needs to come from the server initially,
4
4
  * but from the internal state after hydration.
5
5
  */
6
- export declare type Hydratable<T> = {
6
+ export type Hydratable<T> = {
7
7
  hydrateTo: (data: T) => T;
8
8
  map: <U>(fn: (data: T) => U) => Hydratable<U>;
9
9
  };
@@ -1,7 +1,7 @@
1
1
  import { WritableDraft } from "immer/dist/internal";
2
2
  import { FieldErrors, TouchedFields, ValidationResult, Validator } from "../../validation/types";
3
3
  import { InternalFormId } from "./types";
4
- export declare type SyncedFormProps = {
4
+ export type SyncedFormProps = {
5
5
  formId?: string;
6
6
  action?: string;
7
7
  subaction?: string;
@@ -11,7 +11,7 @@ export declare type SyncedFormProps = {
11
11
  registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
12
12
  validator: Validator<unknown>;
13
13
  };
14
- export declare type FormStoreState = {
14
+ export type FormStoreState = {
15
15
  forms: {
16
16
  [formId: InternalFormId]: FormState;
17
17
  };
@@ -19,7 +19,7 @@ export declare type FormStoreState = {
19
19
  registerForm: (formId: InternalFormId) => void;
20
20
  cleanupForm: (formId: InternalFormId) => void;
21
21
  };
22
- export declare type FormState = {
22
+ export type FormState = {
23
23
  isHydrated: boolean;
24
24
  isSubmitting: boolean;
25
25
  hasBeenSubmitted: boolean;
@@ -1,10 +1,10 @@
1
1
  import React from "react";
2
- export declare type FieldArrayValidationBehavior = "onChange" | "onSubmit";
3
- export declare type FieldArrayValidationBehaviorOptions = {
2
+ export type FieldArrayValidationBehavior = "onChange" | "onSubmit";
3
+ export type FieldArrayValidationBehaviorOptions = {
4
4
  initial: FieldArrayValidationBehavior;
5
5
  whenSubmitted: FieldArrayValidationBehavior;
6
6
  };
7
- export declare type FieldArrayHelpers<Item = any> = {
7
+ export type FieldArrayHelpers<Item = any> = {
8
8
  push: (item: Item) => void;
9
9
  swap: (indexA: number, indexB: number) => void;
10
10
  move: (from: number, to: number) => void;
@@ -14,12 +14,12 @@ export declare type FieldArrayHelpers<Item = any> = {
14
14
  pop: () => void;
15
15
  replace: (index: number, value: Item) => void;
16
16
  };
17
- export declare type UseFieldArrayOptions = {
17
+ export type UseFieldArrayOptions = {
18
18
  formId?: string;
19
19
  validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
20
20
  };
21
21
  export declare function useFieldArray<Item = any>(name: string, { formId, validationBehavior }?: UseFieldArrayOptions): [itemDefaults: Item[], helpers: FieldArrayHelpers<any>, error: string | undefined];
22
- export declare type FieldArrayProps = {
22
+ export type FieldArrayProps = {
23
23
  name: string;
24
24
  children: (itemDefaults: any[], helpers: FieldArrayHelpers, error: string | undefined) => React.ReactNode;
25
25
  formId?: string;
@@ -1 +1 @@
1
- export declare type InternalFormId = string | symbol;
1
+ export type InternalFormId = string | symbol;
@@ -15,7 +15,7 @@ import { ValidatorError, ValidationErrorResponseData } from "./validation/types"
15
15
  * ```
16
16
  */
17
17
  export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): import("@remix-run/server-runtime").TypedResponse<ValidationErrorResponseData>;
18
- export declare type FormDefaults = {
18
+ export type FormDefaults = {
19
19
  [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
20
20
  };
21
21
  export declare const setFormDefaults: <DataType = any>(formId: string, defaultValues: Partial<DataType>) => FormDefaults;
@@ -1,5 +1,5 @@
1
1
  import { FieldErrors, TouchedFields, ValidationResult } from "../validation/types";
2
- export declare type FormState = {
2
+ export type FormState = {
3
3
  fieldErrors: FieldErrors;
4
4
  isSubmitting: boolean;
5
5
  hasBeenSubmitted: boolean;
@@ -17,7 +17,7 @@ export declare type FormState = {
17
17
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
18
18
  */
19
19
  export declare const useFormState: (formId?: string) => FormState;
20
- export declare type FormHelpers = {
20
+ export type FormHelpers = {
21
21
  /**
22
22
  * Clear the error of the specified field.
23
23
  */
@@ -1,5 +1,5 @@
1
1
  import { FieldErrors, TouchedFields, ValidationResult } from "./validation/types";
2
- export declare type FormContextValue = {
2
+ export type FormContextValue = {
3
3
  /**
4
4
  * All the errors in all the fields in the form.
5
5
  */
@@ -1,58 +1,58 @@
1
- export declare type FieldErrors = Record<string, string>;
2
- export declare type TouchedFields = Record<string, boolean>;
3
- export declare type GenericObject = {
1
+ export type FieldErrors = Record<string, string>;
2
+ export type TouchedFields = Record<string, boolean>;
3
+ export type GenericObject = {
4
4
  [key: string]: any;
5
5
  };
6
- export declare type ValidatorError = {
6
+ export type ValidatorError = {
7
7
  subaction?: string;
8
8
  formId?: string;
9
9
  fieldErrors: FieldErrors;
10
10
  };
11
- export declare type ValidationErrorResponseData = {
11
+ export type ValidationErrorResponseData = {
12
12
  subaction?: string;
13
13
  formId?: string;
14
14
  fieldErrors: FieldErrors;
15
15
  repopulateFields?: unknown;
16
16
  };
17
- export declare type BaseResult = {
17
+ export type BaseResult = {
18
18
  submittedData: GenericObject;
19
19
  formId?: string;
20
20
  };
21
- export declare type ErrorResult = BaseResult & {
21
+ export type ErrorResult = BaseResult & {
22
22
  error: ValidatorError;
23
23
  data: undefined;
24
24
  };
25
- export declare type SuccessResult<DataType> = BaseResult & {
25
+ export type SuccessResult<DataType> = BaseResult & {
26
26
  data: DataType;
27
27
  error: undefined;
28
28
  };
29
29
  /**
30
30
  * The result when validating a form.
31
31
  */
32
- export declare type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
32
+ export type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
33
33
  /**
34
34
  * The result when validating an individual field in a form.
35
35
  */
36
- export declare type ValidateFieldResult = {
36
+ export type ValidateFieldResult = {
37
37
  error?: string;
38
38
  };
39
39
  /**
40
40
  * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
41
41
  */
42
- export declare type Validator<DataType> = {
42
+ export type Validator<DataType> = {
43
43
  validate: (unvalidatedData: GenericObject) => Promise<ValidationResult<DataType>>;
44
44
  validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
45
45
  };
46
- export declare type Valid<DataType> = {
46
+ export type Valid<DataType> = {
47
47
  data: DataType;
48
48
  error: undefined;
49
49
  };
50
- export declare type Invalid = {
50
+ export type Invalid = {
51
51
  error: FieldErrors;
52
52
  data: undefined;
53
53
  };
54
- export declare type CreateValidatorArg<DataType> = {
54
+ export type CreateValidatorArg<DataType> = {
55
55
  validate: (unvalidatedData: GenericObject) => Promise<Valid<DataType> | Invalid>;
56
56
  validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
57
57
  };
58
- export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;
58
+ export type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;