Moved ActionCardListForm to @graphcommerce/ecommerce-ui to resolve is…

…sue with circular dependencies.

.changeset/serious-cycles-punch.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/ecommerce-ui': patch
+---
+
+Moved ActionCardListForm to @graphcommerce/ecommerce-ui to resolve issue with circular dependencies.

packages/next-ui/ActionCard/ActionCardListForm.tsx → packages/ecommerce-ui/components/FormComponents/ActionCardListForm.tsx

@@ -1,18 +1,22 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import { ActionCardProps, ActionCardList, ActionCardListProps } from '@graphcommerce/next-ui'
+import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
-import { ActionCardProps } from './ActionCard'
-import { ActionCardList, ActionCardListProps } from './ActionCardList'
+
+export {
+  ActionCard,
+  ActionCardAccordion,
+  ActionCardLayout,
+  type ActionCardLayoutProps,
+  type ActionCardAccordionProps,
+  type ActionCardProps,
+  ActionCardList,
+  type ActionCardListProps,
+} from '@graphcommerce/next-ui'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
 export type ActionCardItemRenderProps<T> = ActionCardProps & {
-  onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
+  onReset: MouseEventHandler<HTMLAnchorElement & HTMLSpanElement>
 } & T
 
 export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Omit<
@@ -38,6 +42,8 @@ export function ActionCardListForm<
     errorMessage,
     defaultValue,
     multiple,
+    disabled,
+    shouldUnregister,
     ...other
   } = props
   const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
@@ -57,7 +63,9 @@ export function ActionCardListForm<
     control,
     name,
     defaultValue,
-    rules: { required: errorMessage || required, ...rules },
+    rules: { required, ...rules },
+    disabled,
+    shouldUnregister,
   })
 
   return (

packages/ecommerce-ui/components/FormComponents/index.ts

@@ -1,3 +1,4 @@
+export * from './ActionCardListForm'
 export * from './AutoCompleteElement'
 export * from './CheckboxButtonGroup'
 export * from './CheckboxElement'

packages/magento-cart-payment-method/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -1,11 +1,5 @@
-import {
-  ActionCard,
-  Button,
-  FormDiv,
-  ActionCardItemRenderProps,
-  ActionCardListForm,
-  ActionCardProps,
-} from '@graphcommerce/next-ui'
+import { ActionCardItemRenderProps, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ActionCardProps, Button, FormDiv } from '@graphcommerce/next-ui'
 import {
   FormPersist,
   useForm,

packages/magento-cart-payment-method/package.json

@@ -12,6 +12,7 @@
     }
   },
   "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.79",
     "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.79",
     "@graphcommerce/framer-scroller": "^9.0.0-canary.79",
     "@graphcommerce/graphql": "^9.0.0-canary.79",

packages/magento-cart-pickup/components/PickupLocationForm.tsx

