remix-validated-form 0.0.2 → 1.1.0

package/build/ValidatedForm.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidatedForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const react_2 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const formContext_1 = require("./internal/formContext");
+const util_1 = require("./internal/util");
+function useFieldErrors(fetcher) {
+    const actionData = (0, react_1.useActionData)();
+    const dataToUse = fetcher ? fetcher.data : actionData;
+    const fieldErrorsFromAction = dataToUse === null || dataToUse === void 0 ? void 0 : dataToUse.fieldErrors;
+    const [fieldErrors, setFieldErrors] = (0, react_2.useState)(fieldErrorsFromAction !== null && fieldErrorsFromAction !== void 0 ? fieldErrorsFromAction : {});
+    (0, react_2.useEffect)(() => {
+        if (fieldErrorsFromAction)
+            setFieldErrors(fieldErrorsFromAction);
+    }, [fieldErrorsFromAction]);
+    return [fieldErrors, setFieldErrors];
+}
+const useIsSubmitting = (action, fetcher) => {
+    const actionForCurrentPage = (0, react_1.useFormAction)();
+    const pendingFormSubmit = (0, react_1.useTransition)().submission;
+    return fetcher
+        ? fetcher.state === "submitting"
+        : pendingFormSubmit &&
+            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+};
+const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
+    var _a;
+    const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
+    const isSubmitting = useIsSubmitting(action, fetcher);
+    const formRef = (0, react_2.useRef)(null);
+    const contextValue = (0, react_2.useMemo)(() => ({
+        fieldErrors,
+        action,
+        defaultValues,
+        isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        clearError: (fieldName) => {
+            setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
+        },
+        validateField: (fieldName) => {
+            (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
+            const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            if (error) {
+                setFieldErrors((prev) => ({
+                    ...prev,
+                    [fieldName]: error,
+                }));
+            }
+        },
+    }), [
+        fieldErrors,
+        action,
+        defaultValues,
+        isSubmitting,
+        setFieldErrors,
+        validator,
+    ]);
+    const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : react_1.Form;
+    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
+            const result = validator.validate(getDataFromForm(event.currentTarget));
+            if (result.error) {
+                event.preventDefault();
+                setFieldErrors(result.error);
+            }
+            else {
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
+            }
+        }, children: (0, jsx_runtime_1.jsx)(formContext_1.FormContext.Provider, { value: contextValue, children: children }, void 0) }, void 0));
+}
+exports.ValidatedForm = ValidatedForm;

package/build/hooks.d.ts

@@ -0,0 +1,8 @@
+export declare const useField: (name: string) => {
+    error: string;
+    clearError: () => void;
+    validate: () => void;
+    defaultValue: any;
+};
+export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
+export declare const useIsSubmitting: () => boolean;

package/build/hooks.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsSubmitting = exports.useFormContext = exports.useField = void 0;
+const react_1 = require("react");
+const formContext_1 = require("./internal/formContext");
+const useField = (name) => {
+    const { fieldErrors, clearError, validateField, defaultValues } = (0, react_1.useContext)(formContext_1.FormContext);
+    const field = (0, react_1.useMemo)(() => ({
+        error: fieldErrors[name],
+        clearError: () => {
+            clearError(name);
+        },
+        validate: () => validateField(name),
+        defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name],
+    }), [clearError, defaultValues, fieldErrors, name, validateField]);
+    return field;
+};
+exports.useField = useField;
+// test commit
+const useFormContext = () => (0, react_1.useContext)(formContext_1.FormContext);
+exports.useFormContext = useFormContext;
+const useIsSubmitting = () => (0, exports.useFormContext)().isSubmitting;
+exports.useIsSubmitting = useIsSubmitting;

package/build/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./hooks";
+export * from "./server";
+export * from "./ValidatedForm";
+export * from "./validation/types";
+export * from "./validation/withYup";

package/build/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./server"), exports);
+__exportStar(require("./ValidatedForm"), exports);
+__exportStar(require("./validation/types"), exports);
+__exportStar(require("./validation/withYup"), exports);

package/build/internal/formContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { FieldErrors } from "../validation/types";
+export declare type FormContextValue = {
+    fieldErrors: FieldErrors;
+    clearError: (...names: string[]) => void;
+    validateField: (fieldName: string) => void;
+    action?: string;
+    isSubmitting: boolean;
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+};
+export declare const FormContext: import("react").Context<FormContextValue>;

package/build/internal/formContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormContext = void 0;
+const react_1 = require("react");
+exports.FormContext = (0, react_1.createContext)({
+    fieldErrors: {},
+    clearError: () => { },
+    validateField: () => { },
+    isSubmitting: false,
+});

package/build/internal/util.d.ts

@@ -0,0 +1,3 @@
+import type React from "react";
+export declare const omit: (obj: any, ...keys: string[]) => any;
+export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;

