@graphcommerce/magento-product 9.0.0-canary.98 → 9.0.0

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -1,14 +1,13 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { InContextMask } from '@graphcommerce/graphql'
+import { PrivateQueryMask } 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 { getProductTierPrice } from './getProductTierPrice'
-import {
-  UseCustomizableOptionPriceProps,
-  useCustomizableOptionPrice,
-} from './useCustomizableOptionPrice'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { UseCustomizableOptionPriceProps } from './useCustomizableOptionPrice'
+import { useCustomizableOptionPrice } from './useCustomizableOptionPrice'
 
 export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector &
   UseCustomizableOptionPriceProps
@@ -32,22 +31,22 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
   return (
     <>
       {regularPrice.value !== price.value && (
-        <InContextMask
+        <PrivateQueryMask
           component='span'
           className={classes.discountPrice}
           skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
           sx={[{ textDecoration: 'line-through', color: 'text.disabled', marginRight: '8px' }]}
         >
           <Money {...regularPrice} />
-        </InContextMask>
+        </PrivateQueryMask>
       )}
-      <InContextMask
+      <PrivateQueryMask
         component='span'
         skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
         className={classes.finalPrice}
       >
         <Money {...price} value={priceValue} />
-      </InContextMask>
+      </PrivateQueryMask>
     </>
   )
 }

package/components/ProductPagePrice/ProductPagePriceTiers.tsx

