@wix/headless-stores 0.0.35 → 0.0.37

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

@@ -1,45 +1,97 @@
-import { type Category } from "@wix/auto_sdk_categories_categories";
-import React, { type ReactNode } from "react";
-export interface CategoryListProps {
-    children: (data: {
-        categories: Category[];
-        selectedCategory: string | null;
-        setSelectedCategory: (categoryId: string | null) => void;
-    }) => ReactNode;
+import type { PropsWithChildren, ReactNode } from "react";
+import { type CategoryServiceConfig } from "../services/category-service.js";
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category state.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryPage() {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ category: myCategory }}>
+ *       <Category.Name>
+ *         {({ name }) => <h1>{name}</h1>}
+ *       </Category.Name>
+ *       <Category.Slug>
+ *         {({ slug }) => <p>Slug: {slug}</p>}
+ *       </Category.Slug>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    categoryServiceConfig: CategoryServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for Name headless component
+ */
+export interface NameProps {
+    /** Content to display (can be a render function receiving name data or ReactNode) */
+    children: ((props: NameRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for Name component
+ */
+export interface NameRenderProps {
+    /** Category name */
+    name: string;
+}
+/**
+ * Headless component for category name display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryHeader() {
+ *   return (
+ *     <Category.Name>
+ *       {({ name }) => (
+ *         <h1 className="category-title">{name}</h1>
+ *       )}
+ *     </Category.Name>
+ *   );
+ * }
+ * ```
+ */
+export declare function Name(props: NameProps): ReactNode;
+/**
+ * Props for Slug headless component
+ */
+export interface SlugProps {
+    /** Content to display (can be a render function receiving slug data or ReactNode) */
+    children: ((props: SlugRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for Slug component
+ */
+export interface SlugRenderProps {
+    /** Category slug */
+    slug: string;
 }
 /**
- * Headless component for displaying a list of categories
+ * Headless component for category slug display
  *
  * @component
  * @example
  * ```tsx
  * import { Category } from '@wix/stores/components';
  *
- * function CategoryNavigation() {
+ * function CategoryInfo() {
  *   return (
- *     <Category.List>
- *       {({ categories, selectedCategory, setSelectedCategory }) => (
- *         <nav>
- *           <button
- *             onClick={() => setSelectedCategory(null)}
- *             className={selectedCategory === null ? 'active' : ''}
- *           >
- *             All Categories
- *           </button>
- *           {categories.map(category => (
- *             <button
- *               key={category.id}
- *               onClick={() => setSelectedCategory(category.id)}
- *               className={selectedCategory === category.id ? 'active' : ''}
- *             >
- *               {category.name}
- *             </button>
- *           ))}
- *         </nav>
+ *     <Category.Slug>
+ *       {({ slug }) => (
+ *         <p className="category-slug">Category slug: {slug}</p>
  *       )}
- *     </Category.List>
+ *     </Category.Slug>
  *   );
  * }
  * ```
  */
-export declare const List: React.FC<CategoryListProps>;
+export declare function Slug(props: SlugProps): ReactNode;

package/cjs/dist/react/Category.js

@@ -1,48 +1,81 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useService } from "@wix/services-manager-react";
-import { CategoryServiceDefinition } from "../services/category-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createServicesMap } from "@wix/services-manager";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CategoryService, CategoryServiceDefinition, } from "../services/category-service.js";
 /**
- * Headless component for displaying a list of categories
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category state.
  *
+ * @order 1
  * @component
  * @example
  * ```tsx
  * import { Category } from '@wix/stores/components';
  *
- * function CategoryNavigation() {
+ * function CategoryPage() {
  *   return (
- *     <Category.List>
- *       {({ categories, selectedCategory, setSelectedCategory }) => (
- *         <nav>
- *           <button
- *             onClick={() => setSelectedCategory(null)}
- *             className={selectedCategory === null ? 'active' : ''}
- *           >
- *             All Categories
- *           </button>
- *           {categories.map(category => (
- *             <button
- *               key={category.id}
- *               onClick={() => setSelectedCategory(category.id)}
- *               className={selectedCategory === category.id ? 'active' : ''}
- *             >
- *               {category.name}
- *             </button>
- *           ))}
- *         </nav>
+ *     <Category.Root categoryServiceConfig={{ category: myCategory }}>
+ *       <Category.Name>
+ *         {({ name }) => <h1>{name}</h1>}
+ *       </Category.Name>
+ *       <Category.Slug>
+ *         {({ slug }) => <p>Slug: {slug}</p>}
+ *       </Category.Slug>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoryServiceDefinition, CategoryService, props.categoryServiceConfig), children: props.children }));
+}
+/**
+ * Headless component for category name display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryHeader() {
+ *   return (
+ *     <Category.Name>
+ *       {({ name }) => (
+ *         <h1 className="category-title">{name}</h1>
+ *       )}
+ *     </Category.Name>
+ *   );
+ * }
+ * ```
+ */
+export function Name(props) {
+    const categoryService = useService(CategoryServiceDefinition);
+    return typeof props.children === "function"
+        ? props.children({ name: categoryService.category.get().name })
+        : props.children;
+}
+/**
+ * Headless component for category slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryInfo() {
+ *   return (
+ *     <Category.Slug>
+ *       {({ slug }) => (
+ *         <p className="category-slug">Category slug: {slug}</p>
  *       )}
- *     </Category.List>
+ *     </Category.Slug>
  *   );
  * }
  * ```
  */
-export const List = ({ children }) => {
-    const service = useService(CategoryServiceDefinition);
-    const categories = service.categories.get();
-    const selectedCategory = service.selectedCategory.get();
-    return (_jsx(_Fragment, { children: children({
-            selectedCategory,
-            categories,
-            setSelectedCategory: service.setSelectedCategory,
-        }) }));
-};
+export function Slug(props) {
+    const categoryService = useService(CategoryServiceDefinition);
+    return typeof props.children === "function"
+        ? props.children({ slug: categoryService.category.get().slug })
+        : props.children;
+}

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

@@ -0,0 +1,184 @@
+import { type CategoriesListServiceConfig } from "../services/categories-list-service.js";
+import type { PropsWithChildren, ReactNode } from "react";
+import { categories } from "@wix/categories";
+/**
+ * Root component that provides the CategoryList service context to its children.
+ * This component sets up the necessary services for managing categories list state.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } from '@wix/stores/components';
+ *
+ * function CategoriesPage() {
+ *   return (
+ *     <CategoryList.Root categoriesListConfig={{ collectionId: 'my-collection' }}>
+ *       <CategoryList.ItemContent>
+ *         {({ category }) => (
+ *           <div key={category._id}>
+ *             <h2>{category.name}</h2>
+ *           </div>
+ *         )}
+ *       </CategoryList.ItemContent>
+ *     </CategoryList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    categoriesListConfig: CategoriesListServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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) => ReactNode) | 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 { CategoryList } 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): ReactNode;
+/**
+ * Props for Loading headless component
+ */
+export interface LoadingProps {
+    /** Content to display during loading (can be a render function or ReactNode) */
+    children: ((props: LoadingRenderProps) => ReactNode) | 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 { CategoryList } 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): 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) => ReactNode) | 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 { CategoryList } 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): 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) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for ItemContent component
+ */
+export interface ItemContentRenderProps {
+    /** Category data */
+    category: categories.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 { CategoryList } 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;

package/cjs/dist/react/CategoryList.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { createServicesMap } from "@wix/services-manager";
+import { CategoriesListService, CategoriesListServiceDefinition, } from "../services/categories-list-service.js";
+import { Root as CategoryRoot } from "./Category.js";
+/**
+ * Root component that provides the CategoryList service context to its children.
+ * This component sets up the necessary services for managing categories list state.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } from '@wix/stores/components';
+ *
+ * function CategoriesPage() {
+ *   return (
+ *     <CategoryList.Root categoriesListConfig={{ collectionId: 'my-collection' }}>
+ *       <CategoryList.ItemContent>
+ *         {({ category }) => (
+ *           <div key={category._id}>
+ *             <h2>{category.name}</h2>
+ *           </div>
+ *         )}
+ *       </CategoryList.ItemContent>
+ *     </CategoryList.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoriesListServiceDefinition, CategoriesListService, props.categoriesListConfig), children: props.children }));
+}
+/**
+ * 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 { CategoryList } 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 function EmptyState(props) {
+    const { isLoading, error, categories } = useService(CategoriesListServiceDefinition);
+    const isLoadingValue = isLoading.get();
+    const errorValue = error.get();
+    const categoriesValue = categories.get();
+    if (!isLoadingValue && !errorValue && categoriesValue.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 categories list is currently loading.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } 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 function Loading(props) {
+    const { isLoading } = useService(CategoriesListServiceDefinition);
+    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 categories.
+ * Only displays its children when an error has occurred.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } 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 function Error(props) {
+    const { error } = useService(CategoriesListServiceDefinition);
+    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 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 { CategoryList } 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 function ItemContent(props) {
+    const { categories, isLoading, error } = useService(CategoriesListServiceDefinition);
+    const categoriesValue = categories.get();
+    if (isLoading.get() || error.get() || categoriesValue.length === 0) {
+        return null;
+    }
+    return categoriesValue.map((category) => (_jsx(CategoryRoot, { categoryServiceConfig: { category }, children: typeof props.children === "function"
+            ? props.children({
+                category,
+            })
+            : props.children }, category._id)));
+}

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

@@ -67,7 +67,7 @@ export interface ProductNameRenderProps {
  * }
  * ```
  */
-export declare const Name: (props: ProductNameProps) => import("react").ReactNode;
+export declare function Name(props: ProductNameProps): import("react").ReactNode;
 /**
  * Props for ProductDescription headless component
  */
@@ -123,11 +123,11 @@ export interface ProductDescriptionRenderProps {
  * }
  * ```
  */
-export declare const Description: (props: ProductDescriptionProps) => import("react").ReactNode;
+export declare function Description(props: ProductDescriptionProps): import("react").ReactNode;
 export interface ProductMediaProps {
     children: (props: ProductMediaRenderProps) => React.ReactNode;
 }
 export interface ProductMediaRenderProps {
     media: ProductMedia[];
 }
-export declare const Media: (props: ProductMediaProps) => import("react").ReactNode;
+export declare function Media(props: ProductMediaProps): import("react").ReactNode;

package/cjs/dist/react/Product.js

@@ -54,14 +54,14 @@ export function Root(props) {
  * }
  * ```
  */
-export const Name = (props) => {
+export function Name(props) {
     const service = useService(ProductServiceDefinition);
     const product = service.product.get();
     const name = product.name;
     return props.children({
         name,
     });
-};
+}
 /**
  * Headless component for product description display
  *
@@ -92,7 +92,7 @@ export const Name = (props) => {
  * }
  * ```
  */
-export const Description = (props) => {
+export function Description(props) {
     const service = useService(ProductServiceDefinition);
     const product = service.product.get();
     const descriptionRichContent = product.description;
@@ -101,12 +101,12 @@ export const Description = (props) => {
         description: descriptionRichContent,
         plainDescription: plainDescription,
     });
-};
-export const Media = (props) => {
+}
+export function Media(props) {
     const service = useService(ProductServiceDefinition);
     const product = service.product.get();
     const media = product.media?.itemsInfo?.items ?? [];
     return props.children({
         media,
     });
-};
+}

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

@@ -67,4 +67,4 @@ export interface ActionsRenderProps {
  * }
  * ```
  */
-export declare const Actions: (props: ActionsProps) => import("react").ReactNode;
+export declare function Actions(props: ActionsProps): import("react").ReactNode;

package/cjs/dist/react/ProductActions.js

@@ -37,7 +37,7 @@ import { CurrentCartServiceDefinition } from "@wix/headless-ecom/services";
  * }
  * ```
  */
-export const Actions = (props) => {
+export function Actions(props) {
     const variantService = useService(SelectedVariantServiceDefinition);
     const cartService = useService(CurrentCartServiceDefinition);
     // Try to get modifiers service - it may not exist for all products
@@ -101,4 +101,4 @@ export const Actions = (props) => {
         error,
         availableQuantity,
     });
-};
+}