@wix/headless-stores 0.0.52 → 0.0.53

package/dist/react/Choice.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { renderAsChild } from '../utils/index.js';
+import { FreeText as FreeTextPrimitive } from './core/ProductModifiers.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["choiceRoot"] = "choice-root";
+    TestIds["choiceText"] = "choice-text";
+    TestIds["choiceColor"] = "choice-color";
+    TestIds["choiceFreetext"] = "choice-freetext";
+})(TestIds || (TestIds = {}));
+// Create a context for individual choices
+export const ChoiceContext = React.createContext(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 function useChoiceContext() {
+    const context = React.useContext(ChoiceContext);
+    if (!context) {
+        throw new Error('useChoiceContext must be used within a Choice context provider (Option.ChoiceRepeater)');
+    }
+    return context;
+}
+/**
+ * Root component that consumes ChoiceContext provided by Option.ChoiceRepeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Choice.Root>
+ *   <Choice.Text />
+ *   <Choice.Color />
+ * </Choice.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children } = props;
+    const choiceContext = React.useContext(ChoiceContext);
+    if (!choiceContext) {
+        return null; // Should be used within Option.ChoiceRepeater
+    }
+    const { choice } = choiceContext;
+    const attributes = {
+        'data-testid': TestIds.choiceRoot,
+        'data-type': choice?.type,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * 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 const Text = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const choiceContext = React.useContext(ChoiceContext);
+    if (!choiceContext) {
+        return null; // Should be used within Option.ChoiceRepeater
+    }
+    const { choice, shouldRenderAsText, value, isSelected, select, isVisible, isInStock, isPreOrderEnabled, } = choiceContext;
+    // Only render if this should be rendered as text
+    if (!shouldRenderAsText)
+        return null;
+    // Don't render if not visible (handled by ProductVariantSelector in Root)
+    if (!isVisible)
+        return null;
+    const choiceId = choice?.choiceId || '';
+    const attributes = {
+        'data-testid': TestIds.choiceText,
+        'data-selected': isSelected ? 'true' : 'false',
+        disabled: !isInStock && !isPreOrderEnabled,
+        onClick: select,
+    };
+    if (asChild) {
+        const rendered = renderAsChild({
+            children,
+            props: { id: choiceId, value },
+            ref,
+            content: value,
+            attributes,
+        });
+        if (rendered)
+            return rendered;
+    }
+    return (_jsx("button", { className: className, ...attributes, ref: ref, children: value }));
+});
+/**
+ * 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 const Color = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const choiceContext = React.useContext(ChoiceContext);
+    if (!choiceContext) {
+        return null; // Should be used within Option.ChoiceRepeater
+    }
+    const { choice, shouldRenderAsColor, value, isSelected, select, isVisible, isInStock, isPreOrderEnabled, } = choiceContext;
+    // Only render if this should be rendered as color
+    if (!shouldRenderAsColor)
+        return null;
+    // Don't render if not visible (handled by ProductVariantSelector in Root)
+    if (!isVisible)
+        return null;
+    const { colorCode, choiceId } = choice;
+    const attributes = {
+        'data-testid': TestIds.choiceColor,
+        'data-selected': isSelected ? 'true' : 'false',
+        disabled: !isInStock && !isPreOrderEnabled,
+        onClick: select,
+    };
+    if (asChild) {
+        const rendered = renderAsChild({
+            children,
+            props: {
+                colorCode: colorCode || '',
+                name: value,
+                id: choiceId || '',
+            },
+            ref,
+            content: null,
+            attributes,
+        });
+        if (rendered)
+            return rendered;
+    }
+    return (_jsx("button", { className: className, ...attributes, ref: ref, style: { backgroundColor: colorCode }, title: value }));
+});
+/**
+ * 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 const FreeText = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const choiceContext = React.useContext(ChoiceContext);
+    if (!choiceContext) {
+        return null; // Should be used within Option.ChoiceRepeater
+    }
+    const { choice, shouldRenderAsFreeText, onValueChange, isVisible, isSelected, } = choiceContext;
+    // Only render if this should be rendered as free text
+    if (!shouldRenderAsFreeText)
+        return null;
+    // Don't render if not visible (handled by ProductVariantSelector in Root)
+    if (!isVisible)
+        return null;
+    const attributes = {
+        'data-testid': TestIds.choiceFreetext,
+        'data-selected': isSelected ? 'true' : 'false',
+    };
+    return (_jsx(FreeTextPrimitive, { modifier: choice, children: ({ value, setText, placeholder, maxChars }) => {
+            const handleChange = (e) => {
+                setText(e.target.value);
+                if (onValueChange) {
+                    onValueChange(e.target.value);
+                }
+            };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: {
+                        minCharCount: choice?.minCharCount,
+                        maxCharCount: choice?.maxCharCount,
+                        defaultAddedPrice: choice?.addedPrice || undefined,
+                        title: choice?.name || undefined,
+                        onChange: handleChange,
+                    },
+                    ref,
+                    content: null,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("textarea", { ref: ref, className: className, placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, ...attributes, onChange: handleChange }));
+        } }));
+});

package/dist/react/Option.d.ts

@@ -0,0 +1,224 @@
+import React from 'react';
+import { type AsChildProps } from '../utils/index.js';
+export interface Option {
+    name: string;
+    choices?: any[];
+    hasChoices?: boolean;
+    type?: string;
+    mandatory?: boolean;
+}
+/**
+ * Root props with asChild support
+ */
+export interface RootProps extends AsChildProps<{
+    option: Option;
+    onValueChange?: (value: string) => void;
+    allowedTypes?: ('color' | 'text' | 'free-text')[];
+}> {
+    option: Option;
+    onValueChange?: (value: string) => void;
+    allowedTypes?: ('color' | 'text' | 'free-text')[];
+}
+/**
+ * Root component that provides context for variant options.
+ * Automatically detects and sets the option type based on the option name and available choices.
+ *
+ * @component
+ *
+ * **Data Attributes**
+ *
+ * - `data-testid="option-root"` - Applied to option container (TestIds.optionRoot)
+ * - `data-type` - The type of the option: 'color' | 'text' | 'free-text'
+ * @example
+ * ```tsx
+ * // Color option (data-type="color")
+ * <Option.Root
+ *   option={{ name: "Color" }}
+ *   onValueChange={(value) => console.log('Selected:', value)}
+ * >
+ *   <Option.Name />
+ *   <Option.Choices>
+ *     <Option.ChoiceRepeater>
+ *       <Choice.Color />
+ *     </Option.ChoiceRepeater>
+ *   </Option.Choices>
+ * </Option.Root>
+ *
+ * // Text option (data-type="text")
+ * <Option.Root
+ *   option={{ name: "Size" }}
+ *   onValueChange={(value) => console.log('Selected:', value)}
+ * >
+ *   <Option.Name />
+ *   <Option.Choices>
+ *     <Option.ChoiceRepeater>
+ *       <Choice.Text />
+ *     </Option.ChoiceRepeater>
+ *   </Option.Choices>
+ * </Option.Root>
+ *
+ * // Free text option (data-type="free-text")
+ * <Option.Root
+ *   option={{ name: "Custom Text" }}
+ *   onValueChange={(value) => console.log('Entered:', value)}
+ * >
+ *   <Option.Name />
+ *   <Option.Choices>
+ *     <Option.ChoiceRepeater>
+ *       <Choice.FreeText />
+ *     </Option.ChoiceRepeater>
+ *   </Option.Choices>
+ * </Option.Root>
+ *
+ * // With allowed types filter
+ * <Option.Root
+ *   option={{ name: "Size" }}
+ *   allowedTypes={['text']}
+ *   onValueChange={(value) => console.log('Selected size:', value)}
+ * >
+ *   <Option.Name />
+ *   <Option.Choices>
+ *     <Option.ChoiceRepeater>
+ *       <Choice.Text />
+ *     </Option.ChoiceRepeater>
+ *   </Option.Choices>
+ * </Option.Root>
+ *
+ * // asChild with react component
+ * <Option.Root
+ *   asChild
+ *   option={{ name: "Color" }}
+ *   onValueChange={(value) => console.log('Selected:', value)}
+ * >
+ *   {React.forwardRef(({option, onValueChange, allowedTypes, ...props}, ref) => (
+ *     <section ref={ref} {...props} className="option-section">
+ *       <h3>Option: {option.name}</h3>
+ *       <p>Allowed types: {allowedTypes.join(', ')}</p>
+ *       {props.children}
+ *     </section>
+ *   ))}
+ * </Option.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+export declare const OptionContext: React.Context<any>;
+/**
+ * Props for Option Name component
+ */
+export interface NameProps extends AsChildProps<{
+    name: string;
+}> {
+}
+/**
+ * Displays the option name.
+ * Follows true Radix pattern - use separate components for each styleable element.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // True Radix pattern - separate components
+ * <div className="flex items-center gap-1">
+ *   <Option.Name className="text-lg font-medium" />
+ *   <Option.MandatoryIndicator className="text-red-500" />
+ * </div>
+ *
+ * // Custom rendering
+ * <Option.Name asChild>
+ *   {React.forwardRef<HTMLElement, { name: string }>(({ name, ...props }, ref) => (
+ *     <h4 ref={ref} {...props} className="text-lg font-medium text-content-primary">
+ *       {name}
+ *     </h4>
+ *   ))}
+ * </Option.Name>
+ * ```
+ */
+export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Option MandatoryIndicator component
+ */
+export interface MandatoryIndicatorProps extends AsChildProps<{
+    mandatory: boolean;
+}> {
+}
+/**
+ * Displays the mandatory indicator (asterisk) when the option is required.
+ * Follows true Radix pattern - separate component for each styleable element.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - only renders if mandatory
+ * <Option.MandatoryIndicator className="text-red-500 ml-1" />
+ *
+ * // Custom rendering
+ * <Option.MandatoryIndicator asChild>
+ *   {React.forwardRef<HTMLElement, { mandatory: boolean }>(({ mandatory, ...props }, ref) => (
+ *     mandatory ? <span ref={ref} {...props} className="text-red-500">*</span> : null
+ *   ))}
+ * </Option.MandatoryIndicator>
+ * ```
+ */
+export declare const MandatoryIndicator: React.ForwardRefExoticComponent<MandatoryIndicatorProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Option Choices component
+ */
+export interface ChoicesProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+}
+/**
+ * Container for the list items with empty state support.
+ * Follows List Container Level pattern (inspired by Product.VariantOptions).
+ *
+ * @component
+ *
+ * **Data Attributes**
+ *
+ * - `data-testid="option-choices"` - Applied to choices container (TestIds.optionChoices)
+ * - `data-type` - The type of the option 'color' | 'text' | 'free-text'
+ *
+ * @example
+ * ```tsx
+ * // Default usage with empty state
+ * <Option.Choices emptyState={<div>No choices available</div>}>
+ *   <Option.ChoiceRepeater>
+ *     <Choice.Text />
+ *     <Choice.Color />
+ *   </Option.ChoiceRepeater>
+ * </Option.Choices>
+ *
+ * // Simple container usage
+ * <Option.Choices emptyState={<div>No choices</div>}>
+ *   <div className="choices-grid">
+ *     <Option.ChoiceRepeater>
+ *       <Choice.Text />
+ *     </Option.ChoiceRepeater>
+ *   </div>
+ * </Option.Choices>
+ * ```
+ */
+export declare const Choices: React.ForwardRefExoticComponent<ChoicesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Option ChoiceRepeater component
+ */
+export interface ChoiceRepeaterProps {
+    children: React.ReactNode;
+}
+/**
+ * Repeater component that renders Choice.Root for each choice.
+ * Inspired by Product.VariantOptionRepeater pattern.
+ *
+ * Now handles ProductVariantSelector.Choice logic and provides ChoiceContext.
+ *
+ * @component
+ *
+ * @example
+ * ```tsx
+ * <Option.ChoiceRepeater>
+ *   <Choice.Text />
+ *   <Choice.Color />
+ *   <Choice.FreeText />
+ * </Option.ChoiceRepeater>
+ * ```
+ */
+export declare const ChoiceRepeater: React.ForwardRefExoticComponent<ChoiceRepeaterProps & React.RefAttributes<HTMLElement>>;