remix-validated-form 2.0.1-beta.0 → 2.0.1-beta.1

package/.turbo/turbo-test.log

@@ -0,0 +1,36 @@
+$ 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 (2 ms)
+        ✓ should unflatten data when validating
+        ✓ should accept FormData directly and return errors
+        ✓ 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
+        ✓ should return an error if a nested field is invalid
+    Adapter for zod
+      validate
+        ✓ should return the data when valid (2 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
+        ✓ should not return an error if a nested field is valid (1 ms)
+        ✓ 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.526 s, estimated 2 s
+Ran all test suites matching /src/i.

package/README.md

@@ -0,0 +1,235 @@
+# Remix Validated Form
+
+A form library built for [remix](https://remix.run) to make validation easy.
+
+- Client-side, field-by-field validation (e.g. validate on blur) and form-level validation
+- Set default values for the entire form in one place
+- Re-use validation on the server
+- Show validation errors from the server even without JS
+- Detect if the current form is submitting when there are multiple forms on the page
+- Supports nested objects and arrays
+- Validation library agnostic
+
+# Demo
+
+https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
+
+To run `sample-app`:
+
+```
+git clone https://github.com/airjp73/remix-validated-form
+cd remix-validated-form
+npm i
+cd sample-app
+npm i
+cd ..
+npm run sample-app
+```
+
+# Getting started
+
+## Install
+
+```bash
+npm install remix-validated-form
+```
+
+## Create an input component
+
+In order to display field errors or do field-by-field validation,
+it's recommended to incorporate this library into an input component using `useField`.
+
+```tsx
+import { useField } from "remix-validated-form";
+
+type MyInputProps = {
+  name: string;
+  label: string;
+};
+
+export const MyInput = ({ name, label }: InputProps) => {
+  const { validate, clearError, defaultValue, error } = useField(name);
+  return (
+    <div>
+      <label htmlFor={name}>{label}</label>
+      <input
+        id={name}
+        name={name}
+        onBlur={validate}
+        onChange={clearError}
+        defaultValue={defaultValue}
+      />
+      {error && <span className="my-error-class">{error}</span>}
+    </div>
+  );
+};
+```
+
+## Create a submit button component
+
+To best take advantage of the per-form submission detection, we can create a submit button component.
+
+```tsx
+import { useIsSubmitting } from "remix-validated-form";
+
+export const MySubmitButton = () => {
+  const isSubmitting = useIsSubmitting();
+  return (
+    <button type="submit" disabled={isSubmitting}>
+      {isSubmitting ? "Submitting..." : "Submit"}
+    </button>
+  );
+};
+```
+
+## Use the form!
+
+Now that we have our components, making a form is easy!
+
+```tsx
+import { ActionFunction, LoaderFunction, redirect, useLoaderData } from "remix";
+import * as yup from "yup";
+import { validationError, ValidatedForm, withYup } from "remix-validated-form";
+import { MyInput, MySubmitButton } from "~/components/Input";
+
+// Using yup in this example, but you can use anything
+const validator = withYup(
+  yup.object({
+    firstName: yup.string().label("First Name").required(),
+    lastName: yup.string().label("Last Name").required(),
+    email: yup.string().email().label("Email").required(),
+  })
+);
+
+export const action: ActionFunction = async ({ request }) => {
+  const fieldValues = validator.validate(await request.formData());
+  if (fieldValues.error) return validationError(fieldValues.error);
+  const { firstName, lastName, email } = fieldValues.data;
+
+  // Do something with correctly typed values;
+
+  return redirect("/");
+};
+
+export const loader: LoaderFunction = () => {
+  return {
+    defaultValues: {
+      firstName: "Jane",
+      lastName: "Doe",
+      email: "jane.doe@example.com",
+    },
+  };
+};
+
+export default function MyForm() {
+  const { defaultValues } = useLoaderData();
+  return (
+    <ValidatedForm
+      validator={validator}
+      method="post"
+      defaultValues={defaultValues}
+    >
+      <MyInput name="firstName" label="First Name" />
+      <MyInput name="lastName" label="Last Name" />
+      <MyInput name="email" label="Email" />
+      <MySubmitButton />
+    </ValidatedForm>
+  );
+}
+```
+
+## Nested objects and arrays
+
+You can use nested objects and arrays by using a period (`.`) or brackets (`[]`) for the field names.
+
+```tsx
+export default function MyForm() {
+  const { defaultValues } = useLoaderData();
+  return (
+    <ValidatedForm
+      validator={validator}
+      method="post"
+      defaultValues={defaultValues}
+    >
+      <MyInput name="firstName" label="First Name" />
+      <MyInput name="lastName" label="Last Name" />
+      <MyInput name="address.street" label="Street" />
+      <MyInput name="address.city" label="City" />
+      <MyInput name="phones[0].type" label="Phone 1 Type" />
+      <MyInput name="phones[0].number" label="Phone 1 Number" />
+      <MyInput name="phones[1].type" label="Phone 2 Type" />
+      <MyInput name="phones[1].number" label="Phone 2 Number" />
+      <MySubmitButton />
+    </ValidatedForm>
+  );
+}
+```
+
+# Validation Library Support
+
+This library currently includes an out-of-the-box adapter for `yup` and `zod`,
+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 😊
+
+## Creating an adapter
+
+Any object that conforms to the `Validator` type can be passed into the the `ValidatedForm`'s `validator` prop.
+
+```ts
+type FieldErrors = Record<string, string>;
+
+type ValidationResult<DataType> =
+  | { data: DataType; error: undefined }
+  | { error: FieldErrors; data: undefined };
+
+type ValidateFieldResult = { error?: string };
+
+type Validator<DataType> = {
+  validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
+  validateField: (
+    unvalidatedData: unknown,
+    field: string
+  ) => ValidateFieldResult;
+};
+```
+
+In order to make an adapter for your validation library of choice,
+you can create a function that accepts a schema from the validation library and turns it into a validator.
+
+Note the use of `createValidator`.
+It takes care of unflattening the data for nested objects and arrays
+since the form doesn't know anything about object and arrays and this should be handled by the adapter.
+For more on this you can check the implementations for `withZod` and `withYup`.
+
+The out-of-the-box support for `yup` in this library works like this:
+
+```ts
+export const withYup = <Schema extends AnyObjectSchema>(
+  validationSchema: Schema
+  // For best result with Typescript, we should type the `Validator` we return based on the provided schema
+): Validator<InferType<Schema>> =>
+  createValidator({
+    validate: (unvalidatedData) => {
+      // Validate with yup and return the validated & typed data or the error
+
+      if (isValid) return { data: { field1: "someValue" }, error: undefined };
+      else return { error: { field1: "Some error!" }, data: undefined };
+    },
+    validateField: (unvalidatedData, field) => {
+      // Validate the specific field with yup
+
+      if (isValid) return { error: undefined };
+      else return { error: "Some error" };
+    },
+  });
+```
+
+# Frequenty Asked Questions
+
+## Why are my fields triggering the native HTML validations before `remix-validated-form` ones?
+
+This is happening because you or the library you are using is passing the `required` attribute to the fields.
+This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
+If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
+We recommend this approach since the validation will still work even if JS is disabled.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "2.0.1-beta.0",
+  "version": "2.0.1-beta.1",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -16,7 +16,8 @@
     "build:main": "tsc --module CommonJS --outDir ./build",
     "test": "jest src",
     "test:watch": "jest src --watch",
-    "prepublishOnly": "npm run build:browser && npm run build:main"
+    "prepublishOnly": "cp ../../README.md ./README.md && npm run build",
+    "postpublishOnly": "rm ./README.md"
   },
   "author": {
     "name": "Aaron Pettengill",
@@ -54,6 +55,5 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "tiny-invariant": "^1.2.0"
-  },
-  "gitHead": "dab8f221d7c0c5131504215f5c19e3ecdfef97fb"
+  }
 }

package/.turbo/turbo-build.log

@@ -1,9 +0,0 @@
-$ npm run build:browser && npm run build:main
-
-> remix-validated-form@2.0.0 build:browser
-> tsc --module ESNext --outDir ./browser
-
-
-> remix-validated-form@2.0.0 build:main
-> tsc --module CommonJS --outDir ./build
-