remix-validated-form 0.0.4 → 1.1.1-beta.1

package/.eslintcache

@@ -1 +1 @@
-[{"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts":"1","/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts":"2","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts":"3","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx":"4"},{"size":207,"mtime":1637876506168,"results":"5","hashOfConfig":"6"},{"size":438,"mtime":1637877226360,"results":"7","hashOfConfig":"6"},{"size":1085,"mtime":1637877476573,"results":"8","hashOfConfig":"6"},{"size":1293,"mtime":1637876566355,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"12","messages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts",["18"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx",[],{"ruleId":"19","severity":1,"message":"20","line":2,"column":23,"nodeType":"21","messageId":"22","endLine":2,"endColumn":39},"@typescript-eslint/no-unused-vars","'ValidationResult' is defined but never used.","Identifier","unusedVar"]
+[{"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts":"1","/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts":"2","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts":"3","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx":"4","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx":"5","/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts":"6","/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts":"7","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts":"8","/Users/aaronpettengill/dev/remix-validated-form/src/index.ts":"9","/Users/aaronpettengill/dev/remix-validated-form/src/ValidatedForm.tsx":"10","/Users/aaronpettengill/dev/remix-validated-form/src/test-data/testFormData.ts":"11","/Users/aaronpettengill/dev/remix-validated-form/src/validation/createValidator.ts":"12","/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/$id.edit.tsx":"13","/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/new.tsx":"14","/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation.ts":"15","/Users/aaronpettengill/dev/remix-validated-form/src/internal/flatten.ts":"16","/Users/aaronpettengill/dev/remix-validated-form/src/hooks.ts":"17","/Users/aaronpettengill/dev/remix-validated-form/src/internal/formContext.ts":"18"},{"size":397,"mtime":1639369089430,"results":"19","hashOfConfig":"20"},{"size":703,"mtime":1639369496819,"results":"21","hashOfConfig":"20"},{"size":1247,"mtime":1639369392705,"results":"22","hashOfConfig":"20"},{"size":1491,"mtime":1639368189315,"results":"23","hashOfConfig":"20"},{"size":1287,"mtime":1639367237366,"results":"24","hashOfConfig":"20"},{"size":2220,"mtime":1637902736281,"results":"25","hashOfConfig":"26"},{"size":8822,"mtime":1639367825741,"results":"27","hashOfConfig":"20"},{"size":1712,"mtime":1639369411474,"results":"28","hashOfConfig":"20"},{"size":242,"mtime":1639368587278,"results":"29","hashOfConfig":"20"},{"size":4105,"mtime":1639369052724,"results":"30","hashOfConfig":"20"},{"size":1639,"mtime":1639366476728,"results":"31","hashOfConfig":"20"},{"size":975,"mtime":1639369381723,"results":"32","hashOfConfig":"20"},{"size":2458,"mtime":1639367225263,"results":"33","hashOfConfig":"20"},{"size":1199,"mtime":1639367241997,"results":"34","hashOfConfig":"20"},{"size":3541,"mtime":1639368136413,"results":"35","hashOfConfig":"20"},{"size":1638,"mtime":1639368636134,"results":"36","hashOfConfig":"20"},{"size":1605,"mtime":1639369330598,"results":"37","hashOfConfig":"20"},{"size":818,"mtime":1639369884523,"results":"38","hashOfConfig":"20"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1p84lfm",{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"55","messages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"57","messages":"58","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"59","messages":"60","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"61","messages":"62","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"63","messages":"64","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"65","messages":"66","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"67","messages":"68","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"69","messages":"70","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"71","messages":"72","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"73","messages":"74","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/index.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/ValidatedForm.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/src/test-data/testFormData.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/createValidator.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/$id.edit.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/new.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/internal/flatten.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/hooks.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/internal/formContext.ts",[]]

package/.prettierignore

@@ -3,6 +3,8 @@ build
 browser
 test-app/build
 test-app/remix-validated-form
+sample-app/build
+sample-app/remix-validated-form
 node_modules
 public
 package-lock.json

package/README.md

@@ -7,8 +7,25 @@ A form library built for [remix](https://remix.run) to make validation easy.
 - Re-use validation on the server
 - Show validation errors from the server even without JS
 - Detect if the current form is submitting when there are multiple forms on the page
+- Supports nested objects and arrays
 - Validation library agnostic
 
+# Demo
+
+https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
+
+To run `sample-app`:
+
+```
+git clone https://github.com/airjp73/remix-validated-form
+cd remix-validated-form
+npm i
+cd sample-app
+npm i
+cd ..
+npm run sample-app
+```
+
 # Getting started
 
 ## Install
@@ -53,7 +70,7 @@ export const MyInput = ({ name, label }: InputProps) => {
 To best take advantage of the per-form submission detection, we can create a submit button component.
 
 ```tsx
-import { useIsSubmitting } from "../../remix-validated-form";
+import { useIsSubmitting } from "remix-validated-form";
 
 export const MySubmitButton = () => {
   const isSubmitting = useIsSubmitting();
@@ -85,9 +102,7 @@ const validator = withYup(
 );
 
 export const action: ActionFunction = async ({ request }) => {
-  const fieldValues = validator.validate(
-    Object.fromEntries(await request.formData())
-  );
+  const fieldValues = validator.validate(await request.formData());
   if (fieldValues.error) return validationError(fieldValues.error);
   const { firstName, lastName, email } = fieldValues.data;
 
@@ -123,9 +138,36 @@ export default function MyForm() {
 }
 ```
 
+## Nested objects and arrays
+
+You can use nested objects and arrays by using a period (`.`) or brackets (`[]`) for the field names.
+
+```tsx
+export default function MyForm() {
+  const { defaultValues } = useLoaderData();
+  return (
+    <ValidatedForm
+      validator={validator}
+      method="post"
+      defaultValues={defaultValues}
+    >
+      <MyInput name="firstName" label="First Name" />
+      <MyInput name="lastName" label="Last Name" />
+      <MyInput name="address.street" label="Street" />
+      <MyInput name="address.city" label="City" />
+      <MyInput name="phones[0].type" label="Phone 1 Type" />
+      <MyInput name="phones[0].number" label="Phone 1 Number" />
+      <MyInput name="phones[1].type" label="Phone 2 Type" />
+      <MyInput name="phones[1].number" label="Phone 2 Number" />
+      <MySubmitButton />
+    </ValidatedForm>
+  );
+}
+```
+
 # Validation Library Support
 
-This lbirary currently includes an out-of-the-box adapter for `yup`,
+This library currently includes an out-of-the-box adapter for `yup` and `zod`,
 but you can easily support whatever library you want by creating your own adapter.
 
 And if you create an adapter for a library, feel free to make a PR on this library to add official support 😊
@@ -155,24 +197,39 @@ type Validator<DataType> = {
 In order to make an adapter for your validation library of choice,
 you can create a function that accepts a schema from the validation library and turns it into a validator.
 
+Note the use of `createValidator`.
+It takes care of unflattening the data for nested objects and arrays
+since the form doesn't know anything about object and arrays and this should be handled by the adapter.
+For more on this you can check the implementations for `withZod` and `withYup`.
+
 The out-of-the-box support for `yup` in this library works like this:
 
 ```ts
 export const withYup = <Schema extends AnyObjectSchema>(
   validationSchema: Schema
   // For best result with Typescript, we should type the `Validator` we return based on the provided schema
-): Validator<InferType<Schema>> => ({
-  validate: (unvalidatedData) => {
-    // Validate with yup and return the validated & typed data or the error
-
-    if (isValid) return { data: { field1: "someValue" }, error: undefined };
-    else return { error: { field1: "Some error!" }, data: undefined };
-  },
-  validateField: (unvalidatedData, field) => {
-    // Validate the specific field with yup
-
-    if (isValid) return { error: undefined };
-    else return { error: "Some error" };
-  },
-});
+): Validator<InferType<Schema>> =>
+  createValidator({
+    validate: (unvalidatedData) => {
+      // Validate with yup and return the validated & typed data or the error
+
+      if (isValid) return { data: { field1: "someValue" }, error: undefined };
+      else return { error: { field1: "Some error!" }, data: undefined };
+    },
+    validateField: (unvalidatedData, field) => {
+      // Validate the specific field with yup
+
+      if (isValid) return { error: undefined };
+      else return { error: "Some error" };
+    },
+  });
 ```
+
+# Frequenty Asked Questions
+
+## Why are my fields triggering the native HTML validations before `remix-validated-form` ones?
+
+This is happening because you or the library you are using is passing the `required` attribute to the fields.
+This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
+If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
+We recommend this approach since the validation will still work even if JS is disabled.

package/browser/ValidatedForm.d.ts

@@ -2,10 +2,32 @@ import { Form as RemixForm, useFetcher } from "@remix-run/react";
 import React, { ComponentProps } from "react";
 import { Validator } from "./validation/types";
 export declare type FormProps<DataType> = {
+    /**
+     * A `Validator` object that describes how to validate the form.
+     */
     validator: Validator<DataType>;
+    /**
+     * A submit callback that gets called when the form is submitted
+     * after all validations have been run.
+     */
     onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void;
+    /**
+     * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
+     * The form will use the fetcher for loading states, action data, etc
+     * instead of the default form action.
+     */
     fetcher?: ReturnType<typeof useFetcher>;
+    /**
+     * Accepts an object of default values for the form
+     * that will automatically be propagated to the form fields via `useField`.
+     */
     defaultValues?: Partial<DataType>;
+    /**
+     * A ref to the form element.
+     */
     formRef?: React.RefObject<HTMLFormElement>;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
+/**
+ * The primary form component of `remix-validated-form`.
+ */
 export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -21,9 +21,12 @@ const useIsSubmitting = (action, fetcher) => {
     return fetcher
         ? fetcher.state === "submitting"
         : pendingFormSubmit &&
-            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+            pendingFormSubmit.action === (action !== null && action !== void 0 ? action : actionForCurrentPage);
 };
-const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
+const getDataFromForm = (el) => new FormData(el);
+/**
+ * The primary form component of `remix-validated-form`.
+ */
 export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
     var _a;
     const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);

package/browser/flatten.d.ts

@@ -0,0 +1,4 @@
+import { GenericObject } from ".";
+export declare const objectFromPathEntries: (entries: [string, any][]) => {};
+/** Flatten an object so there are no nested objects or arrays */
+export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/browser/flatten.js

@@ -0,0 +1,35 @@
+// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
+import assign from "lodash/assign";
+import isArray from "lodash/isArray";
+import isObject from "lodash/isObject";
+import keys from "lodash/keys";
+import mapKeys from "lodash/mapKeys";
+import set from "lodash/set";
+import transform from "lodash/transform";
+export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, value), {});
+/** Flatten an object so there are no nested objects or arrays */
+export function flatten(obj, preserveEmpty = false) {
+    return transform(obj, function (result, value, key) {
+        if (isObject(value)) {
+            let flatMap = mapKeys(flatten(value, preserveEmpty), function (_mvalue, mkey) {
+                if (isArray(value)) {
+                    let index = mkey.indexOf(".");
+                    if (-1 !== index) {
+                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
+                    }
+                    return `${key}[${mkey}]`;
+                }
+                return `${key}.${mkey}`;
+            });
+            assign(result, flatMap);
+            // Preverve Empty arrays and objects
+            if (preserveEmpty && keys(flatMap).length === 0) {
+                result[key] = value;
+            }
+        }
+        else {
+            result[key] = value;
+        }
+        return result;
+    }, {});
+}

package/browser/hooks.d.ts

@@ -1,8 +1,33 @@
-export declare const useField: (name: string) => {
-    error: string;
+export declare type FieldProps = {
+    /**
+     * The validation error message if there is one.
+     */
+    error?: string;
+    /**
+     * Clears the error message.
+     */
     clearError: () => void;
+    /**
+     * Validates the field.
+     */
     validate: () => void;
-    defaultValue: any;
+    /**
+     * The default value of the field, if there is one.
+     */
+    defaultValue?: any;
 };
+/**
+ * Provides the data and helpers necessary to set up a field.
+ */
+export declare const useField: (name: string) => FieldProps;
+/**
+ * Provides access to the entire form context.
+ * This is not usually necessary, but can be useful for advanced use cases.
+ */
 export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
+/**
+ * Returns whether or not the parent form is currently being submitted.
+ * This is different from remix's `useTransition().submission` in that it
+ * is aware of what form it's in and when _that_ form is being submitted.
+ */
 export declare const useIsSubmitting: () => boolean;

package/browser/hooks.js

@@ -1,5 +1,10 @@
+import get from "lodash/get";
+import toPath from "lodash/toPath";
 import { useContext, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
+/**
+ * Provides the data and helpers necessary to set up a field.
+ */
 export const useField = (name) => {
     const { fieldErrors, clearError, validateField, defaultValues } = useContext(FormContext);
     const field = useMemo(() => ({
@@ -8,10 +13,20 @@ export const useField = (name) => {
             clearError(name);
         },
         validate: () => validateField(name),
-        defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name],
+        defaultValue: defaultValues
+            ? get(defaultValues, toPath(name), undefined)
+            : undefined,
     }), [clearError, defaultValues, fieldErrors, name, validateField]);
     return field;
 };
-// test commit
+/**
+ * Provides access to the entire form context.
+ * This is not usually necessary, but can be useful for advanced use cases.
+ */
 export const useFormContext = () => useContext(FormContext);
+/**
+ * Returns whether or not the parent form is currently being submitted.
+ * This is different from remix's `useTransition().submission` in that it
+ * is aware of what form it's in and when _that_ form is being submitted.
+ */
 export const useIsSubmitting = () => useFormContext().isSubmitting;

package/browser/index.d.ts

@@ -3,3 +3,5 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/withYup";
+export * from "./validation/withZod";
+export * from "./validation/createValidator";

package/browser/index.js

@@ -3,3 +3,5 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/withYup";
+export * from "./validation/withZod";
+export * from "./validation/createValidator";

package/browser/internal/flatten.d.ts

@@ -0,0 +1,4 @@
+import { GenericObject } from "..";
+export declare const objectFromPathEntries: (entries: [string, any][]) => {};
+/** Flatten an object so there are no nested objects or arrays */
+export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/browser/internal/flatten.js

@@ -0,0 +1,35 @@
+// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
+import assign from "lodash/assign";
+import isArray from "lodash/isArray";
+import isObject from "lodash/isObject";
+import keys from "lodash/keys";
+import mapKeys from "lodash/mapKeys";
+import set from "lodash/set";
+import transform from "lodash/transform";
+export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, value), {});
+/** Flatten an object so there are no nested objects or arrays */
+export function flatten(obj, preserveEmpty = false) {
+    return transform(obj, function (result, value, key) {
+        if (isObject(value)) {
+            let flatMap = mapKeys(flatten(value, preserveEmpty), function (_mvalue, mkey) {
+                if (isArray(value)) {
+                    let index = mkey.indexOf(".");
+                    if (-1 !== index) {
+                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
+                    }
+                    return `${key}[${mkey}]`;
+                }
+                return `${key}.${mkey}`;
+            });
+            assign(result, flatMap);
+            // Preverve Empty arrays and objects
+            if (preserveEmpty && keys(flatMap).length === 0) {
+                result[key] = value;
+            }
+        }
+        else {
+            result[key] = value;
+        }
+        return result;
+    }, {});
+}

package/browser/internal/formContext.d.ts

@@ -1,11 +1,29 @@
 /// <reference types="react" />
 import { FieldErrors } from "../validation/types";
 export declare type FormContextValue = {
+    /**
+     * All the errors in all the fields in the form.
+     */
     fieldErrors: FieldErrors;
+    /**
+     * Clear the errors of the specified fields.
+     */
     clearError: (...names: string[]) => void;
+    /**
+     * Validate the specified field.
+     */
     validateField: (fieldName: string) => void;
+    /**
+     * The `action` prop of the form.
+     */
     action?: string;
+    /**
+     * Whether or not the form is submitting.
+     */
     isSubmitting: boolean;
+    /**
+     * The default values of the form.
+     */
     defaultValues?: {
         [fieldName: string]: any;
     };

package/browser/server.d.ts

@@ -1,2 +1,7 @@
 import { FieldErrors } from "./validation/types";
+/**
+ * Takes the errors from a `Validator` and returns a `Response`.
+ * The `ValidatedForm` on the frontend will automatically display the errors
+ * if this is returned from the action.
+ */
 export declare const validationError: (errors: FieldErrors) => Response;

package/browser/server.js

@@ -1,2 +1,7 @@
 import { json } from "@remix-run/server-runtime";
+/**
+ * Takes the errors from a `Validator` and returns a `Response`.
+ * The `ValidatedForm` on the frontend will automatically display the errors
+ * if this is returned from the action.
+ */
 export const validationError = (errors) => json({ fieldErrors: errors }, { status: 422 });

package/browser/test-data/testFormData.d.ts

@@ -0,0 +1,15 @@
+export declare class TestFormData implements FormData {
+    private _params;
+    constructor(body?: string);
+    append(name: string, value: string | Blob, fileName?: string): void;
+    delete(name: string): void;
+    get(name: string): FormDataEntryValue | null;
+    getAll(name: string): FormDataEntryValue[];
+    has(name: string): boolean;
+    set(name: string, value: string | Blob, fileName?: string): void;
+    forEach(callbackfn: (value: FormDataEntryValue, key: string, parent: FormData) => void, thisArg?: any): void;
+    entries(): IterableIterator<[string, FormDataEntryValue]>;
+    keys(): IterableIterator<string>;
+    values(): IterableIterator<FormDataEntryValue>;
+    [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;
+}

package/browser/test-data/testFormData.js

@@ -0,0 +1,46 @@
+// Copied from remix to use in tests
+// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
+export class TestFormData {
+    constructor(body) {
+        this._params = new URLSearchParams(body);
+    }
+    append(name, value, fileName) {
+        if (typeof value !== "string") {
+            throw new Error("formData.append can only accept a string");
+        }
+        this._params.append(name, value);
+    }
+    delete(name) {
+        this._params.delete(name);
+    }
+    get(name) {
+        return this._params.get(name);
+    }
+    getAll(name) {
+        return this._params.getAll(name);
+    }
+    has(name) {
+        return this._params.has(name);
+    }
+    set(name, value, fileName) {
+        if (typeof value !== "string") {
+            throw new Error("formData.set can only accept a string");
+        }
+        this._params.set(name, value);
+    }
+    forEach(callbackfn, thisArg) {
+        this._params.forEach(callbackfn, thisArg);
+    }
+    entries() {
+        return this._params.entries();
+    }
+    keys() {
+        return this._params.keys();
+    }
+    values() {
+        return this._params.values();
+    }
+    *[Symbol.iterator]() {
+        yield* this._params;
+    }
+}

package/browser/validation/createValidator.d.ts

@@ -0,0 +1,7 @@
+import { Validator } from "..";
+/**
+ * Used to create a validator for a form.
+ * It provides built-in handling for unflattening nested objects and
+ * extracting the values from FormData.
+ */
+export declare function createValidator<T>(validator: Validator<T>): Validator<T>;

package/browser/validation/createValidator.js

@@ -0,0 +1,19 @@
+import { objectFromPathEntries } from "../internal/flatten";
+const preprocessFormData = (data) => {
+    // A slightly janky way of determining if the data is a FormData object
+    // since node doesn't really have FormData
+    if ("entries" in data && typeof data.entries === "function")
+        return objectFromPathEntries([...data.entries()]);
+    return objectFromPathEntries(Object.entries(data));
+};
+/**
+ * Used to create a validator for a form.
+ * It provides built-in handling for unflattening nested objects and
+ * extracting the values from FormData.
+ */
+export function createValidator(validator) {
+    return {
+        validate: (value) => validator.validate(preprocessFormData(value)),
+        validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
+    };
+}

package/browser/validation/types.d.ts

@@ -1,4 +1,10 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type GenericObject = {
+    [key: string]: any;
+};
+/**
+ * The result when validating a form.
+ */
 export declare type ValidationResult<DataType> = {
     data: DataType;
     error: undefined;
@@ -6,10 +12,16 @@ export declare type ValidationResult<DataType> = {
     error: FieldErrors;
     data: undefined;
 };
+/**
+ * The result when validating an individual field in a form.
+ */
 export declare type ValidateFieldResult = {
     error?: string;
 };
+/**
+ * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
+ */
 export declare type Validator<DataType> = {
-    validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
-    validateField: (unvalidatedData: unknown, field: string) => ValidateFieldResult;
+    validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
+    validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };