@wix/headless-stores 0.0.0

package/dist/react/Category.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as CoreProductListFilters from './core/ProductListFilters.js';
+import { DataComponentTags } from '../data-component-tags.js';
+const CategoryContext = React.createContext(null);
+function useCategoryContext() {
+    const context = React.useContext(CategoryContext);
+    if (!context) {
+        throw new Error('useCategoryContext must be used within a Category.Root component');
+    }
+    return context;
+}
+var TestIds;
+(function (TestIds) {
+    TestIds["categoryRoot"] = "category-root";
+    TestIds["categoryItem"] = "category-item";
+    TestIds["categoryTrigger"] = "category-trigger";
+    TestIds["categoryLabel"] = "category-label";
+    TestIds["categoryId"] = "category-id";
+    TestIds["categoryRaw"] = "category-raw";
+    TestIds["categoryFilter"] = "category-filter";
+})(TestIds || (TestIds = {}));
+/**
+ * Root container for a single category item.
+ * This component sets up the necessary services for managing category state
+ * and provides category context to child components.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/headless-stores/react';
+ *
+ * <Category.Root category={category}>
+ *     <Category.Trigger />
+ *     <Category.Label />
+ *     <Category.ID />
+ * </Category.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { category, children } = props;
+    return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
+            // Determine if this category is selected by comparing with selectedCategory
+            const isSelected = selectedCategory?._id === category._id;
+            const contextValue = {
+                category,
+                isSelected,
+                selectedCategory,
+                setSelectedCategory,
+            };
+            return (_jsx(CategoryContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, "data-component-tag": DataComponentTags.categoryRoot, "data-testid": TestIds.categoryRoot, children: children }) }));
+        } }));
+});
+Root.displayName = 'Category.Root';
+/**
+ * Interactive element for selecting or triggering category actions.
+ * Provides category data and selection state to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Category.Trigger className="px-4 py-2 rounded border hover:bg-surface-hover" />
+ *
+ * // Custom rendering with forwardRef
+ * <Category.Trigger asChild>
+ *   {React.forwardRef(({category, isSelected, onSelect, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={onSelect}
+ *       className={`px-4 py-2 rounded transition-colors ${
+ *         isSelected
+ *           ? 'bg-brand-primary text-white'
+ *           : 'border border-surface-subtle hover:bg-surface-hover'
+ *       }`}
+ *     >
+ *       {category.name}
+ *     </button>
+ *   ))}
+ * </Category.Trigger>
+ * ```
+ */
+export const Trigger = React.forwardRef((props, ref) => {
+    const { asChild, children, onSelect, className, ...otherProps } = props;
+    const { category, isSelected, setSelectedCategory } = useCategoryContext();
+    const handleSelect = () => {
+        // Use CategoryFilter's setSelectedCategory function
+        if (isSelected) {
+            // Deselect by passing null
+            setSelectedCategory(null);
+        }
+        else {
+            // Select this category
+            setSelectedCategory(category);
+        }
+        if (onSelect) {
+            onSelect(category);
+        }
+    };
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: handleSelect, "data-testid": TestIds.categoryTrigger, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: {
+            category,
+            isSelected,
+            onSelect: handleSelect,
+        }, content: category.name, ...otherProps, children: _jsx("button", { children: category.name }) }));
+});
+/**
+ * Displays the category name or label.
+ * Provides category name and full category data to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Category.Label className="text-lg font-medium text-content-primary" />
+ *
+ * // Custom rendering with forwardRef
+ * <Category.Label asChild>
+ *   {React.forwardRef(({name, category, ...props}, ref) => (
+ *     <span ref={ref} {...props} className="text-lg font-medium text-content-primary">
+ *       {name}
+ *       {category.numberOfProducts > 0 && (
+ *         <span className="text-sm text-content-muted ml-2">
+ *           ({category.numberOfProducts})
+ *         </span>
+ *       )}
+ *     </span>
+ *   ))}
+ * </Category.Label>
+ * ```
+ */
+export const Label = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { category, isSelected } = useCategoryContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.categoryLabel, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { name: category.name, category }, content: category.name, children: _jsx("span", { children: category.name }) }));
+});
+/**
+ * Provides access to the category ID for advanced use cases.
+ * Typically used for tracking, analytics, or hidden form fields.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage (hidden by default)
+ * <Category.ID className="hidden" />
+ *
+ * // Custom rendering with forwardRef
+ * <Category.ID asChild>
+ *   {React.forwardRef(({id, category, ...props}, ref) => (
+ *     <span
+ *       ref={ref}
+ *       {...props}
+ *       data-category-id={id}
+ *       className="sr-only"
+ *     >
+ *       Category ID: {id}
+ *     </span>
+ *   ))}
+ * </Category.ID>
+ * ```
+ */
+export const ID = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { category, isSelected } = useCategoryContext();
+    const id = category._id || '';
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className || 'sr-only', "data-testid": TestIds.categoryId, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { id, category }, content: id, children: _jsx("span", { children: id }) }));
+});
+/**
+ * Provides access to the full category data for advanced use cases.
+ * Useful for custom implementations that need access to all category properties.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Custom rendering with forwardRef
+ * <Category.Raw asChild>
+ *   {React.forwardRef(({category, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       data-category-id={category._id}
+ *       className="category-raw-data"
+ *     >
+ *       <pre>{JSON.stringify(category, null, 2)}</pre>
+ *     </div>
+ *   ))}
+ * </Category.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { category, isSelected } = useCategoryContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className || 'sr-only', "data-testid": TestIds.categoryRaw, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { category, isSelected }, children: _jsx("span", { children: JSON.stringify(category) }) }));
+});
+/**
+ * Category filter component that provides category selection functionality.
+ * Provides selected category state and selection controls to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <CategoryFilter className="category-filter" />
+ *
+ * // With custom label
+ * <CategoryFilter label="Current Category:" />
+ *
+ * // Custom rendering with forwardRef
+ * <CategoryFilter asChild>
+ *   {React.forwardRef(({selectedCategory, setSelectedCategory, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="custom-category-filter">
+ *       {selectedCategory && (
+ *         <span>Selected: {selectedCategory.name}</span>
+ *       )}
+ *       <button onClick={() => setSelectedCategory(null)}>
+ *         Clear Selection
+ *       </button>
+ *     </div>
+ *   ))}
+ * </CategoryFilter>
+ * ```
+ */
+export const CategoryFilter = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const label = props.label || 'Selected:';
+    return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.categoryFilter, "data-selected": selectedCategory ? 'true' : 'false', customElement: children, customElementProps: {
+                    selectedCategory,
+                    setSelectedCategory,
+                }, children: _jsx("div", { children: selectedCategory && (_jsxs("span", { children: [label, " ", selectedCategory.name] })) }) }));
+        } }));
+});
+CategoryFilter.displayName = 'CategoryFilter';

package/dist/react/CategoryList.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+import { type Category as CategoryType } from './Category.js';
+import { type CategoriesListServiceConfig } from '../services/categories-list-service.js';
+/**
+ * Props for CategoryList.Root component
+ */
+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 CategoryList.Loading component
+ */
+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;
+}
+/**
+ * Props for CategoryList.CategoryRepeater component
+ */
+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;
+}
+/**
+ * Root container that provides category list context to all child components.
+ * This component sets up the necessary services for managing categories list state.
+ * Automatically connects to ProductList filtering when available.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } from '@wix/headless-stores/react';
+ *
+ * function CategoriesPage() {
+ *   return (
+ *     <CategoryList.Root categoriesListConfig={categoriesListConfig}>
+ *       <CategoryList.Loading>Loading...</CategoryList.Loading>
+ *       <CategoryList.CategoryRepeater>
+ *         <Category.Label />
+ *       </CategoryList.CategoryRepeater>
+ *     </CategoryList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: {
+    (props: CategoryListRootProps): React.ReactNode;
+    displayName: string;
+};
+/**
+ * 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/headless-stores/react';
+ *
+ * function CategoriesLoading() {
+ *   return (
+ *     <CategoryList.Loading>
+ *       <div className="loading-spinner">Loading categories...</div>
+ *     </CategoryList.Loading>
+ *   );
+ * }
+ * ```
+ */
+export declare const Loading: React.ForwardRefExoticComponent<CategoryListLoadingProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } from '@wix/headless-stores/react';
+ *
+ * function CategoriesGrid() {
+ *   return (
+ *     <CategoryList.CategoryRepeater maxDepth={3}>
+ *       <Category.Label />
+ *       <Category.ID />
+ *     </CategoryList.CategoryRepeater>
+ *   );
+ * }
+ * ```
+ */
+export declare function CategoryRepeater(props: CategoryListCategoryRepeaterProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/CategoryList.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import * as CoreCategoryList from './core/CategoryList.js';
+import * as Category from './Category.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["categoryListRoot"] = "category-list";
+    TestIds["categoryRepeater"] = "category-repeater";
+})(TestIds || (TestIds = {}));
+/**
+ * Root container that provides category list context to all child components.
+ * This component sets up the necessary services for managing categories list state.
+ * Automatically connects to ProductList filtering when available.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } from '@wix/headless-stores/react';
+ *
+ * function CategoriesPage() {
+ *   return (
+ *     <CategoryList.Root categoriesListConfig={categoriesListConfig}>
+ *       <CategoryList.Loading>Loading...</CategoryList.Loading>
+ *       <CategoryList.CategoryRepeater>
+ *         <Category.Label />
+ *       </CategoryList.CategoryRepeater>
+ *     </CategoryList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = (props) => {
+    const { categories, categoriesListConfig, children, emptyState } = props;
+    // Create service config, prioritizing categoriesListConfig, then categories prop
+    const serviceConfig = categoriesListConfig || (categories ? { categories } : { categories: [] });
+    return (_jsx(CoreCategoryList.Root, { categoriesListConfig: serviceConfig, children: _jsxs(AsChildSlot, { "data-testid": TestIds.categoryListRoot, "data-component-tag": DataComponentTags.categoryListRoot, children: [children, emptyState && (_jsx(CoreCategoryList.EmptyState, { children: emptyState }))] }) }));
+};
+Root.displayName = 'CategoryList.Root';
+/**
+ * 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/headless-stores/react';
+ *
+ * function CategoriesLoading() {
+ *   return (
+ *     <CategoryList.Loading>
+ *       <div className="loading-spinner">Loading categories...</div>
+ *     </CategoryList.Loading>
+ *   );
+ * }
+ * ```
+ */
+export const Loading = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreCategoryList.Loading, { children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, children: _jsx("h1", { children: "Loading..." }) }) }));
+});
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CategoryList } from '@wix/headless-stores/react';
+ *
+ * function CategoriesGrid() {
+ *   return (
+ *     <CategoryList.CategoryRepeater maxDepth={3}>
+ *       <Category.Label />
+ *       <Category.ID />
+ *     </CategoryList.CategoryRepeater>
+ *   );
+ * }
+ * ```
+ */
+export function CategoryRepeater(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, { category: category, children: children }, category._id));
+        } }));
+}

package/dist/react/Choice.d.ts

@@ -0,0 +1,211 @@
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+/**
+ * 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 {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        id: string;
+        value: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: 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 {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        colorCode: string;
+        name: string;
+        id: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: 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 Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        minCharCount?: number;
+        maxCharCount?: number;
+        defaultAddedPrice?: string | null;
+        title?: string;
+        value?: string;
+        onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * 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>>;