@evenicanpm/storefront-core 1.1.0 → 1.2.1

package/src/components-v2/product-cards/product-card/styles/index.ts

@@ -4,49 +4,49 @@ import { StyledComponent } from "@mui/styled-engine";
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 
 export const StyledBazaarCard = styled(BazaarCard)({
-  height: "100%",
-  margin: "auto",
-  display: "flex",
-  overflow: "hidden",
-  borderRadius: "8px",
-  position: "relative",
-  flexDirection: "column",
-  justifyContent: "space-between",
-  transition: "all 250ms ease-in-out",
-  ":hover": { "& .hover-box": { opacity: 1 } },
+	height: "100%",
+	margin: "auto",
+	display: "flex",
+	overflow: "hidden",
+	borderRadius: "8px",
+	position: "relative",
+	flexDirection: "column",
+	justifyContent: "space-between",
+	transition: "all 250ms ease-in-out",
+	":hover": { "& .hover-box": { opacity: 1 } },
 });
 
 export const ImageWrapper = styled("div")(({ theme }) => ({
-  textAlign: "center",
-  position: "relative",
-  display: "inline-block",
-  [theme.breakpoints.down("sm")]: { display: "block" },
+	textAlign: "center",
+	position: "relative",
+	display: "inline-block",
+	[theme.breakpoints.down("sm")]: { display: "block" },
 }));
 
 export const HoverIconWrapper = styled("div")({
-  zIndex: 2,
-  top: "7px",
-  opacity: 0,
-  right: "15px",
-  display: "flex",
-  cursor: "pointer",
-  position: "absolute",
-  flexDirection: "column",
-  transition: "all 0.3s ease-in-out",
+	zIndex: 2,
+	top: "7px",
+	opacity: 0,
+	right: "15px",
+	display: "flex",
+	cursor: "pointer",
+	position: "absolute",
+	flexDirection: "column",
+	transition: "all 0.3s ease-in-out",
 });
 
 export const ContentWrapper = styled("div")({
-  gap: 8,
-  display: "flex",
-  padding: "1rem",
-  "& .title, & .categories": {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
+	gap: 8,
+	display: "flex",
+	padding: "1rem",
+	"& .title, & .categories": {
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis",
+	},
 });
 
 const StyledBazaarCardType: StyledComponent<typeof BazaarCard, {}, "div"> =
-  StyledBazaarCard as StyledComponent<typeof BazaarCard, {}, "div">;
+	StyledBazaarCard as StyledComponent<typeof BazaarCard, {}, "div">;
 
 export default StyledBazaarCardType;

package/src/components-v2/product-cards/product-card-plp/ProductCardPlp.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ProductCardPlp from "./index";
+import { Box } from "@mui/material";
+import { data } from "../../../../__mocks__/products";
+
+const meta = {
+	title: "Product/ProductCards/ProductCardPlp",
+	component: ProductCardPlp,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta<typeof ProductCardPlp>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleProduct = {
+	title: data.products[0].Name,
+	id: data.products[0].RecordId,
+	price: data.products[0].Price,
+	imgUrl: data.products[0].PrimaryImageUrl,
+	rating: data.products[0].TotalRatings,
+	discount: 20,
+	size: "10 US",
+	slug: data.products[0].ProductNumber,
+	hoverEffect: true,
+};
+
+export const GridView: Story = {
+	args: {
+		product: sampleProduct,
+		children: (
+			<>
+				<ProductCardPlp.ImageWrapper>
+					<ProductCardPlp.Image />
+					<ProductCardPlp.HoverActions>
+						<ProductCardPlp.QuickViewButton />
+						<ProductCardPlp.FavoriteButton />
+					</ProductCardPlp.HoverActions>
+				</ProductCardPlp.ImageWrapper>
+				<ProductCardPlp.Body>
+					<ProductCardPlp.Info>
+						<ProductCardPlp.Title />
+						<ProductCardPlp.Rating />
+						<ProductCardPlp.Price />
+					</ProductCardPlp.Info>
+					<ProductCardPlp.Actions>
+						<ProductCardPlp.QuantityButtons />
+					</ProductCardPlp.Actions>
+				</ProductCardPlp.Body>
+			</>
+		),
+	},
+	decorators: [
+		(Story) => (
+			<Box sx={{ maxWidth: "280px" }}>
+				<Story />
+			</Box>
+		),
+	],
+};

package/src/components-v2/product-cards/product-card-plp/product-card.tsx

@@ -6,8 +6,8 @@ import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
 // GLOBAL CUSTOM COMPONENTS
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
-  FlexBetween,
-  FlexBox,
+	FlexBetween,
+	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
 import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
@@ -17,234 +17,237 @@ import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-
 import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
 import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
 // LIBRARY AND HOOKS
-import { calculateDiscount, currency } from "@/lib/lib";
-import buildDetailUrl from "@/lib/build-detail-url";
-import useCart from "@/hooks/use-cart";
-import useFavorite from "@/hooks/use-favorite";
+import {
+	calculateDiscount,
+	currency,
+} from "@evenicanpm/storefront-core/src/lib/lib";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
+import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
 // STYLED COMPONENTS
 import {
-  PriceText,
-  HoverIconWrapper,
+	PriceText,
+	HoverIconWrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/styles/index";
 
 type Product = {
-  title: string;
-  slug: string;
-  price: number;
-  imgUrl: string;
-  rating?: number;
-  discount?: number;
-  id: number;
+	title: string;
+	slug: string;
+	price: number;
+	imgUrl: string;
+	rating?: number;
+	discount?: number;
+	id: number;
 };
 
 const ProductCardPlpContext = createContext<{
-  product: Product;
-  setOpenAddToWishlistDialog?: (open: boolean) => void;
-  setOpenProductModal?: (open: boolean) => void;
+	product: Product;
+	setOpenAddToWishlistDialog?: (open: boolean) => void;
+	setOpenProductModal?: (open: boolean) => void;
 } | null>(null);
 
 type ProductCardPlpProps = {
-  product: Product;
-  children: ReactNode;
+	product: Product;
+	children: ReactNode;
 };
 
 const ProductCardPlp = ({ product, children }: ProductCardPlpProps) => {
-  const [openProductModal, setOpenProductModal] = useState(false);
-  const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
-
-  return (
-    <ProductCardPlpContext.Provider
-      value={{ product, setOpenAddToWishlistDialog, setOpenProductModal }}
-    >
-      <div>{children}</div>
-      {openAddToWishlistDialog && (
-        <AddToWishlistDialog
-          open={openAddToWishlistDialog}
-          handleClose={() => setOpenAddToWishlistDialog(false)}
-          productId={Number(product.id)}
-        />
-      )}
-      {openProductModal && (
-        <ProductViewDialog
-          openDialog={openProductModal}
-          handleCloseDialog={() => setOpenProductModal(false)}
-          productId={Number(product.id)}
-        />
-      )}
-    </ProductCardPlpContext.Provider>
-  );
+	const [openProductModal, setOpenProductModal] = useState(false);
+	const [openAddToWishlistDialog, setOpenAddToWishlistDialog] = useState(false);
+
+	return (
+		<ProductCardPlpContext.Provider
+			value={{ product, setOpenAddToWishlistDialog, setOpenProductModal }}
+		>
+			<div>{children}</div>
+			{openAddToWishlistDialog && (
+				<AddToWishlistDialog
+					open={openAddToWishlistDialog}
+					handleClose={() => setOpenAddToWishlistDialog(false)}
+					productId={Number(product.id)}
+				/>
+			)}
+			{openProductModal && (
+				<ProductViewDialog
+					openDialog={openProductModal}
+					handleCloseDialog={() => setOpenProductModal(false)}
+					productId={Number(product.id)}
+				/>
+			)}
+		</ProductCardPlpContext.Provider>
+	);
 };
 
 ProductCardPlp.ImageWrapper = ({ children }: { children: React.ReactNode }) => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
-
-  const { title, id } = ctx.product;
-
-  return (
-    <Link href={buildDetailUrl(title, id)}>
-      <FlexBox
-        className="hover-box-container"
-        position="relative"
-        bgcolor="grey.50"
-        borderRadius={3}
-        mb={2}
-      >
-        {children}
-      </FlexBox>
-    </Link>
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { title, id } = ctx.product;
+
+	return (
+		<Link href={buildDetailUrl(title, id)}>
+			<FlexBox
+				className="hover-box-container"
+				position="relative"
+				bgcolor="grey.50"
+				borderRadius={3}
+				mb={2}
+			>
+				{children}
+			</FlexBox>
+		</Link>
+	);
 };
 
 ProductCardPlp.Image = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
-
-  const { title, imgUrl, discount = 0 } = ctx.product;
-  return (
-    <>
-      <ImageWithFallback
-        alt={title ?? "Product Image"}
-        width={380}
-        height={379}
-        src={imgUrl}
-        style={{ borderRadius: "12px" }}
-      />
-      {discount ? (
-        <DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
-      ) : null}
-    </>
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { title, imgUrl, discount = 0 } = ctx.product;
+	return (
+		<>
+			<ImageWithFallback
+				alt={title ?? "Product Image"}
+				width={380}
+				height={379}
+				src={imgUrl}
+				style={{ borderRadius: "12px" }}
+			/>
+			{discount ? (
+				<DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
+			) : null}
+		</>
+	);
 };
 
 ProductCardPlp.Body = ({ children }: { children: React.ReactNode }) => {
-  return <FlexBetween alignItems="flex-end">{children}</FlexBetween>;
+	return <FlexBetween alignItems="flex-end">{children}</FlexBetween>;
 };
 
 ProductCardPlp.Info = ({ children }: { children: React.ReactNode }) => {
-  return <div>{children}</div>;
+	return <div>{children}</div>;
 };
 
 ProductCardPlp.Actions = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
+	return <>{children}</>;
 };
 
 ProductCardPlp.Title = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
-
-  const { title, id } = ctx.product;
-  return (
-    <Link href={buildDetailUrl(title, id)}>
-      <H6 fontWeight={700} mb={1}>
-        {title}
-      </H6>
-    </Link>
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { title, id } = ctx.product;
+	return (
+		<Link href={buildDetailUrl(title, id)}>
+			<H6 fontWeight={700} mb={1}>
+				{title}
+			</H6>
+		</Link>
+	);
 };
 
 ProductCardPlp.Rating = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
 
-  const { rating } = ctx.product;
+	const { rating } = ctx.product;
 
-  return <Rating readOnly value={rating} size="small" precision={0.5} />;
+	return <Rating readOnly value={rating} size="small" precision={0.5} />;
 };
 
 ProductCardPlp.Price = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
-
-  const { discount = 0, price } = ctx.product;
-  if (price == null) return null;
-
-  return (
-    <PriceText>
-      {discount > 0 ? (
-        <>
-          <span className="base-price">{currency(price)}</span>
-          {calculateDiscount(price, discount)}
-        </>
-      ) : (
-        currency(price)
-      )}
-    </PriceText>
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { discount = 0, price } = ctx.product;
+	if (price == null) return null;
+
+	return (
+		<PriceText>
+			{discount > 0 ? (
+				<>
+					<span className="base-price">{currency(price)}</span>
+					{calculateDiscount(price, discount)}
+				</>
+			) : (
+				currency(price)
+			)}
+		</PriceText>
+	);
 };
 
 ProductCardPlp.HoverActions = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
-  );
+	return (
+		<HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
+	);
 };
 
 ProductCardPlp.QuickViewButton = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
