@evenicanpm/storefront-core 2.4.1 → 2.5.0

package/src/pages/product-details/product-intro/compound/thumbnail-with-skeleton.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 
 const shimmer = `<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50" fill="#f0f0f0"/></svg>`;
-const blurDataURL = `data:image/svg+xml;base64,${typeof window === "undefined" ? Buffer.from(shimmer).toString("base64") : btoa(shimmer)}`;
+const blurDataURL = `data:image/svg+xml;base64,${globalThis.window === undefined ? Buffer.from(shimmer).toString("base64") : btoa(shimmer)}`;
 
 /**
  * Product thumbnail image

package/src/pages/product-details/product-tabs.tsx

@@ -8,7 +8,7 @@ import styled from "@mui/material/styles/styled";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import type React from "react";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 
 // STYLED COMPONENT
 const StyledTabs = styled(Tabs)(({ theme }) => ({
@@ -65,16 +65,18 @@ export default function ProductTabs({
 	const [selectedOption, setSelectedOption] = useState(0);
 	const handleOptionClick = (_: React.SyntheticEvent, value: number) =>
 		setSelectedOption(value);
+	const contextValue = useMemo(
+		() => ({
+			selectedOption,
+			handleOptionClick,
+			productAttributes,
+			productDescription,
+		}),
+		[selectedOption, handleOptionClick, productAttributes, productDescription],
+	);
 
 	return (
-		<TabsContext.Provider
-			value={{
-				selectedOption,
-				handleOptionClick,
-				productAttributes,
-				productDescription,
-			}}
-		>
+		<TabsContext.Provider value={contextValue}>
 			<Box mb={6}>{children}</Box>
 		</TabsContext.Provider>
 	);
@@ -83,7 +85,7 @@ export default function ProductTabs({
 /**
  * @category Sub-Component
  */
