@graphcommerce/react-hook-form 5.1.0-canary.2 → 5.1.0-canary.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 5.1.0-canary.3
+
+### Patch Changes
+
+- [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
+
+  - Updated the @mui/material package
+  - Removed dependencies on react-hook-form-mui and @playwright/test
+  - Upgraded dependencies including type-fest and graphql-mesh
+  - Solved peer dependency issues ([@paales](https://github.com/paales))
+
 ## 5.1.0-canary.2
 
 ## 5.1.0-canary.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.2",
+  "version": "5.1.0-canary.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,20 +11,19 @@
       "project": "./tsconfig.json"
     }
   },
-  "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^5.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^5.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^5.1.0-canary.2",
-    "@playwright/test": "^1.21.1",
-    "type-fest": "^2.12.2"
-  },
   "dependencies": {
-    "@apollo/client": "^3.6.9",
-    "graphql": "16.5.0",
-    "react-hook-form": "7.32.0"
+    "@apollo/client": "^3.7.1",
+    "graphql": "16.6.0",
+    "react-hook-form": "7.40.0"
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.3",
+    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.3",
+    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.3",
+    "@testing-library/react": "^13.4.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

package/src/ComposedForm/useFormCompose.ts

@@ -4,7 +4,9 @@ import { isFormGqlOperation } from '../useFormGqlMutation'
 import { composedFormContext } from './context'
 import { UseFormComposeOptions } from './types'
 
-export function useFormCompose<V>(fields: UseFormComposeOptions<V>) {
+export function useFormCompose<V extends Record<string, unknown>>(
+  fields: UseFormComposeOptions<V>,
+) {
   const [state, dispatch] = useContext(composedFormContext)
   const { form, key, step, submit } = fields
 

package/src/useFormAutoSubmit.tsx

@@ -39,9 +39,10 @@ export type UseFormAutoSubmitOptions<TForm extends UseFormReturn<V>, V extends F
  *    formState.isDirty should be true after the submission
  * @see useFormGqlMutation.tsx for an example implementation
  */
-export function useFormAutoSubmit<Form extends UseFormReturn<V>, V = FieldValues>(
-  options: UseFormAutoSubmitOptions<Form, V>,
-) {
+export function useFormAutoSubmit<
+  Form extends UseFormReturn<V>,
+  V extends FieldValues = FieldValues,
+>(options: UseFormAutoSubmitOptions<Form, V>) {
   const { form, submit, wait = 500, fields, forceInitialSubmit } = options
   const { formState } = form
 

package/src/useFormGql.tsx

@@ -6,7 +6,7 @@ import {
   LazyQueryResultTuple,
 } from '@apollo/client'
 import { useEffect, useRef } from 'react'
-import { UseFormProps, UseFormReturn, UnpackNestedValue, DeepPartial } from 'react-hook-form'
+import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form'
 import diff from './diff'
 import { useGqlDocumentHandler, UseGqlDocumentHandler } from './useGqlDocumentHandler'
 
@@ -21,9 +21,13 @@ type UseFormGraphQLCallbacks<Q, V> = {
   onComplete?: OnCompleteFn<Q, V>
 }
 
-export type UseFormGraphQlOptions<Q, V> = UseFormProps<V> & UseFormGraphQLCallbacks<Q, V>
+export type UseFormGraphQlOptions<Q, V extends FieldValues> = UseFormProps<V> &
+  UseFormGraphQLCallbacks<Q, V>
 
-export type UseFormGqlMethods<Q, V> = Omit<UseGqlDocumentHandler<V>, 'encode' | 'type'> &
+export type UseFormGqlMethods<Q, V extends FieldValues> = Omit<
+  UseGqlDocumentHandler<V>,
+  'encode' | 'type'
+> &
   Pick<UseFormReturn<V>, 'handleSubmit'> & { data?: Q | null; error?: ApolloError }
 
 /**
@@ -34,7 +38,7 @@ export type UseFormGqlMethods<Q, V> = Omit<UseGqlDocumentHandler<V>, 'encode' |
  * - Updates the form when the query updates
  * - Resets the form after submitting the form when no modifications are found
  */
-export function useFormGql<Q, V>(
+export function useFormGql<Q, V extends FieldValues>(
   options: {
     document: TypedDocumentNode<Q, V>
     form: UseFormReturn<V>
@@ -61,10 +65,7 @@ export function useFormGql<Q, V>(
   const handleSubmit: UseFormReturn<V>['handleSubmit'] = (onValid, onInvalid) =>
     form.handleSubmit(async (formValues, event) => {
       // Combine defaults with the formValues and encode
-      let variables = encode({
-        ...defaultValues,
-        ...(formValues as Record<string, unknown>),
-      })
+      let variables = encode({ ...defaultValues, ...formValues })
 
       // Wait for the onBeforeSubmit to complete
       if (onBeforeSubmit) {
@@ -78,8 +79,7 @@ export function useFormGql<Q, V>(
       if (onComplete && result.data) await onComplete(result, variables)
 
       // Reset the state of the form if it is unmodified afterwards
-      if (typeof diff(form.getValues(), formValues) === 'undefined')
-        form.reset(formValues as UnpackNestedValue<DeepPartial<V>>)
+      if (typeof diff(form.getValues(), formValues) === 'undefined') form.reset(formValues)
 
       await onValid(formValues, event)
     }, onInvalid)

package/src/useFormGqlMutation.tsx

@@ -1,5 +1,5 @@
 import { MutationHookOptions, TypedDocumentNode, useMutation } from '@apollo/client'
-import { useForm, UseFormReturn } from 'react-hook-form'
+import { FieldValues, useForm, UseFormReturn } from 'react-hook-form'
 import { useFormGql, UseFormGqlMethods, UseFormGraphQlOptions } from './useFormGql'
 import { useFormMuiRegister, UseMuiFormRegister } from './useFormMuiRegister'
 import { useFormValidFields, UseFormValidReturn } from './useFormValidFields'
@@ -8,26 +8,28 @@ export type UseFormGqlMutationReturn<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Q extends Record<string, any> = Record<string, any>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  V extends Record<string, any> = Record<string, any>,
+  V extends FieldValues = FieldValues,
 > = UseFormGqlMethods<Q, V> &
   UseFormReturn<V> & { muiRegister: UseMuiFormRegister<V>; valid: UseFormValidReturn<V> }
 
-export function isFormGqlOperation<V, Q = Record<string, unknown>>(
-  form: UseFormReturn<V>,
-): form is UseFormGqlMutationReturn<Q, V> {
+export function isFormGqlOperation<
+  V extends FieldValues,
+  Q extends Record<string, unknown> = Record<string, unknown>,
+>(form: UseFormReturn<V>): form is UseFormGqlMutationReturn<Q, V> {
   return typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister === 'function'
 }
 
-export function assertFormGqlOperation<V, Q = Record<string, unknown>>(
-  form: UseFormReturn<V>,
-): asserts form is UseFormGqlMutationReturn<Q, V> {
+export function assertFormGqlOperation<
+  V extends FieldValues,
+  Q extends Record<string, unknown> = Record<string, unknown>,
+>(form: UseFormReturn<V>): asserts form is UseFormGqlMutationReturn<Q, V> {
   if (typeof (form as UseFormGqlMutationReturn<Q, V>).muiRegister !== 'function') {
     throw Error(`form must be one of 'useFromGqlMutation' or 'useFormGqlQuery'`)
   }
 }
 
 /** Bindings between react-hook-form's useForm and Apollo Client's useMutation hook. */
-export function useFormGqlMutation<Q, V>(
+export function useFormGqlMutation<Q extends Record<string, unknown>, V extends FieldValues>(
   document: TypedDocumentNode<Q, V>,
   options: UseFormGraphQlOptions<Q, V> = {},
   operationOptions?: MutationHookOptions<Q, V>,

package/src/useFormGqlQuery.tsx

@@ -1,13 +1,16 @@
 import { LazyQueryHookOptions, TypedDocumentNode, useLazyQuery } from '@apollo/client'
-import { useForm } from 'react-hook-form'
+import { FieldValues, useForm } from 'react-hook-form'
 import { useFormGql, UseFormGraphQlOptions } from './useFormGql'
 import { UseFormGqlMutationReturn } from './useFormGqlMutation'
 import { useFormMuiRegister } from './useFormMuiRegister'
 import { useFormValidFields } from './useFormValidFields'
 
-export type UseFormGqlQueryReturn<Q, V> = UseFormGqlMutationReturn<Q, V>
+export type UseFormGqlQueryReturn<
+  Q extends Record<string, unknown>,
+  V extends FieldValues,
+> = UseFormGqlMutationReturn<Q, V>
 
-export function useFormGqlQuery<Q, V>(
+export function useFormGqlQuery<Q extends Record<string, unknown>, V extends FieldValues>(
   document: TypedDocumentNode<Q, V>,
   options: UseFormGraphQlOptions<Q, V> = {},
   operationOptions?: LazyQueryHookOptions<Q, V>,

package/src/useFormMuiRegister.tsx

@@ -13,7 +13,9 @@ export type UseMuiFormRegister<TFieldValues extends FieldValues> = <
   options?: RegisterOptions<TFieldValues, TFieldName>,
 ) => Omit<UseFormRegisterReturn, 'ref'> & { inputRef: UseFormRegisterReturn['ref'] }
 
-export function useFormMuiRegister<V>({ register }: Pick<UseFormReturn<V>, 'register'>) {
+export function useFormMuiRegister<V extends FieldValues>({
+  register,
+}: Pick<UseFormReturn<V>, 'register'>) {
   const muiRegister: UseMuiFormRegister<V> = (name, opts) => {
     const { ref: inputRef, ...fields } = register(name, opts)
     return { ...fields, inputRef }

package/src/useFormPersist.tsx

@@ -37,7 +37,7 @@ export type UseFormPersistOptions<
  *
  * Todo: Use wath callback so it won't trigger a rerender
  */
-export function useFormPersist<V>(options: UseFormPersistOptions<V>) {
+export function useFormPersist<V extends FieldValues>(options: UseFormPersistOptions<V>) {
   const { form, name, storage = 'sessionStorage', exclude = [], persist = [] } = options
   const { setValue, watch, formState } = form
 
@@ -65,10 +65,7 @@ export function useFormPersist<V>(options: UseFormPersistOptions<V>) {
 
       const storedValues = JSON.parse(storedFormStr) as FieldValues
       if (storedValues) {
-        const entries = Object.entries(storedValues) as [
-          Path<V>,
-          UnpackNestedValue<FieldPathValue<V, Path<V>>>,
-        ][]
+        const entries = Object.entries(storedValues) as [Path<V>, FieldPathValue<V, Path<V>>][]
         entries.forEach(([entryName, value]) =>
           setValue(entryName, value, {
             shouldDirty: true,

package/src/useGqlDocumentHandler.tsx

@@ -84,7 +84,9 @@ export type UseGqlDocumentHandler<V extends FieldValues> = {
   ) => V
 }
 
-export function handlerFactory<Q, V>(document: TypedDocumentNode<Q, V>): UseGqlDocumentHandler<V> {
+export function handlerFactory<Q, V extends FieldValues>(
+  document: TypedDocumentNode<Q, V>,
+): UseGqlDocumentHandler<V> {
   type Defaults = Partial<Pick<V, OptionalKeys<V>>>
   type Encoding = { [k in keyof V]: FieldTypes }
   type Required = IsRequired<V>
@@ -125,14 +127,14 @@ export function handlerFactory<Q, V>(document: TypedDocumentNode<Q, V>): UseGqlD
 
   function encode(variables: { [k in keyof V]?: DeepStringify<V[k]> }, enc = encoding) {
     return Object.fromEntries(
-      Object.entries(variables).map(([key, val]) => [key, encodeItem(enc[key] as FieldTypes, val)]),
+      Object.entries(variables).map(([key, val]) => [key, encodeItem(enc[key], val)]),
     ) as V
   }
 
   return { type, required, defaultVariables, encode }
 }
 
-export function useGqlDocumentHandler<Q, V>(
+export function useGqlDocumentHandler<Q, V extends FieldValues>(
   document: TypedDocumentNode<Q, V>,
 ): UseGqlDocumentHandler<V> {
   return useMemo(() => handlerFactory<Q, V>(document), [document])