@evenicanpm/storefront-core 1.8.4 → 2.0.1

package/src/cms/blocks/components/product-carousel/index.tsx

@@ -1,12 +1,11 @@
 "use client";
 import getProductByIds from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-ids";
-import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
+import { Carousel } from "@evenicanpm/storefront-core/src/components/carousel/index";
 // CMS
-import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/product-card";
-import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+import ProductCard from "@evenicanpm/storefront-core/src/components/product-cards/product-card/product-card";
+import { Section } from "@evenicanpm/storefront-core/src/components/section";
 import type { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
 import { Box } from "@mui/system";
-import React from "react";
 import { Light } from "@/cms/blocks/icons/index";
 import type { Product, ProductCarouselBlock } from "@/cms/blocks/interfaces";
 import { getImageUrl } from "@/cms/endpoints";

package/src/cms/blocks/components/product-section-fullwidth/index.tsx

@@ -1,10 +1,10 @@
 import { getQueryClient } from "@evenicanpm/storefront-core/src/api-manager/services/get-query-client";
 // API
 import getProductByIds from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-ids";
-import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
-import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
-import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import BazaarCard from "@evenicanpm/storefront-core/src/components/BazaarCard";
+import HoverBox from "@evenicanpm/storefront-core/src/components/HoverBox";
+import { Section } from "@evenicanpm/storefront-core/src/components/section";
+import { H4 } from "@evenicanpm/storefront-core/src/components/Typography";
 import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 // Utils
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
@@ -13,7 +13,6 @@ import type { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
 import Grid from "@mui/material/Grid2";
 import Image from "next/image";
 import NextLink from "next/link";
-import React from "react";
 // Icons
 import { getIcon } from "@/cms/blocks/icons/index";
 

package/src/cms/blocks/components/rich-text.tsx

@@ -2,7 +2,6 @@
 
 import { Container } from "@mui/material";
 import Markdown from "marked-react";
-import React from "react";
 
 interface Props {
 	content: string;

package/src/cms/blocks/components/seo/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Helmet } from "react-helmet-async";
 import type { MetaItem, SeoPageData } from "@/cms/blocks/interfaces";
 import cmsEndPoints from "@/cms/endpoints";
@@ -35,7 +34,7 @@ const Seo = (pageData: SeoPageData) => {
 					<meta name="googlebot" content="noindex"></meta>
 				</>
 			)}
-			{pageData?.seo?.meta?.map((metaItem: MetaItem, i: number) => (
+			{pageData?.seo?.meta?.map((metaItem: MetaItem, _i: number) => (
 				<meta
 					name={metaItem.name}
 					key={metaItem.id}

package/src/cms/blocks/components/services/index.tsx

@@ -1,6 +1,5 @@
 import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 // LOCAL CUSTOM COMPONENTS
 import ServiceCard from "@/cms/blocks/components/services/service-card";
 import type {

package/src/cms/blocks/components/services/service-card.tsx

@@ -4,12 +4,11 @@
 import {
 	H4,
 	Span,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+} from "@evenicanpm/storefront-core/src/components/Typography";
 import Card from "@mui/material/Card";
 import Fab from "@mui/material/Fab";
 import Grid from "@mui/material/Grid2";
 import styled from "@mui/material/styles/styled";
-import React from "react";
 // CUSTOM ICON COMPONENTS
 import { getIcon } from "@/cms/blocks/icons/index";
 

package/src/cms/blocks/components/shared/featured-product-card.tsx

@@ -1,8 +1,7 @@
 // GLOBAL CUSTOM COMPONENTS
-import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
-import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
-import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import React from "react";
+import HoverBox from "@evenicanpm/storefront-core/src/components/HoverBox";
+import Image from "@evenicanpm/storefront-core/src/components/Image";
+import { H4 } from "@evenicanpm/storefront-core/src/components/Typography";
 
 // ==========================================================
 type Props = { title: string; imgUrl: string };

package/src/cms/blocks/components/shared/product-category-item.tsx

@@ -1,9 +1,9 @@
-import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import BazaarCard from "@evenicanpm/storefront-core/src/components/BazaarCard";
+import BazaarImage from "@evenicanpm/storefront-core/src/components/BazaarImage";
 // GLOBAL CUSTOM COMPONENTS
-import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { H4 } from "@evenicanpm/storefront-core/src/components/Typography";
 import { type SxProps, styled, type Theme } from "@mui/material/styles";
-import React, { type HtmlHTMLAttributes } from "react";
+import type HtmlHTMLAttributes from "react";
 
 // STYLED COMPONENT
 const StyledBazaarCard = styled(BazaarCard)(({ theme }) => ({

package/src/cms/blocks/components/shared/product-grid.tsx

@@ -1,9 +1,8 @@
-import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
+import ProductCard from "@evenicanpm/storefront-core/src/components/product-cards/product-card/index";
 // GLOBAL CUSTOM COMPONENTS
-import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+import { Section } from "@evenicanpm/storefront-core/src/components/section";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 
 // CUSTOM DATA MODEL
 

package/src/cms/blocks/components/shared/top-categories-card.tsx

@@ -1,12 +1,11 @@
 // GLOBAL CUSTOM COMPONENTS
-import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
-import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
+import HoverBox from "@evenicanpm/storefront-core/src/components/HoverBox";
+import Image from "@evenicanpm/storefront-core/src/components/Image";
 import { lightOrDarkText } from "@evenicanpm/storefront-core/src/lib/hexToLuma";
 import Card from "@mui/material/Card";
 import Chip from "@mui/material/Chip";
 import { useTheme } from "@mui/material/styles";
 import styled from "@mui/material/styles/styled";
-import React from "react";
 
 // STYLED COMPONENT
 const StyledChip = styled(Chip)({

package/src/cms/blocks/components/shared/top-rating-product-card.tsx

@@ -1,15 +1,14 @@
-import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components/flex-box/index";
 // GLOBAL CUSTOM COMPONENTS
-import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
-import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
+import HoverBox from "@evenicanpm/storefront-core/src/components/HoverBox";
+import Image from "@evenicanpm/storefront-core/src/components/Image";
 import {
 	H4,
 	Small,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+} from "@evenicanpm/storefront-core/src/components/Typography";
 // CUSTOM UTILS LIBRARY FUNCTION
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
 import Rating from "@mui/material/Rating";
-import React from "react";
 
 // ======================================================
 interface Props {

package/src/cms/blocks/icons/components/category.tsx

@@ -2,10 +2,10 @@
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 import type { SvgIconTypeMap } from "@mui/material/SvgIcon";
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const Category: OverridableComponent<SvgIconTypeMap> = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 64 64">
+		<title>Category</title>
 		<path d="m29 11v14a4 4 0 0 1 -4 4h-14a4 4 0 0 1 -4-4v-14a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4zm24-4h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm-28 28h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm21 0a11 11 0 1 0 11 11 11 11 0 0 0 -11-11z" />
 	</svg>,
 	"Category",

package/src/cms/blocks/icons/components/dotted-star.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const DottedStar = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">
+		<title>Dotted Star</title>
 		<path
 			d="M12.431 11.7264L11.9772 10.5867L11.5233 11.7264C11.4231 11.9784 11.1869 12.15 10.9157 12.1679L9.69147 12.2469L10.6349 13.031C10.8436 13.2047 10.9342 13.4828 10.8669 13.7457L10.5641 14.9342L11.6016 14.2785C11.8309 14.1344 12.1234 14.1344 12.3527 14.2785L13.3895 14.9336L13.0867 13.7457C13.0194 13.4828 13.11 13.2047 13.3188 13.031L14.2621 12.2469L13.0386 12.1679C12.7675 12.15 12.5313 11.9784 12.431 11.7264Z"
 			fill="#FF9101"

package/src/cms/blocks/icons/components/fallback-icon.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const FallbackIcon = createSvgIcon(
 	<svg

package/src/cms/blocks/icons/components/gift-box.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const GiftBox = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 22 20">
+		<title>Gift Box</title>
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"

package/src/cms/blocks/icons/components/light.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const Light = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">
+		<title>Light</title>
 		<path d="M19.0765 9.48063H12.1242L15.5905 0L5 14.5194H11.9522L8.48592 24L19.0765 9.48063Z" />
 	</svg>,
 	"Light",

package/src/cms/blocks/icons/components/new-arrival.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const NewArrival = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">
+		<title>New Arrival</title>
 		<g>
 			<path
 				d="M22.9347 12.001L24 10.1003L22.3995 8.62199L22.8254 6.48519L20.8463 5.57376L20.5911 3.40991L18.4273 3.15468L17.5158 1.17562L15.379 1.60157L13.9006 0.000976562L12 1.0663L10.0994 0.000976562L8.62106 1.60152L6.48427 1.17557L5.57283 3.15463L3.40898 3.40987L3.15375 5.57371L1.17469 6.48515L1.60064 8.62194L0 10.1003L1.06533 12.0009L0 13.9016L1.60055 15.3799L1.17459 17.5167L3.15366 18.4281L3.40889 20.592L5.57273 20.8472L6.48417 22.8263L8.62097 22.4003L10.0993 24.0009L11.9999 22.9356L13.9005 24.0009L15.3788 22.4003L17.5156 22.8263L18.4271 20.8472L20.5909 20.592L20.8462 18.4281L22.8252 17.5167L22.3993 15.3799L23.9998 13.9016L22.9347 12.001ZM8.62936 14.0641H7.61878L5.78016 11.7887V14.0641H4.50881V9.43504H5.49984L7.35802 11.7887V9.43504H8.62936V14.0641ZM12.7238 14.0641H9.42483V9.43504H12.6652V10.5434H10.6962V11.1954H12.3783V12.2255H10.6962V12.9557H12.7239V14.0641H12.7238ZM18.0765 14.0641H17.0203L16.3618 12.408L15.7098 14.0641H14.6536L12.8411 9.43504H14.2168L15.2209 12.6102L15.5403 11.6453L14.7905 9.43504H15.9576L16.3618 10.8629L16.7726 9.43504H17.9397L17.1768 11.6453L17.5094 12.6102L18.507 9.43504H19.8891L18.0765 14.0641Z"

package/src/cms/blocks/icons/components/rank-badge.tsx

@@ -1,9 +1,9 @@
 "use client";
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const RankBadge = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">
+		<title>Rank Badge</title>
 		<path
 			d="M1.99309 16.5377L1.49359 17.0365L5.70897 18.0092C5.77746 18.025 5.84014 18.0597 5.88987 18.1093C5.93959 18.159 5.97437 18.2216 5.99022 18.2901L6.96297 22.5062L7.46247 22.0063L6.43722 17.5622L1.99309 16.5377Z"
 			fill="#FAB400"

package/src/cms/blocks/icons/index.ts

@@ -11,12 +11,7 @@ import Light from "@/cms/blocks/icons/components/light";
 import NewArrival from "@/cms/blocks/icons/components/new-arrival";
 import RankBadge from "@/cms/blocks/icons/components/rank-badge";
 
-export { Category };
-export { DottedStar };
-export { GiftBox };
-export { Light };
-export { NewArrival };
-export { RankBadge };
+export { Category, DottedStar, GiftBox, Light, NewArrival, RankBadge };
 
 const iconMapping: Record<string, IconComponent> = {
 	DottedStar, // Add more icons here as needed

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

@@ -1,5 +1,5 @@
 // CUSTOM COMPONENT
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { H6 } from "@evenicanpm/storefront-core/src/components/Typography";
 import Box, { type BoxProps } from "@mui/material/Box";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 
@@ -12,20 +12,20 @@ export default function BazaarTextField({
 	InputProps,
 	...props
 }: Props) {
-	const boxProps: BoxProps = {};
-	const textFieldProps: TextFieldProps = {};
+	const boxProps: Record<string, unknown> = {};
+	const textFieldProps: Record<string, unknown> = {};
 
 	// Splits props into Box and TextField props. Bracket notation allows dynamic names like "mt" or "mb".
-	for (const key in props) {
+	for (const [key, value] of Object.entries(props)) {
 		if (SPACE_PROPS_LIST.has(key)) {
-			(boxProps as any)[key] = (props as any)[key];
+			boxProps[key] = value;
 		} else {
-			(textFieldProps as any)[key] = (props as any)[key];
+			textFieldProps[key] = value;
 		}
 	}
 
 	return (
-		<Box {...boxProps}>
+		<Box {...(boxProps as BoxProps)}>
 			{/* INPUT LEVEL TEXT */}
 			{label ? (
 				<H6 mb={1} fontSize={13} color="grey.700">
@@ -39,7 +39,7 @@ export default function BazaarTextField({
 					...InputProps,
 					style: { ...InputProps?.style, height: 44 },
 				}}
-				{...textFieldProps}
+				{...(textFieldProps as TextFieldProps)}
 			/>
 		</Box>
 	);

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

@@ -1,3 +1,4 @@
+import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { countries } from "../../__mocks__/countries";
@@ -12,8 +13,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof CountryInput>;
 
-const Template = (args: any) => {
-	const [selectedCountry, setSelectedCountry] = useState(null);
+const Template = (args: React.ComponentProps<typeof CountryInput>) => {
+	const [selectedCountry, setSelectedCountry] =
+		useState<CountryRegionInfo | null>(null);
 	console.log(selectedCountry);
 
 	return (

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

@@ -2,7 +2,7 @@
 import {
 	H5,
 	Small,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+} from "@evenicanpm/storefront-core/src/components/Typography";
 // MUI
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import LazyImage from "@evenicanpm/storefront-core/src/components/LazyImage";
 import type { ImageProps } from "next/image";
 import type React from "react";
 import { useEffect, useState } from "react";

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

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import T from "../index";
 
 vi.mock("next-intl", () => ({
@@ -19,7 +19,7 @@ vi.mock("next-intl", () => ({
 describe("T (Translation Component)", () => {
 	it("renders translation for given path", () => {
 		render(<T path="HomePage.welcome" />);
-		expect(screen.getByText("Welcome to our store")).toBeInTheDocument();
+		expect(screen.getByText("Welcome to our store")).toBeTruthy();
 	});
 
 	it("renders multiple translations", () => {
@@ -36,17 +36,17 @@ describe("T (Translation Component)", () => {
 
 	it("renders fallback path when translation not found", () => {
 		render(<T path="Unknown.path" />);
-		expect(screen.getByText("Unknown.path")).toBeInTheDocument();
+		expect(screen.getByText("Unknown.path")).toBeTruthy();
 	});
 
 	it("handles nested translation paths", () => {
 		render(<T path="Navigation.home" />);
-		expect(screen.getByText("Home")).toBeInTheDocument();
+		expect(screen.getByText("Home")).toBeTruthy();
 	});
 
 	it("renders common translations", () => {
 		render(<T path="Common.loading" />);
-		expect(screen.getByText("Loading...")).toBeInTheDocument();
+		expect(screen.getByText("Loading...")).toBeTruthy();
 	});
 
 	it("renders multiple different paths together", () => {
@@ -63,17 +63,13 @@ describe("T (Translation Component)", () => {
 
 	it("renders translation with special characters", () => {
 		render(<T path="Common.error" />);
-		expect(screen.getByText("An error occurred")).toBeInTheDocument();
+		expect(screen.getByText("An error occurred")).toBeTruthy();
 	});
 
 	it("accepts dynamic paths", () => {
 		const paths = ["HomePage.welcome", "Navigation.home", "Common.loading"];
 		const { container } = render(
-			<>
-				{paths.map((path) => (
-					<T key={path} path={path} />
-				))}
-			</>,
+			paths.map((path) => <T key={path} path={path} />),
 		);
 		const text = container.textContent || "";
 		expect(text).toContain("Welcome to our store");
@@ -83,9 +79,9 @@ describe("T (Translation Component)", () => {
 
 	it("re-renders when path changes", () => {
 		const { rerender } = render(<T path="HomePage.welcome" />);
-		expect(screen.getByText("Welcome to our store")).toBeInTheDocument();
+		expect(screen.getByText("Welcome to our store")).toBeTruthy();
 
 		rerender(<T path="Navigation.home" />);
-		expect(screen.getByText("Home")).toBeInTheDocument();
+		expect(screen.getByText("Home")).toBeTruthy();
 	});
 });

package/src/{components-v2 → components}/T/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import React from "react";
 
 interface Props {
 	path: string;

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

@@ -3,7 +3,6 @@
 import Box, { type BoxProps } from "@mui/material/Box";
 import styled from "@mui/material/styles/styled";
 import clsx from "clsx";
-import React from "react";
 
 // ==============================================================
 type Ellipsis = { ellipsis: number };

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

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import BazaarCard from "../BazaarCard";
+
+describe("BazaarCard", () => {
+	it("renders children", () => {
+		render(<BazaarCard>Card Content</BazaarCard>);
+		expect(screen.getByText("Card Content")).toBeInTheDocument();
+	});
+
+	it("accepts hoverEffect prop", () => {
+		const { container } = render(
+			<BazaarCard hoverEffect>Hover Card</BazaarCard>,
+		);
+		expect(container.firstChild).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import BazaarImage from "../BazaarImage";
+
+describe("BazaarImage", () => {
+	it("renders image with src and alt", () => {
+		render(
+			<BazaarImage
+				src="/test.png"
+				alt="Test Image"
+				data-testid="bazaar-image"
+			/>,
+		);
+		const image = screen.getByTestId("bazaar-image");
+		expect(image).toBeInTheDocument();
+		expect(image).toHaveAttribute("src", "/test.png");
+		expect(image).toHaveAttribute("alt", "Test Image");
+	});
+});

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

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import BazaarMenu from "../BazaarMenu";
+
+vi.mock("@mui/material/Menu", () => ({
+	default: ({
+		children,
+		open,
+	}: {
+		children: React.ReactNode;
+		open: boolean;
+	}) => (open ? <div data-testid="bazaar-menu">{children}</div> : null),
+}));
+
+describe("BazaarMenu", () => {
+	it("renders menu options when open is true", () => {
+		render(
+			<BazaarMenu
+				open
+				direction="right"
+				handler={() => <button type="button">Trigger</button>}
+				options={() => <div>Menu Option</div>}
+			/>,
+		);
+
+		expect(screen.getByTestId("bazaar-menu")).toBeInTheDocument();
+		expect(screen.getByText("Menu Option")).toBeInTheDocument();
+	});
+
+	it("opens menu using handler click", () => {
+		render(
+			<BazaarMenu
+				handler={(onClick) => (
+					<button type="button" onClick={onClick}>
+						Open
+					</button>
+				)}
+				options={() => <div>Dynamic Option</div>}
+			/>,
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: "Open" }));
+		expect(screen.getByTestId("bazaar-menu")).toBeInTheDocument();
+		expect(screen.getByText("Dynamic Option")).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,17 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import BazaarSwitch from "../BazaarSwitch";
+
+describe("BazaarSwitch", () => {
+	it("renders switch", () => {
+		render(<BazaarSwitch />);
+		expect(screen.getByRole("checkbox")).toBeInTheDocument();
+	});
+
+	it("calls onChange when toggled", () => {
+		const handleChange = vi.fn();
+		render(<BazaarSwitch onChange={handleChange} />);
+		fireEvent.click(screen.getByRole("checkbox"));
+		expect(handleChange).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import BazaarTextField from "../BazaarTextField";
+
+describe("BazaarTextField", () => {
+	it("renders label and input", () => {
+		render(
+			<BazaarTextField
+				label="Email"
+				placeholder="Enter email"
+				data-testid="bazaar-text-field"
+			/>,
+		);
+
+		expect(screen.getByText("Email")).toBeInTheDocument();
+		expect(screen.getByPlaceholderText("Enter email")).toBeInTheDocument();
+	});
+
+	it("renders without label", () => {
+		render(<BazaarTextField placeholder="No Label" />);
+		expect(screen.getByPlaceholderText("No Label")).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,14 @@
+import { render, screen } from "@testing-library/react";
+import { BorderShadowCard, lightBorder, lightShadow } from "../BoxShadowCard";
+
+describe("BoxShadowCard", () => {
+	it("renders BorderShadowCard children", () => {
+		render(<BorderShadowCard>Border Card</BorderShadowCard>);
+		expect(screen.getByText("Border Card")).toBeInTheDocument();
+	});
+
+	it("exports light style objects", () => {
+		expect(lightShadow).toEqual({ boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)" });
+		expect(lightBorder).toEqual({ border: "1px solid rgba(0, 0, 0, 0.1)" });
+	});
+});

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

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import type { Accept, FileRejection } from "react-dropzone";
+import { vi } from "vitest";
+import DropZone from "../DropZone";
+
+vi.mock("next-intl", () => ({
+	useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("react-dropzone", () => ({
+	useDropzone: () => ({
+		getRootProps: () => ({ "data-testid": "dropzone-root" }),
+		getInputProps: () => ({ "data-testid": "dropzone-input" }),
+		isDragActive: false,
+	}),
+}));
+
+describe("DropZone", () => {
+	beforeEach(() => {
+		vi.stubGlobal("accept", { "image/*": [] });
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it("renders title and input", () => {
+		render(
+			<DropZone
+				onChange={vi.fn()}
+				handleReject={vi.fn()}
+				accept={{ "image/*": [] } as Accept}
+			/>,
+		);
+
+		expect(screen.getByText("Drag & drop files here")).toBeInTheDocument();
+		expect(screen.getByTestId("file-upload-input")).toBeInTheDocument();
+	});
+
+	it("renders translated button text key", () => {
+		render(
+			<DropZone
+				onChange={vi.fn()}
+				handleReject={(files: FileRejection[]) => files}
+				accept={{ "image/*": [] } as Accept}
+			/>,
+		);
+
+		expect(screen.getByText("selectFilesBtn")).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import HoverBox from "../HoverBox";
+
+describe("HoverBox", () => {
+	it("renders children", () => {
+		render(<HoverBox>Hover Content</HoverBox>);
+		expect(screen.getByText("Hover Content")).toBeInTheDocument();
+	});
+});