Make all component prop types exported

.changeset/small-onions-marry.md

@@ -0,0 +1,28 @@
+---
+'@graphcommerce/magento-cart-shipping-address': patch
+'@graphcommerce/magento-cart-shipping-method': patch
+'@graphcommerce/magento-product-configurable': patch
+'@graphcommerce/magento-product-downloadable': patch
+'@graphcommerce/magento-product-grouped': patch
+'@graphcommerce/magento-product-bundle': patch
+'@graphcommerce/mollie-magento-payment': patch
+'@graphcommerce/magento-pagebuilder': patch
+'@graphcommerce/magento-cart-items': patch
+'@graphcommerce/magento-newsletter': patch
+'@graphcommerce/magento-category': patch
+'@graphcommerce/magento-customer': patch
+'@graphcommerce/magento-wishlist': patch
+'@graphcommerce/framer-scroller': patch
+'@graphcommerce/magento-compare': patch
+'@graphcommerce/magento-product': patch
+'@graphcommerce/algolia-search': patch
+'@graphcommerce/magento-review': patch
+'@graphcommerce/magento-search': patch
+'@graphcommerce/magento-store': patch
+'@graphcommerce/ecommerce-ui': patch
+'@graphcommerce/magento-cart': patch
+'@graphcommerce/graphcms-ui': patch
+'@graphcommerce/next-ui': patch
+---
+
+Made all component prop types exported

packages/algolia-search/components/SearchBox/SearchBox.tsx

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useRef } from 'react'
 import type { UseSearchBoxProps } from 'react-instantsearch-hooks-web'
 import { useHits, useSearchBox } from 'react-instantsearch-hooks-web'
 
