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

package/build/validation/validation.test.js

@@ -30,6 +30,17 @@ const validationTestCases = [
             firstName: yup.string().required(),
             lastName: yup.string().required(),
             age: yup.number(),
+            address: yup
+                .object({
+                streetAddress: yup.string().required(),
+                city: yup.string().required(),
+                country: yup.string().required(),
+            })
+                .required(),
+            pets: yup.array().of(yup.object({
+                animal: yup.string().required(),
+                name: yup.string().required(),
+            })),
         })),
     },
     {
@@ -38,6 +49,18 @@ const validationTestCases = [
             firstName: zod_1.z.string().nonempty(),
             lastName: zod_1.z.string().nonempty(),
             age: zod_1.z.optional(zod_1.z.number()),
+            address: zod_1.z.preprocess((value) => (value == null ? {} : value), zod_1.z.object({
+                streetAddress: zod_1.z.string().nonempty(),
+                city: zod_1.z.string().nonempty(),
+                country: zod_1.z.string().nonempty(),
+            })),
+            pets: zod_1.z
+                .object({
+                animal: zod_1.z.string().nonempty(),
+                name: zod_1.z.string().nonempty(),
+            })
+                .array()
+                .optional(),
         })),
     },
 ];
@@ -47,41 +70,102 @@ describe("Validation", () => {
     describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
         describe("validate", () => {
             it("should return the data when valid", () => {
-                const obj = {
+                const person = {
                     firstName: "John",
                     lastName: "Doe",
                     age: 30,
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: "Anytown",
+                        country: "USA",
+                    },
+                    pets: [{ animal: "dog", name: "Fido" }],
                 };
-                expect(validator.validate(obj)).toEqual({
-                    data: obj,
+                expect(validator.validate(person)).toEqual({
+                    data: person,
                     error: undefined,
                 });
             });
             it("should return field errors when invalid", () => {
-                const obj = { age: "hi!" };
+                const obj = { age: "hi!", pets: [{ animal: "dog" }] };
                 expect(validator.validate(obj)).toEqual({
                     data: undefined,
                     error: {
                         firstName: anyString,
                         lastName: anyString,
                         age: anyString,
+                        "address.city": anyString,
+                        "address.country": anyString,
+                        "address.streetAddress": anyString,
+                        "pets[0].name": anyString,
                     },
                 });
             });
         });
         describe("validateField", () => {
             it("should not return an error if field is valid", () => {
-                const obj = {
+                const person = {
                     firstName: "John",
                     lastName: {}, // invalid, but we should only be validating firstName
                 };
-                expect(validator.validateField(obj, "firstName")).toEqual({
+                expect(validator.validateField(person, "firstName")).toEqual({
+                    error: undefined,
+                });
+            });
+            it("should not return an error if a nested field is valid", () => {
+                const person = {
+                    firstName: "John",
+                    lastName: {},
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: "Anytown",
+                        country: "USA",
+                    },
+                    pets: [{ animal: "dog", name: "Fido" }],
+                };
+                expect(validator.validateField(person, "address.streetAddress")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "address.city")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "address.country")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "pets[0].animal")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "pets[0].name")).toEqual({
                     error: undefined,
                 });
             });
             it("should return an error if field is invalid", () => {
-                const obj = { firstName: "John", lastName: {} };
-                expect(validator.validateField(obj, "lastName")).toEqual({
+                const person = {
+                    firstName: "John",
+                    lastName: {},
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: 1234,
+                    },
+                };
+                expect(validator.validateField(person, "lastName")).toEqual({
+                    error: anyString,
+                });
+            });
+            it("should return an error if a nested field is invalid", () => {
+                const person = {
+                    firstName: "John",
+                    lastName: {},
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: 1234,
+                    },
+                    pets: [{ animal: "dog" }],
+                };
+                expect(validator.validateField(person, "address.country")).toEqual({
+                    error: anyString,
+                });
+                expect(validator.validateField(person, "pets[0].name")).toEqual({
                     error: anyString,
                 });
             });

package/build/validation/withYup.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withYup = void 0;
+const createValidator_1 = require("./createValidator");
 const validationErrorToFieldErrors = (error) => {
     const fieldErrors = {};
     error.inner.forEach((innerError) => {
@@ -10,29 +11,31 @@ const validationErrorToFieldErrors = (error) => {
     });
     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 };
-        }
-    },
-});
+const withYup = (validationSchema) => {
+    return (0, createValidator_1.createValidator)({
+        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/build/validation/withZod.js

@@ -1,6 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withZod = void 0;
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const toPath_1 = __importDefault(require("lodash/toPath"));
+const createValidator_1 = require("./createValidator");
 const getIssuesForError = (err) => {
     return err.issues.flatMap((issue) => {
         if ("unionErrors" in issue) {
@@ -11,15 +17,21 @@ const getIssuesForError = (err) => {
         }
     });
 };
+function pathToString(array) {
+    return array.reduce(function (string, item) {
+        var prefix = string === "" ? "" : ".";
+        return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
+    }, "");
+}
 function withZod(zodSchema) {
-    return {
+    return (0, createValidator_1.createValidator)({
         validate: (value) => {
             const result = zodSchema.safeParse(value);
             if (result.success)
                 return { data: result.data, error: undefined };
             const fieldErrors = {};
             getIssuesForError(result.error).forEach((issue) => {
-                const path = issue.path.join(".");
+                const path = pathToString(issue.path);
                 if (!fieldErrors[path])
                     fieldErrors[path] = issue.message;
             });
@@ -31,9 +43,12 @@ function withZod(zodSchema) {
             if (result.success)
                 return { error: undefined };
             return {
-                error: (_a = getIssuesForError(result.error).find((issue) => issue.path.join(".") === field)) === null || _a === void 0 ? void 0 : _a.message,
+                error: (_a = getIssuesForError(result.error).find((issue) => {
+                    const allPathsAsString = issue.path.map((p) => `${p}`);
+                    return (0, isEqual_1.default)(allPathsAsString, (0, toPath_1.default)(field));
+                })) === null || _a === void 0 ? void 0 : _a.message,
             };
         },
-    };
+    });
 }
 exports.withZod = withZod;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "1.1.0",
+  "version": "1.1.1-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -14,7 +14,10 @@
     "build:browser": "tsc --project tsconfig.json --module ESNext --outDir ./browser",
     "build:main": "tsc --project tsconfig.json --module CommonJS --outDir ./build",
     "build:tests": "tsc --project tsconfig.json --module CommonJS --outDir ./test-app/remix-validated-form",
+    "build:sample": "tsc --project tsconfig.json --module CommonJS --outDir ./sample-app/remix-validated-form",
+    "sample-app": "npm run build:sample && cd sample-app && npm run dev",
     "test": "jest src",
+    "test:watch": "jest src --watch",
     "lint": "eslint .",
     "prettier": "prettier . --write",
     "prepare": "husky install",
@@ -35,22 +38,23 @@
     "validation"
   ],
   "peerDependencies": {
-    "@remix-run/react": "^1.0.0",
-    "@remix-run/server-runtime": "^1.0.0",
+    "@remix-run/react": "^1.0.6",
+    "@remix-run/server-runtime": "^1.0.6",
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@remix-run/react": "^1.0.0",
-    "@remix-run/server-runtime": "^1.0.0",
+    "@remix-run/react": "^1.0.6",
+    "@remix-run/server-runtime": "^1.0.6",
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.36",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@types/lodash": "^4.14.178",
+    "@types/react": "^17.0.37",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "^5.10.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -58,16 +62,17 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "fetch-blob": "^3.1.3",
     "husky": "^7.0.4",
-    "jest": "^27.3.1",
+    "jest": "^27.4.4",
     "lint-staged": "^12.1.2",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.5.2",
+    "ts-jest": "^27.1.1",
+    "typescript": "^4.5.3",
     "yup": "^0.32.11",
     "zod": "^3.11.6"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "tiny-invariant": "^1.2.0"
   },
   "lint-staged": {

package/sample-app/.env

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

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

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

@@ -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);