@wix/headless-stores 0.0.36 → 0.0.38

package/cjs/dist/react/ProductListFilters.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createServicesMap } from "@wix/services-manager";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { ProductsListFiltersService, ProductsListFiltersServiceDefinition, } from "../services/products-list-filters-service.js";
+/**
+ * Root component that provides the ProductListFilters service context to its children.
+ * This component sets up the necessary services for managing products list filters.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListFilters } from '@wix/stores/components';
+ *
+ * function FiltersSection() {
+ *   return (
+ *     <ProductListFilters.Root
+ *       productsListFiltersConfig={{
+ *         minPrice: 0,
+ *         maxPrice: 1000
+ *       }}
+ *     >
+ *       <ProductListFilters.MinPrice>
+ *         {({ minPrice, setMinPrice }) => (
+ *           <input
+ *             type="number"
+ *             value={minPrice}
+ *             onChange={(e) => setMinPrice(Number(e.target.value))}
+ *             placeholder="Min price"
+ *           />
+ *         )}
+ *       </ProductListFilters.MinPrice>
+ *     </ProductListFilters.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductsListFiltersServiceDefinition, ProductsListFiltersService, props.productsListFiltersConfig), children: props.children }));
+}
+/**
+ * Headless component for managing inventory status filters
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListFilters } from '@wix/stores/components';
+ *
+ * function InventoryStatusFilter() {
+ *   return (
+ *     <ProductListFilters.InventoryStatus>
+ *       {({ availableInventoryStatuses, selectedInventoryStatuses, toggleInventoryStatus }) => (
+ *         <div>
+ *           <h4>Inventory Status:</h4>
+ *           {availableInventoryStatuses.map(status => (
+ *             <label key={status}>
+ *               <input
+ *                 type="checkbox"
+ *                 checked={selectedInventoryStatuses.includes(status)}
+ *                 onChange={() => toggleInventoryStatus(status)}
+ *               />
+ *               {status}
+ *             </label>
+ *           ))}
+ *         </div>
+ *       )}
+ *     </ProductListFilters.InventoryStatus>
+ *   );
+ * }
+ * ```
+ */
+export function InventoryStatus(props) {
+    const service = useService(ProductsListFiltersServiceDefinition);
+    const availableInventoryStatuses = service.availableInventoryStatuses.get();
+    const selectedInventoryStatuses = service.selectedInventoryStatuses.get();
+    const toggleInventoryStatus = service.toggleInventoryStatus;
+    return typeof props.children === "function"
+        ? props.children({
+            availableInventoryStatuses,
+            selectedInventoryStatuses,
+            toggleInventoryStatus,
+        })
+        : props.children;
+}
+/**
+ * Headless component for resetting all filters
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListFilters } from '@wix/stores/components';
+ *
+ * function ResetFiltersButton() {
+ *   return (
+ *     <ProductListFilters.ResetTrigger>
+ *       {({ resetFilters, isFiltered }) => (
+ *         <button
+ *           onClick={resetFilters}
+ *           disabled={!isFiltered}
+ *           className={isFiltered ? 'active' : 'disabled'}
+ *         >
+ *           {isFiltered ? 'Clear Filters' : 'No Filters Applied'}
+ *         </button>
+ *       )}
+ *     </ProductListFilters.ResetTrigger>
+ *   );
+ * }
+ * ```
+ */
+export function ResetTrigger(props) {
+    const service = useService(ProductsListFiltersServiceDefinition);
+    const resetFilters = service.reset;
+    const isFiltered = service.isFiltered.get();
+    return typeof props.children === "function"
+        ? props.children({ resetFilters, isFiltered })
+        : props.children;
+}
+/**
+ * Headless component for managing price range filters (combined min/max)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListFilters } from '@wix/stores/components';
+ *
+ * function PriceRangeFilter() {
+ *   return (
+ *     <ProductListFilters.PriceRange>
+ *       {({ minPrice, maxPrice, setMinPrice, setMaxPrice }) => (
+ *         <div className="price-range">
+ *           <h4>Price Range:</h4>
+ *           <div className="price-inputs">
+ *             <input
+ *               type="number"
+ *               value={minPrice}
+ *               onChange={(e) => setMinPrice(Number(e.target.value))}
+ *               placeholder="Min"
+ *             />
+ *             <span>to</span>
+ *             <input
+ *               type="number"
+ *               value={maxPrice}
+ *               onChange={(e) => setMaxPrice(Number(e.target.value))}
+ *               placeholder="Max"
+ *             />
+ *           </div>
+ *         </div>
+ *       )}
+ *     </ProductListFilters.PriceRange>
+ *   );
+ * }
+ * ```
+ */
+export function PriceRange(props) {
+    const service = useService(ProductsListFiltersServiceDefinition);
+    const minPrice = service.minPrice.get();
+    const maxPrice = service.maxPrice.get();
+    const setMinPrice = service.setMinPrice;
+    const setMaxPrice = service.setMaxPrice;
+    return typeof props.children === "function"
+        ? props.children({ minPrice, maxPrice, setMinPrice, setMaxPrice })
+        : props.children;
+}
+/**
+ * Headless component that renders content for each product option in the list.
+ * Maps over all available product options and provides each option through a render prop.
+ * Only renders when options are available (not loading, no error, and has options).
+ * This follows the same collection pattern as ProductList.ItemContent and CategoryList.ItemContent.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListFilters } from '@wix/stores/components';
+ *
+ * function ProductOptionsFilter() {
+ *   return (
+ *     <ProductListFilters.ProductOptions>
+ *       {({ option, selectedChoices, toggleChoice }) => (
+ *         <div key={option.id}>
+ *           <h4>{option.name}</h4>
+ *           {option.choices.map(choice => (
+ *             <label key={choice.id}>
+ *               <input
+ *                 type="checkbox"
+ *                 checked={selectedChoices.includes(choice.id)}
+ *                 onChange={() => toggleChoice(choice.id)}
+ *               />
+ *               {choice.name}
+ *             </label>
+ *           ))}
+ *         </div>
+ *       )}
+ *     </ProductListFilters.ProductOptions>
+ *   );
+ * }
+ * ```
+ */
+export function ProductOptions(props) {
+    const service = useService(ProductsListFiltersServiceDefinition);
+    const availableOptions = service.availableProductOptions.get();
+    const selectedProductOptions = service.selectedProductOptions.get();
+    // Don't render if no options are available
+    if (availableOptions.length === 0) {
+        return null;
+    }
+    // Map over options and create render prop for each
+    return (_jsx(_Fragment, { children: availableOptions.map((option) => {
+            const selectedChoices = selectedProductOptions[option.id] || [];
+            const toggleChoice = (choiceId) => {
+                service.toggleProductOption(option.id, choiceId);
+            };
+            return typeof props.children === "function"
+                ? props.children({ option, selectedChoices, toggleChoice })
+                : props.children;
+        }) }));
+}

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

