@graphcommerce/magento-product-configurable 3.6.43 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +300 -167
  2. package/ConfigurableCartItem/OptionsList.tsx +37 -105
  3. package/ConfigurableOptions/index.tsx +31 -29
  4. package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx +41 -38
  5. package/SwatchList.tsx +3 -3
  6. package/Swatches/ColorSwatchData.tsx +35 -31
  7. package/Swatches/ImageSwatchData.tsx +37 -34
  8. package/Swatches/TextSwatchData.tsx +61 -49
  9. package/Swatches/index.tsx +1 -1
  10. package/package.json +27 -31
package/Swatches/TextSwatchData.tsx CHANGED
@@ -1,67 +1,79 @@
1
1
  import { Money } from '@graphcommerce/magento-store'
2
- import { UseStyles } from '@graphcommerce/next-ui'
3
- import { makeStyles, Theme, Typography } from '@material-ui/core'
4
- import clsx from 'clsx'
5
- import React from 'react'
2
+ import { extendableComponent } from '@graphcommerce/next-ui'
3
+ import { Box, SxProps, Theme } from '@mui/material'
6
4
  import { TextSwatchDataFragment } from './TextSwatchData.gql'
7
5
  import { SwatchDataProps } from '.'
8
6
 
9
- export const useStyles = makeStyles(
10
- (theme: Theme) => ({
11
- root: {
12
- display: 'grid',
13
- width: '100%',
14
- textAlign: 'start',
15
- gridColumnGap: theme.spacings.sm,
16
- gridTemplateAreas: `
17
- "label value"
18
- "delivery delivery"
19
- `,
20
- },
21
- sizesmall: {},
22
- storeLabel: {
23
- gridArea: 'label',
24
- // fontWeight: theme.typography.fontWeightMedium,
25
- },
26
- value: {
27
- gridArea: 'value',
28
- justifySelf: 'end',
29
- // ...theme.typography.body1,
30
- margin: 'auto 0',
31
- },
32
- delivery: {
33
- gridArea: 'delivery',
34
- color: theme.palette.text.disabled,
35
- },
36
- }),
37
- { name: 'TextSwatchData' },
38
- )
7
+ type TextSwatchDataProps = TextSwatchDataFragment & SwatchDataProps & { sx?: SxProps<Theme> }
39
8
 
40
- type TextSwatchDataProps = TextSwatchDataFragment & SwatchDataProps & UseStyles<typeof useStyles>
9
+ type OwnerState = Pick<SwatchDataProps, 'size'>
10
+ const name = 'TextSwatchData' as const
11
+ const parts = ['root', 'value', 'price', 'label', 'storeLabel'] as const
12
+ const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
41
13
 
