@wix/headless-stores 0.0.30 → 0.0.32

package/cjs/dist/react/Category.d.ts

@@ -11,5 +11,35 @@ export interface CategoryListProps {
  * Headless component for displaying a list of categories
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation() {
+ *   return (
+ *     <Category.List>
+ *       {({ categories, selectedCategory, setSelectedCategory }) => (
+ *         <nav>
+ *           <button
+ *             onClick={() => setSelectedCategory(null)}
+ *             className={selectedCategory === null ? 'active' : ''}
+ *           >
+ *             All Categories
+ *           </button>
+ *           {categories.map(category => (
+ *             <button
+ *               key={category.id}
+ *               onClick={() => setSelectedCategory(category.id)}
+ *               className={selectedCategory === category.id ? 'active' : ''}
+ *             >
+ *               {category.name}
+ *             </button>
+ *           ))}
+ *         </nav>
+ *       )}
+ *     </Category.List>
+ *   );
+ * }
+ * ```
  */
 export declare const List: React.FC<CategoryListProps>;

package/cjs/dist/react/Category.js

@@ -5,6 +5,36 @@ import { CategoryServiceDefinition } from "../services/category-service.js";
  * Headless component for displaying a list of categories
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation() {
+ *   return (
+ *     <Category.List>
+ *       {({ categories, selectedCategory, setSelectedCategory }) => (
+ *         <nav>
+ *           <button
+ *             onClick={() => setSelectedCategory(null)}
+ *             className={selectedCategory === null ? 'active' : ''}
+ *           >
+ *             All Categories
+ *           </button>
+ *           {categories.map(category => (
+ *             <button
+ *               key={category.id}
+ *               onClick={() => setSelectedCategory(category.id)}
+ *               className={selectedCategory === category.id ? 'active' : ''}
+ *             >
+ *               {category.name}
+ *             </button>
+ *           ))}
+ *         </nav>
+ *       )}
+ *     </Category.List>
+ *   );
+ * }
+ * ```
  */
 export const List = ({ children }) => {
     const service = useService(CategoryServiceDefinition);

package/cjs/dist/react/Collection.d.ts

@@ -27,6 +27,37 @@ export interface GridRenderProps {
  * Headless component for product grid
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function ProductGrid() {
+ *   return (
+ *     <Collection.Grid>
+ *       {({ products, isLoading, error, isEmpty, totalProducts, hasProducts }) => (
+ *         <div>
+ *           {isLoading && <div>Loading products...</div>}
+ *           {error && <div>Error: {error}</div>}
+ *           {isEmpty && <div>No products found</div>}
+ *           {hasProducts && (
+ *             <div>
+ *               <p>Showing {products.length} of {totalProducts} products</p>
+ *               <div className="product-grid">
+ *                 {products.map(product => (
+ *                   <div key={product.id} className="product-card">
+ *                     <h3>{product.name}</h3>
+ *                     <p>{product.price?.price} {product.price?.currency}</p>
+ *                   </div>
+ *                 ))}
+ *               </div>
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Collection.Grid>
+ *   );
+ * }
+ * ```
  */
 export declare const Grid: (props: GridProps) => import("react").ReactNode;
 /**
@@ -63,6 +94,32 @@ export interface ItemRenderProps {
  * Headless component for individual product item
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function ProductCard({ product }) {
+ *   return (
+ *     <Collection.Item product={product}>
+ *       {({ id, title, slug, image, price, compareAtPrice, description, available }) => (
+ *         <div className={`product-card ${!available ? 'unavailable' : ''}`}>
+ *           {image && <img src={image} alt={title} />}
+ *           <h3>{title}</h3>
+ *           <p>{description}</p>
+ *           <div className="pricing">
+ *             <span className="price">{price}</span>
+ *             {compareAtPrice && (
+ *               <span className="compare-price"><s>{compareAtPrice}</s></span>
+ *             )}
+ *           </div>
+ *           {!available && <div className="badge">Out of Stock</div>}
+ *           <a href={`/products/${slug}`}>View Product</a>
+ *         </div>
+ *       )}
+ *     </Collection.Item>
+ *   );
+ * }
+ * ```
  */
 export declare const Item: (props: ItemProps) => import("react").ReactNode;
 /**
@@ -94,6 +151,37 @@ export interface LoadMoreRenderProps {
  * Note: V3 API uses simplified loading without traditional pagination
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function LoadMoreButton() {
+ *   return (
+ *     <Collection.LoadMore>
+ *       {({ loadMore, refresh, isLoading, hasProducts, totalProducts, hasMoreProducts }) => (
+ *         <div className="load-more-section">
+ *           {hasProducts && (
+ *             <div>
+ *               <p>Loaded {totalProducts} products</p>
+ *               <div className="actions">
+ *                 {hasMoreProducts && (
+ *                   <button
+ *                     onClick={loadMore}
+ *                     disabled={isLoading}
+ *                   >
+ *                     {isLoading ? 'Loading...' : 'Load More Products'}
+ *                   </button>
+ *                 )}
+ *                 <button onClick={refresh}>Refresh Collection</button>
+ *               </div>
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Collection.LoadMore>
+ *   );
+ * }
+ * ```
  */
 export declare const LoadMore: (props: LoadMoreProps) => import("react").ReactNode;
 /**
@@ -118,6 +206,28 @@ export interface HeaderRenderProps {
  * Headless component for collection header with product count
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function CollectionHeader() {
+ *   return (
+ *     <Collection.Header>
+ *       {({ totalProducts, isLoading, hasProducts }) => (
+ *         <div className="collection-header">
+ *           {isLoading && <div>Loading collection...</div>}
+ *           {hasProducts && !isLoading && (
+ *             <h2>Products ({totalProducts} items)</h2>
+ *           )}
+ *           {!hasProducts && !isLoading && (
+ *             <h2>No products found</h2>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Collection.Header>
+ *   );
+ * }
+ * ```
  */
 export declare const Header: (props: HeaderProps) => import("react").ReactNode;
 /**
@@ -145,5 +255,40 @@ export interface ActionsRenderProps {
  * Replaces traditional pagination for V3 API
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function CollectionActions() {
+ *   return (
+ *     <Collection.Actions>
+ *       {({ refresh, loadMore, isLoading, error }) => (
+ *         <div className="collection-actions">
+ *           {error && (
+ *             <div className="error">
+ *               Error: {error}
+ *               <button onClick={refresh}>Retry</button>
+ *             </div>
+ *           )}
+ *           <div className="action-buttons">
+ *             <button
+ *               onClick={refresh}
+ *               disabled={isLoading}
+ *             >
+ *               {isLoading ? 'Refreshing...' : 'Refresh'}
+ *             </button>
+ *             <button
+ *               onClick={loadMore}
+ *               disabled={isLoading}
+ *             >
+ *               Load More
+ *             </button>
+ *           </div>
+ *         </div>
+ *       )}
+ *     </Collection.Actions>
+ *   );
+ * }
+ * ```
  */
 export declare const Actions: (props: ActionsProps) => import("react").ReactNode;

package/cjs/dist/react/Collection.js

@@ -5,6 +5,37 @@ import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3"
  * Headless component for product grid
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function ProductGrid() {
+ *   return (
+ *     <Collection.Grid>
+ *       {({ products, isLoading, error, isEmpty, totalProducts, hasProducts }) => (
+ *         <div>
+ *           {isLoading && <div>Loading products...</div>}
+ *           {error && <div>Error: {error}</div>}
+ *           {isEmpty && <div>No products found</div>}
+ *           {hasProducts && (
+ *             <div>
+ *               <p>Showing {products.length} of {totalProducts} products</p>
+ *               <div className="product-grid">
+ *                 {products.map(product => (
+ *                   <div key={product.id} className="product-card">
+ *                     <h3>{product.name}</h3>
+ *                     <p>{product.price?.price} {product.price?.currency}</p>
+ *                   </div>
+ *                 ))}
+ *               </div>
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Collection.Grid>
+ *   );
+ * }
+ * ```
  */
 export const Grid = (props) => {
     const service = useService(CollectionServiceDefinition);
@@ -52,6 +83,32 @@ export const Grid = (props) => {
  * Headless component for individual product item
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function ProductCard({ product }) {
+ *   return (
+ *     <Collection.Item product={product}>
+ *       {({ id, title, slug, image, price, compareAtPrice, description, available }) => (
+ *         <div className={`product-card ${!available ? 'unavailable' : ''}`}>
+ *           {image && <img src={image} alt={title} />}
+ *           <h3>{title}</h3>
+ *           <p>{description}</p>
+ *           <div className="pricing">
+ *             <span className="price">{price}</span>
+ *             {compareAtPrice && (
+ *               <span className="compare-price"><s>{compareAtPrice}</s></span>
+ *             )}
+ *           </div>
+ *           {!available && <div className="badge">Out of Stock</div>}
+ *           <a href={`/products/${slug}`}>View Product</a>
+ *         </div>
+ *       )}
+ *     </Collection.Item>
+ *   );
+ * }
+ * ```
  */
 export const Item = (props) => {
     const { product } = props;
@@ -84,6 +141,37 @@ export const Item = (props) => {
  * Note: V3 API uses simplified loading without traditional pagination
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function LoadMoreButton() {
+ *   return (
+ *     <Collection.LoadMore>
+ *       {({ loadMore, refresh, isLoading, hasProducts, totalProducts, hasMoreProducts }) => (
+ *         <div className="load-more-section">
+ *           {hasProducts && (
+ *             <div>
+ *               <p>Loaded {totalProducts} products</p>
+ *               <div className="actions">
+ *                 {hasMoreProducts && (
+ *                   <button
+ *                     onClick={loadMore}
+ *                     disabled={isLoading}
+ *                   >
+ *                     {isLoading ? 'Loading...' : 'Load More Products'}
+ *                   </button>
+ *                 )}
+ *                 <button onClick={refresh}>Refresh Collection</button>
+ *               </div>
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Collection.LoadMore>
+ *   );
+ * }
+ * ```
  */
 export const LoadMore = (props) => {
     const service = useService(CollectionServiceDefinition);
@@ -129,6 +217,28 @@ export const LoadMore = (props) => {
  * Headless component for collection header with product count
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function CollectionHeader() {
+ *   return (
+ *     <Collection.Header>
+ *       {({ totalProducts, isLoading, hasProducts }) => (
+ *         <div className="collection-header">
+ *           {isLoading && <div>Loading collection...</div>}
+ *           {hasProducts && !isLoading && (
+ *             <h2>Products ({totalProducts} items)</h2>
+ *           )}
+ *           {!hasProducts && !isLoading && (
+ *             <h2>No products found</h2>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Collection.Header>
+ *   );
+ * }
+ * ```
  */
 export const Header = (props) => {
     const service = useService(CollectionServiceDefinition);
@@ -165,6 +275,41 @@ export const Header = (props) => {
  * Replaces traditional pagination for V3 API
  *
  * @component
+ * @example
+ * ```tsx
+ * import { Collection } from '@wix/stores/components';
+ *
+ * function CollectionActions() {
+ *   return (
+ *     <Collection.Actions>
+ *       {({ refresh, loadMore, isLoading, error }) => (
+ *         <div className="collection-actions">
+ *           {error && (
+ *             <div className="error">
+ *               Error: {error}
+ *               <button onClick={refresh}>Retry</button>
+ *             </div>
+ *           )}
+ *           <div className="action-buttons">
+ *             <button
+ *               onClick={refresh}
+ *               disabled={isLoading}
+ *             >
+ *               {isLoading ? 'Refreshing...' : 'Refresh'}
+ *             </button>
+ *             <button
+ *               onClick={loadMore}
+ *               disabled={isLoading}
+ *             >
+ *               Load More
+ *             </button>
+ *           </div>
+ *         </div>
+ *       )}
+ *     </Collection.Actions>
+ *   );
+ * }
+ * ```
  */
 export const Actions = (props) => {
     const service = useService(CollectionServiceDefinition);

package/cjs/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>;