@wix/headless-stores 0.0.0

package/cjs/dist/react/core/ProductList.d.ts

@@ -0,0 +1,235 @@
+import { type ProductsListServiceConfig } from '../../services/products-list-service.js';
+import { productsV3 } from '@wix/stores';
+import { CategoriesListServiceConfig } from '../../services/categories-list-service.js';
+/**
+ * Props for Root headless component
+ */
+export interface RootProps {
+    /** Child components that will have access to the ProductList service */
+    children: React.ReactNode;
+    /** Configuration for the ProductList service */
+    productsListConfig: ProductsListServiceConfig;
+    /** Configuration for the CategoriesList service */
+    categoriesListConfig?: CategoriesListServiceConfig;
+}
+/**
+ * Root component that provides both ProductList and ProductListSearch service contexts to its children.
+ * This component sets up the necessary services for managing products list state, including search,
+ * filtering, sorting, and pagination functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList, ProductListFilters, ProductListSort, ProductListPagination } from '@wix/stores/components';
+ *
+ * function ProductListPage() {
+ *   return (
+ *     <ProductList.Root
+ *       productsListConfig={{
+ *         products: myProducts,
+ *         searchOptions: { query: { search: 'searchTerm' } },
+ *         pagingMetadata: { count: 10, hasNext: true },
+ *         aggregations: {}
+ *       }}
+ *       productsListSearchConfig={{
+ *         customizations: [],
+ *         initialSearchState: { sort: 'name_asc', limit: 20 }
+ *       }}
+ *     >
+ *       <ProductListSort.Options>
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
+ *           <select value={selectedSortOption} onChange={(e) => updateSortOption(e.target.value)}>
+ *             {sortOptions.map(option => <option key={option} value={option}>{option}</option>)}
+ *           </select>
+ *         )}
+ *       </ProductListSort.Options>
+ *
+ *       <ProductListFilters.PriceRange>
+ *         {({ selectedMinPrice, setSelectedMinPrice }) => (
+ *           <input value={selectedMinPrice} onChange={(e) => setSelectedMinPrice(Number(e.target.value))} />
+ *         )}
+ *       </ProductListFilters.PriceRange>
+ *
+ *       <ProductList.ItemContent>
+ *         {({ product }) => (
+ *           <div key={product._id}>
+ *             <h3>{product.name}</h3>
+ *             <p>{product.actualPriceRange?.minValue?.formattedAmount}</p>
+ *           </div>
+ *         )}
+ *       </ProductList.ItemContent>
+ *
+ *       <ProductListPagination.NextPageTrigger>
+ *         {({ nextPage, hasNextPage }) => (
+ *           <button onClick={nextPage} disabled={!hasNextPage}>Next</button>
+ *         )}
+ *       </ProductListPagination.NextPageTrigger>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for EmptyState headless component
+ */
+export interface EmptyStateProps {
+    /** Content to display when products list is empty (can be a render function or ReactNode) */
+    children: ((props: EmptyStateRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for EmptyState component
+ */
+export interface EmptyStateRenderProps {
+}
+/**
+ * Component that renders content when the products list is empty.
+ * Only displays its children when there are no products, no loading state, and no errors.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function EmptyProductsMessage() {
+ *   return (
+ *     <ProductList.EmptyState>
+ *       {() => (
+ *         <div className="empty-state">
+ *           <h3>No products found</h3>
+ *           <p>Try adjusting your search or filter criteria</p>
+ *           <button>Clear Filters</button>
+ *         </div>
+ *       )}
+ *     </ProductList.EmptyState>
+ *   );
+ * }
+ * ```
+ */
+export declare function EmptyState(props: EmptyStateProps): React.ReactNode;
+/**
+ * Props for Loading headless component
+ */
+export interface LoadingProps {
+    /** Content to display during loading (can be a render function or ReactNode) */
+    children: ((props: LoadingRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for Loading component
+ */
+export interface LoadingRenderProps {
+}
+/**
+ * Component that renders content during loading state.
+ * Only displays its children when the products list is currently loading.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductsLoading() {
+ *   return (
+ *     <ProductList.Loading>
+ *       {() => (
+ *         <div className="loading-spinner">
+ *           <div>Loading products...</div>
+ *           <div className="spinner"></div>
+ *         </div>
+ *       )}
+ *     </ProductList.Loading>
+ *   );
+ * }
+ * ```
+ */
+export declare function Loading(props: LoadingProps): React.ReactNode;
+/**
+ * Props for Error headless component
+ */
+export interface ErrorProps {
+    /** Content to display during error state (can be a render function or ReactNode) */
+    children: ((props: ErrorRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for Error component
+ */
+export interface ErrorRenderProps {
+    /** Error message */
+    error: string | null;
+}
+/**
+ * Component that renders content when there's an error loading products.
+ * Only displays its children when an error has occurred.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductsError() {
+ *   return (
+ *     <ProductList.Error>
+ *       {({ error }) => (
+ *         <div className="error-state">
+ *           <h3>Error loading products</h3>
+ *           <p>{error}</p>
+ *           <button onClick={() => window.location.reload()}>
+ *             Try Again
+ *           </button>
+ *         </div>
+ *       )}
+ *     </ProductList.Error>
+ *   );
+ * }
+ * ```
+ */
+export declare function Error(props: ErrorProps): React.ReactNode;
+/**
+ * Props for ItemContent headless component
+ */
+export interface ItemContentProps {
+    /** Content to display for each product (can be a render function receiving product data or ReactNode) */
+    children: ((props: ItemContentRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for ItemContent component
+ */
+export interface ItemContentRenderProps {
+    /** Product data */
+    product: productsV3.V3Product;
+}
+/**
+ * Component that renders content for each product in the list.
+ * Maps over all products and provides each product through a service context.
+ * Only renders when products are successfully loaded (not loading, no error, and has products).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductsGrid() {
+ *   return (
+ *     <ProductList.ItemContent>
+ *       {({ product }) => (
+ *         <div className="product-card">
+ *           <img src={product.media?.main?.image} alt={product.name} />
+ *           <h3>{product.name}</h3>
+ *           <p>{product.actualPriceRange?.minValue?.formattedAmount}</p>
+ *           <button>View Details</button>
+ *         </div>
+ *       )}
+ *     </ProductList.ItemContent>
+ *   );
+ * }
+ * ```
+ */
+export declare function ItemContent(props: ItemContentProps): React.ReactNode;
+export type ItemsProps = {
+    children: ((props: ItemsRenderProps) => React.ReactNode) | React.ReactNode;
+};
+export type ItemsRenderProps = {
+    products: productsV3.V3Product[];
+};
+export declare function Items(props: ItemsProps): import("react").ReactNode;

package/cjs/dist/react/core/ProductList.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { ProductListService, ProductsListServiceDefinition, } from '../../services/products-list-service.js';
+import { ProductService, ProductServiceDefinition, } from '../../services/product-service.js';
+import { CategoriesListService, CategoriesListServiceDefinition, } from '../../services/categories-list-service.js';
+/**
+ * Root component that provides both ProductList and ProductListSearch service contexts to its children.
+ * This component sets up the necessary services for managing products list state, including search,
+ * filtering, sorting, and pagination functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList, ProductListFilters, ProductListSort, ProductListPagination } from '@wix/stores/components';
+ *
+ * function ProductListPage() {
+ *   return (
+ *     <ProductList.Root
+ *       productsListConfig={{
+ *         products: myProducts,
+ *         searchOptions: { query: { search: 'searchTerm' } },
+ *         pagingMetadata: { count: 10, hasNext: true },
+ *         aggregations: {}
+ *       }}
+ *       productsListSearchConfig={{
+ *         customizations: [],
+ *         initialSearchState: { sort: 'name_asc', limit: 20 }
+ *       }}
+ *     >
+ *       <ProductListSort.Options>
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
+ *           <select value={selectedSortOption} onChange={(e) => updateSortOption(e.target.value)}>
+ *             {sortOptions.map(option => <option key={option} value={option}>{option}</option>)}
+ *           </select>
+ *         )}
+ *       </ProductListSort.Options>
+ *
+ *       <ProductListFilters.PriceRange>
+ *         {({ selectedMinPrice, setSelectedMinPrice }) => (
+ *           <input value={selectedMinPrice} onChange={(e) => setSelectedMinPrice(Number(e.target.value))} />
+ *         )}
+ *       </ProductListFilters.PriceRange>
+ *
+ *       <ProductList.ItemContent>
+ *         {({ product }) => (
+ *           <div key={product._id}>
+ *             <h3>{product.name}</h3>
+ *             <p>{product.actualPriceRange?.minValue?.formattedAmount}</p>
+ *           </div>
+ *         )}
+ *       </ProductList.ItemContent>
+ *
+ *       <ProductListPagination.NextPageTrigger>
+ *         {({ nextPage, hasNextPage }) => (
+ *           <button onClick={nextPage} disabled={!hasNextPage}>Next</button>
+ *         )}
+ *       </ProductListPagination.NextPageTrigger>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(CategoriesListServiceDefinition, CategoriesListService, props.categoriesListConfig)
+            .addService(ProductsListServiceDefinition, ProductListService, props.productsListConfig), children: props.children }));
+}
+/**
+ * Component that renders content when the products list is empty.
+ * Only displays its children when there are no products, no loading state, and no errors.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function EmptyProductsMessage() {
+ *   return (
+ *     <ProductList.EmptyState>
+ *       {() => (
+ *         <div className="empty-state">
+ *           <h3>No products found</h3>
+ *           <p>Try adjusting your search or filter criteria</p>
+ *           <button>Clear Filters</button>
+ *         </div>
+ *       )}
+ *     </ProductList.EmptyState>
+ *   );
+ * }
+ * ```
+ */
+export function EmptyState(props) {
+    const { isLoading, error, products } = useService(ProductsListServiceDefinition);
+    const isLoadingValue = isLoading.get();
+    const errorValue = error.get();
+    const productsValue = products.get();
+    if (!isLoadingValue && !errorValue && productsValue.length === 0) {
+        return typeof props.children === 'function'
+            ? props.children({})
+            : props.children;
+    }
+    return null;
+}
+/**
+ * Component that renders content during loading state.
+ * Only displays its children when the products list is currently loading.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductsLoading() {
+ *   return (
+ *     <ProductList.Loading>
+ *       {() => (
+ *         <div className="loading-spinner">
+ *           <div>Loading products...</div>
+ *           <div className="spinner"></div>
+ *         </div>
+ *       )}
+ *     </ProductList.Loading>
+ *   );
+ * }
+ * ```
+ */
+export function Loading(props) {
+    const { isLoading } = useService(ProductsListServiceDefinition);
+    const isLoadingValue = isLoading.get();
+    if (isLoadingValue) {
+        return typeof props.children === 'function'
+            ? props.children({})
+            : props.children;
+    }
+    return null;
+}
+/**
+ * Component that renders content when there's an error loading products.
+ * Only displays its children when an error has occurred.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductsError() {
+ *   return (
+ *     <ProductList.Error>
+ *       {({ error }) => (
+ *         <div className="error-state">
+ *           <h3>Error loading products</h3>
+ *           <p>{error}</p>
+ *           <button onClick={() => window.location.reload()}>
+ *             Try Again
+ *           </button>
+ *         </div>
+ *       )}
+ *     </ProductList.Error>
+ *   );
+ * }
+ * ```
+ */
+export function Error(props) {
+    const { error } = useService(ProductsListServiceDefinition);
+    const errorValue = error.get();
+    if (errorValue) {
+        return typeof props.children === 'function'
+            ? props.children({ error: errorValue })
+            : props.children;
+    }
+    return null;
+}
+/**
+ * Component that renders content for each product in the list.
+ * Maps over all products and provides each product through a service context.
+ * Only renders when products are successfully loaded (not loading, no error, and has products).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductsGrid() {
+ *   return (
+ *     <ProductList.ItemContent>
+ *       {({ product }) => (
+ *         <div className="product-card">
+ *           <img src={product.media?.main?.image} alt={product.name} />
+ *           <h3>{product.name}</h3>
+ *           <p>{product.actualPriceRange?.minValue?.formattedAmount}</p>
+ *           <button>View Details</button>
+ *         </div>
+ *       )}
+ *     </ProductList.ItemContent>
+ *   );
+ * }
+ * ```
+ */
+export function ItemContent(props) {
+    const { products, isLoading, error } = useService(ProductsListServiceDefinition);
+    const productsValue = products.get();
+    if (isLoading.get() || error.get() || productsValue.length === 0) {
+        return null;
+    }
+    return productsValue.map((product) => (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, { product }), children: typeof props.children === 'function'
+            ? props.children({ product })
+            : props.children }, product._id)));
+}
+export function Items(props) {
+    const { products } = useService(ProductsListServiceDefinition);
+    const productsValue = products.get();
+    return typeof props.children === 'function'
+        ? props.children({ products: productsValue })
+        : props.children;
+}

package/cjs/dist/react/core/ProductListFilters.d.ts

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+import { Category } from '@wix/auto_sdk_categories_categories';
+import React from 'react';
+/**
+ * Props for ResetTrigger headless component
+ */
+export interface ResetTriggerProps {
+    /** Content to display (can be a render function receiving reset controls or ReactNode) */
+    children: ((props: ResetTriggerRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for ResetTrigger component
+ */
+export interface ResetTriggerRenderProps {
+    /** Function to reset all filters */
+    resetFilters: () => void;
+    /** Whether any filters are currently applied */
+    isFiltered: boolean;
+}
+/**
+ * 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 declare function ResetTrigger(props: ResetTriggerProps): ReactNode;
+export interface CategoryFilterRenderProps {
+    selectedCategory: Category | null;
+    setSelectedCategory: (category: Category | null) => void;
+}
+export interface CategoryFilterProps {
+    /** Content to display (can be a render function receiving category data or ReactNode) */
+    children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
+}
+export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
+/**
+ * Props for the ProductList Filter component
+ */
+export interface FilterProps {
+    /**
+     * Child components that will have access to filter functionality.
+     * Typically contains Filter primitive components like FilterOptions,
+     * FilterOptionRepeater, etc.
+     */
+    children: ReactNode;
+    /**
+     * When true, the component will not render its own div wrapper but will
+     * delegate rendering to its child component. Useful for custom containers.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * CSS classes to apply to the filter container.
+     * Only used when asChild is false (default).
+     */
+    className?: string;
+}
+/**
+ * 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 declare const FilterRoot: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;