@graphcommerce/magento-product 3.8.13 → 4.0.2

package/components/ProductListFiltersContainer/index.tsx

@@ -3,95 +3,37 @@ import {
   iconChevronLeft,
   iconChevronRight,
   responsiveVal,
-  SvgImageSimple,
+  SvgIcon,
   useScrollY,
-  UseStyles,
+  extendableComponent,
 } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
+import { Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    wrapper: {
-      display: 'flex',
-      justifyContent: 'center',
-      height: responsiveVal(44, 52),
-      marginBottom: theme.spacings.sm,
-      position: 'sticky',
-      top: theme.page.vertical,
-      zIndex: 9,
-      margin: '0 auto',
-      maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
-      [theme.breakpoints.down('sm')]: {
-        textAlign: 'center',
-        maxWidth: 'unset',
-        margin: `0 calc(${theme.page.horizontal} * -1)`,
-      },
-      [theme.breakpoints.down('xs')]: {
-        textAlign: 'center',
-      },
-    },
-    container: {
-      position: 'relative',
-      maxWidth: '100%',
-      padding: 6,
-      paddingLeft: 0,
-      paddingRight: 0,
-      [theme.breakpoints.up('md')]: {
-        background: theme.palette.background.default,
-        borderRadius: '99em',
-      },
-    },
-    shadow: {
-      pointerEvents: 'none',
-      zindex: '-1',
-      borderRadius: '99em',
-      position: 'absolute',
-      height: '100%',
-      width: '100%',
-      top: 0,
-      boxShadow: theme.shadows[6],
-      [theme.breakpoints.down('sm')]: {
-        boxShadow: 'none !important',
-      },
-    },
-    containerSticky: {},
-    scroller: {
-      paddingLeft: theme.page.horizontal,
-      paddingRight: theme.page.horizontal,
-      paddingBottom: 1,
-      [theme.breakpoints.up('md')]: {
-        borderRadius: '99em',
-        paddingLeft: 6,
-        paddingRight: 6,
-      },
-      columnGap: 6,
-      gridAutoColumns: 'min-content',
-    },
-    scrollerSticky: {},
-    sliderPrev: {
-      position: 'absolute',
-      top: 2,
-      left: 2,
-      zIndex: 10,
-    },
-    sliderNext: {
-      position: 'absolute',
-      top: 2,
-      right: 2,
-      zIndex: 10,
-    },
-  }),
-  { name: 'ProductListFiltersContainer' },
-)
+const MotionDiv = styled(m.div)({})
 
