@envive-ai/react-toolkit 0.1.13 → 0.2.1
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/package.json +13 -12
- package/src/atoms/search/types.ts +1 -5
- package/src/components/Accordion/Accordion.tsx +3 -3
- package/src/components/AnimatedChevron/index.ts +1 -0
- package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx +2 -2
- package/src/components/ButtonBase/ButtonBase.tsx +2 -2
- package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx +2 -2
- package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx +2 -2
- package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx +2 -2
- package/src/components/ProductCard/ProductCard.tsx +10 -9
- package/src/components/RadioButton/RadioButton.tsx +2 -2
- package/src/components/SearchFilter/SearchFilterHeader.tsx +3 -3
- package/src/components/SearchFilter/SearchFilterItem.tsx +2 -2
- package/src/components/SearchFilter/index.ts +4 -2
- package/src/components/SearchInput/SearchInput.tsx +1 -1
- package/src/components/SearchInput/searchInputVariants.ts +3 -3
- package/src/components/SearchInputForm/SearchInputForm.tsx +1 -1
- package/src/components/SearchInputForm/index.ts +1 -1
- package/src/components/SearchResultsStates/NoSearchResultsFound.tsx +3 -3
- package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx +2 -2
- package/src/components/TextInput/TextInput.tsx +4 -3
- package/src/components/ToggleButton/ToggleButton.tsx +5 -5
- package/src/components/Typography/Typography.spec.tsx +22 -0
- package/src/components/Typography/Typography.tsx +73 -0
- package/src/components/Typography/index.ts +2 -0
- package/src/components/{Text/textVariantClasses.ts → Typography/typographyVariantClasses.ts} +36 -38
- package/src/components/Typography/util.ts +19 -0
- package/dist/Accordion/index.cjs +0 -6
- package/dist/Accordion/index.d.cts +0 -13
- package/dist/Accordion/index.d.ts +0 -13
- package/dist/Accordion/index.js +0 -6
- package/dist/Accordion-D9gO9_y3.cjs +0 -88
- package/dist/Accordion-ZEdp99Ph.js +0 -77
- package/dist/AppliedFiltersScrollbar/index.cjs +0 -48
- package/dist/AppliedFiltersScrollbar/index.d.cts +0 -22
- package/dist/AppliedFiltersScrollbar/index.d.ts +0 -22
- package/dist/AppliedFiltersScrollbar/index.js +0 -44
- package/dist/ButtonBase/index.cjs +0 -7
- package/dist/ButtonBase/index.d.cts +0 -42
- package/dist/ButtonBase/index.d.ts +0 -42
- package/dist/ButtonBase/index.js +0 -6
- package/dist/ButtonBase-0NN6wmX-.js +0 -1
- package/dist/ButtonBase-BIXx56hq.cjs +0 -0
- package/dist/ButtonBase-DgRupM53.js +0 -60
- package/dist/ButtonBase-DrIwVGTR.cjs +0 -75
- package/dist/DynamicFiltersScrollbar/index.cjs +0 -36
- package/dist/DynamicFiltersScrollbar/index.d.cts +0 -28
- package/dist/DynamicFiltersScrollbar/index.d.ts +0 -28
- package/dist/DynamicFiltersScrollbar/index.js +0 -32
- package/dist/DynamicFiltersScrollbar-B1j53y2q.cjs +0 -81
- package/dist/DynamicFiltersScrollbar-D7WYp6x9.js +0 -66
- package/dist/FilterScrollbar/index.cjs +0 -6
- package/dist/FilterScrollbar/index.d.cts +0 -47
- package/dist/FilterScrollbar/index.d.ts +0 -47
- package/dist/FilterScrollbar/index.js +0 -5
- package/dist/Headline/index.cjs +0 -4
- package/dist/Headline/index.d.cts +0 -21
- package/dist/Headline/index.d.ts +0 -21
- package/dist/Headline/index.js +0 -4
- package/dist/Headline-COv0Jbn8.js +0 -64
- package/dist/Headline-Cp79THVF.cjs +0 -72
- package/dist/ImageWithFallback/index.cjs +0 -3
- package/dist/ImageWithFallback/index.d.cts +0 -26
- package/dist/ImageWithFallback/index.d.ts +0 -26
- package/dist/ImageWithFallback/index.js +0 -3
- package/dist/ImageWithFallback-Cx-KNi-D.cjs +0 -51
- package/dist/ImageWithFallback-DqxjwO3i.js +0 -42
- package/dist/ModalSheet/index.cjs +0 -3
- package/dist/ModalSheet/index.d.cts +0 -38
- package/dist/ModalSheet/index.d.ts +0 -38
- package/dist/ModalSheet/index.js +0 -3
- package/dist/ModalSheet-01pxpy_K.js +0 -326
- package/dist/ModalSheet-Csz8HIxs.cjs +0 -337
- package/dist/ProductCard/index.cjs +0 -17
- package/dist/ProductCard/index.d.cts +0 -2
- package/dist/ProductCard/index.d.ts +0 -2
- package/dist/ProductCard/index.js +0 -8
- package/dist/ProductCard-CNwmHggx.js +0 -255
- package/dist/ProductCard-EmdDy2af.cjs +0 -319
- package/dist/ProductGrid/index.cjs +0 -10
- package/dist/ProductGrid/index.d.cts +0 -33
- package/dist/ProductGrid/index.d.ts +0 -33
- package/dist/ProductGrid/index.js +0 -9
- package/dist/ProductGrid-CMoomZLc.cjs +0 -74
- package/dist/ProductGrid-nmWSp0qX.js +0 -60
- package/dist/RadioButton/index.cjs +0 -6
- package/dist/RadioButton/index.d.cts +0 -32
- package/dist/RadioButton/index.d.ts +0 -32
- package/dist/RadioButton/index.js +0 -6
- package/dist/RadioButton-BdKJRzLM.cjs +0 -84
- package/dist/RadioButton-S5dALI2f.js +0 -75
- package/dist/RadioButtonGroup/index.cjs +0 -8
- package/dist/RadioButtonGroup/index.d.cts +0 -36
- package/dist/RadioButtonGroup/index.d.ts +0 -36
- package/dist/RadioButtonGroup/index.js +0 -7
- package/dist/RadioButtonGroup-BipNsoHL.js +0 -38
- package/dist/RadioButtonGroup-TAJMA1j_.cjs +0 -52
- package/dist/SearchAutocomplete/index.cjs +0 -57
- package/dist/SearchAutocomplete/index.d.cts +0 -13
- package/dist/SearchAutocomplete/index.d.ts +0 -13
- package/dist/SearchAutocomplete/index.js +0 -51
- package/dist/SearchFilter/index.cjs +0 -15
- package/dist/SearchFilter/index.d.cts +0 -77
- package/dist/SearchFilter/index.d.ts +0 -77
- package/dist/SearchFilter/index.js +0 -13
- package/dist/SearchFilter-BcLc0TMq.cjs +0 -289
- package/dist/SearchFilter-w-0s2YVu.js +0 -268
- package/dist/SearchInput/index.cjs +0 -97
- package/dist/SearchInput/index.d.cts +0 -33
- package/dist/SearchInput/index.d.ts +0 -33
- package/dist/SearchInput/index.js +0 -90
- package/dist/SearchInputForm/index.cjs +0 -0
- package/dist/SearchInputForm/index.d.cts +0 -2
- package/dist/SearchInputForm/index.d.ts +0 -2
- package/dist/SearchInputForm/index.js +0 -1
- package/dist/SearchResultsContent/index.cjs +0 -47
- package/dist/SearchResultsContent/index.d.cts +0 -48
- package/dist/SearchResultsContent/index.d.ts +0 -48
- package/dist/SearchResultsContent/index.js +0 -44
- package/dist/SearchResultsFilterSidebar/index.cjs +0 -61
- package/dist/SearchResultsFilterSidebar/index.d.cts +0 -2
- package/dist/SearchResultsFilterSidebar/index.d.ts +0 -2
- package/dist/SearchResultsFilterSidebar/index.js +0 -56
- package/dist/SearchResultsStates/index.cjs +0 -17
- package/dist/SearchResultsStates/index.d.cts +0 -69
- package/dist/SearchResultsStates/index.d.ts +0 -69
- package/dist/SearchResultsStates/index.js +0 -15
- package/dist/SearchResultsStates-DlZz14yy.js +0 -110
- package/dist/SearchResultsStates-DwcPrsdd.cjs +0 -132
- package/dist/SparkleAnimation/index.cjs +0 -4
- package/dist/SparkleAnimation/index.d.cts +0 -23
- package/dist/SparkleAnimation/index.d.ts +0 -23
- package/dist/SparkleAnimation/index.js +0 -3
- package/dist/SparkleAnimation-CvGlWUqv.cjs +0 -101
- package/dist/SparkleAnimation-paLhSu5E.js +0 -84
- package/dist/Spinner/index.cjs +0 -3
- package/dist/Spinner/index.d.cts +0 -11
- package/dist/Spinner/index.d.ts +0 -11
- package/dist/Spinner/index.js +0 -3
- package/dist/Spinner-CjGLIRgs.js +0 -38
- package/dist/Spinner-DFor2Szi.cjs +0 -46
- package/dist/SuggestionButton/index.cjs +0 -188
- package/dist/SuggestionButton/index.d.cts +0 -35
- package/dist/SuggestionButton/index.d.ts +0 -35
- package/dist/SuggestionButton/index.js +0 -180
- package/dist/Text/index.cjs +0 -10
- package/dist/Text/index.d.cts +0 -42
- package/dist/Text/index.d.ts +0 -42
- package/dist/Text/index.js +0 -5
- package/dist/Text-BLzNhX4H.js +0 -42
- package/dist/Text-BMsncrpY.js +0 -10
- package/dist/Text-C8t_iEj6.cjs +0 -16
- package/dist/Text-DllCE9_D.cjs +0 -50
- package/dist/TextInput/index.cjs +0 -4
- package/dist/TextInput/index.d.cts +0 -12
- package/dist/TextInput/index.d.ts +0 -12
- package/dist/TextInput/index.js +0 -4
- package/dist/TextInput-DmsOxxPN.js +0 -31
- package/dist/TextInput-HMW0hxLI.cjs +0 -40
- package/dist/ToggleButton/index.cjs +0 -6
- package/dist/ToggleButton/index.d.cts +0 -30
- package/dist/ToggleButton/index.d.ts +0 -30
- package/dist/ToggleButton/index.js +0 -6
- package/dist/ToggleButton-DblAj4Cd.cjs +0 -68
- package/dist/ToggleButton-r7Y7Kzzo.js +0 -60
- package/dist/chunk-CUT6urMc.cjs +0 -30
- package/dist/colorsConfig-B3-SMUSx.cjs +0 -38
- package/dist/colorsConfig-DZ-GSPWy.js +0 -26
- package/dist/index-BKvXn5sj.d.ts +0 -4
- package/dist/index-Br1B7Jta.d.cts +0 -46
- package/dist/index-DADHwW6M.d.ts +0 -325
- package/dist/index-DDp-fLgm.d.cts +0 -325
- package/dist/index-Dh8rcWev.d.ts +0 -46
- package/dist/index-W1wCDiw_.d.cts +0 -4
- package/dist/searchFilterSidebarVariants-J0FJ8pck.js +0 -34
- package/dist/searchFilterSidebarVariants-kkTjYEIF.cjs +0 -39
- package/dist/textVariantClasses-B0gNjzl4.d.cts +0 -174
- package/dist/textVariantClasses-C8OCWZAw.d.ts +0 -174
- package/dist/textVariantClasses-CBre7vXv.cjs +0 -123
- package/dist/textVariantClasses-CRrTb43V.js +0 -99
- package/src/components/Headline/Headline.tsx +0 -81
- package/src/components/Headline/index.ts +0 -1
- package/src/components/SearchInputForm/types.ts +0 -1
- package/src/components/Text/Text.tsx +0 -58
- package/src/components/Text/index.ts +0 -3
- package/src/components/Text/types.ts +0 -23
|
@@ -1,319 +0,0 @@
|
|
|
1
|
-
const require_chunk = require('./chunk-CUT6urMc.cjs');
|
|
2
|
-
const require_Text = require('./Text-DllCE9_D.cjs');
|
|
3
|
-
const require_Headline = require('./Headline-Cp79THVF.cjs');
|
|
4
|
-
const require_ImageWithFallback = require('./ImageWithFallback-Cx-KNi-D.cjs');
|
|
5
|
-
const require_Spinner = require('./Spinner-DFor2Szi.cjs');
|
|
6
|
-
let classnames = require("classnames");
|
|
7
|
-
classnames = require_chunk.__toESM(classnames);
|
|
8
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
-
react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
|
|
10
|
-
let react_icons_md = require("react-icons/md");
|
|
11
|
-
react_icons_md = require_chunk.__toESM(react_icons_md);
|
|
12
|
-
let __envive_ai_react_hooks_hooks_ImageResolver = require("@envive-ai/react-hooks/hooks/ImageResolver");
|
|
13
|
-
__envive_ai_react_hooks_hooks_ImageResolver = require_chunk.__toESM(__envive_ai_react_hooks_hooks_ImageResolver);
|
|
14
|
-
|
|
15
|
-
//#region src/logging/logger.ts
|
|
16
|
-
var Logger = class {
|
|
17
|
-
static logInfo(message, ...args) {
|
|
18
|
-
console.info(`INFO: ${message}`, ...args);
|
|
19
|
-
}
|
|
20
|
-
static logDebug(message, ...args) {
|
|
21
|
-
console.debug(`DEBUG: ${message}`, ...args);
|
|
22
|
-
}
|
|
23
|
-
static logError(message, error, ...args) {
|
|
24
|
-
console.error(`ERROR: ${message} error=${error}`, args);
|
|
25
|
-
}
|
|
26
|
-
static logWarn(message, error, ...args) {
|
|
27
|
-
console.warn(`WARN: ${message} error=${error}`, args);
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
var logger_default = Logger;
|
|
31
|
-
|
|
32
|
-
//#endregion
|
|
33
|
-
//#region src/util/formatPrice.ts
|
|
34
|
-
const formatPrice = (price, currency = "$") => {
|
|
35
|
-
if (price == null) return "";
|
|
36
|
-
const options = {};
|
|
37
|
-
if (!Number.isInteger(price)) {
|
|
38
|
-
options.minimumFractionDigits = 2;
|
|
39
|
-
options.maximumFractionDigits = 2;
|
|
40
|
-
}
|
|
41
|
-
return `${currency}${price.toLocaleString("en-US", options)}`;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
//#endregion
|
|
45
|
-
//#region src/components/ProductCard/productCardVariants.ts
|
|
46
|
-
/**
|
|
47
|
-
* Shared variant mapping configurations for ProductCard components
|
|
48
|
-
*/
|
|
49
|
-
const variantClassMap = new Map([
|
|
50
|
-
["filled", ["spiffy-tw-bg-[--spiffy-colors-background-secondary]", "spiffy-tw-shadow-md"]],
|
|
51
|
-
["bordered", [
|
|
52
|
-
"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
|
|
53
|
-
"spiffy-tw-border",
|
|
54
|
-
"spiffy-tw-border-[--spiffy-colors-border-light]"
|
|
55
|
-
]],
|
|
56
|
-
["minimal", ["spiffy-tw-bg-transparent"]],
|
|
57
|
-
["transparentBordered", [
|
|
58
|
-
"spiffy-tw-bg-transparent",
|
|
59
|
-
"spiffy-tw-border",
|
|
60
|
-
"spiffy-tw-border-[--spiffy-colors-border-light]"
|
|
61
|
-
]]
|
|
62
|
-
]);
|
|
63
|
-
const variantHoverClassMap = new Map([["backgroundDark", ["hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]"]], ["none", []]]);
|
|
64
|
-
const variantTitleColorMap = new Map([
|
|
65
|
-
["filled", "spiffy-tw-text-[--spiffy-colors-text-link]"],
|
|
66
|
-
["bordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
|
|
67
|
-
["minimal", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
|
|
68
|
-
["transparentBordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"]
|
|
69
|
-
]);
|
|
70
|
-
const productCardLayoutVariantClasses = {
|
|
71
|
-
normal: {
|
|
72
|
-
productTitle: ["spiffy-product-card-title"],
|
|
73
|
-
container: ["spiffy-tw-w-[208px]"],
|
|
74
|
-
verticalContainer: ["spiffy-tw-rounded-[8px]", "spiffy-tw-h-[268px]"]
|
|
75
|
-
},
|
|
76
|
-
tall: {
|
|
77
|
-
productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
|
|
78
|
-
container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[300px]"],
|
|
79
|
-
verticalContainer: ["lg:spiffy-tw-h-[496px]"]
|
|
80
|
-
},
|
|
81
|
-
square: {
|
|
82
|
-
productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
|
|
83
|
-
container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[280px]"],
|
|
84
|
-
verticalContainer: ["lg:spiffy-tw-h-[400px]"]
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
//#endregion
|
|
89
|
-
//#region src/components/ProductCard/ProductCard.tsx
|
|
90
|
-
const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
|
|
91
|
-
minimumFractionDigits: 1,
|
|
92
|
-
maximumFractionDigits: 1
|
|
93
|
-
}));
|
|
94
|
-
const RatingSummary = ({ stars, reviewCount, className }) => {
|
|
95
|
-
const group = (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]");
|
|
96
|
-
const starClassnames = (0, classnames.default)("spiffy-product-card-rating-star-color", "spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-w-[14px]", "spiffy-tw-h-[14px]");
|
|
97
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
98
|
-
className,
|
|
99
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
100
|
-
className: group,
|
|
101
|
-
children: [
|
|
102
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_md.MdStar, { className: starClassnames }),
|
|
103
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
|
|
104
|
-
variant: "body3",
|
|
105
|
-
children: formatReviews(stars)
|
|
106
|
-
}),
|
|
107
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
|
|
108
|
-
variant: "body3",
|
|
109
|
-
children: [
|
|
110
|
-
"(",
|
|
111
|
-
reviewCount,
|
|
112
|
-
")"
|
|
113
|
-
]
|
|
114
|
-
})
|
|
115
|
-
]
|
|
116
|
-
})
|
|
117
|
-
});
|
|
118
|
-
};
|
|
119
|
-
const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
|
|
120
|
-
if (!originalPrice) return null;
|
|
121
|
-
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]");
|
|
122
|
-
const showSalePrice = salePrice && originalPrice !== salePrice;
|
|
123
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
124
|
-
className: priceClassName,
|
|
125
|
-
children: [
|
|
126
|
-
pricePrefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, { children: pricePrefix }),
|
|
127
|
-
showSalePrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, { children: salePrice }),
|
|
128
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
|
|
129
|
-
className: showSalePrice ? "spiffy-tw-line-through" : "",
|
|
130
|
-
children: originalPrice
|
|
131
|
-
})
|
|
132
|
-
]
|
|
133
|
-
});
|
|
134
|
-
};
|
|
135
|
-
const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, handleClick }) => {
|
|
136
|
-
const { resolve } = (0, __envive_ai_react_hooks_hooks_ImageResolver.useImageResolver)();
|
|
137
|
-
const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
|
|
138
|
-
const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
|
|
139
|
-
const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
|
|
140
|
-
const pricePrefix = productCardConfig?.pricePrefix;
|
|
141
|
-
if (productCardConfig == null) {
|
|
142
|
-
logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
|
|
143
|
-
return null;
|
|
144
|
-
}
|
|
145
|
-
const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
|
|
146
|
-
const containerClassnames = (0, classnames.default)("spiffy-tw-cursor-pointer", "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-overflow-hidden", {
|
|
147
|
-
"spiffy-tw-h-full": growWithContainer,
|
|
148
|
-
"spiffy-tw-w-full": growWithContainer,
|
|
149
|
-
"spiffy-tw-max-w-full": growWithContainer
|
|
150
|
-
}, !growWithContainer && layoutClasses.container, variantClassMap.get(finalVariant) ?? [], variantHoverClassMap.get(finalHoverVariant) ?? []);
|
|
151
|
-
const verticalContainerVariantClasses = productCardLayoutVariantClasses[layoutVariant].verticalContainer;
|
|
152
|
-
const verticalContainerClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", {
|
|
153
|
-
"spiffy-tw-h-full": growWithContainer,
|
|
154
|
-
"spiffy-tw-w-full": growWithContainer,
|
|
155
|
-
"spiffy-tw-flex-1": growWithContainer
|
|
156
|
-
}, ...!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []);
|
|
157
|
-
const linkClassnames = (0, classnames.default)({
|
|
158
|
-
"spiffy-tw-w-full": true,
|
|
159
|
-
"spiffy-tw-h-full": true,
|
|
160
|
-
"spiffy-tw-overflow-hidden": true,
|
|
161
|
-
"spiffy-tw-select-none": true
|
|
162
|
-
});
|
|
163
|
-
const imageClipContainerClassnames = (0, classnames.default)("spiffy-tw-w-full", "spiffy-tw-overflow-hidden", {
|
|
164
|
-
"spiffy-tw-flex-shrink-0": growWithContainer,
|
|
165
|
-
"spiffy-tw-tw-h-full": !growWithContainer
|
|
166
|
-
}, aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "");
|
|
167
|
-
const imageContainerClassnames = (0, classnames.default)(linkClassnames, zoomOnHover ? [
|
|
168
|
-
"spiffy-tw-transition-transform",
|
|
169
|
-
"spiffy-tw-duration-200",
|
|
170
|
-
"spiffy-tw-origin-top",
|
|
171
|
-
"hover:spiffy-tw-scale-105"
|
|
172
|
-
] : []);
|
|
173
|
-
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" });
|
|
174
|
-
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", variantTitleColorMap.get(finalVariant) ?? "spiffy-tw-text-[--spiffy-colors-text-primary]", ...layoutClasses.productTitle);
|
|
175
|
-
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");
|
|
176
|
-
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");
|
|
177
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
178
|
-
className: containerClassnames,
|
|
179
|
-
"data-testid": dataTestId,
|
|
180
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
181
|
-
href: url,
|
|
182
|
-
onClick: () => handleClick(url),
|
|
183
|
-
target: "_self",
|
|
184
|
-
draggable: false,
|
|
185
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
186
|
-
className: verticalContainerClassnames,
|
|
187
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
188
|
-
className: imageClipContainerClassnames,
|
|
189
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
190
|
-
className: imageContainerClassnames,
|
|
191
|
-
children: imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageWithFallback.ImageWithFallback, {
|
|
192
|
-
src: resolve(imageUrl, layoutVariant === "tall" ? 300 : 178),
|
|
193
|
-
alt: title,
|
|
194
|
-
fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { className: "spiffy-tw-w-6 spiffy-tw-h-6" }),
|
|
195
|
-
imageClassnames
|
|
196
|
-
})
|
|
197
|
-
})
|
|
198
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
199
|
-
className: contentClassnames,
|
|
200
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Headline.Headline, {
|
|
201
|
-
variant: "h4",
|
|
202
|
-
className: productTitleClassnames,
|
|
203
|
-
children: title
|
|
204
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
205
|
-
className: priceAndRatingContainerClassnames,
|
|
206
|
-
children: [(originalPrice || salePrice) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PriceSection, {
|
|
207
|
-
originalPrice: formatPrice(originalPrice),
|
|
208
|
-
salePrice: formatPrice(salePrice),
|
|
209
|
-
pricePrefix
|
|
210
|
-
}), averageRating && numberReviews && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingSummary, {
|
|
211
|
-
stars: averageRating,
|
|
212
|
-
reviewCount: numberReviews
|
|
213
|
-
})]
|
|
214
|
-
})]
|
|
215
|
-
})]
|
|
216
|
-
})
|
|
217
|
-
})
|
|
218
|
-
});
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
//#endregion
|
|
222
|
-
//#region src/components/ProductCard/types.ts
|
|
223
|
-
let ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
|
|
224
|
-
ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON_CONTAINER"] = "spiffy-product-card-skeleton-container";
|
|
225
|
-
ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON"] = "spiffy-product-card-skeleton";
|
|
226
|
-
return ProductCardSkeletonOverrides$1;
|
|
227
|
-
}({});
|
|
228
|
-
let AnimatedProductCardOverrides = /* @__PURE__ */ function(AnimatedProductCardOverrides$1) {
|
|
229
|
-
AnimatedProductCardOverrides$1["PRODUCT_CARD_ANIMATED_CONTAINER"] = "spiffy-product-card-animated-container";
|
|
230
|
-
AnimatedProductCardOverrides$1["PRODUCT_CARD_ANIMATED_IMAGE_CONTAINER"] = "spiffy-product-card-animated";
|
|
231
|
-
return AnimatedProductCardOverrides$1;
|
|
232
|
-
}({});
|
|
233
|
-
|
|
234
|
-
//#endregion
|
|
235
|
-
//#region src/components/ProductCard/ProductCardSkeleton.tsx
|
|
236
|
-
const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
|
|
237
|
-
const layoutClasses = productCardLayoutVariantClasses[layoutVariant || "normal"];
|
|
238
|
-
const containerClasses = (0, classnames.default)(ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON_CONTAINER, "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-bg-transparent", !growWithContainer ? layoutClasses.container : "");
|
|
239
|
-
const verticalContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", !growWithContainer ? layoutClasses.verticalContainer : "");
|
|
240
|
-
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");
|
|
241
|
-
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");
|
|
242
|
-
const contentContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-2", "spiffy-tw-w-full", "spiffy-tw-p-2");
|
|
243
|
-
const textSkeletonClasses = (0, classnames.default)(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]");
|
|
244
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
245
|
-
className: containerClasses,
|
|
246
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
247
|
-
className: verticalContainerClasses,
|
|
248
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
249
|
-
className: imageClipContainerClasses,
|
|
250
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: imageSkeletonClasses })
|
|
251
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
252
|
-
className: contentContainerClasses,
|
|
253
|
-
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%]") })]
|
|
254
|
-
})]
|
|
255
|
-
})
|
|
256
|
-
});
|
|
257
|
-
};
|
|
258
|
-
|
|
259
|
-
//#endregion
|
|
260
|
-
Object.defineProperty(exports, 'AnimatedProductCardOverrides', {
|
|
261
|
-
enumerable: true,
|
|
262
|
-
get: function () {
|
|
263
|
-
return AnimatedProductCardOverrides;
|
|
264
|
-
}
|
|
265
|
-
});
|
|
266
|
-
Object.defineProperty(exports, 'PriceSection', {
|
|
267
|
-
enumerable: true,
|
|
268
|
-
get: function () {
|
|
269
|
-
return PriceSection;
|
|
270
|
-
}
|
|
271
|
-
});
|
|
272
|
-
Object.defineProperty(exports, 'ProductCard', {
|
|
273
|
-
enumerable: true,
|
|
274
|
-
get: function () {
|
|
275
|
-
return ProductCard;
|
|
276
|
-
}
|
|
277
|
-
});
|
|
278
|
-
Object.defineProperty(exports, 'ProductCardSkeleton', {
|
|
279
|
-
enumerable: true,
|
|
280
|
-
get: function () {
|
|
281
|
-
return ProductCardSkeleton;
|
|
282
|
-
}
|
|
283
|
-
});
|
|
284
|
-
Object.defineProperty(exports, 'ProductCardSkeletonOverrides', {
|
|
285
|
-
enumerable: true,
|
|
286
|
-
get: function () {
|
|
287
|
-
return ProductCardSkeletonOverrides;
|
|
288
|
-
}
|
|
289
|
-
});
|
|
290
|
-
Object.defineProperty(exports, 'RatingSummary', {
|
|
291
|
-
enumerable: true,
|
|
292
|
-
get: function () {
|
|
293
|
-
return RatingSummary;
|
|
294
|
-
}
|
|
295
|
-
});
|
|
296
|
-
Object.defineProperty(exports, 'productCardLayoutVariantClasses', {
|
|
297
|
-
enumerable: true,
|
|
298
|
-
get: function () {
|
|
299
|
-
return productCardLayoutVariantClasses;
|
|
300
|
-
}
|
|
301
|
-
});
|
|
302
|
-
Object.defineProperty(exports, 'variantClassMap', {
|
|
303
|
-
enumerable: true,
|
|
304
|
-
get: function () {
|
|
305
|
-
return variantClassMap;
|
|
306
|
-
}
|
|
307
|
-
});
|
|
308
|
-
Object.defineProperty(exports, 'variantHoverClassMap', {
|
|
309
|
-
enumerable: true,
|
|
310
|
-
get: function () {
|
|
311
|
-
return variantHoverClassMap;
|
|
312
|
-
}
|
|
313
|
-
});
|
|
314
|
-
Object.defineProperty(exports, 'variantTitleColorMap', {
|
|
315
|
-
enumerable: true,
|
|
316
|
-
get: function () {
|
|
317
|
-
return variantTitleColorMap;
|
|
318
|
-
}
|
|
319
|
-
});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
require('../textVariantClasses-CBre7vXv.cjs');
|
|
2
|
-
require('../Text-DllCE9_D.cjs');
|
|
3
|
-
require('../Headline-Cp79THVF.cjs');
|
|
4
|
-
require('../ImageWithFallback-Cx-KNi-D.cjs');
|
|
5
|
-
require('../ProductCard-EmdDy2af.cjs');
|
|
6
|
-
require('../Spinner-DFor2Szi.cjs');
|
|
7
|
-
const require_ProductGrid = require('../ProductGrid-CMoomZLc.cjs');
|
|
8
|
-
|
|
9
|
-
exports.ProductGrid = require_ProductGrid.ProductGrid;
|
|
10
|
-
exports.productGridVariantClasses = require_ProductGrid.productGridVariantClasses;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-DDp-fLgm.cjs";
|
|
2
|
-
import * as react_jsx_runtime5 from "react/jsx-runtime";
|
|
3
|
-
import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
|
|
4
|
-
|
|
5
|
-
//#region src/components/ProductGrid/ProductGrid.d.ts
|
|
6
|
-
interface ProductGridProps {
|
|
7
|
-
productList: SearchResponseProduct[];
|
|
8
|
-
productGridVariant: ProductGridVariant;
|
|
9
|
-
productGridClasses: string;
|
|
10
|
-
productCardConfig?: ProductCardConfig;
|
|
11
|
-
merchantShortName: string;
|
|
12
|
-
cardsGrowWithContainer?: boolean;
|
|
13
|
-
}
|
|
14
|
-
declare const ProductGrid: ({
|
|
15
|
-
productList,
|
|
16
|
-
productGridVariant,
|
|
17
|
-
productGridClasses,
|
|
18
|
-
productCardConfig,
|
|
19
|
-
merchantShortName,
|
|
20
|
-
cardsGrowWithContainer
|
|
21
|
-
}: ProductGridProps) => react_jsx_runtime5.JSX.Element;
|
|
22
|
-
//#endregion
|
|
23
|
-
//#region src/components/ProductGrid/productGridVariants.d.ts
|
|
24
|
-
interface ProductGridVariantClasses {
|
|
25
|
-
productCardVariant: ProductCardVariant;
|
|
26
|
-
productCardHoverVariant: ProductCardHoverVariant;
|
|
27
|
-
productCardLayoutVariant: ProductCardLayoutVariant;
|
|
28
|
-
productCardImageAspectRatio: '3:4' | 'square' | 'none';
|
|
29
|
-
zoomOnHover: boolean;
|
|
30
|
-
}
|
|
31
|
-
declare const productGridVariantClasses: Record<ProductGridVariant, ProductGridVariantClasses>;
|
|
32
|
-
//#endregion
|
|
33
|
-
export { ProductGrid, productGridVariantClasses };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-DADHwW6M.js";
|
|
2
|
-
import * as react_jsx_runtime10 from "react/jsx-runtime";
|
|
3
|
-
import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
|
|
4
|
-
|
|
5
|
-
//#region src/components/ProductGrid/ProductGrid.d.ts
|
|
6
|
-
interface ProductGridProps {
|
|
7
|
-
productList: SearchResponseProduct[];
|
|
8
|
-
productGridVariant: ProductGridVariant;
|
|
9
|
-
productGridClasses: string;
|
|
10
|
-
productCardConfig?: ProductCardConfig;
|
|
11
|
-
merchantShortName: string;
|
|
12
|
-
cardsGrowWithContainer?: boolean;
|
|
13
|
-
}
|
|
14
|
-
declare const ProductGrid: ({
|
|
15
|
-
productList,
|
|
16
|
-
productGridVariant,
|
|
17
|
-
productGridClasses,
|
|
18
|
-
productCardConfig,
|
|
19
|
-
merchantShortName,
|
|
20
|
-
cardsGrowWithContainer
|
|
21
|
-
}: ProductGridProps) => react_jsx_runtime10.JSX.Element;
|
|
22
|
-
//#endregion
|
|
23
|
-
//#region src/components/ProductGrid/productGridVariants.d.ts
|
|
24
|
-
interface ProductGridVariantClasses {
|
|
25
|
-
productCardVariant: ProductCardVariant;
|
|
26
|
-
productCardHoverVariant: ProductCardHoverVariant;
|
|
27
|
-
productCardLayoutVariant: ProductCardLayoutVariant;
|
|
28
|
-
productCardImageAspectRatio: '3:4' | 'square' | 'none';
|
|
29
|
-
zoomOnHover: boolean;
|
|
30
|
-
}
|
|
31
|
-
declare const productGridVariantClasses: Record<ProductGridVariant, ProductGridVariantClasses>;
|
|
32
|
-
//#endregion
|
|
33
|
-
export { ProductGrid, productGridVariantClasses };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import "../textVariantClasses-CRrTb43V.js";
|
|
2
|
-
import "../Text-BLzNhX4H.js";
|
|
3
|
-
import "../Headline-COv0Jbn8.js";
|
|
4
|
-
import "../ImageWithFallback-DqxjwO3i.js";
|
|
5
|
-
import "../ProductCard-CNwmHggx.js";
|
|
6
|
-
import "../Spinner-CjGLIRgs.js";
|
|
7
|
-
import { ProductGrid, productGridVariantClasses } from "../ProductGrid-nmWSp0qX.js";
|
|
8
|
-
|
|
9
|
-
export { ProductGrid, productGridVariantClasses };
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
const require_chunk = require('./chunk-CUT6urMc.cjs');
|
|
2
|
-
const require_ProductCard = require('./ProductCard-EmdDy2af.cjs');
|
|
3
|
-
let classnames = require("classnames");
|
|
4
|
-
classnames = require_chunk.__toESM(classnames);
|
|
5
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
|
-
react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
|
|
7
|
-
|
|
8
|
-
//#region src/components/ProductGrid/productGridVariants.ts
|
|
9
|
-
const productGridVariantClasses = {
|
|
10
|
-
standard: {
|
|
11
|
-
productCardVariant: "minimal",
|
|
12
|
-
productCardHoverVariant: "backgroundDark",
|
|
13
|
-
productCardLayoutVariant: "tall",
|
|
14
|
-
productCardImageAspectRatio: "3:4",
|
|
15
|
-
zoomOnHover: true
|
|
16
|
-
},
|
|
17
|
-
square: {
|
|
18
|
-
productCardVariant: "minimal",
|
|
19
|
-
productCardHoverVariant: "backgroundDark",
|
|
20
|
-
productCardLayoutVariant: "square",
|
|
21
|
-
productCardImageAspectRatio: "square",
|
|
22
|
-
zoomOnHover: true
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
//#endregion
|
|
27
|
-
//#region src/components/ProductGrid/ProductGrid.tsx
|
|
28
|
-
const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true }) => {
|
|
29
|
-
const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
|
|
30
|
-
const cardContainerClasses = (0, classnames.default)({
|
|
31
|
-
"spiffy-tw-w-full": cardsGrowWithContainer,
|
|
32
|
-
"spiffy-tw-h-full": cardsGrowWithContainer
|
|
33
|
-
});
|
|
34
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
35
|
-
className: productGridClasses,
|
|
36
|
-
children: productList.map((product) => {
|
|
37
|
-
const camelCasedProduct = product;
|
|
38
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
39
|
-
className: cardContainerClasses,
|
|
40
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCard, {
|
|
41
|
-
productCardConfig,
|
|
42
|
-
merchantShortName,
|
|
43
|
-
imageUrl: camelCasedProduct.imageUrl,
|
|
44
|
-
title: camelCasedProduct.title,
|
|
45
|
-
url: camelCasedProduct.url,
|
|
46
|
-
originalPrice: camelCasedProduct.originalPrice,
|
|
47
|
-
salePrice: camelCasedProduct.salePrice,
|
|
48
|
-
averageRating: camelCasedProduct.averageRating,
|
|
49
|
-
numberReviews: camelCasedProduct.numberReviews,
|
|
50
|
-
layoutVariant: productCardLayoutVariant,
|
|
51
|
-
variant: productCardVariant,
|
|
52
|
-
hoverVariant: productCardHoverVariant,
|
|
53
|
-
zoomOnHover,
|
|
54
|
-
aspectRatio: productCardImageAspectRatio,
|
|
55
|
-
growWithContainer: cardsGrowWithContainer
|
|
56
|
-
}, camelCasedProduct.id)
|
|
57
|
-
}, camelCasedProduct.id);
|
|
58
|
-
})
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
//#endregion
|
|
63
|
-
Object.defineProperty(exports, 'ProductGrid', {
|
|
64
|
-
enumerable: true,
|
|
65
|
-
get: function () {
|
|
66
|
-
return ProductGrid;
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
Object.defineProperty(exports, 'productGridVariantClasses', {
|
|
70
|
-
enumerable: true,
|
|
71
|
-
get: function () {
|
|
72
|
-
return productGridVariantClasses;
|
|
73
|
-
}
|
|
74
|
-
});
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { ProductCard } from "./ProductCard-CNwmHggx.js";
|
|
2
|
-
import classNames from "classnames";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
|
-
//#region src/components/ProductGrid/productGridVariants.ts
|
|
6
|
-
const productGridVariantClasses = {
|
|
7
|
-
standard: {
|
|
8
|
-
productCardVariant: "minimal",
|
|
9
|
-
productCardHoverVariant: "backgroundDark",
|
|
10
|
-
productCardLayoutVariant: "tall",
|
|
11
|
-
productCardImageAspectRatio: "3:4",
|
|
12
|
-
zoomOnHover: true
|
|
13
|
-
},
|
|
14
|
-
square: {
|
|
15
|
-
productCardVariant: "minimal",
|
|
16
|
-
productCardHoverVariant: "backgroundDark",
|
|
17
|
-
productCardLayoutVariant: "square",
|
|
18
|
-
productCardImageAspectRatio: "square",
|
|
19
|
-
zoomOnHover: true
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
//#endregion
|
|
24
|
-
//#region src/components/ProductGrid/ProductGrid.tsx
|
|
25
|
-
const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true }) => {
|
|
26
|
-
const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
|
|
27
|
-
const cardContainerClasses = classNames({
|
|
28
|
-
"spiffy-tw-w-full": cardsGrowWithContainer,
|
|
29
|
-
"spiffy-tw-h-full": cardsGrowWithContainer
|
|
30
|
-
});
|
|
31
|
-
return /* @__PURE__ */ jsx("div", {
|
|
32
|
-
className: productGridClasses,
|
|
33
|
-
children: productList.map((product) => {
|
|
34
|
-
const camelCasedProduct = product;
|
|
35
|
-
return /* @__PURE__ */ jsx("div", {
|
|
36
|
-
className: cardContainerClasses,
|
|
37
|
-
children: /* @__PURE__ */ jsx(ProductCard, {
|
|
38
|
-
productCardConfig,
|
|
39
|
-
merchantShortName,
|
|
40
|
-
imageUrl: camelCasedProduct.imageUrl,
|
|
41
|
-
title: camelCasedProduct.title,
|
|
42
|
-
url: camelCasedProduct.url,
|
|
43
|
-
originalPrice: camelCasedProduct.originalPrice,
|
|
44
|
-
salePrice: camelCasedProduct.salePrice,
|
|
45
|
-
averageRating: camelCasedProduct.averageRating,
|
|
46
|
-
numberReviews: camelCasedProduct.numberReviews,
|
|
47
|
-
layoutVariant: productCardLayoutVariant,
|
|
48
|
-
variant: productCardVariant,
|
|
49
|
-
hoverVariant: productCardHoverVariant,
|
|
50
|
-
zoomOnHover,
|
|
51
|
-
aspectRatio: productCardImageAspectRatio,
|
|
52
|
-
growWithContainer: cardsGrowWithContainer
|
|
53
|
-
}, camelCasedProduct.id)
|
|
54
|
-
}, camelCasedProduct.id);
|
|
55
|
-
})
|
|
56
|
-
});
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
//#endregion
|
|
60
|
-
export { ProductGrid, productGridVariantClasses };
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime18 from "react/jsx-runtime";
|
|
2
|
-
import { TestProps } from "@envive-ai/react-hooks/types";
|
|
3
|
-
|
|
4
|
-
//#region src/components/RadioButton/RadioButton.d.ts
|
|
5
|
-
interface RadioButtonProps extends TestProps {
|
|
6
|
-
isDisabled?: boolean;
|
|
7
|
-
label: string;
|
|
8
|
-
name: string;
|
|
9
|
-
value: string;
|
|
10
|
-
textButtonGap?: 'small' | 'medium' | 'large';
|
|
11
|
-
fillColor?: string;
|
|
12
|
-
hoverColor?: string;
|
|
13
|
-
uncheckedBorderColor?: string;
|
|
14
|
-
checked?: boolean;
|
|
15
|
-
onChange: (value: string) => void;
|
|
16
|
-
id: any;
|
|
17
|
-
}
|
|
18
|
-
declare const RadioButton: ({
|
|
19
|
-
isDisabled,
|
|
20
|
-
label,
|
|
21
|
-
name,
|
|
22
|
-
value,
|
|
23
|
-
textButtonGap,
|
|
24
|
-
fillColor,
|
|
25
|
-
hoverColor,
|
|
26
|
-
uncheckedBorderColor,
|
|
27
|
-
checked,
|
|
28
|
-
onChange,
|
|
29
|
-
id
|
|
30
|
-
}: RadioButtonProps) => react_jsx_runtime18.JSX.Element;
|
|
31
|
-
//#endregion
|
|
32
|
-
export { RadioButton };
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime11 from "react/jsx-runtime";
|
|
2
|
-
import { TestProps } from "@envive-ai/react-hooks/types";
|
|
3
|
-
|
|
4
|
-
//#region src/components/RadioButton/RadioButton.d.ts
|
|
5
|
-
interface RadioButtonProps extends TestProps {
|
|
6
|
-
isDisabled?: boolean;
|
|
7
|
-
label: string;
|
|
8
|
-
name: string;
|
|
9
|
-
value: string;
|
|
10
|
-
textButtonGap?: 'small' | 'medium' | 'large';
|
|
11
|
-
fillColor?: string;
|
|
12
|
-
hoverColor?: string;
|
|
13
|
-
uncheckedBorderColor?: string;
|
|
14
|
-
checked?: boolean;
|
|
15
|
-
onChange: (value: string) => void;
|
|
16
|
-
id: any;
|
|
17
|
-
}
|
|
18
|
-
declare const RadioButton: ({
|
|
19
|
-
isDisabled,
|
|
20
|
-
label,
|
|
21
|
-
name,
|
|
22
|
-
value,
|
|
23
|
-
textButtonGap,
|
|
24
|
-
fillColor,
|
|
25
|
-
hoverColor,
|
|
26
|
-
uncheckedBorderColor,
|
|
27
|
-
checked,
|
|
28
|
-
onChange,
|
|
29
|
-
id
|
|
30
|
-
}: RadioButtonProps) => react_jsx_runtime11.JSX.Element;
|
|
31
|
-
//#endregion
|
|
32
|
-
export { RadioButton };
|