@wix/headless-stores 0.0.36 → 0.0.37

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

package/cjs/dist/react/FilteredCollection.js

@@ -1,352 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useService, WixServices } from "@wix/services-manager-react";
-import { CollectionServiceDefinition, CollectionService, } from "../services/collection-service.js";
-import { FilterServiceDefinition, FilterService, } from "../services/filter-service.js";
-import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
-import { SortServiceDefinition, SortService, } from "../services/sort-service.js";
-import { CatalogServiceDefinition, CatalogService, } from "../services/catalog-service.js";
-import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
-import { createServicesMap } from "@wix/services-manager";
-/**
- * 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 function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap()
-            .addService(CatalogServiceDefinition, CatalogService, {})
-            .addService(CategoryServiceDefinition, CategoryService, {
-            categories: [],
-            initialCategoryId: null,
-        })
-            .addService(SortServiceDefinition, SortService, {})
-            .addService(FilterServiceDefinition, FilterService, {})
-            .addService(CollectionServiceDefinition, CollectionService, {}), children: props.children }));
-}
-/**
- * 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);
-    const isFullyLoaded = filter.isFullyLoaded.get();
-    return _jsx(_Fragment, { children: children({ isFullyLoaded }) });
-};
-/**
- * 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);
-    const products = collection.products.get() || [];
-    const totalProducts = collection.totalProducts.get();
-    const isLoading = collection.isLoading.get();
-    const error = collection.error.get();
-    const hasProducts = collection.hasProducts.get();
-    const hasMoreProducts = collection.hasMoreProducts.get();
-    return (_jsx(_Fragment, { children: children({
-            products,
-            isLoading,
-            error,
-            isEmpty: !hasProducts,
-            totalProducts,
-            hasMoreProducts,
-        }) }));
-};
-/**
- * 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
-    const title = String(product.name || "");
-    const image = product.media?.main?.image || null;
-    const imageAltText = product.media?.main?.altText || "";
-    const price = product.actualPriceRange?.minValue?.formattedAmount ||
-        product.actualPriceRange?.maxValue?.formattedAmount ||
-        (product.actualPriceRange?.minValue?.amount
-            ? `$${product.actualPriceRange.minValue.amount}`
-            : "$0.00");
-    // Add compare at price
-    const compareAtPrice = product.compareAtPriceRange?.minValue?.formattedAmount ||
-        (product.compareAtPriceRange?.minValue?.amount
-            ? `$${product.compareAtPriceRange.minValue.amount}`
-            : null);
-    const availabilityStatus = product.inventory?.availabilityStatus;
-    const available = availabilityStatus === InventoryAvailabilityStatus.IN_STOCK ||
-        availabilityStatus === InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
-    const slug = String(product.slug || product._id || "");
-    const description = product.plainDescription
-        ? String(product.plainDescription)
-        : undefined;
-    return (_jsx(_Fragment, { children: children({
-            title,
-            image,
-            imageAltText,
-            price: String(price),
-            compareAtPrice,
-            available,
-            slug,
-            description,
-        }) }));
-};
-/**
- * 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);
-    const loadMore = collection.loadMore;
-    const refresh = collection.refresh;
-    const isLoading = collection.isLoading.get();
-    const hasProducts = collection.hasProducts.get();
-    const totalProducts = collection.totalProducts.get();
-    const hasMoreProducts = collection.hasMoreProducts.get();
-    return (_jsx(_Fragment, { children: children({
-            loadMore,
-            refresh,
-            isLoading,
-            hasProducts,
-            totalProducts,
-            hasMoreProducts,
-        }) }));
-};
-/**
- * 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);
-    const filter = useService(FilterServiceDefinition);
-    const applyFilters = filter.applyFilters;
-    const clearFilters = filter.clearFilters;
-    const currentFilters = filter.currentFilters.get();
-    const allProducts = collection.products.get();
-    const availableOptions = filter.availableOptions.get();
-    const isFiltered = currentFilters.priceRange.min !== availableOptions.priceRange.min ||
-        currentFilters.priceRange.max !== availableOptions.priceRange.max ||
-        Object.keys(currentFilters.selectedOptions).length > 0;
-    return (_jsx(_Fragment, { children: children({
-            applyFilters,
-            clearFilters,
-            currentFilters,
-            allProducts,
-            availableOptions,
-            isFiltered,
-        }) }));
-};