@wix/headless-stores 0.0.0

package/dist/react/ProductList.js

@@ -0,0 +1,368 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sort as SortPrimitive, GenericList, } from '@wix/headless-components/react';
+import { useService } from '@wix/services-manager-react';
+import React from 'react';
+import { ProductsListServiceDefinition } from '../services/products-list-service.js';
+import * as CoreProductList from './core/ProductList.js';
+import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
+import * as CoreProductListFilters from './core/ProductListFilters.js';
+import * as Product from './Product.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["productListRoot"] = "product-list-root";
+    TestIds["productListProducts"] = "product-list-products";
+    TestIds["productListItem"] = "product-list-item";
+    TestIds["productListLoadMore"] = "product-list-load-more";
+    TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
+    TestIds["productListSort"] = "product-list-sort";
+    TestIds["productListFilter"] = "product-list-filter";
+    TestIds["productListFilterResetTrigger"] = "product-list-filter-reset-trigger";
+    TestIds["productListError"] = "product-list-error";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides the ProductList service context for rendering product lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductListPage({ products }) {
+ *   return (
+ *     <ProductList.Root products={products}>
+ *       <ProductList.Products>
+ *         <ProductList.ProductRepeater>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </ProductList.ProductRepeater>
+ *       </ProductList.Products>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, products, productsListConfig, className, variant } = props;
+    const serviceConfig = productsListConfig || {
+        products: products || [],
+        searchOptions: {
+            cursorPaging: { limit: 10 },
+        },
+        pagingMetadata: {
+            count: products?.length || 0,
+        },
+        aggregations: {
+            results: [],
+        }, // Empty aggregation data
+        customizations: [],
+    };
+    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref, variant: variant }) }));
+});
+Root.displayName = 'ProductList.Root';
+/**
+ * Internal component to handle the Root content with service access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className, variant } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const items = productsListService.products.get().map((product) => ({
+        ...product,
+        id: product._id,
+    }));
+    return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, variant: variant, children: children }));
+});
+/**
+ * Raw component that provides direct access to product list data.
+ * Similar to Product.Raw, this should only be used when you need custom access to list data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Raw>
+ *   {({ totalProducts, displayedProducts, isFiltered }) => (
+ *     <div className="text-content-muted">
+ *       Showing {displayedProducts} of {totalProducts} products
+ *       {isFiltered && <span className="ml-2 text-brand-primary">(Filtered)</span>}
+ *     </div>
+ *   )}
+ * </ProductList.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const pagingMetadata = productsListService.pagingMetadata.get();
+    const displayedProducts = products.length;
+    const totalProducts = pagingMetadata.count || products.length;
+    const isFiltered = false; // TODO: Implement filtering detection
+    return typeof children === 'function'
+        ? children({ totalProducts, displayedProducts, isFiltered })
+        : children;
+});
+/**
+ * Container for the product list with empty state support.
+ * Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Products emptyState={<div>No products found</div>}>
+ *   <ProductList.ProductRepeater>
+ *     <Product.Name />
+ *     <Product.Price />
+ *   </ProductList.ProductRepeater>
+ * </ProductList.Products>
+ * ```
+ */
+export const Products = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.productListProducts, ...otherProps, children: children }));
+});
+/**
+ * Repeater component that renders Product.Root for each product.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Supports asChild pattern for advanced layout components like GalleryWrapper.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage
+ * <ProductList.ProductRepeater>
+ *   <Product.Name />
+ *   <Product.Price />
+ * </ProductList.ProductRepeater>
+ *
+ * // AsChild usage with GalleryWrapper
+ * <ProductList.ProductRepeater asChild>
+ *   {({ items, variant, itemWrapper }) => (
+ *     <GalleryWrapper
+ *       items={items}
+ *       variant={variant}
+ *       itemRenderer={(item, index) =>
+ *         itemWrapper({ item, index, children: <>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </> })
+ *       }
+ *     />
+ *   )}
+ * </ProductList.ProductRepeater>
+ * ```
+ */
+export const ProductRepeater = React.forwardRef((props, ref) => {
+    const { children, asChild } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: ({ item: product, children }) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, "data-item-id": product._id, children: children }, product._id)), children: children }));
+});
+/**
+ * Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.LoadMoreTrigger asChild>
+ *   <button>Load More</button>
+ * </ProductList.LoadMoreTrigger>
+ * ```
+ */
+export const LoadMoreTrigger = React.forwardRef((props, ref) => {
+    const { children = _jsx("button", {}), ...otherProps } = props;
+    return (_jsx(GenericList.Actions.LoadMore, { ref: ref, "data-testid": TestIds.productListLoadMore, ...otherProps, children: children }));
+});
+/**
+ * Displays the number of products currently displayed.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.TotalsDisplayed />
+ * // or with asChild
+ * <ProductList.TotalsDisplayed asChild>
+ *   <strong />
+ * </ProductList.TotalsDisplayed>
+ * // or with render function
+ * <ProductList.TotalsDisplayed asChild>
+ *   {({ displayedItems }, ref) => <strong ref={ref}>{displayedItems}</strong>}
+ * </ProductList.TotalsDisplayed>
+ * ```
+ */
+export const TotalsDisplayed = React.forwardRef((props, ref) => {
+    const { children = _jsx("span", {}), ...otherProps } = props;
+    return (_jsx(GenericList.Totals, { ref: ref, "data-testid": TestIds.productListTotalsDisplayed, ...otherProps, children: children }));
+});
+/**
+ * Sort component for product lists that provides sorting functionality.
+ *
+ * This component integrates with the ProductList service to provide predefined sort options
+ * including name (A-Z, Z-A) and price (low to high, high to low). It supports both
+ * controlled rendering via the asChild pattern and default UI rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default select dropdown
+ * <ProductList.Sort />
+ *
+ * // As list of clickable options
+ * <ProductList.Sort as="list" />
+ *
+ * // With custom styling
+ * <ProductList.Sort
+ *   as="select"
+ *   className="custom-sort-select"
+ * />
+ *
+ * // Custom implementation using asChild pattern
+ * <ProductList.Sort asChild>
+ *   {({ currentSort, sortOptions, setSort }) => (
+ *     <div className="custom-sort-container">
+ *       {sortOptions.map((option) => (
+ *         <button
+ *           key={`${option.fieldName}-${option.order}`}
+ *           onClick={() => setSort([{ fieldName: option.fieldName, order: option.order }])}
+ *           className={isCurrentSort(option) ? 'active' : ''}
+ *         >
+ *           {option.label}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </ProductList.Sort>
+ * ```
+ *
+ * @see {@link ProductListSortPrimitive} for the underlying sort logic
+ * @see {@link SortPrimitive.Root} for the primitive sort component
+ */
+export const Sort = React.forwardRef(({ children, className, as, asChild }, ref) => {
+    return (_jsx(ProductListSortPrimitive, { children: ({ currentSort, sortOptions, setSort }) => {
+            if (asChild && children) {
+                return children({ currentSort, sortOptions, setSort });
+            }
+            return (_jsx(SortPrimitive.Root, { ref: ref, value: currentSort, onChange: (value) => {
+                    setSort(value);
+                }, sortOptions: sortOptions, as: as, className: className, "data-testid": TestIds.productListSort }));
+        } }));
+});
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ * This component acts as a provider that integrates with the ProductList service.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Filter.Root className="filter-container">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter.Root>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter.Root asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter.Root>
+ * ```
+ */
+const FilterRoot = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreProductListFilters.FilterRoot, { asChild: asChild, className: className, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListFilter, customElement: children, ...otherProps, children: _jsx("div", { children: children }) }) }));
+});
+FilterRoot.displayName = 'ProductList.Filter';
+export const Filter = {
+    Root: FilterRoot,
+};
+/**
+ * Reset trigger component for clearing all applied filters.
+ * Provides reset functionality and filter state to custom render functions.
+ * Only renders when filters are applied.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.FilterResetTrigger className="reset-filters-btn" />
+ *
+ * // With custom label
+ * <ProductList.FilterResetTrigger label="Clear Filters" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.FilterResetTrigger asChild>
+ *   {React.forwardRef(({resetFilters, isFiltered, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={resetFilters}
+ *       disabled={!isFiltered}
+ *       className="custom-reset-button disabled:opacity-50"
+ *     >
+ *       Reset All Filters
+ *     </button>
+ *   ))}
+ * </ProductList.FilterResetTrigger>
+ * ```
+ */
+export const FilterResetTrigger = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    const label = props.label || 'Reset All Filters';
+    return (_jsx(CoreProductListFilters.ResetTrigger, { children: ({ resetFilters, isFiltered }) => {
+            if (!isFiltered) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: resetFilters, disabled: !isFiltered, "data-testid": TestIds.productListFilterResetTrigger, "data-filtered": isFiltered ? 'true' : 'false', customElement: children, customElementProps: {
+                    resetFilters,
+                    isFiltered,
+                }, content: label, ...otherProps, children: _jsx("button", { disabled: !isFiltered, children: label }) }));
+        } }));
+});
+FilterResetTrigger.displayName = 'ProductList.FilterResetTrigger';
+/**
+ * Error component that displays product list errors.
+ * Provides error data to custom render functions.
+ * Only renders when there's an error.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Error className="error-message" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.Error asChild>
+ *   {React.forwardRef(({error, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="custom-error-container"
+ *     >
+ *       Error: {error}
+ *     </div>
+ *   ))}
+ * </ProductList.Error>
+ * ```
+ */
+export const Error = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreProductList.Error, { children: ({ error }) => {
+            if (!error) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListError, "data-error": error, customElement: children, customElementProps: {
+                    error,
+                }, content: error, ...otherProps, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
+        } }));
+});
+Error.displayName = 'ProductList.Error';

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