-ProductTabs.Tabs = ({ children }: { children: React.ReactNode }) => {
+const ProductTabsTabs = ({ children }: { children: React.ReactNode }) => {
 	const ctx = useContext(TabsContext);
 	if (!ctx)
 		throw new Error(
@@ -102,6 +104,8 @@ ProductTabs.Tabs = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
+ProductTabs.Tabs = ProductTabsTabs;
+
 /**
  * @category Sub-Component
  */
@@ -112,7 +116,7 @@ ProductTabs.Option = (props: { label: string; value: number }) => {
 /**
  * @category Sub-Component
  */
-ProductTabs.Content = ({
+const ProductTabsContent = ({
 	index,
 	children,
 }: {
@@ -132,10 +136,12 @@ ProductTabs.Content = ({
 	);
 };
 
+ProductTabs.Content = ProductTabsContent;
+
 /**
  * @category Sub-Component
  */
-ProductTabs.Description = () => {
+const ProductTabsDescription = () => {
 	const ctx = useContext(TabsContext);
 	if (!ctx)
 		throw new Error(
@@ -149,3 +155,5 @@ ProductTabs.Description = () => {
 		/>
 	);
 };
+
+ProductTabs.Description = ProductTabsDescription;

package/src/pages/product-list/product-list-view.tsx

@@ -19,7 +19,7 @@ import type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
 import { Box, CircularProgress, Paper, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useLocale, useTranslations } from "next-intl";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 
 type PLViewCtx = { categoryId: number };
 const ProductListViewContext = createContext<PLViewCtx | null>(null);
@@ -37,8 +37,10 @@ export default function ProductListView({
 	categoryId,
 	children,
 }: Readonly<RootProps>) {
+	const contextValue = useMemo(() => ({ categoryId }), [categoryId]);
+
 	return (
-		<ProductListViewContext.Provider value={{ categoryId }}>
+		<ProductListViewContext.Provider value={contextValue}>
 			{children}
 		</ProductListViewContext.Provider>
 	);

package/src/pages/product-list/search-bar.tsx

@@ -91,6 +91,12 @@ const SearchBar: SearchBarType = (({ children }: RootProps) => {
 	);
 }) as SearchBarType;
 
+const renderMobileFilterToggle = (close: () => void) => (
+	<IconButton onClick={close}>
+		<FilterList fontSize="small" />
+	</IconButton>
+);
+
 SearchBar.PerPage = function PerPage() {
 	const { itemsPerPage, paramHandlers, downMd } = useSB();
 	return (
@@ -186,13 +192,7 @@ SearchBar.View = function View() {
 			</ToggleButtonGroup>
 
 			{downMd && (
-				<Sidenav
-					handler={(close) => (
-						<IconButton onClick={close}>
-							<FilterList fontSize="small" />
-						</IconButton>
-					)}
-				>
+				<Sidenav handler={renderMobileFilterToggle}>
 					<Box px={3} py={2}>
 						{mobileFiltersContent}
 					</Box>

package/src/pages/product-list/side-nav.tsx

@@ -1,5 +1,5 @@
 import Drawer from "@mui/material/Drawer";
-import { type ReactNode, useEffect, useState } from "react";
+import React, { type ReactNode, useEffect, useState } from "react";
 // GLOBAL CUSTOM COMPONENT
 import Scrollbar from "./scrollbar";
 
@@ -14,7 +14,7 @@ interface Props {
 }
 // ================================================================
 
-export default function SideNav(props: Readonly<Props>) {
+const SideNav: React.FC<Props> = (props: Readonly<Props>) => {
 	const {
 		position = "left",
 		open = false,
@@ -46,4 +46,6 @@ export default function SideNav(props: Readonly<Props>) {
 			{handler(handleClose)}
 		</div>
 	);
-}
+};
+
+export default SideNav;

package/src/pages/quickorder/order-upload.tsx

@@ -42,7 +42,7 @@ export default function OrderUpload({
 	const t = useTranslations("QuickOrder");
 
 	const [items, setItems] = useState<OrderUploadItem[]>([]);
-	const [_errCount, setErrCount] = useState<number>(0);
+	const [, setErrCount] = useState<number>(0);
 	const [files, setFiles] = useState<File[]>();
 	const [fileRejections, setFileRejections] = useState<string[]>([]);
 

package/src/pages/quickorder/provider.tsx

@@ -4,7 +4,7 @@ import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/c
 import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 import useSearchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/mutations/search-products";
 import type React from "react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { QuickOrderContext, RowError, type UploadedItem } from "./context";
 import type { QuickOrderRowData } from "./quick-order-row";
 
@@ -183,21 +183,33 @@ export default function QuickOrderProvider({
 	};
 
 	useEffect(() => initTable(), [initTable]);
+	const contextValue = useMemo(
+		() => ({
+			rows,
+			cart,
+			handleRowUpdate,
+			handleRowDelete,
+			handleAddRows,
+			handleAddToCart,
+			handleUploadedItems,
+			resetForm: initTable,
+			generateFile,
+		}),
+		[
+			rows,
+			cart,
+			handleRowUpdate,
+			handleRowDelete,
+			handleAddRows,
+			handleAddToCart,
+			handleUploadedItems,
+			initTable,
+			generateFile,
+		],
+	);
 
 	return (
-		<QuickOrderContext.Provider
-			value={{
-				rows,
-				cart,
-				handleRowUpdate,
-				handleRowDelete,
-				handleAddRows,
-				handleAddToCart,
-				handleUploadedItems,
-				resetForm: initTable,
-				generateFile,
-			}}
-		>
+		<QuickOrderContext.Provider value={contextValue}>
 			{children}
 		</QuickOrderContext.Provider>
 	);

package/src/pages/quickorder/quick-order.tsx

@@ -105,8 +105,8 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		if (idx > -1) {
 			current.splice(idx, 1);
 			// Ensure there's always a trailing empty row for input
-			const lastRow = current[current.length - 1];
-			if (lastRow.value) {
+			const lastRow = current.at(-1);
+			if (lastRow?.value) {
 				const newRowId = current.reduce((m, r) => Math.max(m, r.id), 0) + 1;
 				current.push(generateEmptyRow(newRowId));
 			}
@@ -184,8 +184,8 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		current[idx] = generateRowData(product, id, value, found, quantity);
 
 		// Auto-add an empty row when the last row has data entered
-		const lastRow = current[current.length - 1];
-		if (lastRow.value) {
+		const lastRow = current.at(-1);
+		if (lastRow?.value) {
 			const newRowId = current.reduce((m, r) => Math.max(m, r.id), 0) + 1;
 			current.push(generateEmptyRow(newRowId));
 		}
@@ -277,17 +277,30 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		tableInit();
 	}, [tableInit]);
 
-	const value: Ctx = {
-		rows,
-		setRows,
-		addRows,
-		resetTable: tableInit,
-		updateRow,
-		deleteRow,
-		generateCsv,
-		handleUploadedItems,
-		addToCart,
-	};
+	const value: Ctx = useMemo(
+		() => ({
+			rows,
+			setRows,
+			addRows,
+			resetTable: tableInit,
+			updateRow,
+			deleteRow,
+			generateCsv,
+			handleUploadedItems,
+			addToCart,
+		}),
+		[
+			rows,
+			setRows,
+			addRows,
+			tableInit,
+			updateRow,
+			deleteRow,
+			generateCsv,
+			handleUploadedItems,
+			addToCart,
+		],
+	);
 
 	return (
 		<QuickOrderContext.Provider value={value}>
@@ -304,7 +317,7 @@ QuickOrder.Table = ({ children }: { children?: ReactNode }) => (
 	</TableContainer>
 );
 
-QuickOrder.Head = () => {
+const QuickOrderHead = () => {
 	const t = useTranslations("QuickOrder");
 	return (
 		<TableHead sx={{ backgroundColor: "#323337" }}>
@@ -327,7 +340,9 @@ QuickOrder.Head = () => {
 	);
 };
 
-QuickOrder.Body = () => {
+QuickOrder.Head = QuickOrderHead;
+
+const QuickOrderBody = () => {
 	const ctx = useQuickOrder();
 	if (!ctx) return null;
 	const { rows } = ctx;
@@ -340,7 +355,9 @@ QuickOrder.Body = () => {
 	);
 };
 
-QuickOrder.Row = ({ row }: { row: QuickOrderRowData }) => {
+QuickOrder.Body = QuickOrderBody;
+
+const QuickOrderRow = ({ row }: { row: QuickOrderRowData }) => {
 	const ctx = useQuickOrder();
 	const theme = useTheme();
 	const t = useTranslations("QuickOrder");
@@ -435,6 +452,8 @@ QuickOrder.Row = ({ row }: { row: QuickOrderRowData }) => {
 	);
 };
 
+QuickOrder.Row = QuickOrderRow;
+
 QuickOrder.SkuInput = ({
 	value,
 	onChange,
@@ -485,7 +504,7 @@ QuickOrder.Actions = ({ children }: { children?: ReactNode }) => (
 	</BorderShadowCard>
 );
 
-QuickOrder.AddToCartButton = () => {
+const QuickOrderAddToCartButton = () => {
 	const ctx = useQuickOrder();
 	const t = useTranslations("QuickOrder");
 	if (!ctx) return null;
@@ -496,7 +515,9 @@ QuickOrder.AddToCartButton = () => {
 	);
 };
 
-QuickOrder.ResetButton = () => {
+QuickOrder.AddToCartButton = QuickOrderAddToCartButton;
+
+const QuickOrderResetButton = () => {
 	const ctx = useQuickOrder();
 	const t = useTranslations("QuickOrder");
 	if (!ctx) return null;
@@ -507,7 +528,9 @@ QuickOrder.ResetButton = () => {
 	);
 };
 
-QuickOrder.DownloadCsvButton = () => {
+QuickOrder.ResetButton = QuickOrderResetButton;
+
+const QuickOrderDownloadCsvButton = () => {
 	const ctx = useQuickOrder();
 	const t = useTranslations("QuickOrder");
 	if (!ctx) return null;
@@ -518,6 +541,8 @@ QuickOrder.DownloadCsvButton = () => {
 	);
 };
 
+QuickOrder.DownloadCsvButton = QuickOrderDownloadCsvButton;
+
 QuickOrder.Upload = ({ children }: { children?: ReactNode }) => (
 	<BorderShadowCard>
 		<FlexBox justifyContent="center" gap={2} flexDirection="column" px={2}>
@@ -526,10 +551,12 @@ QuickOrder.Upload = ({ children }: { children?: ReactNode }) => (
 	</BorderShadowCard>
 );
 
-QuickOrder.OrderUpload = () => {
+const QuickOrderOrderUpload = () => {
 	const ctx = useQuickOrder();
 	if (!ctx) return null;
 	return <OrderUploadInner onUploadItems={ctx.handleUploadedItems} />;
 };
 
+QuickOrder.OrderUpload = QuickOrderOrderUpload;
+
 export default QuickOrder;

package/src/providers/nav-provider/index.tsx

@@ -3,7 +3,12 @@ import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { createLink } from "@evenicanpm/storefront-core/src/providers/nav-provider/utils/createLink";
 import { useTranslations } from "next-intl";
-import { createContext, type PropsWithChildren, useState } from "react";
+import {
+	createContext,
+	type PropsWithChildren,
+	useMemo,
+	useState,
+} from "react";
 
 type NavContextType = {
 	cmsNav: CmsNavItem[];
@@ -41,18 +46,18 @@ const NavProvider = ({
 
 	// Extend nav by creating links here
 	const blogLink = createLink(t("blogLink"), "/blog"); //Localization example with hooks
+	const contextValue = useMemo(
+		() => ({
+			categories,
+			cmsNav: [blogLink, ...cmsNav],
+			isMobileSideNavOpen,
+			toggleMobileSideNav,
+		}),
+		[categories, blogLink, cmsNav, isMobileSideNavOpen, toggleMobileSideNav],
+	);
 
 	return (
-		<NavContext.Provider
-			value={{
-				categories,
-				cmsNav: [blogLink, ...cmsNav],
-				isMobileSideNavOpen,
-				toggleMobileSideNav,
-			}}
-		>
-			{children}
-		</NavContext.Provider>
+		<NavContext.Provider value={contextValue}>{children}</NavContext.Provider>
 	);
 };
 

package/tsconfig.json

@@ -27,11 +27,6 @@
 			"@evenicanpm/storefront-core/src/hooks/*": ["./src/hooks/*"],
 			"@config": ["./src/config"],
 			"@messages/*": ["../../../../storefront/messages/*"],
-			"*": [
-				"../../node_modules/.pnpm/node_modules/*",
-				"./node_modules/*",
-				"../../apps/storefront/node_modules/*"
-			]
 		}
 	},
 	"include": ["src"]