@evenicanpm/storefront-core 1.8.4 → 2.0.1

package/src/components/_tests_/Image.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import Image from "../Image";
+
+describe("Image", () => {
+	it("renders img element", () => {
+		render(<Image src="/sample.jpg" alt="Sample" data-testid="styled-image" />);
+		const image = screen.getByTestId("styled-image");
+		expect(image).toBeInTheDocument();
+		expect(image).toHaveAttribute("src", "/sample.jpg");
+		expect(image).toHaveAttribute("alt", "Sample");
+	});
+});

package/src/components/_tests_/ImageWithFallback.test.tsx

@@ -0,0 +1,76 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import ImageWithFallback from "../ImageWithFallback";
+
+vi.mock("@evenicanpm/storefront-core/src/components/LazyImage", () => ({
+	default: ({
+		src,
+		alt,
+		onError,
+	}: {
+		src: string;
+		alt: string;
+		onError?: () => void;
+	}) => (
+		<button
+			type="button"
+			data-testid="lazy-image"
+			data-src={src}
+			data-alt={alt}
+			onClick={onError}
+		>
+			LazyImageMock
+		</button>
+	),
+}));
+
+describe("ImageWithFallback", () => {
+	it("renders provided src when valid", () => {
+		render(
+			<ImageWithFallback
+				src="/valid.png"
+				alt="Valid"
+				width={100}
+				height={100}
+			/>,
+		);
+		expect(screen.getByTestId("lazy-image")).toHaveAttribute(
+			"data-src",
+			"/valid.png",
+		);
+	});
+
+	it("uses fallback src when src is empty", () => {
+		render(
+			<ImageWithFallback
+				src={""}
+				fallbackSrc="/fallback.png"
+				alt="Fallback"
+				width={100}
+				height={100}
+			/>,
+		);
+		expect(screen.getByTestId("lazy-image")).toHaveAttribute(
+			"data-src",
+			"/fallback.png",
+		);
+	});
+
+	it("switches to fallback on error", () => {
+		render(
+			<ImageWithFallback
+				src="/broken.png"
+				fallbackSrc="/fallback.png"
+				alt="Error Fallback"
+				width={100}
+				height={100}
+			/>,
+		);
+
+		fireEvent.click(screen.getByTestId("lazy-image"));
+		expect(screen.getByTestId("lazy-image")).toHaveAttribute(
+			"data-src",
+			"/fallback.png",
+		);
+	});
+});

package/src/components/_tests_/LazyImage.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import LazyImage, { ZoomLazyImage } from "../LazyImage";
+
+vi.mock("next/image", () => ({
+	default: ({ src, alt }: { src: string; alt: string }) => (
+		<div data-testid="next-image" data-src={src} data-alt={alt}>
+			{alt}
+		</div>
+	),
+}));
+
+describe("LazyImage", () => {
+	it("renders default lazy image", () => {
+		render(<LazyImage src="/lazy.png" alt="Lazy" width={100} height={100} />);
+		expect(screen.getByTestId("next-image")).toBeInTheDocument();
+		expect(screen.getByTestId("next-image")).toHaveAttribute(
+			"data-src",
+			"/lazy.png",
+		);
+	});
+
+	it("renders zoom lazy image", () => {
+		render(
+			<ZoomLazyImage src="/zoom.png" alt="Zoom" width={100} height={100} />,
+		);
+		expect(screen.getByTestId("next-image")).toHaveAttribute(
+			"data-src",
+			"/zoom.png",
+		);
+	});
+});

package/src/components/_tests_/Loading.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import Loading from "../Loading";
+
+describe("Loading", () => {
+	it("renders loader", () => {
+		const { container } = render(<Loading />);
+		expect(container.firstChild).toBeTruthy();
+		expect(screen.getByRole("progressbar")).toBeInTheDocument();
+	});
+
+	it("sets fullscreen data attribute when enabled", () => {
+		const { container } = render(<Loading fullscreen />);
+		expect(container.firstChild).toHaveAttribute("data-full", "true");
+	});
+});

package/src/components/_tests_/SearchInput.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from "@testing-library/react";
+import SearchInput from "../SearchInput";
+
+describe("SearchInput", () => {
+	it("renders input with placeholder", () => {
+		render(<SearchInput placeholder="Search products" />);
+		expect(screen.getByPlaceholderText("Search products")).toBeInTheDocument();
+	});
+
+	it("accepts input value", () => {
+		render(<SearchInput value="nike" readOnly />);
+		expect(screen.getByDisplayValue("nike")).toBeInTheDocument();
+	});
+});

