@evenicanpm/storefront-core 1.6.0 → 1.8.0

package/src/components-v2/search-bar/__tests__/search-bar.test.tsx

@@ -0,0 +1,142 @@
+import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import { SearchBarViewLg, SearchBarViewSm } from "../index";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/search-bar/compound/search-bar-root",
+	() => ({
+		default: Object.assign(
+			({
+				children,
+				handleCloseDrawer,
+			}: {
+				children: ReactNode;
+				handleCloseDrawer?: () => void;
+			}) => (
+				<button
+					type="button"
+					data-testid="search-bar"
+					onClick={handleCloseDrawer}
+				>
+					{children}
+				</button>
+			),
+			{
+				TextField: () => <input data-testid="search-input" />,
+				Results: Object.assign(
+					({ children }: { children: ReactNode }) => (
+						<div data-testid="results">{children}</div>
+					),
+					{
+						ItemCardLg: () => <div data-testid="item-card-lg">Item</div>,
+						ItemCardSm: () => <div data-testid="item-card-sm">Item</div>,
+					},
+				),
+			},
+		),
+	}),
+);
+
+describe("SearchBar components", () => {
+	describe("SearchBarViewLg", () => {
+		it("renders large search bar view", () => {
+			const { container } = render(<SearchBarViewLg />);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("accepts handleCloseDrawer prop", () => {
+			const handleClose = vi.fn();
+			const { container } = render(
+				<SearchBarViewLg handleCloseDrawer={handleClose} />,
+			);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("renders search bar structure", () => {
+			const { container } = render(<SearchBarViewLg />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar).toBeTruthy();
+			expect(searchBar?.children.length).toBeGreaterThan(0);
+		});
+
+		it("renders with results container", () => {
+			const { container } = render(<SearchBarViewLg />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar).toBeTruthy();
+		});
+	});
+
+	describe("SearchBarViewSm", () => {
+		it("renders small search bar view", () => {
+			const { container } = render(<SearchBarViewSm />);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("accepts handleCloseDrawer prop", () => {
+			const handleClose = vi.fn();
+			const { container } = render(
+				<SearchBarViewSm handleCloseDrawer={handleClose} />,
+			);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("renders search bar structure", () => {
+			const { container } = render(<SearchBarViewSm />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar).toBeTruthy();
+		});
+
+		it("renders with results container", () => {
+			const { container } = render(<SearchBarViewSm />);
+			const searchBar = container.querySelector("[data-testid='search-bar']");
+			expect(searchBar?.children.length).toBeGreaterThan(0);
+		});
+
+		it("renders different from large view", () => {
+			const { container: lgContainer } = render(<SearchBarViewLg />);
+			const { container: smContainer } = render(<SearchBarViewSm />);
+			expect(
+				lgContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+			expect(
+				smContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+	});
+
+	describe("SearchBar integration", () => {
+		it("renders search bar without close handler", () => {
+			const { container } = render(
+				<SearchBarViewLg handleCloseDrawer={undefined} />,
+			);
+			expect(
+				container.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+
+		it("both views render successfully", () => {
+			const { container: lgContainer } = render(<SearchBarViewLg />);
+			expect(
+				lgContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+
+			const { container: smContainer } = render(<SearchBarViewSm />);
+			expect(
+				smContainer.querySelector("[data-testid='search-bar']"),
+			).toBeTruthy();
+		});
+	});
+});

package/src/components-v2/search-bar/compound/results.tsx

@@ -29,7 +29,7 @@ export default function SearchResultsContainer({
 		category: state.searchCategory,
 	});
 
-	if (!results || results.length === 0) {
+	if (!results || !Array.isArray(results) || results.length === 0) {
 		return <SearchResultCard>{t("Search.noResults")}</SearchResultCard>;
 	}
 

package/src/components-v2/section/__tests__/section.test.tsx

@@ -0,0 +1,100 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import { Section } from "../compound/section";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock(
+	"@evenicanpm/storefront-core/src/components-v2/section/compound/section-header",
+	() => ({
+		SectionHeader: () => <div data-testid="section-header">Header</div>,
+	}),
+);
+
+vi.mock("@mui/material/Container", () => ({
+	default: ({ className, children }: any) => (
+		<div data-testid="mui-container" className={className}>
+			{children}
+		</div>
+	),
+}));
+
+describe("Section", () => {
+	it("renders section with children", () => {
+		render(
+			<Section>
+				<div>Section Content</div>
+			</Section>,
+		);
+		expect(screen.getByText("Section Content")).toBeInTheDocument();
+	});
+
+	it("renders with Container component", () => {
+		const { container } = render(
+			<Section>
+				<div>Content</div>
+			</Section>,
+		);
+		expect(
+			container.querySelector("[data-testid='mui-container']"),
+		).toBeTruthy();
+	});
+
+	it("passes className to Container", () => {
+		const { container } = render(
+			<Section>
+				<div>Content</div>
+			</Section>,
+		);
+		const containerElement = container.querySelector(
+			"[data-testid='mui-container']",
+		);
+		expect(containerElement?.className).toContain("pb-1");
+	});
+
+	it("accepts Box props", () => {
+		const { container } = render(
+			<Section sx={{ backgroundColor: "red" }}>
+				<div>Content</div>
+			</Section>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+
+	it("renders with spacing", () => {
+		render(
+			<Section>
+				<div>Spaced Content</div>
+			</Section>,
+		);
+		expect(screen.getByText("Spaced Content")).toBeInTheDocument();
+	});
+
+	it("exposes Header subcomponent", () => {
+		expect(Section.Header).toBeDefined();
+	});
+
+	it("renders multiple children inside container", () => {
+		render(
+			<Section>
+				<div>Child 1</div>
+				<div>Child 2</div>
+				<div>Child 3</div>
+			</Section>,
+		);
+		expect(screen.getByText("Child 1")).toBeInTheDocument();
+		expect(screen.getByText("Child 2")).toBeInTheDocument();
+		expect(screen.getByText("Child 3")).toBeInTheDocument();
+	});
+
+	it("accepts custom sx styling", () => {
+		const { container } = render(
+			<Section sx={{ padding: 2, margin: 1 }}>
+				<div>Styled Section</div>
+			</Section>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+});

package/src/components-v2/side-nav/__tests__/side-nav.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import SideNav from "../side-nav";
+
+vi.mock("@evenicanpm/storefront-core/src/components-v2/scrollbar", () => ({
+	default: ({
+		children,
+		autoHide,
+	}: {
+		children: ReactNode;
+		autoHide?: boolean;
+	}) => (
+		<div data-testid="scrollbar" data-autohide={autoHide}>
+			{children}
+		</div>
+	),
+}));
+
+vi.mock("@mui/material/Drawer", () => ({
+	default: ({
+		open,
+		onClose,
+		children,
+		anchor,
+	}: {
+		open: boolean;
+		onClose?: () => void;
+		children: ReactNode;
+		anchor: string;
+	}) => (
+		<button
+			type="button"
+			data-testid="drawer"
+			data-open={open}
+			data-anchor={anchor}
+			onClick={() => onClose?.()}
+		>
+			{children}
+		</button>
+	),
+}));
+
+describe("SideNav", () => {
+	const mockHandler = (toggle: () => void) => (
+		<button type="button" data-testid="toggle-button" onClick={toggle}>
+			Toggle
+		</button>
+	);
+
+	it("renders side nav with handler and children", () => {
+		render(
+			<SideNav handler={mockHandler}>
+				<div>Side Nav Content</div>
+			</SideNav>,
+		);
+		expect(screen.getByText("Side Nav Content")).toBeInTheDocument();
+		expect(screen.getByTestId("toggle-button")).toBeInTheDocument();
+	});
+
+	it("renders drawer component", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='drawer']")).toBeTruthy();
+	});
+
+	it("renders with default position left", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-anchor")).toBe("left");
+	});
+
+	it("renders with custom position right", () => {
+		const { container } = render(
+			<SideNav position="right" handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-anchor")).toBe("right");
+	});
+
+	it("manages drawer state", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-open")).toBe("false");
+	});
+
+	it("accepts custom width", () => {
+		const { container } = render(
+			<SideNav width={300} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='drawer']")).toBeTruthy();
+	});
+
+	it("uses scrollbar for children", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Scrollable Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='scrollbar']")).toBeTruthy();
+	});
+
+	it("handles drawer close", () => {
+		const { container } = render(
+			<SideNav handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		const drawer = container.querySelector("[data-testid='drawer']");
+		if (drawer) fireEvent.click(drawer);
+		expect(screen.getByTestId("toggle-button")).toBeInTheDocument();
+	});
+
+	it("accepts external toggle function", () => {
+		const externalToggle = vi.fn();
+		const { container } = render(
+			<SideNav toggle={externalToggle} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		expect(container.querySelector("[data-testid='drawer']")).toBeTruthy();
+	});
+
+	it("syncs external and internal state", () => {
+		const { rerender, container } = render(
+			<SideNav open={true} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		let drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-open")).toBe("true");
+
+		rerender(
+			<SideNav open={false} handler={mockHandler}>
+				<div>Content</div>
+			</SideNav>,
+		);
+		drawer = container.querySelector("[data-testid='drawer']");
+		expect(drawer?.getAttribute("data-open")).toBe("false");
+	});
+});

package/src/components-v2/wishlist-dialogs/add-to-wishlist/add-to-wishlist-button.tsx

@@ -23,23 +23,22 @@ const AddToWishlistButton = (props: Props) => {
 	};
 
 	// conditionally render button styles based on variant (pdp or minicart)
-	let style: any, btnFullwidth: boolean;
+	let style: any;
+	let btnFullwidth: boolean;
 	let btnColor: ButtonProps["color"];
 	let btnVariant: ButtonProps["variant"];
-	switch (props.variant) {
-		case "minicart":
-			style = {
-				px: 4,
-			};
-			btnFullwidth = true;
-			btnVariant = "outlined";
-			btnColor = "primary";
-			break;
-		default:
-			btnFullwidth = false;
-			btnVariant = "contained";
-			btnColor = "secondary";
-			break;
+
+	if (props.variant === "minicart") {
+		style = {
+			px: 4,
+		};
+		btnFullwidth = true;
+		btnVariant = "outlined";
+		btnColor = "primary";
+	} else {
+		btnFullwidth = false;
+		btnVariant = "contained";
+		btnColor = "secondary";
 	}
 
 	return (

package/src/components-v2/wishlist-dialogs/styles.ts

@@ -9,16 +9,14 @@ type ExtendedNavLinkProps = NavLinkProps & {
 	isCurrentPath?: boolean;
 };
 
-export const MainContainer: ComponentType<CardProps> = styled(Card)(
-	({ theme }) => ({
-		paddingBottom: "1.5rem",
-		[theme.breakpoints.down("md")]: {
-			boxShadow: "none",
-			overflowY: "auto",
-			height: "calc(100vh - 64px)",
-		},
-	}),
-) as typeof Card;
+export const MainContainer = styled(Card)(({ theme }) => ({
+	paddingBottom: "1.5rem",
+	[theme.breakpoints.down("md")]: {
+		boxShadow: "none",
+		overflowY: "auto",
+		height: "calc(100vh - 64px)",
+	},
+}));
 
 export const StyledNavLink: ComponentType<ExtendedNavLinkProps> = styled(
 	NavLink,

package/src/pages-v2/account/addresses/address-item.tsx

@@ -83,9 +83,10 @@ const AddressListItem = ({ address, children, sx }: RootProps) => {
 };
 
 // ----------------- Subcomponents -----------------
+type FieldValue = string | number | boolean;
 interface FieldProps {
 	field: keyof Address; // "Name" | "FullAddress" | "Phone" etc.
-	render?: (value: string | number | boolean, address: Address) => ReactNode;
+	render?: (value: FieldValue, address: Address) => ReactNode;
 }
 
 AddressListItem.Field = ({ field, render }: FieldProps) => {

package/src/pages-v2/checkout/checkout-alt-form/checkout-form.tsx

@@ -166,10 +166,15 @@ CheckoutForm.Step = <T extends object>({
 	const t = useTranslations("Checkout");
 	if (!ctx) return null;
 	const { activeStep, setActiveStep, cart } = ctx;
+
+	if (stepNumber === undefined) {
+		throw new Error("CheckoutForm.Step must be used inside CheckoutForm.Steps");
+	}
+
 	return (
 		<CheckoutStep
 			title={t(title)}
-			stepNumber={stepNumber!}
+			stepNumber={stepNumber}
 			activeStep={activeStep}
 			setActiveStep={setActiveStep}
 			cart={cart}

package/src/pages-v2/checkout/checkout-alt-form/steps/address/new-address-form.tsx

@@ -179,12 +179,12 @@ const NewAddressForm = ({
 	const ctx: NewAddressFormCtx = {
 		form,
 		countries,
-		states: states
-			? states?.map((s) => ({
+		states: Array.isArray(states)
+			? states.map((s) => ({
 					StateName: s.StateName ?? "",
 					StateId: s.StateId ?? "",
 				}))
-			: undefined,
+			: [],
 		selectedCountry,
 		setSelectedCountry,
 		errors,
@@ -312,11 +312,12 @@ NewAddressForm.StateSelect = () => {
 					render={({ field }) => (
 						<Select labelId="state-label" {...field}>
 							<MenuItem value="0">Select a state</MenuItem>
-							{states?.map(({ StateName, StateId }) => (
-								<MenuItem key={StateId} value={StateId}>
-									{StateName}
-								</MenuItem>
-							))}
+							{Array.isArray(states) &&
+								states?.map(({ StateName, StateId }) => (
+									<MenuItem key={StateId} value={StateId}>
+										{StateName}
+									</MenuItem>
+								))}
 						</Select>
 					)}
 				/>

package/src/pages-v2/product-details/bopis/find-in-store-modal.tsx

@@ -155,7 +155,7 @@ const FindInStoreModal = ({
 		if (!stores) {
 			return [];
 		}
-		const _stores = [...Object.values(stores)];
+		const _stores = Object.values(stores);
 		if (hideOutOfStock) {
 			return _stores.filter(
 				(store) => !isOutOfStock(store.location.OrgUnitNumber || ""),

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

@@ -13,6 +13,7 @@ function ThumbnailWithSkeleton({ src }: Readonly<{ src: string }>) {
 			{!loaded && <Skeleton variant="rounded" width={50} height={50} />}
 			<img
 				src={src}
+				alt="Product thumbnail"
 				onLoad={() => setLoaded(true)}
 				style={{
 					display: loaded ? "block" : "none",