@graphcommerce/magento-product 9.0.0-canary.101 → 9.0.0-canary.103

package/components/ProductPageName/ProductPageName.tsx

@@ -1,10 +1,10 @@
-import { ProductPageNameFragment } from './ProductPageName.gql'
+import type { ProductPageNameFragment } from './ProductPageName.gql'
 
 export type ProductPageNameProps = {
   product: ProductPageNameFragment
 }
 
-export const ProductPageName = (props: ProductPageNameProps) => {
+export function ProductPageName(props: ProductPageNameProps) {
   const { product } = props
   return <>{product.name}</>
 }

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -2,13 +2,12 @@ import { useWatch } from '@graphcommerce/ecommerce-ui'
 import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { AddToCartItemSelector } from '../AddProductsToCart'
+import { useFormAddProductsToCart } from '../AddProductsToCart'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
-import {
-  UseCustomizableOptionPriceProps,
-  useCustomizableOptionPrice,
-} from './useCustomizableOptionPrice'
+import type { UseCustomizableOptionPriceProps } from './useCustomizableOptionPrice'
+import { useCustomizableOptionPrice } from './useCustomizableOptionPrice'
 
 export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector &
   UseCustomizableOptionPriceProps

package/components/ProductPagePrice/ProductPagePriceTiers.tsx

@@ -2,8 +2,8 @@ import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { SxProps, Theme } from '@mui/material'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export type ProductPagePriceTiersProps = {
   sx?: SxProps<Theme>

package/components/ProductPagePrice/getProductTierPrice.ts

@@ -1,5 +1,5 @@
-import { MoneyFragment } from '@graphcommerce/magento-store'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { MoneyFragment } from '@graphcommerce/magento-store'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export function getProductTierPrice(
   price: Pick<ProductPagePriceFragment, 'price_tiers'>,

package/components/ProductPagePrice/useCustomizableOptionPrice.ts

@@ -1,15 +1,16 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { MoneyFragment } from '@graphcommerce/magento-store'
+import type { MoneyFragment } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/next-ui'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
-import {
-  productCustomizableSelectors,
+import type { AddToCartItemSelector } from '../AddProductsToCart'
+import { useFormAddProductsToCart } from '../AddProductsToCart'
+import type {
   CustomizableProductOptionBase,
   OptionValueSelector,
   AnyOption,
   SelectorsProp,
 } from '../ProductCustomizable/productCustomizableSelectors'
-import { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import { productCustomizableSelectors } from '../ProductCustomizable/productCustomizableSelectors'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
 
 export type UseCustomizableOptionPriceProps = {

package/components/ProductScroller/ProductScroller.tsx

@@ -1,18 +1,11 @@
-import { ItemScroller, ItemScrollerProps, RenderType, responsiveVal } from '@graphcommerce/next-ui'
-import {
-  Box,
-  Container,
-  ContainerProps,
-  SxProps,
-  Theme,
-  Typography,
-  TypographyProps,
-  useTheme,
-} from '@mui/material'
+import type { ItemScrollerProps } from '@graphcommerce/next-ui'
+import { ItemScroller, RenderType, responsiveVal } from '@graphcommerce/next-ui'
+import type { ContainerProps, SxProps, Theme, TypographyProps } from '@mui/material'
+import { Box, Container, Typography, useTheme } from '@mui/material'
 import React, { forwardRef, useContext } from 'react'
 import { AddProductsToCartContext, AddProductsToCartForm } from '../AddProductsToCart'
-import { ProductListItemProps } from '../ProductListItem/ProductListItem'
-import { ProductListItemRenderer, ProductListItemType } from '../ProductListItems/renderer'
+import type { ProductListItemProps } from '../ProductListItem/ProductListItem'
+import type { ProductListItemRenderer, ProductListItemType } from '../ProductListItems/renderer'
 
 export type ProductScrollerProps = {
   title?: React.ReactNode

package/components/ProductShortDescription/ProductShortDescription.tsx

@@ -1,6 +1,7 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { SxProps, Theme, Typography } from '@mui/material'
-import { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Typography } from '@mui/material'
+import type { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
 
 export type ProductShortDescriptionProps = {
   product: ProductShortDescriptionFragment

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -1,7 +1,7 @@
 import { breakpointVal, iconOrderBefore, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, darken, lighten } from '@mui/material'
-import { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
+import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
 
 type ProductSidebarDeliveryProps = {
   product?: UseAddProductsToCartActionFragment
@@ -39,7 +39,7 @@ export function ProductSidebarDelivery(props: ProductSidebarDeliveryProps) {
           "image title"
           ".     subtitle"
         `,
-        gridTemplateColumns: `min-content auto`,
+        gridTemplateColumns: 'min-content auto',
         columnGap: theme.spacings.xxs,
         background:
           theme.palette.mode === 'light'

package/components/ProductSpecs/ProductSpecs.tsx

@@ -1,6 +1,7 @@
 import { responsiveVal, Row, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ProductSpecsFragment } from './ProductSpecs.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ProductSpecsFragment } from './ProductSpecs.gql'
 import { ProductSpecsAggregations } from './ProductSpecsAggregations'
 import { ProductSpecsCustomAttributes } from './ProductSpecsCustomAttributes'
 
@@ -10,7 +11,7 @@ export type ProductSpecsProps = ProductSpecsFragment & {
   children?: React.ReactNode
 }
 
-const name = 'ProductSpecs' as const
+const name = 'ProductSpecs'
 const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 

package/components/ProductSpecs/ProductSpecsAggregations.tsx

@@ -1,8 +1,8 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import { ProductSpecsFragment } from './ProductSpecs.gql'
+import type { ProductSpecsFragment } from './ProductSpecs.gql'
 
-const name = 'ProductSpecs' as const
+const name = 'ProductSpecs'
 const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 

package/components/ProductSpecs/ProductSpecsCustomAttributes.tsx

@@ -1,10 +1,10 @@
 import { useQuery } from '@graphcommerce/graphql'
 import { extendableComponent, ListFormat } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import { ProductSpecsFragment } from './ProductSpecs.gql'
+import type { ProductSpecsFragment } from './ProductSpecs.gql'
 import { ProductSpecsTypesDocument } from './ProductSpecsTypes.gql'
 
-const name = 'ProductSpecs' as const
+const name = 'ProductSpecs'
 const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -1,6 +1,7 @@
-import { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
-import { GetStaticPathsResult } from 'next'
-import { ProductStaticPathsDocument, ProductStaticPathsQuery } from './ProductStaticPaths.gql'
+import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { GetStaticPathsResult } from 'next'
+import type { ProductStaticPathsQuery } from './ProductStaticPaths.gql'
+import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
 
 type Return = GetStaticPathsResult<{ url: string }>
 

package/components/ProductStaticPaths/getSitemapPaths.ts

@@ -1,4 +1,4 @@
-import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
 import { canonicalize, nonNullable } from '@graphcommerce/next-ui'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
@@ -24,7 +24,7 @@ export async function getSitemapPaths(
 
   const options = { locale, defaultLocale, pathname: '/', isLocaleDomain: false }
   const lastmod = new Date().toISOString()
-  const changefreq = 'daily' as const
+  const changefreq = 'daily'
   const priority = 0.7
 
   const paths = (await Promise.all(result))

package/components/ProductWeight/ProductWeight.tsx

@@ -1,7 +1,8 @@
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { UnitFormat, UnitFormatProps } from '@graphcommerce/next-ui'
-import { ProductWeightFragment } from './ProductWeight.gql'
+import type { UnitFormatProps } from '@graphcommerce/next-ui'
+import { UnitFormat } from '@graphcommerce/next-ui'
+import type { ProductWeightFragment } from './ProductWeight.gql'
 
 export type ProductWeightProps = Omit<UnitFormatProps, 'unit'> & { product: ProductWeightFragment }
 

package/context/productListParamsContext.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProductListParams } from '../components/ProductListItems/filterTypes'
+import type { ProductListParams } from '../components/ProductListItems/filterTypes'
 
 export const productListParamsContext = React.createContext<{
   params: ProductListParams

package/hooks/useProductLink.ts

@@ -1,4 +1,4 @@
-import { ProductLinkFragment } from './ProductLink.gql'
+import type { ProductLinkFragment } from './ProductLink.gql'
 
 export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 

package/hooks/useProductList.ts

@@ -1,26 +1,23 @@
 import { debounce } from '@graphcommerce/ecommerce-ui'
-import {
-  ApolloClient,
-  useQuery,
-  useInContextQuery,
-  getInContextInput,
-} from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
+import { useQuery, useInContextQuery, getInContextInput } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { showPageLoadIndicator } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
-import {
+import type {
   FilterFormProviderProps,
-  ProductFiltersDocument,
   ProductFiltersQuery,
   ProductFiltersQueryVariables,
 } from '../components'
-import {
-  ProductListDocument,
+import { ProductFiltersDocument } from '../components'
+import type {
   ProductListQuery,
   ProductListQueryVariables,
 } from '../components/ProductList/ProductList.gql'
-import { CategoryDefaultFragment } from '../components/ProductListItems/CategoryDefault.gql'
-import { ProductListParams, toProductListParams } from '../components/ProductListItems/filterTypes'
+import { ProductListDocument } from '../components/ProductList/ProductList.gql'
+import type { CategoryDefaultFragment } from '../components/ProductListItems/CategoryDefault.gql'
+import type { ProductListParams } from '../components/ProductListItems/filterTypes'
+import { toProductListParams } from '../components/ProductListItems/filterTypes'
 import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
 import {
   productListApplyCategoryDefaults,
@@ -37,7 +34,7 @@ export const prefetchProductList = debounce(
     variables: ProductListQueryVariables,
     filtersVariables: ProductFiltersQueryVariables,
     next: Next,
-    client: ApolloClient<any>,
+    client: ApolloClient<unknown>,
     shallow: boolean,
   ) => {
     if (!shallow) return next(shallow)

package/hooks/useProductListLink.ts

@@ -1,9 +1,11 @@
+import type {
+  ProductFilterParams,
+  ProductListParams,
+} from '../components/ProductListItems/filterTypes'
 import {
   isFilterTypeEqual,
   isFilterTypeMatch,
   isFilterTypeRange,
-  ProductFilterParams,
-  ProductListParams,
   toFilterParams,
 } from '../components/ProductListItems/filterTypes'
 
@@ -17,15 +19,15 @@ export function productListLinkFromFilter(props: ProductFilterParams): string {
   if (isSearch) urlBase = search ? `search/${search}` : 'search'
 
   // base url path generation
-  let paginateSort = ``
-  let query = ``
+  let paginateSort = ''
+  let query = ''
 
   if (currentPage && currentPage > 1) paginateSort += `/page/${currentPage}`
 
   // todo(paales): How should the URL look like with multiple sorts?
   // Something like: /sort/position,price/dir/asc,asc
   if (sort) query += `/sort/${sort}`
-  if (dir) query += `/dir/desc`
+  if (dir) query += '/dir/desc'
   if (pageSize) query += `/page-size/${pageSize}`
 
   // Apply filters

package/hooks/useProductListLinkReplace.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { ProductListParams } from '../components/ProductListItems/filterTypes'
+import type { ProductListParams } from '../components/ProductListItems/filterTypes'
 import { productListLink } from './useProductListLink'
 import { useProductListParamsContext } from './useProductListParamsContext'
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.101",
+  "version": "9.0.0-canary.103",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,23 +18,23 @@
     "typescript": "5.6.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.101",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.101",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.101",
-    "@graphcommerce/graphql": "^9.0.0-canary.101",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.101",
-    "@graphcommerce/image": "^9.0.0-canary.101",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.101",
-    "@graphcommerce/magento-store": "^9.0.0-canary.101",
-    "@graphcommerce/next-ui": "^9.0.0-canary.101",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.103",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.103",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.103",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.103",
+    "@graphcommerce/graphql": "^9.0.0-canary.103",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.103",
+    "@graphcommerce/image": "^9.0.0-canary.103",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.103",
+    "@graphcommerce/magento-store": "^9.0.0-canary.103",
+    "@graphcommerce/next-ui": "^9.0.0-canary.103",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.103",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.103",
     "@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/test/productURL.fixture.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { test as base } from '@graphcommerce/magento-store/test/apolloClientStore.fixture'
 import { ProductStaticPathsDocument } from '../components/ProductStaticPaths/ProductStaticPaths.gql'
-import { ProductTypenames } from '../components/ProductStaticPaths/getProductStaticPaths'
+import type { ProductTypenames } from '../components/ProductStaticPaths/getProductStaticPaths'
 import { productLink } from '../hooks/useProductLink'
 
 type ProductUrls = {

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "exclude": ["**/node_modules", "**/.*/"],
   "include": ["**/*.ts", "**/*.tsx"],
-  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json",
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
 }