remix-validated-form 3.0.0-beta.1 → 3.0.0

package/.turbo/turbo-test.log

@@ -1,36 +1,11 @@
 $ jest src
- PASS  src/validation/validation.test.ts
-  Validation
-    Adapter for yup
-      validate
-        ✓ should return the data when valid (2 ms)
-        ✓ should return field errors when invalid (1 ms)
-        ✓ should unflatten data when validating
-        ✓ should accept FormData directly and return errors (1 ms)
-        ✓ should accept FormData directly and return valid data (1 ms)
-      validateField
-        ✓ should not return an error if field is valid
-        ✓ should not return an error if a nested field is valid (1 ms)
-        ✓ should return an error if field is invalid (2 ms)
-        ✓ should return an error if a nested field is invalid
-    Adapter for zod
-      validate
-        ✓ should return the data when valid (1 ms)
-        ✓ should return field errors when invalid
-        ✓ should unflatten data when validating (1 ms)
-        ✓ should accept FormData directly and return errors
-        ✓ should accept FormData directly and return valid data
-      validateField
-        ✓ should not return an error if field is valid (1 ms)
-        ✓ should not return an error if a nested field is valid
-        ✓ should return an error if field is invalid
-        ✓ should return an error if a nested field is invalid
-  withZod
-    ✓ returns coherent errors for complex schemas (1 ms)
-    ✓ returns errors for fields that are unions
-
-Test Suites: 1 passed, 1 total
-Tests:       20 passed, 20 total
-Snapshots:   0 total
-Time:        1.1 s, estimated 2 s
-Ran all test suites matching /src/i.
+No tests found, exiting with code 1
+Run with `--passWithNoTests` to exit with code 0
+In /Users/aaronpettengill/dev/remix-validated-form/packages/remix-validated-form
+  68 files checked.
+  testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 2 matches
+  testPathIgnorePatterns: /node_modules/ - 68 matches
+  testRegex:  - 0 matches
+Pattern: src - 0 matches
+info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
+error Command failed with exit code 1.

package/README.md

@@ -27,10 +27,25 @@ yarn sample-app
 
 ## Install
 
+### Base package
+
 ```bash
 npm install remix-validated-form
 ```
 
+### Validation library adapter
+
+There are official adapters available for `zod` and `yup`.
+If you're using a different library,
+see the [Validation library support](#validation-library-support) section below.
+
+- @remix-validated-form/with-zod
+- @remix-validated-form/with-yup
+
+```bash
+npm install @remix-validated-form/with-zod
+```
+
 ## Create an input component
 
 In order to display field errors or do field-by-field validation,
@@ -164,10 +179,10 @@ export default function MyForm() {
 
 # Validation Library Support
 
-This library currently includes an out-of-the-box adapter for `yup` and `zod`,
+There are official adapters available for `zod` and `yup` ,
 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 😊
+And if you create an adapter for a library, feel free to make a PR on this repository 😊
 
 ## Creating an adapter
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -14,8 +14,6 @@
     "build": "npm run build:browser && npm run build:main",
     "build:browser": "tsc --module ESNext --outDir ./browser",
     "build:main": "tsc --module CommonJS --outDir ./build",
-    "test": "jest src",
-    "test:watch": "jest src --watch",
     "prepublishOnly": "cp ../../README.md ./README.md && npm run build",
     "postpublish": "rm ./README.md"
   },

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

@@ -1,15 +0,0 @@
-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/build/test-data/testFormData.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestFormData = void 0;
-// Copied from remix to use in tests
-// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
-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;
-    }
-}
-exports.TestFormData = TestFormData;

package/build/validation/validation.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/validation/validation.test.js

