@wix/headless-stores 0.0.36 → 0.0.37

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

@@ -1,10 +1,8 @@
-import { type Category } from "@wix/auto_sdk_categories_categories";
-import React, { type ReactNode } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 import { type CategoryServiceConfig } from "../services/category-service.js";
-import type { PropsWithChildren } from "react";
 /**
  * Root component that provides the Category service context to its children.
- * This component sets up the necessary services for managing category functionality.
+ * This component sets up the necessary services for managing category state.
  *
  * @order 1
  * @component
@@ -12,80 +10,88 @@ import type { PropsWithChildren } from "react";
  * ```tsx
  * import { Category } from '@wix/stores/components';
  *
- * function CategoryNavigation({ categories }) {
+ * function CategoryPage() {
  *   return (
- *     <Category.Root categoryServiceConfig={{ categories }}>
- *       <div>
- *         <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.List>
- *       </div>
+ *     <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;
+    categoryServiceConfig: CategoryServiceConfig;
 }>): import("react/jsx-runtime").JSX.Element;
-export interface CategoryListProps {
-    children: (data: {
-        categories: Category[];
-        selectedCategory: string | null;
-        setSelectedCategory: (categoryId: string | null) => void;
-    }) => ReactNode;
+/**
+ * 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,25 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useService, WixServices } from "@wix/services-manager-react";
-import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createServicesMap } from "@wix/services-manager";
-// Create navigation handler for category URLs
-const handleCategoryChange = (categoryId, category) => {
-    if (typeof window !== "undefined") {
-        let newPath = "/category";
-        if (categoryId !== null) {
-            // Use category slug for URL
-            if (!category?.slug) {
-                console.warn(`Category ${categoryId} has no slug, using category ID as fallback`);
-            }
-            const categorySlug = category?.slug || categoryId;
-            newPath = `/category/${categorySlug}`;
-        }
-        window.history.pushState(null, "Showing Category " + category?.name, newPath);
-    }
-};
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CategoryService, CategoryServiceDefinition, } 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 functionality.
+ * This component sets up the necessary services for managing category state.
  *
  * @order 1
  * @component
@@ -27,88 +12,70 @@ const handleCategoryChange = (categoryId, category) => {
  * ```tsx
  * import { Category } from '@wix/stores/components';
  *
- * function CategoryNavigation({ categories }) {
+ * function CategoryPage() {
  *   return (
- *     <Category.Root categoryServiceConfig={{ categories }}>
- *       <div>
- *         <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.List>
- *       </div>
+ *     <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 ?? {
-                categories: [],
-                initialCategoryId: null,
-            }),
-            onCategoryChange: handleCategoryChange,
-        }), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoryServiceDefinition, CategoryService, props.categoryServiceConfig), children: props.children }));
 }
 /**
- * Headless component for displaying a list of categories
+ * Headless component for category name display
  *
  * @component
  * @example
  * ```tsx
  * import { Category } from '@wix/stores/components';
  *
- * function CategoryNavigation() {
+ * function CategoryHeader() {
  *   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.Name>
+ *       {({ name }) => (
+ *         <h1 className="category-title">{name}</h1>
  *       )}
- *     </Category.List>
+ *     </Category.Name>
  *   );
  * }
  * ```
  */
-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 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.Slug>
+ *   );
+ * }
+ * ```
+ */
+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)));
+}