@graphcommerce/magento-product 3.8.13 → 4.0.2

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,34 +1,9 @@
-import { RenderType, UseStyles, responsiveVal } from '@graphcommerce/next-ui'
-import { Theme, makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
+import { RenderType, responsiveVal } from '@graphcommerce/next-ui'
+import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { ProductListItemProps } from '../ProductListItem'
 import { ProductListItemRenderer } from './renderer'
 
-export const useStyles = makeStyles(
-  (theme: Theme) => ({
-    productList: {
-      display: 'grid',
-      gridColumnGap: theme.spacings.md,
-      gridRowGap: theme.spacings.md,
-    },
-    productListsmall: {
-      gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
-    },
-    productListnormal: {
-      gridTemplateColumns: `repeat(2, 1fr)`,
-      [theme.breakpoints.up('md')]: {
-        gridTemplateColumns: `repeat(3, 1fr)`,
-      },
-      [theme.breakpoints.up('lg')]: {
-        gridTemplateColumns: `repeat(4, 1fr)`,
-      },
-    },
-  }),
-  { name: 'ProductList' },
-)
-
 export type ProductItemsGridProps = {
   items?:
     | Array<(ProductListItemFragment & ProductListItemProps) | null | undefined>
@@ -37,14 +12,29 @@ export type ProductItemsGridProps = {
   renderers: ProductListItemRenderer
   loadingEager?: number
   size?: 'normal' | 'small'
-} & UseStyles<typeof useStyles>
+  sx?: BoxProps['sx']
+}
 
 export default function ProductListItemsBase(props: ProductItemsGridProps) {
-  const { items, renderers, loadingEager = 0, size = 'normal', ...divProps } = props
-  const classes = useStyles(props)
+  const { items, sx = [], renderers, loadingEager = 0, size = 'normal' } = props
 
   return (
-    <div {...divProps} className={clsx(classes.productList, classes[`productList${size}`])}>
+    <Box
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          gridColumnGap: theme.spacings.md,
+          gridRowGap: theme.spacings.md,
+        }),
+        size === 'small' && {
+          gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
+        },
+        size === 'normal' && {
+          gridTemplateColumns: { xs: `repeat(2, 1fr)`, md: `repeat(3, 1fr)`, lg: `repeat(4, 1fr)` },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       {items?.map((item, idx) =>
         item ? (
           <RenderType
@@ -61,6 +51,6 @@ export default function ProductListItemsBase(props: ProductItemsGridProps) {
           />
         ) : null,
       )}
-    </div>
+    </Box>
   )
 }

package/components/ProductListItems/getFilterTypes.ts

@@ -1,4 +1,4 @@
-import { gql, ApolloClient, NormalizedCacheObject } from '@apollo/client'
+import { gql, ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
 import { Exact } from '@graphcommerce/graphql'
 import { AllFilterInputTypes, FilterTypes } from './filterTypes'
 

package/components/ProductListLink/ProductListLink.tsx

@@ -1,4 +1,4 @@
-import { Link, LinkProps } from '@material-ui/core'
+import { Link, LinkProps } from '@mui/material'
 import PageLink, { LinkProps as PageLinkProps } from 'next/link'
 import React, { PropsWithChildren } from 'react'
 import { useProductListLink } from '../../hooks/useProductListLink'
@@ -42,7 +42,7 @@ const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLinkProps
       {noLink ? (
         children
       ) : (
-        <Link rel={rel} {...linkProps} ref={ref} onClick={updateParams}>
+        <Link rel={rel} {...linkProps} ref={ref} onClick={updateParams} underline='hover'>
           {children}
         </Link>
       )}

package/components/ProductListPagination/index.tsx

@@ -1,5 +1,5 @@
 import { Pagination } from '@graphcommerce/next-ui'
-import { PaginationProps } from '@material-ui/lab'
+import { PaginationProps } from '@mui/material'
 import React from 'react'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
@@ -21,7 +21,7 @@ export default function ProductListPagination({
       count={page_info?.total_pages}
       page={page_info?.current_page ?? 1}
       renderLink={(page: number, icon: React.ReactNode, btnProps: any) => (
-        <ProductListLink {...btnProps} {...params} currentPage={btnProps.page}>
+        <ProductListLink {...btnProps} {...params} currentPage={btnProps.page} color='inherit'>
           {icon}
         </ProductListLink>
       )}

package/components/ProductListPrice/index.tsx

@@ -1,36 +1,36 @@
 import { Money } from '@graphcommerce/magento-store'
-import { UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
-import React from 'react'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { Typography, TypographyProps, Box } from '@mui/material'
 import { ProductListPriceFragment } from './ProductListPrice.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {},
-    discount: {
-      textDecoration: 'line-through',
-      color: theme.palette.text.disabled,
-      display: 'inline',
-      marginRight: 8,
-    },
-  }),
-  { name: 'ProductListPrice' },
-)
+const { classes, selectors } = extendableComponent('ProductListPrice', [
+  'root',
+  'discountPrice',
+] as const)
 
-type ProductListPriceProps = ProductListPriceFragment & UseStyles<typeof useStyles>
+type ProductListPriceProps = ProductListPriceFragment & Pick<TypographyProps, 'sx'>
 
 export default function ProductListPrice(props: ProductListPriceProps) {
-  const { regular_price, final_price } = props
-  const classes = useStyles(props)
+  const { regular_price, final_price, sx } = props
 
   return (
-    <Typography component='div' variant='body1' className={classes.root}>
+    <Typography component='div' variant='body1' className={classes.root} sx={sx}>
       {regular_price.value !== final_price.value && (
-        <div className={classes.discount}>
+        <Box
+          component='span'
+          sx={{
+            textDecoration: 'line-through',
+            color: 'text.disabled',
+            marginRight: '8px',
+          }}
+          className={classes.discountPrice}
+        >
           <Money {...regular_price} />
-        </div>
+        </Box>
       )}
       <Money {...final_price} />
     </Typography>
   )
 }
+
+ProductListPrice.selectors = selectors

package/components/ProductListSort/index.tsx

@@ -1,8 +1,7 @@
-import { useQuery } from '@apollo/client'
-import { cloneDeep } from '@apollo/client/utilities'
+import { useQuery, cloneDeep } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
-import { ListItem, ListItemText } from '@material-ui/core'
+import { ListItem, ListItemText } from '@mui/material'
 import React from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
@@ -53,17 +52,20 @@ export default function ProductListSort(props: ProductListSortProps) {
             key={option?.value ?? ''}
             dense
             selected={option?.value === currentSort}
-            component={React.memo((chipProps) => (
-              <ProductListLink
-                {...chipProps}
-                {...linkParams}
-                color='inherit'
-                underline='none'
-                link={{ scroll: false, replace: true }}
-              />
-            ))}
+            component={React.memo(
+              React.forwardRef<HTMLAnchorElement>((chipProps, ref) => (
+                <ProductListLink
+                  {...chipProps}
+                  {...linkParams}
+                  ref={ref}
+                  color='inherit'
+                  underline='none'
+                  link={{ scroll: false, replace: true }}
+                />
+              )),
+            )}
           >
-            <ListItemText secondary>{option?.label}</ListItemText>
+            <ListItemText>{option?.label}</ListItemText>
           </ListItem>
         )
       })}