-export type ProductListFiltersContainerProps = PropsWithChildren<UseStyles<typeof useStyles>>
+export type ProductListFiltersContainerProps = { children: React.ReactNode; sx?: SxProps<Theme> }
+
+type OwnerState = {
+  isSticky: boolean
+}
+const name = 'ProductListFiltersContainer' as const
+const parts = [
+  'wrapper',
+  'container',
+  'shadow',
+  'containerSticky',
+  'scroller',
+  'scrollerSticky',
+  'sliderPrev',
+  'sliderNext',
+] as const
+
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export default function ProductListFiltersContainer(props: ProductListFiltersContainerProps) {
   const { children } = props
-  const classes = useStyles(props)
   const scrollY = useScrollY()
 
   const [isSticky, setIsSticky] = useState<boolean>(false)
@@ -101,6 +43,7 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
   const scrollHalfway = startPosition + spacing
 
   const wrapperRef = useRef<HTMLDivElement>(null)
+  const classes = withState({ isSticky })
 
   // Measure the sizing of the wrapping container
   useEffect(() => {
@@ -137,24 +80,94 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
   const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 1])
 
   return (
-    <m.div className={classes.wrapper} ref={wrapperRef}>
+    <MotionDiv
+      className={classes.wrapper}
+      ref={wrapperRef}
+      sx={(theme) => ({
+        display: 'flex',
+        justifyContent: 'center',
+        height: responsiveVal(44, 52),
+        marginBottom: theme.spacings.sm,
+        position: 'sticky',
+        top: theme.page.vertical,
+        zIndex: 9,
+        margin: '0 auto',
+        maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
+        [theme.breakpoints.down('md')]: {
+          textAlign: 'center',
+          maxWidth: 'unset',
+          margin: `0 calc(${theme.page.horizontal} * -1)`,
+        },
+      })}
+    >
       <ScrollerProvider scrollSnapAlign='none'>
-        <ScrollerButton direction='left' className={classes.sliderPrev}>
-          <SvgImageSimple src={iconChevronLeft} />
+        <ScrollerButton
+          direction='left'
+          className={classes.sliderPrev}
+          size='small'
+          sx={{ position: 'absolute', top: 2, left: 2, zIndex: 10 }}
+        >
+          <SvgIcon src={iconChevronLeft} />
         </ScrollerButton>
-        <div className={clsx(classes.container, isSticky && classes.containerSticky)}>
+        <Box
+          className={classes.container}
+          sx={(theme) => ({
+            position: 'relative',
+            maxWidth: '100%',
+            padding: '6px',
+            paddingLeft: 0,
+            paddingRight: 0,
+            [theme.breakpoints.up('md')]: {
+              background: theme.palette.background.default,
+              borderRadius: '99em',
+            },
+          })}
+        >
           <Scroller
-            className={clsx(classes.scroller, isSticky && classes.scrollerSticky)}
+            className={classes.scroller}
             hideScrollbar
+            sx={(theme) => ({
+              paddingLeft: theme.page.horizontal,
+              paddingRight: theme.page.horizontal,
+              paddingBottom: '1px',
+              [theme.breakpoints.up('md')]: {
+                borderRadius: '99em',
+                paddingLeft: '6px',
+                paddingRight: '6px',
+              },
+              columnGap: '6px',
+              gridAutoColumns: 'min-content',
+            })}
           >
             {children}
           </Scroller>
-          <m.div className={classes.shadow} style={{ opacity }} />
-        </div>
-        <ScrollerButton direction='right' className={classes.sliderNext}>
-          <SvgImageSimple src={iconChevronRight} />
+          <MotionDiv
+            className={classes.shadow}
+            style={{ opacity }}
+            sx={(theme) => ({
+              pointerEvents: 'none',
+              zindex: '-1',
+              borderRadius: '99em',
+              position: 'absolute',
+              height: '100%',
+              width: '100%',
+              top: 0,
+              boxShadow: theme.shadows[6],
+              [theme.breakpoints.down('md')]: {
+                boxShadow: 'none !important',
+              },
+            })}
+          />
+        </Box>
+        <ScrollerButton
+          direction='right'
+          className={classes.sliderNext}
+          size='small'
+          sx={{ position: 'absolute', top: 2, right: 2, zIndex: 10 }}
+        >
+          <SvgIcon src={iconChevronRight} />
         </ScrollerButton>
       </ScrollerProvider>
-    </m.div>
+    </MotionDiv>
   )
 }

package/components/ProductListItem/index.tsx

@@ -1,142 +1,51 @@
 import { Image, ImageProps } from '@graphcommerce/image'
