@graphcommerce/react-hook-form 3.0.7 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 3.1.2
+
+### Patch Changes
+
+- [#1426](https://github.com/graphcommerce-org/graphcommerce/pull/1426) [`100f4c38c`](https://github.com/graphcommerce-org/graphcommerce/commit/100f4c38c8fcda4bc6e0425e38028b550b60adc2) Thanks [@paales](https://github.com/paales)! - Upgrade packages
+
+## 3.1.1
+
+### Patch Changes
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Now using [@graphql-yoga](https://github.com/dotansimha/graphql-yoga) for GraphQL which has full support for [envelop](https://www.envelop.dev/) plugins.
+
+* [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Added a new @graphcommerce/cli package to generate the mesh so it can be generated _inside_ the @graphcommerce/graphql-mesh package to allow for better future extensibility.
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4) Thanks [@paales](https://github.com/paales)! - Updated dependencies
+
+## 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

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.7",
+  "version": "3.1.2",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -15,16 +15,16 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.4",
-    "@graphcommerce/prettier-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.6",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.20.1",
-    "type-fest": "2.12.1"
+    "@playwright/test": "^1.21.1",
+    "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.10",
-    "graphql": "^16.3.0",
-    "react-hook-form": "7.29.0"
+    "@apollo/client": "^3.6.0",
+    "graphql": "16.4.0",
+    "react-hook-form": "7.30.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",

package/src/ComposedForm/ComposedSubmit.tsx

@@ -46,35 +46,62 @@ 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') {
+        // eslint-disable-next-line no-console
+        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') {
+        // eslint-disable-next-line no-console
+        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 {
+          // eslint-disable-next-line no-console
+          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/ComposedForm/types.ts

@@ -1,6 +1,6 @@
 import { ApolloError } from '@apollo/client'
-import { FieldValues, FormState, UseFormReturn } from 'react-hook-form'
-import { SetOptional } from 'type-fest'
+import type { FieldValues, FormState, UseFormReturn } from 'react-hook-form'
+import type { SetOptional } from 'type-fest'
 
 export type UseFormComposeOptions<V extends FieldValues = FieldValues> = {
   /** The form that is used to submit */

package/src/useFormPersist.tsx

@@ -5,22 +5,30 @@ 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,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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 {
       //

package/src/useGqlDocumentHandler.tsx

@@ -1,4 +1,4 @@
-import { TypedDocumentNode } from '@apollo/client'
+import type { TypedDocumentNode } from '@apollo/client'
 import {
   DefinitionNode,
   OperationDefinitionNode,
@@ -12,8 +12,8 @@ import {
   OperationTypeNode,
 } from 'graphql'
 import { useMemo } from 'react'
-import { FieldValues } from 'react-hook-form'
-import { LiteralUnion } from 'type-fest'
+import type { FieldValues } from 'react-hook-form'
+import type { LiteralUnion } from 'type-fest'
 
 type Scalars = {
   ID: string

package/src/useLazyQueryPromise.tsx

@@ -7,7 +7,7 @@ import {
   useLazyQuery,
 } from '@apollo/client'
 import { useEffect, useRef } from 'react'
-import { Promisable } from 'type-fest'
+import type { Promisable } from 'type-fest'
 
 export type LazyQueryTuple<Q, V> = [
   (options?: QueryLazyOptions<V>) => Promisable<LazyQueryResult<Q, V>>,