@wix/headless-stores 0.0.52 → 0.0.54

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

@@ -0,0 +1,98 @@
+import { type CategoryServiceConfig } from '../../services/category-service.js';
+export interface RootProps {
+    children: React.ReactNode;
+    categoryServiceConfig: CategoryServiceConfig;
+}
+/**
+ * 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 { CategoryCore } 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: RootProps): React.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) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for Name component
+ */
+export interface NameRenderProps {
+    /** Category name */
+    name: string;
+}
+/**
+ * Headless component for category name display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryCore } from '@wix/stores/components';
+ *
+ * function CategoryHeader() {
+ *   return (
+ *     <Category.Name>
+ *       {({ name }) => (
+ *         <h1 className="category-title">{name}</h1>
+ *       )}
+ *     </Category.Name>
+ *   );
+ * }
+ * ```
+ */
+export declare function Name(props: NameProps): import("react").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) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for Slug component
+ */
+export interface SlugRenderProps {
+    /** Category slug */
+    slug: string;
+}
+/**
+ * Headless component for category slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryCore } from '@wix/stores/components';
+ *
+ * function CategoryInfo() {
+ *   return (
+ *     <Category.Slug>
+ *       {({ slug }) => (
+ *         <p className="category-slug">Category slug: {slug}</p>
+ *       )}
+ *     </Category.Slug>
+ *   );
+ * }
+ * ```
+ */
+export declare function Slug(props: SlugProps): import("react").ReactNode;

package/dist/react/core/Category.js

@@ -0,0 +1,81 @@
+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';
+/**
+ * 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 { CategoryCore } 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 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 { CategoryCore } 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 { CategoryCore } 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/dist/react/core/CategoryList.d.ts

@@ -0,0 +1,185 @@
+import { type CategoriesListServiceConfig } from '../../services/categories-list-service.js';
+import { type Category } from '../../services/category-service.js';
+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.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryListCore } 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: RootProps): React.ReactNode;
+/**
+ * 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): import("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): import("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): import("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;

package/dist/react/core/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 { CategoryListCore } 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 { 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 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 { 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 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 { 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 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 { 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 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 → dist/react/core}/PayNow.js

@@ -1,5 +1,5 @@
-import { useService } from "@wix/services-manager-react";
-import { PayNowServiceDefinition } from "../services/pay-now-service.js";
+import { useService } from '@wix/services-manager-react';
+import { PayNowServiceDefinition } from '../../services/pay-now-service.js';
 /**
  * A headless component that provides pay now functionality using the render props pattern.
  *

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

@@ -0,0 +1,148 @@
+import { ProductServiceConfig } from '../../services/product-service.js';
+import type { V3Product, ProductMedia } from '@wix/auto_sdk_stores_products-v-3';
+export interface RootProps {
+    children: React.ReactNode;
+    productServiceConfig: ProductServiceConfig;
+}
+/**
+ * Root component that provides the Product service context to its children.
+ * This component sets up the necessary services for rendering and managing a single product's data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductPage() {
+ *   return (
+ *     <Product.Root productServiceConfig={{ product: myProduct }}>
+ *       <div>
+ *         <Product.Name>
+ *           {({ name }) => (
+ *             <h1
+ *               className="text-4xl font-bold text-content-primary mb-4"
+ *               data-testid="product-name"
+ *             >
+ *               {name}
+ *             </h1>
+ *           )}
+ *         </Product.Name>
+ *       </div>
+ *     </Product.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for ProductName headless component
+ */
+export interface ProductNameProps {
+    /** Render prop function that receives product name data */
+    children: (props: ProductNameRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductName component
+ */
+export interface ProductNameRenderProps {
+    /** Product name */
+    name: string;
+}
+/**
+ * Headless component for product name display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductHeader() {
+ *   return (
+ *     <Product.Name>
+ *       {({ name }) => (
+ *         <h1>{name}</h1>
+ *       )}
+ *     </Product.Name>
+ *   );
+ * }
+ * ```
+ */
+export declare function Name(props: ProductNameProps): import("react").ReactNode;
+/**
+ * Props for ProductDescription headless component
+ */
+export interface ProductDescriptionProps {
+    /** Render prop function that receives product description data */
+    children: (props: ProductDescriptionRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductDescription component
+ */
+export interface ProductDescriptionRenderProps {
+    /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
+    description: NonNullable<V3Product['description']>;
+    /** Product description with plain html */
+    plainDescription: NonNullable<V3Product['plainDescription']>;
+}
+/**
+ * Render props for ProductDescription component
+ */
+export interface ProductDescriptionRenderProps {
+    /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
+    description: NonNullable<V3Product['description']>;
+    /** Product description with plain html */
+    plainDescription: NonNullable<V3Product['plainDescription']>;
+}
+/**
+ * Headless component for product description display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductDescription() {
+ *   return (
+ *     <Product.Description>
+ *       {({ plainDescription, description }) => (
+ *         <div>
+ *           {plainDescription && (
+ *             <div
+ *               dangerouslySetInnerHTML={{
+ *                 __html: plainDescription,
+ *               }}
+ *             />
+ *           )}
+ *           {description && (
+ *             <div>Rich content description available</div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Product.Description>
+ *   );
+ * }
+ * ```
+ */
+export declare function Description(props: ProductDescriptionProps): import("react").ReactNode;
+export interface ProductMediaProps {
+    children: (props: ProductMediaRenderProps) => React.ReactNode;
+}
+export interface ProductMediaRenderProps {
+    media: ProductMedia[];
+}
+export declare function Media(props: ProductMediaProps): import("react").ReactNode;
+export interface ProductProps {
+    children: (props: ProductRenderProps) => React.ReactNode;
+}
+export interface ProductRenderProps {
+    product: V3Product;
+}
+export declare function Content(props: ProductProps): import("react").ReactNode;
+export interface LoadingProps {
+    children: (props: LoadingRenderProps) => React.ReactNode;
+}
+export interface LoadingRenderProps {
+    isLoading: boolean;
+}
+export declare function Loading(props: LoadingProps): import("react").ReactNode;