@graphcommerce/magento-product-configurable 9.0.0-canary.99 → 9.0.1-canary.0

package/ConfigurableCartItem/ConfigurableCartItem.tsx

@@ -1,7 +1,12 @@
-import { CartItem, CartItemProps } from '@graphcommerce/magento-cart-items'
-import { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
+import type { CartItemProps } from '@graphcommerce/magento-cart-items'
+import { CartItem } from '@graphcommerce/magento-cart-items'
+import type { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 import { OptionsList } from './OptionsList'
 
+/**
+ * @deprecated
+ * @public
+ */
 export function ConfigurableCartItem(props: ConfigurableCartItemFragment & CartItemProps) {
   const { configurable_options, configured_variant, product } = props
   return (

package/ConfigurableCartItem/OptionsList.tsx

@@ -1,12 +1,13 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 
-type CartItemOptionsListProps = Partial<ConfigurableCartItemFragment> & {
+export type CartItemOptionsListProps = Partial<ConfigurableCartItemFragment> & {
   sx?: SxProps<Theme>
 }
 
-const name = 'ColorSwatchData' as const
+const name = 'ColorSwatchData'
 const parts = ['root', 'option'] as const
 const { classes } = extendableComponent(name, parts)
 

package/SwatchList.tsx

@@ -4,10 +4,10 @@ import React from 'react'
 import { ColorSwatchData } from './Swatches/ColorSwatchData'
 import { ImageSwatchData } from './Swatches/ImageSwatchData'
 import { TextSwatchData } from './Swatches/TextSwatchData'
-import { SwatchSize, SwatchTypeRenderer } from './Swatches/types'
-import { ProductListItemConfigurableFragment } from './components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
+import type { SwatchSize, SwatchTypeRenderer } from './Swatches/types'
+import type { ProductListItemConfigurableFragment } from './components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
 
-type SwatchListProps = {
+export type SwatchListProps = {
   attributes?: string[]
   configurable_options?: Maybe<ProductListItemConfigurableFragment['configurable_options']>
 }

package/Swatches/ColorSwatchData.tsx

@@ -1,15 +1,16 @@
-import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ColorSwatchDataFragment } from './ColorSwatchData.gql'
-import { SwatchDataProps } from './types'
+import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ColorSwatchDataFragment } from './ColorSwatchData.gql'
+import type { SwatchDataProps } from './types'
 
-type ColorSwatchDataProps = ColorSwatchDataFragment &
+export type ColorSwatchDataProps = ColorSwatchDataFragment &
   SwatchDataProps & {
     sx?: SxProps<Theme>
   }
 
 type OwnerState = Pick<SwatchDataProps, 'size'>
-const name = 'ColorSwatchData' as const
+const name = 'ColorSwatchData'
 const parts = ['root', 'color', 'label'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/Swatches/ImageSwatchData.tsx

@@ -1,13 +1,15 @@
 import { Image } from '@graphcommerce/image'
-import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ImageSwatchDataFragment } from './ImageSwatchData.gql'
-import { SwatchDataProps } from './types'
+import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ImageSwatchDataFragment } from './ImageSwatchData.gql'
+import type { SwatchDataProps } from './types'
 
-type ImageSwatchDataProps = ImageSwatchDataFragment & SwatchDataProps & { sx?: SxProps<Theme> }
+export type ImageSwatchDataProps = ImageSwatchDataFragment &
+  SwatchDataProps & { sx?: SxProps<Theme> }
 
 type OwnerState = Pick<SwatchDataProps, 'size'>
-const name = 'ColorSwatchData' as const
+const name = 'ColorSwatchData'
 const parts = ['root', 'image', 'label'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/Swatches/TextSwatchData.tsx

@@ -1,13 +1,14 @@
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { TextSwatchDataFragment } from './TextSwatchData.gql'
-import { SwatchDataProps } from './types'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { TextSwatchDataFragment } from './TextSwatchData.gql'
+import type { SwatchDataProps } from './types'
 
-type TextSwatchDataProps = TextSwatchDataFragment & SwatchDataProps & { sx?: SxProps<Theme> }
+export type TextSwatchDataProps = TextSwatchDataFragment & SwatchDataProps & { sx?: SxProps<Theme> }
 
 type OwnerState = Pick<SwatchDataProps, 'size'>
-const name = 'TextSwatchData' as const
+const name = 'TextSwatchData'
 const parts = ['root', 'value', 'price', 'label', 'storeLabel', 'content'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/Swatches/types.ts

@@ -1,7 +1,7 @@
-import { MoneyProps } from '@graphcommerce/magento-store'
-import { TypeRenderer } from '@graphcommerce/next-ui'
-import { ProductListItemConfigurableFragment } from '../components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
-import { SwatchDataFragment } from './SwatchData.gql'
+import type { MoneyProps } from '@graphcommerce/magento-store'
+import type { TypeRenderer } from '@graphcommerce/next-ui'
+import type { ProductListItemConfigurableFragment } from '../components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
+import type { SwatchDataFragment } from './SwatchData.gql'
 
 type ConfigurableOption = NonNullable<
   NonNullable<ProductListItemConfigurableFragment['configurable_options']>[0]

package/components/ConfigurableCartItemOptions/ConfigurableCartItemOptions.tsx

@@ -1,8 +1,9 @@
-import { CartItemFragment, SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
+import type { CartItemFragment } from '@graphcommerce/magento-cart-items'
+import { SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
 import { Box } from '@mui/material'
-import { ConfigurableCartItemFragment } from '../../ConfigurableCartItem/ConfigurableCartItem.gql'
+import type { ConfigurableCartItemFragment } from '../../ConfigurableCartItem/ConfigurableCartItem.gql'
 
-type ConfigurableActionCartItemProps = ConfigurableCartItemFragment & CartItemFragment
+export type ConfigurableActionCartItemProps = ConfigurableCartItemFragment & CartItemFragment
 
 export function ConfigurableCartItemOptions(props: ConfigurableActionCartItemProps) {
   const { configurable_options } = props

package/components/ConfigurableOptionValue/ConfigurableOptionValue.tsx

@@ -1,9 +1,9 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { RenderType } from '@graphcommerce/next-ui'
 import { ConfigurableOptionValueColor } from '../ConfigurableOptionValueColor'
 import { ConfigurableOptionValueImage } from '../ConfigurableOptionValueImage/ConfigurableOptionValueImage'
 import { ConfigurableOptionValueText } from '../ConfigurableOptionValueText/ConfigurableOptionValueText'
-import { ConfigurableOptionValueFragment } from './ConfigurableOptionValue.gql'
+import type { ConfigurableOptionValueFragment } from './ConfigurableOptionValue.gql'
 
 export type ConfigurabeOptionValueProps = ActionCardItemRenderProps<ConfigurableOptionValueFragment>
 

package/components/ConfigurableOptionValueColor/ConfigurableOptionValueColor.tsx

@@ -1,8 +1,8 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { ActionCard } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import { swatchSizes } from '../ConfigurableOptionValueImage'
-import { ConfigurableOptionValueColorFragment } from './ConfigurableOptionValueColor.gql'
+import type { ConfigurableOptionValueColorFragment } from './ConfigurableOptionValueColor.gql'
 
 export type ConfigurableOptionValueColorProps =
   ActionCardItemRenderProps<ConfigurableOptionValueColorFragment>

package/components/ConfigurableOptionValueImage/ConfigurableOptionValueImage.tsx

@@ -1,9 +1,9 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { Image } from '@graphcommerce/image'
 import { ActionCard, responsiveVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
-import { ConfigurableOptionValueImageFragment } from './ConfigurableOptionValueImage.gql'
+import type { ConfigurableOptionValueImageFragment } from './ConfigurableOptionValueImage.gql'
 
 export type ConfigurableOptionValueImageProps =
   ActionCardItemRenderProps<ConfigurableOptionValueImageFragment>

package/components/ConfigurableOptionValueText/ConfigurableOptionValueText.tsx

@@ -1,6 +1,6 @@
-import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { ActionCard } from '@graphcommerce/next-ui'
-import { ConfigurableOptionValueTextFragment } from './ConfigurableOptionValueText.gql'
+import type { ConfigurableOptionValueTextFragment } from './ConfigurableOptionValueText.gql'
 
 export type ConfigurableOptionValueTextProps =
   ActionCardItemRenderProps<ConfigurableOptionValueTextFragment>

package/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -1,36 +1,39 @@
-import { ActionCardItemBase, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
-import {
-  AddProductsToCartFields,
-  useFormAddProductsToCart,
-} from '@graphcommerce/magento-product/components'
-import { filterNonNullableKeys, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
+import type { ActionCardItemBase } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import type { AddProductsToCartFields } from '@graphcommerce/magento-product/components'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product/components'
+import { SectionHeader, filterNonNullableKeys, nonNullable } 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 { useConfigurableOptionsForSelection, UseConfigurableOptionsSelection } from '../../hooks'
-import {
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import type { UseConfigurableOptionsSelection } from '../../hooks'
+import { useConfigurableOptionsForSelection } from '../../hooks'
+import type {
   ConfigurableOptionValue,
   ConfigurableOptionValueFragment,
 } from '../ConfigurableOptionValue'
 
-type Props = NonNullable<
+export type ConfigurableProductOptionProps = NonNullable<
   NonNullable<ConfigurableOptionsFragment['configurable_options']>[number]
 > & {
   index: number
   optionIndex: number
+  optionStartLabels?: Record<string, React.ReactNode>
   optionEndLabels?: Record<string, React.ReactNode>
   sx?: SxProps<Theme>
   attribute_code: string
   render: typeof ConfigurableOptionValue
 } & UseConfigurableOptionsSelection
 
-export function ConfigurableProductOption(props: Props) {
+export function ConfigurableProductOption(props: ConfigurableProductOptionProps) {
   const {
     values,
     label,
     index,
     optionIndex,
+    optionStartLabels,
     optionEndLabels,
     sx,
     attribute_code,
@@ -70,7 +73,7 @@ export function ConfigurableProductOption(props: Props) {
   return (
     <Box key={fieldName} sx={[...(Array.isArray(sx) ? sx : [sx])]}>
       <SectionHeader
-        labelLeft={label}
+        labelLeft={optionStartLabels?.[attribute_code ?? ''] ?? label}
         labelRight={optionEndLabels?.[attribute_code ?? '']}
         sx={{ mt: 0 }}
       />

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -1,15 +1,19 @@
-import { ActionCardRequireOptionSelection } from '@graphcommerce/ecommerce-ui'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
-import { filterNonNullableKeys, ActionCardListProps, useLocale } from '@graphcommerce/next-ui'
+import type { ActionCardRequireOptionSelection } from '@graphcommerce/ecommerce-ui'
+import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import type { ActionCardListProps } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, useLocale } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
-import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import type { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
 import { useConfigurableOptionsSelection } from '../../hooks'
 import { ConfigurableOptionValue } from '../ConfigurableOptionValue/ConfigurableOptionValue'
 import { ConfigurableProductOption } from './ConfigurableProductOption'
 
 export type ConfigurableProductOptionsProps = AddToCartItemSelector & {
+  optionStartLabels?: Record<string, React.ReactNode>
   optionEndLabels?: Record<string, React.ReactNode>
   sx?: SxProps<Theme>
   render?: typeof ConfigurableOptionValue
@@ -19,6 +23,7 @@ export type ConfigurableProductOptionsProps = AddToCartItemSelector & {
 
 export function ConfigurableProductOptions(props: ConfigurableProductOptionsProps) {
   const {
+    optionStartLabels,
     optionEndLabels,
     sx,
     render = ConfigurableOptionValue,
@@ -65,6 +70,7 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
           {...option}
           key={option.uid}
           render={render}
+          optionStartLabels={optionStartLabels}
           optionEndLabels={optionEndLabels}
           index={index}
           optionIndex={optionIndex}

package/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx

@@ -1,10 +1,7 @@
-import {
-  ProductListItem,
-  OverlayAreaKeys,
-  ProductListItemProps,
-} from '@graphcommerce/magento-product'
+import type { OverlayAreaKeys, ProductListItemProps } from '@graphcommerce/magento-product'
+import { ProductListItem } from '@graphcommerce/magento-product'
 import { SwatchList } from '../../SwatchList'
-import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
+import type { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
 
 export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
   ProductListItemProps & {

package/hooks/useConfigurableOptionsSelection.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { findByTypename, nonNullable } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { GetConfigurableOptionsSelectionDocument } from '../graphql/GetConfigurableOptionsSelection.gql'

package/index.ts

@@ -1,7 +1,5 @@
 export * from './components'
 export * from './ConfigurableCartItem/ConfigurableCartItem'
-export * from './ConfigurableContext/ConfigurableContext'
-export * from './ConfigurableProductAddToCart/ConfigurableProductAddToCart'
 export * from './ConfigurableProductPage.gql'
 export * from './graphql'
 export * from './hooks'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.99",
+  "version": "9.0.1-canary.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,28 +12,28 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.99",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/graphql": "^9.0.0-canary.99",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.99",
-    "@graphcommerce/image": "^9.0.0-canary.99",
-    "@graphcommerce/lingui-next": "9.0.0-canary.99",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.99",
-    "@graphcommerce/magento-cart-items": "^9.0.0-canary.99",
-    "@graphcommerce/magento-category": "^9.0.0-canary.99",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.99",
-    "@graphcommerce/magento-product": "^9.0.0-canary.99",
-    "@graphcommerce/magento-product-simple": "^9.0.0-canary.99",
-    "@graphcommerce/magento-store": "^9.0.0-canary.99",
-    "@graphcommerce/next-ui": "^9.0.0-canary.99",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.99",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.99",
+    "@graphcommerce/ecommerce-ui": "^9.0.1-canary.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.1-canary.0",
+    "@graphcommerce/graphql": "^9.0.1-canary.0",
+    "@graphcommerce/graphql-mesh": "^9.0.1-canary.0",
+    "@graphcommerce/image": "^9.0.1-canary.0",
+    "@graphcommerce/lingui-next": "9.0.1-canary.0",
+    "@graphcommerce/magento-cart": "^9.0.1-canary.0",
+    "@graphcommerce/magento-cart-items": "^9.0.1-canary.0",
+    "@graphcommerce/magento-category": "^9.0.1-canary.0",
+    "@graphcommerce/magento-customer": "^9.0.1-canary.0",
+    "@graphcommerce/magento-product": "^9.0.1-canary.0",
+    "@graphcommerce/magento-product-simple": "^9.0.1-canary.0",
+    "@graphcommerce/magento-store": "^9.0.1-canary.0",
+    "@graphcommerce/next-ui": "^9.0.1-canary.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.1-canary.0",
+    "@graphcommerce/react-hook-form": "^9.0.1-canary.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.1-canary.0",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx

@@ -11,9 +11,9 @@ export const config: PluginConfig = {
   ifConfig: 'configurableVariantValues.content',
 }
 
-export const ProductPageDescription = (
+export function ProductPageDescription(
   props: PluginProps<ProductPageDescriptionProps & AddToCartItemSelector>,
-) => {
+) {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
 

package/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx

@@ -5,6 +5,7 @@ import { useConfigurableOptionsSelection } from '../../hooks'
 export const config: PluginConfig = {
   type: 'component',
   module: '@graphcommerce/magento-product',
+  ifConfig: 'configurableVariantValues.gallery',
 }
 
 export function ProductPageGallery(

package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx

@@ -1,9 +1,6 @@
 import { mergeDeep } from '@graphcommerce/graphql'
-import {
-  productLink,
-  type AddToCartItemSelector,
-  ProductPageMetaProps,
-} from '@graphcommerce/magento-product'
+import type { ProductPageMetaProps } from '@graphcommerce/magento-product'
+import { type AddToCartItemSelector, productLink } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'

package/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx

@@ -1,4 +1,4 @@
-import { AddToCartItemSelector, ProductPagePriceProps } from '@graphcommerce/magento-product'
+import type { AddToCartItemSelector, ProductPagePriceProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 

package/test/addConfigurableProductToCart.ts

@@ -2,7 +2,8 @@
 import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
 import { CreateEmptyCartDocument } from '@graphcommerce/magento-cart/hooks/CreateEmptyCart.gql'
 import { ProductAddToCartDocument } from '@graphcommerce/magento-product'
-import { Page, expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 export async function addConfigurableProductToCart(page: Page, productUrl: string) {
   await page.goto(productUrl)

package/utils/defaultConfigurableOptionsSelection.ts

@@ -1,8 +1,8 @@
-import { ApolloClient } from '@graphcommerce/graphql'
-import { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
+import type { ApolloClient } from '@graphcommerce/graphql'
+import type { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
 import { filterNonNullableKeys, findByTypename, nonNullable } from '@graphcommerce/next-ui'
 import { GetConfigurableOptionsSelectionDocument } from '../graphql'
-import { DefaultConfigurableOptionsSelectionFragment } from './DefaultConfigurableOptionsSelection.gql'
+import type { DefaultConfigurableOptionsSelectionFragment } from './DefaultConfigurableOptionsSelection.gql'
 
 type BaseQuery =
   | { products?: DefaultConfigurableOptionsSelectionFragment | null | undefined }

package/ConfigurableContext/ConfigurableContext.tsx

@@ -1,165 +0,0 @@
-import {
-  useContext,
-  createContext,
-  Context,
-  useState,
-  Dispatch,
-  SetStateAction,
-  useMemo,
-  useCallback,
-} from 'react'
-import { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
-import cheapestVariant from './cheapestVariant'
-
-type ConfigurableProductFormProps = ConfigurableProductFormFragment & {
-  sku: string
-  children?: React.ReactNode
-}
-
-export type Selected = { [attrCode: string]: number }
-export type Variants = NonNullable<ConfigurableProductFormProps['variants']>
-type GetVariants = (values?: Selected) => Variants
-type GetUids = (values?: Selected) => string[]
-
-type ConfigurableContext = {
-  selection: Selected
-  variants: Variants
-  cheapest: Variants[0]
-  select: Dispatch<SetStateAction<Selected>>
-  options: ConfigurableProductFormFragment['configurable_options']
-  getVariants: GetVariants
-  getUids: GetUids
-}
-const contexts: { [sku: string]: Context<ConfigurableContext> } = {}
-
-function configurableContext(sku: string): Context<ConfigurableContext> {
-  if (contexts?.[sku]) return contexts[sku]
-  contexts[sku] = createContext<ConfigurableContext>({
-    selection: {},
-    variants: [],
-    cheapest: {},
-    select: () => {},
-    options: undefined,
-    getVariants: () => [],
-    getUids: () => [],
-  })
-
-  return contexts[sku]
-}
-
-type AttributeTree = {
-  code: string
-  values: AttributeValues
-}
-type AttributeValues = {
-  [index: string]: {
-    variants: NonNullable<ConfigurableProductFormProps['variants']>
-    attribute?: AttributeTree
-  }
-}
-
-function generateAttrTree(
-  idx: number,
-  options: ConfigurableProductFormProps['configurable_options'],
-  variants: ConfigurableProductFormProps['variants'],
-  selected: Selected,
-  tree?: AttributeTree,
-) {
-  const attribute = options?.[idx]
-  if (!attribute || !attribute.attribute_code) return tree
-
-  const attributeTree: AttributeTree = { code: attribute.attribute_code, values: {} }
-
-  attribute.values?.forEach((val) => {
-    if (!val?.uid) return
-    const newSelected = { ...selected, [attributeTree.code]: [val.uid] } as Selected
-
-    const filteredVariants = variants?.filter(
-      (variant) =>
-        !!variant?.attributes?.find(
-          (attr) => attr?.code === attribute.attribute_code && val.uid === attr?.uid,
-        ),
-    )
-
-    attributeTree.values[val.uid] = {
-      variants: filteredVariants ?? [],
-      attribute: generateAttrTree(idx + 1, options, filteredVariants, newSelected),
-    }
-  })
-
-  return attributeTree
-}
-
-function traverseAttrTree(selection: Selected, attrTree: AttributeTree | undefined): Variants {
-  if (!attrTree) return []
-
-  const id = selection?.[attrTree.code]
-  const attrVal = id ? attrTree.values[id] : undefined
-
-  // We have a request, but isn't found in the current tree node
-  if (id && !attrVal) return []
-
-  if (attrVal?.attribute) return traverseAttrTree(selection, attrVal.attribute)
-  if (attrVal?.variants) return attrVal.variants
-
-  const attrValues = Object.entries(attrTree.values)
-  const variantList: NonNullable<ConfigurableProductFormProps['variants']> = []
-
-  attrValues.forEach(([optionId, attrVal2]) => {
-    variantList.push(
-      ...(attrVal2.attribute
-        ? traverseAttrTree({ ...selection, [attrTree.code]: Number(optionId) }, attrVal2.attribute)
-        : attrVal2.variants),
-    )
-  })
-
-  return variantList
-}
-
-export function ConfigurableContextProvider(props: ConfigurableProductFormProps) {
-  const { children, sku, configurable_options, variants: providedVariants } = props
-  const [selection, select] = useState<Selected>({})
-
-  if (!configurable_options || !providedVariants)
-    throw Error('please provide configurabl_options and variants')
-
-  const lookupTree = useMemo(
-    () => generateAttrTree(0, configurable_options, providedVariants, {}),
-    [configurable_options, providedVariants],
-  )
-
-  const getVariants: GetVariants = useCallback(
-    (options: Selected = {}) => traverseAttrTree(options, lookupTree),
-    [lookupTree],
-  )
-
-  const getUids: GetUids = useCallback(
-    (options: Selected = {}) =>
-      (getVariants(options as unknown as Selected) ?? [])
-        .map((variant) => (variant?.attributes?.map((attr) => attr?.uid) ?? []) as string[])
-        .flat(),
-    [getVariants],
-  )
-
-  const context = configurableContext(sku)
-  const variants = getVariants(selection)
-
-  const value = useMemo(
-    () => ({
-      selection,
-      variants,
-      cheapest: cheapestVariant(variants),
-      select,
-      getVariants,
-      getUids,
-      options: configurable_options,
-    }),
-    [configurable_options, getUids, getVariants, selection, variants],
-  )
-
-  return <context.Provider value={value}>{children}</context.Provider>
-}
-
-export function useConfigurableContext(sku: string): ConfigurableContext {
-  return useContext(configurableContext(sku))
-}

package/ConfigurableContext/cheapestVariant.ts

@@ -1,14 +0,0 @@
-import { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
-
-type Variants = NonNullable<ConfigurableProductFormFragment['variants']>
-
-export default function cheapestVariant(variants: Variants): Variants[0] {
-  if (!variants.length) return null
-  const cheapest = variants?.reduce((prev, curr) =>
-    (curr?.product?.price_range.minimum_price.final_price.value ?? 0) <
-    (prev?.product?.price_range.minimum_price.final_price.value ?? 0)
-      ? curr
-      : prev,
-  )
-  return cheapest
-}