@q2devel/q2-storybook 1.0.136 → 1.0.137

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -61,10 +61,10 @@ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityCh
61
61
  return (_jsxs("li", { className: `flex py-6 ${isTemporaryRow
62
62
  ? 'opacity-75 bg-gray-50'
63
63
  : ''}`, children: [_jsxs("div", { className: "size-24 shrink-0 overflow-hidden border border-gray-200 relative", children: [_jsx("img", { alt: product
64
- .variation_images[0]
64
+ .all_images[0]
65
65
  ?.alt ||
66
66
  product.variation_name, src: product
67
- .variation_images[0]
67
+ .all_images[0]
68
68
  ?.href ||
69
69
  '/lk_logo.png', className: "size-full object-contain" }), isTemporaryRow && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75", children: _jsx(Spinner, { className: "h-8 w-8 text-[var(--primary)]" }) }))] }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col", children: [_jsx("div", { children: _jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx(Heading, { level: 3, className: "font-extralight text-lg", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), children: product.product_name }), isProcessing &&
70
70
  !isTemporaryRow && (_jsx(Spinner, { className: "h-4 w-4 text-gray-400" }))] }) }), _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions, className: "ml-4 font-light" })] }) }), _jsxs("div", { className: "flex flex-1 items-end justify-between text-sm", children: [isTemporaryRow ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: "h-4 w-4 text-[var(--primary)]" }), _jsx("p", { className: "text-gray-500 italic", children: "Prid\u00E1va sa do ko\u0161\u00EDka..." })] })) : showQuantityControls &&
@@ -27,7 +27,7 @@ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveP
27
27
  const displayQuantity = productKey in pendingUpdates
28
28
  ? pendingUpdates[productKey]
29
29
  : product.quantity;