-
-  return (
-    <IconButton
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        ctx.setOpenProductModal?.(true);
-      }}
-    >
-      <RemoveRedEye color="disabled" fontSize="small" />
-    </IconButton>
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	return (
+		<IconButton
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				ctx.setOpenProductModal?.(true);
+			}}
+		>
+			<RemoveRedEye color="disabled" fontSize="small" />
+		</IconButton>
+	);
 };
 
 ProductCardPlp.FavoriteButton = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
 
-  const { id } = ctx.product;
+	const { id } = ctx.product;
 
-  const isFavorite = useFavorite(Number(id));
+	const isFavorite = useFavorite(Number(id));
 
-  return (
-    <FavoriteButton
-      isFavorite={isFavorite}
-      onToggle={() => {
-        ctx.setOpenAddToWishlistDialog?.(true);
-      }}
-    />
-  );
+	return (
+		<FavoriteButton
+			isFavorite={isFavorite}
+			onToggle={() => {
+				ctx.setOpenAddToWishlistDialog?.(true);
+			}}
+		/>
+	);
 };
 
 // Using quantity buttons (addtocart) doesn't make sense when we have product variants to select.
 // So hide them for now, implement based on client requirements.
 ProductCardPlp.QuantityButtons = () => {
-  const ctx = useContext(ProductCardPlpContext);
-  if (!ctx) return null;
-
-  const { id } = ctx.product;
-  const { currentCartLine, handleCartAmountChange, loading } = useCart(id);
-  const [quantity, setQuantity] = useState(currentCartLine?.Quantity || 0);
-
-  const handleIncrementQuantity = () => {
-    const qty = quantity + 1;
-    handleCartAmountChange(qty);
-    setQuantity(qty);
-  };
-
-  const handleDecrementQuantity = () => {
-    if (quantity <= 0) return;
-    const qty = quantity - 1;
-    handleCartAmountChange(qty);
-    setQuantity(qty);
-  };
-
-  return (
-    <QuantityButtons
-      quantity={quantity}
-      handleIncrement={handleIncrementQuantity}
-      handleDecrement={handleDecrementQuantity}
-      isLineUpdating={loading}
-    />
-  );
+	const ctx = useContext(ProductCardPlpContext);
+	if (!ctx) return null;
+
+	const { id } = ctx.product;
+	const { currentCartLine, handleCartAmountChange, loading } = useCart(id);
+	const [quantity, setQuantity] = useState(currentCartLine?.Quantity || 0);
+
+	const handleIncrementQuantity = () => {
+		const qty = quantity + 1;
+		handleCartAmountChange(qty);
+		setQuantity(qty);
+	};
+
+	const handleDecrementQuantity = () => {
+		if (quantity <= 0) return;
+		const qty = quantity - 1;
+		handleCartAmountChange(qty);
+		setQuantity(qty);
+	};
+
+	return (
+		<QuantityButtons
+			quantity={quantity}
+			handleIncrement={handleIncrementQuantity}
+			handleDecrement={handleDecrementQuantity}
+			isLineUpdating={loading}
+		/>
+	);
 };
 
 export default ProductCardPlp;

