@graphcommerce/magento-review 10.0.0-canary.67 → 10.0.0-canary.68

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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/AccountReviews/AccountReviews.tsx +0 -1
  3. package/components/CreateProductReviewForm/CreateProductReviewForm.tsx +5 -2
  4. package/components/CustomerReview/CustomerReview.tsx +12 -6
  5. package/components/ProductReviewSummary/ProductReviewSummary.tsx +5 -6
  6. package/components/ProductReviews/ProductReviews.tsx +7 -12
  7. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Change Log
2
2
 
3
+ ## 10.0.0-canary.68
4
+
5
+ ### Major Changes
6
+
7
+ - [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
8
+
9
+ This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
10
+
3
11
  ## 10.0.0-canary.67
4
12
 
5
13
  ## 10.0.0-canary.66
package/components/AccountReviews/AccountReviews.tsx CHANGED
@@ -20,7 +20,6 @@ export function AccountReviews(props: AccountReviewsProps) {
20
20
  (review) => review && <CustomerReview key={review.created_at} {...review} />,
21
21
  )}
22
22
  </SectionContainer>
23
-
24
23
  {items && items.length >= showLatestReviews + 1 && (
25
24
  <SectionContainer
26
25
  labelLeft='Older'
package/components/CreateProductReviewForm/CreateProductReviewForm.tsx CHANGED
@@ -81,7 +81,11 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
81
81
  <Alert severity='success' variant='standard'>
82
82
  <Trans>Thank you! Your review was successfully submitted for approval</Trans>
83
83
  </Alert>
84
- <Box mt={6}>
84
+ <Box
85
+ sx={{
86
+ mt: 6,
87
+ }}
88
+ >
85
89
  <OverlayCloseButton variant='pill' color='secondary' size='large'>
86
90
  <Trans>Continue shopping</Trans>
87
91
  </OverlayCloseButton>
@@ -110,7 +114,6 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
110
114
  }}
111
115
  />
112
116
  </FormRow>
113
-
114
117
  <Box
115
118
  className={classes.ratingContainer}
