@wix/headless-stores 0.0.52 → 0.0.53

package/dist/react/CategoryList.d.ts

@@ -1,185 +1,103 @@
-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;
-}
+import React from 'react';
+import { type Category as CategoryType } from '../services/category-service.js';
+import { type CategoriesListServiceConfig } 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.
- *
- * @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>
- *   );
- * }
- * ```
+ * Props for CategoryList.Root component
  */
-export declare function Root(props: RootProps): React.ReactNode;
+export interface CategoryListRootProps {
+    /** Optional categories array to initialize the service with */
+    categories?: CategoryType[];
+    /** Configuration for the categories list service */
+    categoriesListConfig?: CategoriesListServiceConfig;
+    /** Child components */
+    children: React.ReactNode;
+    /** Optional empty state content to display when no categories are available */
+    emptyState?: React.ReactNode;
+}
 /**
- * Props for EmptyState headless component
+ * Props for CategoryList.Loading 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;
+export interface CategoryListLoadingProps {
+    /** Child content to display during loading */
+    children?: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
- * Render props for EmptyState component
+ * Props for CategoryList.CategoryRepeater component
  */
-export interface EmptyStateRenderProps {
+export interface CategoryListCategoryRepeaterProps {
+    /** Child components to repeat for each category */
+    children: React.ReactNode;
+    /** Maximum nesting depth for hierarchical categories */
+    maxDepth?: number;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
- * 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.
+ * Root container that provides category list context to all child components.
+ * This component sets up the necessary services for managing categories list state.
  *
+ * @order 1
  * @component
  * @example
  * ```tsx
- * import { CategoryList } from '@wix/stores/components';
+ * import { CategoryList } from '@wix/headless-stores/react';
  *
- * function EmptyCategoriesMessage() {
+ * function CategoriesPage() {
  *   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>
+ *     <CategoryList.Root categoriesListConfig={categoriesListConfig}>
+ *       <CategoryList.Loading>Loading...</CategoryList.Loading>
+ *       <CategoryList.CategoryRepeater>
+ *         <Category.Label />
+ *       </CategoryList.CategoryRepeater>
+ *     </CategoryList.Root>
  *   );
  * }
  * ```
  */
-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;
-}
+export declare function Root(props: CategoryListRootProps): React.ReactNode;
 /**
- * Render props for Loading component
- */
-export interface LoadingRenderProps {
-}
-/**
- * Component that renders content during loading state.
+ * Displays loading state while category data is being fetched.
  * Only displays its children when the categories list is currently loading.
  *
  * @component
  * @example
  * ```tsx