@@ -1,9 +1,9 @@
-import { InContextMask } from '@graphcommerce/graphql'
+import { PrivateQueryMask } 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>
@@ -22,7 +22,7 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
   if (!priceTiers.length) return null
 
   return (
-    <InContextMask sx={sx} variant='rectangular'>
+    <PrivateQueryMask sx={sx} variant='rectangular'>
       {priceTiers.map(({ quantity, final_price, discount }) => (
         <div key={quantity}>
           <Trans
@@ -32,6 +32,6 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
           />
         </div>
       ))}
-    </InContextMask>
+    </PrivateQueryMask>
   )
 }

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 {
+  AnyOption,
   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
@@ -22,7 +15,8 @@ export type ProductScrollerProps = {
   sx?: SxProps<Theme>
   containerProps?: ContainerProps
   titleProps?: TypographyProps
-  itemScrollerProps?: ItemScrollerProps
+  itemScrollerProps?: Omit<ItemScrollerProps, 'children'>
+  sizes?: string
 }
 export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
   (props: ProductScrollerProps, ref) => {
@@ -35,13 +29,14 @@ export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
       containerProps,
       titleProps,
       itemScrollerProps,
+      sizes = responsiveVal(200, 300),
     } = props
 
     const theme = useTheme()
 
     const Wrapper = useContext(AddProductsToCartContext) ? React.Fragment : AddProductsToCartForm
 
-    if (!items) return null
+    if (!items || !items.length) return null
 
     return (
       <Box sx={sx} ref={ref}>
@@ -61,7 +56,7 @@ export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
                   renderer={productListRenderer}
                   {...item}
                   imageOnly={imageOnly}
-                  sizes={responsiveVal(200, 300)}
+                  sizes={sizes}
                 />
               ))}
             </ItemScroller>

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,9 +1,9 @@
-import { breakpointVal, iconOrderBefore, IconSvg } from '@graphcommerce/next-ui'
+import { IconSvg, breakpointVal, iconOrderBefore } 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 = {
+export 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 { Row, SectionContainer, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+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 { ListFormat, extendableComponent } 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,10 +1,11 @@
-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'
 
 /**
  * @deprecated Not used anymore, use `getProductStaticPaths` instead.
+ * @public
  */
 export async function getSitemapPaths(
   client: ApolloClient<NormalizedCacheObject>,
@@ -24,7 +25,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,10 +1,12 @@
 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 }
 
+/** @public */
 export function ProductWeight(props: ProductWeightProps) {
   const { product, ...rest } = props
 
@@ -14,9 +16,5 @@ export function ProductWeight(props: ProductWeightProps) {
 
   const unit = conf?.storeConfig?.weight_unit === 'lbs' ? 'pound' : 'kilogram'
 
-  return (
-    <UnitFormat unit={unit} {...rest}>
-      {product.weight}
-    </UnitFormat>
-  )
+  return <UnitFormat unit={unit} {...rest} value={product.weight} />
 }

package/components/index.ts

@@ -8,6 +8,10 @@ export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters'
 export * from './ProductListFiltersContainer/ProductListFiltersContainer'
 export * from './ProductListItem/ProductListItem'
+export * from './ProductListItem/ProductListItemImage'
+export * from './ProductListItem/ProductListItemTitleAndPrice'
+export * from './ProductListItem/ProductListItemImageContainer'
+export * from './ProductListItem/ProductListItemLinkOrDiv'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
@@ -43,3 +47,4 @@ export * from './ProductWeight/ProductWeight'
 export * from './ProductListPrice'
 export * from './ProductListSuggestions/ProductListSuggestions'
 export * from './ProductListSuggestions/ProductListSuggestions.gql'
+export * from './ProductListSuggestions/ProductListSearchSuggestion.gql'

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,8 +1,12 @@
-import { ProductLinkFragment } from './ProductLink.gql'
+import type { ProductLinkFragment } from './ProductLink.gql'
 
 export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 
-export const productRoute = import.meta.graphCommerce.productRoute ?? '/p/'
+const productRoute = import.meta.graphCommerce.productRoute ?? '/p/'
+
+export function productPath(urlKey: string) {
+  return `${productRoute}${urlKey}`
+}
 
 export function productLink(link: ProductLinkProps) {
   return `${productRoute}${link.url_key}`

package/hooks/useProductList.ts

@@ -1,30 +1,27 @@
 import { debounce } from '@graphcommerce/ecommerce-ui'
-import {
-  ApolloClient,
-  useQuery,
-  useInContextQuery,
-  getInContextInput,
-} from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
+import { getPrivateQueryContext, usePrivateQuery, useQuery } 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,
   categoryDefaultsToProductListFilters,
+  productListApplyCategoryDefaults,
   useProductListApplyCategoryDefaults,
 } from '../components/ProductListItems/productListApplyCategoryDefaults'
 
@@ -37,14 +34,14 @@ export const prefetchProductList = debounce(
     variables: ProductListQueryVariables,
     filtersVariables: ProductFiltersQueryVariables,
     next: Next,
-    client: ApolloClient<any>,
+    client: ApolloClient<unknown>,
     shallow: boolean,
   ) => {
     if (!shallow) return next(shallow)
 
     showPageLoadIndicator.set(true)
 
-    const context = getInContextInput(client)
+    const context = getPrivateQueryContext(client)
     const productList = client.query({
       query: ProductListDocument,
       variables: { ...variables, context },
@@ -106,8 +103,8 @@ export function useProductList<
   const { params, shallow } = useRouterFilterParams(props)
   const variables = useProductListApplyCategoryDefaults(params, category)
 
-  const result = useInContextQuery(ProductListDocument, { variables, skip: !shallow }, props)
-  const filters = useInContextQuery(
+  const result = usePrivateQuery(ProductListDocument, { variables, skip: !shallow }, props)
+  const filters = usePrivateQuery(
     ProductFiltersDocument,
     { variables: categoryDefaultsToProductListFilters(variables), skip: !shallow },
     props,

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.98",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -15,26 +15,26 @@
     "schema-dts": "^1.1.2"
   },
   "devDependencies": {
-    "typescript": "5.5.3"
+    "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.98",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.98",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.98",
-    "@graphcommerce/graphql": "^9.0.0-canary.98",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.98",
-    "@graphcommerce/image": "^9.0.0-canary.98",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.98",
-    "@graphcommerce/magento-store": "^9.0.0-canary.98",
-    "@graphcommerce/next-ui": "^9.0.0-canary.98",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/ecommerce-ui": "^9.0.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/framer-next-pages": "^9.0.0",
+    "@graphcommerce/framer-scroller": "^9.0.0",
+    "@graphcommerce/graphql": "^9.0.0",
+    "@graphcommerce/graphql-mesh": "^9.0.0",
+    "@graphcommerce/image": "^9.0.0",
+    "@graphcommerce/magento-cart": "^9.0.0",
+    "@graphcommerce/magento-store": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.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/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"
 }