@evenicanpm/storefront-core 2.0.0 → 2.1.0

package/src/cms/blocks/components/featured-products.tsx

@@ -1,6 +1,5 @@
 import { Box, Container } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 
 // Local components
 import MediaCard from "@/cms/blocks/components/media-card";
@@ -23,7 +22,7 @@ const FeaturedProducts = (productsData: FeaturedProductsBlock) => {
 								size={3}
 								display="flex"
 								justifyContent="center"
-								key={"product_index_" + i}
+								key={`product_index_${i}`}
 							>
 								<MediaCard
 									name={product?.description ?? ""}

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

@@ -1,7 +1,6 @@
 // MUI
 import { Box, Container } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 import type {
 	FooterBlock,
 	FooterResponse,

package/src/cms/blocks/components/footer/sections/footer-app-store.tsx

@@ -1,6 +1,6 @@
 import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
 import { Box } from "@mui/material";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { MdFacebook as Facebook } from "react-icons/md";
 import { Link } from "react-router-dom";
 

package/src/cms/blocks/components/footer/sections/footer-contact.tsx

@@ -1,6 +1,5 @@
 import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 import type { SocialLink } from "@/cms/blocks/components/footer/interfaces";
 import SocialLinks from "@/cms/blocks/components/footer/sections/footer-social-links";
 import { Heading } from "@/cms/blocks/components/footer/styles/index";

package/src/cms/blocks/components/footer/sections/footer-links.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import type { Link } from "@/cms/blocks/components/footer/interfaces";
 import {
 	Heading,

package/src/cms/blocks/components/footer/sections/footer-logo.tsx

@@ -5,7 +5,6 @@ import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography
 import Grid from "@mui/material/Grid2";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import React from "react";
 
 interface Props {
 	description: string;

package/src/cms/blocks/components/footer/sections/footer-social-links.tsx

@@ -4,7 +4,6 @@
 import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
 import IconButton from "@mui/material/IconButton";
 import styled from "@mui/material/styles/styled";
-import React from "react";
 import {
 	FaGoogle as Google,
 	FaInstagram as Instagram,

package/src/cms/blocks/components/footer.tsx

@@ -3,7 +3,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useTheme } from "@mui/material/styles";
-import React from "react";
 import {
 	MdEmail as Email,
 	MdLocationOn as LocationOn,

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

@@ -5,7 +5,6 @@
 import { Carousel } from "@evenicanpm/storefront-core/src/components/carousel/index";
 import CarouselCard1 from "@evenicanpm/storefront-core/src/components/carousel-cards/carousel-card-1/index";
 import { Box, Container } from "@mui/material";
-import React from "react";
 import type { HeroCarouselBlock, Slide } from "@/cms/blocks/interfaces";
 import { getImageUrl } from "@/cms/endpoints";
 

package/src/cms/blocks/components/hero.tsx

@@ -1,7 +1,6 @@
 import { Box, Button, Container, Typography } from "@mui/material";
 import Image from "next/image";
 import NextLink from "next/link";
-import React from "react";
 import type { HeroSectionBlock } from "@/cms/blocks/interfaces";
 import cmsEndPoints from "@/cms/endpoints";
 

package/src/cms/blocks/components/image.tsx

@@ -1,6 +1,5 @@
 import { Container, Paper } from "@mui/material";
 import NextImage from "next/image";
-import React from "react";
 import type { Media } from "@/cms/blocks/interfaces";
 import { getImageUrl, type sizes } from "@/cms/endpoints";
 

package/src/cms/blocks/components/media-card.tsx

@@ -3,7 +3,6 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
 import Image from "next/image";
-import React from "react";
 
 import cmsEndPoints from "@/cms/endpoints";
 

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

@@ -6,7 +6,6 @@ import ProductCard from "@evenicanpm/storefront-core/src/components/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

@@ -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

@@ -9,7 +9,6 @@ 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

@@ -2,7 +2,6 @@
 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";
-import React from "react";
 
 // ==========================================================
 type Props = { title: string; imgUrl: string };

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

@@ -3,7 +3,7 @@ import BazaarImage from "@evenicanpm/storefront-core/src/components/BazaarImage"
 // GLOBAL CUSTOM COMPONENTS
 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

@@ -3,7 +3,6 @@ import ProductCard from "@evenicanpm/storefront-core/src/components/product-card
 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

@@ -6,7 +6,6 @@ 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

@@ -9,7 +9,6 @@ import {
 // 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,7 +2,6 @@
 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">

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

@@ -1,7 +1,6 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const DottedStar = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

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,7 +1,6 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const GiftBox = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 22 20">

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

@@ -1,7 +1,6 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const Light = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

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

@@ -1,7 +1,6 @@
 "use client";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const NewArrival = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

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

@@ -1,6 +1,5 @@
 "use client";
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import React from "react";
 
 const RankBadge = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

package/src/components/BazaarTextField.tsx

@@ -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/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/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/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/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_/site-logo.test.tsx

@@ -15,11 +15,10 @@ vi.mock("next/link", () => ({
 describe("SiteLogo", () => {
 	it("renders logo image", () => {
 		render(<SiteLogo />);
-		expect(screen.getByAltText("E4 Logo")).toBeInTheDocument();
-		expect(screen.getByAltText("E4 Logo")).toHaveAttribute(
-			"src",
-			"/logo-blue.png",
-		);
+		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", () => {

package/src/components/categories/category-list/category-list.tsx

@@ -9,7 +9,7 @@ import CategoryListItem from "@evenicanpm/storefront-core/src/components/categor
 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/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/nav-link/nav-link.tsx

@@ -46,14 +46,8 @@ export default function NavLink({
 	pathname,
 	...props
 }: Readonly<NavLinkProps>) {
-	let resolvedPathname = pathname;
-	if (resolvedPathname === undefined) {
-		try {
-			resolvedPathname = usePathname() ?? "";
-		} catch {
-			resolvedPathname = "";
-		}
-	}
+	const pathFromHook = usePathname();
+	const resolvedPathname = pathname ?? pathFromHook ?? "";
 
 	return (
 		<StyledLink

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

@@ -26,7 +26,13 @@ type MegaMenuContextType = {
 	checkOverflow: () => void;
 };
 const MegaMenuContext = createContext<MegaMenuContextType | null>(null);
-const useMegaMenu = () => useContext(MegaMenuContext)!;
+const useMegaMenu = () => {
+	const context = useContext(MegaMenuContext);
+	if (!context) {
+		throw new Error("useMegaMenu must be used within MegaMenu");
+	}
+	return context;
+};
 
 const Grid2Size = (length: number) => {
 	if (length === 1) return 12;

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

@@ -1,6 +1,7 @@
 import MobileMenu from "@evenicanpm/storefront-core/src/components/navbar/mobile-menu/mobile-menu";
 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 type { CmsNavItem } from "@/cms/interfaces/navigation";
 
@@ -11,7 +12,7 @@ vi.mock("@evenicanpm/storefront-core/src/providers/nav-provider", () => {
 	return {
 		NavContext: {
 			// We'll replace these in beforeEach per test
-			Provider: ({ value, children }: any) => (
+			Provider: ({ children }: { children: React.ReactNode }) => (
 				<div data-testid="nav-context-provider">{children}</div>
 			),
 		},

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

@@ -1,7 +1,6 @@
 import NavCms from "@evenicanpm/storefront-core/src/components/navbar/nav-list/index";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import { describe, expect, it } from "vitest";
 
 describe("NavCms", () => {

package/src/components/no-records.tsx

@@ -1,7 +1,6 @@
 import { H4 } from "@evenicanpm/storefront-core/src/components/Typography";
 import { Box } from "@mui/material";
 import { useTranslations } from "next-intl";
-import React from "react";
 
 type Props = { message: string };
 

package/src/components/product-cards/favorite-button.tsx

@@ -3,7 +3,6 @@
 import Favorite from "@mui/icons-material/Favorite";
 import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
 import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
-import React from "react";
 
 export interface FavoriteButtonProps extends Omit<IconButtonProps, "onClick"> {
 	isFavorite: boolean;

package/src/components/product-cards/product-card/styles/index.ts

@@ -46,7 +46,7 @@ export const ContentWrapper = styled("div")({
 	},
 });
 
-const StyledBazaarCardType: StyledComponent<typeof BazaarCard, {}, "div"> =
-	StyledBazaarCard as StyledComponent<typeof BazaarCard, {}, "div">;
+const StyledBazaarCardType: StyledComponent<typeof BazaarCard, object, "div"> =
+	StyledBazaarCard as StyledComponent<typeof BazaarCard, object, "div">;
 
 export default StyledBazaarCardType;

package/src/components/product-cards/product-card-plp-list/ProductCardPlpList.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import { data } from "../../../../__mocks__/products";
 import { ProductCardPlpList } from "./index";
 

package/src/components/product-cards/product-card-search/ProductCardSearch.stories.tsx

@@ -1,6 +1,5 @@
 import { Box } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import { data } from "../../../../__mocks__/products";
 import ProductCardSearch from "./index";
 

package/src/components/product-dimensions/Dimensions.stories.tsx

@@ -1,7 +1,6 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import type { Meta } from "@storybook/react";
 import useVariants from "../../hooks/use-variants";
 import { data, product } from "./__mocks__/data";
 import { Dimensions } from "./compound/dimensions";
@@ -13,7 +12,6 @@ const meta = {
 } satisfies Meta<typeof Dimensions>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 export const Interactive = () => {
 	const { handleChangeVariant, selectDimensions } = useVariants(product);
@@ -24,7 +22,7 @@ export const Interactive = () => {
 			handleChangeVariant={handleChangeVariant}
 			showDimensionError={true}
 		>
-			{data.dimensionGroups.map((group, i) => (
+			{data.dimensionGroups.map((group, _i) => (
 				<Dimensions.Group dimensions={group}>
 					<Dimensions.Group.Label />
 					<Dimensions.Group.List />

package/src/components/product-dimensions/compound/dimensions-group-list-chip.tsx

@@ -8,7 +8,7 @@ import {
 	type ProductDimensionValueInventoryAvailability,
 } from "@msdyn365-commerce/retail-proxy";
 import { Chip } from "@mui/material";
-import React, { useContext } from "react";
+import { useContext } from "react";
 
 /**
  * @category Props

package/src/components/product-dimensions/compound/dimensions.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { DimensionGroup } from "@evenicanpm/storefront-core/src/components/product-dimensions/compound/dimensions-group";
 import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
-import React, {
+import {
 	createContext,
 	type PropsWithChildren,
 	type ReactElement,

package/src/components/product-quantity-buttons/ProductQuantity.stories.tsx

@@ -1,7 +1,6 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import type { Meta } from "@storybook/react";
 import { QuantityButtons } from "./compound/quantity-buttons-root";
 
 const meta = {
@@ -11,7 +10,6 @@ const meta = {
 } satisfies Meta<typeof QuantityButtons>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 export const Interactive = () => {
 	return (