remix-validated-form 1.1.0 → 2.0.0

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","/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"},{"size":207,"mtime":1637876506168,"results":"9","hashOfConfig":"10"},{"size":438,"mtime":1637877226360,"results":"11","hashOfConfig":"10"},{"size":1085,"mtime":1637877476573,"results":"12","hashOfConfig":"10"},{"size":1293,"mtime":1637876566355,"results":"13","hashOfConfig":"10"},{"size":1330,"mtime":1637902697212,"results":"14","hashOfConfig":"10"},{"size":2220,"mtime":1637902736281,"results":"15","hashOfConfig":"10"},{"size":3526,"mtime":1638155421909,"results":"16","hashOfConfig":"10"},{"size":1168,"mtime":1638155747107,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","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",["34"],"/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",["35"],"/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",[],{"ruleId":"36","severity":1,"message":"37","line":2,"column":23,"nodeType":"38","messageId":"39","endLine":2,"endColumn":39},{"ruleId":"36","severity":1,"message":"40","line":1,"column":26,"nodeType":"38","messageId":"39","endLine":1,"endColumn":39},"@typescript-eslint/no-unused-vars","'ValidationResult' is defined but never used.","Identifier","unusedVar","'useActionData' is defined but never used."]
+[{"/Users/aaronpettengill/dev/remix-validated-form/src/index.ts":"1"},{"size":306,"mtime":1639405886301,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1p84lfm","/Users/aaronpettengill/dev/remix-validated-form/src/index.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,11 +7,24 @@ 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/25882770/143505448-c4b7e660-7a73-4005-b2ca-17c65a15ef46.mov
+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
 
@@ -57,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();
@@ -89,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;
 
@@ -127,6 +138,33 @@ 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 library currently includes an out-of-the-box adapter for `yup` and `zod`,
@@ -159,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,6 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/withYup";
+export * from "./validation/withZod";
+export * from "./validation/createValidator";
+export type { FormContextValue } from "./internal/formContext";

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;
 };