remix-validated-form 0.0.1 → 1.0.0

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,77 @@
+"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 __1 = require("..");
+const validationTestCases = [
+    {
+        name: "yup",
+        validator: (0, __1.withYup)(yup.object({
+            firstName: yup.string().required(),
+            lastName: yup.string().required(),
+            age: yup.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: 123 };
+                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,
+                });
+            });
+        });
+    });
+});

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/package.json

@@ -1,9 +1,13 @@
 {
   "name": "remix-validated-form",
-  "version": "0.0.1",
+  "version": "1.0.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",
@@ -13,7 +17,8 @@
     "test": "jest src",
     "lint": "eslint .",
     "prettier": "prettier . --write",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "prepublishOnly": "npm run build:browser && npm run build:main"
   },
   "author": {
     "name": "Aaron Pettengill",
@@ -45,6 +50,7 @@
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-flowtype": "^5.10.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -54,18 +60,17 @@
     "husky": "^7.0.4",
     "jest": "^27.3.1",
     "lint-staged": "^12.1.2",
+    "prettier": "^2.5.0",
     "react": "^17.0.2",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.2",
     "yup": "^0.32.11"
   },
   "dependencies": {
-    "eslint-plugin-flowtype": "^5.10.0",
-    "prettier": "^2.5.0",
     "tiny-invariant": "^1.2.0"
   },
   "lint-staged": {
-    "**/*.{ts,tsx,json,js,jsx}": [
+    "**/*.{ts,tsx,js,jsx}": [
       "prettier --write",
       "eslint --cache --fix"
     ]

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

package/src/ValidatedForm.tsx

@@ -1,130 +0,0 @@
-import {
-  Form as RemixForm,
-  useActionData,
-  useFetcher,
-  useFormAction,
-  useTransition,
-} from "@remix-run/react";
-import React, {
-  ComponentProps,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import invariant from "tiny-invariant";
-import { FormContext, FormContextValue } from "./internal/formContext";
-import { omit, mergeRefs } from "./internal/util";
-import { FieldErrors, Validator } from "./validation/types";
-
-export type FormProps<DataType> = {
-  validator: Validator<DataType>;
-  onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void;
-  fetcher?: ReturnType<typeof useFetcher>;
-  defaultValues?: Partial<DataType>;
-  formRef?: React.RefObject<HTMLFormElement>;
-} & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
-
-function useFieldErrors(
-  fetcher?: ReturnType<typeof useFetcher>
-): [FieldErrors, React.Dispatch<React.SetStateAction<FieldErrors>>] {
-  const actionData = useActionData<any>();
-  const dataToUse = fetcher ? fetcher.data : actionData;
-  const fieldErrorsFromAction = dataToUse?.fieldErrors;
-
-  const [fieldErrors, setFieldErrors] = useState<FieldErrors>(
-    fieldErrorsFromAction ?? {}
-  );
-  useEffect(() => {
-    if (fieldErrorsFromAction) setFieldErrors(fieldErrorsFromAction);
-  }, [fieldErrorsFromAction]);
-
-  return [fieldErrors, setFieldErrors];
-}
-
-const useIsSubmitting = (
-  action?: string,
-  fetcher?: ReturnType<typeof useFetcher>
-) => {
-  const actionForCurrentPage = useFormAction();
-  const pendingFormSubmit = useTransition().submission;
-  return fetcher
-    ? fetcher.state === "submitting"
-    : pendingFormSubmit &&
-        pendingFormSubmit.action.endsWith(action ?? actionForCurrentPage);
-};
-
-const getDataFromForm = (el: HTMLFormElement) =>
-  Object.fromEntries(new FormData(el));
-
-export function ValidatedForm<DataType>({
-  validator,
-  onSubmit,
-  children,
-  fetcher,
-  action,
-  defaultValues,
-  formRef: formRefProp,
-  ...rest
-}: FormProps<DataType>) {
-  const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
-  const isSubmitting = useIsSubmitting(action, fetcher);
-
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const contextValue = useMemo<FormContextValue>(
-    () => ({
-      fieldErrors,
-      action,
-      defaultValues,
-      isSubmitting: isSubmitting ?? false,
-      clearError: (fieldName) => {
-        setFieldErrors((prev) => omit(prev, fieldName));
-      },
-      validateField: (fieldName) => {
-        invariant(formRef.current, "Cannot find reference to form");
-        const { error } = validator.validateField(
-          getDataFromForm(formRef.current),
-          fieldName as any
-        );
-        if (error) {
-          setFieldErrors((prev) => ({
-            ...prev,
-            [fieldName]: error,
-          }));
-        }
-      },
-    }),
-    [
-      fieldErrors,
-      action,
-      defaultValues,
-      isSubmitting,
-      setFieldErrors,
-      validator,
-    ]
-  );
-
-  const Form = fetcher?.Form ?? RemixForm;
-
-  return (
-    <Form
-      ref={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?.(result.data, event);
-        }
-      }}
-    >
-      <FormContext.Provider value={contextValue}>
-        {children}
-      </FormContext.Provider>
-    </Form>
-  );
-}

package/src/hooks.ts

@@ -1,27 +0,0 @@
-import { useContext, useMemo } from "react";
-import { FormContext } from "./internal/formContext";
-
-export const useField = (name: string) => {
-  const { fieldErrors, clearError, validateField, defaultValues } =
-    useContext(FormContext);
-
-  const field = useMemo(
-    () => ({
-      error: fieldErrors[name],
-      clearError: () => {
-        clearError(name);
-      },
-      validate: () => validateField(name),
-      defaultValue: defaultValues?.[name],
-    }),
-    [clearError, defaultValues, fieldErrors, name, validateField]
-  );
-
-  return field;
-};
-
-// test commit
-
-export const useFormContext = () => useContext(FormContext);
-
-export const useIsSubmitting = () => useFormContext().isSubmitting;

package/src/internal/formContext.ts

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

package/src/internal/util.ts

@@ -1,23 +0,0 @@
-import type React from "react";
-
-export const omit = (obj: any, ...keys: string[]) => {
-  const result = { ...obj };
-  for (const key of keys) {
-    delete result[key];
-  }
-  return result;
-};
-
-export const mergeRefs = <T = any>(
-  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined>
-): React.RefCallback<T> => {
-  return (value: T) => {
-    refs.filter(Boolean).forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = value;
-      }
-    });
-  };
-};