package/src/components-v2/product-cards/product-card-plp/styles/index.ts

@@ -3,33 +3,33 @@
 import styled from "@mui/material/styles/styled";
 
 export const PriceText = styled("p")(({ theme }) => ({
-  fontSize: 17,
-  lineHeight: 1,
-  fontWeight: 700,
-  marginTop: ".75rem",
-  color: theme.palette.primary.main,
-  ".base-price": {
-    fontSize: 15,
-    marginRight: 8,
-    fontWeight: 600,
-    textDecoration: "line-through",
-    color: theme.palette.grey[600],
-  },
+	fontSize: 17,
+	lineHeight: 1,
+	fontWeight: 700,
+	marginTop: ".75rem",
+	color: theme.palette.primary.main,
+	".base-price": {
+		fontSize: 15,
+		marginRight: 8,
+		fontWeight: 600,
+		textDecoration: "line-through",
+		color: theme.palette.grey[600],
+	},
 }));
 
 export const HoverIconWrapper = styled("div")({
-  zIndex: 2,
-  top: "7px",
-  right: "15px",
-  display: "flex",
-  cursor: "pointer",
-  position: "absolute",
-  flexDirection: "column",
-  opacity: 0,
-  transition: "all 0.3s ease-in-out",
+	zIndex: 2,
+	top: "7px",
+	right: "15px",
+	display: "flex",
+	cursor: "pointer",
+	position: "absolute",
+	flexDirection: "column",
+	opacity: 0,
+	transition: "all 0.3s ease-in-out",
 
-  // Show when parent (with .hover-box-container) is hovered
-  ".hover-box-container:hover &": {
-    opacity: 1,
-  },
+	// Show when parent (with .hover-box-container) is hovered
+	".hover-box-container:hover &": {
+		opacity: 1,
+	},
 });