-type SearchBoxProps = UseSearchBoxProps & SearchFormProps
+export type SearchBoxProps = UseSearchBoxProps & SearchFormProps
 
 export function SearchBox(props: SearchBoxProps) {
   const { search, textFieldProps, sx = [] } = props

packages/ecommerce-ui/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -3,7 +3,7 @@ import { Button, IconSvg, iconChevronRight } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
   Omit<ButtonProps, 'loading' | 'onSubmit'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

packages/ecommerce-ui/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

@@ -3,7 +3,7 @@ import { IconSvg, LinkOrButton, iconChevronRight } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
   Omit<LinkOrButtonProps, 'loading'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

packages/framer-scroller/components/ScrollerBar.tsx

@@ -11,7 +11,7 @@ type OwnerProps = {
   direction: 'x' | 'y'
 }
 
-type ScrollerBarProps = OwnerProps & {
+export type ScrollerBarProps = OwnerProps & {
   sx?: SxProps<Theme>
 }
 

packages/framer-scroller/components/ScrollerDot.tsx

@@ -15,7 +15,7 @@ type OwnerProps = { active: boolean }
 
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
-type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
+export type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
 
 const MotionBox = styled(m.div)({})
 

packages/framer-scroller/components/ScrollerThumbnail.tsx

@@ -14,7 +14,7 @@ type OwnerProps = { active: boolean }
 
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
-type ScrollerThumbnailProps = {
+export type ScrollerThumbnailProps = {
   idx: number
   image: Pick<ImageProps, 'src' | 'height' | 'width'>
   layoutDependency: boolean

packages/framer-scroller/components/ThumbnailContainer.tsx

@@ -6,7 +6,7 @@ import React, { useRef } from 'react'
 
 const MotionBox = styled(m.div)({})
 
-type ThumbnailContainerProps = {
+export type ThumbnailContainerProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
   layoutDependency: boolean

packages/hygraph-ui/components/Asset/Asset.tsx

@@ -16,7 +16,7 @@ function isImage(asset: AssetFragment): asset is ImageAsset {
   return !!(asset.width && asset.height)
 }
 
-type AssetProps = {
+export type AssetProps = {
   asset: AssetFragment
   sx?: SxProps<Theme>
 } & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt' | 'sx'>

packages/magento-cart-items/components/EditCartItem/EditCartItemForm/EditCartItemForm.tsx

@@ -13,7 +13,7 @@ import { useRemoveItemFromCart } from '../../../hooks/useRemoveItemFromCart'
 import type { CartItemToCartItemInputProps } from '../../../utils/cartItemToCartItemInput'
 import { cartItemToCartItemInput } from '../../../utils/cartItemToCartItemInput'
 
-type EditInitProps = CartItemToCartItemInputProps & AddToCartItemSelector
+export type EditInitProps = CartItemToCartItemInputProps & AddToCartItemSelector
 
 function EditInit(props: EditInitProps) {
   const { product, selectors, cartItem, index = 0 } = props

packages/magento-cart-items/components/SelectedCustomizableOptions/SelectedCustomizableOptions.tsx

@@ -4,7 +4,7 @@ import { Box } from '@mui/material'
 import type { CartItemFragment } from '../../Api/CartItem.gql'
 import type { SelectedCustomizableOptionFragment } from './SelectedCustomizableOption.gql'
 
-type SelectedCustomizableOptionProps = CartItemFragment & {
+export type SelectedCustomizableOptionProps = CartItemFragment & {
   customizable_options?: (SelectedCustomizableOptionFragment | null | undefined)[] | null
 }
 

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

@@ -6,7 +6,7 @@ import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { useRouter } from 'next/router'
 
-type CustomerAddressActionCardProps = ActionCardItemRenderProps<
+export type CustomerAddressActionCardProps = ActionCardItemRenderProps<
   CustomerAddressFragment | null | undefined
 >
 

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

@@ -30,7 +30,7 @@ import type {
 } from './SetCustomerShippingBillingAddressOnCart.gql'
 import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
 
-type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & {
+export type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & {
   children?: React.ReactNode
   sx?: SxProps<Theme>
 }

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

@@ -6,7 +6,7 @@ import { Trans } from '@lingui/react'
 import { Button, Chip } from '@mui/material'
 import type { AvailableShippingMethodFragment } from '../../AvailableShippingMethod/AvailableShippingMethod.gql'
 
-type ShippingMethodActionCardProps = ActionCardItemRenderProps<
+export type ShippingMethodActionCardProps = ActionCardItemRenderProps<
   AvailableShippingMethodFragment | null | undefined
 >
 

packages/magento-cart/components/CartFab/CartFab.tsx

@@ -23,7 +23,7 @@ export type CartFabProps = {
   BadgeProps?: BadgeProps
 } & Pick<FabProps, 'color' | 'size' | 'variant'>
 
-type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
+export type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
 
 const MotionDiv = styled(m.div)({})
 

packages/magento-cart/components/CartItemSummary/CartItemSummary.tsx

@@ -30,7 +30,7 @@ const parts = [
 ] as const
 const { classes } = extendableComponent(name, parts)
 
-type OrderSummaryProps = ActionCardLayoutProps & {
+export type OrderSummaryProps = ActionCardLayoutProps & {
   sx?: SxProps<Theme>
   itemProps?: Omit<
     CartItemActionCardProps,

packages/magento-cart/components/EmptyCart/EmptyCart.tsx

@@ -5,7 +5,7 @@ import type { SxProps, Theme } from '@mui/material'
 import { Button } from '@mui/material'
 import React from 'react'
 
-type EmptyCartProps = {
+export type EmptyCartProps = {
   children?: React.ReactNode
   sx?: SxProps<Theme>
 } & Pick<FullPageMessageProps, 'button' | 'disableMargin'>

packages/magento-category/components/CategoryBreadcrumb/CategoryBreadcrumb.tsx

@@ -4,7 +4,8 @@ import type { BreadcrumbsProps } from '@mui/material'
 import { Breadcrumbs, Link, Typography } from '@mui/material'
 import type { CategoryBreadcrumbFragment } from './CategoryBreadcrumb.gql'
 
-type CategoryPageBreadcrumbsProps = CategoryBreadcrumbFragment & Omit<BreadcrumbsProps, 'children'>
+export type CategoryPageBreadcrumbsProps = CategoryBreadcrumbFragment &
+  Omit<BreadcrumbsProps, 'children'>
 
 /**
  * @deprecated Please use CategoryBreadcrumbs

packages/magento-category/components/CategoryChildren/CategoryChildren.tsx

@@ -6,7 +6,7 @@ import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import type { CategoryChildrenFragment } from './CategoryChildren.gql'
 
-type CategoryChildrenProps = Omit<CategoryChildrenFragment, 'uid'> & {
+export type CategoryChildrenProps = Omit<CategoryChildrenFragment, 'uid'> & {
   params: ProductListParams
   sx?: SxProps<Theme>
 }

packages/magento-category/components/CategoryHeroNav/CategoryHeroNavTitle.tsx

@@ -2,7 +2,7 @@ import { LayoutTitle } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { memo } from 'react'
 
-type CategoryHeroNavTitleProps = {
+export type CategoryHeroNavTitleProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
 }

packages/magento-compare/components/CompareFab.tsx

@@ -18,7 +18,7 @@ export type CompareFabProps = {
   sx?: SxProps<Theme>
 } & Pick<ButtonProps, 'color' | 'size' | 'variant'>
 
-type CompareFabContentProps = CompareFabProps & { total_quantity: number }
+export type CompareFabContentProps = CompareFabProps & { total_quantity: number }
 
 const MotionDiv = styled(m.div)({})
 

packages/magento-compare/components/CompareListForm.tsx

@@ -4,7 +4,7 @@ import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'
 import { useCompareList } from '../hooks'
 
-type CompareListFormProps = { children?: React.ReactNode }
+export type CompareListFormProps = { children?: React.ReactNode }
 
 type FormFields = { selected: number[] }
 

packages/magento-compare/components/CompareListIntroText.tsx

@@ -1,6 +1,6 @@
 import { Box, Container } from '@mui/material'
 
-type CompareListIntroTextProps = {
+export type CompareListIntroTextProps = {
   children: React.ReactNode
 }
 

packages/magento-compare/components/CompareMessageSnackbar.tsx

@@ -2,7 +2,7 @@ import { Button, IconSvg, MessageSnackbar, iconChevronRight } from '@graphcommer
 import { Trans } from '@lingui/react'
 import type { SetStateAction } from 'react'
 
-type CompareMessageSnackbarProps = {
+export type CompareMessageSnackbarProps = {
   count: number | undefined
   name: string | null | undefined
   displayMessageBar: boolean

packages/magento-compare/components/CompareProductButton.tsx

@@ -10,7 +10,7 @@ import { useCompareSummary } from '../hooks'
 import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
 import { CompareMessageSnackbar } from './CompareMessageSnackbar'
 
-type CompareProductButtonProps = CompareProductIdInternalFragment & { sx?: SxProps<Theme> }
+export type CompareProductButtonProps = CompareProductIdInternalFragment & { sx?: SxProps<Theme> }
 
 export function CompareProductButton(props: CompareProductButtonProps) {
   const { id, name, sx } = props

packages/magento-compare/components/CompareProductToggle.tsx

@@ -5,7 +5,7 @@ import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import type { SxProps, Theme } from '@mui/material'
-import { Checkbox, NoSsr, alpha, useTheme } from '@mui/material'
+import { alpha, Checkbox, NoSsr, useTheme } from '@mui/material'
 import { useState } from 'react'
 import type { CompareProductIdInternalFragment } from '../graphql'
 import { AddProductsToCompareListDocument } from '../graphql/AddProductsToCompareList.gql'
@@ -14,7 +14,7 @@ import { useCompareSummary } from '../hooks'
 import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
 import { CompareMessageSnackbar } from './CompareMessageSnackbar'
 
-type CompareProductToggleProps = {
+export type CompareProductToggleProps = {
   sx?: SxProps<Theme>
   product: CompareProductIdInternalFragment
 } & Pick<FabProps, 'color'>

packages/magento-compare/components/EmptyCompareListButton.tsx

@@ -7,7 +7,7 @@ import { DeleteCompareListDocument } from '../graphql/DeleteCompareList.gql'
 import { useCompareList } from '../hooks'
 import { useClearCurrentCompareListUid } from '../hooks/useClearCurrentCompareListUid'
 
-type EmptyCompareListButtonProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
+export type EmptyCompareListButtonProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
 
 export function EmptyCompareListButton(props: EmptyCompareListButtonProps) {
   const { button = {}, link = {} } = props

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

@@ -13,7 +13,7 @@ import type { CustomerAddressFragment } from '../CreateCustomerAddressForm/Custo
 // 	return exports.getEuMembers().indexOf(code.toUpperCase()) != -1;
 // };
 
-type AddressMultiLineProps = CustomerAddressFragment & { sx?: SxProps<Theme> }
+export type AddressMultiLineProps = CustomerAddressFragment & { sx?: SxProps<Theme> }
 
 const name = 'AddressMultiLine'
 const parts = ['root', 'title'] as const

packages/magento-customer/components/CancelOrder/CancelOrderForm.tsx

@@ -18,7 +18,7 @@ import type { OrderDetailsFragment } from '../OrderDetails/OrderDetails.gql'
 import type { CancelOrderMutation, CancelOrderMutationVariables } from './CancelOrder.gql'
 import { CancelOrderDocument } from './CancelOrder.gql'
 
-type CancelOrderFormProps = {
+export type CancelOrderFormProps = {
   order: OrderDetailsFragment
 } & Omit<AccordionProps, 'children'>
 

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

@@ -5,7 +5,7 @@ import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerE
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerNameDocument } from './UpdateCustomerName.gql'
 
-type ChangeNameFormProps = {
+export type ChangeNameFormProps = {
   prefix?: string
   firstname: string
   lastname: string

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

@@ -11,7 +11,7 @@ import React from 'react'
 import type { UseCustomerSessionReturn } from '../../hooks'
 import { useCustomerAccountCanSignIn, useCustomerSession } from '../../hooks'
 
-type CustomerFabContentProps = {
+export type CustomerFabContentProps = {
   icon?: React.ReactNode
   authHref: string
   guestHref: string

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

@@ -7,7 +7,7 @@ import { useCustomerAccountCanSignIn } from '../../hooks'
 import type { UseCustomerSessionReturn } from '../../hooks/useCustomerSession'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 
-type CustomerMenuFabItemProps = {
+export type CustomerMenuFabItemProps = {
   icon?: React.ReactNode
   children: React.ReactNode
   authHref: string

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

@@ -12,7 +12,7 @@ import { CompanyFields } from '../CompanyFields'
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
 
-type EditAddressFormProps = {
+export type EditAddressFormProps = {
   address?: AccountAddressFragment
   sx?: SxProps<Theme>
 }

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

@@ -13,7 +13,7 @@ type NameFieldValues = {
   prefix?: string
 }
 
-type NameFieldProps = {
+export type NameFieldProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   form: UseFormReturn<any>
   readOnly?: boolean

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

@@ -6,7 +6,7 @@ import { Box } from '@mui/material'
 const parts = ['root'] as const
 const { classes } = extendableComponent('NoOrdersFound', parts)
 
-type NoOrdersFoundProps = { sx?: SxProps<Theme> }
+export type NoOrdersFoundProps = { sx?: SxProps<Theme> }
 
 export function NoOrdersFound(props: NoOrdersFoundProps) {
   const { sx = [] } = props

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

@@ -8,7 +8,7 @@ import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
 import type { OrderCardFragment } from './OrderCard.gql'
 
-type OrderCardProps = Partial<OrderCardFragment> & {
+export type OrderCardProps = Partial<OrderCardFragment> & {
   loading?: boolean
   images?: UseOrderCardItemImages
   sx?: SxProps<Theme>

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

@@ -7,7 +7,7 @@ import { Box } from '@mui/material'
 import type { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
 import type { OrderItemFragment } from './OrderItem.gql'
 
-type OrderItemProps = OrderItemFragment & Omit<OrderCardItemImageFragment, 'uid'>
+export type OrderItemProps = OrderItemFragment & Omit<OrderCardItemImageFragment, 'uid'>
 
 const rowImageSize = responsiveVal(70, 110)
 

packages/magento-customer/components/OrderStateLabel/OrderStateLabelInline.tsx

@@ -2,7 +2,7 @@ import { alpha } from '@mui/material'
 import type { OrderStateLabelProps } from './OrderStateLabel'
 import { OrderStateLabel } from './OrderStateLabel'
 
-type OrderStateLabelInlineProps = OrderStateLabelProps
+export type OrderStateLabelInlineProps = OrderStateLabelProps
 
 export function OrderStateLabelInline(props: OrderStateLabelInlineProps) {
   const { sx = [] } = props

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

@@ -8,7 +8,7 @@ import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedP
 import type { ResetPasswordMutation, ResetPasswordMutationVariables } from './ResetPassword.gql'
 import { ResetPasswordDocument } from './ResetPassword.gql'
 
-type ResetPasswordFormProps = {
+export type ResetPasswordFormProps = {
   token: string
 }
 

packages/magento-customer/components/SignInForm/SignInFormInline.tsx

@@ -6,7 +6,7 @@ import { Box, Link } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import type { SignInMutationVariables } from './SignIn.gql'
 
-type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
+export type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
   sx?: SxProps<Theme>
   children?: React.ReactNode
 }

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

@@ -7,7 +7,7 @@ import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerE
 import { SignOutFormDocument } from './SignOutForm.gql'
 import { signOut } from './signOut'
 
-type SignOutFormProps = {
+export type SignOutFormProps = {
   button: (props: { formState: FormState<Record<string, unknown>> }) => React.ReactNode
 }