remix-validated-form 0.0.1

package/.eslintignore

@@ -0,0 +1 @@
+./package-lock.json

package/.eslintrc.js

@@ -0,0 +1,46 @@
+/**
+ * @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

@@ -0,0 +1,35 @@
+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

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

package/.prettierignore

@@ -0,0 +1,8 @@
+.cache
+build
+browser
+test-app/build
+test-app/remix-validated-form
+node_modules
+public
+package-lock.json

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Aaron Pettengill
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Remix Validated Form
+
+A form library built for [remix](https://remix.run).

package/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "remix-validated-form",
+  "version": "0.0.1",
+  "description": "Form component and utils for easy form validation in remix",
+  "browser": "./browser/index.js",
+  "main": "./build/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "build": "npm run build:browser && npm run build:main && npm run build:tests",
+    "build:browser": "tsc --project tsconfig.json --module ESNext --outDir ./browser",
+    "build:main": "tsc --project tsconfig.json --module CommonJS --outDir ./build",
+    "build:tests": "tsc --project tsconfig.json --module CommonJS --outDir ./test-app/remix-validated-form",
+    "test": "jest src",
+    "lint": "eslint .",
+    "prettier": "prettier . --write",
+    "prepare": "husky install"
+  },
+  "author": {
+    "name": "Aaron Pettengill",
+    "email": "pettengill.aaron@gmail.com",
+    "url": "https://github.com/airjp73"
+  },
+  "license": "MIT",
+  "keywords": [
+    "remix",
+    "remix.run",
+    "react",
+    "form",
+    "yup",
+    "validation"
+  ],
+  "peerDependencies": {
+    "@remix-run/react": "^1.0.0",
+    "@remix-run/server-runtime": "^1.0.0",
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "@remix-run/react": "^1.0.0",
+    "@remix-run/server-runtime": "^1.0.0",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.36",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "fetch-blob": "^3.1.3",
+    "husky": "^7.0.4",
+    "jest": "^27.3.1",
+    "lint-staged": "^12.1.2",
+    "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}": [
+      "prettier --write",
+      "eslint --cache --fix"
+    ]
+  }
+}

package/src/ValidatedForm.tsx

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,27 @@
+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/index.ts

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

package/src/internal/formContext.ts

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,37 @@
+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 };
+    }
+  },
+});

package/test-app/README.md

@@ -0,0 +1,53 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```

package/test-app/app/components/Input.tsx

@@ -0,0 +1,24 @@
+import { useField } from "../../remix-validated-form";
+
+type InputProps = {
+  name: string;
+  label: string;
+  validateOnBlur?: boolean;
+};
+
+export const Input = ({ name, label, validateOnBlur }: InputProps) => {
+  const { validate, clearError, defaultValue, error } = useField(name);
+  return (
+    <div>
+      <label htmlFor={name}>{label}</label>
+      <input
+        id={name}
+        name={name}
+        onBlur={validateOnBlur ? validate : undefined}
+        onChange={clearError}
+        defaultValue={defaultValue}
+      />
+      {error && <span style={{ color: "red" }}>{error}</span>}
+    </div>
+  );
+};

package/test-app/app/components/SubmitButton.tsx

@@ -0,0 +1,18 @@
+import { useIsSubmitting } from "../../remix-validated-form";
+
+type Props = {
+  label?: string;
+  submittingLabel?: string;
+};
+
+export const SubmitButton = ({
+  label = "Submit",
+  submittingLabel = "Submitting...",
+}: Props) => {
+  const isSubmitting = useIsSubmitting();
+  return (
+    <button type="submit" disabled={isSubmitting}>
+      {isSubmitting ? submittingLabel : label}
+    </button>
+  );
+};

package/test-app/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);

package/test-app/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}