@wix/headless-stores 0.0.96 → 0.0.97
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
|
|
2
|
-
import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
|
|
2
|
+
import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps, ListVariant, GenericListRepeaterRenderProps } from '@wix/headless-components/react';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import type { ProductsListServiceConfig } from '../services/products-list-service.js';
|
|
5
5
|
import { productsV3 } from '@wix/stores';
|
|
@@ -12,6 +12,7 @@ export interface ProductListRootProps {
|
|
|
12
12
|
products?: V3Product[];
|
|
13
13
|
productsListConfig?: ProductsListServiceConfig;
|
|
14
14
|
className?: string;
|
|
15
|
+
variant?: ListVariant;
|
|
15
16
|
}
|
|
16
17
|
/**
|
|
17
18
|
* Root component that provides the ProductList service context for rendering product lists.
|
|
@@ -91,26 +92,46 @@ export interface ProductsProps {
|
|
|
91
92
|
* ```
|
|
92
93
|
*/
|
|
93
94
|
export declare const Products: React.ForwardRefExoticComponent<ProductsProps & React.RefAttributes<HTMLElement>>;
|
|
95
|
+
/**
|
|
96
|
+
* Render props for ProductRepeater asChild pattern
|
|
97
|
+
*/
|
|
98
|
+
export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<V3Product>;
|
|
94
99
|
/**
|
|
95
100
|
* Props for ProductList ProductRepeater component
|
|
96
101
|
*/
|
|
97
102
|
export interface ProductRepeaterProps {
|
|
98
|
-
children: React.ReactNode;
|
|
103
|
+
children: React.ReactNode | ((props: ProductRepeaterRenderProps, ref: React.Ref<HTMLElement>) => React.ReactNode);
|
|
104
|
+
/** Whether to render as child component (asChild pattern) */
|
|
105
|
+
asChild?: boolean;
|
|
99
106
|
}
|
|
100
107
|
/**
|
|
101
108
|
* Repeater component that renders Product.Root for each product.
|
|
102
|
-
* Follows Repeater Level pattern.
|
|
103
|
-
*
|
|
109
|
+
* Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
|
|
110
|
+
* Supports asChild pattern for advanced layout components like GalleryWrapper.
|
|
104
111
|
*
|
|
105
112
|
* @component
|
|
106
113
|
* @example
|
|
107
114
|
* ```tsx
|
|
115
|
+
* // Standard usage
|
|
108
116
|
* <ProductList.ProductRepeater>
|
|
109
117
|
* <Product.Name />
|
|
110
118
|
* <Product.Price />
|
|
111
|
-
*
|
|
112
|
-
*
|
|
113
|
-
*
|
|
119
|
+
* </ProductList.ProductRepeater>
|
|
120
|
+
*
|
|
121
|
+
* // AsChild usage with GalleryWrapper
|
|
122
|
+
* <ProductList.ProductRepeater asChild>
|
|
123
|
+
* {({ items, variant, itemWrapper }) => (
|
|
124
|
+
* <GalleryWrapper
|
|
125
|
+
* items={items}
|
|
126
|
+
* variant={variant}
|
|
127
|
+
* itemRenderer={(item, index) =>
|
|
128
|
+
* itemWrapper({ item, index, children: <>
|
|
129
|
+
* <Product.Name />
|
|
130
|
+
* <Product.Price />
|
|
131
|
+
* </> })
|
|
132
|
+
* }
|
|
133
|
+
* />
|
|
134
|
+
* )}
|
|
114
135
|
* </ProductList.ProductRepeater>
|
|
115
136
|
* ```
|
|
116
137
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Sort as SortPrimitive, GenericList, } from '@wix/headless-components/react';
|
|
3
3
|
import { useService } from '@wix/services-manager-react';
|
|
4
4
|
import React from 'react';
|
|
@@ -45,7 +45,7 @@ var TestIds;
|
|
|
45
45
|
* ```
|
|
46
46
|
*/
|
|
47
47
|
export const Root = React.forwardRef((props, ref) => {
|
|
48
|
-
const { children, products, productsListConfig, className } = props;
|
|
48
|
+
const { children, products, productsListConfig, className, variant } = props;
|
|
49
49
|
const serviceConfig = productsListConfig || {
|
|
50
50
|
products: products || [],
|
|
51
51
|
searchOptions: {
|
|
@@ -59,20 +59,20 @@ export const Root = React.forwardRef((props, ref) => {
|
|
|
59
59
|
}, // Empty aggregation data
|
|
60
60
|
customizations: [],
|
|
61
61
|
};
|
|
62
|
-
return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
|
|
62
|
+
return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref, variant: variant }) }));
|
|
63
63
|
});
|
|
64
64
|
Root.displayName = 'ProductList.Root';
|
|
65
65
|
/**
|
|
66
66
|
* Internal component to handle the Root content with service access
|
|
67
67
|
*/
|
|
68
68
|
const RootContent = React.forwardRef((props, ref) => {
|
|
69
|
-
const { children, className } = props;
|
|
69
|
+
const { children, className, variant } = props;
|
|
70
70
|
const productsListService = useService(ProductsListServiceDefinition);
|
|
71
71
|
const items = productsListService.products.get().map((product) => ({
|
|
72
72
|
...product,
|
|
73
73
|
id: product._id,
|
|
74
74
|
}));
|
|
75
|
-
return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, children: children }));
|
|
75
|
+
return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, variant: variant, children: children }));
|
|
76
76
|
});
|
|
77
77
|
/**
|
|
78
78
|
* Raw component that provides direct access to product list data.
|
|
@@ -124,29 +124,38 @@ export const Products = React.forwardRef((props, ref) => {
|
|
|
124
124
|
});
|
|
125
125
|
/**
|
|
126
126
|
* Repeater component that renders Product.Root for each product.
|
|
127
|
-
* Follows Repeater Level pattern.
|
|
128
|
-
*
|
|
127
|
+
* Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
|
|
128
|
+
* Supports asChild pattern for advanced layout components like GalleryWrapper.
|
|
129
129
|
*
|
|
130
130
|
* @component
|
|
131
131
|
* @example
|
|
132
132
|
* ```tsx
|
|
133
|
+
* // Standard usage
|
|
133
134
|
* <ProductList.ProductRepeater>
|
|
134
135
|
* <Product.Name />
|
|
135
136
|
* <Product.Price />
|
|
136
|
-
*
|
|
137
|
-
*
|
|
138
|
-
*
|
|
137
|
+
* </ProductList.ProductRepeater>
|
|
138
|
+
*
|
|
139
|
+
* // AsChild usage with GalleryWrapper
|
|
140
|
+
* <ProductList.ProductRepeater asChild>
|
|
141
|
+
* {({ items, variant, itemWrapper }) => (
|
|
142
|
+
* <GalleryWrapper
|
|
143
|
+
* items={items}
|
|
144
|
+
* variant={variant}
|
|
145
|
+
* itemRenderer={(item, index) =>
|
|
146
|
+
* itemWrapper({ item, index, children: <>
|
|
147
|
+
* <Product.Name />
|
|
148
|
+
* <Product.Price />
|
|
149
|
+
* </> })
|
|
150
|
+
* }
|
|
151
|
+
* />
|
|
152
|
+
* )}
|
|
139
153
|
* </ProductList.ProductRepeater>
|
|
140
154
|
* ```
|
|
141
155
|
*/
|
|
142
|
-
export const ProductRepeater = React.forwardRef((props,
|
|
143
|
-
const { children } = props;
|
|
144
|
-
|
|
145
|
-
const products = productsListService.products.get();
|
|
146
|
-
const hasProducts = products.length > 0;
|
|
147
|
-
if (!hasProducts)
|
|
148
|
-
return null;
|
|
149
|
-
return (_jsx(_Fragment, { children: products.map((product) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, children: children }, product._id))) }));
|
|
156
|
+
export const ProductRepeater = React.forwardRef((props, ref) => {
|
|
157
|
+
const { children, asChild } = props;
|
|
158
|
+
return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: ({ item: product, children }) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, "data-item-id": product._id, children: children }, product._id)), children: children }));
|
|
150
159
|
});
|
|
151
160
|
/**
|
|
152
161
|
* Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
|
|
2
|
-
import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
|
|
2
|
+
import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps, ListVariant, GenericListRepeaterRenderProps } from '@wix/headless-components/react';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import type { ProductsListServiceConfig } from '../services/products-list-service.js';
|
|
5
5
|
import { productsV3 } from '@wix/stores';
|
|
@@ -12,6 +12,7 @@ export interface ProductListRootProps {
|
|
|
12
12
|
products?: V3Product[];
|
|
13
13
|
productsListConfig?: ProductsListServiceConfig;
|
|
14
14
|
className?: string;
|
|
15
|
+
variant?: ListVariant;
|
|
15
16
|
}
|
|
16
17
|
/**
|
|
17
18
|
* Root component that provides the ProductList service context for rendering product lists.
|
|
@@ -91,26 +92,46 @@ export interface ProductsProps {
|
|
|
91
92
|
* ```
|
|
92
93
|
*/
|
|
93
94
|
export declare const Products: React.ForwardRefExoticComponent<ProductsProps & React.RefAttributes<HTMLElement>>;
|
|
95
|
+
/**
|
|
96
|
+
* Render props for ProductRepeater asChild pattern
|
|
97
|
+
*/
|
|
98
|
+
export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<V3Product>;
|
|
94
99
|
/**
|
|
95
100
|
* Props for ProductList ProductRepeater component
|
|
96
101
|
*/
|
|
97
102
|
export interface ProductRepeaterProps {
|
|
98
|
-
children: React.ReactNode;
|
|
103
|
+
children: React.ReactNode | ((props: ProductRepeaterRenderProps, ref: React.Ref<HTMLElement>) => React.ReactNode);
|
|
104
|
+
/** Whether to render as child component (asChild pattern) */
|
|
105
|
+
asChild?: boolean;
|
|
99
106
|
}
|
|
100
107
|
/**
|
|
101
108
|
* Repeater component that renders Product.Root for each product.
|
|
102
|
-
* Follows Repeater Level pattern.
|
|
103
|
-
*
|
|
109
|
+
* Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
|
|
110
|
+
* Supports asChild pattern for advanced layout components like GalleryWrapper.
|
|
104
111
|
*
|
|
105
112
|
* @component
|
|
106
113
|
* @example
|
|
107
114
|
* ```tsx
|
|
115
|
+
* // Standard usage
|
|
108
116
|
* <ProductList.ProductRepeater>
|
|
109
117
|
* <Product.Name />
|
|
110
118
|
* <Product.Price />
|
|
111
|
-
*
|
|
112
|
-
*
|
|
113
|
-
*
|
|
119
|
+
* </ProductList.ProductRepeater>
|
|
120
|
+
*
|
|
121
|
+
* // AsChild usage with GalleryWrapper
|
|
122
|
+
* <ProductList.ProductRepeater asChild>
|
|
123
|
+
* {({ items, variant, itemWrapper }) => (
|
|
124
|
+
* <GalleryWrapper
|
|
125
|
+
* items={items}
|
|
126
|
+
* variant={variant}
|
|
127
|
+
* itemRenderer={(item, index) =>
|
|
128
|
+
* itemWrapper({ item, index, children: <>
|
|
129
|
+
* <Product.Name />
|
|
130
|
+
* <Product.Price />
|
|
131
|
+
* </> })
|
|
132
|
+
* }
|
|
133
|
+
* />
|
|
134
|
+
* )}
|
|
114
135
|
* </ProductList.ProductRepeater>
|
|
115
136
|
* ```
|
|
116
137
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Sort as SortPrimitive, GenericList, } from '@wix/headless-components/react';
|
|
3
3
|
import { useService } from '@wix/services-manager-react';
|
|
4
4
|
import React from 'react';
|
|
@@ -45,7 +45,7 @@ var TestIds;
|
|
|
45
45
|
* ```
|
|
46
46
|
*/
|
|
47
47
|
export const Root = React.forwardRef((props, ref) => {
|
|
48
|
-
const { children, products, productsListConfig, className } = props;
|
|
48
|
+
const { children, products, productsListConfig, className, variant } = props;
|
|
49
49
|
const serviceConfig = productsListConfig || {
|
|
50
50
|
products: products || [],
|
|
51
51
|
searchOptions: {
|
|
@@ -59,20 +59,20 @@ export const Root = React.forwardRef((props, ref) => {
|
|
|
59
59
|
}, // Empty aggregation data
|
|
60
60
|
customizations: [],
|
|
61
61
|
};
|
|
62
|
-
return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
|
|
62
|
+
return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref, variant: variant }) }));
|
|
63
63
|
});
|
|
64
64
|
Root.displayName = 'ProductList.Root';
|
|
65
65
|
/**
|
|
66
66
|
* Internal component to handle the Root content with service access
|
|
67
67
|
*/
|
|
68
68
|
const RootContent = React.forwardRef((props, ref) => {
|
|
69
|
-
const { children, className } = props;
|
|
69
|
+
const { children, className, variant } = props;
|
|
70
70
|
const productsListService = useService(ProductsListServiceDefinition);
|
|
71
71
|
const items = productsListService.products.get().map((product) => ({
|
|
72
72
|
...product,
|
|
73
73
|
id: product._id,
|
|
74
74
|
}));
|
|
75
|
-
return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, children: children }));
|
|
75
|
+
return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, variant: variant, children: children }));
|
|
76
76
|
});
|
|
77
77
|
/**
|
|
78
78
|
* Raw component that provides direct access to product list data.
|
|
@@ -124,29 +124,38 @@ export const Products = React.forwardRef((props, ref) => {
|
|
|
124
124
|
});
|
|
125
125
|
/**
|
|
126
126
|
* Repeater component that renders Product.Root for each product.
|
|
127
|
-
* Follows Repeater Level pattern.
|
|
128
|
-
*
|
|
127
|
+
* Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
|
|
128
|
+
* Supports asChild pattern for advanced layout components like GalleryWrapper.
|
|
129
129
|
*
|
|
130
130
|
* @component
|
|
131
131
|
* @example
|
|
132
132
|
* ```tsx
|
|
133
|
+
* // Standard usage
|
|
133
134
|
* <ProductList.ProductRepeater>
|
|
134
135
|
* <Product.Name />
|
|
135
136
|
* <Product.Price />
|
|
136
|
-
*
|
|
137
|
-
*
|
|
138
|
-
*
|
|
137
|
+
* </ProductList.ProductRepeater>
|
|
138
|
+
*
|
|
139
|
+
* // AsChild usage with GalleryWrapper
|
|
140
|
+
* <ProductList.ProductRepeater asChild>
|
|
141
|
+
* {({ items, variant, itemWrapper }) => (
|
|
142
|
+
* <GalleryWrapper
|
|
143
|
+
* items={items}
|
|
144
|
+
* variant={variant}
|
|
145
|
+
* itemRenderer={(item, index) =>
|
|
146
|
+
* itemWrapper({ item, index, children: <>
|
|
147
|
+
* <Product.Name />
|
|
148
|
+
* <Product.Price />
|
|
149
|
+
* </> })
|
|
150
|
+
* }
|
|
151
|
+
* />
|
|
152
|
+
* )}
|
|
139
153
|
* </ProductList.ProductRepeater>
|
|
140
154
|
* ```
|
|
141
155
|
*/
|
|
142
|
-
export const ProductRepeater = React.forwardRef((props,
|
|
143
|
-
const { children } = props;
|
|
144
|
-
|
|
145
|
-
const products = productsListService.products.get();
|
|
146
|
-
const hasProducts = products.length > 0;
|
|
147
|
-
if (!hasProducts)
|
|
148
|
-
return null;
|
|
149
|
-
return (_jsx(_Fragment, { children: products.map((product) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, children: children }, product._id))) }));
|
|
156
|
+
export const ProductRepeater = React.forwardRef((props, ref) => {
|
|
157
|
+
const { children, asChild } = props;
|
|
158
|
+
return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: ({ item: product, children }) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, "data-item-id": product._id, children: children }, product._id)), children: children }));
|
|
150
159
|
});
|
|
151
160
|
/**
|
|
152
161
|
* Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/headless-stores",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.97",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
|
|
@@ -70,6 +70,6 @@
|
|
|
70
70
|
"@wix/services-manager-react": "^0.1.26"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"@wix/headless-components": "0.0.
|
|
73
|
+
"@wix/headless-components": "0.0.18"
|
|
74
74
|
}
|
|
75
75
|
}
|