- * import { CategoryList } from '@wix/stores/components';
+ * import { CategoryList } from '@wix/headless-stores/react';
  *
  * function CategoriesLoading() {
  *   return (
  *     <CategoryList.Loading>
- *       {() => (
- *         <div className="loading-spinner">
- *           <div>Loading categories...</div>
- *           <div className="spinner"></div>
- *         </div>
- *       )}
+ *       <div className="loading-spinner">Loading categories...</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 { 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): 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;
-}
+export declare const Loading: React.ForwardRefExoticComponent<CategoryListLoadingProps & React.RefAttributes<HTMLDivElement>>;
 /**
- * Component that renders content for each category in the list.
+ * Repeats for each category in the list, providing individual category context.
  * 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).
+ * Only renders when categories are successfully loaded.
  *
  * @component
  * @example
  * ```tsx
- * import { CategoryList } from '@wix/stores/components';
+ * import { CategoryList } from '@wix/headless-stores/react';
  *
  * 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>
+ *     <CategoryList.CategoryRepeater maxDepth={3}>
+ *       <Category.Label />
+ *       <Category.ID />
+ *     </CategoryList.CategoryRepeater>
  *   );
  * }
  * ```
  */
-export declare function ItemContent(props: ItemContentProps): import("react/jsx-runtime").JSX.Element[] | null;
+export declare const CategoryRepeater: React.ForwardRefExoticComponent<CategoryListCategoryRepeaterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/react/CategoryList.js

@@ -1,174 +1,89 @@
-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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import * as CoreCategoryList from './core/CategoryList.js';
+import * as Category from './Category.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["categoryListRoot"] = "category-list";
+    TestIds["categoryRepeater"] = "category-repeater";
+})(TestIds || (TestIds = {}));
 /**
- * Root component that provides the CategoryList service context to its children.
+ * Root container that provides category list context to all child components.
  * This component sets up the necessary services for managing categories list state.
  *
  * @order 1
  * @component
  * @example
  * ```tsx
- * import { CategoryList } from '@wix/stores/components';
+ * import { CategoryList } from '@wix/headless-stores/react';
  *
  * 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 categoriesListConfig={categoriesListConfig}>
+ *       <CategoryList.Loading>Loading...</CategoryList.Loading>
+ *       <CategoryList.CategoryRepeater>
+ *         <Category.Label />
+ *       </CategoryList.CategoryRepeater>
  *     </CategoryList.Root>
  *   );
  * }
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoriesListServiceDefinition, CategoriesListService, props.categoriesListConfig), children: props.children }));
+    const { categories, categoriesListConfig, children, emptyState } = props;
+    // Create service config, prioritizing categoriesListConfig, then categories prop
+    const serviceConfig = categoriesListConfig || (categories ? { categories } : { categories: [] });
+    return (_jsxs(CoreCategoryList.Root, { categoriesListConfig: serviceConfig, "data-testid": TestIds.categoryListRoot, children: [children, emptyState && (_jsx(CoreCategoryList.EmptyState, { children: emptyState }))] }));
 }
 /**
- * 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.
+ * Displays loading state while category data is being fetched.
  * Only displays its children when the categories list is currently loading.
  *
  * @component
  * @example
  * ```tsx
- * import { CategoryList } from '@wix/stores/components';
+ * import { CategoryList } from '@wix/headless-stores/react';
  *
  * function CategoriesLoading() {
  *   return (
  *     <CategoryList.Loading>
- *       {() => (
- *         <div className="loading-spinner">
- *           <div>Loading categories...</div>
- *           <div className="spinner"></div>
- *         </div>
- *       )}
+ *       <div className="loading-spinner">Loading categories...</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;
-}
+export const Loading = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const Comp = asChild && children ? Slot : 'h1';
+    return (_jsx(CoreCategoryList.Loading, { children: _jsx(Comp, { className: className, ref: ref, children: "Loading..." }) }));
+});
 /**
- * Component that renders content for each category in the list.
+ * Repeats for each category in the list, providing individual category context.
  * 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).
+ * Only renders when categories are successfully loaded.
  *
  * @component
  * @example
  * ```tsx
- * import { CategoryList } from '@wix/stores/components';
+ * import { CategoryList } from '@wix/headless-stores/react';
  *
  * 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>
+ *     <CategoryList.CategoryRepeater maxDepth={3}>
+ *       <Category.Label />
+ *       <Category.ID />
+ *     </CategoryList.CategoryRepeater>
  *   );
  * }
  * ```
  */
-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)));
-}
+export const CategoryRepeater = React.forwardRef((props) => {
+    // const { children, asChild = false, className } = props;
+    const { children } = props;
+    // Note: maxDepth is not implemented yet as it depends on category hierarchy structure
+    return (_jsx(CoreCategoryList.ItemContent, { children: ({ category }) => {
+            return (_jsx(Category.Root, { categoryServiceConfig: { category }, children: children }, category._id));
+        } }));
+});

package/dist/react/Choice.d.ts