@@ -1,4 +1,6 @@
 import {
+  ActionCardItemBase,
+  ActionCardListForm,
   ApolloErrorAlert,
   TextFieldElement,
   useFormCompose,
@@ -9,16 +11,16 @@ import { ProductInfoInput } from '@graphcommerce/graphql-mesh'
 import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { useShippingMethod } from '@graphcommerce/magento-cart-shipping-method'
 import { GetShippingMethodsDocument } from '@graphcommerce/magento-cart-shipping-method/components/ShippingMethodForm/GetShippingMethods.gql'
-import { ActionCardItemBase, ActionCardListForm, FormRow } from '@graphcommerce/next-ui'
+import { FormRow } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { useMemo, useDeferredValue } from 'react'
+import { useDeferredValue, useMemo } from 'react'
 import { GetPickupLocationsForProductsDocument } from '../graphql/GetPickupLocationsForProducts.gql'
 import {
   SetPickupLocationOnCartDocument,
   SetPickupLocationOnCartMutation,
   SetPickupLocationOnCartMutationVariables,
 } from '../graphql/SetPickupLocationOnCart.gql'
-import { PickupLocationActionCard, Location } from './PickupLocationActionCard'
+import { Location, PickupLocationActionCard } from './PickupLocationActionCard'
 
 export type PickupLocationFormProps = Pick<UseFormComposeOptions, 'step'>
 
@@ -42,7 +44,7 @@ export function PickupLocationForm(props: PickupLocationFormProps) {
 
   const defaultSearchTerm = shippingAddress?.pickup_location_code
     ? undefined
-    : shippingAddress?.postcode ?? undefined
+    : (shippingAddress?.postcode ?? undefined)
 
   const form = useFormGqlMutationCart<
     SetPickupLocationOnCartMutation,

packages/magento-cart-shipping-address/components/CustomerAddressForm/CustomerAddressForm.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionCardListForm,
   FormAutoSubmit,
   FormPersist,
   TextFieldElement,
@@ -12,7 +13,7 @@ import {
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
 import { CustomerDocument } from '@graphcommerce/magento-customer'
-import { ActionCardListForm, FormRow, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { FormRow, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/macro'
 import { Box, SxProps, Theme } from '@mui/material'

packages/magento-cart-shipping-method/components/ShippingMethodForm/ShippingMethodForm.tsx

@@ -1,15 +1,14 @@
+import {
+  ActionCardItemBase,
+  ActionCardItemRenderProps,
+  ActionCardListForm,
+} from '@graphcommerce/ecommerce-ui'
 import {
   ApolloCartErrorAlert,
   useCartQuery,
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
-import {
-  Form,
-  FormHeader,
-  ActionCardItemBase,
-  ActionCardItemRenderProps,
-  ActionCardListForm,
-} from '@graphcommerce/next-ui'
+import { Form, FormHeader } from '@graphcommerce/next-ui'
 import {
   FormAutoSubmit,
   FormProvider,

packages/magento-cart-shipping-method/package.json

@@ -12,6 +12,7 @@
     }
   },
   "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.79",
     "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.79",
     "@graphcommerce/framer-scroller": "^9.0.0-canary.79",
     "@graphcommerce/graphql": "^9.0.0-canary.79",

packages/magento-customer/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -1,13 +1,7 @@
-import {
-  EmailElement,
-  FormAutoSubmit,
-  TextFieldElement,
-  emailPattern,
-} from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, EmailElement, FormAutoSubmit } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient } from '@graphcommerce/graphql'
 import {
   ActionCard,
-  ActionCardListForm,
   Button,
   FormActions,
   FormDiv,

packages/magento-customer/components/CompanyFields/CompanyFields.tsx

@@ -1,11 +1,5 @@
-import { FieldPath, FieldValues, useWatch } from '@graphcommerce/ecommerce-ui'
-import {
-  ActionCard,
-  ActionCardListForm,
-  ActionCardProps,
-  FormRow,
-  useStorefrontConfig,
-} from '@graphcommerce/next-ui'
+import { ActionCardListForm, FieldPath, FieldValues, useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ActionCardProps, FormRow, useStorefrontConfig } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
 import { CompanyName } from './CompanyName'
 import { CompanyVAT } from './CompanyVAT'

packages/magento-product-bundle/components/BundleProductOptions/BundleOption.tsx

@@ -1,10 +1,6 @@
+import { ActionCardItemBase, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { AddProductsToCartFields, useFormAddProductsToCart } from '@graphcommerce/magento-product'
-import {
-  SectionHeader,
-  ActionCardListForm,
-  ActionCardItemBase,
-  filterNonNullableKeys,
-} from '@graphcommerce/next-ui'
+import { SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import React, { useMemo } from 'react'
 import { BundleOptionValue } from './BundleOptionValue'

packages/magento-product-configurable/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -1,19 +1,14 @@
+import { ActionCardItemBase, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import {
-  useFormAddProductsToCart,
   AddProductsToCartFields,
+  useFormAddProductsToCart,
 } from '@graphcommerce/magento-product/components'
-import {
-  nonNullable,
-  filterNonNullableKeys,
-  SectionHeader,
-  ActionCardListForm,
-  ActionCardItemBase,
-} from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Box, SxProps, Theme } from '@mui/material'
 import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
-import { UseConfigurableOptionsSelection, useConfigurableOptionsForSelection } from '../../hooks'
+import { useConfigurableOptionsForSelection, UseConfigurableOptionsSelection } from '../../hooks'
 import {
   ConfigurableOptionValue,
   ConfigurableOptionValueFragment,

packages/magento-product-downloadable/components/DownloadableProductOptions/DownloadableProductOptions.tsx

@@ -1,11 +1,7 @@
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { Money } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardListForm,
-  ActionCardProps,
-  filterNonNullableKeys,
-} from '@graphcommerce/next-ui'
+import { ActionCard, ActionCardProps, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { useMemo } from 'react'
 import { DownloadableProductOptionsFragment } from './DownloadableProductOptions.gql'
 

packages/magento-product-downloadable/package.json

@@ -12,6 +12,7 @@
     }
   },
   "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.79",
     "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.79",
     "@graphcommerce/graphql": "^9.0.0-canary.79",
     "@graphcommerce/magento-cart": "^9.0.0-canary.79",

packages/magento-product/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -1,14 +1,13 @@
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
   ActionCardProps,
+  filterNonNullableKeys,
   SectionHeader,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Checkbox, Box } from '@mui/material'
+import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { OptionTypeRenderer } from './CustomizableAreaOption'
 

packages/magento-product/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -1,9 +1,9 @@
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
   ActionCardProps,
+  filterNonNullableKeys,
   SectionHeader,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'

packages/magento-product/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -1,9 +1,9 @@
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
   ActionCardProps,
+  filterNonNullableKeys,
   SectionHeader,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'

packages/magento-product/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -1,12 +1,11 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import {
-  ChipOverlayOrPopper,
-  ActionCardListForm,
   ActionCard,
+  ChipOverlayOrPopper,
   filterNonNullableKeys,
-  IconSvg,
   iconCirle,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import { useMemo } from 'react'

packages/magento-product/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -1,13 +1,12 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import {
-  ActionCardListForm,
   ActionCard,
-  filterNonNullableKeys,
-  IconSvg,
-  iconCirle,
   ActionCardAccordion,
   Button,
+  filterNonNullableKeys,
+  iconCirle,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'

packages/magento-product/components/ProductFiltersPro/ProductFiltersProLimitChip.tsx

@@ -1,13 +1,7 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCardItemBase, ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardItemBase,
-  ActionCardListForm,
-  ChipOverlayOrPopper,
-  ChipOverlayOrPopperProps,
-} from '@graphcommerce/next-ui'
+import { ActionCard, ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'

packages/magento-product/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -1,17 +1,11 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCardItemBase, ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardAccordion,
-  ActionCardItemBase,
-  ActionCardListForm,
-  Button,
-} from '@graphcommerce/next-ui'
+import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { SxProps, Theme } from '@mui/material'
 
 export type ProductFiltersProLimitSectionProps = { sx?: SxProps<Theme> }
 

packages/magento-product/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,9 +1,5 @@
-import {
-  ActionCard,
-  ActionCardListForm,
-  ChipOverlayOrPopper,
-  ChipOverlayOrPopperProps,
-} from '@graphcommerce/next-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'

packages/magento-product/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,4 +1,5 @@
-import { ActionCard, ActionCardAccordion, ActionCardListForm, Button } from '@graphcommerce/next-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'

packages/next-ui/ActionCard/index.ts

@@ -2,4 +2,3 @@ export * from './ActionCard'
 export * from './ActionCardAccordion'
 export * from './ActionCardLayout'
 export * from './ActionCardList'
-export * from './ActionCardListForm'