package/components/ProductPageDescription/index.tsx

@@ -1,47 +1,23 @@
-import { ColumnTwoWithTop, ColumnTwoWithTopProps, UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
-import React from 'react'
+import {
+  ColumnTwoWithTop,
+  ColumnTwoWithTopProps,
+  extendableComponent,
+} from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
 import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  /* nested styles because we don't know beforehand which elements the description contains */
-  description: {
-    '& p:first-of-type': {
-      marginTop: 0,
-    },
-    '& p, & li': {
-      ...theme.typography.body1,
-      fontWeight: 400,
+export type ProductPageDescriptionProps = ProductPageDescriptionFragment &
+  Omit<ColumnTwoWithTopProps, 'top' | 'left'> & { sx?: SxProps<Theme> }
 
-      [theme.breakpoints.up('md')]: {
-        ...theme.typography.h3,
-        fontWeight: 400,
-        '@supports (font-variation-settings: normal)': {
-          fontVariationSettings: "'wght' 420",
-        },
-      },
-    },
-    '& ul': {
-      padding: 0,
-      margin: 0,
-      display: 'inline',
-      listStyleType: 'none',
-    },
-    '& li': {
-      display: 'inline',
-    },
-  },
-}))
-
-export type ProductPageDescriptionProps = UseStyles<typeof useStyles> & ProductPageDescriptionFragment &
-  Omit<ColumnTwoWithTopProps, 'top' | 'left'>
+const { classes } = extendableComponent('ProductPageDescription', ['root', 'description'] as const)
 
 export default function ProductPageDescription(props: ProductPageDescriptionProps) {
-  const classes = useStyles(props)
-  const { description, name, right } = props
+  const { description, name, right, sx = [] } = props
 
   return (
     <ColumnTwoWithTop
+      className={classes.root}
+      sx={sx}
       top={
         <Typography variant='h1' component='h2'>
           {name}
@@ -49,10 +25,35 @@ export default function ProductPageDescription(props: ProductPageDescriptionProp
       }
       left={
         description && (
-          <div
+          <Box
             className={classes.description}
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: description.html }}
+            sx={(theme) => ({
+              '& p:first-of-type': {
+                marginTop: 0,
+              },
+              '& p, & li': {
+                typography: 'body1',
+                fontWeight: 400,
+                [theme.breakpoints.up('md')]: {
+                  typography: 'h3',
+                  fontWeight: 400,
+                  '@supports (font-variation-settings: normal)': {
+                    fontVariationSettings: "'wght' 420",
+                  },
+                },
+              },
+              '& ul': {
+                padding: 0,
+                margin: 0,
+                display: 'inline',
+                listStyleType: 'none',
+              },
+              '& li': {
+                display: 'inline',
+              },
+            })}
           />
         )
       }

package/components/ProductShortDescription/index.tsx

@@ -1,31 +1,21 @@
-import { UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Typography } from '@material-ui/core'
-import React from 'react'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { SxProps, Theme, Typography } from '@mui/material'
 import { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
 
-const useStyles = makeStyles(
-  {
-    root: {
-      '& > p': {
-        marginTop: 0,
-      },
-    },
-  },
-  { name: 'ProductShortDescription' },
-)
+type ProductShortDescriptionProps = ProductShortDescriptionFragment & { sx?: SxProps<Theme> }
 
-type ProductShortDescriptionProps = ProductShortDescriptionFragment & UseStyles<typeof useStyles>
+const { classes } = extendableComponent('ProductShortDescription', ['description'] as const)
 
 export default function ProductShortDescription(props: ProductShortDescriptionProps) {
-  const { short_description } = props
-  const classes = useStyles(props)
+  const { short_description, sx = [] } = props
 
   return (
     <Typography
       variant='body1'
       component='div'
-      classes={{ root: classes.root }}
+      className={classes.description}
       dangerouslySetInnerHTML={{ __html: short_description?.html ?? '' }}
+      sx={[{ '& > p': { marginTop: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
     />
   )
 }

package/components/ProductSidebarDelivery/index.tsx

@@ -1,54 +1,58 @@
-import { responsiveVal, iconOrderBefore, SvgImageSimple } from '@graphcommerce/next-ui'
-import { darken, lighten, makeStyles, Theme, Typography } from '@material-ui/core'
-import React from 'react'
+import {
+  responsiveVal,
+  iconOrderBefore,
+  SvgIcon,
+  extendableComponent,
+} from '@graphcommerce/next-ui'
+import { Box, darken, lighten, Typography } from '@mui/material'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'grid',
-      alignItems: 'center',
-      gridTemplate: `
-        "image title"
-        ". subtitle"
-      `,
-      gridTemplateColumns: `min-content auto`,
-      columnGap: theme.spacings.xxs,
-      marginTop: theme.spacings.xxs,
-      background:
-        theme.palette.type === 'light'
-          ? darken(theme.palette.background.default, 0.01)
-          : lighten(theme.palette.background.default, 0.2),
-      padding: theme.spacings.xxs,
-      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
-    },
-    text: {},
-    image: {
-      gridArea: 'image',
-    },
-    title: {
-      gridArea: 'title',
-      fontWeight: 600,
-    },
-    subtitle: {
-      gridArea: 'subtitle',
-      color: theme.palette.text.primary,
-    },
-  }),
-  { name: 'ProductSidebarDelivery' },
-)
+const parts = ['root', 'text', 'image', 'title', 'subtitle'] as const
+const { classes } = extendableComponent('ProductSidebarDelivery', parts)
 
 export default function ProductSidebarDelivery() {
-  const classes = useStyles()
-
   return (
-    <div className={classes.root}>
-      <SvgImageSimple className={classes.image} src={iconOrderBefore} size='small' />
-      <Typography className={classes.title} variant='body2' component='div'>
+    <Box
+      className={classes.root}
+      sx={(theme) => ({
+        display: 'grid',
+        alignItems: 'center',
+        gridTemplate: `
+          "image title"
+          ".     subtitle"
+        `,
+        gridTemplateColumns: `min-content auto`,
+        columnGap: theme.spacings.xxs,
+        marginTop: theme.spacings.xxs,
+        background:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.background.default, 0.01)
+            : lighten(theme.palette.background.default, 0.2),
+        padding: theme.spacings.xxs,
+        borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
+      })}
+    >
+      <SvgIcon
+        className={classes.image}
+        src={iconOrderBefore}
+        size='small'
+        sx={{ gridArea: 'image' }}
+      />
+      <Typography
+        className={classes.title}
+        variant='body2'
+        component='div'
+        sx={{ gridArea: 'title', fontWeight: 600 }}
+      >
         Order before 22:00
       </Typography>
-      <Typography className={classes.subtitle} variant='body2' component='div'>
+      <Typography
+        className={classes.subtitle}
+        variant='body2'
+        component='div'
+        sx={(theme) => ({ gridArea: 'subtitle', color: theme.palette.text.primary })}
+      >
         Next day delivery - Shipping free
       </Typography>
-    </div>
+    </Box>
   )
 }

package/components/ProductSpecs/index.tsx

@@ -1,67 +1,58 @@
-import { responsiveVal, Row, SectionContainer, UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
+import { responsiveVal, Row, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { ProductSpecsFragment } from './ProductSpecs.gql'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    ...theme.typography.subtitle1,
-  },
-  sectionHeaderWrapper: {
-    marginBottom: theme.spacings.md,
-  },
-  specs: {
-    display: 'grid',
-    justifyContent: 'start',
-    margin: 0,
-    padding: 0,
-    gap: theme.spacings.xs,
-    '& > *': {
-      display: 'grid',
-      gridTemplateColumns: `minmax(${responsiveVal(150, 200)}, 1fr) 1fr`,
-      gap: theme.spacings.xs,
-    },
-  },
-  options: {
-    display: 'grid',
-    gridAutoFlow: 'row',
-  },
-}))
+export type ProductSpecsProps = ProductSpecsFragment & { title?: string; sx?: SxProps<Theme> }
 
