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

package/README.md

@@ -1,235 +0,0 @@
-# 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/browser/flatten.d.ts

@@ -1,4 +0,0 @@
-import { GenericObject } from ".";
-export declare const objectFromPathEntries: (entries: [string, any][]) => {};
-/** Flatten an object so there are no nested objects or arrays */
-export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/browser/flatten.js

@@ -1,35 +0,0 @@
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-import assign from "lodash/assign";
-import isArray from "lodash/isArray";
-import isObject from "lodash/isObject";
-import keys from "lodash/keys";
-import mapKeys from "lodash/mapKeys";
-import set from "lodash/set";
-import transform from "lodash/transform";
-export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, value), {});
-/** Flatten an object so there are no nested objects or arrays */
-export function flatten(obj, preserveEmpty = false) {
-    return transform(obj, function (result, value, key) {
-        if (isObject(value)) {
-            let flatMap = mapKeys(flatten(value, preserveEmpty), function (_mvalue, mkey) {
-                if (isArray(value)) {
-                    let index = mkey.indexOf(".");
-                    if (-1 !== index) {
-                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-                    }
-                    return `${key}[${mkey}]`;
-                }
-                return `${key}.${mkey}`;
-            });
-            assign(result, flatMap);
-            // Preverve Empty arrays and objects
-            if (preserveEmpty && keys(flatMap).length === 0) {
-                result[key] = value;
-            }
-        }
-        else {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-}

package/build/flatten.d.ts

@@ -1,4 +0,0 @@
-import { GenericObject } from ".";
-export declare const objectFromPathEntries: (entries: [string, any][]) => {};
-/** Flatten an object so there are no nested objects or arrays */
-export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/build/flatten.js

@@ -1,43 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.flatten = exports.objectFromPathEntries = void 0;
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-const assign_1 = __importDefault(require("lodash/assign"));
-const isArray_1 = __importDefault(require("lodash/isArray"));
-const isObject_1 = __importDefault(require("lodash/isObject"));
-const keys_1 = __importDefault(require("lodash/keys"));
-const mapKeys_1 = __importDefault(require("lodash/mapKeys"));
-const set_1 = __importDefault(require("lodash/set"));
-const transform_1 = __importDefault(require("lodash/transform"));
-const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => (0, set_1.default)(acc, key, value), {});
-exports.objectFromPathEntries = objectFromPathEntries;
-/** Flatten an object so there are no nested objects or arrays */
-function flatten(obj, preserveEmpty = false) {
-    return (0, transform_1.default)(obj, function (result, value, key) {
-        if ((0, isObject_1.default)(value)) {
-            let flatMap = (0, mapKeys_1.default)(flatten(value, preserveEmpty), function (_mvalue, mkey) {
-                if ((0, isArray_1.default)(value)) {
-                    let index = mkey.indexOf(".");
-                    if (-1 !== index) {
-                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-                    }
-                    return `${key}[${mkey}]`;
-                }
-                return `${key}.${mkey}`;
-            });
-            (0, assign_1.default)(result, flatMap);
-            // Preverve Empty arrays and objects
-            if (preserveEmpty && (0, keys_1.default)(flatMap).length === 0) {
-                result[key] = value;
-            }
-        }
-        else {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-}
-exports.flatten = flatten;

package/sample-app/.env

@@ -1,7 +0,0 @@
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server and MongoDB (Preview).
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="file:./dev.db"

package/sample-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/sample-app/app/components/ErrorBox.tsx

@@ -1,34 +0,0 @@
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "@chakra-ui/react";
-
-type ErrorProps = {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-};
-export function ErrorBox({ title, description }: ErrorProps) {
-  return (
-    <Alert
-      status="error"
-      variant="subtle"
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="center"
-      textAlign="center"
-      height="200px"
-    >
-      <AlertIcon boxSize="40px" mr={0} />
-      {title && (
-        <AlertTitle mt={4} mb={1} fontSize="lg">
-          {title}
-        </AlertTitle>
-      )}
-      {description && (
-        <AlertDescription maxWidth="sm">{description}</AlertDescription>
-      )}
-    </Alert>
-  );
-}

package/sample-app/app/components/FormInput.tsx

@@ -1,40 +0,0 @@
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  InputProps,
-} from "@chakra-ui/react";
-import { useField } from "../../remix-validated-form";
-
-type FormInputProps = {
-  name: string;
-  label: string;
-  isRequired?: boolean;
-};
-
-export const FormInput = ({
-  name,
-  label,
-  isRequired,
-  ...rest
-}: FormInputProps & InputProps) => {
-  const { validate, clearError, defaultValue, error } = useField(name);
-
-  return (
-    <>
-      <FormControl isInvalid={!!error} isRequired={isRequired}>
-        <FormLabel htmlFor={name}>{label}</FormLabel>
-        <Input
-          id={name}
-          name={name}
-          onBlur={validate}
-          onChange={clearError}
-          defaultValue={defaultValue}
-          {...rest}
-        />
-        {error && <FormErrorMessage>{error}</FormErrorMessage>}
-      </FormControl>
-    </>
-  );
-};

package/sample-app/app/components/FormSelect.tsx

@@ -1,37 +0,0 @@
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Select,
-  SelectProps,
-} from "@chakra-ui/react";
-import { useField } from "../../remix-validated-form";
-
-type FormSelectProps = {
-  name: string;
-  label: string;
-  isRequired?: boolean;
-};
-
-export const FormSelect = ({
-  name,
-  label,
-  isRequired,
-  ...rest
-}: FormSelectProps & SelectProps) => {
-  const { validate, clearError, defaultValue, error } = useField(name);
-  return (
-    <FormControl isInvalid={!!error} isRequired={isRequired}>
-      <FormLabel htmlFor={name}>{label}</FormLabel>
-      <Select
-        id={name}
-        name={name}
-        onBlur={validate}
-        onChange={clearError}
-        defaultValue={defaultValue}
-        {...rest}
-      />
-      {error && <FormErrorMessage>{error}</FormErrorMessage>}
-    </FormControl>
-  );
-};

package/sample-app/app/components/SubjectForm.tsx

@@ -1,150 +0,0 @@
-import {
-  Box,
-  Button,
-  Stack,
-  HStack,
-  Container,
-  VStack,
-} from "@chakra-ui/react";
-import { useState } from "react";
-import { useNavigate } from "remix";
-import * as z from "zod";
-import {
-  ValidatedForm,
-  withZod,
-  useIsSubmitting,
-} from "../../remix-validated-form";
-import { FormInput } from "./FormInput";
-import { FormSelect } from "./FormSelect";
-
-const subjectSchema = z.object({
-  name: z.string().nonempty("Subject Name can't be empty"),
-  description: z.string().nonempty("Subject Description can't be empty"),
-  teacher: z.object({
-    name: z.string().nonempty("Teacher Name can't be empty"),
-    email: z
-      .string()
-      .email("Teacher Email is invalid")
-      .nonempty("Teacher Email can't be empty"),
-  }),
-  subjectDays: z
-    .object({
-      day: z.string().nonempty("Day can't be empty"),
-    })
-    .array(),
-});
-
-export const subjectFormValidator = withZod(subjectSchema);
-
-export function SubjectForm({
-  defaultValues,
-}: {
-  defaultValues?: Partial<z.infer<typeof subjectSchema>>;
-}) {
-  let navigate = useNavigate();
-  const isSubmitting = useIsSubmitting();
-  const [daysKeys, setDaysKeys] = useState(
-    defaultValues?.subjectDays && defaultValues.subjectDays.length > 0
-      ? Array.from(Array(defaultValues.subjectDays.length).keys())
-      : [0]
-  );
-
-  return (
-    <Box as="main" py="8" flex="1">
-      <Container maxW="7xl" id="xxx">
-        <Box bg="white" p="6" rounded="lg" shadow="base">
-          <Box px="10" maxWidth="7xl">
-            <ValidatedForm
-              validator={subjectFormValidator}
-              defaultValues={defaultValues}
-              method="post"
-              noValidate
-            >
-              <Stack spacing="6" direction="column">
-                <Stack direction="row" spacing="6" align="center" width="full">
-                  <FormInput name="name" label="Name" isRequired />
-                  <FormInput
-                    name="description"
-                    label="Description"
-                    isRequired
-                  />
-                </Stack>
-                <Stack direction="row" spacing="6" align="center" width="full">
-                  <FormInput
-                    name="teacher.name"
-                    label="Teacher Name"
-                    isRequired
-                  />
-                  <FormInput
-                    name="teacher.email"
-                    label="Teacher Email"
-                    isRequired
-                  />
-                </Stack>
-                <VStack width="full" spacing="6" alignItems="flex-start">
-                  {daysKeys.map((key, index) => (
-                    <Stack direction="row" width="full" key={key}>
-                      <FormSelect
-                        name={`subjectDays[${index}].day`}
-                        label="Subject Day"
-                        isRequired
-                        placeholder="Select Day"
-                      >
-                        <option value="Monday">Monday</option>
-                        <option value="Tuesday">Tuesday</option>
-                        <option value="Wednesday">Wednesday</option>
-                        <option value="Thursday">Thursday</option>
-                        <option value="Friday">Friday</option>
-                        <option value="Saturday">Saturday</option>
-                        <option value="Sunday">Sunday</option>
-                      </FormSelect>
-                      {daysKeys.length > 1 && (
-                        <Box pt="8">
-                          <Button
-                            colorScheme="red"
-                            onClick={() =>
-                              setDaysKeys(
-                                daysKeys.filter(
-                                  (key2, index2) => index !== index2
-                                )
-                              )
-                            }
-                          >
-                            Delete
-                          </Button>
-                        </Box>
-                      )}
-                    </Stack>
-                  ))}
-                  <Button
-                    colorScheme="blue"
-                    size="xs"
-                    onClick={() =>
-                      setDaysKeys([...daysKeys, Math.max(...daysKeys) + 1])
-                    }
-                  >
-                    Add Day
-                  </Button>
-                </VStack>
-
-                <HStack width="full" justifyContent="center" mt="8">
-                  <Button
-                    type="submit"
-                    colorScheme="blue"
-                    disabled={isSubmitting}
-                    isLoading={isSubmitting}
-                  >
-                    {isSubmitting ? "Sending..." : "Send"}
-                  </Button>
-                  <Button variant="outline" onClick={() => navigate(-1)}>
-                    Cancel
-                  </Button>
-                </HStack>
-              </Stack>
-            </ValidatedForm>
-          </Box>
-        </Box>
-      </Container>
-    </Box>
-  );
-}

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

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

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