42
- export default function TextSwatchData(props: TextSwatchDataProps) {
43
- const classes = useStyles(props)
44
- const { store_label, size, price, value } = props
14
+ export function TextSwatchData(props: TextSwatchDataProps) {
15
+ const { store_label, size = 'medium', price, value, sx = [] } = props
16
+
17
+ const classes = withState({ size })
45
18
 
46
19
  return (
47
- <div className={clsx(classes.root, classes?.[`size${size}`])}>
48
- {size === 'large' ? (
20
+ <Box
21
+ className={classes.root}
22
+ sx={[
23
+ (theme) => ({
24
+ display: 'grid',
25
+ width: '100%',
26
+ textAlign: 'start',
27
+ gridColumnGap: theme.spacings.sm,
28
+
29
+ '&:not(.sizeSmall)': {
30
+ gridTemplateAreas: `
31
+ "label value"
32
+ "delivery delivery"
33
+ `,
34
+ },
35
+ }),
36
+ ...(Array.isArray(sx) ? sx : [sx]),
37
+ ]}
38
+ >
39
+ {size !== 'small' ? (
49
40
  <>
50
- <Typography className={classes.storeLabel} variant='subtitle2' component='div'>
41
+ <Box
42
+ className={classes.label}
43
+ sx={{
44
+ typography: 'subtitle2',
45
+ gridArea: 'label',
46
+ }}
47
+ >
51
48
  {value}
52
- </Typography>
53
- <Typography className={classes.value} variant='body2' component='div'>
49
+ </Box>
50
+ <Box
51
+ className={classes.value}
52
+ sx={{
53
+ typography: 'body2',
54
+ gridArea: 'value',
55
+ justifySelf: 'end',
56
+ margin: 'auto 0',
57
+ }}
58
+ >
54
59
  <Money {...price} />
55
- </Typography>
56
- {store_label !== value && (
57
- <Typography variant='body2' className={classes.delivery} component='div'>
60
+ </Box>
61
+ {size === 'large' && store_label !== value && (
62
+ <Box
63
+ className={classes.storeLabel}
64
+ sx={{
65
+ typography: 'body2',
66
+ gridArea: 'delivery',
67
+ color: 'text.disabled',
68
+ }}
69
+ >
58
70
  {store_label}
59
- </Typography>
71
+ </Box>
60
72
  )}
61
73
  </>
62
74
  ) : (
63
- <Typography variant='caption'>{value ?? store_label}</Typography>
75
+ <Box sx={{ typography: 'subtitle2', whiteSpace: 'nowrap' }}>{value ?? store_label}</Box>
64
76
  )}
65
- </div>
77
+ </Box>
66
78
  )
67
79
  }
package/Swatches/index.tsx CHANGED
@@ -8,7 +8,7 @@ type ConfigurableOption = NonNullable<
8
8
  >
9
9
  export type ConfigurableOptionValue = NonNullable<NonNullable<ConfigurableOption['values']>[0]>
10
10
 
11
- export type SwatchSize = 'small' | 'large'
11
+ export type SwatchSize = 'small' | 'medium' | 'large'
12
12
 
13
13
  export type SwatchDataProps = ConfigurableOptionValue & {
14
14
  size?: SwatchSize
package/package.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
2
  "name": "@graphcommerce/magento-product-configurable",
3
- "version": "3.6.43",
3
+ "homepage": "https://www.graphcommerce.org/",
4
+ "repository": "github:graphcommerce-org/graphcommerce",
5
+ "version": "4.0.2",
4
6
  "sideEffects": false,
5
7
  "prettier": "@graphcommerce/prettier-config-pwa",
6
- "browserslist": [
7
- "extends @graphcommerce/browserslist-config-pwa"
8
- ],
9
8
  "eslintConfig": {
10
9
  "extends": "@graphcommerce/eslint-config-pwa",
11
10
  "parserOptions": {
@@ -13,35 +12,32 @@
13
12
  }
14
13
  },
15
14
  "devDependencies": {
16
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
17
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
18
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
19
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
20
- "@playwright/test": "^1.17.1",
15
+ "@graphcommerce/eslint-config-pwa": "^4.0.2",
16
+ "@graphcommerce/prettier-config-pwa": "^4.0.1",
17
+ "@graphcommerce/typescript-config-pwa": "^4.0.1",
18
+ "@playwright/test": "^1.19.1",
21
19
  "react": "^17.0.1"
22
20
  },
23
21
  "dependencies": {
24
- "@apollo/client": "^3.5.6",
25
- "@graphcommerce/graphql": "^2.105.13",
26
- "@graphcommerce/image": "^2.105.13",
27
- "@graphcommerce/magento-cart": "^3.10.3",
28
- "@graphcommerce/magento-cart-items": "^2.110.48",
29
- "@graphcommerce/magento-category": "^3.5.43",
30
- "@graphcommerce/magento-customer": "^3.6.44",
31
- "@graphcommerce/magento-product": "^3.8.13",
32
- "@graphcommerce/magento-product-simple": "^3.2.48",
33
- "@graphcommerce/magento-store": "^3.4.12",
34
- "@graphcommerce/next-ui": "^3.25.3",
35
- "@graphcommerce/react-hook-form": "^2.104.7",
36
- "@lingui/macro": "^3.13.0",
37
- "@material-ui/core": "^4.12.3",
38
- "@material-ui/lab": "^4.0.0-alpha.60",
39
- "clsx": "^1.1.1",
40
- "framer-motion": "^5.5.5",
41
- "next": "^12.0.7",
42
- "react": "^17.0.2",
43
- "react-dom": "^17.0.2",
44
- "type-fest": "^2.8.0"
22
+ "@graphcommerce/graphql": "^3.0.2",
23
+ "@graphcommerce/image": "^3.0.2",
24
+ "@graphcommerce/magento-cart": "^4.1.1",
25
+ "@graphcommerce/magento-cart-items": "^3.0.2",
26
+ "@graphcommerce/magento-category": "^4.0.2",
27
+ "@graphcommerce/magento-customer": "^4.1.1",
28
+ "@graphcommerce/magento-product": "^4.0.2",
29
+ "@graphcommerce/magento-product-simple": "^4.0.2",
30
+ "@graphcommerce/magento-store": "^4.0.2",
31
+ "@graphcommerce/next-ui": "^4.1.1",
32
+ "@graphcommerce/react-hook-form": "^3.0.2",
33
+ "type-fest": "^2.11.2"
45
34
  },
46
- "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
35
+ "peerDependencies": {
36
+ "@lingui/macro": "^3.13.2",
37
+ "@mui/material": "^5.4.1",
38
+ "framer-motion": "^6.2.4",
39
+ "next": "^12.0.10",
40
+ "react": "^17.0.2",
41
+ "react-dom": "^17.0.2"
42
+ }
47
43
  }