@wix/headless-stores 0.0.0

package/dist/react/core/CategoryList.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { CategoriesListService, CategoriesListServiceDefinition, } from '../../services/categories-list-service.js';
+/**
+ * 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 function Root(props) {
+    const { categoriesListConfig, children } = props;
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoriesListServiceDefinition, CategoriesListService, categoriesListConfig), children: children }));
+}
+Root.displayName = 'CategoryList.Root';
+/**
+ * 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(React.Fragment, { children: typeof props.children === 'function'
+            ? props.children({
+                category,
+            })
+            : props.children }, category._id)));
+}

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

@@ -0,0 +1,225 @@
+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 {
+    mediaItems: ProductMedia[];
+    mainMedia?: 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;
+/**
+ * Props for ProductSlug headless component
+ */
+export interface ProductSlugProps {
+    /** Render prop function that receives product slug data */
+    children: (props: ProductSlugRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductSlug component
+ */
+export interface ProductSlugRenderProps {
+    /** Product slug */
+    slug: string;
+}
+/**
+ * Headless component for product slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugDisplay() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export declare function Slug(props: ProductSlugProps): import("react").ReactNode;
+/**
+ * Props for ProductRibbon headless component
+ */
+export interface ProductRibbonProps {
+    /** Render prop function that receives product ribbon data */
+    children: (props: ProductRibbonRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductRibbon component
+ */
+export interface ProductRibbonRenderProps {
+    /** Product ribbon text */
+    ribbon: string | null;
+    /** Whether the product has a ribbon */
+    hasRibbon: boolean;
+}
+/**
+ * Headless component for product ribbon display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductRibbonDisplay() {
+ *   return (
+ *     <Product.Ribbon>
+ *       {({ ribbon, hasRibbon }) => (
+ *         hasRibbon ? (
+ *           <span className="ribbon-badge">
+ *             {ribbon}
+ *           </span>
+ *         ) : null
+ *       )}
+ *     </Product.Ribbon>
+ *   );
+ * }
+ * ```
+ */
+export declare function Ribbon(props: ProductRibbonProps): import("react").ReactNode;

package/dist/react/core/Product.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { ProductServiceDefinition, ProductService, } from '../../services/product-service.js';
+import { createServicesMap } from '@wix/services-manager';
+/**
+ * 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 function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, props.productServiceConfig), children: props.children }));
+}
+/**
+ * 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 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
+ *
+ * @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 function Description(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const descriptionRichContent = product.description;
+    const plainDescription = product.plainDescription;
+    return props.children({
+        description: descriptionRichContent,
+        plainDescription: plainDescription,
+    });
+}
+export function Media(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const mainMedia = product.media?.main;
+    const mediaItems = product.media?.itemsInfo?.items ?? [];
+    return props.children({
+        mediaItems,
+        mainMedia,
+    });
+}
+export function Content(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    return props.children({
+        product,
+    });
+}
+export function Loading(props) {
+    const service = useService(ProductServiceDefinition);
+    const isLoading = service.isLoading.get();
+    return props.children({
+        isLoading,
+    });
+}
+/**
+ * Headless component for product slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugDisplay() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export function Slug(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const slug = product.slug;
+    return props.children({
+        slug,
+    });
+}
+/**
+ * Headless component for product ribbon display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductRibbonDisplay() {
+ *   return (
+ *     <Product.Ribbon>
+ *       {({ ribbon, hasRibbon }) => (
+ *         hasRibbon ? (
+ *           <span className="ribbon-badge">
+ *             {ribbon}
+ *           </span>
+ *         ) : null
+ *       )}
+ *     </Product.Ribbon>
+ *   );
+ * }
+ * ```
+ */
+export function Ribbon(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const ribbon = product.ribbon?.name || null;
+    const hasRibbon = !!ribbon;
+    return props.children({
+        ribbon,
+        hasRibbon,
+    });
+}