remix-validated-form 1.1.0 → 2.0.0

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

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

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

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

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

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

package/sample-app/app/root.tsx

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

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

package/sample-app/app/routes/subjects/$id.edit.tsx

@@ -0,0 +1,98 @@
+import { Box, Container, Heading } from "@chakra-ui/react";
+import {
+  ActionFunction,
+  json,
+  LoaderFunction,
+  redirect,
+  useCatch,
+  useLoaderData,
+  useParams,
+} from "remix";
+import { z } from "zod";
+import { ErrorBox } from "~/components/ErrorBox";
+import { SubjectForm, subjectFormValidator } from "~/components/SubjectForm";
+import { db } from "~/services/db.server";
+import { SubjectComplete } from "~/types";
+import { validationError } from "../../../remix-validated-form";
+
+export const loader: LoaderFunction = async ({ params }) => {
+  const { id } = z.object({ id: z.string() }).parse(params);
+
+  const subject = await db.subject.findUnique({
+    where: { id: +id },
+    include: {
+      teacher: true,
+      subjectDays: { orderBy: { day: "asc" } },
+    },
+  });
+
+  if (!subject) {
+    throw new Response(`Subject ${id} doesn't exist`, {
+      status: 404,
+    });
+  }
+
+  return json(subject);
+};
+
+export const action: ActionFunction = async ({ request, params }) => {
+  const { id } = z.object({ id: z.string() }).parse(params);
+
+  const fieldValues = subjectFormValidator.validate(await request.formData());
+  if (fieldValues.error) return validationError(fieldValues.error);
+
+  const { teacher, subjectDays, ...updatedSubject } = fieldValues.data;
+
+  await db.subject.update({
+    where: { id: +id },
+    data: {
+      ...updatedSubject,
+      teacher: {
+        update: teacher,
+      },
+      subjectDays: {
+        deleteMany: {},
+        create: subjectDays,
+      },
+    },
+  });
+
+  return redirect("/subjects");
+};
+
+export default function NewSubject() {
+  const subject = useLoaderData<SubjectComplete | null>();
+  return (
+    <>
+      <Box bg="white" pt="4" pb="4" shadow="sm">
+        <Container maxW="7xl">
+          <Heading size="lg" mb="0">
+            Create Subject
+          </Heading>
+        </Container>
+      </Box>
+
+      <Box as="main" py="8" flex="1">
+        <Container maxW="7xl">
+          <SubjectForm defaultValues={subject ?? undefined} />
+        </Container>
+      </Box>
+    </>
+  );
+}
+
+export function CatchBoundary() {
+  const caught = useCatch();
+  const params = useParams();
+  if (caught.status === 404) {
+    return <ErrorBox title={`Subject ${params.id} doesn't exist`} />;
+  }
+  throw new Error(`Unhandled error: ${caught.status}`);
+}
+
+export function ErrorBoundary() {
+  const { id } = useParams();
+  return (
+    <ErrorBox title={`There was an error subject by the id ${id}. Sorry.`} />
+  );
+}

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

