@graphcommerce/react-hook-form 3.0.5 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 3.1.0
+
+### Minor Changes
+
+- [#1379](https://github.com/graphcommerce-org/graphcommerce/pull/1379) [`104abd14e`](https://github.com/graphcommerce-org/graphcommerce/commit/104abd14e1585ef0d8de77937d25156b8fa1e201) Thanks [@paales](https://github.com/paales)! - useFormPersist no accepts a persist array to persist values even if they aren’t dirty anymore
+
+* [#1379](https://github.com/graphcommerce-org/graphcommerce/pull/1379) [`2a125b1f9`](https://github.com/graphcommerce-org/graphcommerce/commit/2a125b1f98bb9272d96c3577f21d6c984caad892) Thanks [@paales](https://github.com/paales)! - ComposedSubmit uses the result of form.trigger() method to check if fomrs are valid before atempting to submit any form in the composition
+
+## 3.0.7
+
+### Patch Changes
+
+- [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`22ff9df16`](https://github.com/graphcommerce-org/graphcommerce/commit/22ff9df1677742ae8e07d9b7e5b12fbb487580dc) Thanks [@paales](https://github.com/paales)! - upgrade to latest versions of packages
+
+## 3.0.6
+
+### Patch Changes
+
+- [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
 ## 3.0.5
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -15,17 +15,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.6",
-    "@graphcommerce/prettier-config-pwa": "^4.0.4",
+    "@graphcommerce/eslint-config-pwa": "^4.1.4",
+    "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.2"
+    "@playwright/test": "^1.20.1",
+    "type-fest": "2.12.1"
   },
   "dependencies": {
     "@apollo/client": "^3.5.10",
     "graphql": "^16.3.0",
+    "react-hook-form": "7.29.0"
+  },
+  "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "7.28.0",
-    "type-fest": "^2.12.0"
+    "react-dom": "^17.0.2"
   }
 }

package/src/ComposedForm/ComposedSubmit.tsx

@@ -46,35 +46,59 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
      * If we have forms that are have errors, we don't need to actually submit anything yet. We can
      * trigger the submission of the invalid forms and highlight the errors in those forms.
      */
-    let formsToSubmit = formEntries.filter(
-      ([, f]) => Object.keys(f.form?.formState.errors ?? {}).length > 0,
-    )
+    dispatch({ type: 'SUBMIT' })
 
-    // We have no errors and no invalid forms, this means we can submit everything.
-    if (!formsToSubmit.length) formsToSubmit = formEntries
+    const invalidKeys: string[] = []
+    for (const [, { form, key }] of formEntries) {
+      // eslint-disable-next-line no-await-in-loop
+      const result = await form?.trigger()
+      if (result === false) invalidKeys.push(key)
+    }
 
-    dispatch({ type: 'SUBMIT' })
+    let formsToProcess = formEntries
+    if (invalidKeys.length === 0) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.log(
+          '[ComposedForm] All forms are valid, submitting...',
+          formsToProcess.map(([, { key }]) => key),
+        )
+      }
+    } else {
+      formsToProcess = formEntries.filter(([, { key }]) => invalidKeys.includes(key))
+      if (process.env.NODE_ENV !== 'production') {
+        console.log(
+          '[ComposedForm] Found invalid forms, triggering error messages by submitting...',
+          Object.fromEntries(
+            formsToProcess.map(([, { key, form }]) => [
+              key,
+              `Invalid fields ${(form?.formState.errors
+                ? Object.keys(form.formState.errors)
+                : []
+              ).join(', ')}`,
+            ]),
+          ),
+        )
+      }
+    }
 
     try {
       /**
        * We're executing these steps all in sequence, since certain forms can depend on other forms
        * in the backend.
-       *
-       * Todo: There might be a performance optimization by submitting multiple forms in parallel.
        */
-      let canSubmit = true
-      for (const [, { submit, form }] of formsToSubmit) {
-        // eslint-disable-next-line no-await-in-loop
-        if (canSubmit) await submit?.()
-        // eslint-disable-next-line no-await-in-loop
-        if (!canSubmit) await form?.trigger()
-        if (form && isFormGqlOperation(form) && form.error) {
-          // console.log(
-          //   key,
-          //   form?.formState.isValid,
-          //   form && (isFormGqlOperation(form) ? form.error : undefined),
-          // )
-          canSubmit = false
+      for (const [, { submit, key }] of formsToProcess) {
+        try {
+          console.log(`[ComposedForm] Submitting ${key}`)
+          // eslint-disable-next-line no-await-in-loop
+          await submit?.()
+        } catch (e) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.error(
+              `[ComposedForm] The form ${key} has thrown an Error during submission, halting submissions`,
+              e,
+            )
+          }
+          throw e
         }
       }
       dispatch({ type: 'SUBMITTING' })

package/src/useFormPersist.tsx

@@ -1,3 +1,4 @@
+import { persistCache } from '@graphcommerce/graphql'
 import { useEffect } from 'react'
 import {
   FieldValues,
@@ -5,22 +6,29 @@ import {
   Path,
   FieldPathValue,
   UnpackNestedValue,
+  FieldPath,
 } from 'react-hook-form'
 
-export type UseFormPersistOptions<V> = {
-  /** Instance of current form */
-  form: UseFormReturn<V>
+export type UseFormPersistOptions<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+> = {
+  /** Instance of current form, used to watch value */
+  form: UseFormReturn<TFieldValues, TContext>
 
   /** Name of the key how it will be stored in the storage. */
   name: string
 
   /**
-   * SessionStorage: Will not be avaiable when the user returns later (recommended). localStorage:
-   * Will be available when the user returns later.
+   * - `sessionStorage`: Will not be avaiable when the user returns later (recommended).
+   * - `localStorage`: Will be available when the user returns later.
    */
   storage?: 'sessionStorage' | 'localStorage'
 
-  exclude?: string[]
+  /** Exclude sensitive data from the storage like passwords. */
+  exclude?: FieldPath<TFieldValues>[]
+
+  persist?: FieldPath<TFieldValues>[]
 }
 
 /**
@@ -28,16 +36,24 @@ export type UseFormPersistOptions<V> = {
  * dirty fields when the form is initialized
  */
 export function useFormPersist<V>(options: UseFormPersistOptions<V>) {
-  const { form, name, storage = 'sessionStorage', exclude = [] } = options
+  const { form, name, storage = 'sessionStorage', exclude = [], persist = [] } = options
   const { setValue, watch, formState } = form
 
   const dirtyFieldKeys = Object.keys(formState.dirtyFields) as Path<V>[]
-  const valuesJson = JSON.stringify(
-    Object.fromEntries(
-      dirtyFieldKeys.filter((f) => !exclude.includes(f)).map((field) => [field, watch(field)]),
-    ),
+
+  // Get all dirty field values and exclude sensitive data
+  const newValues = Object.fromEntries(
+    dirtyFieldKeys.filter((f) => !exclude.includes(f)).map((field) => [field, watch(field)]),
   )
 
+  // Amend the values with the values that should always be persisted
+  persist.forEach((persistKey) => {
+    const value = watch(persistKey)
+    if (value) newValues[persistKey] = value
+  })
+
+  const valuesJson = JSON.stringify(newValues)
+
   // Restore changes
   useEffect(() => {
     try {
@@ -51,7 +67,12 @@ export function useFormPersist<V>(options: UseFormPersistOptions<V>) {
           Path<V>,
           UnpackNestedValue<FieldPathValue<V, Path<V>>>,
         ][]
-        entries.forEach((entry) => setValue(...entry, { shouldDirty: true, shouldValidate: true }))
+        entries.forEach(([entryName, value]) =>
+          setValue(entryName, value, {
+            shouldDirty: true,
+            shouldValidate: true,
+          }),
+        )
       }
     } catch {
       //