@@ -1,295 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const yup = __importStar(require("yup"));
-const zod_1 = require("zod");
-const __1 = require("..");
-const flatten_1 = require("../internal/flatten");
-const testFormData_1 = require("../test-data/testFormData");
-const withZod_1 = require("./withZod");
-const validationTestCases = [
-    {
-        name: "yup",
-        validator: (0, __1.withYup)(yup.object({
-            firstName: yup.string().required(),
-            lastName: yup.string().required(),
-            age: yup.number(),
-            address: yup
-                .object({
-                streetAddress: yup.string().required(),
-                city: yup.string().required(),
-                country: yup.string().required(),
-            })
-                .required(),
-            pets: yup.array().of(yup.object({
-                animal: yup.string().required(),
-                name: yup.string().required(),
-            })),
-        })),
-    },
-    {
-        name: "zod",
-        validator: (0, withZod_1.withZod)(zod_1.z.object({
-            firstName: zod_1.z.string().nonempty(),
-            lastName: zod_1.z.string().nonempty(),
-            age: zod_1.z.optional(zod_1.z.number()),
-            address: zod_1.z.preprocess((value) => (value == null ? {} : value), zod_1.z.object({
-                streetAddress: zod_1.z.string().nonempty(),
-                city: zod_1.z.string().nonempty(),
-                country: zod_1.z.string().nonempty(),
-            })),
-            pets: zod_1.z
-                .object({
-                animal: zod_1.z.string().nonempty(),
-                name: zod_1.z.string().nonempty(),
-            })
-                .array()
-                .optional(),
-        })),
-    },
-];
-// Not going to enforce exact error strings here
-const anyString = expect.any(String);
-describe("Validation", () => {
-    describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
-        describe("validate", () => {
-            it("should return the data when valid", () => {
-                const person = {
-                    firstName: "John",
-                    lastName: "Doe",
-                    age: 30,
-                    address: {
-                        streetAddress: "123 Main St",
-                        city: "Anytown",
-                        country: "USA",
-                    },
-                    pets: [{ animal: "dog", name: "Fido" }],
-                };
-                expect(validator.validate(person)).toEqual({
-                    data: person,
-                    error: undefined,
-                });
-            });
-            it("should return field errors when invalid", () => {
-                const obj = { age: "hi!", pets: [{ animal: "dog" }] };
-                expect(validator.validate(obj)).toEqual({
-                    data: undefined,
-                    error: {
-                        firstName: anyString,
-                        lastName: anyString,
-                        age: anyString,
-                        "address.city": anyString,
-                        "address.country": anyString,
-                        "address.streetAddress": anyString,
-                        "pets[0].name": anyString,
-                        _submittedData: obj,
-                    },
-                });
-            });
-            it("should unflatten data when validating", () => {
-                const data = {
-                    firstName: "John",
-                    lastName: "Doe",
-                    age: 30,
-                    "address.streetAddress": "123 Main St",
-                    "address.city": "Anytown",
-                    "address.country": "USA",
-                    "pets[0].animal": "dog",
-                    "pets[0].name": "Fido",
-                };
-                expect(validator.validate(data)).toEqual({
-                    data: {
-                        firstName: "John",
-                        lastName: "Doe",
-                        age: 30,
-                        address: {
-                            streetAddress: "123 Main St",
-                            city: "Anytown",
-                            country: "USA",
-                        },
-                        pets: [{ animal: "dog", name: "Fido" }],
-                    },
-                    error: undefined,
-                });
-            });
-            it("should accept FormData directly and return errors", () => {
-                const formData = new testFormData_1.TestFormData();
-                formData.set("firstName", "John");
-                formData.set("lastName", "Doe");
-                formData.set("address.streetAddress", "123 Main St");
-                formData.set("address.country", "USA");
-                formData.set("pets[0].animal", "dog");
-                expect(validator.validate(formData)).toEqual({
-                    data: undefined,
-                    error: {
-                        "address.city": anyString,
-                        "pets[0].name": anyString,
-                        _submittedData: (0, flatten_1.objectFromPathEntries)([...formData.entries()]),
-                    },
-                });
-            });
-            it("should accept FormData directly and return valid data", () => {
-                const formData = new testFormData_1.TestFormData();
-                formData.set("firstName", "John");
-                formData.set("lastName", "Doe");
-                formData.set("address.streetAddress", "123 Main St");
-                formData.set("address.country", "USA");
-                formData.set("address.city", "Anytown");
-                formData.set("pets[0].animal", "dog");
-                formData.set("pets[0].name", "Fido");
-                expect(validator.validate(formData)).toEqual({
-                    data: {
-                        firstName: "John",
-                        lastName: "Doe",
-                        address: {
-                            streetAddress: "123 Main St",
-                            country: "USA",
-                            city: "Anytown",
-                        },
-                        pets: [{ animal: "dog", name: "Fido" }],
-                    },
-                    error: undefined,
-                });
-            });
-        });
-        describe("validateField", () => {
-            it("should not return an error if field is valid", () => {
-                const person = {
-                    firstName: "John",
-                    lastName: {}, // invalid, but we should only be validating firstName
-                };
-                expect(validator.validateField(person, "firstName")).toEqual({
-                    error: undefined,
-                });
-            });
-            it("should not return an error if a nested field is valid", () => {
-                const person = {
-                    firstName: "John",
-                    lastName: {},
-                    address: {
-                        streetAddress: "123 Main St",
-                        city: "Anytown",
-                        country: "USA",
-                    },
-                    pets: [{ animal: "dog", name: "Fido" }],
-                };
-                expect(validator.validateField(person, "address.streetAddress")).toEqual({
-                    error: undefined,
-                });
-                expect(validator.validateField(person, "address.city")).toEqual({
-                    error: undefined,
-                });
-                expect(validator.validateField(person, "address.country")).toEqual({
-                    error: undefined,
-                });
-                expect(validator.validateField(person, "pets[0].animal")).toEqual({
-                    error: undefined,
-                });
-                expect(validator.validateField(person, "pets[0].name")).toEqual({
-                    error: undefined,
-                });
-            });
-            it("should return an error if field is invalid", () => {
-                const person = {
-                    firstName: "John",
-                    lastName: {},
-                    address: {
-                        streetAddress: "123 Main St",
-                        city: 1234,
-                    },
-                };
-                expect(validator.validateField(person, "lastName")).toEqual({
-                    error: anyString,
-                });
-            });
-            it("should return an error if a nested field is invalid", () => {
-                const person = {
-                    firstName: "John",
-                    lastName: {},
-                    address: {
-                        streetAddress: "123 Main St",
-                        city: 1234,
-                    },
-                    pets: [{ animal: "dog" }],
-                };
-                expect(validator.validateField(person, "address.country")).toEqual({
-                    error: anyString,
-                });
-                expect(validator.validateField(person, "pets[0].name")).toEqual({
-                    error: anyString,
-                });
-            });
-        });
-    });
-});
-describe("withZod", () => {
-    it("returns coherent errors for complex schemas", () => {
-        const schema = zod_1.z.union([
-            zod_1.z.object({
-                type: zod_1.z.literal("foo"),
-                foo: zod_1.z.string(),
-            }),
-            zod_1.z.object({
-                type: zod_1.z.literal("bar"),
-                bar: zod_1.z.string(),
-            }),
-        ]);
-        const obj = {
-            type: "foo",
-            bar: 123,
-            foo: 123,
-        };
-        expect((0, withZod_1.withZod)(schema).validate(obj)).toEqual({
-            data: undefined,
-            error: {
-                type: anyString,
-                bar: anyString,
-                foo: anyString,
-                _submittedData: obj,
-            },
-        });
-    });
-    it("returns errors for fields that are unions", () => {
-        const schema = zod_1.z.object({
-            field1: zod_1.z.union([zod_1.z.literal("foo"), zod_1.z.literal("bar")]),
-            field2: zod_1.z.union([zod_1.z.literal("foo"), zod_1.z.literal("bar")]),
-        });
-        const obj = {
-            field1: "a value",
-            // field2 missing
-        };
-        const validator = (0, withZod_1.withZod)(schema);
-        expect(validator.validate(obj)).toEqual({
-            data: undefined,
-            error: {
-                field1: anyString,
-                field2: anyString,
-                _submittedData: obj,
-            },
-        });
-        expect(validator.validateField(obj, "field1")).toEqual({
-            error: anyString,
-        });
-        expect(validator.validateField(obj, "field2")).toEqual({
-            error: anyString,
-        });
-    });
-});

