remix-validated-form 0.0.2 → 0.0.3

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.2",
+  "version": "0.0.3",
   "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",

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

package/test-app/README.md

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

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

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

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

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

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