remix-validated-form 0.0.1 → 1.0.0

package/.eslintcache

@@ -0,0 +1 @@
+[{"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts":"1","/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts":"2","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts":"3","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx":"4","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx":"5","/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts":"6"},{"size":207,"mtime":1637876506168,"results":"7","hashOfConfig":"8"},{"size":438,"mtime":1637877226360,"results":"9","hashOfConfig":"8"},{"size":1085,"mtime":1637877476573,"results":"10","hashOfConfig":"8"},{"size":1293,"mtime":1637876566355,"results":"11","hashOfConfig":"8"},{"size":1330,"mtime":1637902697212,"results":"12","hashOfConfig":"8"},{"size":2220,"mtime":1637902736281,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts",["26"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx",["27"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts",[],{"ruleId":"28","severity":1,"message":"29","line":2,"column":23,"nodeType":"30","messageId":"31","endLine":2,"endColumn":39},{"ruleId":"28","severity":1,"message":"32","line":1,"column":26,"nodeType":"30","messageId":"31","endLine":1,"endColumn":39},"@typescript-eslint/no-unused-vars","'ValidationResult' is defined but never used.","Identifier","unusedVar","'useActionData' is defined but never used."]

package/README.md

@@ -1,3 +1,182 @@
 # Remix Validated Form
 
-A form library built for [remix](https://remix.run).
+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
+- Validation library agnostic
+
+# Demo
+
+https://user-images.githubusercontent.com/25882770/143505448-c4b7e660-7a73-4005-b2ca-17c65a15ef46.mov
+
+# 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>
+  );
+}
+```
+
+# Validation Library Support
+
+This library currently includes an out-of-the-box adapter for `yup`,
+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.
+
+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>> => ({
+  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" };
+  },
+});
+```

package/browser/ValidatedForm.d.ts

@@ -0,0 +1,11 @@
+import { Form as RemixForm, useFetcher } from "@remix-run/react";
+import React, { ComponentProps } from "react";
+import { Validator } from "./validation/types";
+export declare type FormProps<DataType> = {
+    validator: Validator<DataType>;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void;
+    fetcher?: ReturnType<typeof useFetcher>;
+    defaultValues?: Partial<DataType>;
+    formRef?: React.RefObject<HTMLFormElement>;
+} & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form as RemixForm, useActionData, useFormAction, useTransition, } from "@remix-run/react";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import invariant from "tiny-invariant";
+import { FormContext } from "./internal/formContext";
+import { omit, mergeRefs } from "./internal/util";
+function useFieldErrors(fetcher) {
+    const actionData = useActionData();
+    const dataToUse = fetcher ? fetcher.data : actionData;
+    const fieldErrorsFromAction = dataToUse === null || dataToUse === void 0 ? void 0 : dataToUse.fieldErrors;
+    const [fieldErrors, setFieldErrors] = useState(fieldErrorsFromAction !== null && fieldErrorsFromAction !== void 0 ? fieldErrorsFromAction : {});
+    useEffect(() => {
+        if (fieldErrorsFromAction)
+            setFieldErrors(fieldErrorsFromAction);
+    }, [fieldErrorsFromAction]);
+    return [fieldErrors, setFieldErrors];
+}
+const useIsSubmitting = (action, fetcher) => {
+    const actionForCurrentPage = useFormAction();
+    const pendingFormSubmit = useTransition().submission;
+    return fetcher
+        ? fetcher.state === "submitting"
+        : pendingFormSubmit &&
+            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+};
+const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
+    var _a;
+    const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
+    const isSubmitting = useIsSubmitting(action, fetcher);
+    const formRef = useRef(null);
+    const contextValue = useMemo(() => ({
+        fieldErrors,
+        action,
+        defaultValues,
+        isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        clearError: (fieldName) => {
+            setFieldErrors((prev) => omit(prev, fieldName));
+        },
+        validateField: (fieldName) => {
+            invariant(formRef.current, "Cannot find reference to form");
+            const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            if (error) {
+                setFieldErrors((prev) => ({
+                    ...prev,
+                    [fieldName]: error,
+                }));
+            }
+        },
+    }), [
+        fieldErrors,
+        action,
+        defaultValues,
+        isSubmitting,
+        setFieldErrors,
+        validator,
+    ]);
+    const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : RemixForm;
+    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
+            const result = validator.validate(getDataFromForm(event.currentTarget));
+            if (result.error) {
+                event.preventDefault();
+                setFieldErrors(result.error);
+            }
+            else {
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
+            }
+        }, children: _jsx(FormContext.Provider, { value: contextValue, children: children }, void 0) }, void 0));
+}

package/browser/hooks.d.ts

@@ -0,0 +1,8 @@
+export declare const useField: (name: string) => {
+    error: string;
+    clearError: () => void;
+    validate: () => void;
+    defaultValue: any;
+};
+export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
+export declare const useIsSubmitting: () => boolean;

package/browser/hooks.js