package/build/validation/withYup.d.ts

@@ -1,6 +0,0 @@
-import type { AnyObjectSchema, InferType } from "yup";
-import { Validator } from "./types";
-/**
- * Create a `Validator` using a `yup` schema.
- */
-export declare const withYup: <Schema extends AnyObjectSchema>(validationSchema: Schema) => Validator<InferType<Schema>>;

package/build/validation/withYup.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withYup = void 0;
-const createValidator_1 = require("./createValidator");
-const validationErrorToFieldErrors = (error) => {
-    const fieldErrors = {};
-    error.inner.forEach((innerError) => {
-        if (!innerError.path)
-            return;
-        fieldErrors[innerError.path] = innerError.message;
-    });
-    return fieldErrors;
-};
-/**
- * Create a `Validator` using a `yup` schema.
- */
-const withYup = (validationSchema) => {
-    return (0, createValidator_1.createValidator)({
-        validate: (data) => {
-            try {
-                const validated = validationSchema.validateSync(data, {
-                    abortEarly: false,
-                });
-                return { data: validated, error: undefined };
-            }
-            catch (err) {
-                return {
-                    error: validationErrorToFieldErrors(err),
-                    data: undefined,
-                };
-            }
-        },
-        validateField: (data, field) => {
-            try {
-                validationSchema.validateSyncAt(field, data);
-                return {};
-            }
-            catch (err) {
-                return { error: err.message };
-            }
-        },
-    });
-};
-exports.withYup = withYup;

