@graphcommerce/magento-product 3.8.13 → 4.0.0

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -3,33 +3,23 @@ import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/mag
 import { Money, MoneyProps } from '@graphcommerce/magento-store'
 import {
   Button,
-  ButtonProps,
   MessageSnackbar,
   TextInputNumber,
   iconChevronRight,
-  SvgImageSimple,
+  SvgIcon,
+  extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Divider, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Divider, Typography, ButtonProps, Box } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    button: {
-      marginTop: theme.spacings.sm,
-      width: '100%',
-    },
-    price: {
-      fontWeight: theme.typography.fontWeightBold,
-      margin: `${theme.spacings.sm} 0`,
-    },
-    divider: {
-      margin: `${theme.spacings.xs} 0`,
-    },
-  }),
-  { name: 'AddToCart' },
-)
+const { classes, selectors } = extendableComponent('ProductAddToCart', [
+  'root',
+  'button',
+  'price',
+  'divider',
+] as const)
 
 export type AddToCartProps = React.ComponentProps<typeof ProductAddToCart>
 
@@ -41,7 +31,7 @@ export default function ProductAddToCart(
     children?: React.ReactNode
   } & Omit<ButtonProps, 'type' | 'name'>,
 ) {
-  const { name, children, variables, price, ...buttonProps } = props
+  const { name, children, variables, price, sx, ...buttonProps } = props
 
   const form = useFormGqlMutationCart(ProductAddToCartDocument, {
     defaultValues: { ...variables },
@@ -49,13 +39,19 @@ export default function ProductAddToCart(
 
   const { handleSubmit, formState, error, muiRegister, required } = form
   const submitHandler = handleSubmit(() => {})
-  const classes = useStyles()
 
   return (
-    <form onSubmit={submitHandler} noValidate>
-      <Divider className={classes.divider} />
+    <Box component='form' onSubmit={submitHandler} noValidate className={classes.root} sx={sx}>
+      <Divider className={classes.divider} sx={(theme) => ({ margin: `${theme.spacings.xs} 0` })} />
 
-      <Typography variant='h4' className={classes.price}>
+      <Typography
+        variant='h4'
+        className={classes.price}
+        sx={(theme) => ({
+          fontWeight: theme.typography.fontWeightBold,
+          margin: `${theme.spacings.sm} 0`,
+        })}
+      >
         <Money {...price} />
       </Typography>
 
@@ -72,11 +68,15 @@ export default function ProductAddToCart(
       {children}
       <Button
         type='submit'
-        classes={{ root: classes.button }}
+        className={classes.button}
         loading={formState.isSubmitting}
         color='primary'
         variant='pill'
         size='large'
+        sx={(theme) => ({
+          marginTop: theme.spacings.sm,
+          width: '100%',
+        })}
         {...buttonProps}
       >
         Add to Cart
@@ -93,7 +93,7 @@ export default function ProductAddToCart(
               size='medium'
               variant='pill'
               color='secondary'
-              endIcon={<SvgImageSimple src={iconChevronRight} inverted />}
+              endIcon={<SvgIcon src={iconChevronRight} />}
             >
               View shopping cart
             </Button>
@@ -104,6 +104,7 @@ export default function ProductAddToCart(
           <strong>{name}</strong>&nbsp;has been added to your shopping cart!
         </>
       </MessageSnackbar>
-    </form>
+    </Box>
   )
 }
+ProductAddToCart.selectors = selectors

package/components/ProductListCount/ProductListCount.tsx

@@ -0,0 +1,46 @@
+import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { Box, Divider, SxProps, Theme, Typography } from '@mui/material'
+import { ProductListCountFragment } from './ProductListCount.gql'
+
+const { classes, selectors } = extendableComponent('ProductListCount', [
+  'root',
+  'line',
+  'count',
+] as const)
+
+export type ProductCountProps = ProductListCountFragment & { sx?: SxProps<Theme> }
+
+export function ProductListCount(props: ProductCountProps) {
+  const { total_count, sx = [] } = props
+
+  return (
+    <Box
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          gridAutoFlow: 'column',
+          gridTemplateColumns: '1fr max-content 1fr',
+          columnGap: theme.spacings.xs,
+          maxWidth: '100%',
+          width: responsiveVal(280, 650),
+          margin: '0 auto',
+          alignItems: 'center',
+          marginTop: theme.spacings.md,
+          marginBottom: theme.spacings.md,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      className={classes.root}
+    >
+      <Divider component='div' className={classes.line} />
+      <Typography variant='body2' color='text.disabled' className={classes.count}>
+        {total_count === 0 && <Trans>no products</Trans>}
+        {total_count === 1 && <Trans>one products</Trans>}
+        {(total_count ?? 0) > 1 && <Trans>{total_count} products</Trans>}
+      </Typography>
+      <Divider component='div' className={classes.line} />
+    </Box>
+  )
+}
+ProductListCount.selectors = selectors

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,23 +1,18 @@
-import { cloneDeep } from '@apollo/client/utilities'
-import { useChipMenuStyles, iconCancelAlt, SvgImageSimple } from '@graphcommerce/next-ui'
-import { Chip, ChipProps } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
+import { cloneDeep } from '@graphcommerce/graphql'
+import { iconCancelAlt, SvgIcon } from '@graphcommerce/next-ui'
+import { Chip, ChipProps, SxProps, Theme } from '@mui/material'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { FilterIn } from './FilterEqualType'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
-export type FilterCheckboxTypeProps = NonNullable<
-  NonNullable<ProductListFiltersFragment['aggregations']>[0]
-> &
-  Omit<ChipProps, 'selected'>
+type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
+export type FilterCheckboxTypeProps = Filter & Omit<ChipProps, 'selected'> & { sx?: SxProps<Theme> }
 
 export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
   const { attribute_code, count, label, options, ...chipProps } = props
   const { params } = useProductListParamsContext()
-  const classes = useChipMenuStyles(props)
   const currentFilter = params.filters[attribute_code]
   const replaceRoute = useProductListLinkReplace({ scroll: false })
 
@@ -37,7 +32,6 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
       link={{ scroll: false, replace: true }}
     >
       <Chip
-        variant='outlined'
         color={isActive ? undefined : 'default'}
         onDelete={
           isActive
@@ -51,11 +45,10 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
               }
             : undefined
         }
-        deleteIcon={isActive ? <SvgImageSimple src={iconCancelAlt} size='small' /> : undefined}
+        deleteIcon={isActive ? <SvgIcon src={iconCancelAlt} size='small' /> : undefined}
         label={label}
         clickable
         {...chipProps}
-        className={clsx(classes.chip, isActive && classes.chipSelected, chipProps.className)}
       />
     </ProductListLink>
   )

package/components/ProductListFilters/FilterEqualType.tsx

@@ -1,103 +1,52 @@
-import { cloneDeep } from '@apollo/client/utilities'
-import { FilterEqualTypeInput } from '@graphcommerce/graphql'
-import { ChipMenu, ChipMenuProps, responsiveVal } from '@graphcommerce/next-ui'
+import { cloneDeep, FilterEqualTypeInput } from '@graphcommerce/graphql'
+import { ChipMenu, ChipMenuProps, responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
 import {
+  Box,
   Checkbox,
   ListItem,
   ListItemSecondaryAction,
   ListItemText,
-  makeStyles,
-  Theme,
-} from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
+  listItemTextClasses,
+} from '@mui/material'
 import { SetRequired } from 'type-fest'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
+type OwnerState = {
+  isColor: boolean
+  isActive: boolean
+}
+const componentName = 'FilterEqual' as const
+const parts = [
+  'listItem',
+  'listItemInnerContainer',
+  'checkbox',
+  'linkContainer',
+  'button',
+  'resetButton',
+  'filterAmount',
+  'filterLabel',
+  'isColor',
+  'isActive',
+] as const
+
+const { classes, selectors, withState } = extendableComponent<
+  OwnerState,
+  typeof componentName,
+  typeof parts
+>(componentName, parts)
+
 export type FilterIn = SetRequired<Omit<FilterEqualTypeInput, 'eq'>, 'in'>
 
-type FilterEqualTypeProps = NonNullable<
-  NonNullable<ProductListFiltersFragment['aggregations']>[0]
-> &
-  Omit<ChipMenuProps, 'selected'>
+type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
 
-const useFilterEqualStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {},
-    listItem: {
-      padding: `0 ${theme.spacings.xxs} 0`,
-      display: 'block',
-      '&:not(:nth-last-of-type(-n+2)) > div': {
-        borderBottom: `1px solid ${theme.palette.divider}`,
-      },
-    },
-    listItemInnerContainer: {
-      width: '100%',
-      paddingTop: responsiveVal(0, 3),
-      paddingBottom: theme.spacings.xxs,
-      '& > div': {
-        display: 'inline-block',
-        [theme.breakpoints.down('sm')]: {
-          maxWidth: '72%',
-        },
-      },
-    },
-    checkbox: {
-      padding: 0,
-      margin: '-10px 0 0 0',
-      float: 'right',
-    },
-    linkContainer: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(2, 1fr)',
-      columnGap: responsiveVal(2, 16),
-      minWidth: 0,
-      [theme.breakpoints.down('sm')]: {
-        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-      },
-    },
-    button: {
-      float: 'right',
-      marginTop: theme.spacings.xxs,
-      marginRight: theme.spacings.xxs,
-      textDecoration: 'none',
-    },
-    resetButton: {
-      // background: theme.palette.grey['100'],
-      marginRight: theme.spacings.xxs,
-    },
-    filterAmount: {
-      color: theme.palette.grey[500],
-      marginLeft: 4,
-      fontSize: theme.typography.pxToRem(11),
-      display: 'inline',
-    },
-    filterLabel: {
-      display: 'inline',
-      overflow: 'hidden',
-      whiteSpace: 'break-spaces',
-    },
-    isColor: {
-      border: `1px solid ${theme.palette.divider}`,
-      '& > *': {
-        opacity: 0,
-      },
-    },
-    isActive: {
-      border: `1px solid ${theme.palette.primary.main}`,
-      boxShadow: `inset 0 0 0 4px ${theme.palette.background.paper}`,
-    },
-  }),
-  { name: 'FilterEqual' },
-)
+type FilterEqualTypeProps = Filter & Omit<ChipMenuProps, 'selected'>
 
 export default function FilterEqualType(props: FilterEqualTypeProps) {
-  const { attribute_code, count, label, options, ...chipProps } = props
+  const { attribute_code, count, label, options, __typename, ...chipProps } = props
   const { params } = useProductListParamsContext()
-  const classes = useFilterEqualStyles()
   const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   const currentFilter: FilterEqualTypeInput = cloneDeep(params.filters[attribute_code]) ?? {
@@ -127,19 +76,25 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
       selected={currentLabels.length > 0}
       selectedLabel={currentLabels.length > 0 ? currentLabels.join(', ') : undefined}
       onDelete={currentLabels.length > 0 ? removeFilter : undefined}
-      className={classes.root}
+      className={componentName}
     >
-      <div className={classes.linkContainer}>
+      <Box
+        className={classes.linkContainer}
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: { xs: 'repeat(2, minmax(0, 1fr))', md: 'repeat(2, 1fr)' },
+          columnGap: responsiveVal(2, 16),
+          minWidth: 0,
+        }}
+      >
         {options?.map((option) => {
           if (!option?.value) return null
           const labelId = `filter-equal-${attribute_code}-${option?.value}`
           const filters = cloneDeep(params.filters)
-          let isColor = false
-
-          if (label?.toLowerCase().includes('color')) {
-            isColor = true
-          }
+          const isColor = !!attribute_code?.toLowerCase().includes('color')
+          const isActive = Boolean(isColor && currentFilter.in?.includes(option?.value) && isColor)
 
+          const cls = withState({ isColor, isActive })
           if (currentFilter.in?.includes(option.value)) {
             filters[attribute_code] = {
               ...currentFilter,
@@ -161,12 +116,47 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
               color='inherit'
               link={{ replace: anyFilterActive }}
             >
-              <ListItem dense className={classes.listItem}>
-                <div className={classes.listItemInnerContainer}>
+              <ListItem
+                dense
+                className={cls.listItem}
+                sx={(theme) => ({
+                  padding: `0 ${theme.spacings.xxs} 0`,
+                  display: 'block',
+                  '&:not(:nth-last-of-type(-n+2)) > div': {
+                    borderBottom: `1px solid ${theme.palette.divider}`,
+                  },
+                })}
+              >
+                <Box
+                  className={cls.listItemInnerContainer}
+                  sx={(theme) => ({
+                    width: '100%',
+                    paddingTop: responsiveVal(0, 3),
+                    paddingBottom: theme.spacings.xxs,
+                    '& > div': {
+                      display: 'inline-block',
+                      [theme.breakpoints.down('md')]: {
+                        maxWidth: '72%',
+                      },
+                    },
+                  })}
+                >
                   <ListItemText
                     primary={option?.label}
-                    classes={{ primary: classes.filterLabel, secondary: classes.filterAmount }}
                     secondary={`(${option?.count})`}
+                    sx={(theme) => ({
+                      [`& .${listItemTextClasses.primary}`]: {
+                        display: 'inline',
+                        overflow: 'hidden',
+                        whiteSpace: 'break-spaces',
+                      },
+                      [`& .${listItemTextClasses.secondary}`]: {
+                        color: theme.palette.grey[500],
+                        marginLeft: `4px`,
+                        fontSize: theme.typography.pxToRem(11),
+                        display: 'inline',
+                      },
+                    })}
                   />
                   <ListItemSecondaryAction>
                     <Checkbox
@@ -177,13 +167,26 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
                       color='primary'
                       disableRipple
                       inputProps={{ 'aria-labelledby': labelId }}
-                      className={clsx(
-                        classes.checkbox,
-                        isColor && classes.isColor,
-                        currentFilter.in?.includes(option?.value) && isColor
-                          ? classes.isActive
-                          : false,
-                      )}
+                      className={cls.checkbox}
+                      sx={[
+                        {
+                          padding: 0,
+                          margin: '-10px 0 0 0',
+                          float: 'right',
+                        },
+                        isColor && {
+                          border: 1,
+                          borderColor: 'divider',
+                          '& > *': {
+                            opacity: 0,
+                          },
+                        },
+                        isActive &&
+                          ((theme) => ({
+                            border: `1px solid ${theme.palette.primary.main}`,
+                            boxShadow: `inset 0 0 0 4px ${theme.palette.background.paper}`,
+                          })),
+                      ]}
                       style={
                         isColor
                           ? { background: `${option?.label}`, color: `${option?.label}` }
@@ -191,12 +194,14 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
                       }
                     />
                   </ListItemSecondaryAction>
-                </div>
+                </Box>
               </ListItem>
             </ProductListLink>
           )
         })}
-      </div>
+      </Box>
     </ChipMenu>
   )
 }
