@wix/headless-stores 0.0.36 → 0.0.37

package/dist/react/Collection.js

@@ -1,345 +0,0 @@
-import { useService } from "@wix/services-manager-react";
-import { CollectionServiceDefinition } from "../services/collection-service.js";
-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);
-    // Debug logging to help identify service issues
-    if (!service) {
-        console.error("CollectionService is undefined");
-        return props.children({
-            products: [],
-            isLoading: false,
-            error: "Service not available",
-            isEmpty: true,
-            totalProducts: 0,
-            hasProducts: false,
-        });
-    }
-    // Safely access service properties with error handling
-    try {
-        const productList = service.products?.get() || [];
-        const isLoading = service.isLoading?.get() || false;
-        const error = service.error?.get() || null;
-        const totalProducts = service.totalProducts?.get() || 0;
-        const hasProducts = service.hasProducts?.get() || false;
-        return props.children({
-            products: productList,
-            isLoading,
-            error,
-            isEmpty: !hasProducts && !isLoading,
-            totalProducts,
-            hasProducts,
-        });
-    }
-    catch (err) {
-        console.error("Error accessing service properties:", err);
-        return props.children({
-            products: [],
-            isLoading: false,
-            error: "Failed to load products",
-            isEmpty: true,
-            totalProducts: 0,
-            hasProducts: false,
-        });
-    }
-};
-/**
- * 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;
-    // Use actual v3 API structure based on real data
-    // Images are in media.main.image, not media.itemsInfo.items
-    const image = product?.media?.main?.image || null;
-    // Create formatted price since formattedAmount is not available
-    const rawAmount = product.actualPriceRange?.minValue?.amount;
-    const price = rawAmount ? `$${rawAmount}` : "$0.00";
-    // Create formatted compare-at price
-    const rawCompareAmount = product.compareAtPriceRange?.minValue?.amount;
-    const compareAtPrice = rawCompareAmount ? `$${rawCompareAmount}` : null;
-    const availabilityStatus = product.inventory?.availabilityStatus;
-    const available = availabilityStatus === InventoryAvailabilityStatus.IN_STOCK ||
-        availabilityStatus === InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
-    const description = typeof product.description === "string" ? product.description : "";
-    return props.children({
-        id: product._id || "",
-        title: product.name || "",
-        slug: product.slug || "",
-        image,
-        price,
-        compareAtPrice,
-        description,
-        available,
-    });
-};
-/**
- * Headless component for load more products functionality
- * 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);
-    // Error handling for undefined service
-    if (!service) {
-        console.error("CollectionService is undefined in LoadMore");
-        return props.children({
-            loadMore: async () => { },
-            refresh: async () => { },
-            isLoading: false,
-            hasProducts: false,
-            totalProducts: 0,
-            hasMoreProducts: false,
-        });
-    }
-    try {
-        const isLoading = service.isLoading?.get() || false;
-        const hasProducts = service.hasProducts?.get() || false;
-        const totalProducts = service.totalProducts?.get() || 0;
-        const hasMoreProducts = service.hasMoreProducts?.get() || false;
-        return props.children({
-            loadMore: service.loadMore || (async () => { }),
-            refresh: service.refresh || (async () => { }),
-            isLoading,
-            hasProducts,
-            totalProducts,
-            hasMoreProducts,
-        });
-    }
-    catch (err) {
-        console.error("Error in LoadMore:", err);
-        return props.children({
-            loadMore: async () => { },
-            refresh: async () => { },
-            isLoading: false,
-            hasProducts: false,
-            totalProducts: 0,
-            hasMoreProducts: false,
-        });
-    }
-};
-/**
- * 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);
-    // Error handling for undefined service
-    if (!service) {
-        console.error("CollectionService is undefined in Header");
-        return props.children({
-            totalProducts: 0,
-            isLoading: false,
-            hasProducts: false,
-        });
-    }
-    try {
-        const totalProducts = service.totalProducts?.get() || 0;
-        const isLoading = service.isLoading?.get() || false;
-        const hasProducts = service.hasProducts?.get() || false;
-        return props.children({
-            totalProducts,
-            isLoading,
-            hasProducts,
-        });
-    }
-    catch (err) {
-        console.error("Error in Header:", err);
-        return props.children({
-            totalProducts: 0,
-            isLoading: false,
-            hasProducts: false,
-        });
-    }
-};
-/**
- * Headless component for collection actions (refresh, load more)
- * 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);
-    // Error handling for undefined service
-    if (!service) {
-        console.error("CollectionService is undefined in Actions");
-        return props.children({
-            refresh: async () => { },
-            loadMore: async () => { },
-            isLoading: false,
-            error: "Service not available",
-        });
-    }
-    try {
-        const isLoading = service.isLoading?.get() || false;
-        const error = service.error?.get() || null;
-        return props.children({
-            refresh: service.refresh || (async () => { }),
-            loadMore: service.loadMore || (async () => { }),
-            isLoading,
-            error,
-        });
-    }
-    catch (err) {
-        console.error("Error in Actions:", err);
-        return props.children({
-            refresh: async () => { },
-            loadMore: async () => { },
-            isLoading: false,
-            error: "Failed to load actions",
-        });
-    }
-};

package/dist/react/FilteredCollection.d.ts

@@ -1,299 +0,0 @@
-import React, { type ReactNode } from "react";
-import { type AvailableOptions, type FilterServiceAPI, type Filter } from "../services/filter-service.js";
-import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
-import type { PropsWithChildren } from "react";
-export type { AvailableOptions, Filter, FilterServiceAPI };
-/**
- * Root component that provides the FilteredCollection service context to its children.
- * This component sets up the necessary services for managing filtered collection functionality.
- *
- * @order 1
- * @component
- * @example
- * ```tsx
- * import { FilteredCollection } from '@wix/stores/components';
- *
- * function FilteredProductsPage() {
- *   return (
- *     <FilteredCollection.Root>
- *       <div>
- *         <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>
- *
- *         <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 => (
- *                       <FilteredCollection.Item key={product.id} product={product}>
- *                         {({ title, image, price, available, slug }) => (
- *                           <div className={`product-item ${!available ? 'unavailable' : ''}`}>
- *                             {image && <img src={image} alt={title} />}
- *                             <h3>{title}</h3>
- *                             <div className="price">{price}</div>
- *                             <a href={`/product/${slug}`}>View Details</a>
- *                           </div>
- *                         )}
- *                       </FilteredCollection.Item>
- *                     ))}
- *                   </div>
- *                   {hasMoreProducts && (
- *                     <FilteredCollection.LoadMore>
- *                       {({ loadMore, isLoading }) => (
- *                         <button onClick={loadMore} disabled={isLoading}>
- *                           {isLoading ? 'Loading...' : 'Load More'}
- *                         </button>
- *                       )}
- *                     </FilteredCollection.LoadMore>
- *                   )}
- *                 </div>
- *               )}
- *             </div>
- *           )}
- *         </FilteredCollection.Grid>
- *       </div>
- *     </FilteredCollection.Root>
- *   );
- * }
- * ```
- */
-export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
-export interface FiltersLoadingProps {
-    children: (data: {
-        isFullyLoaded: boolean;
-    }) => ReactNode;
-}
-/**
- * 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 {
-    children: (data: {
-        products: V3Product[];
-        totalProducts: number;
-        isLoading: boolean;
-        error: string | null;
-        isEmpty: boolean;
-        hasMoreProducts: boolean;
-    }) => ReactNode;
-}
-/**
- * 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 {
-    product: V3Product;
-    children: (data: {
-        title: string;
-        image: string | null;
-        imageAltText: string | null;
-        price: string;
-        compareAtPrice: string | null;
-        available: boolean;
-        slug: string;
-        description?: string;
-    }) => ReactNode;
-}
-/**
- * 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 {
-    children: (data: {
-        loadMore: () => Promise<void>;
-        refresh: () => Promise<void>;
-        isLoading: boolean;
-        hasProducts: boolean;
-        totalProducts: number;
-        hasMoreProducts: boolean;
-    }) => ReactNode;
-}
-/**
- * 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 {
-    children: (data: {
-        applyFilters: (filters: Filter) => void;
-        clearFilters: () => void;
-        currentFilters: Filter;
-        allProducts: V3Product[];
-        availableOptions: AvailableOptions;
-        isFiltered: boolean;
-    }) => ReactNode;
-}
-/**
- * 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>;