package/src/components-v2/product-cards/product-card-plp-list/ProductCardPlpList.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { ProductCardPlpList } from "./index";
+import { data } from "../../../../__mocks__/products";
+
+const meta = {
+	title: "Product/ProductCards/ProductCardPlpList",
+	component: ProductCardPlpList,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta<typeof ProductCardPlpList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleProduct = {
+	title: data.products[0].Name,
+	id: data.products[0].RecordId,
+	price: data.products[0].Price,
+	imgUrl: data.products[0].PrimaryImageUrl,
+	rating: data.products[0].TotalRatings,
+	discount: 20,
+	size: "10 US",
+	slug: data.products[0].ProductNumber,
+	hoverEffect: true,
+};
+
+export const ListView: Story = {
+	args: {
+		product: sampleProduct,
+		children: (
+			<>
+				<ProductCardPlpList.QuickViewButton />
+				<ProductCardPlpList.Body>
+					<ProductCardPlpList.Image />
+					<ProductCardPlpList.Content>
+						<ProductCardPlpList.Info>
+							<ProductCardPlpList.Tags />
+							<ProductCardPlpList.Title />
+							<ProductCardPlpList.Rating />
+							<ProductCardPlpList.Price />
+						</ProductCardPlpList.Info>
+						<ProductCardPlpList.Actions>
+							<ProductCardPlpList.FavoriteButton />
+						</ProductCardPlpList.Actions>
+					</ProductCardPlpList.Content>
+				</ProductCardPlpList.Body>
+			</>
+		),
+	},
+};