30
- return (_jsxs("li", { className: "flex py-6", children: [_jsx("div", { className: "shrink-0", children: _jsx("img", { width: 128, height: 128, alt: product.variation_images[0]?.alt, src: product.variation_images[0]?.href, className: "size-24 rounded-md object-contain sm:size-32" }) }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col sm:ml-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Heading, { level: 4, children: _jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), className: "font-medium text-gray-700 hover:text-gray-800", children: product.product_name }) }), _jsx("span", { className: "ml-4 text-sm font-medium text-gray-900", children: _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions }) })] }), product.size && (_jsx("p", { className: "mt-1 text-sm text-gray-500", children: product.size }))] }), _jsxs("div", { className: "mt-4 flex flex-1 items-end justify-between", children: [_jsx("div", { className: "flex items-center space-x-2 text-sm text-gray-700", children: product.inStock !== undefined && (_jsxs(_Fragment, { children: [product.inStock ? (_jsx(CheckIcon, { "aria-hidden": "true", className: "size-5 shrink-0 text-[var(--primary)]" })) : (_jsx(ClockIcon, { "aria-hidden": "true", className: "size-5 shrink-0 text-gray-300" })), _jsx("span", { children: product.inStock
30
+ return (_jsxs("li", { className: "flex py-6", children: [_jsx("div", { className: "shrink-0", children: _jsx("img", { width: 128, height: 128, alt: product.all_images[0]?.alt, src: product.all_images[0]?.href, className: "size-24 rounded-md object-contain sm:size-32" }) }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col sm:ml-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Heading, { level: 4, children: _jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), className: "font-medium text-gray-700 hover:text-gray-800", children: product.product_name }) }), _jsx("span", { className: "ml-4 text-sm font-medium text-gray-900", children: _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions }) })] }), product.size && (_jsx("p", { className: "mt-1 text-sm text-gray-500", children: product.size }))] }), _jsxs("div", { className: "mt-4 flex flex-1 items-end justify-between", children: [_jsx("div", { className: "flex items-center space-x-2 text-sm text-gray-700", children: product.inStock !== undefined && (_jsxs(_Fragment, { children: [product.inStock ? (_jsx(CheckIcon, { "aria-hidden": "true", className: "size-5 shrink-0 text-[var(--primary)]" })) : (_jsx(ClockIcon, { "aria-hidden": "true", className: "size-5 shrink-0 text-gray-300" })), _jsx("span", { children: product.inStock
31
31
  ? 'In stock'
32
32
  : `Will ship in ${product.leadTime}` })] })) }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: () => handleDecrement(product, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
33
33
  ? 'bg-gray-100 cursor-not-allowed opacity-50'
@@ -42,14 +42,26 @@ function CategoryNode({ term, allTerms, level, activeTerm, parentIds, onTermClic
42
42
  if (hasChildren)
43
43
  setIsOpen((prev) => !prev);
44
44
  onTermClick?.(term);
45
- }, children: [_jsx(Button, { unstyled: true, className: "text-left", onClick: (e) => {
45
+ }, children: [_jsx(Button, { unstyled: true, className: "text-left cursor-pointer", onClick: (e) => {
46
46
  e.stopPropagation();
47
47
  onTermClick?.(term);
48
- }, children: term.name }), hasChildren && (_jsxs("span", { className: "ml-auto flex items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block') }), _jsx(MinusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'block' : 'hidden') })] }))] }), hasChildren && isOpen && (_jsx("div", { className: "mt-1 space-y-0.5", children: children.map((child) => (_jsx(CategoryNode, { term: child, allTerms: allTerms, level: level + 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick, colorClassName: colorClassName }, child.id))) }))] }));
48
+ }, children: term.name }), hasChildren && (_jsxs("span", { className: "ml-auto flex items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block'), onClick: (e) => {
49
+ e.stopPropagation();
50
+ setIsOpen((prev) => !prev);
51
+ } }), _jsx(MinusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'block' : 'hidden'), onClick: (e) => {
52
+ e.stopPropagation();
53
+ setIsOpen((prev) => !prev);
54
+ } })] }))] }), hasChildren && isOpen && (_jsx("div", { className: "mt-1 space-y-0.5", children: children.map((child) => (_jsx(CategoryNode, { term: child, allTerms: allTerms, level: level + 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick, colorClassName: colorClassName }, child.id))) }))] }));
49
55
  }