-import { responsiveVal, UseStyles } from '@graphcommerce/next-ui'
-import { ButtonBase, makeStyles, Theme, Typography } from '@material-ui/core'
-import clsx from 'clsx'
+import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { ButtonBase, Typography, Box, styled, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
-import React, { PropsWithChildren, useCallback } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { useProductLink } from '../../hooks/useProductLink'
 import ProductListPrice from '../ProductListPrice'
 
-export const useProductListItemStyles = makeStyles(
-  (theme: Theme) => ({
-    buttonBase: {
-      display: 'block',
-    },
-    item: {
-      position: 'relative',
-      height: '100%',
-    },
-    title: {
-      display: 'inline',
-      color: theme.palette.text.primary,
-      overflowWrap: 'break-word',
-      wordBreak: 'break-all',
-      maxWidth: '100%',
-      marginRight: responsiveVal(3, 5),
-      gridArea: 'title',
-      fontWeight: theme.typography.fontWeightBold,
-    },
-    itemTitleContainer: {
-      display: 'grid',
-      gridTemplateColumns: 'unset',
-      alignItems: 'baseline',
-      marginTop: theme.spacings.xs,
-      columnGap: 4,
-      gridTemplateAreas: `
-        "title title"
-        "subtitle price"
-      `,
-      justifyContent: 'space-between',
-      [theme.breakpoints.up('md')]: {
-        gridTemplateAreas: `"title subtitle price"`,
-        gridTemplateColumns: 'auto auto 1fr',
-      },
-    },
-    subtitle: {
-      gridArea: 'subtitle',
-    },
-    price: {
-      gridArea: 'price',
-      textAlign: 'right',
-      [theme.breakpoints.up('sm')]: {
-        justifySelf: 'flex-end',
-      },
-    },
-    overlayItems: {
-      display: 'grid',
-      gridTemplateAreas: `
-        "topLeft topRight"
-        "bottomLeft bottomRight"
-      `,
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-      gridTemplateRows: 'repeat(2, minmax(0, 1fr))',
-      padding: responsiveVal(8, 12),
-      color: theme.palette.text.primary,
-    },
-    cellAlignRight: {
-      justifySelf: 'end',
-      textAlign: 'right',
-    },
-    cellAlignBottom: {
-      alignSelf: 'flex-end',
-    },
-    overlayItem: {
-      '& div': {
-        gap: 0,
-        // whiteSpace: 'nowrap',
-      },
-    },
-    imageContainer: ({ aspectRatio = [4, 3] }: BaseProps) => ({
-      display: 'block',
-      height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
-      position: 'relative',
-      paddingTop: `calc(100% / ${aspectRatio[0]} * ${aspectRatio[1]})`,
-      background: theme.palette.background.image, // theme specific,
-      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-    }),
-    placeholder: {
-      display: 'flex',
-      textAlign: 'center',
-      height: '100%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      color: theme.palette.background.default,
-      fontWeight: 600,
-      userSelect: 'none',
-    },
-    image: {
-      objectFit: 'contain',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-    },
-    link: {
-      textDecoration: 'underline',
-    },
-    discount: {
-      ...theme.typography.caption,
-      background: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold,
-      border: `1px solid ${theme.palette.divider}`,
-      padding: '0px 6px',
-      color: theme.palette.background.default,
-      display: 'inline-block',
-    },
-  }),
-  { name: 'ProductListItem' },
-)
+const { classes, selectors } = extendableComponent('ProductListItem', [
+  'root',
+  'item',
+  'title',
+  'titleContainer',
+  'subtitle',
+  'price',
+  'overlayItems',
+  'topLeft',
+  'topRight',
+  'bottomLeft',
+  'bottomRight',
+  'imageContainer',
+  'placeholder',
+  'image',
+  'discount',
+] as const)
 
 export type OverlayAreaKeys = 'topLeft' | 'bottomLeft' | 'topRight' | 'bottomRight'
 
 export type OverlayAreas = Partial<Record<OverlayAreaKeys, React.ReactNode>>
 
+type StyleProps = {
+  aspectRatio?: [number, number]
+  imageOnly?: boolean
+}
+
 type BaseProps = PropsWithChildren<
-  {
-    subTitle?: React.ReactNode
-    aspectRatio?: [number, number]
-    imageOnly?: boolean
-  } & OverlayAreas &
+  { subTitle?: React.ReactNode } & StyleProps &
+    OverlayAreas &
     ProductListItemFragment &
     Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
 >
 
-export type ProductListItemProps = BaseProps & UseStyles<typeof useProductListItemStyles>
+export type ProductListItemProps = BaseProps & { sx?: SxProps<Theme> }
+
+const StyledImage = styled(Image)({})
 
 export default function ProductListItem(props: ProductListItemProps) {
   const {
@@ -153,61 +62,190 @@ export default function ProductListItem(props: ProductListItemProps) {
     loading,
     sizes,
     dontReportWronglySizedImages,
+    aspectRatio = [4, 3],
+    sx = [],
   } = props
-  const classes = useProductListItemStyles(props)
+
   const productLink = useProductLink(props)
   const discount = Math.floor(price_range.minimum_price.discount?.percent_off ?? 0)
   const { locale } = useRouter()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const format = useCallback(
-    new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 }).format,
-    [],
+  const formatter = useMemo(
+    () => new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 }),
+    [locale],
   )
 
   return (
     <PageLink href={productLink} passHref>
-      <ButtonBase classes={{ root: clsx(classes.buttonBase, classes.item) }} component='a'>
-        <div className={classes.imageContainer}>
+      <ButtonBase
+        component='a'
+        sx={[
+          (theme) => ({
+            display: 'block',
+            position: 'relative',
+            height: '100%',
+            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+        className={classes.root}
+      >
+        <Box
+          sx={(theme) => ({
+            display: 'grid',
+            bgcolor: 'background.image',
+            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+            padding: responsiveVal(8, 12),
+            '& > picture': {
+              gridArea: `1 / 1 / 3 / 3`,
+              margin: `calc(${responsiveVal(8, 12)} * -1)`,
+            },
+          })}
+          className={classes.imageContainer}
+        >
           {small_image ? (
-            <Image
+            <StyledImage
               layout='fill'
+              width={1}
+              height={1}
               sizes={sizes}
               dontReportWronglySizedImages={dontReportWronglySizedImages}
               src={small_image.url ?? ''}
               alt={small_image.label ?? ''}
               className={classes.image}
               loading={loading}
+              sx={{ objectFit: 'contain', aspectRatio: `${aspectRatio[0] / aspectRatio[1]}` }}
             />
           ) : (
-            <div className={clsx(classes.placeholder, classes.image)}>NO IMAGE</div>
+            <Box
+              sx={{
+                gridArea: `1 / 1 / 3 / 3`,
+                typography: 'caption',
+                display: 'flex',
+                textAlign: 'center',
+                height: '100%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                color: 'background.default',
+                userSelect: 'none',
+              }}
+              className={`${classes.placeholder} ${classes.image}`}
+            >
+              <Trans>No Image</Trans>
+            </Box>
           )}
 
           {!imageOnly && (
-            <div className={classes.overlayItems}>
-              <div className={classes.overlayItem}>
-                {discount > 0 && <div className={classes.discount}>{format(discount / -100)}</div>}
+            <>
+              <Box
+                sx={{
+                  gridArea: `1 / 1 / 2 / 2`,
+                  zIndex: 1,
+                }}
+                className={classes.topLeft}
+              >
+                {discount > 0 && (
+                  <Box
+                    className={classes.discount}
+                    sx={{
+                      typography: 'caption',
+                      bgcolor: 'text.primary',
+                      fontWeight: 'fontWeightBold',
+                      border: 1,
+                      borderColor: 'divider',
+                      padding: '0px 6px',
+                      color: 'background.default',
+                      display: 'inline-block',
+                    }}
+                  >
+                    {formatter.format(discount / -100)}
+                  </Box>
+                )}
                 {topLeft}
-              </div>
-              <div className={clsx(classes.overlayItem, classes.cellAlignRight)}>{topRight}</div>
-              <div className={clsx(classes.overlayItem, classes.cellAlignBottom)}>{bottomLeft}</div>
-              <div className={clsx(classes.cellAlignBottom, classes.cellAlignRight)}>
+              </Box>
+              <Box
+                sx={{
+                  justifySelf: 'end',
+                  textAlign: 'right',
+                  gridArea: `1 / 2 / 2 / 3`,
+                  zIndex: 1,
+                }}
+                className={classes.topLeft}
+              >
+                {topRight}
+              </Box>
+              <Box
+                sx={{
+                  alignSelf: 'flex-end',
+                  gridArea: `2 / 1 / 3 / 2`,
+                  zIndex: 1,
+                }}
+                className={classes.bottomLeft}
+              >
+                {bottomLeft}
+              </Box>
+              <Box
+                sx={{
+                  textAlign: 'right',
+                  alignSelf: 'flex-end',
+                  gridArea: `2 / 2 / 3 / 3`,
+                  zIndex: 1,
+                  justifySelf: 'end',
+                }}
+                className={classes.bottomRight}
+              >
                 {bottomRight}
-              </div>
-            </div>
+              </Box>
+            </>
           )}
-        </div>
+        </Box>
 
         {!imageOnly && (
           <>
-            <div className={classes.itemTitleContainer}>
-              <Typography component='h2' variant='subtitle1' className={classes.title}>
+            <Box
+              className={classes.titleContainer}
+              sx={(theme) => ({
+                display: 'grid',
+                alignItems: 'baseline',
+                marginTop: theme.spacings.xs,
+                columnGap: 1,
+                gridTemplateAreas: {
+                  xs: `"title title" "subtitle price"`,
+                  md: `"title subtitle price"`,
+                },
+                gridTemplateColumns: { xs: 'unset', md: 'auto auto 1fr' },
+                justifyContent: 'space-between',
+              })}
+            >
+              <Typography
+                component='h2'
+                variant='subtitle1'
+                sx={{
+                  display: 'inline',
+                  color: 'text.primary',
+                  overflowWrap: 'break-word',
+                  wordBreak: 'break-all',
+                  maxWidth: '100%',
+                  gridArea: 'title',
+                  fontWeight: 'fontWeightBold',
+                }}
+                className={classes.title}
+              >
                 {name}
               </Typography>
-              <div className={classes.subtitle}>{subTitle}</div>
+              <Box sx={{ gridArea: 'subtitle' }} className={classes.subtitle}>
+                {subTitle}
+              </Box>
 
-              <ProductListPrice {...price_range.minimum_price} classes={{ root: classes.price }} />
-            </div>
+              <ProductListPrice
+                {...price_range.minimum_price}
+                sx={{
+                  gridArea: 'price',
+                  textAlign: 'right',
+                  justifySelf: { sm: 'flex-end' },
+                }}
+              />
+            </Box>
             {children}
           </>
         )}
@@ -215,3 +253,5 @@ export default function ProductListItem(props: ProductListItemProps) {
     </PageLink>
   )
 }
+
+ProductListItem.selectors = { ...selectors, ...ProductListPrice.selectors }