@@ -0,0 +1,194 @@
+import React from 'react';
+import { type CategoriesListServiceConfig } from '../../services/categories-list-service.js';
+import { categories } from '@wix/categories';
+export type Category = categories.Category;
+export interface RootProps {
+    children: React.ReactNode;
+    categoriesListConfig: CategoriesListServiceConfig;
+}
+/**
+ * Root component that provides the CategoryList service context to its children.
+ * This component sets up the necessary services for managing categories list state.
+ * Optionally connects to ProductList filtering when connectToProductFilter is enabled.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryListCore } from '@wix/stores/components';
+ *
+ * function CategoriesPage() {
+ *   return (
+ *     <CategoryList.Root
+ *       categoriesListConfig={{ categories: myCategories }}
+ *       connectToProductFilter={true}
+ *     >
+ *       <CategoryList.ItemContent>
+ *         {({ category }) => (
+ *           <div key={category._id}>
+ *             <h2>{category.name}</h2>
+ *           </div>
+ *         )}
+ *       </CategoryList.ItemContent>
+ *     </CategoryList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+export declare namespace Root {
+    var displayName: string;
+}
+/**
+ * Props for EmptyState headless component
+ */
+export interface EmptyStateProps {
+    /** Content to display when categories 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 categories list is empty.
+ * Only displays its children when there are no categories, no loading state, and no errors.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryListCore } from '@wix/stores/components';
+ *
+ * function EmptyCategoriesMessage() {
+ *   return (
+ *     <CategoryList.EmptyState>
+ *       {() => (
+ *         <div className="empty-state">
+ *           <h3>No categories found</h3>
+ *           <p>Categories will appear here once they are created</p>
+ *         </div>
+ *       )}
+ *     </CategoryList.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 categories list is currently loading.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryListCore } from '@wix/stores/components';
+ *
+ * function CategoriesLoading() {
+ *   return (
+ *     <CategoryList.Loading>
+ *       {() => (
+ *         <div className="loading-spinner">
+ *           <div>Loading categories...</div>
+ *           <div className="spinner"></div>
+ *         </div>
+ *       )}
+ *     </CategoryList.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 categories.
+ * Only displays its children when an error has occurred.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryListCore } from '@wix/stores/components';
+ *
+ * function CategoriesError() {
+ *   return (
+ *     <CategoryList.Error>
+ *       {({ error }) => (
+ *         <div className="error-state">
+ *           <h3>Error loading categories</h3>
+ *           <p>{error}</p>
+ *           <button onClick={() => window.location.reload()}>
+ *             Try Again
+ *           </button>
+ *         </div>
+ *       )}
+ *     </CategoryList.Error>
+ *   );
+ * }
+ * ```
+ */
+export declare function Error(props: ErrorProps): React.ReactNode;
+/**
+ * Props for ItemContent headless component
+ */
+export interface ItemContentProps {
+    /** Content to display for each category (can be a render function receiving category data or ReactNode) */
+    children: ((props: ItemContentRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for ItemContent component
+ */
+export interface ItemContentRenderProps {
+    /** Category data */
+    category: Category;
+}
+/**
+ * Component that renders content for each category in the list.
+ * Maps over all categories and provides each category through a service context.
+ * Only renders when categories are successfully loaded (not loading, no error, and has categories).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryListCore } from '@wix/stores/components';
+ *
+ * function CategoriesGrid() {
+ *   return (
+ *     <CategoryList.ItemContent>
+ *       {({ category }) => (
+ *         <div className="category-card">
+ *           <h3>{category.name}</h3>
+ *           <p>{category.description}</p>
+ *           <a href={`/categories/${category.slug}`}>View Category</a>
+ *         </div>
+ *       )}
+ *     </CategoryList.ItemContent>
+ *   );
+ * }
+ * ```
+ */
+export declare function ItemContent(props: ItemContentProps): import("react/jsx-runtime").JSX.Element[] | null;