50
56
  export default function CategoryTree({ terms, activeTerm, labels, onTermClick, colorClassName, }) {
51
57
  const parentIds = findParentTerm(activeTerm, terms).map((term) => term.id);
52
58
  const firstLevelTerms = terms.filter((term) => !term.parent);
53
59
  const [isOpen, setIsOpen] = useState(true);
54
- return (_jsxs("div", { className: "border-b border-gray-300 py-6", children: [_jsxs("div", { className: buildClassesByJoining('flex w-full items-center justify-between text-left text-sm font-medium text-gray-900 transition-colors duration-300 cursor-pointer select-none'), onClick: () => setIsOpen((prev) => !prev), children: [_jsx("span", { children: labels.category }), _jsxs("span", { className: "ml-2 items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block') }), _jsx(MinusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'block' : 'hidden') })] })] }), isOpen && (_jsx("div", { className: "mt-4 space-y-1", children: firstLevelTerms.map((term) => (_jsx(CategoryNode, { term: term, allTerms: terms, level: 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick, colorClassName: colorClassName }, term.id))) }))] }));
60
+ return (_jsxs("div", { className: "border-b border-gray-300 py-6", children: [_jsxs("div", { className: buildClassesByJoining('flex w-full items-center justify-between text-left text-sm font-medium text-gray-900 transition-colors duration-300 cursor-pointer select-none'), onClick: () => setIsOpen((prev) => !prev), children: [_jsx("span", { children: labels.category }), _jsxs("span", { className: "ml-2 items-center", children: [_jsx(PlusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'hidden' : 'block'), onClick: (e) => {
61
+ e.stopPropagation();
62
+ setIsOpen((prev) => !prev);
63
+ } }), _jsx(MinusIcon, { className: buildClassesByJoining('w-5 h-5 text-gray-400', isOpen ? 'block' : 'hidden'), onClick: (e) => {
64
+ e.stopPropagation();
65
+ setIsOpen((prev) => !prev);
66
+ } })] })] }), isOpen && (_jsx("div", { className: "mt-4 space-y-1", children: firstLevelTerms.map((term) => (_jsx(CategoryNode, { term: term, allTerms: terms, level: 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick, colorClassName: colorClassName }, term.id))) }))] }));
55
67
  }
@@ -161,7 +161,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, mainPriceClassName, discount
161
161
  onDelete(product);
162
162
  }
163
163
  }, [onDelete, product]);
164
- return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.variation_images[0]?.alt, src: product.variation_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }), addButtonPosition === 'overlay' && (_jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: getButtonIcon(), handleAddToCart: handleAddToCart, showAddButton: shouldShowAddButton(), disabled: disabled, customAddButton: customAddButton }))] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0" })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx("span", { className: buildClassesByJoining('text-md', variationNameClassName), children: product.variation_name })), (product.country || product.field_volume) && (_jsxs("p", { children: [showCountry && product.country && (_jsxs("span", { className: buildClassesByJoining('text-sm', labelClassName), children: [product.country, showVolume && product.field_volume && ', '] })), showVolume && product.field_volume && (_jsx("span", { className: buildClassesByJoining('text-sm', labelClassName), children: product.field_volume }))] })), renderDescription && product.description && (_jsx("span", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: parseHTML(product.description) }))] }), _jsx("div", { className: "flex flex-col justify-between", children: _jsxs("div", { className: "flex flex-col justify-between", children: [_jsx(Price, { value: product.price, locale: locale, options: mainPriceFormatOptions, className: buildClassesByJoining('text-md font-bold text-gray-900', mainPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-md font-bold text-black', mainQuantUnitClassName) }), product?.discountPercent != null && product.discountPercent > 0 && (_jsx(Price, { value: product.price / (1 - product.discountPercent / 100), locale: locale, options: discountPriceFormatOptions || mainPriceFormatOptions, className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', discountPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-sm font-normal text-black line-through', discountQuantUnitClassName) })), addButtonPosition === 'bottom' && (_jsx("div", { className: buildClassesByJoining('mt-3 flex w-full relative z-10', getBottomButtonAlignment()), onClick: (e) => e.stopPropagation(), children: shouldShowQuantityControls() ? (
164
+ return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.all_images[0]?.alt, src: product.all_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }), addButtonPosition === 'overlay' && (_jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: getButtonIcon(), handleAddToCart: handleAddToCart, showAddButton: shouldShowAddButton(), disabled: disabled, customAddButton: customAddButton }))] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0" })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx("span", { className: buildClassesByJoining('text-md', variationNameClassName), children: product.variation_name })), (product.country || product.field_volume) && (_jsxs("p", { children: [showCountry && product.country && (_jsxs("span", { className: buildClassesByJoining('text-sm', labelClassName), children: [product.country, showVolume && product.field_volume && ', '] })), showVolume && product.field_volume && (_jsx("span", { className: buildClassesByJoining('text-sm', labelClassName), children: product.field_volume }))] })), renderDescription && product.description && (_jsx("span", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: parseHTML(product.description) }))] }), _jsx("div", { className: "flex flex-col justify-between", children: _jsxs("div", { className: "flex flex-col justify-between", children: [_jsx(Price, { value: product.price, locale: locale, options: mainPriceFormatOptions, className: buildClassesByJoining('text-md font-bold text-gray-900', mainPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-md font-bold text-black', mainQuantUnitClassName) }), product?.discountPercent != null && product.discountPercent > 0 && (_jsx(Price, { value: product.price / (1 - product.discountPercent / 100), locale: locale, options: discountPriceFormatOptions || mainPriceFormatOptions, className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', discountPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-sm font-normal text-black line-through', discountQuantUnitClassName) })), addButtonPosition === 'bottom' && (_jsx("div", { className: buildClassesByJoining('mt-3 flex w-full relative z-10', getBottomButtonAlignment()), onClick: (e) => e.stopPropagation(), children: shouldShowQuantityControls() ? (
165
165
  // Quantity controls
