@graphcommerce/magento-product 9.1.0-canary.41 → 9.1.0-canary.43

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Change Log
2
2
 
3
+ ## 9.1.0-canary.43
4
+
5
+ ## 9.1.0-canary.42
6
+
7
+ ### Patch Changes
8
+
9
+ - [`fe2ca31`](https://github.com/graphcommerce-org/graphcommerce/commit/fe2ca31286628b563f7b490a736d698e170edd65) - Solve issue where ProductListItemReal couldn't be replaced or extended without also replacing ProductListItem ([@paales](https://github.com/paales))
10
+
3
11
  ## 9.1.0-canary.41
4
12
 
5
13
  ### Patch Changes
@@ -1,202 +1,13 @@
1
- import type { ImageProps } from '@graphcommerce/image'
2
- import { extendableComponent } from '@graphcommerce/next-ui'
3
- import type { SxProps, Theme } from '@mui/material'
4
- import { Skeleton } from '@mui/material'
5
- import React from 'react'
6
- import type { ProductListItemFragment } from '../../graphql'
7
- import { productLink } from '../../hooks/useProductLink'
8
- import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
9
- import { ProductDiscountLabel } from './ProductDiscountLabel'
10
- import type { ProductListItemImageProps } from './ProductListItemImage'
11
- import { ProductListItemImage, ProductListItemImageSkeleton } from './ProductListItemImage'
12
- import type {
13
- ProductListItemImageAreaKeys,
14
- ProductListsItemImageAreaProps,
15
- } from './ProductListItemImageContainer'
16
- import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
17
- import type { ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
18
- import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
19
- import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
20
- import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
21
- import { ProductNewLabel } from './ProductNewLabel'
1
+ import {
2
+ ProductListItemReal,
3
+ ProductListItemSkeleton,
4
+ type ProductListItemRealProps,
5
+ type ProductListItemSkeletonProps,
6
+ } from './ProductListItemParts'
22
7
 
23
- const { classes } = extendableComponent('ProductListItem', [
24
- 'root',
25
- 'item',
26
- 'title',
27
- 'titleContainer',
28
- 'subtitle',
29
- 'price',
30
- 'overlayItems',
31
- 'topLeft',
32
- 'topRight',
33
- 'bottomLeft',
34
- 'bottomRight',
35
- 'imageContainer',
36
- 'placeholder',
37
- 'image',
38
- 'discount',
39
- 'new',
40
- ] as const)
8
+ export type ProductListItemProps = ProductListItemRealProps | ProductListItemSkeletonProps
41
9
 
42
- type StyleProps = {
43
- imageOnly?: boolean
44
- }
45
-
46
- export type BaseProps = {
47
- imageOnly?: boolean
48
- children?: React.ReactNode
49
- sx?: SxProps<Theme>
50
- onClick?: (
51
- event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>,
52
- item: ProductListItemFragment,
53
- ) => void
54
- slotProps?: {
55
- root?: Partial<ProductListItemLinkOrDivProps>
56
- image?: Partial<ProductListItemImageProps>
57
- imageAreas?: Partial<ProductListsItemImageAreaProps>
58
- titleAndPrice?: Partial<ProductListItemTitleAndPriceProps>
59
- }
60
- } & StyleProps &
61
- Omit<ProductListItemTitleAndPriceProps, 'title' | 'classes' | 'children'> &
62
- Omit<ProductListItemImageProps, 'classes'> &
63
- Omit<ProductListsItemImageAreaProps, 'classes'> &
64
- Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
65
-
66
- export type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
67
-
68
- export type ProductProps = BaseProps & ProductListItemFragment
69
-
70
- export type ProductListItemProps = ProductProps | SkeletonProps
71
-
72
- /** @public */
73
- export function ProductListItemReal(props: ProductProps) {
74
- const {
75
- subTitle,
76
- topLeft,
77
- topRight,
78
- bottomLeft,
79
- bottomRight,
80
- small_image,
81
- name,
82
- price_range,
83
- children,
84
- imageOnly = false,
85
- loading,
86
- sizes,
87
- dontReportWronglySizedImages,
88
- aspectRatio = [4, 3],
89
- titleComponent = 'h2',
90
- sx = [],
91
- onClick,
92
- slotProps = {},
93
- } = props
94
-
95
- return (
96
- <ProductListItemLinkOrDiv
97
- href={productLink(props)}
98
- className={classes.root}
99
- onClick={(e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => onClick?.(e, props)}
100
- {...slotProps.root}
101
- sx={[
102
- ...(Array.isArray(sx) ? sx : [sx]),
103
- ...(Array.isArray(slotProps.root?.sx) ? slotProps.root.sx : [slotProps.root?.sx]),
104
- ]}
105
- ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
106
- >
107
- <ProductImageContainer className={classes.imageContainer}>
108
- <ProductListItemImage
109
- classes={classes}
110
- src={small_image?.url}
111
- alt={small_image?.label}
112
- aspectRatio={aspectRatio}
113
- loading={loading}
114
- sizes={sizes}
115
- dontReportWronglySizedImages={dontReportWronglySizedImages}
116
- {...slotProps.image}
117
- />
118
-
119
- {!imageOnly && (
120
- <ProductListItemImageAreas
121
- topRight={topRight}
122
- bottomLeft={bottomLeft}
123
- bottomRight={bottomRight}
124
- classes={classes}
125
- topLeft={
126
- <>
127
- <ProductDiscountLabel className={classes.discount} price_range={price_range} />
128
- <ProductNewLabel className={classes.new} product={props} />
129
- {topLeft}
130
- </>
131
- }
132
- {...slotProps.imageAreas}
133
- />
134
- )}
135
- </ProductImageContainer>
136
-
137
- {!imageOnly && (
138
- <>
139
- <ProductListItemTitleAndPrice
140
- classes={classes}
141
- titleComponent={titleComponent}
142
- title={name}
143
- subTitle={subTitle}
144
- {...slotProps.titleAndPrice}
145
- >
146
- <ProductListPrice {...price_range.minimum_price} />
147
- </ProductListItemTitleAndPrice>
148
- {children}
149
- </>
150
- )}
151
- </ProductListItemLinkOrDiv>
152
- )
153
- }
154
-
155
- /** @public */
156
- export function ProductListItemSkeleton(props: BaseProps) {
157
- const {
158
- children,
159
- imageOnly = false,
160
- aspectRatio,
161
- titleComponent = 'h2',
162
- sx = [],
163
- slotProps = {},
164
- } = props
165
-
166
- return (
167
- <ProductListItemLinkOrDiv
168
- sx={sx}
169
- className={classes.root}
170
- {...slotProps.root}
171
- ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
172
- >
173
- <ProductImageContainer className={classes.imageContainer}>
174
- <ProductListItemImageSkeleton
175
- classes={classes}
176
- aspectRatio={aspectRatio}
177
- {...slotProps.image}
178
- />
179
- </ProductImageContainer>
180
-
181
- {!imageOnly && (
182
- <>
183
- <ProductListItemTitleAndPrice
184
- classes={classes}
185
- titleComponent={titleComponent}
186
- title={<Skeleton variant='text' sx={{ width: '100px' }} />}
187
- subTitle={<Skeleton variant='text' sx={{ width: '20px' }} />}
188
- {...slotProps.titleAndPrice}
189
- >
190
- <Skeleton variant='text' sx={{ width: '20px' }} />
191
- </ProductListItemTitleAndPrice>
192
- {children}
193
- </>
194
- )}
195
- </ProductListItemLinkOrDiv>
196
- )
197
- }
198
-
199
- function isSkeleton(props: ProductListItemProps): props is SkeletonProps {
10
+ function isSkeleton(props: ProductListItemProps): props is ProductListItemSkeletonProps {
200
11
  return props.__typename === 'Skeleton'
201
12
  }
202
13
 
@@ -207,8 +18,3 @@ export function ProductListItem(props: ProductListItemProps) {
207
18
  <ProductListItemReal {...props} />
208
19
  )
209
20
  }
210
-
211
- /** @deprecated */
212
- export type OverlayAreaKeys = ProductListItemImageAreaKeys
213
- /** @deprecated */
214
- export type OverlayAreas = ProductListsItemImageAreaProps
@@ -0,0 +1,192 @@
1
+ import type { ImageProps } from '@graphcommerce/image'
2
+ import { extendableComponent } from '@graphcommerce/next-ui'
3
+ import type { SxProps, Theme } from '@mui/material'
4
+ import { Skeleton } from '@mui/material'
5
+ import React from 'react'
6
+ import type { ProductListItemFragment } from '../../graphql'
7
+ import { productLink } from '../../hooks/useProductLink'
8
+ import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
9
+ import { ProductDiscountLabel } from './ProductDiscountLabel'
10
+ import type { ProductListItemImageProps } from './ProductListItemImage'
11
+ import { ProductListItemImage, ProductListItemImageSkeleton } from './ProductListItemImage'
12
+ import type { ProductListsItemImageAreaProps } from './ProductListItemImageContainer'
13
+ import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
14
+ import type { ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
15
+ import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
16
+ import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
17
+ import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
18
+ import { ProductNewLabel } from './ProductNewLabel'
19
+
20
+ const { classes } = extendableComponent('ProductListItem', [
21
+ 'root',
22
+ 'item',
23
+ 'title',
24
+ 'titleContainer',
25
+ 'subtitle',
26
+ 'price',
27
+ 'overlayItems',
28
+ 'topLeft',
29
+ 'topRight',
30
+ 'bottomLeft',
31
+ 'bottomRight',
32
+ 'imageContainer',
33
+ 'placeholder',
34
+ 'image',
35
+ 'discount',
36
+ 'new',
37
+ ] as const)
38
+
39
+ type StyleProps = {
40
+ imageOnly?: boolean
41
+ }
42
+
43
+ export type BaseProps = {
44
+ imageOnly?: boolean
45
+ children?: React.ReactNode
46
+ sx?: SxProps<Theme>
47
+ onClick?: (
48
+ event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>,
49
+ item: ProductListItemFragment,
50
+ ) => void
51
+ slotProps?: {
52
+ root?: Partial<ProductListItemLinkOrDivProps>
53
+ image?: Partial<ProductListItemImageProps>
54
+ imageAreas?: Partial<ProductListsItemImageAreaProps>
55
+ titleAndPrice?: Partial<ProductListItemTitleAndPriceProps>
56
+ }
57
+ } & StyleProps &
58
+ Omit<ProductListItemTitleAndPriceProps, 'title' | 'classes' | 'children'> &
59
+ Omit<ProductListItemImageProps, 'classes'> &
60
+ Omit<ProductListsItemImageAreaProps, 'classes'> &
61
+ Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
62
+
63
+ export type ProductListItemSkeletonProps = BaseProps & { __typename: 'Skeleton' }
64
+
65
+ export type ProductListItemRealProps = BaseProps & ProductListItemFragment
66
+
67
+ /** @public */
68
+ export function ProductListItemReal(props: ProductListItemRealProps) {
69
+ const {
70
+ subTitle,
71
+ topLeft,
72
+ topRight,
73
+ bottomLeft,
74
+ bottomRight,
75
+ small_image,
76
+ name,
77
+ price_range,
78
+ children,
79
+ imageOnly = false,
80
+ loading,
81
+ sizes,
82
+ dontReportWronglySizedImages,
83
+ aspectRatio = [4, 3],
84
+ titleComponent = 'h2',
85
+ sx = [],
86
+ onClick,
87
+ slotProps = {},
88
+ } = props
89
+
90
+ return (
91
+ <ProductListItemLinkOrDiv
92
+ href={productLink(props)}
93
+ className={classes.root}
94
+ onClick={(e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => onClick?.(e, props)}
95
+ {...slotProps.root}
96
+ sx={[
97
+ ...(Array.isArray(sx) ? sx : [sx]),
98
+ ...(Array.isArray(slotProps.root?.sx) ? slotProps.root.sx : [slotProps.root?.sx]),
99
+ ]}
100
+ ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
101
+ >
102
+ <ProductImageContainer className={classes.imageContainer}>
103
+ <ProductListItemImage
104
+ classes={classes}
105
+ src={small_image?.url}
106
+ alt={small_image?.label}
107
+ aspectRatio={aspectRatio}
108
+ loading={loading}
109
+ sizes={sizes}
110
+ dontReportWronglySizedImages={dontReportWronglySizedImages}
111
+ {...slotProps.image}
112
+ />
113
+
114
+ {!imageOnly && (
115
+ <ProductListItemImageAreas
116
+ topRight={topRight}
117
+ bottomLeft={bottomLeft}
118
+ bottomRight={bottomRight}
119
+ classes={classes}
120
+ topLeft={
121
+ <>
122
+ <ProductDiscountLabel className={classes.discount} price_range={price_range} />
123
+ <ProductNewLabel className={classes.new} product={props} />
124
+ {topLeft}
125
+ </>
126
+ }
127
+ {...slotProps.imageAreas}
128
+ />
129
+ )}
130
+ </ProductImageContainer>
131
+
132
+ {!imageOnly && (
133
+ <>
134
+ <ProductListItemTitleAndPrice
135
+ classes={classes}
136
+ titleComponent={titleComponent}
137
+ title={name}
138
+ subTitle={subTitle}
139
+ {...slotProps.titleAndPrice}
140
+ >
141
+ <ProductListPrice {...price_range.minimum_price} />
142
+ </ProductListItemTitleAndPrice>
143
+ {children}
144
+ </>
145
+ )}
146
+ </ProductListItemLinkOrDiv>
147
+ )
148
+ }
149
+
150
+ /** @public */
151
+ export function ProductListItemSkeleton(props: BaseProps) {
152
+ const {
153
+ children,
154
+ imageOnly = false,
155
+ aspectRatio,
156
+ titleComponent = 'h2',
157
+ sx = [],
158
+ slotProps = {},
159
+ } = props
160
+
161
+ return (
162
+ <ProductListItemLinkOrDiv
163
+ sx={sx}
164
+ className={classes.root}
165
+ {...slotProps.root}
166
+ ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
167
+ >
168
+ <ProductImageContainer className={classes.imageContainer}>
169
+ <ProductListItemImageSkeleton
170
+ classes={classes}
171
+ aspectRatio={aspectRatio}
172
+ {...slotProps.image}
173
+ />
174
+ </ProductImageContainer>
175
+
176
+ {!imageOnly && (
177
+ <>
178
+ <ProductListItemTitleAndPrice
179
+ classes={classes}
180
+ titleComponent={titleComponent}
181
+ title={<Skeleton variant='text' sx={{ width: '100px' }} />}
182
+ subTitle={<Skeleton variant='text' sx={{ width: '20px' }} />}
183
+ {...slotProps.titleAndPrice}
184
+ >
185
+ <Skeleton variant='text' sx={{ width: '20px' }} />
186
+ </ProductListItemTitleAndPrice>
187
+ {children}
188
+ </>
189
+ )}
190
+ </ProductListItemLinkOrDiv>
191
+ )
192
+ }
@@ -0,0 +1,6 @@
1
+ export * from './ProductListItem'
2
+ export * from './ProductListItemParts'
3
+ export * from './ProductListItemImage'
4
+ export * from './ProductListItemTitleAndPrice'
5
+ export * from './ProductListItemImageContainer'
6
+ export * from './ProductListItemLinkOrDiv'
@@ -7,11 +7,7 @@ export * from './ProductList/ProductList.gql'
7
7
  export * from './ProductListCount/ProductListCount'
8
8
  export * from './ProductListFilters'
9
9
  export * from './ProductListFiltersContainer/ProductListFiltersContainer'
10
- export * from './ProductListItem/ProductListItem'
11
- export * from './ProductListItem/ProductListItemImage'
12
- export * from './ProductListItem/ProductListItemTitleAndPrice'
13
- export * from './ProductListItem/ProductListItemImageContainer'
14
- export * from './ProductListItem/ProductListItemLinkOrDiv'
10
+ export * from './ProductListItem'
15
11
  export * from './ProductListItems/filteredProductList'
16
12
  export * from './ProductListItems/filterTypes'
17
13
  export * from './ProductListItems/getFilterTypes'
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-product",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "9.1.0-canary.41",
5
+ "version": "9.1.0-canary.43",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -18,18 +18,18 @@
18
18
  "typescript": "5.7.2"
19
19
  },
20
20
  "peerDependencies": {
21
- "@graphcommerce/ecommerce-ui": "^9.1.0-canary.41",
22
- "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.41",
23
- "@graphcommerce/framer-next-pages": "^9.1.0-canary.41",
24
- "@graphcommerce/framer-scroller": "^9.1.0-canary.41",
25
- "@graphcommerce/graphql": "^9.1.0-canary.41",
26
- "@graphcommerce/graphql-mesh": "^9.1.0-canary.41",
27
- "@graphcommerce/image": "^9.1.0-canary.41",
28
- "@graphcommerce/magento-cart": "^9.1.0-canary.41",
29
- "@graphcommerce/magento-store": "^9.1.0-canary.41",
30
- "@graphcommerce/next-ui": "^9.1.0-canary.41",
31
- "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.41",
32
- "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.41",
21
+ "@graphcommerce/ecommerce-ui": "^9.1.0-canary.43",
22
+ "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.43",
23
+ "@graphcommerce/framer-next-pages": "^9.1.0-canary.43",
24
+ "@graphcommerce/framer-scroller": "^9.1.0-canary.43",
25
+ "@graphcommerce/graphql": "^9.1.0-canary.43",
26
+ "@graphcommerce/graphql-mesh": "^9.1.0-canary.43",
27
+ "@graphcommerce/image": "^9.1.0-canary.43",
28
+ "@graphcommerce/magento-cart": "^9.1.0-canary.43",
29
+ "@graphcommerce/magento-store": "^9.1.0-canary.43",
30
+ "@graphcommerce/next-ui": "^9.1.0-canary.43",
31
+ "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.43",
32
+ "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.43",
33
33
  "@lingui/core": "^4.2.1",
34
34
  "@lingui/macro": "^4.2.1",
35
35
  "@lingui/react": "^4.2.1",