pixelize-design-library 2.2.88 → 2.2.90

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.
Files changed (9) hide show
  1. package/dist/Components/Header/components/mobileMenu.js +4 -2
  2. package/dist/Components/ProductCard/ProductCard.js +5 -3
  3. package/dist/Components/ProductCard/ProductReview.d.ts +4 -3
  4. package/dist/Components/ProductCard/ProductReview.js +2 -2
  5. package/dist/Components/ProductDetails/ProductDetails.d.ts +1 -1
  6. package/dist/Components/ProductDetails/ProductDetails.js +7 -2
  7. package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +2 -0
  8. package/dist/Components/ProductDetails/ProductDtlPrice.js +5 -1
  9. package/package.json +1 -1
package/dist/Components/Header/components/mobileMenu.js CHANGED
@@ -27,7 +27,7 @@ var MobileMenu = function (_a) {
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
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)),
30
- react_2.default.createElement(react_1.Text, { fontWeight: "medium" }, item.label)))),
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) {
33
33
  var _a, _b, _c;
@@ -38,7 +38,9 @@ var MobileMenu = function (_a) {
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
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)),
41
- react_2.default.createElement(react_1.Text, null, subItem.label))));
41
+ react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
42
+ react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
43
+ react_2.default.createElement(react_1.Text, { fontSize: "xs" }, subItem.label)))));
42
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 } },
43
45
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
44
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)),
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -70,7 +70,7 @@ var ProductCard = function (_a) {
70
70
  var safeSize = allowedSizes.includes(size) ? size : "md";
71
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" },
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
- 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" }),
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: {
75
75
  xs: "xs",
76
76
  sm: "sm",
@@ -91,8 +91,10 @@ var ProductCard = function (_a) {
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 && reviews ? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }) : undefined })),
95
- 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(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK")),
94
+ options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: rating || reviews ? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }) : undefined })),
95
+ 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%",
96
+ // onClick={button?.onClick}
97
+ isDisabled: true }, "Out of Stock")),
96
98
  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", mb: 2 },
97
99
  react_1.default.createElement(react_2.HStack, null,
98
100
  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" }),
package/dist/Components/ProductCard/ProductReview.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  type ProductReviewProps = {
3
- rating: string | number;
4
- reviewCount: string | number;
3
+ rating?: string | number;
4
+ reviewCount?: string | number;
5
+ mb?: number;
5
6
  };
6
- declare const ProductReview: ({ rating, reviewCount }: ProductReviewProps) => React.JSX.Element;
7
+ declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => React.JSX.Element;
7
8
  export default ProductReview;
package/dist/Components/ProductCard/ProductReview.js CHANGED
@@ -7,8 +7,8 @@ var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
8
  var lucide_react_1 = require("lucide-react");
9
9
  var ProductReview = function (_a) {
10
- var rating = _a.rating, reviewCount = _a.reviewCount;
11
- return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2 },
10
+ var rating = _a.rating, reviewCount = _a.reviewCount, _b = _a.mb, mb = _b === void 0 ? 0 : _b;
11
+ return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: mb },
12
12
  react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
13
13
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5 }),
14
14
  react_1.default.createElement(react_2.Text, null, rating)),
package/dist/Components/ProductDetails/ProductDetails.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { ProductDetailsProps } from "./ProductDetailsProps";
3
- declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, notifyMe, isQtyEditable, }: ProductDetailsProps) => React.JSX.Element;
3
+ declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, }: ProductDetailsProps) => React.JSX.Element;
4
4
  export default ProductDetails;
package/dist/Components/ProductDetails/ProductDetails.js CHANGED
@@ -12,9 +12,10 @@ var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
12
12
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
13
13
  var Button_1 = __importDefault(require("../Button/Button"));
14
14
  var lucide_react_1 = require("lucide-react");
15
+ var ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
15
16
  var ProductDetails = function (_a) {
16
17
  var _b, _c, _d, _e, _f;
17
- var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g;
18
+ var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, rating = _a.rating, reviews = _a.reviews, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g;
18
19
  var theme = (0, useCustomTheme_1.useCustomTheme)();
19
20
  var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
20
21
  var _h = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _h[0], setSelectedOption = _h[1];
@@ -40,13 +41,17 @@ var ProductDetails = function (_a) {
40
41
  react_1.default.createElement(react_2.Box, { flex: "1" },
41
42
  label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
42
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 }),
43
45
  tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
44
46
  price && (react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: function (option) {
45
47
  setSelectedOption(option);
46
48
  onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
47
49
  } })),
48
50
  typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 0) <= 0 && (react_1.default.createElement(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" } },
49
- react_1.default.createElement(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK"))),
51
+ react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: "sm",
52
+ // width="50%"
53
+ // onClick={button?.onClick}
54
+ isDisabled: true }, "Out of Stock"))),
50
55
  goToCart && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: OnGoToCart }, "Go to cart")),
51
56
  addToCart && (((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4 },
52
57
  react_1.default.createElement(react_2.HStack, null,
package/dist/Components/ProductDetails/ProductDetailsProps.d.ts CHANGED
@@ -8,6 +8,8 @@ export type ProductDetailsProps = {
8
8
  images?: images[];
9
9
  batch?: batch;
10
10
  category?: string;
11
+ rating?: string | number;
12
+ reviews?: string | number;
11
13
  onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
12
14
  onNotifyMe?: (id: string | number, var_id: number) => void;
13
15
  onOptionChange?: (option: options) => void;
package/dist/Components/ProductDetails/ProductDtlPrice.js CHANGED
@@ -52,6 +52,10 @@ var ProductDtlPrice = function (_a) {
52
52
  react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
53
53
  "Packs : ",
54
54
  selected.label),
55
- react_1.default.createElement(react_2.HStack, { spacing: 2 }, price.map(function (pack, idx) { return (react_1.default.createElement(react_2.Button, { key: pack.var_id, size: "sm", variant: idx === selectedIndex ? "solid" : "outline", colorScheme: idx === selectedIndex ? "blackAlpha" : undefined, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
55
+ react_1.default.createElement(react_2.HStack, { spacing: 2 }, price.map(function (pack, idx) { return (react_1.default.createElement(react_2.Button, { key: pack.var_id, size: "xs", variant: "outline", borderColor: idx === selectedIndex ? "orange.400" : "orange.200", bg: idx === selectedIndex ? "orange.50" : "white", color: "orange.600", borderRadius: "md", fontWeight: "medium", _hover: {
56
+ bg: "orange.100",
57
+ }, _active: {
58
+ bg: "orange.100",
59
+ }, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
56
60
  };
57
61
  exports.default = ProductDtlPrice;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.88",
3
+ "version": "2.2.90",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",