@@ -0,0 +1,17 @@
+import { useContext, useMemo } from "react";
+import { FormContext } from "./internal/formContext";
+export const useField = (name) => {
+    const { fieldErrors, clearError, validateField, defaultValues } = useContext(FormContext);
+    const field = useMemo(() => ({
+        error: fieldErrors[name],
+        clearError: () => {
+            clearError(name);
+        },
+        validate: () => validateField(name),
+        defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name],
+    }), [clearError, defaultValues, fieldErrors, name, validateField]);
+    return field;
+};
+// test commit
+export const useFormContext = () => useContext(FormContext);
+export const useIsSubmitting = () => useFormContext().isSubmitting;

package/browser/index.js

@@ -0,0 +1,5 @@
+export * from "./hooks";
+export * from "./server";
+export * from "./ValidatedForm";
+export * from "./validation/types";
+export * from "./validation/withYup";

package/browser/internal/formContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { FieldErrors } from "../validation/types";
+export declare type FormContextValue = {
+    fieldErrors: FieldErrors;
+    clearError: (...names: string[]) => void;
+    validateField: (fieldName: string) => void;
+    action?: string;
+    isSubmitting: boolean;
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+};
+export declare const FormContext: import("react").Context<FormContextValue>;

package/browser/internal/formContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+export const FormContext = createContext({
+    fieldErrors: {},
+    clearError: () => { },
+    validateField: () => { },
+    isSubmitting: false,
+});

package/browser/internal/util.d.ts

@@ -0,0 +1,3 @@
+import type React from "react";
+export declare const omit: (obj: any, ...keys: string[]) => any;
+export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;

package/browser/internal/util.js

@@ -0,0 +1,19 @@
+export const omit = (obj, ...keys) => {
+    const result = { ...obj };
+    for (const key of keys) {
+        delete result[key];
+    }
+    return result;
+};
+export const mergeRefs = (refs) => {
+    return (value) => {
+        refs.filter(Boolean).forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+};

package/browser/server.d.ts

@@ -0,0 +1,2 @@
+import { FieldErrors } from "./validation/types";
+export declare const validationError: (errors: FieldErrors) => Response;

package/browser/server.js

@@ -0,0 +1,2 @@
+import { json } from "@remix-run/server-runtime";
+export const validationError = (errors) => json({ fieldErrors: errors }, { status: 422 });

package/browser/validation/types.d.ts

@@ -0,0 +1,15 @@
+export declare type FieldErrors = Record<string, string>;
+export declare type ValidationResult<DataType> = {
+    data: DataType;
+    error: undefined;
+} | {
+    error: FieldErrors;
+    data: undefined;
+};
+export declare type ValidateFieldResult = {
+    error?: string;
+};
+export declare type Validator<DataType> = {
+    validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
+    validateField: (unvalidatedData: unknown, field: string) => ValidateFieldResult;
+};

package/browser/validation/types.js

@@ -0,0 +1 @@
+export {};

package/browser/validation/validation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/browser/validation/validation.test.js

@@ -0,0 +1,56 @@
+import * as yup from "yup";
+import { withYup } from "..";
+const validationTestCases = [
+    {
+        name: "yup",
+        validator: withYup(yup.object({
+            firstName: yup.string().required(),
+            lastName: yup.string().required(),
+            age: yup.number(),
+        })),
+    },
+];
+// Not going to enforce exact error strings here
+const anyString = expect.any(String);
+describe("Validation", () => {
+    describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
+        describe("validate", () => {
+            it("should return the data when valid", () => {
+                const obj = {
+                    firstName: "John",
+                    lastName: "Doe",
+                    age: 30,
+                };
+                expect(validator.validate(obj)).toEqual({
+                    data: obj,
+                    error: undefined,
+                });
+            });
+            it("should return field errors when invalid", () => {
+                const obj = { age: "hi!" };
+                expect(validator.validate(obj)).toEqual({
+                    data: undefined,
+                    error: {
+                        firstName: anyString,
+                        lastName: anyString,
+                        age: anyString,
+                    },
+                });
+            });
+        });
+        describe("validateField", () => {
+            it("should not return an error if field is valid", () => {
+                const obj = { firstName: "John", lastName: 123 };
+                expect(validator.validateField(obj, "firstName")).toEqual({
+                    error: undefined,
+                });
+            });
+            it("should return an error if field is invalid", () => {
+                const obj = { firstName: "John", lastName: {} };
+                expect(validator.validateField(obj, "lastName")).toEqual({
+                    error: anyString,
+                });
+            });
+        });
+    });
+});

package/browser/validation/withYup.d.ts

@@ -0,0 +1,3 @@
+import type { AnyObjectSchema, InferType } from "yup";
+import { Validator } from "./types";
+export declare const withYup: <Schema extends AnyObjectSchema>(validationSchema: Schema) => Validator<InferType<Schema>>;

package/browser/validation/withYup.js

@@ -0,0 +1,34 @@
+const validationErrorToFieldErrors = (error) => {
+    const fieldErrors = {};
+    error.inner.forEach((innerError) => {
+        if (!innerError.path)
+            return;
+        fieldErrors[innerError.path] = innerError.message;
+    });
+    return fieldErrors;
+};
+export 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 };
+        }
+    },
+});

package/build/ValidatedForm.d.ts

@@ -0,0 +1,11 @@
+import { Form as RemixForm, useFetcher } from "@remix-run/react";
+import React, { ComponentProps } from "react";
+import { Validator } from "./validation/types";
+export declare type FormProps<DataType> = {
+    validator: Validator<DataType>;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void;
+    fetcher?: ReturnType<typeof useFetcher>;
+    defaultValues?: Partial<DataType>;
+    formRef?: React.RefObject<HTMLFormElement>;
+} & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidatedForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const react_2 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const formContext_1 = require("./internal/formContext");
+const util_1 = require("./internal/util");
+function useFieldErrors(fetcher) {
+    const actionData = (0, react_1.useActionData)();
+    const dataToUse = fetcher ? fetcher.data : actionData;
+    const fieldErrorsFromAction = dataToUse === null || dataToUse === void 0 ? void 0 : dataToUse.fieldErrors;
+    const [fieldErrors, setFieldErrors] = (0, react_2.useState)(fieldErrorsFromAction !== null && fieldErrorsFromAction !== void 0 ? fieldErrorsFromAction : {});
+    (0, react_2.useEffect)(() => {
+        if (fieldErrorsFromAction)
+            setFieldErrors(fieldErrorsFromAction);
+    }, [fieldErrorsFromAction]);
+    return [fieldErrors, setFieldErrors];
+}
+const useIsSubmitting = (action, fetcher) => {
+    const actionForCurrentPage = (0, react_1.useFormAction)();
+    const pendingFormSubmit = (0, react_1.useTransition)().submission;
+    return fetcher
+        ? fetcher.state === "submitting"
+        : pendingFormSubmit &&
+            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+};
+const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
+    var _a;
+    const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
+    const isSubmitting = useIsSubmitting(action, fetcher);
+    const formRef = (0, react_2.useRef)(null);
+    const contextValue = (0, react_2.useMemo)(() => ({
+        fieldErrors,
+        action,
+        defaultValues,
+        isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        clearError: (fieldName) => {
+            setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
+        },
+        validateField: (fieldName) => {
+            (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
+            const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            if (error) {
+                setFieldErrors((prev) => ({
+                    ...prev,
+                    [fieldName]: error,
+                }));
+            }
+        },
+    }), [
+        fieldErrors,
+        action,
+        defaultValues,
+        isSubmitting,
+        setFieldErrors,
+        validator,
+    ]);
+    const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : react_1.Form;
+    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
+            const result = validator.validate(getDataFromForm(event.currentTarget));
+            if (result.error) {
+                event.preventDefault();
+                setFieldErrors(result.error);
+            }
+            else {
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
+            }
+        }, children: (0, jsx_runtime_1.jsx)(formContext_1.FormContext.Provider, { value: contextValue, children: children }, void 0) }, void 0));
+}
+exports.ValidatedForm = ValidatedForm;

package/build/hooks.d.ts

@@ -0,0 +1,8 @@
+export declare const useField: (name: string) => {
+    error: string;
+    clearError: () => void;
+    validate: () => void;
+    defaultValue: any;
+};
+export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
+export declare const useIsSubmitting: () => boolean;

package/build/hooks.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsSubmitting = exports.useFormContext = exports.useField = void 0;
+const react_1 = require("react");
+const formContext_1 = require("./internal/formContext");
+const useField = (name) => {
+    const { fieldErrors, clearError, validateField, defaultValues } = (0, react_1.useContext)(formContext_1.FormContext);
+    const field = (0, react_1.useMemo)(() => ({
+        error: fieldErrors[name],
+        clearError: () => {
+            clearError(name);
+        },
+        validate: () => validateField(name),
+        defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name],
+    }), [clearError, defaultValues, fieldErrors, name, validateField]);
+    return field;
+};
+exports.useField = useField;
+// test commit
+const useFormContext = () => (0, react_1.useContext)(formContext_1.FormContext);
+exports.useFormContext = useFormContext;
+const useIsSubmitting = () => (0, exports.useFormContext)().isSubmitting;
+exports.useIsSubmitting = useIsSubmitting;

package/build/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./hooks";
+export * from "./server";
+export * from "./ValidatedForm";
+export * from "./validation/types";
+export * from "./validation/withYup";

package/build/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./server"), exports);
+__exportStar(require("./ValidatedForm"), exports);
+__exportStar(require("./validation/types"), exports);
+__exportStar(require("./validation/withYup"), exports);

package/build/internal/formContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { FieldErrors } from "../validation/types";
+export declare type FormContextValue = {
+    fieldErrors: FieldErrors;
+    clearError: (...names: string[]) => void;
+    validateField: (fieldName: string) => void;
+    action?: string;
+    isSubmitting: boolean;
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+};
+export declare const FormContext: import("react").Context<FormContextValue>;