@envive-ai/react-widgets 0.1.3 → 0.3.0
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/SearchResults/SearchResults.cjs +8 -12
- package/dist/SearchResults/SearchResults.js +4 -8
- package/dist/SearchResults/SearchResultsWidget.cjs +1 -1
- package/dist/SearchResults/SearchResultsWidget.d.cts +2 -2
- package/dist/SearchResults/SearchResultsWidget.js +1 -1
- package/dist/SearchResults/withSearchResults.cjs +1 -1
- package/dist/SearchResults/withSearchResults.js +1 -1
- package/dist/SearchZeroState/SearchIcon.cjs +2 -3
- package/dist/SearchZeroState/SearchIcon.js +1 -2
- package/dist/SearchZeroState/SearchZeroState.cjs +10 -14
- package/dist/SearchZeroState/SearchZeroState.js +5 -9
- package/dist/SearchZeroState/SearchZeroStateWidget.cjs +1 -1
- package/dist/SearchZeroState/SearchZeroStateWidget.d.cts +2 -2
- package/dist/SearchZeroState/SearchZeroStateWidget.d.ts +2 -2
- package/dist/SearchZeroState/SearchZeroStateWidget.js +1 -1
- package/dist/SearchZeroState/components/RecommendedProducts.cjs +5 -7
- package/dist/SearchZeroState/components/RecommendedProducts.js +3 -5
- package/dist/SearchZeroState/index.d.cts +2 -1
- package/dist/SearchZeroState/index.d.ts +2 -1
- package/dist/SearchZeroState/types.d.cts +2 -2
- package/dist/SearchZeroState/types.d.ts +2 -2
- package/dist/SuggestionBar/SuggestionBar.cjs +1 -1
- package/dist/SuggestionBar/SuggestionBar.d.cts +1 -1
- package/dist/SuggestionBar/SuggestionBar.d.ts +3 -3
- package/dist/SuggestionBar/SuggestionBar.js +2 -2
- package/dist/SuggestionButtonContainer/SuggestionButtonContainer.cjs +6 -7
- package/dist/SuggestionButtonContainer/SuggestionButtonContainer.js +2 -3
- package/dist/SuggestionButtonContainer/types.d.cts +2 -2
- package/dist/SuggestionButtonContainer/types.d.ts +2 -2
- package/dist/hooks/dist/contexts/types.d.cts +52 -0
- package/dist/hooks/dist/types/test-types.d.cts +8 -0
- package/dist/packages/hooks/dist/contexts/types.d.ts +52 -0
- package/dist/packages/hooks/dist/types/test-types.d.ts +8 -0
- package/package.json +3 -1
- package/dist/node_modules/react-icons/lib/iconBase.cjs +0 -121
- package/dist/node_modules/react-icons/lib/iconBase.js +0 -119
- package/dist/node_modules/react-icons/lib/iconContext.cjs +0 -17
- package/dist/node_modules/react-icons/lib/iconContext.js +0 -14
- package/dist/node_modules/react-icons/md/index.cjs +0 -35
- package/dist/node_modules/react-icons/md/index.js +0 -35
- package/dist/packages/components/dist/components/Accordion/Accordion.cjs +0 -80
- package/dist/packages/components/dist/components/Accordion/Accordion.js +0 -78
- package/dist/packages/components/dist/components/Accordion/index.cjs +0 -1
- package/dist/packages/components/dist/components/Accordion/index.js +0 -1
- package/dist/packages/components/dist/components/AnimatedChevron/AnimatedChevron.cjs +0 -30
- package/dist/packages/components/dist/components/AnimatedChevron/AnimatedChevron.js +0 -29
- package/dist/packages/components/dist/components/ButtonBase/ButtonBase.cjs +0 -56
- package/dist/packages/components/dist/components/ButtonBase/ButtonBase.js +0 -54
- package/dist/packages/components/dist/components/ButtonBase/index.cjs +0 -2
- package/dist/packages/components/dist/components/ButtonBase/index.js +0 -2
- package/dist/packages/components/dist/components/ButtonBase/types.cjs +0 -11
- package/dist/packages/components/dist/components/ButtonBase/types.js +0 -10
- package/dist/packages/components/dist/components/FilterScrollbar/AppliedFiltersScrollbar.cjs +0 -45
- package/dist/packages/components/dist/components/FilterScrollbar/AppliedFiltersScrollbar.js +0 -42
- package/dist/packages/components/dist/components/FilterScrollbar/DynamicFiltersScrollbar.cjs +0 -33
- package/dist/packages/components/dist/components/FilterScrollbar/DynamicFiltersScrollbar.js +0 -30
- package/dist/packages/components/dist/components/ImageWithFallback/ImageWithFallback.cjs +0 -45
- package/dist/packages/components/dist/components/ImageWithFallback/ImageWithFallback.js +0 -42
- package/dist/packages/components/dist/components/ImageWithFallback/index.cjs +0 -1
- package/dist/packages/components/dist/components/ImageWithFallback/index.js +0 -1
- package/dist/packages/components/dist/components/ModalSheet/ModalSheet.cjs +0 -30
- package/dist/packages/components/dist/components/ModalSheet/ModalSheet.js +0 -29
- package/dist/packages/components/dist/components/ModalSheet/desktop/desktopHeader.cjs +0 -26
- package/dist/packages/components/dist/components/ModalSheet/desktop/desktopHeader.js +0 -24
- package/dist/packages/components/dist/components/ModalSheet/desktop/index.cjs +0 -122
- package/dist/packages/components/dist/components/ModalSheet/desktop/index.js +0 -120
- package/dist/packages/components/dist/components/ModalSheet/index.cjs +0 -1
- package/dist/packages/components/dist/components/ModalSheet/index.js +0 -1
- package/dist/packages/components/dist/components/ModalSheet/mobile/index.cjs +0 -116
- package/dist/packages/components/dist/components/ModalSheet/mobile/index.js +0 -114
- package/dist/packages/components/dist/components/ModalSheet/mobile/mobileHeader.cjs +0 -38
- package/dist/packages/components/dist/components/ModalSheet/mobile/mobileHeader.js +0 -36
- package/dist/packages/components/dist/components/ProductCard/ProductCard.cjs +0 -153
- package/dist/packages/components/dist/components/ProductCard/ProductCard.js +0 -149
- package/dist/packages/components/dist/components/ProductCard/ProductCardSkeleton.cjs +0 -33
- package/dist/packages/components/dist/components/ProductCard/ProductCardSkeleton.js +0 -31
- package/dist/packages/components/dist/components/ProductCard/index.cjs +0 -4
- package/dist/packages/components/dist/components/ProductCard/index.js +0 -4
- package/dist/packages/components/dist/components/ProductCard/productCardVariants.cjs +0 -49
- package/dist/packages/components/dist/components/ProductCard/productCardVariants.js +0 -45
- package/dist/packages/components/dist/components/ProductCard/types.cjs +0 -10
- package/dist/packages/components/dist/components/ProductCard/types.js +0 -9
- package/dist/packages/components/dist/components/ProductGrid/ProductGrid.cjs +0 -43
- package/dist/packages/components/dist/components/ProductGrid/ProductGrid.js +0 -41
- package/dist/packages/components/dist/components/ProductGrid/index.cjs +0 -2
- package/dist/packages/components/dist/components/ProductGrid/index.js +0 -2
- package/dist/packages/components/dist/components/ProductGrid/productGridVariants.cjs +0 -21
- package/dist/packages/components/dist/components/ProductGrid/productGridVariants.js +0 -20
- package/dist/packages/components/dist/components/RadioButton/RadioButton.cjs +0 -74
- package/dist/packages/components/dist/components/RadioButton/RadioButton.js +0 -72
- package/dist/packages/components/dist/components/RadioButton/index.cjs +0 -1
- package/dist/packages/components/dist/components/RadioButton/index.js +0 -1
- package/dist/packages/components/dist/components/RadioButtonGroup/RadioButtonGroup.cjs +0 -42
- package/dist/packages/components/dist/components/RadioButtonGroup/RadioButtonGroup.js +0 -39
- package/dist/packages/components/dist/components/RadioButtonGroup/index.cjs +0 -1
- package/dist/packages/components/dist/components/RadioButtonGroup/index.js +0 -1
- package/dist/packages/components/dist/components/RecommendedProducts/RecommendedProducts.cjs +0 -53
- package/dist/packages/components/dist/components/RecommendedProducts/RecommendedProducts.js +0 -51
- package/dist/packages/components/dist/components/RecommendedProducts/index.cjs +0 -3
- package/dist/packages/components/dist/components/RecommendedProducts/index.js +0 -3
- package/dist/packages/components/dist/components/SearchAutocomplete/SearchAutocomplete.cjs +0 -72
- package/dist/packages/components/dist/components/SearchAutocomplete/SearchAutocomplete.js +0 -69
- package/dist/packages/components/dist/components/SearchAutocomplete/index.cjs +0 -1
- package/dist/packages/components/dist/components/SearchAutocomplete/index.js +0 -1
- package/dist/packages/components/dist/components/SearchFilter/SearchFilter.cjs +0 -134
- package/dist/packages/components/dist/components/SearchFilter/SearchFilter.js +0 -132
- package/dist/packages/components/dist/components/SearchFilter/SearchFilterFooter.cjs +0 -48
- package/dist/packages/components/dist/components/SearchFilter/SearchFilterFooter.js +0 -46
- package/dist/packages/components/dist/components/SearchFilter/SearchFilterHeader.cjs +0 -42
- package/dist/packages/components/dist/components/SearchFilter/SearchFilterHeader.js +0 -40
- package/dist/packages/components/dist/components/SearchFilter/SearchFilterItem.cjs +0 -6
- package/dist/packages/components/dist/components/SearchFilter/SearchFilterItem.js +0 -4
- package/dist/packages/components/dist/components/SearchFilter/index.cjs +0 -5
- package/dist/packages/components/dist/components/SearchFilter/index.js +0 -5
- package/dist/packages/components/dist/components/SearchFilter/useHasFilterStateChanged.cjs +0 -27
- package/dist/packages/components/dist/components/SearchFilter/useHasFilterStateChanged.js +0 -26
- package/dist/packages/components/dist/components/SearchFilter/utils.cjs +0 -11
- package/dist/packages/components/dist/components/SearchFilter/utils.js +0 -9
- package/dist/packages/components/dist/components/SearchInput/SearchInput.cjs +0 -81
- package/dist/packages/components/dist/components/SearchInput/SearchInput.js +0 -78
- package/dist/packages/components/dist/components/SearchInput/index.cjs +0 -2
- package/dist/packages/components/dist/components/SearchInput/index.js +0 -2
- package/dist/packages/components/dist/components/SearchInput/searchInputVariants.cjs +0 -15
- package/dist/packages/components/dist/components/SearchInput/searchInputVariants.js +0 -15
- package/dist/packages/components/dist/components/SearchInputForm/SearchInputForm.cjs +0 -57
- package/dist/packages/components/dist/components/SearchInputForm/SearchInputForm.js +0 -55
- package/dist/packages/components/dist/components/SearchInputForm/index.cjs +0 -1
- package/dist/packages/components/dist/components/SearchInputForm/index.js +0 -1
- package/dist/packages/components/dist/components/SearchResultsContent/SearchResultsContent.cjs +0 -52
- package/dist/packages/components/dist/components/SearchResultsContent/SearchResultsContent.js +0 -50
- package/dist/packages/components/dist/components/SearchResultsContent/index.cjs +0 -1
- package/dist/packages/components/dist/components/SearchResultsContent/index.js +0 -1
- package/dist/packages/components/dist/components/SearchResultsFilterButton/SearchResultsFilterButton.cjs +0 -24
- package/dist/packages/components/dist/components/SearchResultsFilterButton/SearchResultsFilterButton.js +0 -23
- package/dist/packages/components/dist/components/SearchResultsFilterButton/index.cjs +0 -3
- package/dist/packages/components/dist/components/SearchResultsFilterButton/index.js +0 -3
- package/dist/packages/components/dist/components/SearchResultsFilterModal/SearchResultsFilterModal.cjs +0 -36
- package/dist/packages/components/dist/components/SearchResultsFilterModal/SearchResultsFilterModal.js +0 -35
- package/dist/packages/components/dist/components/SearchResultsFilterModal/index.cjs +0 -3
- package/dist/packages/components/dist/components/SearchResultsFilterModal/index.js +0 -3
- package/dist/packages/components/dist/components/SearchResultsFilterSidebar/SearchResultsFilter.cjs +0 -9
- package/dist/packages/components/dist/components/SearchResultsFilterSidebar/SearchResultsFilter.js +0 -9
- package/dist/packages/components/dist/components/SearchResultsFilterSidebar/index.cjs +0 -2
- package/dist/packages/components/dist/components/SearchResultsFilterSidebar/index.js +0 -2
- package/dist/packages/components/dist/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.cjs +0 -34
- package/dist/packages/components/dist/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.js +0 -34
- package/dist/packages/components/dist/components/SearchResultsStates/NoSearchResultsFound.cjs +0 -56
- package/dist/packages/components/dist/components/SearchResultsStates/NoSearchResultsFound.js +0 -54
- package/dist/packages/components/dist/components/SearchResultsStates/SearchResultsGrid.cjs +0 -53
- package/dist/packages/components/dist/components/SearchResultsStates/SearchResultsGrid.js +0 -51
- package/dist/packages/components/dist/components/SearchResultsStates/SearchResultsLoadingGrid.cjs +0 -52
- package/dist/packages/components/dist/components/SearchResultsStates/SearchResultsLoadingGrid.js +0 -51
- package/dist/packages/components/dist/components/SearchResultsStates/index.cjs +0 -3
- package/dist/packages/components/dist/components/SearchResultsStates/index.js +0 -3
- package/dist/packages/components/dist/components/SearchResultsToolbar/SearchResultsToolbar.cjs +0 -60
- package/dist/packages/components/dist/components/SearchResultsToolbar/SearchResultsToolbar.js +0 -57
- package/dist/packages/components/dist/components/SearchResultsToolbar/index.cjs +0 -3
- package/dist/packages/components/dist/components/SearchResultsToolbar/index.js +0 -3
- package/dist/packages/components/dist/components/SparkleAnimation/SparkleAnimation.cjs +0 -77
- package/dist/packages/components/dist/components/SparkleAnimation/SparkleAnimation.js +0 -75
- package/dist/packages/components/dist/components/SparkleAnimation/index.cjs +0 -2
- package/dist/packages/components/dist/components/SparkleAnimation/index.js +0 -2
- package/dist/packages/components/dist/components/SparkleAnimation/types.cjs +0 -12
- package/dist/packages/components/dist/components/SparkleAnimation/types.js +0 -11
- package/dist/packages/components/dist/components/Spinner/Spinner.cjs +0 -40
- package/dist/packages/components/dist/components/Spinner/Spinner.js +0 -38
- package/dist/packages/components/dist/components/Spinner/index.cjs +0 -1
- package/dist/packages/components/dist/components/Spinner/index.js +0 -1
- package/dist/packages/components/dist/components/SuggestionButton/SuggestionButton.cjs +0 -193
- package/dist/packages/components/dist/components/SuggestionButton/SuggestionButton.js +0 -188
- package/dist/packages/components/dist/components/SuggestionButton/index.cjs +0 -1
- package/dist/packages/components/dist/components/SuggestionButton/index.js +0 -1
- package/dist/packages/components/dist/components/TextInput/TextInput.cjs +0 -34
- package/dist/packages/components/dist/components/TextInput/TextInput.js +0 -31
- package/dist/packages/components/dist/components/TextInput/index.cjs +0 -1
- package/dist/packages/components/dist/components/TextInput/index.js +0 -1
- package/dist/packages/components/dist/components/ToggleButton/ToggleButton.cjs +0 -63
- package/dist/packages/components/dist/components/ToggleButton/ToggleButton.js +0 -61
- package/dist/packages/components/dist/components/ToggleButton/index.cjs +0 -1
- package/dist/packages/components/dist/components/ToggleButton/index.js +0 -1
- package/dist/packages/components/dist/components/Typography/Typography.cjs +0 -53
- package/dist/packages/components/dist/components/Typography/Typography.js +0 -50
- package/dist/packages/components/dist/components/Typography/index.cjs +0 -2
- package/dist/packages/components/dist/components/Typography/index.js +0 -2
- package/dist/packages/components/dist/components/Typography/typographyVariantClasses.cjs +0 -99
- package/dist/packages/components/dist/components/Typography/typographyVariantClasses.js +0 -96
- package/dist/packages/components/dist/components/Typography/util.cjs +0 -10
- package/dist/packages/components/dist/components/Typography/util.js +0 -10
- package/dist/packages/components/dist/logging/logger.cjs +0 -20
- package/dist/packages/components/dist/logging/logger.js +0 -19
- package/dist/packages/components/dist/models/colorsConfig.cjs +0 -28
- package/dist/packages/components/dist/models/colorsConfig.js +0 -26
- package/dist/packages/components/dist/util/formatPrice.cjs +0 -14
- package/dist/packages/components/dist/util/formatPrice.js +0 -13
- package/dist/packages/components/dist/util/index.cjs +0 -3
- package/dist/packages/components/dist/util/index.js +0 -3
- package/dist/packages/components/dist/util/useScrollDirection.cjs +0 -39
- package/dist/packages/components/dist/util/useScrollDirection.js +0 -38
- package/dist/packages/components/dist/util/useStickyVisibility.cjs +0 -38
- package/dist/packages/components/dist/util/useStickyVisibility.js +0 -37
- package/dist/packages/icons/dist/ChevronDown.cjs +0 -23
- package/dist/packages/icons/dist/ChevronDown.js +0 -23
- package/dist/packages/icons/dist/FourPointStar.cjs +0 -22
- package/dist/packages/icons/dist/FourPointStar.js +0 -22
- package/dist/packages/icons/dist/IconClose.cjs +0 -26
- package/dist/packages/icons/dist/IconClose.js +0 -26
- package/dist/packages/icons/dist/MagnifyingGlassStarVariant.cjs +0 -39
- package/dist/packages/icons/dist/MagnifyingGlassStarVariant.js +0 -39
- package/dist/packages/icons/dist/OutlinedStar.cjs +0 -22
- package/dist/packages/icons/dist/OutlinedStar.js +0 -22
- package/dist/packages/icons/dist/SettingsVariant.cjs +0 -72
- package/dist/packages/icons/dist/SettingsVariant.js +0 -72
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
const require_Typography = require('../Typography/Typography.cjs');
|
|
3
|
-
require('../Typography/index.cjs');
|
|
4
|
-
const require_formatPrice = require('../../util/formatPrice.cjs');
|
|
5
|
-
const require_ImageWithFallback = require('../ImageWithFallback/ImageWithFallback.cjs');
|
|
6
|
-
require('../ImageWithFallback/index.cjs');
|
|
7
|
-
const require_logger = require('../../logging/logger.cjs');
|
|
8
|
-
const require_productCardVariants = require('./productCardVariants.cjs');
|
|
9
|
-
const require_Spinner = require('../Spinner/Spinner.cjs');
|
|
10
|
-
require('../Spinner/index.cjs');
|
|
11
|
-
const require_index$3 = require('../../../../../node_modules/react-icons/md/index.cjs');
|
|
12
|
-
let __envive_ai_react_hooks_config = require("@envive-ai/react-hooks/config");
|
|
13
|
-
let classnames = require("classnames");
|
|
14
|
-
classnames = require_rolldown_runtime.__toESM(classnames);
|
|
15
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
16
|
-
let __envive_ai_react_hooks_hooks_ImageResolver = require("@envive-ai/react-hooks/hooks/ImageResolver");
|
|
17
|
-
|
|
18
|
-
//#region ../components/dist/components/ProductCard/ProductCard.js
|
|
19
|
-
const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
|
|
20
|
-
minimumFractionDigits: 1,
|
|
21
|
-
maximumFractionDigits: 1
|
|
22
|
-
}));
|
|
23
|
-
const RatingSummary = ({ stars, reviewCount, className }) => {
|
|
24
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
25
|
-
className,
|
|
26
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
27
|
-
className: (0, classnames.default)("spiffy-product-card-rating", "spiffy-product-card-text-color", "spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-items-center", "spiffy-tw-gap-1", "spiffy-tw-text-[--spiffy-colors-text-primary]", "spiffy-tw-tracking-[0.8px]"),
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.MdStar, { className: (0, classnames.default)("spiffy-product-card-rating-star-color", "spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-w-[14px]", "spiffy-tw-h-[14px]") }),
|
|
30
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
31
|
-
variant: "body3",
|
|
32
|
-
children: formatReviews(stars)
|
|
33
|
-
}),
|
|
34
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
|
|
35
|
-
variant: "body3",
|
|
36
|
-
children: [
|
|
37
|
-
"(",
|
|
38
|
-
reviewCount,
|
|
39
|
-
")"
|
|
40
|
-
]
|
|
41
|
-
})
|
|
42
|
-
]
|
|
43
|
-
})
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
|
|
47
|
-
if (!originalPrice) return null;
|
|
48
|
-
const priceClassName = (0, classnames.default)("spiffy-product-card-price", "spiffy-product-card-text-color", "spiffy-tw-font-regular", "spiffy-tw-flex", "spiffy-tw-flex-wrap", "spiffy-tw-gap-1", "spiffy-tw-text-sm", "spiffy-tw-font-[400]", "spiffy-tw-leading-[100%]", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-text-[--spiffy-colors-text-primary]");
|
|
49
|
-
const showSalePrice = salePrice && originalPrice !== salePrice;
|
|
50
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
51
|
-
className: priceClassName,
|
|
52
|
-
children: [
|
|
53
|
-
pricePrefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, { children: pricePrefix }),
|
|
54
|
-
showSalePrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, { children: salePrice }),
|
|
55
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
56
|
-
className: showSalePrice ? "spiffy-tw-line-through" : "",
|
|
57
|
-
children: originalPrice
|
|
58
|
-
})
|
|
59
|
-
]
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, onClick }) => {
|
|
63
|
-
const { resolve } = (0, __envive_ai_react_hooks_hooks_ImageResolver.useImageResolver)();
|
|
64
|
-
const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
|
|
65
|
-
const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
|
|
66
|
-
const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
|
|
67
|
-
const pricePrefix = productCardConfig?.pricePrefix;
|
|
68
|
-
const handleClick = () => onClick();
|
|
69
|
-
if (productCardConfig == null) {
|
|
70
|
-
require_logger.logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
|
|
71
|
-
return null;
|
|
72
|
-
}
|
|
73
|
-
const layoutClasses = require_productCardVariants.productCardLayoutVariantClasses[finalLayoutVariant];
|
|
74
|
-
const containerClassnames = (0, classnames.default)("spiffy-tw-cursor-pointer", "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-overflow-hidden", {
|
|
75
|
-
"spiffy-tw-h-full": growWithContainer,
|
|
76
|
-
"spiffy-tw-w-full": growWithContainer,
|
|
77
|
-
"spiffy-tw-max-w-full": growWithContainer,
|
|
78
|
-
"spiffy-tw-rounded-[8px]": layoutVariant === "normal"
|
|
79
|
-
}, !growWithContainer && layoutClasses.container, require_productCardVariants.variantClassMap.get(finalVariant) ?? [], require_productCardVariants.variantHoverClassMap.get(finalHoverVariant) ?? []);
|
|
80
|
-
const verticalContainerVariantClasses = require_productCardVariants.productCardLayoutVariantClasses[layoutVariant].verticalContainer;
|
|
81
|
-
const verticalContainerClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", {
|
|
82
|
-
"spiffy-tw-h-full": growWithContainer,
|
|
83
|
-
"spiffy-tw-w-full": growWithContainer,
|
|
84
|
-
"spiffy-tw-flex-1": growWithContainer
|
|
85
|
-
}, ...!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []);
|
|
86
|
-
const linkClassnames = (0, classnames.default)({
|
|
87
|
-
"spiffy-tw-w-full": true,
|
|
88
|
-
"spiffy-tw-h-full": true,
|
|
89
|
-
"spiffy-tw-overflow-hidden": true,
|
|
90
|
-
"spiffy-tw-select-none": true
|
|
91
|
-
});
|
|
92
|
-
const imageClipContainerClassnames = (0, classnames.default)("spiffy-tw-w-full", "spiffy-tw-overflow-hidden", {
|
|
93
|
-
"spiffy-tw-flex-shrink-0": growWithContainer,
|
|
94
|
-
"spiffy-tw-tw-h-full": !growWithContainer
|
|
95
|
-
}, aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "");
|
|
96
|
-
const imageContainerClassnames = (0, classnames.default)(linkClassnames, zoomOnHover ? [
|
|
97
|
-
"spiffy-tw-transition-transform",
|
|
98
|
-
"spiffy-tw-duration-200",
|
|
99
|
-
"spiffy-tw-origin-top",
|
|
100
|
-
"hover:spiffy-tw-scale-105"
|
|
101
|
-
] : []);
|
|
102
|
-
const contentClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-p-2", "spiffy-tw-pr-2", "spiffy-tw-items-start", "spiffy-tw-justify-end", { "spiffy-tw-flex-grow-0": layoutVariant === "tall" || layoutVariant === "square" });
|
|
103
|
-
const productTitleClassnames = (0, classnames.default)("spiffy-tw-line-clamp-2", "spiffy-tw-overflow-clip", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-whitespace-normal", "spiffy-tw-normal-case", require_productCardVariants.variantTitleColorMap.get(finalVariant) ?? "spiffy-tw-text-[--spiffy-colors-text-primary]", ...layoutClasses.productTitle);
|
|
104
|
-
const priceAndRatingContainerClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-justify-between", "spiffy-tw-items-center", "spiffy-tw-w-full", "spiffy-tw-pt-2", "spiffy-tw-gap-2");
|
|
105
|
-
const imageClassnames = (0, classnames.default)("spiffy-tw-bg-transparent", "spiffy-tw-w-full", "spiffy-tw-h-full", "spiffy-tw-object-cover", "spiffy-tw-object-top", "spiffy-tw-select-none", "spiffy-tw-pointer-events-none");
|
|
106
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
107
|
-
className: containerClassnames,
|
|
108
|
-
"data-testid": dataTestId ?? __envive_ai_react_hooks_config.PRODUCT_CARD_TESTID,
|
|
109
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
110
|
-
href: url,
|
|
111
|
-
onClick: () => handleClick(),
|
|
112
|
-
target: "_self",
|
|
113
|
-
draggable: false,
|
|
114
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
115
|
-
className: verticalContainerClassnames,
|
|
116
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
117
|
-
className: imageClipContainerClassnames,
|
|
118
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
119
|
-
className: imageContainerClassnames,
|
|
120
|
-
children: imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageWithFallback.ImageWithFallback, {
|
|
121
|
-
src: resolve(imageUrl, layoutVariant === "tall" ? 300 : 178),
|
|
122
|
-
alt: title,
|
|
123
|
-
fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { className: "spiffy-tw-h-6 spiffy-tw-w-6" }),
|
|
124
|
-
imageClassnames
|
|
125
|
-
})
|
|
126
|
-
})
|
|
127
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
128
|
-
className: contentClassnames,
|
|
129
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
130
|
-
variant: "h4",
|
|
131
|
-
className: productTitleClassnames,
|
|
132
|
-
children: title
|
|
133
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
134
|
-
className: priceAndRatingContainerClassnames,
|
|
135
|
-
children: [(originalPrice || salePrice) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PriceSection, {
|
|
136
|
-
originalPrice: require_formatPrice.formatPrice(originalPrice),
|
|
137
|
-
salePrice: require_formatPrice.formatPrice(salePrice),
|
|
138
|
-
pricePrefix
|
|
139
|
-
}), averageRating && numberReviews && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingSummary, {
|
|
140
|
-
stars: averageRating,
|
|
141
|
-
reviewCount: numberReviews
|
|
142
|
-
})]
|
|
143
|
-
})]
|
|
144
|
-
})]
|
|
145
|
-
})
|
|
146
|
-
})
|
|
147
|
-
});
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
//#endregion
|
|
151
|
-
exports.PriceSection = PriceSection;
|
|
152
|
-
exports.ProductCard = ProductCard;
|
|
153
|
-
exports.RatingSummary = RatingSummary;
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import { Typography } from "../Typography/Typography.js";
|
|
2
|
-
import "../Typography/index.js";
|
|
3
|
-
import { formatPrice } from "../../util/formatPrice.js";
|
|
4
|
-
import { ImageWithFallback } from "../ImageWithFallback/ImageWithFallback.js";
|
|
5
|
-
import "../ImageWithFallback/index.js";
|
|
6
|
-
import { logger_default } from "../../logging/logger.js";
|
|
7
|
-
import { productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "./productCardVariants.js";
|
|
8
|
-
import { Spinner } from "../Spinner/Spinner.js";
|
|
9
|
-
import "../Spinner/index.js";
|
|
10
|
-
import { MdStar } from "../../../../../node_modules/react-icons/md/index.js";
|
|
11
|
-
import { PRODUCT_CARD_TESTID } from "@envive-ai/react-hooks/config";
|
|
12
|
-
import classNames from "classnames";
|
|
13
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { useImageResolver } from "@envive-ai/react-hooks/hooks/ImageResolver";
|
|
15
|
-
|
|
16
|
-
//#region ../components/dist/components/ProductCard/ProductCard.js
|
|
17
|
-
const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
|
|
18
|
-
minimumFractionDigits: 1,
|
|
19
|
-
maximumFractionDigits: 1
|
|
20
|
-
}));
|
|
21
|
-
const RatingSummary = ({ stars, reviewCount, className }) => {
|
|
22
|
-
return /* @__PURE__ */ jsx("div", {
|
|
23
|
-
className,
|
|
24
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
25
|
-
className: classNames("spiffy-product-card-rating", "spiffy-product-card-text-color", "spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-items-center", "spiffy-tw-gap-1", "spiffy-tw-text-[--spiffy-colors-text-primary]", "spiffy-tw-tracking-[0.8px]"),
|
|
26
|
-
children: [
|
|
27
|
-
/* @__PURE__ */ jsx(MdStar, { className: classNames("spiffy-product-card-rating-star-color", "spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-w-[14px]", "spiffy-tw-h-[14px]") }),
|
|
28
|
-
/* @__PURE__ */ jsx(Typography, {
|
|
29
|
-
variant: "body3",
|
|
30
|
-
children: formatReviews(stars)
|
|
31
|
-
}),
|
|
32
|
-
/* @__PURE__ */ jsxs(Typography, {
|
|
33
|
-
variant: "body3",
|
|
34
|
-
children: [
|
|
35
|
-
"(",
|
|
36
|
-
reviewCount,
|
|
37
|
-
")"
|
|
38
|
-
]
|
|
39
|
-
})
|
|
40
|
-
]
|
|
41
|
-
})
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
|
|
45
|
-
if (!originalPrice) return null;
|
|
46
|
-
const priceClassName = classNames("spiffy-product-card-price", "spiffy-product-card-text-color", "spiffy-tw-font-regular", "spiffy-tw-flex", "spiffy-tw-flex-wrap", "spiffy-tw-gap-1", "spiffy-tw-text-sm", "spiffy-tw-font-[400]", "spiffy-tw-leading-[100%]", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-text-[--spiffy-colors-text-primary]");
|
|
47
|
-
const showSalePrice = salePrice && originalPrice !== salePrice;
|
|
48
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
49
|
-
className: priceClassName,
|
|
50
|
-
children: [
|
|
51
|
-
pricePrefix && /* @__PURE__ */ jsx(Typography, { children: pricePrefix }),
|
|
52
|
-
showSalePrice && /* @__PURE__ */ jsx(Typography, { children: salePrice }),
|
|
53
|
-
/* @__PURE__ */ jsx(Typography, {
|
|
54
|
-
className: showSalePrice ? "spiffy-tw-line-through" : "",
|
|
55
|
-
children: originalPrice
|
|
56
|
-
})
|
|
57
|
-
]
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, onClick }) => {
|
|
61
|
-
const { resolve } = useImageResolver();
|
|
62
|
-
const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
|
|
63
|
-
const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
|
|
64
|
-
const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
|
|
65
|
-
const pricePrefix = productCardConfig?.pricePrefix;
|
|
66
|
-
const handleClick = () => onClick();
|
|
67
|
-
if (productCardConfig == null) {
|
|
68
|
-
logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
|
|
72
|
-
const containerClassnames = classNames("spiffy-tw-cursor-pointer", "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-overflow-hidden", {
|
|
73
|
-
"spiffy-tw-h-full": growWithContainer,
|
|
74
|
-
"spiffy-tw-w-full": growWithContainer,
|
|
75
|
-
"spiffy-tw-max-w-full": growWithContainer,
|
|
76
|
-
"spiffy-tw-rounded-[8px]": layoutVariant === "normal"
|
|
77
|
-
}, !growWithContainer && layoutClasses.container, variantClassMap.get(finalVariant) ?? [], variantHoverClassMap.get(finalHoverVariant) ?? []);
|
|
78
|
-
const verticalContainerVariantClasses = productCardLayoutVariantClasses[layoutVariant].verticalContainer;
|
|
79
|
-
const verticalContainerClassnames = classNames("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", {
|
|
80
|
-
"spiffy-tw-h-full": growWithContainer,
|
|
81
|
-
"spiffy-tw-w-full": growWithContainer,
|
|
82
|
-
"spiffy-tw-flex-1": growWithContainer
|
|
83
|
-
}, ...!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []);
|
|
84
|
-
const linkClassnames = classNames({
|
|
85
|
-
"spiffy-tw-w-full": true,
|
|
86
|
-
"spiffy-tw-h-full": true,
|
|
87
|
-
"spiffy-tw-overflow-hidden": true,
|
|
88
|
-
"spiffy-tw-select-none": true
|
|
89
|
-
});
|
|
90
|
-
const imageClipContainerClassnames = classNames("spiffy-tw-w-full", "spiffy-tw-overflow-hidden", {
|
|
91
|
-
"spiffy-tw-flex-shrink-0": growWithContainer,
|
|
92
|
-
"spiffy-tw-tw-h-full": !growWithContainer
|
|
93
|
-
}, aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "");
|
|
94
|
-
const imageContainerClassnames = classNames(linkClassnames, zoomOnHover ? [
|
|
95
|
-
"spiffy-tw-transition-transform",
|
|
96
|
-
"spiffy-tw-duration-200",
|
|
97
|
-
"spiffy-tw-origin-top",
|
|
98
|
-
"hover:spiffy-tw-scale-105"
|
|
99
|
-
] : []);
|
|
100
|
-
const contentClassnames = classNames("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-p-2", "spiffy-tw-pr-2", "spiffy-tw-items-start", "spiffy-tw-justify-end", { "spiffy-tw-flex-grow-0": layoutVariant === "tall" || layoutVariant === "square" });
|
|
101
|
-
const productTitleClassnames = classNames("spiffy-tw-line-clamp-2", "spiffy-tw-overflow-clip", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-whitespace-normal", "spiffy-tw-normal-case", variantTitleColorMap.get(finalVariant) ?? "spiffy-tw-text-[--spiffy-colors-text-primary]", ...layoutClasses.productTitle);
|
|
102
|
-
const priceAndRatingContainerClassnames = classNames("spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-justify-between", "spiffy-tw-items-center", "spiffy-tw-w-full", "spiffy-tw-pt-2", "spiffy-tw-gap-2");
|
|
103
|
-
const imageClassnames = classNames("spiffy-tw-bg-transparent", "spiffy-tw-w-full", "spiffy-tw-h-full", "spiffy-tw-object-cover", "spiffy-tw-object-top", "spiffy-tw-select-none", "spiffy-tw-pointer-events-none");
|
|
104
|
-
return /* @__PURE__ */ jsx("div", {
|
|
105
|
-
className: containerClassnames,
|
|
106
|
-
"data-testid": dataTestId ?? PRODUCT_CARD_TESTID,
|
|
107
|
-
children: /* @__PURE__ */ jsx("a", {
|
|
108
|
-
href: url,
|
|
109
|
-
onClick: () => handleClick(),
|
|
110
|
-
target: "_self",
|
|
111
|
-
draggable: false,
|
|
112
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
113
|
-
className: verticalContainerClassnames,
|
|
114
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
115
|
-
className: imageClipContainerClassnames,
|
|
116
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
117
|
-
className: imageContainerClassnames,
|
|
118
|
-
children: imageUrl && /* @__PURE__ */ jsx(ImageWithFallback, {
|
|
119
|
-
src: resolve(imageUrl, layoutVariant === "tall" ? 300 : 178),
|
|
120
|
-
alt: title,
|
|
121
|
-
fallback: /* @__PURE__ */ jsx(Spinner, { className: "spiffy-tw-h-6 spiffy-tw-w-6" }),
|
|
122
|
-
imageClassnames
|
|
123
|
-
})
|
|
124
|
-
})
|
|
125
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
126
|
-
className: contentClassnames,
|
|
127
|
-
children: [/* @__PURE__ */ jsx(Typography, {
|
|
128
|
-
variant: "h4",
|
|
129
|
-
className: productTitleClassnames,
|
|
130
|
-
children: title
|
|
131
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
132
|
-
className: priceAndRatingContainerClassnames,
|
|
133
|
-
children: [(originalPrice || salePrice) && /* @__PURE__ */ jsx(PriceSection, {
|
|
134
|
-
originalPrice: formatPrice(originalPrice),
|
|
135
|
-
salePrice: formatPrice(salePrice),
|
|
136
|
-
pricePrefix
|
|
137
|
-
}), averageRating && numberReviews && /* @__PURE__ */ jsx(RatingSummary, {
|
|
138
|
-
stars: averageRating,
|
|
139
|
-
reviewCount: numberReviews
|
|
140
|
-
})]
|
|
141
|
-
})]
|
|
142
|
-
})]
|
|
143
|
-
})
|
|
144
|
-
})
|
|
145
|
-
});
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
//#endregion
|
|
149
|
-
export { PriceSection, ProductCard, RatingSummary };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
const require_productCardVariants = require('./productCardVariants.cjs');
|
|
3
|
-
const require_types = require('./types.cjs');
|
|
4
|
-
let classnames = require("classnames");
|
|
5
|
-
classnames = require_rolldown_runtime.__toESM(classnames);
|
|
6
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
-
|
|
8
|
-
//#region ../components/dist/components/ProductCard/ProductCardSkeleton.js
|
|
9
|
-
const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
|
|
10
|
-
const layoutClasses = require_productCardVariants.productCardLayoutVariantClasses[layoutVariant || "normal"];
|
|
11
|
-
const containerClasses = (0, classnames.default)(require_types.ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON_CONTAINER, "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-bg-transparent", !growWithContainer ? layoutClasses.container : "");
|
|
12
|
-
const verticalContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", !growWithContainer ? layoutClasses.verticalContainer : "");
|
|
13
|
-
const imageClipContainerClasses = (0, classnames.default)("spiffy-tw-w-full", aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "", "spiffy-tw-overflow-hidden");
|
|
14
|
-
const imageSkeletonClasses = (0, classnames.default)("spiffy-tw-bg-[#F4F4F6]", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-w-full", "spiffy-tw-h-full");
|
|
15
|
-
const contentContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-2", "spiffy-tw-w-full", "spiffy-tw-p-2");
|
|
16
|
-
const textSkeletonClasses = (0, classnames.default)(require_types.ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON, "spiffy-tw-h-[15px]", "spiffy-tw-block", "spiffy-tw-rounded-sm", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-bg-[#F4F4F6]");
|
|
17
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
18
|
-
className: containerClasses,
|
|
19
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
20
|
-
className: verticalContainerClasses,
|
|
21
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
22
|
-
className: imageClipContainerClasses,
|
|
23
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: imageSkeletonClasses })
|
|
24
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
25
|
-
className: contentContainerClasses,
|
|
26
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(textSkeletonClasses, "spiffy-tw-w-full") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(textSkeletonClasses, "spiffy-tw-w-[60%]") })]
|
|
27
|
-
})]
|
|
28
|
-
})
|
|
29
|
-
});
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
//#endregion
|
|
33
|
-
exports.ProductCardSkeleton = ProductCardSkeleton;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { productCardLayoutVariantClasses } from "./productCardVariants.js";
|
|
2
|
-
import { ProductCardSkeletonOverrides } from "./types.js";
|
|
3
|
-
import classNames from "classnames";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
|
|
6
|
-
//#region ../components/dist/components/ProductCard/ProductCardSkeleton.js
|
|
7
|
-
const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
|
|
8
|
-
const layoutClasses = productCardLayoutVariantClasses[layoutVariant || "normal"];
|
|
9
|
-
const containerClasses = classNames(ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON_CONTAINER, "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-bg-transparent", !growWithContainer ? layoutClasses.container : "");
|
|
10
|
-
const verticalContainerClasses = classNames("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", !growWithContainer ? layoutClasses.verticalContainer : "");
|
|
11
|
-
const imageClipContainerClasses = classNames("spiffy-tw-w-full", aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "", "spiffy-tw-overflow-hidden");
|
|
12
|
-
const imageSkeletonClasses = classNames("spiffy-tw-bg-[#F4F4F6]", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-w-full", "spiffy-tw-h-full");
|
|
13
|
-
const contentContainerClasses = classNames("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-2", "spiffy-tw-w-full", "spiffy-tw-p-2");
|
|
14
|
-
const textSkeletonClasses = classNames(ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON, "spiffy-tw-h-[15px]", "spiffy-tw-block", "spiffy-tw-rounded-sm", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-bg-[#F4F4F6]");
|
|
15
|
-
return /* @__PURE__ */ jsx("div", {
|
|
16
|
-
className: containerClasses,
|
|
17
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
18
|
-
className: verticalContainerClasses,
|
|
19
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
20
|
-
className: imageClipContainerClasses,
|
|
21
|
-
children: /* @__PURE__ */ jsx("div", { className: imageSkeletonClasses })
|
|
22
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
23
|
-
className: contentContainerClasses,
|
|
24
|
-
children: [/* @__PURE__ */ jsx("div", { className: classNames(textSkeletonClasses, "spiffy-tw-w-full") }), /* @__PURE__ */ jsx("div", { className: classNames(textSkeletonClasses, "spiffy-tw-w-[60%]") })]
|
|
25
|
-
})]
|
|
26
|
-
})
|
|
27
|
-
});
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
//#endregion
|
|
31
|
-
export { ProductCardSkeleton };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "./productCardVariants.js";
|
|
2
|
-
import { PriceSection, ProductCard, RatingSummary } from "./ProductCard.js";
|
|
3
|
-
import { ProductCardSkeletonOverrides } from "./types.js";
|
|
4
|
-
import { ProductCardSkeleton } from "./ProductCardSkeleton.js";
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
//#region ../components/dist/components/ProductCard/productCardVariants.js
|
|
3
|
-
/**
|
|
4
|
-
* Shared variant mapping configurations for ProductCard components
|
|
5
|
-
*/
|
|
6
|
-
const variantClassMap = new Map([
|
|
7
|
-
["filled", ["spiffy-tw-bg-[--spiffy-colors-background-secondary]", "spiffy-tw-shadow-md"]],
|
|
8
|
-
["bordered", [
|
|
9
|
-
"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
|
|
10
|
-
"spiffy-tw-border",
|
|
11
|
-
"spiffy-tw-border-[--spiffy-colors-border-light]"
|
|
12
|
-
]],
|
|
13
|
-
["minimal", ["spiffy-tw-bg-transparent"]],
|
|
14
|
-
["transparentBordered", [
|
|
15
|
-
"spiffy-tw-bg-transparent",
|
|
16
|
-
"spiffy-tw-border",
|
|
17
|
-
"spiffy-tw-border-[--spiffy-colors-border-light]"
|
|
18
|
-
]]
|
|
19
|
-
]);
|
|
20
|
-
const variantHoverClassMap = new Map([["backgroundDark", ["hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]"]], ["none", []]]);
|
|
21
|
-
const variantTitleColorMap = new Map([
|
|
22
|
-
["filled", "spiffy-tw-text-[--spiffy-colors-text-link]"],
|
|
23
|
-
["bordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
|
|
24
|
-
["minimal", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
|
|
25
|
-
["transparentBordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"]
|
|
26
|
-
]);
|
|
27
|
-
const productCardLayoutVariantClasses = {
|
|
28
|
-
normal: {
|
|
29
|
-
productTitle: ["spiffy-product-card-title"],
|
|
30
|
-
container: ["spiffy-tw-w-[208px]"],
|
|
31
|
-
verticalContainer: ["spiffy-tw-rounded-[8px]", "spiffy-tw-h-[268px]"]
|
|
32
|
-
},
|
|
33
|
-
tall: {
|
|
34
|
-
productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
|
|
35
|
-
container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[300px]"],
|
|
36
|
-
verticalContainer: ["lg:spiffy-tw-h-[496px]"]
|
|
37
|
-
},
|
|
38
|
-
square: {
|
|
39
|
-
productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
|
|
40
|
-
container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[280px]"],
|
|
41
|
-
verticalContainer: ["lg:spiffy-tw-h-[400px]"]
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
//#endregion
|
|
46
|
-
exports.productCardLayoutVariantClasses = productCardLayoutVariantClasses;
|
|
47
|
-
exports.variantClassMap = variantClassMap;
|
|
48
|
-
exports.variantHoverClassMap = variantHoverClassMap;
|
|
49
|
-
exports.variantTitleColorMap = variantTitleColorMap;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
//#region ../components/dist/components/ProductCard/productCardVariants.js
|
|
2
|
-
/**
|
|
3
|
-
* Shared variant mapping configurations for ProductCard components
|
|
4
|
-
*/
|
|
5
|
-
const variantClassMap = new Map([
|
|
6
|
-
["filled", ["spiffy-tw-bg-[--spiffy-colors-background-secondary]", "spiffy-tw-shadow-md"]],
|
|
7
|
-
["bordered", [
|
|
8
|
-
"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
|
|
9
|
-
"spiffy-tw-border",
|
|
10
|
-
"spiffy-tw-border-[--spiffy-colors-border-light]"
|
|
11
|
-
]],
|
|
12
|
-
["minimal", ["spiffy-tw-bg-transparent"]],
|
|
13
|
-
["transparentBordered", [
|
|
14
|
-
"spiffy-tw-bg-transparent",
|
|
15
|
-
"spiffy-tw-border",
|
|
16
|
-
"spiffy-tw-border-[--spiffy-colors-border-light]"
|
|
17
|
-
]]
|
|
18
|
-
]);
|
|
19
|
-
const variantHoverClassMap = new Map([["backgroundDark", ["hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]"]], ["none", []]]);
|
|
20
|
-
const variantTitleColorMap = new Map([
|
|
21
|
-
["filled", "spiffy-tw-text-[--spiffy-colors-text-link]"],
|
|
22
|
-
["bordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
|
|
23
|
-
["minimal", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
|
|
24
|
-
["transparentBordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"]
|
|
25
|
-
]);
|
|
26
|
-
const productCardLayoutVariantClasses = {
|
|
27
|
-
normal: {
|
|
28
|
-
productTitle: ["spiffy-product-card-title"],
|
|
29
|
-
container: ["spiffy-tw-w-[208px]"],
|
|
30
|
-
verticalContainer: ["spiffy-tw-rounded-[8px]", "spiffy-tw-h-[268px]"]
|
|
31
|
-
},
|
|
32
|
-
tall: {
|
|
33
|
-
productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
|
|
34
|
-
container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[300px]"],
|
|
35
|
-
verticalContainer: ["lg:spiffy-tw-h-[496px]"]
|
|
36
|
-
},
|
|
37
|
-
square: {
|
|
38
|
-
productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
|
|
39
|
-
container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[280px]"],
|
|
40
|
-
verticalContainer: ["lg:spiffy-tw-h-[400px]"]
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
//#endregion
|
|
45
|
-
export { productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
//#region ../components/dist/components/ProductCard/types.js
|
|
3
|
-
let ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
|
|
4
|
-
ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON_CONTAINER"] = "spiffy-product-card-skeleton-container";
|
|
5
|
-
ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON"] = "spiffy-product-card-skeleton";
|
|
6
|
-
return ProductCardSkeletonOverrides$1;
|
|
7
|
-
}({});
|
|
8
|
-
|
|
9
|
-
//#endregion
|
|
10
|
-
exports.ProductCardSkeletonOverrides = ProductCardSkeletonOverrides;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
//#region ../components/dist/components/ProductCard/types.js
|
|
2
|
-
let ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
|
|
3
|
-
ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON_CONTAINER"] = "spiffy-product-card-skeleton-container";
|
|
4
|
-
ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON"] = "spiffy-product-card-skeleton";
|
|
5
|
-
return ProductCardSkeletonOverrides$1;
|
|
6
|
-
}({});
|
|
7
|
-
|
|
8
|
-
//#endregion
|
|
9
|
-
export { ProductCardSkeletonOverrides };
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
const require_ProductCard = require('../ProductCard/ProductCard.cjs');
|
|
3
|
-
require('../ProductCard/index.cjs');
|
|
4
|
-
const require_productGridVariants = require('./productGridVariants.cjs');
|
|
5
|
-
let classnames = require("classnames");
|
|
6
|
-
classnames = require_rolldown_runtime.__toESM(classnames);
|
|
7
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
|
-
|
|
9
|
-
//#region ../components/dist/components/ProductGrid/ProductGrid.js
|
|
10
|
-
const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true, onProductClick }) => {
|
|
11
|
-
const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = require_productGridVariants.productGridVariantClasses[productGridVariant];
|
|
12
|
-
const cardContainerClasses = (0, classnames.default)({
|
|
13
|
-
"spiffy-tw-w-full": cardsGrowWithContainer,
|
|
14
|
-
"spiffy-tw-h-full": cardsGrowWithContainer
|
|
15
|
-
});
|
|
16
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
17
|
-
className: productGridClasses,
|
|
18
|
-
children: productList.map((product, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
19
|
-
className: cardContainerClasses,
|
|
20
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCard, {
|
|
21
|
-
productCardConfig,
|
|
22
|
-
merchantShortName,
|
|
23
|
-
imageUrl: product.imageUrl,
|
|
24
|
-
title: product.title,
|
|
25
|
-
url: product.url,
|
|
26
|
-
originalPrice: product.originalPrice,
|
|
27
|
-
salePrice: product.salePrice,
|
|
28
|
-
averageRating: product.averageRating,
|
|
29
|
-
numberReviews: product.numberReviews,
|
|
30
|
-
layoutVariant: productCardLayoutVariant,
|
|
31
|
-
variant: productCardVariant,
|
|
32
|
-
hoverVariant: productCardHoverVariant,
|
|
33
|
-
zoomOnHover,
|
|
34
|
-
aspectRatio: productCardImageAspectRatio,
|
|
35
|
-
growWithContainer: cardsGrowWithContainer,
|
|
36
|
-
onClick: () => onProductClick?.(product, index)
|
|
37
|
-
})
|
|
38
|
-
}, product.id))
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
//#endregion
|
|
43
|
-
exports.ProductGrid = ProductGrid;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { ProductCard } from "../ProductCard/ProductCard.js";
|
|
2
|
-
import "../ProductCard/index.js";
|
|
3
|
-
import { productGridVariantClasses } from "./productGridVariants.js";
|
|
4
|
-
import classNames from "classnames";
|
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
|
|
7
|
-
//#region ../components/dist/components/ProductGrid/ProductGrid.js
|
|
8
|
-
const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true, onProductClick }) => {
|
|
9
|
-
const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
|
|
10
|
-
const cardContainerClasses = classNames({
|
|
11
|
-
"spiffy-tw-w-full": cardsGrowWithContainer,
|
|
12
|
-
"spiffy-tw-h-full": cardsGrowWithContainer
|
|
13
|
-
});
|
|
14
|
-
return /* @__PURE__ */ jsx("div", {
|
|
15
|
-
className: productGridClasses,
|
|
16
|
-
children: productList.map((product, index) => /* @__PURE__ */ jsx("div", {
|
|
17
|
-
className: cardContainerClasses,
|
|
18
|
-
children: /* @__PURE__ */ jsx(ProductCard, {
|
|
19
|
-
productCardConfig,
|
|
20
|
-
merchantShortName,
|
|
21
|
-
imageUrl: product.imageUrl,
|
|
22
|
-
title: product.title,
|
|
23
|
-
url: product.url,
|
|
24
|
-
originalPrice: product.originalPrice,
|
|
25
|
-
salePrice: product.salePrice,
|
|
26
|
-
averageRating: product.averageRating,
|
|
27
|
-
numberReviews: product.numberReviews,
|
|
28
|
-
layoutVariant: productCardLayoutVariant,
|
|
29
|
-
variant: productCardVariant,
|
|
30
|
-
hoverVariant: productCardHoverVariant,
|
|
31
|
-
zoomOnHover,
|
|
32
|
-
aspectRatio: productCardImageAspectRatio,
|
|
33
|
-
growWithContainer: cardsGrowWithContainer,
|
|
34
|
-
onClick: () => onProductClick?.(product, index)
|
|
35
|
-
})
|
|
36
|
-
}, product.id))
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
//#endregion
|
|
41
|
-
export { ProductGrid };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
//#region ../components/dist/components/ProductGrid/productGridVariants.js
|
|
3
|
-
const productGridVariantClasses = {
|
|
4
|
-
standard: {
|
|
5
|
-
productCardVariant: "minimal",
|
|
6
|
-
productCardHoverVariant: "backgroundDark",
|
|
7
|
-
productCardLayoutVariant: "tall",
|
|
8
|
-
productCardImageAspectRatio: "3:4",
|
|
9
|
-
zoomOnHover: true
|
|
10
|
-
},
|
|
11
|
-
square: {
|
|
12
|
-
productCardVariant: "minimal",
|
|
13
|
-
productCardHoverVariant: "backgroundDark",
|
|
14
|
-
productCardLayoutVariant: "square",
|
|
15
|
-
productCardImageAspectRatio: "square",
|
|
16
|
-
zoomOnHover: true
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
//#endregion
|
|
21
|
-
exports.productGridVariantClasses = productGridVariantClasses;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
//#region ../components/dist/components/ProductGrid/productGridVariants.js
|
|
2
|
-
const productGridVariantClasses = {
|
|
3
|
-
standard: {
|
|
4
|
-
productCardVariant: "minimal",
|
|
5
|
-
productCardHoverVariant: "backgroundDark",
|
|
6
|
-
productCardLayoutVariant: "tall",
|
|
7
|
-
productCardImageAspectRatio: "3:4",
|
|
8
|
-
zoomOnHover: true
|
|
9
|
-
},
|
|
10
|
-
square: {
|
|
11
|
-
productCardVariant: "minimal",
|
|
12
|
-
productCardHoverVariant: "backgroundDark",
|
|
13
|
-
productCardLayoutVariant: "square",
|
|
14
|
-
productCardImageAspectRatio: "square",
|
|
15
|
-
zoomOnHover: true
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
//#endregion
|
|
20
|
-
export { productGridVariantClasses };
|