@q2devel/q2-storybook 1.0.172 → 1.0.176
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.
- package/dist/components/Ecommerce/product-detail/ProductDetail.d.ts +24 -1
- package/dist/components/Ecommerce/product-detail/ProductDetail.js +2 -2
- package/dist/components/Ecommerce/wishlist/WishlistDropdown.d.ts +24 -1
- package/dist/components/Ecommerce/wishlist/WishlistDropdown.js +18 -7
- package/package.json +2 -2
|
@@ -141,6 +141,29 @@ export type ProductProps = {
|
|
|
141
141
|
onAddToSpecificWishlist?: (wishlistId: string) => void;
|
|
142
142
|
onRemoveFromSpecificWishlist?: (wishlistId: string) => void;
|
|
143
143
|
onCreateNewWishlistFromDropdown?: (name: string) => void;
|
|
144
|
+
translationsWishlistDropdown?: {
|
|
145
|
+
wishlistLists?: string;
|
|
146
|
+
createNewWishlist?: string;
|
|
147
|
+
createNewWishlistCancel?: string;
|
|
148
|
+
wishlistOptions?: string;
|
|
149
|
+
close?: string;
|
|
150
|
+
createNewWishlistInputPlaceholder?: string;
|
|
151
|
+
};
|
|
152
|
+
classNamesWishlistDropdown?: {
|
|
153
|
+
wishlistLists?: string;
|
|
154
|
+
wishlistItem?: string;
|
|
155
|
+
icon?: {
|
|
156
|
+
remove?: string;
|
|
157
|
+
add?: string;
|
|
158
|
+
check?: string;
|
|
159
|
+
};
|
|
160
|
+
button?: {
|
|
161
|
+
createNewWishlist?: string;
|
|
162
|
+
createNewWishlistCancel?: string;
|
|
163
|
+
};
|
|
164
|
+
form?: string;
|
|
165
|
+
input?: string;
|
|
166
|
+
};
|
|
144
167
|
onShippingOptionsClick?: () => void;
|
|
145
168
|
isWatchdogEnabled?: boolean;
|
|
146
169
|
onWatchdogClick?: () => void;
|
|
@@ -180,4 +203,4 @@ export type ProductProps = {
|
|
|
180
203
|
volumeQuantUnitClassName?: string;
|
|
181
204
|
breakpointForFreeShipping?: number;
|
|
182
205
|
};
|
|
183
|
-
export declare const ProductDetail: ({ name, price, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, hiddenStock, classNames, buttonClassName, descriptionClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, breakpointForFreeShipping, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
206
|
+
export declare const ProductDetail: ({ name, price, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, hiddenStock, classNames, buttonClassName, descriptionClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, translationsWishlistDropdown, classNamesWishlistDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, breakpointForFreeShipping, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -81,7 +81,7 @@ product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = fal
|
|
|
81
81
|
// Wishlist props
|
|
82
82
|
showWishlistButton = false, isInWishlist = false, onWishlistToggle, enableMultipleWishlists = false, wishlists = [], onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds = [], isWishlistPending = false, isLogged = false, onWishlistTextClick,
|
|
83
83
|
// Wishlist dropdown props
|
|
84
|
-
showWishlistDropdown = false, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown,
|
|
84
|
+
showWishlistDropdown = false, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, translationsWishlistDropdown, classNamesWishlistDropdown,
|
|
85
85
|
//modals
|
|
86
86
|
onShippingOptionsClick, isWatchdogEnabled = false, onWatchdogClick, onDemandClick, translations = {
|
|
87
87
|
recommendedPrice: 'Doporučená cena',
|
|
@@ -260,7 +260,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
260
260
|
[], isWishlistPending: isWishlistPending, onAddToWishlist: onAddToSpecificWishlist ||
|
|
261
261
|
(() => { }), onRemoveFromWishlist: onRemoveFromSpecificWishlist ||
|
|
262
262
|
(() => { }), onCreateNewWishlist: onCreateNewWishlistFromDropdown ||
|
|
263
|
-
(() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] }), specification && specification.length > 0 && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: classNames?.specification?.heading, children: translations.specification }), specification.map((item, index) => {
|
|
263
|
+
(() => { }), onClose: onCloseWishlistDropdown, isModal: false, translationsWishlistDropdown: translationsWishlistDropdown, classNamesWishlistDropdown: classNamesWishlistDropdown }) })] }))] }))] }) })] }), specification && specification.length > 0 && (_jsxs("section", { className: "mt-10", children: [_jsx(Heading, { level: 3, className: classNames?.specification?.heading, children: translations.specification }), specification.map((item, index) => {
|
|
264
264
|
if ('separator' in item) {
|
|
265
265
|
return (_jsx("div", { className: "h-4" }, index));
|
|
266
266
|
}
|
|
@@ -13,6 +13,29 @@ export interface WishlistDropdownProps {
|
|
|
13
13
|
onClose?: () => void;
|
|
14
14
|
className?: string;
|
|
15
15
|
isModal?: boolean;
|
|
16
|
+
translationsWishlistDropdown?: {
|
|
17
|
+
wishlistLists?: string;
|
|
18
|
+
createNewWishlist?: string;
|
|
19
|
+
createNewWishlistCancel?: string;
|
|
20
|
+
wishlistOptions?: string;
|
|
21
|
+
close?: string;
|
|
22
|
+
createNewWishlistInputPlaceholder?: string;
|
|
23
|
+
};
|
|
24
|
+
classNamesWishlistDropdown?: {
|
|
25
|
+
wishlistLists?: string;
|
|
26
|
+
wishlistItem?: string;
|
|
27
|
+
icon?: {
|
|
28
|
+
remove?: string;
|
|
29
|
+
add?: string;
|
|
30
|
+
check?: string;
|
|
31
|
+
};
|
|
32
|
+
button?: {
|
|
33
|
+
createNewWishlist?: string;
|
|
34
|
+
createNewWishlistCancel?: string;
|
|
35
|
+
};
|
|
36
|
+
form?: string;
|
|
37
|
+
input?: string;
|
|
38
|
+
};
|
|
16
39
|
}
|
|
17
|
-
export declare const WishlistDropdown: ({ show, wishlists, productWishlistIds, isWishlistPending, onAddToWishlist, onRemoveFromWishlist, onCreateNewWishlist, onClose, className, isModal, }: WishlistDropdownProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
40
|
+
export declare const WishlistDropdown: ({ show, wishlists, productWishlistIds, isWishlistPending, onAddToWishlist, onRemoveFromWishlist, onCreateNewWishlist, onClose, className, isModal, translationsWishlistDropdown, classNamesWishlistDropdown, }: WishlistDropdownProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
18
41
|
export default WishlistDropdown;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import buildClassesByJoining from '../../../utils/StyleHelper';
|
|
4
3
|
import { CheckIcon, PlusCircleIcon, TrashIcon, } from '@heroicons/react/24/outline';
|
|
5
4
|
import { useRef, useState } from 'react';
|
|
5
|
+
import buildClassesByJoining from '../../../utils/StyleHelper';
|
|
6
6
|
import TextField from '../../Forms/text-field/TextField';
|
|
7
|
-
export const WishlistDropdown = ({ show, wishlists, productWishlistIds, isWishlistPending, onAddToWishlist, onRemoveFromWishlist, onCreateNewWishlist, onClose, className, isModal = false, }) => {
|
|
7
|
+
export const WishlistDropdown = ({ show, wishlists, productWishlistIds, isWishlistPending, onAddToWishlist, onRemoveFromWishlist, onCreateNewWishlist, onClose, className, isModal = false, translationsWishlistDropdown, classNamesWishlistDropdown, }) => {
|
|
8
8
|
const [showNewWishlistInput, setShowNewWishlistInput] = useState(false);
|
|
9
9
|
const [newWishlistName, setNewWishlistName] = useState('');
|
|
10
10
|
const inputRef = useRef(null);
|
|
@@ -33,16 +33,27 @@ export const WishlistDropdown = ({ show, wishlists, productWishlistIds, isWishli
|
|
|
33
33
|
};
|
|
34
34
|
if (!show)
|
|
35
35
|
return null;
|
|
36
|
-
const dropdownContent = (_jsxs("div", { className: "py-1", children: [wishlists.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className:
|
|
36
|
+
const dropdownContent = (_jsxs("div", { className: "py-1", children: [wishlists.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: buildClassesByJoining('px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider', classNamesWishlistDropdown?.wishlistLists), children: translationsWishlistDropdown?.wishlistLists ||
|
|
37
|
+
'Seznamy' }), wishlists.map((wishlist) => {
|
|
37
38
|
const isInWishlist = productWishlistIds.includes(wishlist.id);
|
|
38
|
-
return (_jsxs("button", { onClick: () => handleWishlistClick(wishlist.id, isInWishlist), className:
|
|
39
|
-
|
|
39
|
+
return (_jsxs("button", { onClick: () => handleWishlistClick(wishlist.id, isInWishlist), className: buildClassesByJoining('w-full text-left px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between', classNamesWishlistDropdown?.wishlistItem), disabled: isWishlistPending, children: [_jsxs("div", { className: "flex items-center", children: [isInWishlist ? (_jsx(TrashIcon, { className: buildClassesByJoining('h-3.5 w-3.5 mr-2 text-red-600', classNamesWishlistDropdown?.icon
|
|
40
|
+
?.remove) })) : (_jsx(PlusCircleIcon, { className: buildClassesByJoining('h-3.5 w-3.5 mr-2 text-green-600', classNamesWishlistDropdown?.icon
|
|
41
|
+
?.add) })), _jsx("span", { className: "truncate", children: wishlist.name })] }), isInWishlist && (_jsx(CheckIcon, { className: buildClassesByJoining('h-4 w-4 text-green-600 flex-shrink-0', classNamesWishlistDropdown?.icon
|
|
42
|
+
?.check) }))] }, wishlist.id));
|
|
43
|
+
})] })), showNewWishlistInput ? (_jsx("form", { onSubmit: handleCreateNewWishlist, className: buildClassesByJoining('px-3 py-2 border-t', classNamesWishlistDropdown?.form), children: _jsxs("div", { className: "space-y-2", children: [_jsx(TextField, { ref: inputRef, value: newWishlistName, onChange: (e) => setNewWishlistName(e.target.value), placeholder: translationsWishlistDropdown?.createNewWishlistInputPlaceholder ||
|
|
44
|
+
'Název nového seznamu', size: "sm", className: buildClassesByJoining('text-xs', classNamesWishlistDropdown?.input), onClick: (e) => e.stopPropagation(), disabled: isWishlistPending }), _jsxs("div", { className: "flex gap-1.5", children: [_jsx("button", { type: "submit", disabled: !newWishlistName.trim() || isWishlistPending, className: buildClassesByJoining('flex-1 px-2 py-1 text-xs text-white bg-green-600 rounded hover:bg-green-700 disabled:opacity-50', classNamesWishlistDropdown?.button
|
|
45
|
+
?.createNewWishlist), children: translationsWishlistDropdown?.createNewWishlist ||
|
|
46
|
+
'Vytvořit' }), _jsx("button", { type: "button", onClick: (e) => {
|
|
40
47
|
e.stopPropagation();
|
|
41
48
|
setShowNewWishlistInput(false);
|
|
42
49
|
setNewWishlistName('');
|
|
43
|
-
}, className:
|
|
50
|
+
}, className: buildClassesByJoining('flex-1 px-2 py-1 text-xs text-gray-600 bg-gray-200 rounded hover:bg-gray-300', classNamesWishlistDropdown?.button
|
|
51
|
+
?.createNewWishlistCancel), children: translationsWishlistDropdown?.createNewWishlistCancel ||
|
|
52
|
+
'Zrušit' })] })] }) })) : (_jsxs("button", { onClick: handleShowNewWishlistInput, className: buildClassesByJoining('w-full text-left px-3 py-1.5 text-sm text-green-600 hover:bg-gray-100 flex items-center border-t', classNamesWishlistDropdown?.button?.createNewWishlist), disabled: isWishlistPending, children: [_jsx(PlusCircleIcon, { className: "h-3.5 w-3.5 mr-2" }), _jsx("span", { className: "truncate", children: translationsWishlistDropdown?.createNewWishlist ||
|
|
53
|
+
'Vytvořit nový seznam' })] }))] }));
|
|
44
54
|
if (isModal) {
|
|
45
|
-
return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "bg-white rounded-lg shadow-xl p-6 m-4 max-w-md w-full", onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children:
|
|
55
|
+
return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "bg-white rounded-lg shadow-xl p-6 m-4 max-w-md w-full", onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: translationsWishlistDropdown?.wishlistOptions ||
|
|
56
|
+
'Možnosti seznamu' }), _jsx("div", { className: "bg-white rounded-md shadow-xs border border-gray-200", children: dropdownContent }), onClose && (_jsx("button", { onClick: onClose, className: "mt-4 w-full px-4 py-2 border border-gray-300 rounded hover:bg-gray-50", children: translationsWishlistDropdown?.close || 'Zavřít' }))] }) }));
|
|
46
57
|
}
|
|
47
58
|
return (_jsx("div", { className: buildClassesByJoining('absolute right-0 mt-1 w-52 bg-white rounded-md shadow-xl z-50 border border-gray-200', className), children: dropdownContent }));
|
|
48
59
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@q2devel/q2-storybook",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.176",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"@headlessui/react": "^2.2.2",
|
|
69
69
|
"@heroicons/react": "^2.2.0",
|
|
70
|
-
"@q2devel/q2-core": "^1.0.
|
|
70
|
+
"@q2devel/q2-core": "^1.0.71",
|
|
71
71
|
"@tanstack/react-query": "^5.76.1",
|
|
72
72
|
"axios": "^1.9.0",
|
|
73
73
|
"body-parser": "^2.2.0",
|