@evenicanpm/storefront-core 2.4.2 → 2.5.0

package/src/components/mini-cart/mini-cart-trigger.tsx

@@ -4,7 +4,7 @@ import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/c
 import { MiniCart } from "@evenicanpm/storefront-core/src/components/mini-cart/index";
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { Badge, Drawer, IconButton } from "@mui/material";
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useMemo, useState } from "react";
 
 const BADGE_STYLES = {
 	"& .MuiBadge-badge": {
@@ -43,8 +43,10 @@ const MiniCartTrigger = ({ cart, children }: MiniCartTriggerProps) => {
 		}
 	}, [alert]);
 
+	const contextValue = useMemo(() => ({ cart, open, setOpen }), [cart, open]);
+
 	return (
-		<MiniCartTriggerContext.Provider value={{ cart, open, setOpen }}>
+		<MiniCartTriggerContext.Provider value={contextValue}>
 			{children}
 		</MiniCartTriggerContext.Provider>
 	);
@@ -52,7 +54,7 @@ const MiniCartTrigger = ({ cart, children }: MiniCartTriggerProps) => {
 
 /* ---------- Subcomponents ---------- */
 
-MiniCartTrigger.Badge = ({ children }: { children: React.ReactNode }) => {
+const TriggerBadge = ({ children }: { children: React.ReactNode }) => {
 	const ctx = useContext(MiniCartTriggerContext);
 	if (!ctx) return null;
 	const { cart } = ctx;
@@ -67,7 +69,7 @@ MiniCartTrigger.Badge = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-MiniCartTrigger.Button = ({ children }: { children: React.ReactNode }) => {
+const TriggerButton = ({ children }: { children: React.ReactNode }) => {
 	const ctx = useContext(MiniCartTriggerContext);
 	if (!ctx) return null;
 	const { setOpen } = ctx;
@@ -78,7 +80,7 @@ MiniCartTrigger.Button = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-MiniCartTrigger.Drawer = () => {
+const TriggerDrawer = () => {
 	const ctx = useContext(MiniCartTriggerContext);
 	if (!ctx) return null;
 	const { cart, open, setOpen } = ctx;
@@ -94,4 +96,8 @@ MiniCartTrigger.Drawer = () => {
 	);
 };
 
+MiniCartTrigger.Badge = TriggerBadge;
+MiniCartTrigger.Button = TriggerButton;
+MiniCartTrigger.Drawer = TriggerDrawer;
+
 export default MiniCartTrigger;

package/src/components/mini-cart/mini-cart.tsx

@@ -12,7 +12,7 @@ import Divider from "@mui/material/Divider";
 import { useRouter } from "next/navigation";
 import { useFormatter } from "next-intl";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import type { Cart, CartLine } from "@/schemas/cart.schema";
 
 interface MiniCartContextValue {
@@ -74,17 +74,27 @@ const MiniCart = ({ cart, closeDrawer, children }: MiniCartProps) => {
 		push(path);
 	};
 
+	const contextValue = useMemo(
+		() => ({
+			cart,
+			closeDrawer,
+			currency,
+			handleCartAmountChange,
+			shouldShowLoadingSpinner,
+			handleNavigate,
+		}),
+		[
+			cart,
+			closeDrawer,
+			currency,
+			handleCartAmountChange,
+			shouldShowLoadingSpinner,
+			handleNavigate,
+		],
+	);
+
 	return (
-		<MiniCartContext.Provider
-			value={{
-				cart,
-				closeDrawer,
-				currency,
-				handleCartAmountChange,
-				shouldShowLoadingSpinner,
-				handleNavigate,
-			}}
-		>
+		<MiniCartContext.Provider value={contextValue}>
 			<Box width="100%" minWidth={380}>
 				{children}
 			</Box>
@@ -94,7 +104,7 @@ const MiniCart = ({ cart, closeDrawer, children }: MiniCartProps) => {
 
 /* ---------- Subcomponents ---------- */
 
-MiniCart.Header = () => {
+const Header = () => {
 	const ctx = useContext(MiniCartContext);
 	if (!ctx) return null;
 	const { cart, closeDrawer } = ctx;
@@ -106,11 +116,11 @@ MiniCart.Header = () => {
 	);
 };
 
-MiniCart.Divider = () => {
+const MiniCartDivider = () => {
 	return <Divider />;
 };
 
-MiniCart.Items = () => {
+const Items = () => {
 	const ctx = useContext(MiniCartContext);
 	if (!ctx) return null;
 	const {
@@ -149,7 +159,7 @@ MiniCart.Items = () => {
 	);
 };
 
-MiniCart.Actions = () => {
+const Actions = () => {
 	const ctx = useContext(MiniCartContext);
 	if (!ctx) return null;
 	const { cart, currency, handleNavigate } = ctx;
@@ -166,4 +176,9 @@ MiniCart.Actions = () => {
 	) : null;
 };
 
+MiniCart.Header = Header;
+MiniCart.Divider = MiniCartDivider;
+MiniCart.Items = Items;
+MiniCart.Actions = Actions;
+
 export default MiniCart;

package/src/components/mobile-navigation/mobile-navigation-bar.tsx

@@ -21,7 +21,7 @@ import Box from "@mui/material/Box";
 import type { Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslations } from "next-intl";
-import { createContext, Fragment, useContext } from "react";
+import { createContext, Fragment, useContext, useMemo } from "react";
 
 /**
 Usage Examples:
@@ -73,11 +73,15 @@ export default function MobileNavigationBar({
 	];
 
 	const listToRender = menuList || defaultMenuList;
+	const contextValue = useMemo(
+		() => ({ menuList: listToRender }),
+		[listToRender],
+	);
 
 	if (!DOWN_900) return null;
 
 	return (
-		<MobileNavContext.Provider value={{ menuList: listToRender }}>
+		<MobileNavContext.Provider value={contextValue}>
 			<Box position="relative" display="flex" flexDirection="column">
 				<Wrapper>
 					{children ??

package/src/components/navbar/categories.tsx

@@ -6,7 +6,12 @@ import { CategoryMenuButton } from "@evenicanpm/storefront-core/src/components/n
 
 import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
 import { useTranslations } from "next-intl";
-import React, { createContext, type ReactNode, useContext } from "react";
+import React, {
+	createContext,
+	type ReactNode,
+	useContext,
+	useMemo,
+} from "react";
 import { MdChevronRight as ChevronRight } from "react-icons/md";
 
 type CategoriesContextValue = {
@@ -23,9 +28,10 @@ export default function Categories({
 	const t = useTranslations("Navigation");
 
 	const label = t("topLevelCategoryName");
+	const contextValue = useMemo(() => ({ label }), [label]);
 
 	return (
-		<CategoriesContext.Provider value={{ label }}>
+		<CategoriesContext.Provider value={contextValue}>
 			<CategoryMenu
 				render={(handler) =>
 					React.isValidElement(children) ? (

package/src/components/navbar/category-based-menu/category-based-menu.tsx

@@ -23,7 +23,7 @@ import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Link from "next/link";
 import type React from "react";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 
 type MenuContextValue = {
 	openList: string;
@@ -48,9 +48,13 @@ type RootProps = {
 
 const CategoryBasedMenu = ({ title, menuList, children }: RootProps) => {
 	const [openList, setOpenList] = useState(menuList[0]?.title || "");
+	const contextValue = useMemo(
+		() => ({ openList, setOpenList, menuList }),
+		[openList, menuList],
+	);
 
 	return (
-		<MenuContext.Provider value={{ openList, setOpenList, menuList }}>
+		<MenuContext.Provider value={contextValue}>
 			<Wrapper>
 				<CategoryBasedMenu.Trigger>{title}</CategoryBasedMenu.Trigger>
 				<MenusContainer className="menu-list">

package/src/components/navbar/mega-menu/mega-menu.tsx

@@ -17,7 +17,7 @@ import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid2";
 import List from "@mui/material/List";
 import type React from "react";
-import { createContext, type RefObject, useContext } from "react";
+import { createContext, type RefObject, useContext, useMemo } from "react";
 
 type MegaMenuContextType = {
 	isLeftOverflowing: boolean;
@@ -51,16 +51,18 @@ const MegaMenu = ({
 }) => {
 	const { elementRef, isLeftOverflowing, isRightOverflowing, checkOverflow } =
 		useOverflowDetect();
+	const contextValue = useMemo(
+		() => ({
+			elementRef: elementRef as RefObject<HTMLLIElement>,
+			isLeftOverflowing,
+			isRightOverflowing,
+			checkOverflow,
+		}),
+		[elementRef, isLeftOverflowing, isRightOverflowing, checkOverflow],
+	);
 
 	return (
-		<MegaMenuContext.Provider
-			value={{
-				elementRef: elementRef as RefObject<HTMLLIElement>,
-				isLeftOverflowing,
-				isRightOverflowing,
-				checkOverflow,
-			}}
-		>
+		<MegaMenuContext.Provider value={contextValue}>
 			<Wrapper onMouseOver={checkOverflow}>
 				{title && (
 					<FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
@@ -74,7 +76,7 @@ const MegaMenu = ({
 	);
 };
 
-MegaMenu.Trigger = ({ children }: { children?: React.ReactNode }) => {
+const Trigger = ({ children }: { children?: React.ReactNode }) => {
 	return (
 		<FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
 			{children}
@@ -83,7 +85,7 @@ MegaMenu.Trigger = ({ children }: { children?: React.ReactNode }) => {
 	);
 };
 
-MegaMenu.Container = ({ children }: { children: React.ReactNode }) => {
+const Container = ({ children }: { children: React.ReactNode }) => {
 	const { elementRef, isLeftOverflowing, isRightOverflowing } = useMegaMenu();
 	return (
 		<MenusContainer
@@ -99,7 +101,7 @@ MegaMenu.Container = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-MegaMenu.Column = ({
+const Column = ({
 	children,
 	count,
 }: {
@@ -116,7 +118,7 @@ MegaMenu.Column = ({
 	);
 };
 
-MegaMenu.Category = ({
+const Category = ({
 	title,
 	children,
 }: {
@@ -133,7 +135,7 @@ MegaMenu.Category = ({
 	);
 };
 
-MegaMenu.Item = ({
+const Item = ({
 	href,
 	children,
 }: {
@@ -147,4 +149,10 @@ MegaMenu.Item = ({
 	);
 };
 
+MegaMenu.Trigger = Trigger;
+MegaMenu.Container = Container;
+MegaMenu.Column = Column;
+MegaMenu.Category = Category;
+MegaMenu.Item = Item;
+
 export default MegaMenu;

package/src/components/navbar/mobile-menu/mobile-menu.test.tsx

@@ -3,7 +3,7 @@ import MobileMenu from "@evenicanpm/storefront-core/src/components/navbar/mobile
 import { transformCmsNav } from "@evenicanpm/storefront-core/src/components/navbar/utils/transform-nav";
 import { fireEvent, render, screen } from "@testing-library/react";
 import type React from "react";
-import { beforeEach, describe, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const useContext = vi.fn();
 
@@ -20,7 +20,7 @@ vi.mock("@evenicanpm/storefront-core/src/providers/nav-provider", () => {
 	};
 });
 describe.skip("MobileMenu", () => {
-	const cmsNav = transformCmsNav(mockCmsData as unknown as CmsNavItem[]);
+	const cmsNav = transformCmsNav(mockCmsData);
 	const handleClose = vi.fn();
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -38,7 +38,7 @@ describe.skip("MobileMenu", () => {
 			</MobileMenu.Drawer>,
 		);
 
-		expect(screen.getByText("My Page")).toBeInTheDocument();
+		expect(screen.getByText("My Page")).toBeTruthy();
 	});
 
 	it("should expand nested items when clicked", () => {
@@ -49,7 +49,7 @@ describe.skip("MobileMenu", () => {
 		);
 
 		fireEvent.click(screen.getByText("My Page"));
-		expect(screen.getByText("NESTED")).toBeInTheDocument();
+		expect(screen.getByText("NESTED")).toBeTruthy();
 	});
 
 	it("should call onClose when leaf link is clicked", () => {
@@ -60,19 +60,17 @@ describe.skip("MobileMenu", () => {
 		);
 
 		const link = screen.getByText("NESTED");
-		expect(link.closest("a")).toHaveAttribute("href", "https://google.com");
+		expect(link.closest("a")?.getAttribute("href")).toBe("https://google.com");
 
 		fireEvent.click(link);
 		expect(handleClose).toHaveBeenCalled();
 	});
 });
 
-const mockCmsData = [
+const mockCmsData: CmsNavItem[] = [
 	{
-		id: 3,
 		title: "My Page",
 		menuAttached: false,
-		order: 1,
 		path: "/pages/my-page",
 		type: "INTERNAL",
 		uiRouterKey: "my-page",
@@ -86,20 +84,19 @@ const mockCmsData = [
 			updatedAt: "2025-01-20T17:27:19.608Z",
 			publishedAt: "2025-01-20T17:27:19.603Z",
 			__contentType: "api::page.page",
-			navigationItemId: 3,
 			__templateName: "Generic",
 		},
 		items: [
 			{
-				id: 4,
 				title: "NESTED",
 				menuAttached: false,
-				order: 1,
 				path: "https://google.com",
 				type: "EXTERNAL",
 				uiRouterKey: "nested",
 				slug: "",
+				related: null,
 				external: true,
+				items: [],
 			},
 		],
 	},

package/src/components/navbar/mobile-menu/mobile-menu.tsx

@@ -24,7 +24,7 @@ const MobileMenu = ({ children }: RootProps) => {
 	return <>{children}</>;
 };
 
-MobileMenu.Trigger = () => {
+const Trigger = () => {
 	const { toggleMobileSideNav } = useContext(NavContext);
 	return (
 		<IconButton
@@ -36,7 +36,7 @@ MobileMenu.Trigger = () => {
 	);
 };
 
-MobileMenu.Drawer = ({ children }: { children: React.ReactNode }) => {
+const MobileMenuDrawer = ({ children }: { children: React.ReactNode }) => {
 	const { isMobileSideNavOpen, toggleMobileSideNav } = useContext(NavContext);
 
 	return (
@@ -71,12 +71,12 @@ MobileMenu.Drawer = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-MobileMenu.List = ({ data }: { data: TransformedNavItem[] }) => {
+const MenuList = ({ data }: { data: TransformedNavItem[] }) => {
 	const { toggleMobileSideNav } = useContext(NavContext);
 	return (
 		<>
 			{data.map((item, idx) => (
-				<MobileMenu.Item
+				<MenuItem
 					key={item.title + idx}
 					item={item}
 					onClose={toggleMobileSideNav}
@@ -102,7 +102,7 @@ const ACCORDION_SUMMARY_STYLES = {
 };
 
 // Single Item (link or accordion)
-MobileMenu.Item = ({
+const MenuItem = ({
 	item,
 	onClose,
 }: {
@@ -122,11 +122,7 @@ MobileMenu.Item = ({
 				</AccordionSummary>
 				<Box mx={2}>
 					{items.map((sub, idx) => (
-						<MobileMenu.Item
-							key={sub.title + idx}
-							item={sub}
-							onClose={onClose}
-						/>
+						<MenuItem key={sub.title + idx} item={sub} onClose={onClose} />
 					))}
 				</Box>
 			</Accordion>
@@ -142,8 +138,14 @@ MobileMenu.Item = ({
 	);
 };
 
-MobileMenu.Divider = () => {
+const MenuDivider = () => {
 	return <Divider sx={{ my: 2 }} />;
 };
 
+MobileMenu.Trigger = Trigger;
+MobileMenu.Drawer = MobileMenuDrawer;
+MobileMenu.List = MenuList;
+MobileMenu.Item = MenuItem;
+MobileMenu.Divider = MenuDivider;
+
 export default MobileMenu;

package/src/components/navbar/nav-list/nav-list.tsx

@@ -18,7 +18,7 @@ import {
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import MenuItem from "@mui/material/MenuItem";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 
 type NavigationContextValue = {
 	list: TransformedNavItem[];
@@ -118,9 +118,10 @@ export default function Navigation({
 	children,
 }: Readonly<{ children?: ReactNode }>) {
 	const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
+	const contextValue = useMemo(() => ({ list: cmsList }), [cmsList]);
 
 	return (
-		<NavigationContext.Provider value={{ list: cmsList }}>
+		<NavigationContext.Provider value={contextValue}>
 			<FlexBox gap={4}>{children ?? <Navigation.List />}</FlexBox>
 		</NavigationContext.Provider>
 	);

package/src/components/navbar/navbar.tsx

@@ -9,7 +9,7 @@ import {
 	NavBarWrapper,
 } from "@evenicanpm/storefront-core/src/components/navbar/styles";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 /**
  * Usage Examples:
@@ -57,8 +57,10 @@ export default function Navbar({
 	hideCategories = false,
 	children,
 }: Readonly<Props>) {
+	const contextValue = useMemo(() => ({ hideCategories }), [hideCategories]);
+
 	return (
-		<NavbarContext.Provider value={{ hideCategories }}>
+		<NavbarContext.Provider value={contextValue}>
 			<NavBarWrapper hoverEffect={false} elevation={elevation} border={border}>
 				{children ?? (
 					<Navbar.Content>

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

@@ -247,21 +247,35 @@ const ProductCard = ({
 		}
 	};
 
-	const internalContextValue = {
-		handleToggleFavorite,
-		openProductModal,
-		handleToggleProductModal,
-		quantity,
-		handleIncrementQuantity,
-		handleDecrementQuantity,
-		isLineUpdating,
-		handleAddItemToCart,
-		handleRemoveFromWishlist,
-	};
+	const productContextValue = useMemo(() => ({ product }), [product]);
+	const memoizedInternalContextValue = useMemo(
+		() => ({
+			handleToggleFavorite,
+			openProductModal,
+			handleToggleProductModal,
+			quantity,
+			handleIncrementQuantity,
+			handleDecrementQuantity,
+			isLineUpdating,
+			handleAddItemToCart,
+			handleRemoveFromWishlist,
+		}),
+		[
+			handleToggleFavorite,
+			openProductModal,
+			handleToggleProductModal,
+			quantity,
+			handleIncrementQuantity,
+			handleDecrementQuantity,
+			isLineUpdating,
+			handleAddItemToCart,
+			handleRemoveFromWishlist,
+		],
+	);
 
 	return (
-		<ProductCardContext.Provider value={{ product }}>
-			<ProductCardInternalContext.Provider value={internalContextValue}>
+		<ProductCardContext.Provider value={productContextValue}>
+			<ProductCardInternalContext.Provider value={memoizedInternalContextValue}>
 				<StyledBazaarCard hoverEffect={product.hoverEffect}>
 					{children}
 				</StyledBazaarCard>
@@ -285,7 +299,7 @@ const ProductCard = ({
 	);
 };
 
-ProductCard.Image = () => {
+const CardImage = () => {
 	const ctx = useContext(ProductCardContext);
 	if (!ctx) return null;
 
@@ -301,11 +315,11 @@ ProductCard.Image = () => {
 	);
 };
 
-ProductCard.Body = ({ children }: { children: React.ReactNode }) => {
+const CardBody = ({ children }: { children: React.ReactNode }) => {
 	return <ContentWrapper>{children}</ContentWrapper>;
 };
 
-ProductCard.Info = ({ children }: { children: React.ReactNode }) => {
+const CardInfo = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<Box flex="1 1 0" minWidth="0px" mr={1}>
 			{children}
@@ -313,11 +327,11 @@ ProductCard.Info = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-ProductCard.Actions = ({ children }: { children: React.ReactNode }) => {
+const CardActions = ({ children }: { children: React.ReactNode }) => {
 	return <>{children}</>;
 };
 
-ProductCard.Title = () => {
+const CardTitle = () => {
 	const ctx = useContext(ProductCardContext);
 	if (!ctx) return null;
 
@@ -325,7 +339,7 @@ ProductCard.Title = () => {
 	return <ProductTitle title={title} slug={slug} />;
 };
 
-ProductCard.Rating = () => {
+const CardRating = () => {
 	const ctx = useContext(ProductCardContext);
 	if (!ctx) return null;
 
@@ -334,7 +348,7 @@ ProductCard.Rating = () => {
 	return <Rating size="small" value={rating} color="warn" readOnly />;
 };
 
-ProductCard.Size = () => {
+const CardSize = () => {
 	const ctx = useContext(ProductCardContext);
 	if (!ctx) return null;
 
@@ -347,7 +361,7 @@ ProductCard.Size = () => {
 	);
 };
 
-ProductCard.Price = () => {
+const CardPrice = () => {
 	const ctx = useContext(ProductCardContext);
 	if (!ctx) return null;
 
@@ -377,15 +391,13 @@ const QuantityButtons = () => {
 	);
 };
 
-ProductCard.QuantityButtons = QuantityButtons;
-
-ProductCard.HoverActions = ({ children }: { children: React.ReactNode }) => {
+const CardHoverActions = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<HoverIconWrapper className="hover-box"> {children} </HoverIconWrapper>
 	);
 };
 
-ProductCard.QuickViewButton = () => {
+const CardQuickViewButton = () => {
 	const internal = useContext(ProductCardInternalContext);
 	if (!internal) return null;
 
@@ -398,7 +410,7 @@ ProductCard.QuickViewButton = () => {
 	);
 };
 
-ProductCard.FavoriteButton = () => {
+const CardFavoriteButton = () => {
 	const internal = useContext(ProductCardInternalContext);
 	const ctx = useContext(ProductCardContext);
 
@@ -450,6 +462,18 @@ const WishlistControls = () => {
 	);
 };
 
+ProductCard.Image = CardImage;
+ProductCard.Body = CardBody;
+ProductCard.Info = CardInfo;
+ProductCard.Actions = CardActions;
+ProductCard.Title = CardTitle;
+ProductCard.Rating = CardRating;
+ProductCard.Size = CardSize;
+ProductCard.Price = CardPrice;
+ProductCard.QuantityButtons = QuantityButtons;
+ProductCard.HoverActions = CardHoverActions;
+ProductCard.QuickViewButton = CardQuickViewButton;
+ProductCard.FavoriteButton = CardFavoriteButton;
 ProductCard.WishlistControls = WishlistControls;
 
 export default ProductCard;