@@ -0,0 +1,193 @@
+import React from 'react';
+import { type AsChildProps } from '../utils/index.js';
+/**
+ * Choice data interface
+ */
+export interface Choice {
+    colorCode?: string;
+    choiceId?: string | null;
+    linkedMedia?: any[];
+    type?: 'color' | 'text' | 'free-text';
+    key?: string;
+    name?: string | null;
+    addedPrice?: string | null;
+    minCharCount?: number;
+    maxCharCount?: number;
+}
+/**
+ * Context value interface for individual choice data and behavior
+ */
+export interface ChoiceContextValue {
+    /** The choice data object */
+    choice: Choice;
+    /** Whether this choice should render as text */
+    shouldRenderAsText: boolean;
+    /** Whether this choice should render as color swatch */
+    shouldRenderAsColor: boolean;
+    /** Whether this choice should render as free text input */
+    shouldRenderAsFreeText: boolean;
+    /** Display value for the choice */
+    value: string;
+    /** Whether this choice is currently selected */
+    isSelected: boolean;
+    /** Whether this choice is visible based on current selections */
+    isVisible: boolean;
+    /** Whether this choice is in stock */
+    isInStock: boolean;
+    /** Whether this choice is available for pre-order */
+    isPreOrderEnabled: boolean;
+    /** Function to select this choice */
+    select: () => void;
+    /** Callback for free text value changes */
+    onValueChange?: (value: string) => void;
+}
+export declare const ChoiceContext: React.Context<ChoiceContextValue | null>;
+/**
+ * Hook to access ChoiceContext with proper error handling
+ * @throws {Error} When used outside of a Choice context provider
+ * @returns {ChoiceContextValue} The choice context value
+ */
+export declare function useChoiceContext(): ChoiceContextValue;
+export interface RootProps {
+    children?: React.ReactNode;
+}
+/**
+ * Root component that consumes ChoiceContext provided by Option.ChoiceRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Choice.Root>
+ *   <Choice.Text />
+ *   <Choice.Color />
+ * </Choice.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Choice Text component
+ */
+export interface TextProps extends AsChildProps<{
+    id: string;
+    value: string;
+}> {
+}
+/**
+ * Text-based choice button.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Choice.Text className="px-4 py-2 border rounded-lg" />
+ *
+ * // asChild with primitive
+ * <Choice.Text asChild>
+ *   <button className="px-4 py-2 border rounded-lg" />
+ * </Choice.Text>
+ *
+ * // asChild with react component
+ * <Choice.Text asChild>
+ *   {React.forwardRef(({id, value, ...props}, ref) => (
+ *     <button ref={ref} {...props} className="px-4 py-2 border rounded-lg">
+ *       {value}
+ *     </button>
+ *   ))}
+ * </Choice.Text>
+ * ```
+ *
+ * Data Attributes:
+ * - `data-testid="choice-text"` - Applied to choice buttons
+ * - `data-selected` - Is Choice selected
+ * - `disabled` - Is Choice disabled (not in stock)
+ */
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for Choice Color component
+ */
+export interface ColorProps extends AsChildProps<{
+    colorCode: string;
+    name: string;
+    id: string;
+}> {
+}
+/**
+ * Color swatch choice.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Choice.Color className="w-10 h-10 rounded-full border-4" />
+ *
+ * // asChild with primitive
+ * <Choice.Color asChild>
+ *   <button className="w-10 h-10 rounded-full border-4" />
+ * </Choice.Color>
+ *
+ * // asChild with react component
+ * <Choice.Color asChild>
+ *   {React.forwardRef(({colorCode, name, id, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       className="w-10 h-10 rounded-full border-4"
+ *       style={{ backgroundColor: colorCode }}
+ *       title={name}
+ *     />
+ *   ))}
+ * </Choice.Color>
+ * ```
+ *
+ * Data Attributes:
+ * - `data-testid="choice-color"` - Applied to color swatches
+ * - `data-selected` - Is Choice selected
+ * - `disabled` - Is Choice disabled (not in stock)
+ */
+export declare const Color: React.ForwardRefExoticComponent<ColorProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for Choice FreeText component
+ */
+export interface FreeTextProps extends AsChildProps<{
+    minCharCount?: number;
+    maxCharCount?: number;
+    defaultAddedPrice?: string | null;
+    title?: string;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}>, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+}
+/**
+ * Provides a free text input for variant selection.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Choice.FreeText className="p-3 border rounded-lg" />
+ *
+ * // asChild with primitive
+ * <Choice.FreeText asChild>
+ *   <textarea className="p-3 border rounded-lg" />
+ * </Choice.FreeText>
+ *
+ * // asChild with react component
+ * <Choice.FreeText asChild>
+ *   {React.forwardRef(({value, onChange, title, ...props}, ref) => (
+ *     <textarea
+ *       ref={ref}
+ *       {...props}
+ *       className="p-3 border rounded-lg"
+ *       value={value}
+ *       onChange={onChange}
+ *       placeholder={`Enter custom ${title}...`}
+ *     />
+ *   ))}
+ * </Choice.FreeText>
+ * ```
+ *
+ * Data Attributes:
+ * - `data-testid="choice-free-text"` - Applied to free text input
+ * - `data-selected` - Is Choice selected
+ */
+export declare const FreeText: React.ForwardRefExoticComponent<FreeTextProps & React.RefAttributes<HTMLTextAreaElement>>;