@wix/headless-stores 0.0.0

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

@@ -0,0 +1,416 @@
+import { type ConnectedModifier, type ConnectedModifierChoice } from '@wix/auto_sdk_stores_products-v-3';
+export interface RootProps {
+    children: React.ReactNode;
+}
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, select }) => (
+ *                                     <button
+ *                                       onClick={select}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Modifiers headless component
+ */
+export interface ModifiersProps {
+    /** Render prop function that receives modifiers data */
+    children: (props: ModifiersRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Modifiers component
+ */
+export interface ModifiersRenderProps {
+    /** Array of product modifiers */
+    modifiers: ConnectedModifier[];
+    /** Whether product has modifiers */
+    hasModifiers: boolean;
+    /** Currently selected modifier values */
+    selectedModifiers: Record<string, any>;
+    /** Whether all required modifiers are filled */
+    areAllRequiredModifiersFilled: boolean;
+}
+/**
+ * Headless component for all product modifiers
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ModifiersSelector() {
+ *   return (
+ *     <ProductModifiers.Modifiers>
+ *       {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *         <div>
+ *           {hasModifiers && (
+ *             <div>
+ *               <h3>Customize your product</h3>
+ *               {modifiers.map(modifier => (
+ *                 <div key={modifier.id}>
+ *                   <label>{modifier.name}</label>
+ *                   {modifier.required && <span>*</span>}
+ *                   {modifier.choices?.map(choice => (
+ *                     <label key={choice.id}>
+ *                       <input
+ *                         type={modifier.multiple ? 'checkbox' : 'radio'}
+ *                         name={modifier.id}
+ *                         value={choice.id}
+ *                         checked={selectedModifiers[modifier.id] === choice.id}
+ *                       />
+ *                       {choice.description} (+{choice.priceChange?.price})
+ *                     </label>
+ *                   ))}
+ *                 </div>
+ *               ))}
+ *               {!areAllRequiredModifiersFilled && (
+ *                 <div className="warning">Please fill all required options</div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.Modifiers>
+ *   );
+ * }
+ * ```
+ */
+export declare function Modifiers(props: ModifiersProps): import("react").ReactNode;
+/**
+ * Props for Modifier headless component
+ */
+export interface ModifierProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Render prop function that receives modifier data */
+    children: (props: ModifierRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Modifier component
+ */
+export interface ModifierRenderProps {
+    /** Modifier name */
+    name: string;
+    /** Modifier type */
+    type: any;
+    /** Whether this modifier is mandatory */
+    mandatory: boolean;
+    /** Array of choices for this modifier (for choice-based modifiers) */
+    choices: ConnectedModifierChoice[];
+    /** Currently selected value for this modifier */
+    selectedValue: any;
+    /** Whether this modifier has choices */
+    hasChoices: boolean;
+    /** Whether this modifier is a free text type */
+    isFreeText: boolean;
+    /** Maximum characters for free text */
+    maxChars?: number;
+    /** Placeholder text for free text */
+    placeholder?: string;
+}
+/**
+ * Headless component for a specific product modifier
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ModifierField({ modifier }) {
+ *   return (
+ *     <ProductModifiers.Modifier modifier={modifier}>
+ *       {({ name, mandatory, hasChoices, choices, selectedValue, isFreeText, placeholder, maxChars }) => (
+ *         <div className="modifier-field">
+ *           <label>
+ *             {name} {mandatory && <span className="required">*</span>}
+ *           </label>
+ *           {hasChoices && (
+ *             <div className="choices">
+ *               {choices.map(choice => (
+ *                 <label key={choice.id}>
+ *                   <input
+ *                     type="radio"
+ *                     name={name}
+ *                     value={choice.name}
+ *                     checked={selectedValue?.choiceValue === choice.name}
+ *                   />
+ *                   {choice.description} (+{choice.priceChange?.price || '0'})
+ *                 </label>
+ *               ))}
+ *             </div>
+ *           )}
+ *           {isFreeText && (
+ *             <input
+ *               type="text"
+ *               placeholder={placeholder}
+ *               maxLength={maxChars}
+ *               value={selectedValue?.freeTextValue || ''}
+ *             />
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.Modifier>
+ *   );
+ * }
+ * ```
+ */
+export declare function Modifier(props: ModifierProps): import("react").ReactNode;
+/**
+ * Props for ModifierChoice headless component
+ */
+export interface ChoiceProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Choice data */
+    choice: ConnectedModifierChoice;
+    /** Render prop function that receives choice data */
+    children: (props: ChoiceRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ModifierChoice component
+ */
+export interface ChoiceRenderProps {
+    /** Choice value to display */
+    value: string;
+    /** Choice description (for color options) */
+    description: string | undefined;
+    /** Whether this choice is currently selected */
+    isSelected: boolean;
+    /** Function to select this choice */
+    select: () => void;
+    /** Modifier name */
+    modifierName: string;
+    /** Choice value */
+    choiceValue: string;
+    /** Color code for swatch choices */
+    colorCode?: string;
+}
+/**
+ * Headless component for individual modifier choice selection
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ModifierChoiceButton({ modifier, choice }) {
+ *   return (
+ *     <ProductModifiers.Choice modifier={modifier} choice={choice}>
+ *       {({ value, description, isSelected, select, colorCode }) => (
+ *         <button
+ *           onClick={select}
+ *           className={`choice-button ${isSelected ? 'selected' : ''}`}
+ *           style={colorCode ? { backgroundColor: colorCode } : {}}
+ *         >
+ *           {colorCode ? (
+ *             <div className="color-swatch" title={value} />
+ *           ) : (
+ *             <span>{value}</span>
+ *           )}
+ *           {description && <span className="description">{description}</span>}
+ *         </button>
+ *       )}
+ *     </ProductModifiers.Choice>
+ *   );
+ * }
+ * ```
+ */
+export declare function Choice(props: ChoiceProps): import("react").ReactNode;
+/**
+ * Props for ModifierFreeText headless component
+ */
+export interface FreeTextProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Render prop function that receives free text data */
+    children: (props: FreeTextRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ModifierFreeText component
+ */
+export interface FreeTextRenderProps {
+    /** Current text value */
+    value: string;
+    /** Function to update text value */
+    setText: (value: string) => void;
+    /** Whether this modifier is mandatory */
+    mandatory: boolean;
+    /** Maximum characters allowed */
+    maxChars?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Character count */
+    charCount: number;
+    /** Whether character limit is exceeded */
+    isOverLimit: boolean;
+    /** Modifier name */
+    modifierName: string;
+}
+/**
+ * Headless component for free text modifier input
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function FreeTextModifier({ modifier }) {
+ *   return (
+ *     <ProductModifiers.FreeText modifier={modifier}>
+ *       {({ value, setText, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
+ *         <div className="free-text-modifier">
+ *           <label>
+ *             {modifierName} {mandatory && <span className="required">*</span>}
+ *           </label>
+ *           <textarea
+ *             value={value}
+ *             setText={(e) => setText(e.target.value)}
+ *             placeholder={placeholder}
+ *             maxLength={maxChars}
+ *             className={isOverLimit ? 'over-limit' : ''}
+ *           />
+ *           {maxChars && (
+ *             <div className={`char-count ${isOverLimit ? 'over-limit' : ''}`}>
+ *               {charCount}/{maxChars}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.FreeText>
+ *   );
+ * }
+ * ```
+ */
+export declare function FreeText(props: FreeTextProps): import("react").ReactNode;
+/**
+ * Props for ModifierToggleFreeText headless component
+ */
+export interface ToggleFreeTextProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Render prop function that receives toggle data */
+    children: (props: ToggleFreeTextRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ModifierToggleFreeText component
+ */
+export interface ToggleFreeTextRenderProps {
+    /** Whether the text input is shown */
+    isTextInputShown: boolean;
+    /** Function to toggle text input visibility */
+    toggle: () => void;
+    /** Whether this modifier is mandatory */
+    mandatory: boolean;
+    /** Modifier name */
+    modifierName: string;
+}
+/**
+ * Headless component for toggling free text modifier input
+ * Used for optional free text modifiers where a checkbox shows/hides the input
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ToggleFreeTextModifier({ modifier }) {
+ *   return (
+ *     <ProductModifiers.ToggleFreeText modifier={modifier}>
+ *       {({ isTextInputShown, toggle, mandatory, modifierName }) => (
+ *         <div className="toggle-free-text">
+ *           {!mandatory && (
+ *             <label>
+ *               <input
+ *                 type="checkbox"
+ *                 checked={isTextInputShown}
+ *                 onChange={toggle}
+ *               />
+ *               Add {modifierName}
+ *             </label>
+ *           )}
+ *           {isTextInputShown && (
+ *             <ProductModifiers.FreeText modifier={modifier}>
+ *               {(props) => (
+ *                 <textarea
+ *                   value={props.value}
+ *                   onChange={(e) => props.onChange(e.target.value)}
+ *                   placeholder={props.placeholder}
+ *                 />
+ *               )}
+ *             </ProductModifiers.FreeText>
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.ToggleFreeText>
+ *   );
+ * }
+ * ```
+ */
+export declare function ToggleFreeText(props: ToggleFreeTextProps): import("react").ReactNode;