@graphcommerce/magento-product-configurable 3.6.41 → 4.0.0

package/ConfigurableCartItem/OptionsList.tsx

@@ -1,114 +1,46 @@
-import { responsiveVal } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    optionsList: {
-      gridArea: 'itemOptions',
-      cursor: 'default',
-      marginLeft: 0,
-      paddingBottom: 4,
-    },
-    option: {
-      color: theme.palette.text.secondary,
-      textDecoration: 'underline',
-      marginRight: theme.spacings.xs,
-      paddingBottom: 1,
-      display: 'inline',
-    },
-    menuPaper: {
-      minWidth: responsiveVal(200, 560),
-      maxWidth: 560,
-      marginTop: -8,
-      padding: `${theme.spacings.xs} ${theme.spacings.xs}`,
-      [theme.breakpoints.down('xs')]: {
-        minWidth: 0,
-        width: '100%',
-        maxWidth: `calc(100% - (${theme.page.horizontal}px * 2))`,
-        margin: '0 auto',
-        marginTop: '8px',
-      },
-    },
-    menuList: {
-      padding: 0,
-      '&:focus': {
-        outline: 'none',
-      },
-    },
-    menuTitle: {
-      ...theme.typography.h5,
-      paddingBottom: theme.spacings.xxs,
-      marginBottom: theme.spacings.xxs,
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-    menuContent: {
-      display: 'flex',
-    },
-    saveChangesWrap: {
-      alignSelf: 'center',
-    },
-    saveChangesButton: {
-      padding: '10px 20px',
-      fontWeight: theme.typography.fontWeightBold,
-      boxShadow: theme.shadows[3],
-    },
-  }),
-  { name: 'CartItemOptionsList' },
-)
+type CartItemOptionsListProps = ConfigurableCartItemFragment & {
+  sx?: SxProps<Theme>
+}
 
