@wix/headless-stores 0.0.30 → 0.0.31

package/dist/react/ProductModifiers.d.ts

@@ -23,6 +23,46 @@ export interface ModifiersRenderProps {
  * 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 const Modifiers: (props: ModifiersProps) => import("react").ReactNode;
 /**
@@ -61,6 +101,47 @@ export interface ModifierRenderProps {
  * 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 const Modifier: (props: ModifierProps) => import("react").ReactNode;
 /**
@@ -97,6 +178,31 @@ export interface ChoiceRenderProps {
  * 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, onSelect, colorCode }) => (
+ *         <button
+ *           onClick={onSelect}
+ *           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 const Choice: (props: ChoiceProps) => import("react").ReactNode;
 /**
@@ -133,6 +239,36 @@ export interface FreeTextRenderProps {
  * 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, onChange, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
+ *         <div className="free-text-modifier">
+ *           <label>
+ *             {modifierName} {mandatory && <span className="required">*</span>}
+ *           </label>
+ *           <textarea
+ *             value={value}
+ *             onChange={(e) => onChange(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 const FreeText: (props: FreeTextProps) => import("react").ReactNode;
 /**
@@ -162,5 +298,41 @@ export interface ToggleFreeTextRenderProps {
  * 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, onToggle, mandatory, modifierName }) => (
+ *         <div className="toggle-free-text">
+ *           {!mandatory && (
+ *             <label>
+ *               <input
+ *                 type="checkbox"
+ *                 checked={isTextInputShown}
+ *                 onChange={onToggle}
+ *               />
+ *               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 const ToggleFreeText: (props: ToggleFreeTextProps) => import("react").ReactNode;

package/dist/react/ProductModifiers.js

@@ -17,6 +17,46 @@ function useModifiersService() {
  * 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 const Modifiers = (props) => {
     const modifiersService = useModifiersService();
@@ -43,6 +83,47 @@ export const Modifiers = (props) => {
  * 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 const Modifier = (props) => {
     const modifiersService = useModifiersService();
@@ -73,6 +154,31 @@ export const Modifier = (props) => {
  * 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, onSelect, colorCode }) => (
+ *         <button
+ *           onClick={onSelect}
+ *           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 const Choice = (props) => {
     const modifiersService = useModifiersService();
@@ -105,6 +211,36 @@ export const Choice = (props) => {
  * 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, onChange, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
+ *         <div className="free-text-modifier">
+ *           <label>
+ *             {modifierName} {mandatory && <span className="required">*</span>}
+ *           </label>
+ *           <textarea
+ *             value={value}
+ *             onChange={(e) => onChange(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 const FreeText = (props) => {
     const modifiersService = useModifiersService();
@@ -139,6 +275,42 @@ export const FreeText = (props) => {
  * 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, onToggle, mandatory, modifierName }) => (
+ *         <div className="toggle-free-text">
+ *           {!mandatory && (
+ *             <label>
+ *               <input
+ *                 type="checkbox"
+ *                 checked={isTextInputShown}
+ *                 onChange={onToggle}
+ *               />
+ *               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 const ToggleFreeText = (props) => {
     const modifiersService = useModifiersService();

package/dist/react/ProductVariantSelector.d.ts

@@ -21,6 +21,33 @@ export interface OptionsRenderProps {
  * Headless component for all product options
  *
  * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function VariantPicker() {
+ *   return (
+ *     <ProductVariantSelector.Options>
+ *       {({ options, hasOptions, selectedChoices }) => (
+ *         <div>
+ *           {hasOptions && options.map(option => (
+ *             <div key={option.id}>
+ *               <label>{option.name}</label>
+ *               <select value={selectedChoices[option.id] || ''}>
+ *                 {option.choices?.map(choice => (
+ *                   <option key={choice.id} value={choice.id}>
+ *                     {choice.description}
+ *                   </option>
+ *                 ))}
+ *               </select>
+ *             </div>
+ *           ))}
+ *         </div>
+ *       )}
+ *     </ProductVariantSelector.Options>
+ *   );
+ * }
+ * ```
  */
 export declare const Options: (props: OptionsProps) => import("react").ReactNode;
 /**
@@ -51,6 +78,32 @@ export interface OptionRenderProps {
  * Headless component for choices within a specific product option
  *
  * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function OptionSelector({ option }) {
+ *   return (
+ *     <ProductVariantSelector.Option option={option}>
+ *       {({ name, choices, selectedValue, hasChoices }) => (
+ *         <div>
+ *           <label>{name}</label>
+ *           {hasChoices && (
+ *             <select value={selectedValue || ''}>
+ *               <option value="">Select {name}</option>
+ *               {choices.map(choice => (
+ *                 <option key={choice.id} value={choice.name}>
+ *                   {choice.description}
+ *                 </option>
+ *               ))}
+ *             </select>
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductVariantSelector.Option>
+ *   );
+ * }
+ * ```
  */
 export declare const Option: (props: OptionProps) => import("react").ReactNode;
 /**
@@ -91,6 +144,27 @@ export interface ChoiceRenderProps {
  * Headless component for individual choice selection
  *
  * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function ChoiceButton({ option, choice }) {
+ *   return (
+ *     <ProductVariantSelector.Choice option={option} choice={choice}>
+ *       {({ value, isSelected, isVisible, isInStock, onSelect }) => (
+ *         <button
+ *           onClick={onSelect}
+ *           disabled={!isVisible || !isInStock}
+ *           className={`choice-btn ${isSelected ? 'selected' : ''} ${!isInStock ? 'out-of-stock' : ''}`}
+ *         >
+ *           {value}
+ *           {!isInStock && ' (Out of Stock)'}
+ *         </button>
+ *       )}
+ *     </ProductVariantSelector.Choice>
+ *   );
+ * }
+ * ```
  */
 export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
 /**
@@ -127,6 +201,32 @@ export interface StockRenderProps {
  * Headless component for product stock status
  *
  * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function StockIndicator() {
+ *   return (
+ *     <ProductVariantSelector.Stock>
+ *       {({ inStock, isPreOrderEnabled, selectedQuantity, availableQuantity, incrementQuantity, decrementQuantity }) => (
+ *         <div>
+ *           <div className={`stock-status ${inStock ? 'in-stock' : 'out-of-stock'}`}>
+ *             {inStock ? 'In Stock' : isPreOrderEnabled ? 'Pre-order Available' : 'Out of Stock'}
+ *           </div>
+ *           {availableQuantity && (
+ *             <div>Only {availableQuantity} left!</div>
+ *           )}
+ *           <div className="quantity-selector">
+ *             <button onClick={decrementQuantity}>-</button>
+ *             <span>{selectedQuantity}</span>
+ *             <button onClick={incrementQuantity}>+</button>
+ *           </div>
+ *         </div>
+ *       )}
+ *     </ProductVariantSelector.Stock>
+ *   );
+ * }
+ * ```
  */
 export declare const Stock: (props: StockProps) => import("react").ReactNode;
 /**
@@ -149,5 +249,23 @@ export interface ResetRenderProps {
  * Headless component for resetting variant selections
  *
  * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function ResetButton() {
+ *   return (
+ *     <ProductVariantSelector.Reset>
+ *       {({ onReset, hasSelections }) => (
+ *         hasSelections && (
+ *           <button onClick={onReset} className="reset-button">
+ *             Clear All Selections
+ *           </button>
+ *         )
+ *       )}
+ *     </ProductVariantSelector.Reset>
+ *   );
+ * }
+ * ```
  */
 export declare const Reset: (props: ResetProps) => import("react").ReactNode;