package/build/validation/withZod.d.ts

@@ -1,6 +0,0 @@
-import type { z } from "zod";
-import { Validator } from "..";
-/**
- * Create a validator using a `zod` schema.
- */
-export declare function withZod<T>(zodSchema: z.Schema<T>): Validator<T>;

package/build/validation/withZod.js

@@ -1,57 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withZod = void 0;
-const isEqual_1 = __importDefault(require("lodash/isEqual"));
-const toPath_1 = __importDefault(require("lodash/toPath"));
-const createValidator_1 = require("./createValidator");
-const getIssuesForError = (err) => {
-    return err.issues.flatMap((issue) => {
-        if ("unionErrors" in issue) {
-            return issue.unionErrors.flatMap((err) => getIssuesForError(err));
-        }
-        else {
-            return [issue];
-        }
-    });
-};
-function pathToString(array) {
-    return array.reduce(function (string, item) {
-        var prefix = string === "" ? "" : ".";
-        return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
-    }, "");
-}
-/**
- * Create a validator using a `zod` schema.
- */
-function withZod(zodSchema) {
-    return (0, createValidator_1.createValidator)({
-        validate: (value) => {
-            const result = zodSchema.safeParse(value);
-            if (result.success)
-                return { data: result.data, error: undefined };
-            const fieldErrors = {};
-            getIssuesForError(result.error).forEach((issue) => {
-                const path = pathToString(issue.path);
-                if (!fieldErrors[path])
-                    fieldErrors[path] = issue.message;
-            });
-            return { error: fieldErrors, data: undefined };
-        },
-        validateField: (data, field) => {
-            var _a;
-            const result = zodSchema.safeParse(data);
-            if (result.success)
-                return { error: undefined };
-            return {
-                error: (_a = getIssuesForError(result.error).find((issue) => {
-                    const allPathsAsString = issue.path.map((p) => `${p}`);
-                    return (0, isEqual_1.default)(allPathsAsString, (0, toPath_1.default)(field));
-                })) === null || _a === void 0 ? void 0 : _a.message,
-            };
-        },
-    });
-}
-exports.withZod = withZod;