@wix/headless-stores 0.0.29 → 0.0.31

package/dist/react/FilteredCollection.d.ts

@@ -11,6 +11,26 @@ export interface FiltersLoadingProps {
  * Headless component for displaying a loading state for filters
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FiltersLoadingIndicator() {
+ *   return (
+ *     <FilteredCollection.FiltersLoading>
+ *       {({ isFullyLoaded }) => (
+ *         <div>
+ *           {!isFullyLoaded && (
+ *             <div className="loading-pulse">
+ *               Loading filters...
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.FiltersLoading>
+ *   );
+ * }
+ * ```
  */
 export declare const FiltersLoading: React.FC<FiltersLoadingProps>;
 export interface FilteredGridProps {
@@ -27,6 +47,35 @@ export interface FilteredGridProps {
  * Headless component for displaying a grid of filtered products
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsGrid() {
+ *   return (
+ *     <FilteredCollection.Grid>
+ *       {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *         <div>
+ *           {isLoading && <div>Loading filtered products...</div>}
+ *           {error && <div>Error: {error}</div>}
+ *           {isEmpty && <div>No products match your filters</div>}
+ *           {products.length > 0 && (
+ *             <div>
+ *               <p>Showing {products.length} of {totalProducts} products</p>
+ *               <div className="filtered-grid">
+ *                 {products.map(product => (
+ *                   <div key={product.id}>{product.name}</div>
+ *                 ))}
+ *               </div>
+ *               {hasMoreProducts && <button>Load More</button>}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.Grid>
+ *   );
+ * }
+ * ```
  */
 export declare const Grid: React.FC<FilteredGridProps>;
 export interface FilteredItemProps {
@@ -46,6 +95,30 @@ export interface FilteredItemProps {
  * Headless component for displaying a filtered product item
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductItem({ product }) {
+ *   return (
+ *     <FilteredCollection.Item product={product}>
+ *       {({ title, image, price, compareAtPrice, available, slug, description }) => (
+ *         <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *           {image && <img src={image} alt={title} />}
+ *           <h3>{title}</h3>
+ *           {description && <p>{description}</p>}
+ *           <div className="price">
+ *             <span className="current">{price}</span>
+ *             {compareAtPrice && <span className="compare"><s>{compareAtPrice}</s></span>}
+ *           </div>
+ *           {!available && <div className="out-of-stock">Out of Stock</div>}
+ *           <a href={`/product/${slug}`}>View Details</a>
+ *         </div>
+ *       )}
+ *     </FilteredCollection.Item>
+ *   );
+ * }
+ * ```
  */
 export declare const Item: React.FC<FilteredItemProps>;
 export interface FilteredLoadMoreProps {
@@ -62,6 +135,35 @@ export interface FilteredLoadMoreProps {
  * Headless component for load more filtered products functionality
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function LoadMoreProducts() {
+ *   return (
+ *     <FilteredCollection.LoadMore>
+ *       {({ loadMore, refresh, isLoading, hasProducts, totalProducts, hasMoreProducts }) => (
+ *         <div>
+ *           {hasProducts && (
+ *             <div>
+ *               <p>Showing products ({totalProducts} total)</p>
+ *               {hasMoreProducts && (
+ *                 <button
+ *                   onClick={loadMore}
+ *                   disabled={isLoading}
+ *                 >
+ *                   {isLoading ? 'Loading...' : 'Load More'}
+ *                 </button>
+ *               )}
+ *               <button onClick={refresh}>Refresh</button>
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.LoadMore>
+ *   );
+ * }
+ * ```
  */
 export declare const LoadMore: React.FC<FilteredLoadMoreProps>;
 export interface FilteredFiltersProps {
@@ -78,5 +180,37 @@ export interface FilteredFiltersProps {
  * Headless component for product filters with available options
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function ProductFilters() {
+ *   return (
+ *     <FilteredCollection.Filters>
+ *       {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *         <div className="filters">
+ *           <h3>Filters</h3>
+ *           <div className="price-filter">
+ *             <label>Price Range</label>
+ *             <input
+ *               type="range"
+ *               min={availableOptions.priceRange.min}
+ *               max={availableOptions.priceRange.max}
+ *               value={currentFilters.priceRange.min}
+ *               onChange={(e) => applyFilters({
+ *                 ...currentFilters,
+ *                 priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *               })}
+ *             />
+ *           </div>
+ *           {isFiltered && (
+ *             <button onClick={clearFilters}>Clear All Filters</button>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.Filters>
+ *   );
+ * }
+ * ```
  */
 export declare const Filters: React.FC<FilteredFiltersProps>;

package/dist/react/FilteredCollection.js

@@ -7,6 +7,26 @@ import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3"
  * Headless component for displaying a loading state for filters
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FiltersLoadingIndicator() {
+ *   return (
+ *     <FilteredCollection.FiltersLoading>
+ *       {({ isFullyLoaded }) => (
+ *         <div>
+ *           {!isFullyLoaded && (
+ *             <div className="loading-pulse">
+ *               Loading filters...
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.FiltersLoading>
+ *   );
+ * }
+ * ```
  */
 export const FiltersLoading = ({ children }) => {
     const filter = useService(FilterServiceDefinition);
@@ -17,6 +37,35 @@ export const FiltersLoading = ({ children }) => {
  * Headless component for displaying a grid of filtered products
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsGrid() {
+ *   return (
+ *     <FilteredCollection.Grid>
+ *       {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *         <div>
+ *           {isLoading && <div>Loading filtered products...</div>}
+ *           {error && <div>Error: {error}</div>}
+ *           {isEmpty && <div>No products match your filters</div>}
+ *           {products.length > 0 && (
+ *             <div>
+ *               <p>Showing {products.length} of {totalProducts} products</p>
+ *               <div className="filtered-grid">
+ *                 {products.map(product => (
+ *                   <div key={product.id}>{product.name}</div>
+ *                 ))}
+ *               </div>
+ *               {hasMoreProducts && <button>Load More</button>}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.Grid>
+ *   );
+ * }
+ * ```
  */
 export const Grid = ({ children }) => {
     const collection = useService(CollectionServiceDefinition);
@@ -39,6 +88,30 @@ export const Grid = ({ children }) => {
  * Headless component for displaying a filtered product item
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductItem({ product }) {
+ *   return (
+ *     <FilteredCollection.Item product={product}>
+ *       {({ title, image, price, compareAtPrice, available, slug, description }) => (
+ *         <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *           {image && <img src={image} alt={title} />}
+ *           <h3>{title}</h3>
+ *           {description && <p>{description}</p>}
+ *           <div className="price">
+ *             <span className="current">{price}</span>
+ *             {compareAtPrice && <span className="compare"><s>{compareAtPrice}</s></span>}
+ *           </div>
+ *           {!available && <div className="out-of-stock">Out of Stock</div>}
+ *           <a href={`/product/${slug}`}>View Details</a>
+ *         </div>
+ *       )}
+ *     </FilteredCollection.Item>
+ *   );
+ * }
+ * ```
  */
 export const Item = ({ product, children }) => {
     // Safe conversion of product data with type safety guards
@@ -77,6 +150,35 @@ export const Item = ({ product, children }) => {
  * Headless component for load more filtered products functionality
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function LoadMoreProducts() {
+ *   return (
+ *     <FilteredCollection.LoadMore>
+ *       {({ loadMore, refresh, isLoading, hasProducts, totalProducts, hasMoreProducts }) => (
+ *         <div>
+ *           {hasProducts && (
+ *             <div>
+ *               <p>Showing products ({totalProducts} total)</p>
+ *               {hasMoreProducts && (
+ *                 <button
+ *                   onClick={loadMore}
+ *                   disabled={isLoading}
+ *                 >
+ *                   {isLoading ? 'Loading...' : 'Load More'}
+ *                 </button>
+ *               )}
+ *               <button onClick={refresh}>Refresh</button>
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.LoadMore>
+ *   );
+ * }
+ * ```
  */
 export const LoadMore = ({ children }) => {
     const collection = useService(CollectionServiceDefinition);
@@ -99,6 +201,38 @@ export const LoadMore = ({ children }) => {
  * Headless component for product filters with available options
  *
  * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function ProductFilters() {
+ *   return (
+ *     <FilteredCollection.Filters>
+ *       {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *         <div className="filters">
+ *           <h3>Filters</h3>
+ *           <div className="price-filter">
+ *             <label>Price Range</label>
+ *             <input
+ *               type="range"
+ *               min={availableOptions.priceRange.min}
+ *               max={availableOptions.priceRange.max}
+ *               value={currentFilters.priceRange.min}
+ *               onChange={(e) => applyFilters({
+ *                 ...currentFilters,
+ *                 priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *               })}
+ *             />
+ *           </div>
+ *           {isFiltered && (
+ *             <button onClick={clearFilters}>Clear All Filters</button>
+ *           )}
+ *         </div>
+ *       )}
+ *     </FilteredCollection.Filters>
+ *   );
+ * }
+ * ```
  */
 export const Filters = ({ children }) => {
     const collection = useService(CollectionServiceDefinition);

package/dist/react/Product.d.ts

@@ -17,6 +17,20 @@ export interface ProductNameRenderProps {
  * Headless component for product name display
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductHeader() {
+ *   return (
+ *     <Product.Name>
+ *       {({ name }) => (
+ *         <h1>{name}</h1>
+ *       )}
+ *     </Product.Name>
+ *   );
+ * }
+ * ```
  */
 export declare const Name: (props: ProductNameProps) => import("react").ReactNode;
 /**
@@ -45,22 +59,33 @@ export interface ProductDescriptionRenderProps {
     plainDescription: NonNullable<V3Product["plainDescription"]>;
 }
 /**
-* Headless component for product description display
-*
-* @example
-* <Product.Description>
-*   {({ plainDescription }) => (
-*     <>
-*       {plainDescription && (
-*         <p
-*           dangerouslySetInnerHTML={{
-*             __html: plainDescription,
-*           }}
-*         />
-*       )}
-*     </>
-*   )}
-* </Product.Description>
-* @component
-*/
+ * Headless component for product description display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductDescription() {
+ *   return (
+ *     <Product.Description>
+ *       {({ plainDescription, description }) => (
+ *         <div>
+ *           {plainDescription && (
+ *             <div
+ *               dangerouslySetInnerHTML={{
+ *                 __html: plainDescription,
+ *               }}
+ *             />
+ *           )}
+ *           {description && (
+ *             <div>Rich content description available</div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Product.Description>
+ *   );
+ * }
+ * ```
+ */
 export declare const Description: (props: ProductDescriptionProps) => import("react").ReactNode;

package/dist/react/Product.js

@@ -4,6 +4,20 @@ import { ProductServiceDefinition } from "../services/product-service.js";
  * Headless component for product name display
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductHeader() {
+ *   return (
+ *     <Product.Name>
+ *       {({ name }) => (
+ *         <h1>{name}</h1>
+ *       )}
+ *     </Product.Name>
+ *   );
+ * }
+ * ```
  */
 export const Name = (props) => {
     const service = useService(ProductServiceDefinition);
@@ -14,24 +28,35 @@ export const Name = (props) => {
     });
 };
 /**
-* Headless component for product description display
-*
-* @example
-* <Product.Description>
-*   {({ plainDescription }) => (
-*     <>
-*       {plainDescription && (
-*         <p
-*           dangerouslySetInnerHTML={{
-*             __html: plainDescription,
-*           }}
-*         />
-*       )}
-*     </>
-*   )}
-* </Product.Description>
-* @component
-*/
+ * Headless component for product description display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductDescription() {
+ *   return (
+ *     <Product.Description>
+ *       {({ plainDescription, description }) => (
+ *         <div>
+ *           {plainDescription && (
+ *             <div
+ *               dangerouslySetInnerHTML={{
+ *                 __html: plainDescription,
+ *               }}
+ *             />
+ *           )}
+ *           {description && (
+ *             <div>Rich content description available</div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Product.Description>
+ *   );
+ * }
+ * ```
+ */
 export const Description = (props) => {
     const service = useService(ProductServiceDefinition);
     const product = service.product.get();

package/dist/react/ProductActions.d.ts

@@ -36,5 +36,35 @@ export interface ActionsRenderProps {
  * Headless component for product actions (add to cart, buy now)
  *
  * @component
+ * @example
+ * ```tsx
+ * import { ProductActions } from '@wix/stores/components';
+ *
+ * function AddToCartButton() {
+ *   return (
+ *     <ProductActions.Actions quantity={1}>
+ *       {({ onAddToCart, onBuyNow, canAddToCart, isLoading, price, inStock, error }) => (
+ *         <div>
+ *           <div>Price: {price}</div>
+ *           {error && <div className="error">{error}</div>}
+ *           {!inStock && <div>Out of stock</div>}
+ *           <button
+ *             onClick={onAddToCart}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             {isLoading ? 'Adding...' : 'Add to Cart'}
+ *           </button>
+ *           <button
+ *             onClick={onBuyNow}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             Buy Now
+ *           </button>
+ *         </div>
+ *       )}
+ *     </ProductActions.Actions>
+ *   );
+ * }
+ * ```
  */
 export declare const Actions: (props: ActionsProps) => import("react").ReactNode;

package/dist/react/ProductActions.js

@@ -6,6 +6,36 @@ import { CurrentCartServiceDefinition } from "@wix/headless-ecom/services";
  * Headless component for product actions (add to cart, buy now)
  *
  * @component
+ * @example
+ * ```tsx
+ * import { ProductActions } from '@wix/stores/components';
+ *
+ * function AddToCartButton() {
+ *   return (
+ *     <ProductActions.Actions quantity={1}>
+ *       {({ onAddToCart, onBuyNow, canAddToCart, isLoading, price, inStock, error }) => (
+ *         <div>
+ *           <div>Price: {price}</div>
+ *           {error && <div className="error">{error}</div>}
+ *           {!inStock && <div>Out of stock</div>}
+ *           <button
+ *             onClick={onAddToCart}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             {isLoading ? 'Adding...' : 'Add to Cart'}
+ *           </button>
+ *           <button
+ *             onClick={onBuyNow}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             Buy Now
+ *           </button>
+ *         </div>
+ *       )}
+ *     </ProductActions.Actions>
+ *   );
+ * }
+ * ```
  */
 export const Actions = (props) => {
     const variantService = useService(SelectedVariantServiceDefinition);