116
119
  sx={(theme) => ({
package/components/CustomerReview/CustomerReview.tsx CHANGED
@@ -1,5 +1,11 @@
1
1
  import { Image } from '@graphcommerce/image'
2
- import { DateTimeFormat, extendableComponent, IconSvg, responsiveVal } from '@graphcommerce/next-ui'
2
+ import {
3
+ DateTimeFormat,
4
+ extendableComponent,
5
+ IconSvg,
6
+ responsiveVal,
7
+ sxx,
8
+ } from '@graphcommerce/next-ui'
3
9
  import type { SxProps, Theme } from '@mui/material'
4
10
  import { Box } from '@mui/material'
5
11
  import type { CustomerReviewFragment } from './CustomerReview.gql'
@@ -28,7 +34,7 @@ export function CustomerReview(props: CustomerReviewProps) {
28
34
  return (
29
35
  <Box
30
36
  className={classes.container}
31
- sx={[
37
+ sx={sxx(
32
38
  (theme) => ({
33
39
  padding: `${theme.spacings.md} 0 ${theme.spacings.md} 0`,
34
40
  display: 'grid',
@@ -42,13 +48,13 @@ export function CustomerReview(props: CustomerReviewProps) {
42
48
  gridRowGap: theme.spacings.sm,
43
49
  alignItems: 'start',
44
50
  typography: 'body1',
45
- borderBottom: `1px solid ${theme.palette.divider}`,
51
+ borderBottom: `1px solid ${theme.vars.palette.divider}`,
46
52
  [theme.breakpoints.up('sm')]: {
47
53
  gridRowGap: theme.spacings.xxs,
48
54
  },
49
55
  }),
50
- ...(Array.isArray(sx) ? sx : [sx]),
51
- ]}
56
+ sx,
57
+ )}
52
58
  >
53
59
  <Box
54
60
  className={classes.image}
@@ -89,7 +95,7 @@ export function CustomerReview(props: CustomerReviewProps) {
89
95
  sx={(theme) => ({
90
96
  gridArea: 'date',
91
97
  fontStyle: 'italic',
92
- color: theme.palette.text.disabled,
98
+ color: theme.vars.palette.text.disabled,
93
99
  })}
94
100
  >
95
101
  <DateTimeFormat date={created_at} />
package/components/ProductReviewSummary/ProductReviewSummary.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { extendableComponent, iconStar, IconSvg } from '@graphcommerce/next-ui'
1
+ import { extendableComponent, iconStar, IconSvg, sxx } from '@graphcommerce/next-ui'
2
2
  import type { SxProps, Theme } from '@mui/material'
3
3
  import { Box } from '@mui/material'
4
4
  import type { ProductReviewSummaryFragment } from './ProductReviewSummary.gql'
@@ -19,10 +19,9 @@ export function ProductReviewSummary(props: ProductReviewSummaryProps) {
19
19
  src={iconStar}
20
20
  size='xs'
21
21
  className={classes.iconStarDisabled}
22
- sx={(theme) => ({ stroke: 'none', fill: theme.palette.grey[300] })}
22
+ sx={(theme) => ({ stroke: 'none', fill: theme.vars.palette.grey[300] })}
23
23
  />
24
24
  )
25
-
26
25
  const star = (
27
26
  <IconSvg
28
27
  src={iconStar}
@@ -35,7 +34,7 @@ export function ProductReviewSummary(props: ProductReviewSummaryProps) {
35
34
  return (
36
35
  <Box
37
36
  className={classes.root}
38
- sx={[
37
+ sx={sxx(
39
38
  {
40
39
  width: 'max-content',
41
40
  position: 'relative',
@@ -43,8 +42,8 @@ export function ProductReviewSummary(props: ProductReviewSummaryProps) {
43
42
  lineHeight: 0,
44
43
  },
45
44
  },
46
- ...(Array.isArray(sx) ? sx : [sx]),
47
- ]}
45
+ sx,
46
+ )}
48
47
  >
49
48
  <div>
50
49
  {disabledStar}
package/components/ProductReviews/ProductReviews.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  Pagination,
6
6
  responsiveVal,
7
7
  StarRatingField,
8
+ sxx,
8
9
  } from '@graphcommerce/next-ui'
9
10
  import { Trans } from '@lingui/react/macro'
10
11
  import type { SxProps, Theme } from '@mui/material'
@@ -104,17 +105,14 @@ export function ProductReviews(props: ProductReviewsProps) {
104
105
  return (
105
106
  <Box
106
107
  className={classes.container}
107
- sx={[
108
- (theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }),
109
- ...(Array.isArray(sx) ? sx : [sx]),
110
- ]}
108
+ sx={sxx((theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }), sx)}
111
109
  >
112
110
  <Box
113
111
  className={classes.review}
114
112
  sx={(theme) => ({
115
113
  display: 'grid',
116
114
  gap: theme.spacings.sm,
117
- borderBottom: `1px solid ${theme.palette.divider}`,
115
+ borderBottom: `1px solid ${theme.vars.palette.divider}`,
118
116
  padding: `${theme.spacings.md} 0`,
119
117
  typography: 'body1',
120
118
  })}
@@ -142,10 +140,7 @@ export function ProductReviews(props: ProductReviewsProps) {
142
140
  return (
143
141
  <Box
144
142
  className={classes.container}
145
- sx={[
146
- (theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }),
147
- ...(Array.isArray(sx) ? sx : [sx]),
148
- ]}
143
+ sx={sxx((theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }), sx)}
149
144
  >
150
145
  {!loading &&
151
146
  myReviews.items.map((review) => (
@@ -155,7 +150,7 @@ export function ProductReviews(props: ProductReviewsProps) {
155
150
  sx={(theme) => ({
156
151
  display: 'grid',
157
152
  gap: theme.spacings.sm,
158
- borderBottom: `1px solid ${theme.palette.divider}`,
153
+ borderBottom: `1px solid ${theme.vars.palette.divider}`,
159
154
  padding: `${theme.spacings.md} 0`,
160
155
  typography: 'body1',
161
156
  })}
@@ -184,7 +179,7 @@ export function ProductReviews(props: ProductReviewsProps) {
184
179
  display: 'flex',
185
180
  flexWrap: 'wrap',
186
181
  gap: theme.spacings.sm,
187
- color: theme.palette.text.disabled,
182
+ color: theme.vars.palette.text.disabled,
188
183
  typography: 'body2',
189
184
  })}
190
185
  >
@@ -217,7 +212,7 @@ export function ProductReviews(props: ProductReviewsProps) {
217
212
  <Box
218
213
  className={classes.meta}
219
214
  sx={(theme) => ({
220
- color: theme.palette.text.disabled,
215
+ color: theme.vars.palette.text.disabled,
221
216
  display: 'grid',
222
217
  gridAutoFlow: 'column',
223
218
  justifyContent: 'space-between',
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-review",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "10.0.0-canary.67",
5
+ "version": "10.0.0-canary.68",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -18,22 +18,22 @@
18
18
  "typescript": "5.9.3"
19
19
  },
20
20
  "peerDependencies": {
21
- "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
22
- "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
23
- "@graphcommerce/graphql": "^10.0.0-canary.67",
24
- "@graphcommerce/graphql-mesh": "^10.0.0-canary.67",
25
- "@graphcommerce/image": "^10.0.0-canary.67",
26
- "@graphcommerce/magento-customer": "^10.0.0-canary.67",
27
- "@graphcommerce/magento-product": "^10.0.0-canary.67",
28
- "@graphcommerce/magento-store": "^10.0.0-canary.67",
29
- "@graphcommerce/next-ui": "^10.0.0-canary.67",
30
- "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
31
- "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
32
- "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
21
+ "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
22
+ "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
23
+ "@graphcommerce/graphql": "^10.0.0-canary.68",
24
+ "@graphcommerce/graphql-mesh": "^10.0.0-canary.68",
25
+ "@graphcommerce/image": "^10.0.0-canary.68",
26
+ "@graphcommerce/magento-customer": "^10.0.0-canary.68",
27
+ "@graphcommerce/magento-product": "^10.0.0-canary.68",
28
+ "@graphcommerce/magento-store": "^10.0.0-canary.68",
29
+ "@graphcommerce/next-ui": "^10.0.0-canary.68",
30
+ "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
31
+ "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
32
+ "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
33
33
  "@lingui/core": "^5",
34
34
  "@lingui/macro": "^5",
35
35
  "@lingui/react": "^5",
36
- "@mui/material": "^5.10.16",
36
+ "@mui/material": "^7.0.0",
37
37
  "next": "*",
38
38
  "react": "^19.2.0",
39
39
  "react-dom": "^19.2.0"