@@ -0,0 +1,112 @@
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Spacer,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+import { Subject, SubjectDays, Teacher } from "@prisma/client";
+import {
+  json,
+  Link,
+  LoaderFunction,
+  useCatch,
+  useLoaderData,
+  useParams,
+} from "remix";
+import { db } from "~/services/db.server";
+
+export const loader: LoaderFunction = async () => {
+  const subjects = await db.subject.findMany({
+    include: { teacher: true, subjectDays: true },
+  });
+  return json(subjects);
+};
+
+export default function Subjects() {
+  const subjects =
+    useLoaderData<
+      (Subject & { teacher: Teacher; subjectDays: SubjectDays[] })[]
+    >();
+  return (
+    <>
+      <Box bg="white" pt="4" pb="4" shadow="sm">
+        <Container maxW="7xl">
+          <Flex>
+            <Heading size="lg" mb="0">
+              Subjects
+            </Heading>
+            <Spacer />
+            <Link to="new">
+              <Button colorScheme="blue">New</Button>
+            </Link>
+          </Flex>
+        </Container>
+      </Box>
+
+      <Box as="main" py="8" flex="1">
+        <Container maxW="7xl">
+          <Box bg="white" p="6" rounded="lg" shadow="base" overflowX="auto">
+            <Table borderWidth="1px" fontSize="sm">
+              <Thead bg="white">
+                <Tr>
+                  <Th whiteSpace="nowrap" scope="col">
+                    Subject
+                  </Th>
+                  <Th whiteSpace="nowrap" scope="col">
+                    Teacher
+                  </Th>
+                  <Th whiteSpace="nowrap" scope="col"></Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {subjects.map((subject) => (
+                  <Tr key={subject.id}>
+                    <Td whiteSpace="nowrap">{subject.name}</Td>
+                    <Td>
+                      {subject.teacher.name} ({subject.teacher.email})
+                    </Td>
+                    <Td textAlign="right">
+                      <Link to={`${subject.id}/edit`}>
+                        <Button variant="link" colorScheme="blue">
+                          Edit
+                        </Button>
+                      </Link>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </Box>
+        </Container>
+      </Box>
+    </>
+  );
+}
+
+export function CatchBoundary() {
+  const caught = useCatch();
+  const params = useParams();
+  if (caught.status === 404) {
+    return (
+      <div className="error-container">
+        Huh? What the heck is "{params.id}"?
+      </div>
+    );
+  }
+  throw new Error(`Unhandled error: ${caught.status}`);
+}
+
+export function ErrorBoundary() {
+  const { jokeId } = useParams();
+  return (
+    <div className="error-container">{`There was an error loading joke by the id ${jokeId}. Sorry.`}</div>
+  );
+}

package/sample-app/app/routes/subjects/new.tsx

@@ -0,0 +1,46 @@
+import { Box, Container, Heading } from "@chakra-ui/react";
+import { ActionFunction, redirect } from "remix";
+import { SubjectForm, subjectFormValidator } from "~/components/SubjectForm";
+import { db } from "~/services/db.server";
+import { validationError } from "../../../remix-validated-form";
+
+export const action: ActionFunction = async ({ request }) => {
+  const fieldValues = subjectFormValidator.validate(await request.formData());
+  if (fieldValues.error) return validationError(fieldValues.error);
+
+  const { teacher, subjectDays, ...newSubject } = fieldValues.data;
+
+  await db.subject.create({
+    data: {
+      ...newSubject,
+      teacher: {
+        create: teacher,
+      },
+      subjectDays: {
+        create: subjectDays,
+      },
+    },
+  });
+
+  return redirect("/subjects");
+};
+
+export default function NewSubject() {
+  return (
+    <>
+      <Box bg="white" pt="4" pb="4" shadow="sm">
+        <Container maxW="7xl">
+          <Heading size="lg" mb="0">
+            Create Subject
+          </Heading>
+        </Container>
+      </Box>
+
+      <Box as="main" py="8" flex="1">
+        <Container maxW="7xl">
+          <SubjectForm />
+        </Container>
+      </Box>
+    </>
+  );
+}

package/sample-app/app/services/db.server.ts

@@ -0,0 +1,23 @@
+import { PrismaClient } from "@prisma/client";
+
+let db: PrismaClient;
+
+declare global {
+  var __db: PrismaClient | undefined;
+}
+
+// this is needed because in development we don't want to restart
+// the server with every change, but we want to make sure we don't
+// create a new connection to the DB with every change either.
+if (process.env.NODE_ENV === "production") {
+  db = new PrismaClient();
+  db.$connect();
+} else {
+  if (!global.__db) {
+    global.__db = new PrismaClient();
+    global.__db.$connect();
+  }
+  db = global.__db;
+}
+
+export { db };

package/sample-app/app/types.ts

@@ -0,0 +1,6 @@
+import { Subject, SubjectDays, Teacher } from "@prisma/client";
+
+export type SubjectComplete = Subject & {
+  teacher: Teacher;
+  subjectDays: SubjectDays[];
+};