package/src/components/_tests_/SnackbarProvider.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import SnackbarProvider from "../SnackbarProvider";
+
+vi.mock("notistack", () => ({
+	SnackbarProvider: ({ children }: { children: React.ReactNode }) => (
+		<div data-testid="notistack-provider">{children}</div>
+	),
+}));
+
+describe("SnackbarProvider", () => {
+	it("renders children inside provider", () => {
+		render(
+			<SnackbarProvider>
+				<div>Snackbar Child</div>
+			</SnackbarProvider>,
+		);
+
+		expect(screen.getByTestId("notistack-provider")).toBeInTheDocument();
+		expect(screen.getByText("Snackbar Child")).toBeInTheDocument();
+	});
+});

package/src/components/_tests_/Typography.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import {
+	Display,
+	H1,
+	H4,
+	Paragraph,
+	Small,
+	Span,
+	Subtitle,
+	Tiny,
+} from "../Typography";
+
+describe("Typography", () => {
+	it("renders heading components", () => {
+		render(
+			<>
+				<H1>Heading One</H1>
+				<H4>Heading Four</H4>
+			</>,
+		);
+
+		expect(screen.getByText("Heading One").tagName).toBe("H1");
+		expect(screen.getByText("Heading Four").tagName).toBe("H4");
+	});
+
+	it("renders text components", () => {
+		render(
+			<>
+				<Paragraph>Body Copy</Paragraph>
+				<Small>Small Copy</Small>
+				<Span>Inline Copy</Span>
+				<Tiny>Tiny Copy</Tiny>
+			</>,
+		);
+
+		expect(screen.getByText("Body Copy").tagName).toBe("P");
+		expect(screen.getByText("Small Copy").tagName).toBe("SMALL");
+		expect(screen.getByText("Inline Copy").tagName).toBe("SPAN");
+		expect(screen.getByText("Tiny Copy").tagName).toBe("SMALL");
+	});
+
+	it("renders display components", () => {
+		render(
+			<>
+				<Display>Display Text</Display>
+				<Subtitle>Subtitle Text</Subtitle>
+			</>,
+		);
+
+		expect(screen.getByText("Display Text").tagName).toBe("H1");
+		expect(screen.getByText("Subtitle Text").tagName).toBe("H1");
+	});
+});

package/src/components/_tests_/WhiteButton.test.tsx