+
+FilterEqualType.selectors = selectors

package/components/ProductListFilters/FilterRangeType.tsx

@@ -1,8 +1,7 @@
-import { cloneDeep } from '@apollo/client/utilities'
-import { FilterRangeTypeInput } from '@graphcommerce/graphql'
+import { cloneDeep, FilterRangeTypeInput } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
-import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
-import { makeStyles, Mark, Slider, Theme } from '@material-ui/core'
+import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
+import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
@@ -14,47 +13,16 @@ type FilterRangeTypeProps = NonNullable<
   Omit<ChipMenuProps, 'selected'>
 
 const sliderThumbWidth = 28
-const useFilterRangeType = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      padding: `${theme.spacings.xxs} ${theme.spacings.xxs} !important`,
-      width: '100%',
-    },
-    slider: {
-      maxWidth: `calc(100% - ${sliderThumbWidth}px)`,
-      margin: `${theme.spacings.xxs} auto`,
-      display: 'block',
-      paddingBottom: 32,
-      '& .MuiSlider-rail': {
-        color: theme.palette.text.disabled,
-        height: 4,
-        borderRadius: 10,
-      },
-      '& .MuiSlider-track': {
-        color: theme.palette.primary.main,
-        height: 4,
-      },
-      '& .MuiSlider-thumb': {
-        width: sliderThumbWidth,
-        height: sliderThumbWidth,
-        marginLeft: `-${sliderThumbWidth * 0.5}px`,
-        marginTop: `-${sliderThumbWidth * 0.5}px`,
-        background: theme.palette.background.default,
-        boxShadow: theme.shadows[6],
-      },
-    },
-  }),
-  { name: 'FilterRangeType' },
-)
+
+const { classes } = extendableComponent('FilterRangeType', ['root', 'container', 'slider'] as const)
 
 export default function FilterRangeType(props: FilterRangeTypeProps) {
   const { attribute_code, label, options, ...chipProps } = props
-  const classes = useFilterRangeType(props)
   const { params } = useProductListParamsContext()
   const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   // eslint-disable-next-line no-case-declarations
-  const marks: { [index: number]: Mark } = {}
+  const marks: { [index: number]: { value: number; label?: React.ReactNode } } = {}
   const paramValues = params.filters[attribute_code]
 
   const [min, maxish] = options
@@ -141,6 +109,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
       selected={!!currentLabel}
       {...chipProps}
       onDelete={currentLabel ? resetFilter : undefined}
+      className={classes.root}
       labelRight={
         <>
           <Money round value={value[0]} />
@@ -149,7 +118,13 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
         </>
       }
     >
-      <div className={classes.container}>
+      <Box
+        sx={(theme) => ({
+          padding: `${theme.spacings.xxs} ${theme.spacings.xxs} !important`,
+          width: '100%',
+        })}
+        className={classes.container}
+      >
         <Slider
           min={min}
           max={max}
@@ -167,8 +142,25 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
           }}
           valueLabelDisplay='off'
           className={classes.slider}
+          sx={(theme) => ({
+            maxWidth: `calc(100% - ${sliderThumbWidth}px)`,
+            margin: `${theme.spacings.xxs} auto`,
+            display: 'block',
+            paddingBottom: '32px',
+            '& .MuiSlider-rail': {
+              height: 4,
+              borderRadius: '10px',
+            },
+            '& .MuiSlider-track': {
+              height: 4,
+            },
+            '& .MuiSlider-thumb': {
+              width: sliderThumbWidth,
+              height: sliderThumbWidth,
+            },
+          })}
         />
-      </div>
+      </Box>
     </ChipMenu>
   )
 }

package/components/ProductListFilters/ProductListFilters.graphql

@@ -1,9 +1,11 @@
 fragment ProductListFilters on Products {
   aggregations {
+    __typename
     label
     count
     attribute_code
     options {
+      __typename
       label
       value
       count

package/components/ProductListFilters/{index.tsx → ProductListFilters.tsx}

@@ -1,5 +1,4 @@
 import { ChipMenuProps } from '@graphcommerce/next-ui'
-import React from 'react'
 import { FilterTypes } from '../ProductListItems/filterTypes'
 import FilterCheckboxType from './FilterCheckboxType'
 import FilterEqualType from './FilterEqualType'