@conform-to/react 0.4.0-pre.2 → 0.4.0

package/README.md

@@ -11,10 +11,9 @@
 - [useFieldList](#usefieldlist)
 - [useControlledInput](#usecontrolledinput)
 - [conform](#conform)
+- [getFormElements](#getformelements)
 - [hasError](#haserror)
-- [isFieldElement](#isfieldelement)
 - [parse](#parse)
-- [setFormError](#setformerror)
 - [shouldValidate](#shouldvalidate)
 
 <!-- /aside -->
@@ -295,33 +294,6 @@ function Fieldset() {
 }
 ```
 
-<details>
-<summary>Is it required to provide the FieldsetConfig to `useFieldset`?</summary>
-
-No. The only thing required is the ref object. All the config is optional. You can always pass them to each fields manually.
-
-```tsx
-import { useForm, useFieldset } from '@conform-to/react';
-
-function SubscriptionForm() {
-  const formProps = useForm();
-  const { email } = useFieldset(formProps.ref);
-
-  return (
-    <form {...formProps}>
-      <input
-        type="email"
-        name={email.config.name}
-        defaultValue="support@conform.dev"
-        required
-      />
-    </form>
-  );
-}
-```
-
-</details>
-
 <details>
 <summary>Why does `useFieldset` require a ref object of the form or fieldset?</summary>
 
@@ -352,7 +324,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-It returns a list of key and config, with a group of helpers configuring buttons for list manipulation
+It returns a list of key and config, with helpers to configure command buttons with [list command](/docs/submission.md#list-command).
 
 ```tsx
 import { useFieldset, useFieldList } from '@conform-to/react';
@@ -373,7 +345,7 @@ type Collection = {
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -390,12 +362,12 @@ function CollectionFieldset() {
           />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row with optional default value */}
-      <button {...control.append({ defaultValue: { name: '', isbn: '' } })}>
+      <button {...command.append({ defaultValue: { name: '', isbn: '' } })}>
         add
       </button>
     </fieldset>
@@ -412,7 +384,7 @@ import { useRef } from 'react';
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -422,12 +394,12 @@ function CollectionFieldset() {
           <BookFieldset {...book.config} />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row */}
-      <button {...control.append()}>add</button>
+      <button {...command.append()}>add</button>
     </fieldset>
   );
 }
@@ -582,74 +554,43 @@ function RandomForm() {
 }
 ```
 
-### hasError
-
-This helper checks if there is any message defined in error array with the provided name.
-
-```ts
-import { hasError } from '@conform-to/react';
-
-/**
- * Assume the error looks like this:
- */
-const error = [['email', 'Email is required']];
-
-// This will log `true`
-console.log(hasError(error, 'email'));
-
-// This will log `false`
-console.log(hasError(error, 'password'));
-```
-
 ---
 
-### isFieldElement
+### getFormElements
 
-This checks if the provided element is an `input` / `select` / `textarea` or `button` HTML element with type guard. Useful when you need to access the validityState of the fields and modify the validation message manually.
+It returns all _input_ / _select_ / _textarea_ or _button_ in the forms. Useful when looping through the form elements to validate each field.
 
 ```tsx
-import { isFieldElement } from '@conform-to/react';
+import { useForm, parse, getFormElements } from '@conform-to/react';
 
-export default function SignupForm() {
+export default function LoginForm() {
   const form = useForm({
-    onValidate({ form }) {
-      for (const element of form.elements) {
-        if (isFieldElement(element)) {
-          switch (field.name) {
-            case 'email':
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Email is required');
-              } else if (field.validity.typeMismatch) {
-                field.setCustomValidity('Please enter a valid email');
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
-            case 'password':
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Password is required');
-              } else if (field.validity.tooShort) {
-                field.setCustomValidity(
-                  'The password should be at least 10 characters long',
-                );
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
-            case 'confirm-password': {
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Confirm Password is required');
-              } else if (field.value !== formData.get('password')) {
-                field.setCustomValidity('The password does not match');
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
+    onValidate({ form, formData }) {
+      const submission = parse(formData);
+
+      for (const element of getFormElements(form)) {
+        switch (element.name) {
+          case 'email': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Email is required']);
+            } else if (element.validity.typeMismatch) {
+              submission.error.push([element.name, 'Email is invalid']);
+            }
+            break;
+          }
+          case 'password': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Password is required']);
             }
+            break;
           }
         }
       }
+
+      return submission;
     },
+
+    // ....
   });
 
   // ...
@@ -658,42 +599,38 @@ export default function SignupForm() {
 
 ---
 
-### parse
+### hasError
 
-It parses the formData based on the [naming convention](/docs/submission).
+This helper checks if there is any message defined in error array with the provided name.
 
-```tsx
-import { parse } from '@conform-to/react';
+```ts
+import { hasError } from '@conform-to/react';
 
-const formData = new FormData(formElement);
-const submission = parse(formData);
+/**
+ * Assume the error looks like this:
+ */
+const error = [['email', 'Email is required']];
 
-console.log(submission);
+// This will log `true`
+console.log(hasError(error, 'email'));
+
+// This will log `false`
+console.log(hasError(error, 'password'));
 ```
 
 ---
 
-### setFormError
+### parse
 
-This helpers updates the form error based on the submission result by looping through all elements in the form and update the error with the [setCustomValidity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity) API.
+It parses the formData based on the [naming convention](/docs/submission).
 
 ```tsx
-import { setFormError } from '@conform-to/react';
-
-function ExampleForm() {
-  const form = useForm({
-    onValidate({ form, submission }) {
-      const error = validate(submission);
+import { parse } from '@conform-to/react';
 
-      setFormError(form, {
-        ...submission,
-        error,
-      });
-    },
-  });
+const formData = new FormData();
+const submission = parse(formData);
 
-  // ...
-}
+console.log(submission);
 ```
 
 ---
@@ -706,14 +643,13 @@ This helper checks if the scope of validation includes a specific field by check
 import { shouldValidate } from '@conform-to/react';
 
 /**
- * The submission type and metadata give us hint on what should be valdiated.
+ * The submission type and intent give us hint on what should be valdiated.
  * If the type is 'validate', only the field with name matching the metadata must be validated.
- *
- * However, if the type is `undefined`, both will log true (Default submission)
+ * If the type is 'submit', everything should be validated (Default submission)
  */
 const submission = {
-  type: 'validate',
-  metadata: 'email',
+  context: 'validate',
+  intent: 'email',
   value: {},
   error: [],
 };

package/_virtual/_rollupPluginBabelHelpers.js

@@ -4,17 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -24,10 +21,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -39,7 +34,6 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 

package/helpers.js

@@ -21,23 +21,19 @@ function input(config) {
     pattern: config.pattern,
     multiple: config.multiple
   };
-
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-
   if (isCheckboxOrRadio) {
     attributes.value = value !== null && value !== void 0 ? value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
   } else {
     attributes.defaultValue = config.defaultValue;
   }
-
   return attributes;
 }
 function select(config) {
   var _config$defaultValue;
-
   var attributes = {
     name: config.name,
     form: config.form,
@@ -45,16 +41,13 @@ function select(config) {
     required: config.required,
     multiple: config.multiple
   };
-
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-
   return attributes;
 }
 function textarea(config) {
   var _config$defaultValue2;
-
   var attributes = {
     name: config.name,
     form: config.form,
@@ -64,11 +57,9 @@ function textarea(config) {
     maxLength: config.maxLength,
     autoFocus: Boolean(config.initialError)
   };
-
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-
   return attributes;
 }
 

package/hooks.d.ts

@@ -1,10 +1,5 @@
 import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type ListCommand, type Primitive, type Submission } from '@conform-to/dom';
 import { type InputHTMLAttributes, type FormEvent, type RefObject } from 'react';
-interface FormContext<Schema extends Record<string, any>> {
-    form: HTMLFormElement;
-    formData: FormData;
-    submission: Submission<Schema>;
-}
 export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * Validation mode. Default to `client-only`.
@@ -40,12 +35,18 @@ export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * A function to be called when the form should be (re)validated.
      */
-    onValidate?: (context: FormContext<Schema>) => Array<[string, string]>;
+    onValidate?: ({ form, formData, }: {
+        form: HTMLFormElement;
+        formData: FormData;
+    }) => Submission<Schema>;
     /**
      * The submit event handler of the form. It will be called
      * only when the form is considered valid.
      */
-    onSubmit?: (event: FormEvent<HTMLFormElement>, context: FormContext<Schema>) => void;
+    onSubmit?: (event: FormEvent<HTMLFormElement>, context: {
+        formData: FormData;
+        submission: Submission<Schema>;
+    }) => void;
 }
 /**
  * Properties to be applied to the form element
@@ -65,7 +66,7 @@ interface Form<Schema extends Record<string, any>> {
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.2/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#useform
  */
 export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
 /**
@@ -106,41 +107,37 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.2/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldset
  */
-export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config?: FieldsetConfig<Schema>): Fieldset<Schema>;
-export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config?: FieldConfig<Schema>): Fieldset<Schema>;
-interface ControlButtonProps {
+export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldsetConfig<Schema>): Fieldset<Schema>;
+export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Fieldset<Schema>;
+interface CommandButtonProps {
     name?: string;
     value?: string;
     form?: string;
     formNoValidate: true;
 }
-declare type CommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
+declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
     type: Type;
 }>['payload'];
-/**
- * A group of helpers for configuring a list control button
- */
-interface ListControl<Schema> {
-    prepend(payload?: CommandPayload<Schema, 'prepend'>): ControlButtonProps;
-    append(payload?: CommandPayload<Schema, 'append'>): ControlButtonProps;
-    replace(payload: CommandPayload<Schema, 'replace'>): ControlButtonProps;
-    remove(payload: CommandPayload<Schema, 'remove'>): ControlButtonProps;
-    reorder(payload: CommandPayload<Schema, 'reorder'>): ControlButtonProps;
-}
 /**
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.2/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
         key: string;
         config: FieldConfig<Payload>;
     }>,
-    ListControl<Payload>
+    {
+        prepend(payload?: ListCommandPayload<Payload, 'prepend'>): CommandButtonProps;
+        append(payload?: ListCommandPayload<Payload, 'append'>): CommandButtonProps;
+        replace(payload: ListCommandPayload<Payload, 'replace'>): CommandButtonProps;
+        remove(payload: ListCommandPayload<Payload, 'remove'>): CommandButtonProps;
+        reorder(payload: ListCommandPayload<Payload, 'reorder'>): CommandButtonProps;
+    }
 ];
 interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref: RefObject<HTMLInputElement>;
@@ -163,7 +160,7 @@ interface InputControl<Element extends {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.2/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usecontrolledinput
  */
 export declare function useControlledInput<Element extends {
     focus: () => void;