@@ -0,0 +1,20 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import WhiteButton from "../WhiteButton";
+
+describe("WhiteButton", () => {
+	it("renders children", () => {
+		render(<WhiteButton>White CTA</WhiteButton>);
+		expect(
+			screen.getByRole("button", { name: "White CTA" }),
+		).toBeInTheDocument();
+	});
+
+	it("calls onClick handler", () => {
+		const handleClick = vi.fn();
+		render(<WhiteButton onClick={handleClick}>Click Me</WhiteButton>);
+
+		fireEvent.click(screen.getByRole("button", { name: "Click Me" }));
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+});

package/src/components/_tests_/countries-input.test.tsx

@@ -0,0 +1,39 @@
+import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import CountryInput from "../countries-input";
+
+describe("CountryInput", () => {
+	const countries: CountryRegionInfo[] = [
+		{ CountryRegionId: "US", ShortName: "United States" } as CountryRegionInfo,
+		{ CountryRegionId: "CA", ShortName: "Canada" } as CountryRegionInfo,
+	];
+
+	it("renders input label", () => {
+		render(
+			<CountryInput
+				countries={countries}
+				label="Country"
+				selectedCountry={null}
+				setSelectedCountry={vi.fn()}
+			/>,
+		);
+
+		expect(screen.getByLabelText("Country")).toBeInTheDocument();
+	});
+
+	it("accepts typed input", () => {
+		render(
+			<CountryInput
+				countries={countries}
+				label="Country"
+				selectedCountry={null}
+				setSelectedCountry={vi.fn()}
+			/>,
+		);
+
+		const input = screen.getByRole("combobox");
+		fireEvent.change(input, { target: { value: "Can" } });
+		expect(input).toBeInTheDocument();
+	});
+});

package/src/components/_tests_/no-records.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import NoRecords from "../no-records";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+describe("NoRecords", () => {
+	it("renders translated message", () => {
+		render(<NoRecords message="empty.message" />);
+		expect(screen.getByText("empty.message")).toBeInTheDocument();
+	});
+});

package/src/components/_tests_/site-logo.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import SiteLogo from "../site-logo";
+
+vi.mock("next/link", () => ({
+	default: ({
+		href,
+		children,
+	}: {
+		href: string;
+		children: React.ReactNode;
+	}) => <a href={href}>{children}</a>,
+}));
+
+describe("SiteLogo", () => {
+	it("renders logo image", () => {
+		render(<SiteLogo />);
+		const logo = screen.getByAltText("E4 Logo");
+		expect(logo).toBeInTheDocument();
+		// next/image rewrites src to an optimized URL (e.g. /_next/image?url=...)
+		expect(logo.getAttribute("src")).toMatch(/logo-blue\.png/);
+	});
+
+	it("wraps logo in home link", () => {
+		render(<SiteLogo />);
+		expect(screen.getByRole("link")).toHaveAttribute("href", "/");
+	});
+});

package/src/{components-v2 → components}/accordion/accordion-header.tsx

@@ -1,5 +1,5 @@
 // GLOBAL CUSTOM COMPONENT
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
 // MUI ICON COMPONENTS
 import ChevronRight from "@mui/icons-material/ChevronRight";
 import type { BoxProps } from "@mui/material/Box";

package/src/{components-v2 → components}/accordion/index.ts

@@ -1 +1 @@
-export { default as AccordionHeader } from "@evenicanpm/storefront-core/src/components-v2/accordion/accordion-header";
+export { default as AccordionHeader } from "@evenicanpm/storefront-core/src/components/accordion/accordion-header";

package/src/{components-v2 → components}/carousel/carousel.tsx

@@ -6,9 +6,9 @@ import { forwardRef, type PropsWithChildren } from "react";
 import Slider, { type CustomArrowProps, type Settings } from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-import { createArrows } from "@evenicanpm/storefront-core/src/components-v2/carousel/components/carousel-arrows";
-import { createDots } from "@evenicanpm/storefront-core/src/components-v2/carousel/components/carousel-dots";
-import { RootStyle } from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
+import { createArrows } from "@evenicanpm/storefront-core/src/components/carousel/components/carousel-arrows";
+import { createDots } from "@evenicanpm/storefront-core/src/components/carousel/components/carousel-dots";
+import { RootStyle } from "@evenicanpm/storefront-core/src/components/carousel/styles/index";
 
 type ArrowConfig = {
 	sx?: SxProps<Theme>;

package/src/{components-v2 → components}/carousel/components/carousel-arrows.tsx

@@ -1,5 +1,5 @@
 // STYLED COMPONENT
-import { ArrowButton } from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
+import { ArrowButton } from "@evenicanpm/storefront-core/src/components/carousel/styles/index";
 // MUI ICON COMPONENTS
 import ArrowBack from "@mui/icons-material/ArrowBack";
 import ArrowForward from "@mui/icons-material/ArrowForward";

package/src/{components-v2 → components}/carousel/components/carousel-dots.tsx

@@ -2,7 +2,7 @@
 import {
 	Dot,
 	DotList,
-} from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
+} from "@evenicanpm/storefront-core/src/components/carousel/styles/index";
 import type { SxProps, Theme } from "@mui/material/styles";
 import type { Settings } from "react-slick";
 

package/src/{components-v2 → components}/carousel/index.ts

@@ -1 +1 @@
-export { default as Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/carousel";
+export { default as Carousel } from "@evenicanpm/storefront-core/src/components/carousel/carousel";

package/src/{components-v2 → components}/carousel-cards/carousel-card-1/carousel-card-1.tsx

@@ -1,8 +1,8 @@
 // GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import BazaarImage from "@evenicanpm/storefront-core/src/components/BazaarImage";
 // STYLED COMPONENT
-import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/carousel-cards/carousel-card-1/styles";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { StyledRoot } from "@evenicanpm/storefront-core/src/components/carousel-cards/carousel-card-1/styles";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid2";
 import type { ReactNode } from "react";

package/src/components/carousel-cards/carousel-card-1/index.ts

@@ -0,0 +1 @@
+export { default } from "@evenicanpm/storefront-core/src/components/carousel-cards/carousel-card-1/carousel-card-1";

package/src/{components-v2 → components}/categories/Categories.stories.tsx

@@ -2,7 +2,7 @@
 
 // CUSTOM ICON COMPONENTS
 // GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components/flex-box";
 // MUI ICON COMPONENT
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 

package/src/{components-v2 → components}/categories/__tests__/category-menu.test.tsx

@@ -3,7 +3,7 @@ import { vi } from "vitest";
 import CategoryMenu from "../category-menu";
 
 vi.mock(
-	"@evenicanpm/storefront-core/src/components-v2/categories/category-list/index",
+	"@evenicanpm/storefront-core/src/components/categories/category-list/index",
 	() => ({
 		default: ({ open }: { open: boolean }) => (
 			<div data-testid="category-list" data-open={String(open)}>

package/src/{components-v2 → components}/categories/category-list/category-list.tsx

@@ -4,12 +4,12 @@ import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/
 import {
 	StyledRoot,
 	SubMenuStyledRoot,
-} from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/styles";
-import CategoryListItem from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
-import MegaMenu1 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-1";
-import MegaMenu2 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-2";
+} from "@evenicanpm/storefront-core/src/components/categories/category-list/styles";
+import CategoryListItem from "@evenicanpm/storefront-core/src/components/categories/category-list-item/index";
+import MegaMenu1 from "@evenicanpm/storefront-core/src/components/categories/mega-menu/mega-menu-1";
+import MegaMenu2 from "@evenicanpm/storefront-core/src/components/categories/mega-menu/mega-menu-2";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
-import React, { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext } from "react";
 
 type MegaMenuType = "default" | "mega-menu-1" | "mega-menu-2";
 

package/src/{components-v2/navbar/mega-menu → components/categories/category-list}/index.ts

@@ -1 +1 @@
-export { default } from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu/mega-menu";
+export { default } from "@evenicanpm/storefront-core/src/components/categories/category-list/category-list";

package/src/{components-v2 → components}/categories/category-list/styles.ts

@@ -1,4 +1,4 @@
-import type { Props } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/types";
+import type { Props } from "@evenicanpm/storefront-core/src/components/categories/category-list/types";
 import Card from "@mui/material/Card";
 import styled from "@mui/material/styles/styled";
 

package/src/{components-v2 → components}/categories/category-list-item/category-menu-item.tsx

@@ -1,5 +1,5 @@
 // STYLED COMPONENT
-import { Wrapper } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/styles";
+import { Wrapper } from "@evenicanpm/storefront-core/src/components/categories/category-list-item/styles";
 // MUI ICON COMPONENTS
 import type { SvgIconComponent } from "@mui/icons-material";
 import ChevronRight from "@mui/icons-material/ChevronRight";

package/src/components/categories/category-list-item/index.ts

@@ -0,0 +1 @@
+export { default } from "@evenicanpm/storefront-core/src/components/categories/category-list-item/category-menu-item";

package/src/{components-v2 → components}/categories/category-menu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import CategoryList from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/index";
+import CategoryList from "@evenicanpm/storefront-core/src/components/categories/category-list/index";
 import styled from "@mui/material/styles/styled";
 import { useCallback, useEffect, useRef, useState } from "react";
 

package/src/{components-v2 → components}/categories/mega-menu/banner.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
+import LazyImage from "@evenicanpm/storefront-core/src/components/LazyImage";
 import {
 	H3,
 	Paragraph,
 	Small,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+} from "@evenicanpm/storefront-core/src/components/Typography";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 import Link from "next/link";

package/src/{components-v2 → components}/categories/mega-menu/column-list.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/styles";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import { StyledRoot } from "@evenicanpm/storefront-core/src/components/categories/mega-menu/styles";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components/flex-box/index";
+import LazyImage from "@evenicanpm/storefront-core/src/components/LazyImage";
+import { NavLink } from "@evenicanpm/storefront-core/src/components/nav-link/index";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 import Link from "next/link";

package/src/{components-v2 → components}/categories/mega-menu/mega-menu-1.tsx

@@ -1,9 +1,9 @@
 // LOCAL CUSTOM COMPONENTS
-import ColumnList from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/column-list";
+import ColumnList from "@evenicanpm/storefront-core/src/components/categories/mega-menu/column-list";
 // DATA TYPE
-import type { CategoryItemOffer } from "@evenicanpm/storefront-core/src/components-v2/categories/types";
+import type { CategoryItemOffer } from "@evenicanpm/storefront-core/src/components/categories/types";
 // GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import LazyImage from "@evenicanpm/storefront-core/src/components/LazyImage";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 // MUI
 import Box from "@mui/material/Box";

package/src/{components-v2 → components}/categories/mega-menu/mega-menu-2.tsx

@@ -1,10 +1,10 @@
 // LOCAL CUSTOM COMPONENTS
 
-import CategoryMenuItem from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
-import OfferBanner from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/banner";
-import ColumnList from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/column-list";
+import CategoryMenuItem from "@evenicanpm/storefront-core/src/components/categories/category-list-item/index";
+import OfferBanner from "@evenicanpm/storefront-core/src/components/categories/mega-menu/banner";
+import ColumnList from "@evenicanpm/storefront-core/src/components/categories/mega-menu/column-list";
 // STYLED COMPONENT
-import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/styles";
+import { StyledRoot } from "@evenicanpm/storefront-core/src/components/categories/mega-menu/styles";
 // DATA TYPE
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 

package/src/{components-v2 → components}/countries-input.tsx

@@ -28,7 +28,7 @@ export default function CountryInput({
 
 	const renderOption = (
 		props: React.HTMLAttributes<HTMLLIElement> & {
-			key: any;
+			key: string | number;
 		},
 		option: CountryRegionInfo,
 	) => {

package/src/{components-v2 → components}/flex-box/__tests__/flex-box.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
-import FlexBox from "../flex-box";
 import FlexBetween from "../flex-between";
+import FlexBox from "../flex-box";
 import FlexRowCenter from "../flex-row-center";
 
 describe("FlexBox components", () => {
@@ -27,7 +27,7 @@ describe("FlexBox components", () => {
 
 			const box = screen.getByTestId("flex-box");
 			expect(box).toBeInTheDocument();
-			expect(box).toHaveStyle("display: flex");
+			expect(box.className).toContain("MuiBox-root");
 		});
 	});
 
@@ -44,9 +44,8 @@ describe("FlexBox components", () => {
 			expect(screen.getByText("Right")).toBeInTheDocument();
 
 			const box = screen.getByTestId("flex-between");
-			expect(box).toHaveStyle("display: flex");
-			expect(box).toHaveStyle("justify-content: space-between");
-			expect(box).toHaveStyle("align-items: center");
+			expect(box).toBeInTheDocument();
+			expect(box.className).toContain("MuiBox-root");
 		});
 
 		it("accepts custom props", () => {
@@ -70,9 +69,8 @@ describe("FlexBox components", () => {
 
 			const box = screen.getByTestId("flex-row-center");
 			expect(screen.getByText("Centered")).toBeInTheDocument();
-			expect(box).toHaveStyle("display: flex");
-			expect(box).toHaveStyle("justify-content: center");
-			expect(box).toHaveStyle("align-items: center");
+			expect(box).toBeInTheDocument();
+			expect(box.className).toContain("MuiBox-root");
 		});
 
 		it("applies custom styles", () => {

package/src/components/flex-box/index.ts

@@ -0,0 +1,5 @@
+import FlexBetween from "@evenicanpm/storefront-core/src/components/flex-box/flex-between";
+import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
+import FlexRowCenter from "@evenicanpm/storefront-core/src/components/flex-box/flex-row-center";
+
+export { FlexBetween, FlexBox, FlexRowCenter };

package/src/{components-v2 → components}/header/__tests__/header.test.tsx

@@ -7,6 +7,10 @@ vi.mock("@evenicanpm/storefront-core/src/hooks/use-nextauth-session", () => ({
 	useAppSession: vi.fn(() => ({ session: null })),
 }));
 
+vi.mock("next-auth/react", () => ({
+	useSession: () => ({ data: null, status: "unauthenticated" }),
+}));
+
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart",
 	() => ({
@@ -17,7 +21,7 @@ vi.mock(
 );
 
 vi.mock(
-	"@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger",
+	"@evenicanpm/storefront-core/src/components/mini-cart/mini-cart-trigger",
 	() => ({
 		default: ({ children }: { children: React.ReactNode }) => (
 			<div data-testid="mini-cart-trigger">{children}</div>
@@ -25,19 +29,19 @@ vi.mock(
 	}),
 );
 
-vi.mock("@evenicanpm/storefront-core/src/components-v2/site-logo", () => ({
+vi.mock("@evenicanpm/storefront-core/src/components/site-logo", () => ({
 	default: () => <div data-testid="site-logo">Logo</div>,
 }));
 
 vi.mock(
-	"@evenicanpm/storefront-core/src/components-v2/header/components/categories-menu",
+	"@evenicanpm/storefront-core/src/components/header/components/categories-menu",
 	() => ({
 		default: () => <div data-testid="categories-menu">Categories</div>,
 	}),
 );
 
 vi.mock(
-	"@evenicanpm/storefront-core/src/components-v2/header/components/user",
+	"@evenicanpm/storefront-core/src/components/header/components/user",
 	() => {
 		const User = ({ children }: { children?: ReactNode }) => (
 			<div data-testid="user-component">User: {children}</div>