166
166
  _jsxs("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName), children: [_jsx(Button, { onClick: handleDecrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity <= 0, children: "\u2212" }), _jsx("span", { className: buildClassesByJoining('mx-2 font-medium', quantityClassName), children: currentQuantity }), _jsx(Button, { onClick: handleIncrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity >= maxQuantity, children: "+" })] })) : shouldShowAddButton() ? (
167
167
  // Add button
@@ -37,7 +37,7 @@ export type ProductProps = {
37
37
  };
38
38
  manufacturerClassName?: {
39
39
  heading?: string;
40
- title?: string;
40
+ name?: string;
41
41
  description?: string;
42
42
  image?: string;
43
43
  };
@@ -20,7 +20,7 @@ buttonClassName = '', descriptionClassName = '', specificationClassName = {
20
20
  value: '',
21
21
  }, manufacturerClassName = {
22
22
  heading: '',
23
- title: '',
23
+ name: '',
24
24
  description: '',
25
25
  image: '',
26
26
  },
@@ -147,5 +147,5 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
147
147
  const key = Object.keys(item)[0];
148
148
  const value = item[key];
149
149
  return (_jsx("div", { className: "flex flex-col gap-2", children: _jsxs("p", { children: [_jsxs("span", { className: specificationClassName.key, children: [key, ":"] }), " ", _jsx("span", { className: specificationClassName.value, children: value })] }) }, index));
150
- })] }), product?.field_manufacturer && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: manufacturerClassName.heading, children: translations.manufacturer }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: manufacturerClassName.title, children: product.field_manufacturer?.title }), _jsx("div", { className: manufacturerClassName.description, children: parseHTML(product.field_manufacturer?.body) }), _jsx("img", { src: product.field_manufacturer?.field_image[0]?.href, alt: product.field_manufacturer?.field_image[0]?.alt, className: buildClassesByJoining('h-48 object-contain', manufacturerClassName.image) })] })] }))] })] }), detail && detail.tabs.length > 0 && (_jsx("section", { className: "mt-10", children: _jsx(HorizontalTab, { ...detail }) }))] }) }));
150
+ })] }), product?.field_manufacturer && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: manufacturerClassName.heading, children: translations.manufacturer }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: manufacturerClassName.name, children: product.field_manufacturer?.name }), _jsx("div", { className: manufacturerClassName.description, children: parseHTML(product.field_manufacturer?.description) }), _jsx("img", { src: product.field_manufacturer?.field_image[0]?.href, alt: product.field_manufacturer?.field_image[0]?.alt, className: buildClassesByJoining('h-48 object-contain', manufacturerClassName.image) })] })] }))] })] }), detail && detail.tabs.length > 0 && (_jsx("section", { className: "mt-10", children: _jsx(HorizontalTab, { ...detail }) }))] }) }));
151
151
  };
@@ -31,6 +31,6 @@ const ProductDetailGallery = ({ product, showWishlistButton, enableMultipleWishl
31
31
  onCreateWishlist(name, product);
32
32
  }
33
33
  };