-export type ProductSpecsProps = ProductSpecsFragment & { title?: string } & UseStyles<
-    typeof useStyles
-  >
+const name = 'ProductSpecs' as const
+const parts = ['root', 'specs', 'options'] as const
+const { classes } = extendableComponent(name, parts)
 
 export default function ProductSpecs(props: ProductSpecsProps) {
-  const { aggregations, title } = props
-  const classes = useStyles(props)
+  const { aggregations, title, sx = [] } = props
   const filter = ['price', 'category_id', 'size', 'new', 'sale', 'color']
   const specs = aggregations?.filter(
     (attr) => !filter.includes(attr?.attribute_code ?? '') && attr?.options?.[0]?.value !== '0',
   )
 
-  if (specs?.length === 0) {
-    return null
-  }
+  if (specs?.length === 0) return null
 
   return (
-    <Row className={classes.root}>
+    <Row
+      className={classes.root}
+      sx={[{ typographt: 'subtitle1' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
       <SectionContainer
         labelLeft={title}
-        classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
+        sx={(theme) => ({ '& .SectionHeader': { marginBottom: theme.spacings.md } })}
       >
-        <ul className={classes.specs}>
+        <Box
+          component='ul'
+          className={classes.specs}
+          sx={(theme) => ({
+            display: 'grid',
+            justifyContent: 'start',
+            margin: 0,
+            padding: 0,
+            gap: theme.spacings.xs,
+            '& > *': {
+              display: 'grid',
+              gridTemplateColumns: `minmax(${responsiveVal(150, 200)}, 1fr) 1fr`,
+              gap: theme.spacings.xs,
+            },
+          })}
+        >
           {specs?.map((aggregation) => (
             <li key={aggregation?.attribute_code}>
               <div>{aggregation?.label}</div>
-              <div className={classes.options}>
+              <Box className={classes.options} sx={{ display: 'grid', gridAutoFlow: 'row' }}>
                 {aggregation?.options?.map((option) => (
                   <span key={option?.label}>{option?.label === '1' ? 'Yes' : option?.label}</span>
                 ))}
-              </div>
+              </Box>
             </li>
           ))}
-        </ul>
+        </Box>
       </SectionContainer>
     </Row>
   )

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -1,4 +1,4 @@
-import { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@apollo/client'
+import { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
 import { GetStaticPathsResult } from 'next'
 import { ProductStaticPathsDocument, ProductStaticPathsQuery } from './ProductStaticPaths.gql'
 

package/components/ProductWeight/index.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { useMemo } from 'react'
 import { ProductWeightFragment } from './ProductWeight.gql'

package/components/index.ts

@@ -1,50 +1,40 @@
 export * from './JsonLdProduct'
-
 export * from './ProductAddToCart/ProductAddToCart'
 export { default as ProductAddToCart } from './ProductAddToCart/ProductAddToCart'
-
 export * from './ProductList/ProductList.gql'
-
-export { default as ProductListItem } from './ProductListItem'
+export * from './ProductListCount/ProductListCount'
+export * from './ProductListFilters/ProductListFilters'
+export { default as ProductListFilters } from './ProductListFilters/ProductListFilters'
+export * from './ProductListFiltersContainer'
+export { default as ProductListFiltersContainer } from './ProductListFiltersContainer'
 export * from './ProductListItem'
-
+export { default as ProductListItem } from './ProductListItem'
 export { default as ProductListItems } from './ProductListItems'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
-export { default as ProductListItemsBase } from './ProductListItems/ProductListItemsBase'
-export * from './ProductListItems/ProductListItemsBase'
 export * from './ProductListItems/getFilterTypes'
-export * from './ProductListItems/renderer'
 export * from './ProductListItems/ProductListItems.gql'
+export * from './ProductListItems/ProductListItemsBase'
+export { default as ProductListItemsBase } from './ProductListItems/ProductListItemsBase'
 export { default as ProductListParamsProvider } from './ProductListItems/ProductListParamsProvider'
+export * from './ProductListItems/renderer'
 export * from './ProductListLink/ProductListLink'
 export { default as ProductListLink } from './ProductListLink/ProductListLink'
-
-export * from './ProductListCount'
-export { default as ProductListCount } from './ProductListCount'
-export { default as ProductSidebarDelivery } from './ProductSidebarDelivery'
-export * from './ProductListFilters'
-export { default as ProductListFilters } from './ProductListFilters'
-export * from './ProductListFiltersContainer'
-export { default as ProductListFiltersContainer } from './ProductListFiltersContainer'
-
-export * from './ProductRelated/RelatedProducts.gql'
-
 export * from './ProductListPagination'
 export { default as ProductListPagination } from './ProductListPagination'
 export * from './ProductListSort'
 export { default as ProductListSort } from './ProductListSort'
+export { default as productPageCategory } from './ProductPageCategory'
 export * from './ProductPageDescription'
 export { default as ProductPageDescription } from './ProductPageDescription'
-export * from './ProductSpecs'
-export { default as ProductSpecs } from './ProductSpecs'
-export { default as productPageCategory } from './ProductPageCategory'
 export { default as ProductPageGallery } from './ProductPageGallery'
 export { default as ProductPageMeta } from './ProductPageMeta'
-export { getProductStaticPaths } from './ProductStaticPaths/getProductStaticPaths'
-export { default as ProductWeight } from './ProductWeight'
-
+export * from './ProductRelated/RelatedProducts.gql'
 export { default as ProductShortDescription } from './ProductShortDescription'
 export * from './ProductShortDescription/ProductShortDescription.gql'
-
+export { default as ProductSidebarDelivery } from './ProductSidebarDelivery'
+export * from './ProductSpecs'
+export { default as ProductSpecs } from './ProductSpecs'
+export { getProductStaticPaths } from './ProductStaticPaths/getProductStaticPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
+export { default as ProductWeight } from './ProductWeight'