@graphcommerce/react-hook-form 2.102.1

package/CHANGELOG.md

@@ -0,0 +1,99 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.102.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/react-hook-form@2.102.0...@graphcommerce/react-hook-form@2.102.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/react-hook-form
+
+
+
+
+
+# 2.102.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* disable isValid form checkout on submit ([b20110d](https://github.com/ho-nl/m2-pwa/commit/b20110d93327ff2678296acc47b1075b4fb3a85a))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* input checkmarks ([279c1c1](https://github.com/ho-nl/m2-pwa/commit/279c1c112ada46fdea102024298e8293d1a23293))
+* make sure ComposedForm actually submits correctly ([c6499d9](https://github.com/ho-nl/m2-pwa/commit/c6499d9d36f874cd65b310cbf7f63f5a88fa86cd))
+* make sure the checkout address fields are working as expected ([e88aae9](https://github.com/ho-nl/m2-pwa/commit/e88aae9afa3c60457b8e8c87ba52e8ae2dec4a3e))
+* make sure useFormGqlQuery uses the  new useLazyQueryPromise ([f0cf831](https://github.com/ho-nl/m2-pwa/commit/f0cf83191dbbc2da222682b053db8b8c374add69))
+* **react-hook-form:** assertFormGqlOperation ([ce09fa5](https://github.com/ho-nl/m2-pwa/commit/ce09fa50f73f6d06b2caa15b1223ba7470a7ea96))
+* **react-hook-form:** form autosubmit is stuck in a loop if the request fails ([c74e3e0](https://github.com/ho-nl/m2-pwa/commit/c74e3e0cbf146887c3ef5447dcbba46746971e2a))
+* **react-hook-form:** handle ComposedForm network errors ([e028ae0](https://github.com/ho-nl/m2-pwa/commit/e028ae06f49fea5d4e4dbdf58f803b365c902404))
+* **react-hook-form:** make sure we don’t overuse useFormPersist ([b28efde](https://github.com/ho-nl/m2-pwa/commit/b28efde79dad1fb9bf9e8d7f9cc5cf32648acdf1))
+* **react-hook-form:** not not always submit ComposedForm ([642833f](https://github.com/ho-nl/m2-pwa/commit/642833fe8b311b20db2ccdd57f0492b8429c0e81))
+* **react-hook-form:** Object(…) is not a function ([ebc32e4](https://github.com/ho-nl/m2-pwa/commit/ebc32e402c1db185785f1e29c21a705d38a6743d))
+* **react-hook-form:** solve issue where form would oversubmit/not-submit ([89f0619](https://github.com/ho-nl/m2-pwa/commit/89f0619051228c08a61aafeeddb67b95e99727ff))
+* **react-hook-form:** the wrong form would submit if the component didn’t rerender ([32d4cf1](https://github.com/ho-nl/m2-pwa/commit/32d4cf13ffc2967cc41e50a14ad872d289d4eb43))
+* **react-hook-form:** validate if the previous request succeeds before moving on to the next request ([1985d09](https://github.com/ho-nl/m2-pwa/commit/1985d0938cd509532fa3b6bc801a3399c2baae09))
+* remove cyclic dependencies ([8a59389](https://github.com/ho-nl/m2-pwa/commit/8a5938943a97634cce57c68bb369c6e77e7a0288))
+* show form checkmarks when field is valid ([7df8cad](https://github.com/ho-nl/m2-pwa/commit/7df8cadd5292c7d8a1d1e4c981d51adf7b5b8119))
+* use form auto submit should submit with prefilled data ([9957ef6](https://github.com/ho-nl/m2-pwa/commit/9957ef67ee39e30873f528ffae4da7c0dcfbb6fa))
+* useformautosubmit initial submit ([a06cb60](https://github.com/ho-nl/m2-pwa/commit/a06cb60996f83788a95bcd3995407539b2acfd46))
+* useFormAutoSubmit modes ([9180bf2](https://github.com/ho-nl/m2-pwa/commit/9180bf21a140f5741078007c42972ded433c277c))
+
+
+### Features
+
+* created stacked-pages package ([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
+* implemented checkmo payment method ([18525b2](https://github.com/ho-nl/m2-pwa/commit/18525b2f4efe9bd0eea12a7a992d284f341e0c68))
+* implemented purchase order ([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
+* introduced SheetShell as a shared layout component ([eb64f28](https://github.com/ho-nl/m2-pwa/commit/eb64f28fd05b69efbf14fa850c70b0f1da5c4237))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* **react-hook-form:** added buttonState to ComposedSubmit ([57e77c2](https://github.com/ho-nl/m2-pwa/commit/57e77c29f17720f7f3ee3b63be82779c0e5d8714))
+* **react-hook-form:** added ComposedForm component to handle the submission of multiple forms ([1172ec5](https://github.com/ho-nl/m2-pwa/commit/1172ec5abcb0e1b72bb362b977bf0c22997bac9a))
+* **react-hook-form:** pass useFormGql operation options ([ddb6f75](https://github.com/ho-nl/m2-pwa/commit/ddb6f750432c0a6ed8468ae08e522a774c261f8f))
+* **react-hook-form:** updated readme ([aede77a](https://github.com/ho-nl/m2-pwa/commit/aede77ab6d30fe5ca47b9d08bbdadca9b371713c))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* search result page wip ([4ecaf34](https://github.com/ho-nl/m2-pwa/commit/4ecaf34deaa0ff6d24e03d72e74fd045bb7ee269))
+* solve issue where the order couldn’t be submitted ([ec0d357](https://github.com/ho-nl/m2-pwa/commit/ec0d3579a1277976e2dc515f420996cf716f83a6))
+* submit composed form sequentially ([890d839](https://github.com/ho-nl/m2-pwa/commit/890d8393d635c3777aa17cfa8d4dafc13c2e6cdc))
+* upgrade to node 14 ([d079a75](https://github.com/ho-nl/m2-pwa/commit/d079a751e9bfd8dc7f5009d2c9f31c336a0c96ab))
+* useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.101.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/react-hook-form@2.101.3...@graphcommerce/react-hook-form@2.101.4) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+## [2.101.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/react-hook-form@2.101.2...@graphcommerce/react-hook-form@2.101.3) (2021-07-29)
+
+### Bug Fixes
+
+- **react-hook-form:** validate if the previous request succeeds before moving
+  on to the next request
+  ([1985d09](https://github.com/ho-nl/m2-pwa/commit/1985d0938cd509532fa3b6bc801a3399c2baae09))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/react-hook-form@2.100.10...@graphcommerce/react-hook-form@2.101.0) (2021-07-26)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))

package/README.md

@@ -0,0 +1,157 @@
+# Form
+
+The Form component is an extension of the (React Hook
+Form)(https://react-hook-form.com/) package which adds new hooks.
+
+## `useFormGqlMutation`
+
+Simple example:
+
+```tsx
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+
+const mutation = gql`
+  mutation ApplyCouponToCart($cartId: String!, $couponCode: String!) {
+    applyCouponToCart(input: { cart_id: $cartId, coupon_code: $couponCode }) {
+      cart {
+        id
+      }
+    }
+  }
+`
+
+export default function MyComponent() {
+  const form = useFormGqlMutation(mutation, {
+    defaultValues: { cartId: cartQuery?.cart?.id },
+  })
+  const { errors, handleSubmit, register, formState, required, error } = form
+
+  // We don't need to provide an actual handler as useFormGqlMutation already adds that.
+  const submit = handleSubmit(() => {})
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input
+        type='text'
+        {...register('couponCode', { required: required.couponCode })}
+        disabled={formState.isSubmitting}
+      />
+      {errors.couponCode?.message || error?.message}
+      <button type='submit'>submit</button>
+    </form>
+  )
+}
+```
+
+## `useFormGqlQuery`
+
+```tsx
+import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
+
+const query = gql`
+  query IsEmailAvailable($email: String!) {
+    isEmailAvailable(email: $email) {
+      is_email_available
+    }
+  }
+`
+
+export default function MyComponent() {
+  const form = useFormGqlQuery(query, {})
+  const { errors, handleSubmit, register, formState, required, error } = form
+
+  // We don't need to provide an actual handler as useFormGqlQuery already adds that.
+  const submit = handleSubmit(() => {})
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input
+        type='text'
+        {...register('couponCode', { required: required.couponCode })}
+        disabled={formState.isSubmitting}
+      />
+      {errors.couponCode?.message || error?.message}
+      <button type='submit'>submit</button>
+    </form>
+  )
+}
+```
+
+## `useFormAutoSubmit`
+
+```tsx
+import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
+
+export default function MyAutoSubmitForm() {
+  // Regular useForm hook, but you can also use useFormGqlMutation
+  const form = useForm()
+  const { errors, handleSubmit, register, formState, required } = form
+
+  const submit = handleSubmit(() => {
+    console.log('submitted')
+  })
+  const autoSubmitting = useFormAutoSubmit({
+    form,
+    submit,
+    fields: ['couponCode'], //optional, default: all fields
+    wait: 1200, // optional, default: 500ms
+  })
+  const disableFields = formState.isSubmitting && !autoSubmitting
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input
+        type='text'
+        {...register('couponCode', { required: required.couponCode })}
+        disabled={formState.isSubmitting}
+      />
+      {errors.couponCode?.message}
+    </form>
+  )
+}
+```
+
+### `useFormPersist`
+
+```tsx
+import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
+
+export default function MyAutoSubmitForm() {
+  // Regular useForm hook, but you can also use useFormGqlMutation
+  const form = useForm()
+  const { errors, handleSubmit, register, formState, required } = form
+
+  const submit = handleSubmit(() => {
+    console.log('submitted')
+  })
+  const autoSubmitting = useFormPersist({ form, name: 'MyForm' })
+  const disableFields = formState.isSubmitting && !autoSubmitting
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input
+        type='text'
+        {...register('couponCode', { required: required.couponCode })}
+        disabled={disableFields}
+      />
+      {errors.couponCode?.message}
+    </form>
+  )
+}
+```
+
+## FAQ
+
+### `Why is my useForm hook not submitting anything?`
+
+```tsx
+const form = useForm() // INCORRECT
+
+const form useForm({ // CORRECT
+  mode: 'onSubmit',
+  defaultValues: {
+   yourFieldName: 'default value',
+  },
+})
+
+```

package/__mocks__/TestShippingAddressForm.gql.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const TestShippingAddressFormDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"TestShippingAddressForm"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"address"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"customerNote"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"joi","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setShippingAddressesOnCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"shipping_addresses"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"address"},"value":{"kind":"Variable","name":{"kind":"Name","value":"address"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"customer_notes"},"value":{"kind":"Variable","name":{"kind":"Name","value":"customerNote"}}}]}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<TestShippingAddressFormMutation, TestShippingAddressFormMutationVariables>;
+export type TestShippingAddressFormMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  address: Types.CartAddressInput;
+  customerNote?: Types.Maybe<Types.Scalars['String']>;
+}>;
+
+
+export type TestShippingAddressFormMutation = { setShippingAddressesOnCart?: Types.Maybe<{ cart: { id: string } }> };

package/__mocks__/TestShippingAddressForm.graphql

@@ -0,0 +1,16 @@
+mutation TestShippingAddressForm(
+  $cartId: String!
+  $address: CartAddressInput!
+  $customerNote: String = "joi"
+) {
+  setShippingAddressesOnCart(
+    input: {
+      cart_id: $cartId
+      shipping_addresses: [{ address: $address, customer_notes: $customerNote }]
+    }
+  ) {
+    cart {
+      id
+    }
+  }
+}

package/__tests__/useFormGqlMutation.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { TestShippingAddressFormDocument } from '../__mocks__/TestShippingAddressForm.gql'
+import { useFormGqlMutation } from '../src/useFormGqlMutation'
+
+describe('useFormGqlMutation', () => {
+  const { register, required, defaultVariables } = useFormGqlMutation(
+    TestShippingAddressFormDocument,
+  )
+
+  it('can register stuff', () => {
+    register('address.telephone')
+    register('customerNote')
+    register('address.street.0')
+
+    // @ts-expect-error should not be posssible
+    register('address.street.hoi')
+  })
+
+  const address = {
+    cartId: '12',
+    customerNote: 'hoi',
+    address: {
+      firstname: 'Paul',
+      lastname: 'Hachmang',
+      company: 'Reach Digital',
+      country_code: 'NL',
+      street: ['Noordplein 85', '3e etage'],
+      city: 'Roelofarendsveen',
+      telephone: '0654716972',
+      postcode: '2371DJ',
+      save_in_address_book: 'true',
+    },
+  }
+
+  it('extracts required fields correctly', () => {
+    expect(required).toEqual({ address: true, cartId: true, customerNote: false })
+  })
+  it('extracts defaults correctly', () => {
+    expect(defaultVariables).toEqual({ customerNote: 'joi' })
+  })
+})

package/__tests__/useGqlDocumentHandler.tsx

@@ -0,0 +1,50 @@
+import { TestShippingAddressFormDocument } from '../__mocks__/TestShippingAddressForm.gql'
+import { handlerFactory } from '../src/useGqlDocumentHandler'
+
+describe('useGqlDocumentHandler', () => {
+  const { required, defaultVariables: defaults, encode } = handlerFactory(
+    TestShippingAddressFormDocument,
+  )
+
+  const address = {
+    cartId: '12',
+    customerNote: 'hoi',
+    address: {
+      firstname: 'Paul',
+      lastname: 'Hachmang',
+      company: 'Reach Digital',
+      country_code: 'NL',
+      street: ['Noordplein 85', '3e etage'],
+      city: 'Roelofarendsveen',
+      telephone: '0654716972',
+      postcode: '2371DJ',
+      save_in_address_book: 'true',
+    },
+  }
+
+  it('extracts required fields correctly', () => {
+    expect(required).toEqual({ address: true, cartId: true, customerNote: false })
+  })
+  it('extracts defaults correctly', () => {
+    expect(defaults).toEqual({ customerNote: 'joi' })
+  })
+
+  it('encodes objects correctly', () => {
+    const result = encode(address)
+    expect(result).toEqual({
+      cartId: '12',
+      customerNote: 'hoi',
+      address: {
+        firstname: 'Paul',
+        lastname: 'Hachmang',
+        company: 'Reach Digital',
+        country_code: 'NL',
+        street: ['Noordplein 85', '3e etage'],
+        city: 'Roelofarendsveen',
+        telephone: '0654716972',
+        postcode: '2371DJ',
+        save_in_address_book: true,
+      },
+    })
+  })
+})

package/index.ts

@@ -0,0 +1,11 @@
+export * from 'react-hook-form'
+export * from './src/useFormGqlMutation'
+export * from './src/useFormGqlQuery'
+export * from './src/useFormAutoSubmit'
+export * from './src/useFormPersist'
+export * from './src/useFormMuiRegister'
+export * from './src/useFormValidFields'
+export * from './src/useLazyQueryPromise'
+export * from './src/useFormGql'
+export * from './src/validationPatterns'
+export * from './src/ComposedForm'

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@graphcommerce/react-hook-form",
+  "version": "2.102.1",
+  "sideEffects": false,
+  "engines": {
+    "node": "14.x"
+  },
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "graphql": "^15.5.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.14.2",
+    "type-fest": "^2.1.0"
+  }
+}

package/src/ComposedForm/ComposedForm.tsx

@@ -0,0 +1,32 @@
+import React, { useReducer } from 'react'
+import { composedFormContext } from './context'
+import { composedFormReducer } from './reducer'
+
+export type ComposedFormProps = { children?: React.ReactNode }
+
+export default function ComposedForm(props: ComposedFormProps) {
+  const { children } = props
+
+  const [state, dispatch] = useReducer(composedFormReducer, {
+    forms: {},
+    isCompleting: false,
+    buttonState: {
+      isSubmitting: false,
+      isSubmitted: false,
+      isSubmitSuccessful: false,
+    },
+    formState: {
+      isSubmitting: false,
+      isSubmitSuccessful: false,
+      isSubmitted: false,
+      isValid: false,
+    },
+    submitted: false,
+  })
+
+  return (
+    <composedFormContext.Provider value={[state, dispatch]}>
+      {children}
+    </composedFormContext.Provider>
+  )
+}

package/src/ComposedForm/ComposedSubmit.tsx

@@ -0,0 +1,84 @@
+import { ApolloError } from '@apollo/client'
+import React, { useContext, useEffect } from 'react'
+import { isFormGqlOperation } from '../useFormGqlMutation'
+import { composedFormContext } from './context'
+import { ComposedSubmitRenderComponentProps } from './types'
+
+export type ComposedSubmitProps = {
+  onSubmitSuccessful?: () => void
+  render: React.FC<ComposedSubmitRenderComponentProps>
+}
+
+export function mergeErrors(errors: ApolloError[]): ApolloError | undefined {
+  return new ApolloError({
+    errorMessage: 'Composed submit error',
+    networkError: errors.find((error) => error.networkError)?.networkError,
+    graphQLErrors: errors.map((error) => error.graphQLErrors ?? []).flat(1),
+  })
+}
+
+export default function ComposedSubmit(props: ComposedSubmitProps) {
+  const { render: Render, onSubmitSuccessful } = props
+  const [formContext, dispatch] = useContext(composedFormContext)
+  const { formState, buttonState, isCompleting, forms } = formContext
+
+  const formEntries = Object.entries(forms).sort((a, b) => a[1].step - b[1].step)
+
+  useEffect(() => {
+    if (isCompleting && !formState.isSubmitting) {
+      /**
+       * If we have forms that are invalid, we don't need to submit anything yet. We can trigger the
+       * submission of the invalid forms and highlight those forms.
+       */
+      const isSubmitSuccessful = !formEntries.some(
+        ([, f]) => Object.keys(f.form?.formState.errors ?? {}).length > 0,
+      )
+
+      dispatch({ type: 'SUBMITTED', isSubmitSuccessful })
+      if (isSubmitSuccessful) onSubmitSuccessful?.()
+    }
+  }, [isCompleting, dispatch, formEntries, formState.isSubmitting, onSubmitSuccessful])
+
+  /** Callback to submit all forms */
+  const submitAll = async () => {
+    /**
+     * If we have forms that are have errors, we don't need to submit anything yet. We can trigger
+     * the submission of the invalid forms and highlight those forms.
+     */
+    let formsToSubmit = formEntries.filter(
+      ([, f]) => Object.keys(f.form?.formState.errors ?? {}).length > 0,
+    )
+
+    // We have no errors or invalid forms
+    if (!formsToSubmit.length) formsToSubmit = formEntries
+
+    dispatch({ type: 'SUBMIT' })
+
+    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?.formState.isValid || (isFormGqlOperation(form) && form.error)) canSubmit = false
+      }
+      dispatch({ type: 'SUBMITTING' })
+    } catch (error) {
+      dispatch({ type: 'SUBMITTED', isSubmitSuccessful: false })
+    }
+  }
+
+  const errors: ApolloError[] = []
+  formEntries.forEach(([, { form }]) => {
+    if (form && isFormGqlOperation(form) && form.error) errors.push(form.error)
+  })
+
+  return <Render buttonState={buttonState} submit={submitAll} error={mergeErrors(errors)} />
+}

package/src/ComposedForm/context.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+import { ComposedFormContext } from './types'
+
+export const composedFormContext = React.createContext(
+  (undefined as unknown) as ComposedFormContext,
+)

package/src/ComposedForm/index.ts

@@ -0,0 +1,8 @@
+export { default as ComposedForm } from './ComposedForm'
+export * from './ComposedForm'
+
+export { default as ComposedSubmit } from './ComposedSubmit'
+export * from './ComposedSubmit'
+
+export * from './types'
+export * from './useFormCompose'

package/src/ComposedForm/reducer.ts

@@ -0,0 +1,78 @@
+import { isFormGqlOperation } from '../useFormGqlMutation'
+import { ComposedFormReducer, ComposedFormState } from './types'
+
+function updateFormStateIfNecessary(state: ComposedFormState): ComposedFormState {
+  const formEntries = Object.entries(state.forms)
+  const formState = Object.entries(state.forms).map(
+    ([, { form }]) =>
+      form?.formState ?? {
+        isSubmitting: false,
+        isSubmitSuccessful: false,
+        isSubmitted: false,
+        isValid: false,
+      },
+  )
+  const hasState = formState.length > 0
+
+  const isSubmitting = hasState && formState.some((fs) => fs.isSubmitting)
+  const isSubmitSuccessful =
+    hasState &&
+    formState.every((f) => f.isSubmitSuccessful) &&
+    formEntries.every(([, f]) => (f.form && isFormGqlOperation(f.form) ? !f.form.error : true))
+  const isSubmitted = hasState && formState.every((fs) => fs.isSubmitted)
+  const isValid = hasState ? formState.every((fs) => fs.isValid) : false
+
+  if (
+    state.formState.isSubmitSuccessful !== isSubmitSuccessful ||
+    state.formState.isSubmitted !== isSubmitted ||
+    state.formState.isSubmitting !== isSubmitting ||
+    state.formState.isValid !== isValid
+  ) {
+    return {
+      ...state,
+      formState: { isSubmitting, isSubmitSuccessful, isSubmitted, isValid },
+    }
+  }
+
+  return state
+}
+
+export const composedFormReducer: ComposedFormReducer = (state, action) => {
+  switch (action.type) {
+    case 'REGISTER':
+      return { ...state, forms: { ...state.forms, [action.key]: undefined } }
+      break
+    case 'UNREGISTER':
+      delete state.forms[action.key]
+      return { ...state }
+      break
+    case 'ASSIGN':
+      state.forms[action.key] = { ...state.forms[action.key], ...action }
+      break
+    case 'SUBMIT':
+      return {
+        ...state,
+        buttonState: { ...state.buttonState, isSubmitting: true },
+      }
+    case 'SUBMITTING':
+      return {
+        ...state,
+        isCompleting: true,
+        buttonState: { ...state.buttonState },
+      }
+    case 'SUBMITTED':
+      return {
+        ...state,
+        isCompleting: false,
+        buttonState: {
+          isSubmitting: false,
+          isSubmitted: true,
+          isSubmitSuccessful: action.isSubmitSuccessful,
+        },
+      }
+    case 'FORMSTATE':
+      return updateFormStateIfNecessary(state)
+  }
+
+  return state
+}