34
- return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: "flex flex-col-reverse items-center", children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: "grid grid-cols-4 gap-6", children: product.variation_images.map((image, i) => (_jsxs(Tab, { className: "group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden", children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: "size-full object-contain" }) }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]" })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.variation_images.map((image, i) => (_jsx(TabPanel, { className: "relative", children: _jsx("img", { src: image.href, alt: image.alt, className: "aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity", onClick: () => openGallery(i) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, wishlistButtonClassName: "bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl" }) }))] })] }), _jsx(ImageGalleryModal, { images: product.variation_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
34
+ return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: "flex flex-col-reverse items-center", children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: "grid grid-cols-4 gap-6", children: product.all_images.map((image, i) => (_jsxs(Tab, { className: "group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden", children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: "size-full object-contain" }) }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]" })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.all_images.map((image, i) => (_jsx(TabPanel, { className: "relative", children: _jsx("img", { src: image.href, alt: image.alt, className: "aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity", onClick: () => openGallery(i) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, wishlistButtonClassName: "bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl" }) }))] })] }), _jsx(ImageGalleryModal, { images: product.all_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
35
35
  };
36
36
  export default ProductDetailGallery;
package/package.json CHANGED
@@ -1,84 +1,84 @@
1
- {
2
- "name": "@q2devel/q2-storybook",
3
- "version": "1.0.136",
4
- "main": "dist/index.js",
5
- "module": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "exports": {
8
- ".": {
9
- "types": "./dist/index.d.ts",
10
- "default": "./dist/index.js"
11
- },
12
- "./styles": "./dist/style.css"
13
- },
14
- "files": [
15
- "dist"
16
- ],
17
- "scripts": {
18
- "test": "echo \"Error: no test specified\" && exit 1",
19
- "storybook": "storybook dev -p 6006",
20
- "build-storybook": "storybook build",
21
- "build": "tsc && npm run build:css",
22
- "build:css": "postcss src/global.css -o dist/style.css",
23
- "prepublishOnly": "npm version patch && npm run build",
24
- "publish:patch": "npm publish && npm run build",
25
- "publish:minor": "npm version minor && npm run build && npm publish",
26
- "publish:major": "npm version major && npm run build && npm publish",
27
- "chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
28
- },
29
- "keywords": [],
30
- "author": "Q2",
31
- "license": "ISC",
32
- "description": "Komponenty nebo konfigurace pro storybook",
33
- "devDependencies": {
34
- "@storybook/addon-actions": "^8.6.14",
35
- "@storybook/addon-essentials": "^8.6.14",
36
- "@storybook/addon-interactions": "^8.6.14",
37
- "@storybook/addon-links": "^8.6.14",
38
- "@storybook/addon-onboarding": "^8.6.14",
39
- "@storybook/addon-viewport": "^8.6.14",
40
- "@storybook/blocks": "^8.6.14",
41
- "@storybook/nextjs": "^8.6.14",
42
- "@storybook/react": "^8.6.14",
43
- "@storybook/test": "^8.6.14",
44
- "@tailwindcss/postcss": "^4.1.8",
45
- "@types/body-parser": "^1.19.6",
46
- "@types/classnames": "^2.3.0",
47
- "@types/express": "^5.0.3",
48
- "@types/node": "^22.14.1",
49
- "@types/react": "^19.1.2",
50
- "@types/react-dom": "^19.1.2",
51
- "autoprefixer": "^10.4.21",
52
- "chromatic": "^12.0.0",
53
- "cssnano": "^7.0.7",
54
- "postcss": "^8.5.4",
55
- "postcss-cli": "^11.0.1",
56
- "react": "^19.0.0",
57
- "react-dom": "^19.0.0",
58
- "rollup-plugin-postcss": "^4.0.2",
59
- "storybook": "^8.6.14",
60
- "tailwindcss": "^4.1.8",
61
- "typescript": "^5.8.3"
62
- },
63
- "peerDependencies": {
64
- "react": "^19.0.0",
65
- "react-dom": "^19.0.0"
66
- },
67
- "dependencies": {
68
- "@headlessui/react": "^2.2.2",
69
- "@heroicons/react": "^2.2.0",
70
- "@q2devel/q2-core": "^1.0.42",
71
- "@tanstack/react-query": "^5.76.1",
72
- "axios": "^1.9.0",
73
- "body-parser": "^2.2.0",
74
- "classnames": "^2.5.1",
75
- "express": "^5.1.0",
76
- "html-react-parser": "^5.2.3",
77
- "react-select": "^5.10.1",
78
- "tailwind-merge": "^3.2.0",
79
- "zod": "^4.0.14"
80
- },
81
- "overrides": {
82
- "storybook": "$storybook"
83
- }
84
- }
1
+ {
2
+ "name": "@q2devel/q2-storybook",
3
+ "version": "1.0.137",
4
+ "main": "dist/index.js",
5
+ "module": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "default": "./dist/index.js"
11
+ },
12
+ "./styles": "./dist/style.css"
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "test": "echo \"Error: no test specified\" && exit 1",
19
+ "storybook": "storybook dev -p 6006",
20
+ "build-storybook": "storybook build",
21
+ "build": "tsc && npm run build:css",
22
+ "build:css": "postcss src/global.css -o dist/style.css",
23
+ "prepublishOnly": "npm version patch && npm run build",
24
+ "publish:patch": "npm publish && npm run build",
25
+ "publish:minor": "npm version minor && npm run build && npm publish",
26
+ "publish:major": "npm version major && npm run build && npm publish",
27
+ "chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
28
+ },
29
+ "keywords": [],
30
+ "author": "Q2",
31
+ "license": "ISC",
32
+ "description": "Komponenty nebo konfigurace pro storybook",
33
+ "devDependencies": {
34
+ "@storybook/addon-actions": "^8.6.14",
35
+ "@storybook/addon-essentials": "^8.6.14",
36
+ "@storybook/addon-interactions": "^8.6.14",
37
+ "@storybook/addon-links": "^8.6.14",
38
+ "@storybook/addon-onboarding": "^8.6.14",
39
+ "@storybook/addon-viewport": "^8.6.14",
40
+ "@storybook/blocks": "^8.6.14",
41
+ "@storybook/nextjs": "^8.6.14",
42
+ "@storybook/react": "^8.6.14",
43
+ "@storybook/test": "^8.6.14",
44
+ "@tailwindcss/postcss": "^4.1.8",
45
+ "@types/body-parser": "^1.19.6",
46
+ "@types/classnames": "^2.3.0",
47
+ "@types/express": "^5.0.3",
48
+ "@types/node": "^22.14.1",
49
+ "@types/react": "^19.1.2",
50
+ "@types/react-dom": "^19.1.2",
51
+ "autoprefixer": "^10.4.21",
52
+ "chromatic": "^12.0.0",
53
+ "cssnano": "^7.0.7",
54
+ "postcss": "^8.5.4",
55
+ "postcss-cli": "^11.0.1",
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0",
58
+ "rollup-plugin-postcss": "^4.0.2",
59
+ "storybook": "^8.6.14",
60
+ "tailwindcss": "^4.1.8",
61
+ "typescript": "^5.8.3"
62
+ },
63
+ "peerDependencies": {
64
+ "react": "^19.0.0",
65
+ "react-dom": "^19.0.0"
66
+ },
67
+ "dependencies": {
68
+ "@headlessui/react": "^2.2.2",
69
+ "@heroicons/react": "^2.2.0",
70
+ "@q2devel/q2-core": "^1.0.51",
71
+ "@tanstack/react-query": "^5.76.1",
72
+ "axios": "^1.9.0",
73
+ "body-parser": "^2.2.0",
74
+ "classnames": "^2.5.1",
75
+ "express": "^5.1.0",
76
+ "html-react-parser": "^5.2.3",
77
+ "react-select": "^5.10.1",
78
+ "tailwind-merge": "^3.2.0",
79
+ "zod": "^4.0.14"
80
+ },
81
+ "overrides": {
82
+ "storybook": "$storybook"
83
+ }
84
+ }