@wix/headless-stores 0.0.0

package/dist/react/core/ProductListFilters.js

@@ -0,0 +1,242 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService } from '@wix/services-manager-react';
+import { ProductsListServiceDefinition, InventoryStatusType, CategoriesListServiceDefinition, } from '../../services/index.js';
+import { useMemo } from 'react';
+import { Filter as FilterPrimitive, } from '@wix/headless-components/react';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
+// Conversion utilities for platform compatibility
+function getInventoryStatusLabel(status) {
+    switch (status) {
+        case InventoryStatusType.IN_STOCK:
+            return 'In Stock';
+        case InventoryStatusType.OUT_OF_STOCK:
+            return 'Out of Stock';
+        case InventoryStatusType.PARTIALLY_OUT_OF_STOCK:
+            return 'Limited Stock';
+        default:
+            return String(status);
+    }
+}
+function buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice) {
+    // Build consolidated filter options using search field names
+    const filterOptions = [
+        // Price range - use a logical key that maps to both min/max fields
+        {
+            key: 'priceRange',
+            label: 'Price Range',
+            type: 'range',
+            displayType: 'range',
+            validValues: [availableMinPrice, availableMaxPrice],
+            valueFormatter: (value) => `$${value}`,
+            fieldName: [
+                'actualPriceRange.minValue.amount',
+                'actualPriceRange.maxValue.amount',
+            ],
+        },
+        // Product options (colors, sizes, etc.) - individual filters for each option type
+        ...availableOptions.map((option) => ({
+            key: option.id,
+            label: String(option.name),
+            type: 'multi',
+            displayType: option.optionRenderType === 'SWATCH_CHOICES'
+                ? 'color'
+                : 'text',
+            fieldName: 'options.choicesSettings.choices.choiceId',
+            fieldType: 'array',
+            validValues: option.choices.map((choice) => choice.id),
+            valueFormatter: (value) => {
+                const choice = option.choices.find((c) => c.id === value);
+                const name = choice?.name || String(value);
+                return option.optionRenderType === 'SWATCH_CHOICES'
+                    ? name.toLowerCase()
+                    : name;
+            },
+            valueBgColorFormatter: (value) => {
+                const choice = option.choices.find((c) => c.id === value);
+                return choice?.colorCode || null;
+            },
+        })),
+        // Inventory status - use actual search field name
+        {
+            key: 'inventory.availabilityStatus',
+            label: 'Availability',
+            type: 'multi',
+            displayType: 'text',
+            fieldName: 'inventory.availabilityStatus',
+            fieldType: 'singular',
+            validValues: availableInventoryStatuses,
+            valueFormatter: (value) => getInventoryStatusLabel(value),
+        },
+    ];
+    return { filterOptions };
+}
+/**
+ * Headless component for resetting all filters
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList, ProductListFilters } from '@wix/stores/components';
+ *
+ * function ResetFiltersButton() {
+ *   return (
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListFilters.ResetTrigger>
+ *         {({ resetFilters, isFiltered }) => (
+ *           <button
+ *             onClick={resetFilters}
+ *             disabled={!isFiltered}
+ *             className={isFiltered ? 'active' : 'disabled'}
+ *           >
+ *             {isFiltered ? 'Clear Filters' : 'No Filters Applied'}
+ *           </button>
+ *         )}
+ *       </ProductListFilters.ResetTrigger>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export function ResetTrigger(props) {
+    const service = useService(ProductsListServiceDefinition);
+    const resetFilters = service.resetFilter;
+    const isFiltered = service.isFiltered().get();
+    return typeof props.children === 'function'
+        ? props.children({ resetFilters, isFiltered })
+        : props.children;
+}
+export function CategoryFilter(props) {
+    const categoriesService = useService(CategoriesListServiceDefinition);
+    const productListService = useService(ProductsListServiceDefinition);
+    const categories = categoriesService.categories.get();
+    const setSelectedCategory = (category) => {
+        const currentFilter = productListService.searchOptions.get().filter || {};
+        if (!category) {
+            delete currentFilter['allCategoriesInfo.categories'];
+            productListService.setFilter(currentFilter);
+            return;
+        }
+        productListService.setFilter({
+            ...currentFilter,
+            'allCategoriesInfo.categories': {
+                $matchItems: [{ id: { $in: [category._id] } }],
+            },
+        });
+    };
+    const selectedCategoryId = productListService.searchOptions.get().filter['allCategoriesInfo.categories']?.$matchItems?.[0]?.id
+        ?.$in?.[0];
+    const selectedCategory = categories?.find((c) => c._id === selectedCategoryId) || null;
+    return typeof props.children === 'function'
+        ? props.children({ selectedCategory, setSelectedCategory })
+        : props.children;
+}
+/**
+ * Internal component that provides filter data for the Filter component.
+ * Consolidates data from both search and list services.
+ */
+function AllFilters(props) {
+    const listService = useService(ProductsListServiceDefinition);
+    // Get current filter state
+    const currentSearchOptions = listService.searchOptions.get();
+    const currentFilter = currentSearchOptions.filter;
+    // Get available filter data
+    const availableOptions = listService.availableProductOptions.get();
+    const availableInventoryStatuses = listService.availableInventoryStatuses.get();
+    const availableMinPrice = listService.minPrice.get();
+    const availableMaxPrice = listService.maxPrice.get();
+    // Get filter state
+    const resetFilters = listService.resetFilter;
+    const isFiltered = listService.isFiltered().get();
+    // Build filter options and handlers
+    const searchFilterData = useMemo(() => {
+        const { filterOptions } = buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice);
+        const updateFilter = (newFilter) => {
+            listService.setFilter(newFilter);
+        };
+        return {
+            filterValue: currentFilter,
+            filterOptions,
+            updateFilter,
+            clearFilters: resetFilters,
+            hasFilters: isFiltered,
+        };
+    }, [
+        availableOptions,
+        availableInventoryStatuses,
+        availableMinPrice,
+        availableMaxPrice,
+        currentFilter,
+        resetFilters,
+        isFiltered,
+        listService,
+    ]);
+    return typeof props.children === 'function'
+        ? props.children({ searchFilter: searchFilterData })
+        : props.children;
+}
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ *
+ * This component acts as a provider that integrates with the ProductList service to offer
+ * predefined filter options including:
+ * - **Price Range**: Min/max price filtering with currency formatting
+ * - **Product Options**: Dynamic filters for colors, sizes, and other product variants
+ * - **Inventory Status**: Filter by availability (In Stock, Out of Stock, Limited Stock)
+ *
+ * The component automatically extracts available filter options from the current product set
+ * and provides them to child Filter primitive components for rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with styled filter components
+ * <ProductList.Filter>
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter>
+ *
+ * // With reset functionality
+ * <ProductList.Filter className="filters-container">
+ *   <Filter.Action.Clear label="Clear All" />
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ * ```
+ *
+ * @see {@link AllFilters} for the underlying filter data logic
+ * @see {@link FilterPrimitive.Root} for the primitive filter component
+ * @see {@link ResetTrigger} for filter reset functionality
+ */
+export const FilterRoot = React.forwardRef(({ children, className, asChild }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    return (_jsx(AllFilters, { children: ({ searchFilter }) => {
+            return (_jsx(FilterPrimitive.Root, { value: searchFilter.filterValue, onChange: searchFilter.updateFilter, filterOptions: searchFilter.filterOptions, children: _jsx(Comp, { className: className, ref: ref, children: children }) }));
+        } }));
+});
+FilterRoot.displayName = 'ProductList.Filter';

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

@@ -0,0 +1,49 @@
+/**
+ * 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) => React.ReactNode) | React.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 { ProductList, ProductListPagination } from '@wix/stores/components';
+ *
+ * function LoadMoreButton() {
+ *   return (
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <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>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function LoadMoreTrigger(props: LoadMoreTriggerProps): import("react").ReactNode;

package/dist/react/core/ProductListPagination.js

@@ -0,0 +1,41 @@
+import { useService } from '@wix/services-manager-react';
+import { ProductsListServiceDefinition } from '../../services/products-list-service.js';
+/**
+ * Headless component for loading more products (infinite scroll pattern)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList, ProductListPagination } from '@wix/stores/components';
+ *
+ * function LoadMoreButton() {
+ *   return (
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <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>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export function LoadMoreTrigger(props) {
+    const productsListService = useService(ProductsListServiceDefinition);
+    const loadMore = productsListService.loadMore;
+    const hasMoreProducts = productsListService.hasMoreProducts.get();
+    const isLoading = productsListService.isLoading.get();
+    return typeof props.children === 'function'
+        ? props.children({ loadMore, hasMoreProducts, isLoading })
+        : props.children;
+}

package/dist/react/core/ProductListSort.d.ts

@@ -0,0 +1,19 @@
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
+import { productsV3 } from '@wix/stores';
+export interface ProductListSortProps {
+    children: (props: {
+        currentSort: productsV3.V3ProductSearch['sort'];
+        sortOptions: SortPrimitive.SortOption[];
+        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
+    }) => React.ReactNode;
+}
+export declare const ProductListSort: (props: ProductListSortProps) => import("react").ReactNode;
+export interface ProductListSeperateSortProps {
+    children: (props: {
+        currentSort: productsV3.V3ProductSearch['sort'];
+        sortFieldOptions: SortPrimitive.SortOption[];
+        sortOrderOptions: SortPrimitive.SortOption[];
+        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
+    }) => React.ReactNode;
+}
+export declare function ProductListSeperateSort(props: ProductListSeperateSortProps): import("react").ReactNode;

package/dist/react/core/ProductListSort.js

@@ -0,0 +1,52 @@
+import { useService } from '@wix/services-manager-react';
+import { ProductsListServiceDefinition } from '../../services/products-list-service.js';
+export const ProductListSort = (props) => {
+    const productListService = useService(ProductsListServiceDefinition);
+    const currentSort = productListService.searchOptions.get().sort;
+    // Define sort options - primitive handles all conversion logic
+    const sortOptions = [
+        { fieldName: 'name', order: 'ASC', label: 'Name (A-Z)' },
+        { fieldName: 'name', order: 'DESC', label: 'Name (Z-A)' },
+        {
+            fieldName: 'actualPriceRange.minValue.amount',
+            order: 'ASC',
+            label: 'Price: Low to High',
+        },
+        {
+            fieldName: 'actualPriceRange.minValue.amount',
+            order: 'DESC',
+            label: 'Price: High to Low',
+        },
+    ];
+    return props.children({
+        currentSort,
+        sortOptions,
+        setSort: (sort) => {
+            productListService.setSort(sort);
+        },
+    });
+};
+export function ProductListSeperateSort(props) {
+    const productListService = useService(ProductsListServiceDefinition);
+    const currentSort = productListService.searchOptions.get().sort;
+    // Define sort options - primitive handles all conversion logic
+    const sortFieldOptions = [
+        { fieldName: 'name', label: 'Name' },
+        {
+            fieldName: 'actualPriceRange.minValue.amount',
+            label: 'Price',
+        },
+    ];
+    const sortOrderOptions = [
+        { order: 'ASC', label: 'Ascending' },
+        { order: 'DESC', label: 'Descending' },
+    ];
+    return props.children({
+        currentSort,
+        sortFieldOptions,
+        sortOrderOptions,
+        setSort: (sort) => {
+            productListService.setSort(sort);
+        },
+    });
+}