@wix/headless-stores 0.0.54 → 0.0.56

package/dist/react/ProductList.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService } from '@wix/services-manager-react';
+import React from 'react';
+import { ProductsListServiceDefinition } from '../services/products-list-service.js';
+import * as CoreProductList from './core/ProductList.js';
+import * as CoreProductListPagination from './core/ProductListPagination.js';
+import * as Product from './Product.js';
+import { renderAsChild } from '../utils/renderAsChild.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["productListRoot"] = "product-list-root";
+    TestIds["productListProducts"] = "product-list-products";
+    TestIds["productListItem"] = "product-list-item";
+    TestIds["productListLoadMore"] = "product-list-load-more";
+    TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides the ProductList service context for rendering product lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductListPage({ products }) {
+ *   return (
+ *     <ProductList.Root products={products}>
+ *       <ProductList.Products>
+ *         <ProductList.ProductRepeater>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </ProductList.ProductRepeater>
+ *       </ProductList.Products>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, products, productsListConfig, productsListSearchConfig, className, } = props;
+    const serviceConfig = productsListConfig || {
+        products: products || [],
+        searchOptions: {
+            cursorPaging: { limit: 10 },
+        },
+        pagingMetadata: {
+            count: products?.length || 0,
+        },
+        aggregations: {}, // Empty aggregation data
+    };
+    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, productsListSearchConfig: productsListSearchConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
+});
+/**
+ * Internal component to handle the Root content with service access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const contextProducts = productsListService.products.get();
+    const pagingMetadata = productsListService.pagingMetadata.get();
+    const displayedProducts = contextProducts.length;
+    const totalProducts = pagingMetadata.count || contextProducts.length;
+    const isFiltered = false; // TODO: Implement filtering detection
+    const attributes = {
+        'data-testid': TestIds.productListRoot,
+        'data-total-products': totalProducts,
+        'data-displayed-products': displayedProducts,
+        'data-filtered': isFiltered,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Raw component that provides direct access to product list data.
+ * Similar to Product.Raw, this should only be used when you need custom access to list data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Raw>
+ *   {({ totalProducts, displayedProducts, isFiltered }) => (
+ *     <div className="text-content-muted">
+ *       Showing {displayedProducts} of {totalProducts} products
+ *       {isFiltered && <span className="ml-2 text-brand-primary">(Filtered)</span>}
+ *     </div>
+ *   )}
+ * </ProductList.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const pagingMetadata = productsListService.pagingMetadata.get();
+    const displayedProducts = products.length;
+    const totalProducts = pagingMetadata.count || products.length;
+    const isFiltered = false; // TODO: Implement filtering detection
+    return typeof children === 'function'
+        ? children({ totalProducts, displayedProducts, isFiltered })
+        : children;
+});
+/**
+ * Container for the product list with empty state support.
+ * Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Products emptyState={<div>No products found</div>}>
+ *   <ProductList.ProductRepeater>
+ *     <Product.Name />
+ *     <Product.Price />
+ *   </ProductList.ProductRepeater>
+ * </ProductList.Products>
+ * ```
+ */
+export const Products = React.forwardRef((props, ref) => {
+    const { children, emptyState, infiniteScroll = true, pageSize = 0, className, } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const hasProducts = products.length > 0;
+    if (!hasProducts) {
+        return emptyState || null;
+    }
+    const attributes = {
+        'data-testid': TestIds.productListProducts,
+        'data-empty': !hasProducts,
+        'data-infinite-scroll': infiniteScroll,
+        'data-page-size': pageSize,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Repeater component that renders Product.Root for each product.
+ * Follows Repeater Level pattern.
+ * Note: Repeater components do NOT support asChild as per architecture rules.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.ProductRepeater>
+ *   <Product.Name />
+ *   <Product.Price />
+ *   <Product.MediaGallery>
+ *     <MediaGallery.Viewport />
+ *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ * ```
+ */
+export const ProductRepeater = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const hasProducts = products.length > 0;
+    if (!hasProducts)
+        return null;
+    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))) }));
+});
+/**
+ * Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.LoadMoreTrigger asChild>
+ *   <button>Load More</button>
+ * </ProductList.LoadMoreTrigger>
+ * ```
+ */
+export const LoadMoreTrigger = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProductListPagination.LoadMoreTrigger, { children: ({ loadMore, hasMoreProducts, isLoading }) => {
+            // Don't render if no more products to load
+            if (!hasMoreProducts)
+                return null;
+            const handleClick = () => loadMore(10);
+            const attributes = {
+                'data-testid': TestIds.productListLoadMore,
+                className,
+                onClick: handleClick,
+                disabled: isLoading,
+            };
+            if (asChild && React.isValidElement(children)) {
+                return React.cloneElement(children, {
+                    ...attributes,
+                    onClick: handleClick,
+                    ref,
+                });
+            }
+            return (_jsx("button", { ...attributes, ref: ref, children: children }));
+        } }));
+});
+/**
+ * Displays the number of products currently displayed.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.TotalsDisplayed />
+ * // or with asChild
+ * <ProductList.TotalsDisplayed asChild>
+ *   <strong />
+ * </ProductList.TotalsDisplayed>
+ * // or with render function
+ * <ProductList.TotalsDisplayed asChild>
+ *   {({ displayedProducts }, ref) => <strong ref={ref}>{displayedProducts}</strong>}
+ * </ProductList.TotalsDisplayed>
+ * ```
+ */
+export const TotalsDisplayed = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const displayedProducts = products.length;
+    const attributes = {
+        'data-testid': TestIds.productListTotalsDisplayed,
+        'data-displayed': displayedProducts,
+        className,
+    };
+    if (asChild) {
+        const rendered = renderAsChild({
+            children,
+            props: { displayedProducts },
+            ref,
+            content: displayedProducts.toString(),
+            attributes,
+        });
+        if (rendered)
+            return rendered;
+    }
+    return (_jsx("span", { ...attributes, ref: ref, children: displayedProducts }));
+});