@@ -0,0 +1,246 @@
+import type { PropsWithChildren, ReactNode } from "react";
+/**
+ * Root component that provides the ProductListPagination service context to its children.
+ * This component sets up the necessary services for managing products list pagination.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function PaginationSection() {
+ *   return (
+ *     <ProductListPagination.Root>
+ *       <ProductListPagination.NextPageTrigger>
+ *         {({ nextPage, hasNextPage }) => (
+ *           <button
+ *             onClick={nextPage}
+ *             disabled={!hasNextPage}
+ *           >
+ *             Next Page
+ *           </button>
+ *         )}
+ *       </ProductListPagination.NextPageTrigger>
+ *     </ProductListPagination.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for PageSize headless component
+ */
+export interface PageSizeProps {
+    /** Content to display (can be a render function receiving page size controls or ReactNode) */
+    children: ((props: PageSizeRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for PageSize component
+ */
+export interface PageSizeRenderProps {
+    /** Current page size (items per page) */
+    currentLimit: number;
+    /** Function to update the page size */
+    setLimit: (limit: number) => void;
+}
+/**
+ * Headless component for managing page size (items per page)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function PageSizeSelector() {
+ *   return (
+ *     <ProductListPagination.PageSize>
+ *       {({ currentLimit, setLimit }) => (
+ *         <div>
+ *           <label>Items per page:</label>
+ *           <select
+ *             value={currentLimit}
+ *             onChange={(e) => setLimit(Number(e.target.value))}
+ *           >
+ *             <option value={10}>10</option>
+ *             <option value={20}>20</option>
+ *             <option value={50}>50</option>
+ *           </select>
+ *         </div>
+ *       )}
+ *     </ProductListPagination.PageSize>
+ *   );
+ * }
+ * ```
+ */
+export declare function PageSize(props: PageSizeProps): ReactNode;
+/**
+ * Props for NextPageTrigger headless component
+ */
+export interface NextPageTriggerProps {
+    /** Content to display (can be a render function receiving next page controls or ReactNode) */
+    children: ((props: NextPageTriggerRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for NextPageTrigger component
+ */
+export interface NextPageTriggerRenderProps {
+    /** Function to navigate to the next page */
+    nextPage: () => void;
+    /** Whether there is a next page available */
+    hasNextPage: boolean;
+}
+/**
+ * Headless component for navigating to the next page
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function NextPageButton() {
+ *   return (
+ *     <ProductListPagination.NextPageTrigger>
+ *       {({ nextPage, hasNextPage }) => (
+ *         <button
+ *           onClick={nextPage}
+ *           disabled={!hasNextPage}
+ *           className={hasNextPage ? 'enabled' : 'disabled'}
+ *         >
+ *           Next →
+ *         </button>
+ *       )}
+ *     </ProductListPagination.NextPageTrigger>
+ *   );
+ * }
+ * ```
+ */
+export declare function NextPageTrigger(props: NextPageTriggerProps): ReactNode;
+/**
+ * Props for PreviousPageTrigger headless component
+ */
+export interface PreviousPageTriggerProps {
+    /** Content to display (can be a render function receiving previous page controls or ReactNode) */
+    children: ((props: PreviousPageTriggerRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for PreviousPageTrigger component
+ */
+export interface PreviousPageTriggerRenderProps {
+    /** Function to navigate to the previous page */
+    prevPage: () => void;
+    /** Whether there is a previous page available */
+    hasPrevPage: boolean;
+}
+/**
+ * Headless component for navigating to the previous page
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function PrevPageButton() {
+ *   return (
+ *     <ProductListPagination.PreviousPageTrigger>
+ *       {({ prevPage, hasPrevPage }) => (
+ *         <button
+ *           onClick={prevPage}
+ *           disabled={!hasPrevPage}
+ *           className={hasPrevPage ? 'enabled' : 'disabled'}
+ *         >
+ *           ← Previous
+ *         </button>
+ *       )}
+ *     </ProductListPagination.PreviousPageTrigger>
+ *   );
+ * }
+ * ```
+ */
+export declare function PreviousPageTrigger(props: PreviousPageTriggerProps): ReactNode;
+/**
+ * Props for FirstPageTrigger headless component
+ */
+export interface FirstPageTriggerProps {
+    /** Content to display (can be a render function receiving first page controls or ReactNode) */
+    children: ((props: FirstPageTriggerRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for FirstPageTrigger component
+ */
+export interface FirstPageTriggerRenderProps {
+    /** Function to navigate to the first page */
+    goToFirstPage: () => void;
+    /** Whether there is a previous page (indicating not on first page) */
+    hasPrevPage: boolean;
+}
+/**
+ * Headless component for navigating to the first page
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function FirstPageButton() {
+ *   return (
+ *     <ProductListPagination.FirstPageTrigger>
+ *       {({ goToFirstPage, hasPrevPage }) => (
+ *         <button
+ *           onClick={goToFirstPage}
+ *           disabled={!hasPrevPage}
+ *           title="Go to first page"
+ *         >
+ *           ⏮ First
+ *         </button>
+ *       )}
+ *     </ProductListPagination.FirstPageTrigger>
+ *   );
+ * }
+ * ```
+ */
+export declare function FirstPageTrigger(props: FirstPageTriggerProps): ReactNode;
+/**
+ * Props for LoadMoreTrigger headless component
+ */
+export interface LoadMoreTriggerProps {
+    /** Content to display (can be a render function receiving load more controls or ReactNode) */
+    children: ((props: LoadMoreTriggerRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for LoadMoreTrigger component
+ */
+export interface LoadMoreTriggerRenderProps {
+    /** Function to load more products */
+    loadMore: (count: number) => void;
+    /** Whether there are more products to load */
+    hasMoreProducts: boolean;
+    /** Whether products are currently loading */
+    isLoading: boolean;
+}
+/**
+ * Headless component for loading more products (infinite scroll pattern)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function LoadMoreButton() {
+ *   return (
+ *     <ProductListPagination.LoadMoreTrigger>
+ *       {({ loadMore, hasMoreProducts, isLoading }) => (
+ *         <button
+ *           onClick={() => loadMore(10)}
+ *           disabled={!hasMoreProducts || isLoading}
+ *           className="load-more-btn"
+ *         >
+ *           {isLoading ? 'Loading...' : hasMoreProducts ? 'Load More' : 'No More Products'}
+ *         </button>
+ *       )}
+ *     </ProductListPagination.LoadMoreTrigger>
+ *   );
+ * }
+ * ```
+ */
+export declare function LoadMoreTrigger(props: LoadMoreTriggerProps): ReactNode;

package/cjs/dist/react/ProductListPagination.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createServicesMap } from "@wix/services-manager";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { ProductsListPaginationService, ProductsListPaginationServiceDefinition, } from "../services/products-list-pagination-service.js";
+import { ProductsListServiceDefinition } from "../services/products-list-service.js";
+/**
+ * Root component that provides the ProductListPagination service context to its children.
+ * This component sets up the necessary services for managing products list pagination.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function PaginationSection() {
+ *   return (
+ *     <ProductListPagination.Root>
+ *       <ProductListPagination.NextPageTrigger>
+ *         {({ nextPage, hasNextPage }) => (
+ *           <button
+ *             onClick={nextPage}
+ *             disabled={!hasNextPage}
+ *           >
+ *             Next Page
+ *           </button>
+ *         )}
+ *       </ProductListPagination.NextPageTrigger>
+ *     </ProductListPagination.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductsListPaginationServiceDefinition, ProductsListPaginationService), children: props.children }));
+}
+/**
+ * Headless component for managing page size (items per page)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function PageSizeSelector() {
+ *   return (
+ *     <ProductListPagination.PageSize>
+ *       {({ currentLimit, setLimit }) => (
+ *         <div>
+ *           <label>Items per page:</label>
+ *           <select
+ *             value={currentLimit}
+ *             onChange={(e) => setLimit(Number(e.target.value))}
+ *           >
+ *             <option value={10}>10</option>
+ *             <option value={20}>20</option>
+ *             <option value={50}>50</option>
+ *           </select>
+ *         </div>
+ *       )}
+ *     </ProductListPagination.PageSize>
+ *   );
+ * }
+ * ```
+ */
+export function PageSize(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    const currentLimit = service.currentLimit.get();
+    const setLimit = service.setLimit;
+    return typeof props.children === "function"
+        ? props.children({ currentLimit, setLimit })
+        : props.children;
+}
+/**
+ * Headless component for navigating to the next page
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function NextPageButton() {
+ *   return (
+ *     <ProductListPagination.NextPageTrigger>
+ *       {({ nextPage, hasNextPage }) => (
+ *         <button
+ *           onClick={nextPage}
+ *           disabled={!hasNextPage}
+ *           className={hasNextPage ? 'enabled' : 'disabled'}
+ *         >
+ *           Next →
+ *         </button>
+ *       )}
+ *     </ProductListPagination.NextPageTrigger>
+ *   );
+ * }
+ * ```
+ */
+export function NextPageTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    const nextPage = service.nextPage;
+    const hasNextPage = service.hasNextPage.get();
+    return typeof props.children === "function"
+        ? props.children({ nextPage, hasNextPage })
+        : props.children;
+}
+/**
+ * Headless component for navigating to the previous page
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function PrevPageButton() {
+ *   return (
+ *     <ProductListPagination.PreviousPageTrigger>
+ *       {({ prevPage, hasPrevPage }) => (
+ *         <button
+ *           onClick={prevPage}
+ *           disabled={!hasPrevPage}
+ *           className={hasPrevPage ? 'enabled' : 'disabled'}
+ *         >
+ *           ← Previous
+ *         </button>
+ *       )}
+ *     </ProductListPagination.PreviousPageTrigger>
+ *   );
+ * }
+ * ```
+ */
+export function PreviousPageTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    const prevPage = service.prevPage;
+    const hasPrevPage = service.hasPrevPage.get();
+    return typeof props.children === "function"
+        ? props.children({ prevPage, hasPrevPage })
+        : props.children;
+}
+/**
+ * Headless component for navigating to the first page
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function FirstPageButton() {
+ *   return (
+ *     <ProductListPagination.FirstPageTrigger>
+ *       {({ goToFirstPage, hasPrevPage }) => (
+ *         <button
+ *           onClick={goToFirstPage}
+ *           disabled={!hasPrevPage}
+ *           title="Go to first page"
+ *         >
+ *           ⏮ First
+ *         </button>
+ *       )}
+ *     </ProductListPagination.FirstPageTrigger>
+ *   );
+ * }
+ * ```
+ */
+export function FirstPageTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    const goToFirstPage = service.goToFirstPage;
+    const hasPrevPage = service.hasPrevPage.get();
+    return typeof props.children === "function"
+        ? props.children({ goToFirstPage, hasPrevPage })
+        : props.children;
+}
+/**
+ * Headless component for loading more products (infinite scroll pattern)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListPagination } from '@wix/stores/components';
+ *
+ * function LoadMoreButton() {
+ *   return (
+ *     <ProductListPagination.LoadMoreTrigger>
+ *       {({ loadMore, hasMoreProducts, isLoading }) => (
+ *         <button
+ *           onClick={() => loadMore(10)}
+ *           disabled={!hasMoreProducts || isLoading}
+ *           className="load-more-btn"
+ *         >
+ *           {isLoading ? 'Loading...' : hasMoreProducts ? 'Load More' : 'No More Products'}
+ *         </button>
+ *       )}
+ *     </ProductListPagination.LoadMoreTrigger>
+ *   );
+ * }
+ * ```
+ */
+export function LoadMoreTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    const productsListService = useService(ProductsListServiceDefinition);
+    const loadMore = service.loadMore;
+    const hasMoreProducts = service.hasNextPage.get();
+    const isLoading = productsListService.isLoading.get();
+    return typeof props.children === "function"
+        ? props.children({ loadMore, hasMoreProducts, isLoading })
+        : props.children;
+}