package/src/server.ts

@@ -1,5 +0,0 @@
-import { json } from "@remix-run/server-runtime";
-import { FieldErrors } from "./validation/types";
-
-export const fieldErrors = (errors: FieldErrors) =>
-  json({ fieldErrors: errors }, { status: 422 });

package/src/validation/types.ts

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

package/src/validation/validation.test.ts

@@ -1,76 +0,0 @@
-import * as yup from "yup";
-import { Validator, withYup } from "..";
-
-// If adding an adapter, write a validator that validates this shape
-type Shape = {
-  firstName: string;
-  lastName: string;
-  age?: number;
-};
-
-type ValidationTestCase = {
-  name: string;
-  validator: Validator<Shape>;
-};
-
-const validationTestCases: ValidationTestCase[] = [
-  {
-    name: "yup",
-    validator: withYup(
-      yup.object({
-        firstName: yup.string().required(),
-        lastName: yup.string().required(),
-        age: yup.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: Shape = {
-          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: 123 };
-        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,
-        });
-      });
-    });
-  });
-});

package/src/validation/withYup.ts

@@ -1,37 +0,0 @@
-import type { AnyObjectSchema, InferType, ValidationError } from "yup";
-import { FieldErrors, ValidationResult, Validator } from "./types";
-
-const validationErrorToFieldErrors = (error: ValidationError): FieldErrors => {
-  const fieldErrors: FieldErrors = {};
-  error.inner.forEach((innerError) => {
-    if (!innerError.path) return;
-    fieldErrors[innerError.path] = innerError.message;
-  });
-  return fieldErrors;
-};
-
-export const withYup = <Schema extends AnyObjectSchema>(
-  validationSchema: Schema
-): Validator<InferType<Schema>> => ({
-  validate: (data): ValidationResult<InferType<Schema>> => {
-    try {
-      const validated = validationSchema.validateSync(data, {
-        abortEarly: false,
-      });
-      return { data: validated, error: undefined };
-    } catch (err) {
-      return {
-        error: validationErrorToFieldErrors(err as ValidationError),
-        data: undefined,
-      };
-    }
-  },
-  validateField: (data, field) => {
-    try {
-      validationSchema.validateSyncAt(field, data);
-      return {};
-    } catch (err) {
-      return { error: (err as ValidationError).message };
-    }
-  },
-});