pixelize-design-library 2.2.92 → 2.2.94
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/Header/components/mobileMenu.js +3 -3
- package/dist/Components/ProductCard/ProductCard.js +16 -15
- package/dist/Components/ProductCard/ProductReview.js +18 -6
- package/dist/Components/ProductCard/ProductTags.js +16 -1
- package/dist/Components/ProductDetails/ProductDetails.js +1 -1
- package/dist/Components/ProductDetails/ProductDtlPrice.js +2 -2
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ var MobileMenu = function (_a) {
|
|
|
26
26
|
: "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16 })), px: 2 },
|
|
27
27
|
react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
|
|
28
28
|
react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
|
|
29
|
-
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, item.badge.label)),
|
|
29
|
+
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", borderRadius: "full", px: 2, py: 0.5 }, item.badge.label)),
|
|
30
30
|
react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, item.label)))),
|
|
31
31
|
react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
|
|
32
32
|
react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
|
|
@@ -37,10 +37,10 @@ var MobileMenu = function (_a) {
|
|
|
37
37
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
38
38
|
}, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
|
|
39
39
|
react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
|
|
40
|
-
subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
|
|
40
|
+
subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", borderRadius: "full", px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
|
|
41
41
|
react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
|
|
42
42
|
react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
|
|
43
|
-
react_2.default.createElement(react_1.Text, { fontSize: "
|
|
43
|
+
react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
|
|
44
44
|
}))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
|
|
45
45
|
react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
|
|
46
46
|
item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
|
|
@@ -68,7 +68,7 @@ var ProductCard = function (_a) {
|
|
|
68
68
|
var _q = sizeStyles[size], cardWidth = _q.cardWidth, imgHeight = _q.imgHeight, padding = _q.padding;
|
|
69
69
|
var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
|
|
70
70
|
var safeSize = allowedSizes.includes(size) ? size : "md";
|
|
71
|
-
return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
|
|
71
|
+
return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.white, boxShadow: "lg" },
|
|
72
72
|
react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer" },
|
|
73
73
|
react_1.default.createElement(react_2.Image, { src: hover && ((_b = productImage === null || productImage === void 0 ? void 0 : productImage[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? productImage[1].imageUrl : (_c = productImage === null || productImage === void 0 ? void 0 : productImage[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }),
|
|
74
74
|
batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
|
|
@@ -87,22 +87,23 @@ var ProductCard = function (_a) {
|
|
|
87
87
|
md: 1.5,
|
|
88
88
|
lg: 2,
|
|
89
89
|
}[size] }, batch.label))),
|
|
90
|
-
react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding },
|
|
90
|
+
react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full" },
|
|
91
91
|
react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
|
|
92
92
|
react_1.default.createElement(ProductLabel_1.default, { label: label, size: size })),
|
|
93
93
|
tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
|
|
94
|
-
options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: rating
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
react_1.default.createElement(react_2.HStack,
|
|
100
|
-
react_1.default.createElement(react_2.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
94
|
+
options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)
|
|
95
|
+
? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews })
|
|
96
|
+
: undefined })),
|
|
97
|
+
react_1.default.createElement(react_2.VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto" },
|
|
98
|
+
typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && (react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true }, "Out of Stock")),
|
|
99
|
+
addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between" },
|
|
100
|
+
react_1.default.createElement(react_2.HStack, null,
|
|
101
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
|
|
102
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
|
|
103
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })))),
|
|
104
|
+
(button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart")),
|
|
105
|
+
addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); }, colorScheme: "red" }, "Add to Cart")),
|
|
106
|
+
addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && notifyMe && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); }, colorScheme: "red", variant: "outline" }, "Notify Me")),
|
|
107
|
+
goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart"))))));
|
|
107
108
|
};
|
|
108
109
|
exports.default = ProductCard;
|
|
@@ -8,16 +8,28 @@ var react_2 = require("@chakra-ui/react");
|
|
|
8
8
|
var lucide_react_1 = require("lucide-react");
|
|
9
9
|
var ProductReview = function (_a) {
|
|
10
10
|
var rating = _a.rating, reviewCount = _a.reviewCount, _b = _a.mb, mb = _b === void 0 ? 0 : _b;
|
|
11
|
+
var hasRating = rating !== undefined && rating !== null;
|
|
12
|
+
var hasReviewCount = reviewCount !== undefined && reviewCount !== null;
|
|
13
|
+
// Get colors from theme
|
|
14
|
+
var yellow400 = (0, react_2.useToken)('colors', ['yellow.400'])[0];
|
|
15
|
+
// Convert rating to number and ensure it's between 0 and 5
|
|
16
|
+
// Calculate fill percentage: (rating / 5) * 100%
|
|
17
|
+
var numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
|
|
18
|
+
var fillPercentage = (numericRating / 6) * 100;
|
|
11
19
|
return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: mb },
|
|
12
|
-
react_1.default.createElement(react_2.Flex, { align: "center", gap:
|
|
13
|
-
react_1.default.createElement(react_2.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
hasRating && (react_1.default.createElement(react_2.Flex, { align: "center", gap: 1, bg: "teal.900", color: "white", px: 2, borderRadius: "md" },
|
|
21
|
+
react_1.default.createElement(react_2.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0 },
|
|
22
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px" },
|
|
23
|
+
react_1.default.createElement(lucide_react_1.Star, { size: 14, color: "white", fill: "none", stroke: "white", strokeWidth: 1.5 })),
|
|
24
|
+
fillPercentage > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "".concat(fillPercentage, "%"), height: "100%", overflow: "hidden" },
|
|
25
|
+
react_1.default.createElement(lucide_react_1.Star, { size: 14, color: yellow400, fill: yellow400 })))),
|
|
26
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "white" }, numericRating))),
|
|
27
|
+
hasRating && hasReviewCount && react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
|
|
28
|
+
hasReviewCount && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
|
|
17
29
|
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }),
|
|
18
30
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
|
|
19
31
|
"(",
|
|
20
32
|
reviewCount,
|
|
21
|
-
")"))));
|
|
33
|
+
")")))));
|
|
22
34
|
};
|
|
23
35
|
exports.default = ProductReview;
|
|
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
var react_1 = __importDefault(require("react"));
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
|
+
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
8
9
|
var ProductTags = function (_a) {
|
|
9
10
|
var tags = _a.tags, className = _a.className, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
|
|
10
11
|
var getRows = function (tags) {
|
|
@@ -30,6 +31,20 @@ var Tag = function (_a) {
|
|
|
30
31
|
md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
|
|
31
32
|
lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
|
|
32
33
|
};
|
|
33
|
-
|
|
34
|
+
var ref = react_1.default.useRef(null);
|
|
35
|
+
var _d = react_1.default.useState(false), truncated = _d[0], setTruncated = _d[1];
|
|
36
|
+
react_1.default.useEffect(function () {
|
|
37
|
+
var el = ref.current;
|
|
38
|
+
if (!el)
|
|
39
|
+
return;
|
|
40
|
+
var check = function () { return setTruncated(el.scrollWidth > el.clientWidth); };
|
|
41
|
+
check();
|
|
42
|
+
window.addEventListener('resize', check);
|
|
43
|
+
return function () {
|
|
44
|
+
window.removeEventListener('resize', check);
|
|
45
|
+
};
|
|
46
|
+
}, [children]);
|
|
47
|
+
var content = (react_1.default.createElement(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children));
|
|
48
|
+
return truncated ? (react_1.default.createElement(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom' }, content)) : (content);
|
|
34
49
|
};
|
|
35
50
|
exports.default = ProductTags;
|
|
@@ -41,7 +41,7 @@ var ProductDetails = function (_a) {
|
|
|
41
41
|
react_1.default.createElement(react_2.Box, { flex: "1" },
|
|
42
42
|
label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
|
|
43
43
|
react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
|
|
44
|
-
rating || reviews && react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 }),
|
|
44
|
+
((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && (react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })),
|
|
45
45
|
tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
|
|
46
46
|
price && (react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: function (option) {
|
|
47
47
|
setSelectedOption(option);
|
|
@@ -43,10 +43,10 @@ var ProductDtlPrice = function (_a) {
|
|
|
43
43
|
react_1.default.createElement(react_2.Text, { fontSize: "xl", color: theme.colors.red[500], fontWeight: "bold" },
|
|
44
44
|
"\u20B9",
|
|
45
45
|
discounted),
|
|
46
|
-
react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
|
|
46
|
+
selected.offer > 0 && (react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
|
|
47
47
|
"SAVE ",
|
|
48
48
|
selected.offer,
|
|
49
|
-
"%")),
|
|
49
|
+
"%"))),
|
|
50
50
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] }, "(Incl. of all taxes)"),
|
|
51
51
|
react_1.default.createElement(react_2.Box, null,
|
|
52
52
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
|