@envive-ai/react-widgets 0.1.3 → 0.3.1

package/dist/packages/components/dist/components/ModalSheet/mobile/index.cjs

@@ -1,116 +0,0 @@
-const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
-const require_mobileHeader = require('./mobileHeader.cjs');
-let react = require("react");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let framer_motion = require("framer-motion");
-
-//#region ../components/dist/components/ModalSheet/mobile/index.js
-const ModalSheetMobile = ({ children, isOpen, closeModal, mobileFullHeight = 180, animationDuration, headerProps, footerProps }) => {
-	const [isHidden, setIsHidden] = (0, react.useState)(isOpen ? "block" : "none");
-	const [bottom, setBottom] = (0, react.useState)(isOpen ? 0 : 0 - mobileFullHeight);
-	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(isOpen ? 1 : 0);
-	(0, react.useEffect)(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [mobileFullHeight, isOpen]);
-	const overlayClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-bg-black/30": true,
-		"spiffy-tw-z-[100]": true
-	});
-	const modalClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true,
-		"spiffy-tw-rounded-t-[16px]": true,
-		"spiffy-tw-h-[89%]": true,
-		"spiffy-tw-max-h-[89%]": true
-	});
-	const contentClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-h-full": true
-	});
-	const headerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-[0px]": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-[0px]": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: overlayClassNames,
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				bottom,
-				display: isHidden
-			},
-			animate: {
-				bottom,
-				display: isHidden
-			},
-			exit: {
-				bottom,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_mobileHeader.ModalSheetMobileHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							handleHeaderClick: closeModal,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-exports.ModalSheetMobile = ModalSheetMobile;

package/dist/packages/components/dist/components/ModalSheet/mobile/index.js

@@ -1,114 +0,0 @@
-import { ModalSheetMobileHeader } from "./mobileHeader.js";
-import { useEffect, useState } from "react";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-
-//#region ../components/dist/components/ModalSheet/mobile/index.js
-const ModalSheetMobile = ({ children, isOpen, closeModal, mobileFullHeight = 180, animationDuration, headerProps, footerProps }) => {
-	const [isHidden, setIsHidden] = useState(isOpen ? "block" : "none");
-	const [bottom, setBottom] = useState(isOpen ? 0 : 0 - mobileFullHeight);
-	const [overlayOpacity, setOverlayOpacity] = useState(isOpen ? 1 : 0);
-	useEffect(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [mobileFullHeight, isOpen]);
-	const overlayClassNames = classNames({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-bg-black/30": true,
-		"spiffy-tw-z-[100]": true
-	});
-	const modalClassNames = classNames({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true,
-		"spiffy-tw-rounded-t-[16px]": true,
-		"spiffy-tw-h-[89%]": true,
-		"spiffy-tw-max-h-[89%]": true
-	});
-	const contentClassNames = classNames({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-h-full": true
-	});
-	const headerClassNames = classNames({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-[0px]": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = classNames({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-[0px]": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(motion.div, {
-		className: overlayClassNames,
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ jsx(motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				bottom,
-				display: isHidden
-			},
-			animate: {
-				bottom,
-				display: isHidden
-			},
-			exit: {
-				bottom,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsxs("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ jsx(ModalSheetMobileHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							handleHeaderClick: closeModal,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ jsx("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ jsx("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-export { ModalSheetMobile };

package/dist/packages/components/dist/components/ModalSheet/mobile/mobileHeader.cjs

@@ -1,38 +0,0 @@
-const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
-const require_AnimatedChevron = require('../../AnimatedChevron/AnimatedChevron.cjs');
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let framer_motion = require("framer-motion");
-
-//#region ../components/dist/components/ModalSheet/mobile/mobileHeader.js
-const modalSheetVariants = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
-	const animationKey = (0, framer_motion.useMotionValue)(-1);
-	const headerClassName = (0, classnames.default)({
-		"spiffy-modal-sheet-header": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-items-center": true,
-		"spiffy-tw-justify-between": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-pt-[16px]": true,
-		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
-		...modalSheetVariants[headerVariant]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
-		className: headerClassName,
-		onTouchStart: handleHeaderClick,
-		onMouseDown: handleHeaderClick,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedChevron.AnimatedChevron, {
-			animationKey,
-			chevronColor
-		}), headerContent]
-	});
-};
-
-//#endregion
-exports.ModalSheetMobileHeader = ModalSheetMobileHeader;

package/dist/packages/components/dist/components/ModalSheet/mobile/mobileHeader.js

@@ -1,36 +0,0 @@
-import { AnimatedChevron } from "../../AnimatedChevron/AnimatedChevron.js";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useMotionValue } from "framer-motion";
-
-//#region ../components/dist/components/ModalSheet/mobile/mobileHeader.js
-const modalSheetVariants = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
-	const animationKey = useMotionValue(-1);
-	const headerClassName = classNames({
-		"spiffy-modal-sheet-header": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-items-center": true,
-		"spiffy-tw-justify-between": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-pt-[16px]": true,
-		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
-		...modalSheetVariants[headerVariant]
-	});
-	return /* @__PURE__ */ jsxs(motion.div, {
-		className: headerClassName,
-		onTouchStart: handleHeaderClick,
-		onMouseDown: handleHeaderClick,
-		children: [/* @__PURE__ */ jsx(AnimatedChevron, {
-			animationKey,
-			chevronColor
-		}), headerContent]
-	});
-};
-
-//#endregion
-export { ModalSheetMobileHeader };

package/dist/packages/components/dist/components/ProductCard/ProductCard.cjs

@@ -1,153 +0,0 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
-const require_Typography = require('../Typography/Typography.cjs');
-require('../Typography/index.cjs');
-const require_formatPrice = require('../../util/formatPrice.cjs');
-const require_ImageWithFallback = require('../ImageWithFallback/ImageWithFallback.cjs');
-require('../ImageWithFallback/index.cjs');
-const require_logger = require('../../logging/logger.cjs');
-const require_productCardVariants = require('./productCardVariants.cjs');
-const require_Spinner = require('../Spinner/Spinner.cjs');
-require('../Spinner/index.cjs');
-const require_index$3 = require('../../../../../node_modules/react-icons/md/index.cjs');
-let __envive_ai_react_hooks_config = require("@envive-ai/react-hooks/config");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_hooks_ImageResolver = require("@envive-ai/react-hooks/hooks/ImageResolver");
-
-//#region ../components/dist/components/ProductCard/ProductCard.js
-const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
-	minimumFractionDigits: 1,
-	maximumFractionDigits: 1
-}));
-const RatingSummary = ({ stars, reviewCount, className }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			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]"),
-			children: [
-				/* @__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]") }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-					variant: "body3",
-					children: formatReviews(stars)
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
-					variant: "body3",
-					children: [
-						"(",
-						reviewCount,
-						")"
-					]
-				})
-			]
-		})
-	});
-};
-const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
-	if (!originalPrice) return null;
-	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]");
-	const showSalePrice = salePrice && originalPrice !== salePrice;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: priceClassName,
-		children: [
-			pricePrefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, { children: pricePrefix }),
-			showSalePrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, { children: salePrice }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-				className: showSalePrice ? "spiffy-tw-line-through" : "",
-				children: originalPrice
-			})
-		]
-	});
-};
-const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, onClick }) => {
-	const { resolve } = (0, __envive_ai_react_hooks_hooks_ImageResolver.useImageResolver)();
-	const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
-	const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
-	const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
-	const pricePrefix = productCardConfig?.pricePrefix;
-	const handleClick = () => onClick();
-	if (productCardConfig == null) {
-		require_logger.logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
-		return null;
-	}
-	const layoutClasses = require_productCardVariants.productCardLayoutVariantClasses[finalLayoutVariant];
-	const containerClassnames = (0, classnames.default)("spiffy-tw-cursor-pointer", "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-overflow-hidden", {
-		"spiffy-tw-h-full": growWithContainer,
-		"spiffy-tw-w-full": growWithContainer,
-		"spiffy-tw-max-w-full": growWithContainer,
-		"spiffy-tw-rounded-[8px]": layoutVariant === "normal"
-	}, !growWithContainer && layoutClasses.container, require_productCardVariants.variantClassMap.get(finalVariant) ?? [], require_productCardVariants.variantHoverClassMap.get(finalHoverVariant) ?? []);
-	const verticalContainerVariantClasses = require_productCardVariants.productCardLayoutVariantClasses[layoutVariant].verticalContainer;
-	const verticalContainerClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", {
-		"spiffy-tw-h-full": growWithContainer,
-		"spiffy-tw-w-full": growWithContainer,
-		"spiffy-tw-flex-1": growWithContainer
-	}, ...!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []);
-	const linkClassnames = (0, classnames.default)({
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-h-full": true,
-		"spiffy-tw-overflow-hidden": true,
-		"spiffy-tw-select-none": true
-	});
-	const imageClipContainerClassnames = (0, classnames.default)("spiffy-tw-w-full", "spiffy-tw-overflow-hidden", {
-		"spiffy-tw-flex-shrink-0": growWithContainer,
-		"spiffy-tw-tw-h-full": !growWithContainer
-	}, aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "");
-	const imageContainerClassnames = (0, classnames.default)(linkClassnames, zoomOnHover ? [
-		"spiffy-tw-transition-transform",
-		"spiffy-tw-duration-200",
-		"spiffy-tw-origin-top",
-		"hover:spiffy-tw-scale-105"
-	] : []);
-	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" });
-	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);
-	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");
-	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");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: containerClassnames,
-		"data-testid": dataTestId ?? __envive_ai_react_hooks_config.PRODUCT_CARD_TESTID,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-			href: url,
-			onClick: () => handleClick(),
-			target: "_self",
-			draggable: false,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: verticalContainerClassnames,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: imageClipContainerClassnames,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: imageContainerClassnames,
-						children: imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageWithFallback.ImageWithFallback, {
-							src: resolve(imageUrl, layoutVariant === "tall" ? 300 : 178),
-							alt: title,
-							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { className: "spiffy-tw-h-6 spiffy-tw-w-6" }),
-							imageClassnames
-						})
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: contentClassnames,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-						variant: "h4",
-						className: productTitleClassnames,
-						children: title
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: priceAndRatingContainerClassnames,
-						children: [(originalPrice || salePrice) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PriceSection, {
-							originalPrice: require_formatPrice.formatPrice(originalPrice),
-							salePrice: require_formatPrice.formatPrice(salePrice),
-							pricePrefix
-						}), averageRating && numberReviews && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingSummary, {
-							stars: averageRating,
-							reviewCount: numberReviews
-						})]
-					})]
-				})]
-			})
-		})
-	});
-};
-
-//#endregion
-exports.PriceSection = PriceSection;
-exports.ProductCard = ProductCard;
-exports.RatingSummary = RatingSummary;

package/dist/packages/components/dist/components/ProductCard/ProductCard.js

@@ -1,149 +0,0 @@
-import { Typography } from "../Typography/Typography.js";
-import "../Typography/index.js";
-import { formatPrice } from "../../util/formatPrice.js";
-import { ImageWithFallback } from "../ImageWithFallback/ImageWithFallback.js";
-import "../ImageWithFallback/index.js";
-import { logger_default } from "../../logging/logger.js";
-import { productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "./productCardVariants.js";
-import { Spinner } from "../Spinner/Spinner.js";
-import "../Spinner/index.js";
-import { MdStar } from "../../../../../node_modules/react-icons/md/index.js";
-import { PRODUCT_CARD_TESTID } from "@envive-ai/react-hooks/config";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useImageResolver } from "@envive-ai/react-hooks/hooks/ImageResolver";
-
-//#region ../components/dist/components/ProductCard/ProductCard.js
-const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
-	minimumFractionDigits: 1,
-	maximumFractionDigits: 1
-}));
-const RatingSummary = ({ stars, reviewCount, className }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		children: /* @__PURE__ */ jsxs("div", {
-			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]"),
-			children: [
-				/* @__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]") }),
-				/* @__PURE__ */ jsx(Typography, {
-					variant: "body3",
-					children: formatReviews(stars)
-				}),
-				/* @__PURE__ */ jsxs(Typography, {
-					variant: "body3",
-					children: [
-						"(",
-						reviewCount,
-						")"
-					]
-				})
-			]
-		})
-	});
-};
-const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
-	if (!originalPrice) return null;
-	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]");
-	const showSalePrice = salePrice && originalPrice !== salePrice;
-	return /* @__PURE__ */ jsxs("div", {
-		className: priceClassName,
-		children: [
-			pricePrefix && /* @__PURE__ */ jsx(Typography, { children: pricePrefix }),
-			showSalePrice && /* @__PURE__ */ jsx(Typography, { children: salePrice }),
-			/* @__PURE__ */ jsx(Typography, {
-				className: showSalePrice ? "spiffy-tw-line-through" : "",
-				children: originalPrice
-			})
-		]
-	});
-};
-const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, onClick }) => {
-	const { resolve } = useImageResolver();
-	const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
-	const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
-	const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
-	const pricePrefix = productCardConfig?.pricePrefix;
-	const handleClick = () => onClick();
-	if (productCardConfig == null) {
-		logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
-		return null;
-	}
-	const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
-	const containerClassnames = classNames("spiffy-tw-cursor-pointer", "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-overflow-hidden", {
-		"spiffy-tw-h-full": growWithContainer,
-		"spiffy-tw-w-full": growWithContainer,
-		"spiffy-tw-max-w-full": growWithContainer,
-		"spiffy-tw-rounded-[8px]": layoutVariant === "normal"
-	}, !growWithContainer && layoutClasses.container, variantClassMap.get(finalVariant) ?? [], variantHoverClassMap.get(finalHoverVariant) ?? []);
-	const verticalContainerVariantClasses = productCardLayoutVariantClasses[layoutVariant].verticalContainer;
-	const verticalContainerClassnames = classNames("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", {
-		"spiffy-tw-h-full": growWithContainer,
-		"spiffy-tw-w-full": growWithContainer,
-		"spiffy-tw-flex-1": growWithContainer
-	}, ...!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []);
-	const linkClassnames = classNames({
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-h-full": true,
-		"spiffy-tw-overflow-hidden": true,
-		"spiffy-tw-select-none": true
-	});
-	const imageClipContainerClassnames = classNames("spiffy-tw-w-full", "spiffy-tw-overflow-hidden", {
-		"spiffy-tw-flex-shrink-0": growWithContainer,
-		"spiffy-tw-tw-h-full": !growWithContainer
-	}, aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "");
-	const imageContainerClassnames = classNames(linkClassnames, zoomOnHover ? [
-		"spiffy-tw-transition-transform",
-		"spiffy-tw-duration-200",
-		"spiffy-tw-origin-top",
-		"hover:spiffy-tw-scale-105"
-	] : []);
-	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" });
-	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);
-	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");
-	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");
-	return /* @__PURE__ */ jsx("div", {
-		className: containerClassnames,
-		"data-testid": dataTestId ?? PRODUCT_CARD_TESTID,
-		children: /* @__PURE__ */ jsx("a", {
-			href: url,
-			onClick: () => handleClick(),
-			target: "_self",
-			draggable: false,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: verticalContainerClassnames,
-				children: [/* @__PURE__ */ jsx("div", {
-					className: imageClipContainerClassnames,
-					children: /* @__PURE__ */ jsx("div", {
-						className: imageContainerClassnames,
-						children: imageUrl && /* @__PURE__ */ jsx(ImageWithFallback, {
-							src: resolve(imageUrl, layoutVariant === "tall" ? 300 : 178),
-							alt: title,
-							fallback: /* @__PURE__ */ jsx(Spinner, { className: "spiffy-tw-h-6 spiffy-tw-w-6" }),
-							imageClassnames
-						})
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: contentClassnames,
-					children: [/* @__PURE__ */ jsx(Typography, {
-						variant: "h4",
-						className: productTitleClassnames,
-						children: title
-					}), /* @__PURE__ */ jsxs("div", {
-						className: priceAndRatingContainerClassnames,
-						children: [(originalPrice || salePrice) && /* @__PURE__ */ jsx(PriceSection, {
-							originalPrice: formatPrice(originalPrice),
-							salePrice: formatPrice(salePrice),
-							pricePrefix
-						}), averageRating && numberReviews && /* @__PURE__ */ jsx(RatingSummary, {
-							stars: averageRating,
-							reviewCount: numberReviews
-						})]
-					})]
-				})]
-			})
-		})
-	});
-};
-
-//#endregion
-export { PriceSection, ProductCard, RatingSummary };

package/dist/packages/components/dist/components/ProductCard/ProductCardSkeleton.cjs

@@ -1,33 +0,0 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
-const require_productCardVariants = require('./productCardVariants.cjs');
-const require_types = require('./types.cjs');
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region ../components/dist/components/ProductCard/ProductCardSkeleton.js
-const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
-	const layoutClasses = require_productCardVariants.productCardLayoutVariantClasses[layoutVariant || "normal"];
-	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 : "");
-	const verticalContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", !growWithContainer ? layoutClasses.verticalContainer : "");
-	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");
-	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");
-	const contentContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-2", "spiffy-tw-w-full", "spiffy-tw-p-2");
-	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]");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: containerClasses,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: verticalContainerClasses,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: imageClipContainerClasses,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: imageSkeletonClasses })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentContainerClasses,
-				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%]") })]
-			})]
-		})
-	});
-};
-
-//#endregion
-exports.ProductCardSkeleton = ProductCardSkeleton;