package/build/internal/util.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = exports.omit = void 0;
+const omit = (obj, ...keys) => {
+    const result = { ...obj };
+    for (const key of keys) {
+        delete result[key];
+    }
+    return result;
+};
+exports.omit = omit;
+const mergeRefs = (refs) => {
+    return (value) => {
+        refs.filter(Boolean).forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+};
+exports.mergeRefs = mergeRefs;

package/build/server.d.ts

@@ -0,0 +1,2 @@
+import { FieldErrors } from "./validation/types";
+export declare const validationError: (errors: FieldErrors) => Response;

package/build/server.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validationError = void 0;
+const server_runtime_1 = require("@remix-run/server-runtime");
+const validationError = (errors) => (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
+exports.validationError = validationError;

package/build/validation/types.d.ts

@@ -0,0 +1,15 @@
+export declare type FieldErrors = Record<string, string>;
+export declare type ValidationResult<DataType> = {
+    data: DataType;
+    error: undefined;
+} | {
+    error: FieldErrors;
+    data: undefined;
+};
+export declare type ValidateFieldResult = {
+    error?: string;
+};
+export declare type Validator<DataType> = {
+    validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
+    validateField: (unvalidatedData: unknown, field: string) => ValidateFieldResult;
+};

package/build/validation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/build/validation/validation.test.js

@@ -0,0 +1,141 @@
+"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 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(),
+        })),
+    },
+    {
+        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()),
+        })),
+    },
+];
+// 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 obj = {
+                    firstName: "John",
+                    lastName: "Doe",
+                    age: 30,
+                };
+                expect(validator.validate(obj)).toEqual({
+                    data: obj,
+                    error: undefined,
+                });
+            });
+            it("should return field errors when invalid", () => {
+                const obj = { age: "hi!" };
+                expect(validator.validate(obj)).toEqual({
+                    data: undefined,
+                    error: {
+                        firstName: anyString,
+                        lastName: anyString,
+                        age: anyString,
+                    },
+                });
+            });
+        });
+        describe("validateField", () => {
+            it("should not return an error if field is valid", () => {
+                const obj = {
+                    firstName: "John",
+                    lastName: {}, // invalid, but we should only be validating firstName
+                };
+                expect(validator.validateField(obj, "firstName")).toEqual({
+                    error: undefined,
+                });
+            });
+            it("should return an error if field is invalid", () => {
+                const obj = { firstName: "John", lastName: {} };
+                expect(validator.validateField(obj, "lastName")).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,
+            },
+        });
+    });
+    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,
+            },
+        });
+        expect(validator.validateField(obj, "field1")).toEqual({
+            error: anyString,
+        });
+        expect(validator.validateField(obj, "field2")).toEqual({
+            error: anyString,
+        });
+    });
+});

package/build/validation/withYup.d.ts

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

package/build/validation/withYup.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withYup = void 0;
+const validationErrorToFieldErrors = (error) => {
+    const fieldErrors = {};
+    error.inner.forEach((innerError) => {
+        if (!innerError.path)
+            return;
+        fieldErrors[innerError.path] = innerError.message;
+    });
+    return fieldErrors;
+};
+const withYup = (validationSchema) => ({
+    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

@@ -0,0 +1,3 @@
+import type { z } from "zod";
+import { Validator } from "..";
+export declare function withZod<T>(zodSchema: z.Schema<T>): Validator<T>;

package/build/validation/withZod.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withZod = void 0;
+const getIssuesForError = (err) => {
+    return err.issues.flatMap((issue) => {
+        if ("unionErrors" in issue) {
+            return issue.unionErrors.flatMap((err) => getIssuesForError(err));
+        }
+        else {
+            return [issue];
+        }
+    });
+};
+function withZod(zodSchema) {
+    return {
+        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 = issue.path.join(".");
+                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) => issue.path.join(".") === field)) === null || _a === void 0 ? void 0 : _a.message,
+            };
+        },
+    };
+}
+exports.withZod = withZod;

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "remix-validated-form",
-  "version": "0.0.2",
+  "version": "1.1.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/airjp73/remix-validated-form"
+  },
   "sideEffects": false,
   "scripts": {
     "build": "npm run build:browser && npm run build:main && npm run build:tests",
@@ -60,7 +64,8 @@
     "react": "^17.0.2",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.2",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "zod": "^3.11.6"
   },
   "dependencies": {
     "tiny-invariant": "^1.2.0"

package/.eslintrc.js

@@ -1,46 +0,0 @@
-/**
- * @type {import('eslint').Linter.Config}
- */
-module.exports = {
-  ignorePatterns: [
-    "node_modules/",
-    ".cache/",
-    "browser/",
-    "build/",
-    "test-app/build",
-    "test-app/remix-validated-form",
-  ],
-  extends: ["react-app"],
-  plugins: ["prettier"],
-  rules: {
-    "import/no-anonymous-default-export": "off",
-    "import/order": [
-      "warn",
-      {
-        groups: [
-          "builtin",
-          "external",
-          "internal",
-          "unknown",
-          "parent",
-          "sibling",
-          "index",
-        ],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-        "newlines-between": "never",
-      },
-    ],
-    "prettier/prettier": "error",
-  },
-  overrides: [
-    {
-      files: ["./cypress/**"],
-      rules: {
-        "@typescript-eslint/no-unused-expressions": "off",
-      },
-    },
-  ],
-};

package/.github/workflows/test.yml

@@ -1,35 +0,0 @@
-name: Test and build
-
-on:
-  push:
-    branches:
-      - "main"
-  pull_request:
-    branches:
-      - "main"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Install Deps
-        run: npm install
-
-      - name: Lint
-        run: npm run lint
-
-      - name: Jest Tests
-        run: npm run test
-
-      - name: Build
-        run: npm run build
-
-      - name: Cypress Tests
-        uses: cypress-io/github-action@v2
-        with:
-          working-directory: ./test-app
-          start: npm run dev
-          wait-on: http://localhost:3000

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged