remix-validated-form 3.3.1 → 4.0.0-beta.0

package/src/internal/getInputProps.ts

@@ -17,12 +17,20 @@ export type CreateGetInputPropsOptions = {
   name: string;
 };
 
-// Using Omit<T, HandledProps> breaks type inference sometimes for some reason.
-// Doing T & OmitHandledProps gives us the same behavior without breaking type inference.
-type OmitHandledProps = { name?: never; defaultValue?: never };
+type HandledProps = "name" | "defaultValue" | "defaultChecked";
+type Callbacks = "onChange" | "onBlur";
 
-export type GetInputProps = <T extends Record<string, any>>(
-  props?: T & OmitHandledProps
+type MinimalInputProps = {
+  onChange?: (...args: any[]) => void;
+  onBlur?: (...args: any[]) => void;
+  defaultValue?: any;
+  defaultChecked?: boolean;
+  name?: string;
+  type?: string;
+};
+
+export type GetInputProps = <T extends MinimalInputProps>(
+  props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>
 ) => T;
 
 const defaultValidationBehavior: ValidationBehaviorOptions = {
@@ -31,6 +39,13 @@ const defaultValidationBehavior: ValidationBehaviorOptions = {
   whenSubmitted: "onChange",
 };
 
+const getCheckboxDefaultChecked = (value: string, defaultValue: any) => {
+  if (Array.isArray(defaultValue)) return defaultValue.includes(value);
+  if (typeof defaultValue === "boolean") return defaultValue;
+  if (typeof defaultValue === "string") return defaultValue === value;
+  return undefined;
+};
+
 export const createGetInputProps = ({
   clearError,
   validate,
@@ -46,14 +61,14 @@ export const createGetInputProps = ({
     ...validationBehavior,
   };
 
-  return <T extends Record<string, any>>(props = {} as any) => {
+  return <T extends MinimalInputProps>(props = {} as any) => {
     const behavior = hasBeenSubmitted
       ? validationBehaviors.whenSubmitted
       : touched
       ? validationBehaviors.whenTouched
       : validationBehaviors.initial;
 
-    const result: T = {
+    const inputProps: T = {
       ...props,
       onChange: (...args: unknown[]) => {
         if (behavior === "onChange") validate();
@@ -65,10 +80,22 @@ export const createGetInputProps = ({
         setTouched(true);
         return props?.onBlur?.(...args);
       },
-      defaultValue,
       name,
     };
 
-    return result;
+    if (inputProps.type === "checkbox") {
+      const value = props.value ?? "on";
+      inputProps.defaultChecked = getCheckboxDefaultChecked(
+        value,
+        defaultValue
+      );
+    } else if (inputProps.type === "radio") {
+      const value = props.value ?? "on";
+      inputProps.defaultChecked = defaultValue === value;
+    } else {
+      inputProps.defaultValue = defaultValue;
+    }
+
+    return inputProps;
   };
 };

package/src/server.ts

@@ -1,26 +1,33 @@
 import { json } from "@remix-run/server-runtime";
-import { FieldErrors } from "./validation/types";
+import {
+  ValidatorError,
+  ValidationErrorResponseData,
+} from "./validation/types";
 
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
- * The `ValidatedForm` on the frontend will automatically display the errors
- * if this is returned from the action.
+ * When you return this from your action, `ValidatedForm` on the frontend will automatically
+ * display the errors on the correct fields on the correct form.
+ *
+ * _Recommended_: You can also provide a second argument to `validationError`
+ * to specify how to repopulate the form when JS is disabled.
+ *
+ * @example
+ * ```ts
+ * const result = validator.validate(await request.formData());
+ * if (result.error) return validationError(result.error, result.submittedData);
+ * ```
  */
-export const validationError = (
-  errors: FieldErrors,
-  submittedData?: unknown
-) => {
-  if (submittedData) {
-    return json(
-      {
-        fieldErrors: {
-          ...errors,
-          _submittedData: submittedData,
-        },
-      },
-      { status: 422 }
-    );
-  }
-
-  return json({ fieldErrors: errors }, { status: 422 });
-};
+export function validationError(
+  error: ValidatorError,
+  repopulateFields?: unknown
+): Response {
+  return json<ValidationErrorResponseData>(
+    {
+      fieldErrors: error.fieldErrors,
+      subaction: error.subaction,
+      repopulateFields,
+    },
+    { status: 422 }
+  );
+}

package/src/types.ts

@@ -0,0 +1 @@
+export type ValidationState = "idle" | "validating" | "valid" | "invalid";

package/src/validation/createValidator.ts

@@ -1,4 +1,4 @@
-import { GenericObject, Validator } from "..";
+import { CreateValidatorArg, GenericObject, Validator } from "..";
 import { objectFromPathEntries } from "../internal/flatten";
 
 const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
@@ -14,19 +14,30 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
  * It provides built-in handling for unflattening nested objects and
  * extracting the values from FormData.
  */
-export function createValidator<T>(validator: Validator<T>): Validator<T> {
+export function createValidator<T>(
+  validator: CreateValidatorArg<T>
+): Validator<T> {
   return {
-    validate: (value: GenericObject | FormData) => {
+    validate: async (value) => {
       const data = preprocessFormData(value);
-      const result = validator.validate(data);
+      const result = await validator.validate(data);
+
       if (result.error) {
-        // Ideally, we should probably be returning a nested object like
-        // { fieldErrors: {}, submittedData: {} }
-        // We should do this in the next major version of the library
-        // but for now, we can sneak it in with the fieldErrors.
-        result.error._submittedData = data as any;
+        return {
+          data: undefined,
+          error: {
+            fieldErrors: result.error,
+            subaction: data.subaction,
+          },
+          submittedData: data,
+        };
       }
-      return result;
+
+      return {
+        data: result.data,
+        error: undefined,
+        submittedData: data,
+      };
     },
     validateField: (data: GenericObject | FormData, field: string) =>
       validator.validateField(preprocessFormData(data), field),

package/src/validation/types.ts

@@ -2,16 +2,33 @@ export type FieldErrors = Record<string, string>;
 
 export type TouchedFields = Record<string, boolean>;
 
-export type FieldErrorsWithData = FieldErrors & { _submittedData: any };
-
 export type GenericObject = { [key: string]: any };
 
+export type ValidatorError = {
+  subaction?: string;
+  fieldErrors: FieldErrors;
+};
+
+export type ValidationErrorResponseData = {
+  subaction?: string;
+  fieldErrors: FieldErrors;
+  repopulateFields?: unknown;
+};
+
+export type BaseResult = { submittedData: GenericObject };
+export type ErrorResult = BaseResult & {
+  error: ValidatorError;
+  data: undefined;
+};
+export type SuccessResult<DataType> = BaseResult & {
+  data: DataType;
+  error: undefined;
+};
+
 /**
  * The result when validating a form.
  */
-export type ValidationResult<DataType> =
-  | { data: DataType; error: undefined }
-  | { error: FieldErrors; data: undefined };
+export type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
 
 /**
  * The result when validating an individual field in a form.
@@ -22,11 +39,25 @@ export type ValidateFieldResult = { error?: string };
  * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
  */
 export type Validator<DataType> = {
-  validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
+  validate: (
+    unvalidatedData: GenericObject
+  ) => Promise<ValidationResult<DataType>>;
+  validateField: (
+    unvalidatedData: GenericObject,
+    field: string
+  ) => Promise<ValidateFieldResult>;
+};
+
+export type Valid<DataType> = { data: DataType; error: undefined };
+export type Invalid = { error: FieldErrors; data: undefined };
+export type CreateValidatorArg<DataType> = {
+  validate: (
+    unvalidatedData: GenericObject
+  ) => Promise<Valid<DataType> | Invalid>;
   validateField: (
     unvalidatedData: GenericObject,
     field: string
-  ) => ValidateFieldResult;
+  ) => Promise<ValidateFieldResult>;
 };
 
 export type ValidatorData<T extends Validator<any>> = T extends Validator<