-type CartItemOptionsListProps = ConfigurableCartItemFragment
+const name = 'ColorSwatchData' as const
+const parts = ['root', 'option'] as const
+const { classes } = extendableComponent(name, parts)
 
 export default function OptionsList(props: CartItemOptionsListProps) {
-  const { configurable_options } = props
-  const classes = useStyles()
-  // const [anchorEl, setAnchorEl] = useState<HTMLDivElement>()
-
-  // const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-  //   setAnchorEl(event.currentTarget)
-  // }
-
-  // const handleClose = () => {
-  //   setAnchorEl(undefined)
-  // }
-
-  // const handleChange = () => {
-  //   //
-  // }
+  const { configurable_options, sx = [] } = props
 
   return (
-    <>
-      <div className={classes.optionsList} /* onClick={handleClick}*/>
-        {configurable_options &&
-          configurable_options.map((option) => (
-            <div key={option?.configurable_product_option_uid} className={classes.option}>
-              {option?.value_label}
-            </div>
-          ))}
-      </div>
-
-      {/* <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={handleClose}
-        getContentAnchorEl={null} // https://github.com/mui-org/material-ui/issues/7961#issuecomment-326116559
-        variant='selectedMenu'
-        anchorPosition={{ top: 6, left: 0 }}
-        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
-        classes={{ paper: classes.menuPaper, list: classes.menuList }}
-      >
-        <div className={classes.menuTitle}>Edit product</div>
-        <div className={classes.menuContent}>
-          <CartItemOptionDropdown label='Color' onChange={handleChange} />
-          <CartItemOptionDropdown label='Size' onChange={handleChange} />
-          <div className={classes.saveChangesWrap}>
-            <Button variant='pill' className={classes.saveChangesButton}>
-              Save changes
-            </Button>
-          </div>
-        </div>
-      </Menu> */}
-    </>
+    <Box
+      className={classes.root}
+      sx={[
+        {
+          gridArea: 'itemOptions',
+          cursor: 'default',
+          marginLeft: 0,
+          paddingBottom: '4px',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {configurable_options &&
+        configurable_options.map((option) => (
+          <Box
+            key={option?.configurable_product_option_uid}
+            className={classes.option}
+            sx={(theme) => ({
+              color: 'text.secondary',
+              textDecoration: 'underline',
+              marginRight: theme.spacings.xs,
+              display: 'inline',
+            })}
+          >
+            {option?.value_label}
+          </Box>
+        ))}
+    </Box>
   )
 }

package/ConfigurableOptions/index.tsx

@@ -1,41 +1,35 @@
-import { RenderType, SectionHeader, ToggleButton, ToggleButtonGroup } from '@graphcommerce/next-ui'
+import {
+  RenderType,
+  SectionHeader,
+  ToggleButton,
+  ToggleButtonGroup,
+  extendableComponent,
+} from '@graphcommerce/next-ui'
 import { Controller, FieldErrors, UseControllerProps } from '@graphcommerce/react-hook-form'
-import { BaseTextFieldProps, FormHelperText, makeStyles, Theme } from '@material-ui/core'
+import { BaseTextFieldProps, FormHelperText } from '@mui/material'
 import React from 'react'
 import { Selected, useConfigurableContext } from '../ConfigurableContext'
 import { SwatchTypeRenderer, SwatchSize } from '../Swatches'
-import ColorSwatchData from '../Swatches/ColorSwatchData'
-import ImageSwatchData from '../Swatches/ImageSwatchData'
-import TextSwatchData from '../Swatches/TextSwatchData'
+import { ColorSwatchData } from '../Swatches/ColorSwatchData'
+import { ImageSwatchData } from '../Swatches/ImageSwatchData'
+import { TextSwatchData } from '../Swatches/TextSwatchData'
 
-export type ConfigurableOptionsProps = {
+export type ConfigurableOptionsInputProps = {
   sku: string
   errors?: FieldErrors
+  size?: SwatchSize
 } & UseControllerProps<any> &
   Pick<BaseTextFieldProps, 'FormHelperTextProps' | 'helperText'> & {
     optionEndLabels?: Record<string, React.ReactNode>
   }
 
-export const useStyles = makeStyles(
-  (theme: Theme) => ({
-    toggleButtonGroup: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(2, 1fr)',
-      gap: theme.spacings.xs,
-    },
-    button: {
-      minHeight: theme.spacings.lg,
-    },
-    helperText: {
-      position: 'absolute',
-    },
-  }),
-  { name: 'ConfigurableOptions' },
-)
-
 const renderer: SwatchTypeRenderer = { TextSwatchData, ImageSwatchData, ColorSwatchData }
 
-export default function ConfigurableOptionsInput(props: ConfigurableOptionsProps) {
+const compName = 'ConfigurableOptionsInput' as const
+const parts = ['buttonGroup', 'button', 'helperText'] as const
+const { classes } = extendableComponent(compName, parts)
+
+export default function ConfigurableOptionsInput(props: ConfigurableOptionsInputProps) {
   const {
     sku,
     FormHelperTextProps,
@@ -44,11 +38,11 @@ export default function ConfigurableOptionsInput(props: ConfigurableOptionsProps
     errors,
     helperText,
     optionEndLabels,
+    size = 'large',
     ...controlProps
   } = props
 
   const { options, selection, select, getVariants } = useConfigurableContext(sku)
-  const classes = useStyles()
 
   return (
     <>
@@ -77,7 +71,6 @@ export default function ConfigurableOptionsInput(props: ConfigurableOptionsProps
                   defaultValue={selection[attribute_code] ?? ''}
                   required
                   exclusive
-                  minWidth={100}
                   onChange={(_, val: string | number) => {
                     onChange(val)
                     select((prev) => ({ ...prev, [attribute_code]: val } as Selected))
@@ -85,7 +78,8 @@ export default function ConfigurableOptionsInput(props: ConfigurableOptionsProps
                   ref={ref}
                   onBlur={onBlur}
                   value={value}
-                  classes={{ root: classes.toggleButtonGroup }}
+                  className={classes.buttonGroup}
+                  size={size}
                 >
                   {option?.values?.map((val) => {
                     if (!val?.uid || !option.attribute_code) return null
@@ -110,20 +104,28 @@ export default function ConfigurableOptionsInput(props: ConfigurableOptionsProps
                         name={inputName}
                         className={classes.button}
                         disabled={!itemVariant}
+                        size={size}
                       >
                         <RenderType
                           renderer={renderer}
                           {...val}
                           {...swatch_data}
                           price={itemVariant?.product?.price_range.minimum_price.final_price}
-                          size={'large' as SwatchSize}
+                          size={size}
                         />
                       </ToggleButton>
                     )
                   })}
                 </ToggleButtonGroup>
                 {error && (
-                  <FormHelperText error {...FormHelperTextProps} className={classes.helperText}>
+                  <FormHelperText
+                    error
+                    {...FormHelperTextProps}
+                    className={classes.helperText}
+                    sx={{
+                      position: 'absolute',
+                    }}
+                  >
                     {`${option.label} is ${errorHelperText?.type}`}
                   </FormHelperText>
                 )}

package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -3,19 +3,20 @@ import { Money } from '@graphcommerce/magento-store'
 import {
   AnimatedRow,
   Button,
+  extendableComponent,
   iconChevronRight,
   MessageSnackbar,
-  SvgImageSimple,
+  SvgIcon,
   TextInputNumber,
 } from '@graphcommerce/next-ui'
-import { Divider, makeStyles, Theme, Typography } from '@material-ui/core'
-import { Alert } from '@material-ui/lab'
+import { Trans } from '@lingui/macro'
+import { Divider, Typography, Alert, Box } from '@mui/material'
 import { AnimatePresence } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'
 import { Selected, useConfigurableContext } from '../ConfigurableContext'
 import cheapestVariant from '../ConfigurableContext/cheapestVariant'
-import ConfigurableOptionsInput from '../ConfigurableOptions'
+import ConfigurableOptionsInput, { ConfigurableOptionsInputProps } from '../ConfigurableOptions'
 import {
   ConfigurableProductAddToCartDocument,
   ConfigurableProductAddToCartMutationVariables,
@@ -26,35 +27,19 @@ type ConfigurableProductAddToCartProps = {
   name: string
   optionEndLabels?: Record<string, React.ReactNode>
   children?: React.ReactNode
+  optionsProps?: Omit<
+    ConfigurableOptionsInputProps,
+    'name' | 'sku' | 'control' | 'rules' | 'errors' | 'optionEndLabels'
+  >
 }
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    form: {
-      width: '100%',
-    },
-    button: {
-      marginTop: theme.spacings.sm,
-      marginBottom: theme.spacings.sm,
-      width: '100%',
-    },
-    finalPrice: {
-      marginTop: theme.spacings.sm,
-    },
-    quantity: {
-      marginTop: theme.spacings.sm,
-    },
-    divider: {
-      margin: `${theme.spacings.sm} 0`,
-    },
-  }),
-  { name: 'ConfigurableProductAddToCart' },
-)
+const compName = 'ConfigurableOptionsInput' as const
+const parts = ['form', 'button', 'finalPrice', 'quantity', 'divider'] as const
+const { classes } = extendableComponent(compName, parts)
 
 export default function ConfigurableProductAddToCart(props: ConfigurableProductAddToCartProps) {
-  const { name, children, variables, optionEndLabels, ...buttonProps } = props
+  const { name, children, variables, optionEndLabels, optionsProps, ...buttonProps } = props
   const { getUids, getVariants, selection } = useConfigurableContext(variables.sku)
-  const classes = useStyles()
 
   const form = useFormGqlMutationCart(ConfigurableProductAddToCartDocument, {
     defaultValues: { ...variables },
@@ -69,8 +54,14 @@ export default function ConfigurableProductAddToCart(props: ConfigurableProductA
   const submitHandler = handleSubmit(() => {})
 
   return (
-    <form onSubmit={submitHandler} noValidate className={classes.form}>
-      <Divider className={classes.divider} />
+    <Box
+      component='form'
+      onSubmit={submitHandler}
+      noValidate
+      className={classes.form}
+      sx={{ width: '100%' }}
+    >
+      <Divider className={classes.divider} sx={(theme) => ({ margin: `${theme.spacings.sm} 0` })} />
       <ConfigurableOptionsInput
         name='selectedOptions'
         sku={variables.sku}
@@ -78,6 +69,7 @@ export default function ConfigurableProductAddToCart(props: ConfigurableProductA
         rules={{ required: required.selectedOptions }}
         errors={formState.errors.selectedOptions}
         optionEndLabels={optionEndLabels}
+        {...optionsProps}
       />
       <TextInputNumber
         variant='outlined'
@@ -89,9 +81,15 @@ export default function ConfigurableProductAddToCart(props: ConfigurableProductA
         // disabled={loading}
         size='small'
         className={classes.quantity}
+        sx={(theme) => ({ marginTop: theme.spacings.sm })}
       />
-      <Divider className={classes.divider} />
-      <Typography component='div' variant='h3' className={classes.finalPrice}>
+      <Divider className={classes.divider} sx={(theme) => ({ margin: `${theme.spacings.sm} 0` })} />
+      <Typography
+        component='div'
+        variant='h3'
+        className={classes.finalPrice}
+        sx={(theme) => ({ marginTop: theme.spacings.sm })}
+      >
         <Money
           {...cheapestVariant(getVariants(selection))?.product?.price_range.minimum_price
             .final_price}
@@ -104,8 +102,13 @@ export default function ConfigurableProductAddToCart(props: ConfigurableProductA
         color='primary'
         variant='pill'
         size='large'
-        classes={{ root: classes.button }}
+        className={classes.button}
         {...buttonProps}
+        sx={(theme) => ({
+          marginTop: theme.spacings.sm,
+          marginBottom: theme.spacings.sm,
+          width: '100%',
+        })}
       >
         Add to Cart
       </Button>
@@ -134,17 +137,17 @@ export default function ConfigurableProductAddToCart(props: ConfigurableProductA
               size='medium'
               variant='pill'
               color='secondary'
-              endIcon={<SvgImageSimple src={iconChevronRight} inverted />}
+              endIcon={<SvgIcon src={iconChevronRight} />}
             >
               View shopping cart
             </Button>
           </PageLink>
         }
       >
-        <>
+        <Trans>
           <strong>{name}</strong>&nbsp;has been added to your shopping cart!
-        </>
+        </Trans>
       </MessageSnackbar>
-    </form>
+    </Box>
   )
 }

package/SwatchList.tsx

@@ -3,9 +3,9 @@ import { RenderType } from '@graphcommerce/next-ui'
 import React from 'react'
 import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
 import { SwatchSize, SwatchTypeRenderer } from './Swatches'
-import ColorSwatchData from './Swatches/ColorSwatchData'
-import ImageSwatchData from './Swatches/ImageSwatchData'
-import TextSwatchData from './Swatches/TextSwatchData'
+import { ColorSwatchData } from './Swatches/ColorSwatchData'
+import { ImageSwatchData } from './Swatches/ImageSwatchData'
+import { TextSwatchData } from './Swatches/TextSwatchData'
 
 type SwatchListProps = {
   attributes: string[]

package/Swatches/ColorSwatchData.tsx

@@ -1,42 +1,46 @@
-import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
-import { makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
+import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { ColorSwatchDataFragment } from './ColorSwatchData.gql'
 import { SwatchDataProps } from '.'
 
-export const useStyles = makeStyles(
-  {
-    root: {
-      margin: '0 auto',
-      height: responsiveVal(22, 30),
-      width: responsiveVal(22, 30),
-      borderRadius: '50%',
-    },
-    sizeSmall: {
-      height: responsiveVal(8, 12),
-      width: responsiveVal(8, 12),
-      marginTop: responsiveVal(2, 4),
-    },
-  },
-  { name: 'ColorSwatchData' },
-)
+type ColorSwatchDataProps = ColorSwatchDataFragment &
+  SwatchDataProps & {
+    sx?: SxProps<Theme>
+  }
 
-type ColorSwatchDataProps = ColorSwatchDataFragment & SwatchDataProps & UseStyles<typeof useStyles>
+type OwnerState = Pick<SwatchDataProps, 'size'>
+const name = 'ColorSwatchData' as const
+const parts = ['root', 'color', 'label'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-export default function ColorSwatchData(props: ColorSwatchDataProps) {
-  const classes = useStyles(props)
-  const { value, store_label, size } = props
+export function ColorSwatchData(props: ColorSwatchDataProps) {
+  const { value, store_label, size, sx } = props
+  const classes = withState({ size })
 
   return (
-    <div>
-      <div
-        className={clsx({
-          [classes.root]: true,
-          [classes.sizeSmall]: size === 'small',
-        })}
+    <Box className={classes.root} sx={sx}>
+      <Box
+        className={classes.color}
         style={{ backgroundColor: value ?? undefined }}
+        sx={[
+          {
+            margin: '0 auto',
+            height: responsiveVal(22, 30),
+            width: responsiveVal(22, 30),
+            borderRadius: '50%',
+            '&.sizeSmall': {
+              height: responsiveVal(8, 12),
+              width: responsiveVal(8, 12),
+              marginTop: responsiveVal(2, 4),
+            },
+          },
+        ]}
       />
-      <span>{size !== 'small' && store_label}</span>
-    </div>
+      {size !== 'small' && (
+        <Box component='span' className={classes.label}>
+          {store_label}
+        </Box>
+      )}
+    </Box>
   )
 }

package/Swatches/ImageSwatchData.tsx

@@ -1,49 +1,52 @@
 import { Image } from '@graphcommerce/image'
-import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
+import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { ImageSwatchDataFragment } from './ImageSwatchData.gql'
 import { SwatchDataProps } from '.'
 
-export const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      height: responsiveVal(40, 80),
-      width: responsiveVal(40, 80),
-      border: `3px solid ${theme.palette.divider}`,
-      boxSizing: 'border-box',
-      borderRadius: '50%',
-      objectFit: 'cover',
-    },
-    sizeSmall: {
-      width: 20,
-      height: 20,
-    },
-  }),
-  { name: 'ImageSwatchData' },
-)
-type ImageSwatchDataProps = ImageSwatchDataFragment & SwatchDataProps & UseStyles<typeof useStyles>
+type ImageSwatchDataProps = ImageSwatchDataFragment & SwatchDataProps & { sx?: SxProps<Theme> }
+
+type OwnerState = Pick<SwatchDataProps, 'size'>
+const name = 'ColorSwatchData' as const
+const parts = ['root', 'image', 'label'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function ImageSwatchData(props: ImageSwatchDataProps) {
+  const { value, thumbnail, store_label, size, sx = [] } = props
+
+  const classes = withState({ size })
 
-export default function ImageSwatchData(props: ImageSwatchDataProps) {
-  const classes = useStyles(props)
-  const { value, thumbnail, store_label, size } = props
   return (
-    <>
+    <Box
+      sx={[
+        (theme) => ({
+          '& .image': {
+            height: responsiveVal(40, 80),
+            width: responsiveVal(40, 80),
+            border: `3px solid ${theme.palette.divider}`,
+            boxSizing: 'border-box',
+            borderRadius: '50%',
+            objectFit: 'cover',
+          },
+          '&.small .image': {
+            width: 20,
+            height: 20,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       {thumbnail ? (
         <Image
           src={thumbnail}
-          width={classes.sizeSmall ? 20 : 40}
-          height={classes.sizeSmall ? 20 : 40}
+          width={size === 'small' ? 20 : 40}
+          height={size === 'small' ? 20 : 40}
           alt={value ?? ''}
-          className={clsx({
-            [classes.root]: true,
-            [classes.sizeSmall]: size === 'small',
-          })}
+          className={classes.image}
         />
       ) : (
-        <div>{store_label}</div>
+        <div className={classes.image}>{store_label}</div>
       )}
-    </>
+    </Box>
   )
 }