package/dist/react/core/Product.d.ts

@@ -129,7 +129,8 @@ export interface ProductMediaProps {
     children: (props: ProductMediaRenderProps) => React.ReactNode;
 }
 export interface ProductMediaRenderProps {
-    media: ProductMedia[];
+    mediaItems: ProductMedia[];
+    mainMedia?: ProductMedia;
 }
 export declare function Media(props: ProductMediaProps): import("react").ReactNode;
 export interface ProductProps {
@@ -146,3 +147,39 @@ export interface LoadingRenderProps {
     isLoading: boolean;
 }
 export declare function Loading(props: LoadingProps): import("react").ReactNode;
+/**
+ * Props for ProductSlug headless component
+ */
+export interface ProductSlugProps {
+    /** Render prop function that receives product slug data */
+    children: (props: ProductSlugRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductSlug component
+ */
+export interface ProductSlugRenderProps {
+    /** Product slug */
+    slug: string;
+}
+/**
+ * Headless component for product slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugDisplay() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export declare function Slug(props: ProductSlugProps): import("react").ReactNode;

package/dist/react/core/Product.js

@@ -105,9 +105,11 @@ export function Description(props) {
 export function Media(props) {
     const service = useService(ProductServiceDefinition);
     const product = service.product.get();
-    const media = product.media?.itemsInfo?.items ?? [];
+    const mainMedia = product.media?.main;
+    const mediaItems = product.media?.itemsInfo?.items ?? [];
     return props.children({
-        media,
+        mediaItems,
+        mainMedia,
     });
 }
 export function Content(props) {
@@ -124,3 +126,32 @@ export function Loading(props) {
         isLoading,
     });
 }
+/**
+ * Headless component for product slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugDisplay() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export function Slug(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const slug = product.slug;
+    return props.children({
+        slug,
+    });
+}

package/dist/react/index.d.ts

@@ -2,13 +2,14 @@ export * as CategoryListCore from './core/CategoryList.js';
 export * as CategoryCore from './core/Category.js';
 export * as ProductCore from './core/Product.js';
 export * as ProductModifiers from './core/ProductModifiers.js';
-export * as ProductList from './core/ProductList.js';
+export * as ProductListCore from './core/ProductList.js';
 export * as ProductListFilters from './core/ProductListFilters.js';
 export * as ProductListPagination from './core/ProductListPagination.js';
 export * as ProductListSort from './core/ProductListSort.js';
 export * as ProductVariantSelector from './core/ProductVariantSelector.js';
 export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';
+export * as ProductList from './ProductList.js';
 export * as Option from './Option.js';
 export * as Choice from './Choice.js';
 export * as CategoryList from './CategoryList.js';

package/dist/react/index.js

@@ -2,13 +2,14 @@ export * as CategoryListCore from './core/CategoryList.js';
 export * as CategoryCore from './core/Category.js';
 export * as ProductCore from './core/Product.js';
 export * as ProductModifiers from './core/ProductModifiers.js';
-export * as ProductList from './core/ProductList.js';
+export * as ProductListCore from './core/ProductList.js';
 export * as ProductListFilters from './core/ProductListFilters.js';
 export * as ProductListPagination from './core/ProductListPagination.js';
 export * as ProductListSort from './core/ProductListSort.js';
 export * as ProductVariantSelector from './core/ProductVariantSelector.js';
 export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';
+export * as ProductList from './ProductList.js';
 export * as Option from './Option.js';
 export * as Choice from './Choice.js';
 export * as CategoryList from './CategoryList.js';

package/dist/services/selected-variant-service.js

@@ -249,7 +249,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
         else if (prod?.compareAtPriceRange?.minValue?.amount) {
             rawAmount = prod.compareAtPriceRange.minValue.amount;
         }
-        return rawAmount ? `$${rawAmount}` : null;
+        return rawAmount && rawAmount !== '0' ? `$${rawAmount}` : null;
     });
     const isInStock = signalsService.computed(() => {
         const variant = currentVariant.get();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -63,7 +63,7 @@
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
     "@wix/headless-ecom": "^0.0.14",
-    "@wix/headless-media": "^0.0.8",
+    "@wix/headless-media": "^0.0.10",
     "@wix/redirects": "^1.0.83",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"