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

package/README.md

@@ -1,230 +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(
-    Object.fromEntries(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 unflatten 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 are 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/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,
-  });
-}

package/sample-app/app/root.tsx

@@ -1,92 +0,0 @@
-import { ChakraProvider } from "@chakra-ui/react";
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useCatch,
-} from "remix";
-import { ErrorBox } from "./components/ErrorBox";
-
-// https://remix.run/api/conventions#default-export
-// https://remix.run/api/conventions#route-filenames
-export default function App() {
-  return (
-    <Document>
-      <Outlet />
-    </Document>
-  );
-}
-
-// https://remix.run/docs/en/v1/api/conventions#errorboundary
-export function ErrorBoundary({ error }: { error: Error }) {
-  console.error(error);
-  return (
-    <Document title="Error!">
-      <ErrorBox title={`There was an error`} description={error.message} />
-    </Document>
-  );
-}
-
-// https://remix.run/docs/en/v1/api/conventions#catchboundary
-export function CatchBoundary() {
-  let caught = useCatch();
-
-  let message;
-  switch (caught.status) {
-    case 401:
-      message = (
-        <p>
-          Oops! Looks like you tried to visit a page that you do not have access
-          to.
-        </p>
-      );
-      break;
-    case 404:
-      message = (
-        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
-      );
-      break;
-
-    default:
-      throw new Error(caught.data || caught.statusText);
-  }
-
-  return (
-    <Document title={`${caught.status} ${caught.statusText}`}>
-      <ErrorBox
-        title={`${caught.status}: ${caught.statusText}`}
-        description={message}
-      />
-    </Document>
-  );
-}
-
-function Document({
-  children,
-  title,
-}: {
-  children: React.ReactNode;
-  title?: string;
-}) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        {title ? <title>{title}</title> : null}
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <ChakraProvider>{children}</ChakraProvider>
-
-        <ScrollRestoration />
-        <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
-      </body>
-    </html>
-  );
-}

package/sample-app/app/routes/index.tsx

@@ -1,5 +0,0 @@
-import { LoaderFunction, redirect } from "remix";
-
-export let loader: LoaderFunction = () => {
-  return redirect("/subjects");
-};