@evenicanpm/storefront-core 1.2.1 → 1.3.0

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

@@ -1,25 +1,25 @@
-import { createContext, useContext, ReactNode, useState } from "react";
-import Link from "next/link";
-import Card from "@mui/material/Card";
-import Rating from "@mui/material/Rating";
-import styled from "@mui/material/styles/styled";
-import IconButton from "@mui/material/IconButton";
-import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
-// GLOBAL CUSTOM COMPONENTS
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 // LOCAL CUSTOM COMPONENTS
 import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-cards/discount-chip";
-import ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
 import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
 import ProductTags from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/components/tags";
-// LIBRARY AND HOOKS
-import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
+// GLOBAL CUSTOM COMPONENTS
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
 import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
+// LIBRARY AND HOOKS
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import Card from "@mui/material/Card";
+import IconButton from "@mui/material/IconButton";
+import Rating from "@mui/material/Rating";
+import styled from "@mui/material/styles/styled";
+import Link from "next/link";
+import { createContext, type ReactNode, useContext, useState } from "react";
 
 // STYLED COMPONENT
 const Wrapper = styled(Card)({

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

@@ -1,8 +1,8 @@
+import { Box } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import ProductCardSearch from "./index";
 import { data } from "../../../../__mocks__/products";
-import { Box } from "@mui/material";
+import ProductCardSearch from "./index";
 
 const meta = {
 	title: "Product/ProductCards/ProductCardSearch",

package/src/components-v2/product-cards/product-card-search/product-card.tsx

@@ -1,32 +1,32 @@
 "use client";
 
-import { createContext, useContext, ReactNode, useState } from "react";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Rating from "@mui/material/Rating";
-// MUI ICON COMPONENTS
-import { RemoveRedEye } from "@mui/icons-material";
+import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 // GLOBAL CUSTOM COMPONENTS
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
+// STYLED COMPONENTS
+import {
+	Card,
+	CardMedia,
+	QuickViewSmallButton,
+} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search/styles/index";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 import {
 	H4,
 	Paragraph,
 	Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
-import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
+import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
 // LIBRARY AND HOOKS
 import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
-import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
-// STYLED COMPONENTS
-import {
-	Card,
-	CardMedia,
-	QuickViewSmallButton,
-} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search/styles/index";
+// MUI ICON COMPONENTS
+import { RemoveRedEye } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+import Link from "next/link";
+import { createContext, type ReactNode, useContext, useState } from "react";
 
 type Product = {
 	slug: string;

package/src/components-v2/product-cards/product-price.tsx

@@ -1,4 +1,3 @@
-import Box from "@mui/material/Box";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
@@ -7,6 +6,7 @@ import {
 	calculateDiscount,
 	currency,
 } from "@evenicanpm/storefront-core/src/lib/lib";
+import Box from "@mui/material/Box";
 
 // ==============================================================
 type Props = { price: number; discount: number };

package/src/components-v2/product-cards/product-rating.tsx

@@ -1,8 +1,8 @@
-import Rating from "@mui/material/Rating";
-import { BoxProps } from "@mui/material/Box";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 // GLOBAL CUSTOM COMPONENTS
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import type { BoxProps } from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
 
 // ==============================================================
 interface Props extends BoxProps {

package/src/components-v2/product-cards/product-title.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Link from "next/link";
 
 // ==============================================================
 type Props = { title: string; slug: string };

package/src/components-v2/product-cards/quantity-buttons.tsx

@@ -1,12 +1,12 @@
-import { Fragment } from "react";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
 import { CircularProgress } from "@mui/material";
+import Button from "@mui/material/Button";
+import { Fragment } from "react";
 
 // ==============================================================
 interface Props {

package/src/components-v2/product-dialog/ProductDialog.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ProductDialog from "./index";
 import { Button } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useArgs } from "storybook/internal/preview-api";
 import { data } from "../../../__mocks__/products";
+import ProductDialog from "./index";
 
 const meta = {
 	title: "Product/ProductDialog",

package/src/components-v2/product-dialog/compound/product-dialog.tsx

@@ -2,27 +2,27 @@
  * @module ProductViewDialog
  */
 "use client";
-import Grid from "@mui/material/Grid2";
-import Rating from "@mui/material/Rating";
-import Dialog from "@mui/material/Dialog";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import DialogContent from "@mui/material/DialogContent";
-import Close from "@mui/icons-material/Close";
-import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel";
+import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
 import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import QuantityVariantsSelect from "@evenicanpm/storefront-core/src/components-v2/product-quantity-variants";
 import {
-	H2,
-	Paragraph,
 	H1,
+	H2,
 	H6,
+	Paragraph,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
-import QuantityVariantsSelect from "@evenicanpm/storefront-core/src/components-v2/product-quantity-variants";
-import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
-import { createContext, ReactElement, useContext } from "react";
-import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import Close from "@mui/icons-material/Close";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import Divider from "@mui/material/Divider";
+import Grid from "@mui/material/Grid2";
+import IconButton from "@mui/material/IconButton";
+import Rating from "@mui/material/Rating";
+import { createContext, type ReactElement, useContext } from "react";
 
 /**
  * @category Props

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

@@ -1,9 +1,10 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import useVariants from "../../hooks/use-variants";
 import { data, product } from "./__mocks__/data";
 import { Dimensions } from "./compound/dimensions";
-import useVariants from "../../hooks/use-variants";
 
 const meta = {
 	title: "Product/Dimensions",

package/src/components-v2/product-dimensions/compound/dimensions-group-error.tsx

@@ -3,12 +3,12 @@
  */
 "use client";
 import { DimensionsContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
+import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
+import { hasSelectedDimension } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/utils/has-selected-dimension";
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { useTranslations } from "next-intl";
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
-import { hasSelectedDimension } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/utils/has-selected-dimension";
+import { useTranslations } from "next-intl";
 import { useContext } from "react";
-import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 
 /**
  * An error that corresponds with a specific dimension group.

package/src/components-v2/product-dimensions/compound/dimensions-group-label.tsx

@@ -2,10 +2,10 @@
  * @module ProductDimensions
  */
 "use client";
+import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
 import { useContext } from "react";
-import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 
 /**
  * @category Sub-Component

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

@@ -1,13 +1,14 @@
 /**
  * @module ProductDimensions
  */
-import React, { useContext } from "react";
-import { Chip } from "@mui/material";
+
+import { DimensionsContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
 import {
-	ProductDimensionValueInventoryAvailability,
 	ProductDimensionType,
+	type ProductDimensionValueInventoryAvailability,
 } from "@msdyn365-commerce/retail-proxy";
-import { DimensionsContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
+import { Chip } from "@mui/material";
+import React, { useContext } from "react";
 
 /**
  * @category Props

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

@@ -2,9 +2,9 @@
  * @module ProductDimensions
  */
 "use client";
+import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 import { DimensionGroupListChip } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-list-chip";
 import { useContext } from "react";
-import { DimensionsGroupContext } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group";
 
 /**
  * @category Sub-Component

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

@@ -2,13 +2,12 @@
  * @module ProductDimensions
  */
 "use client";
-import Box from "@mui/material/Box";
-import { createContext } from "react";
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
-import { PropsWithChildren } from "react";
 import { DimensionGroupError } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-error";
 import { DimensionGroupLabel } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-label";
 import { DimensionGroupList } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions-group-list";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import Box from "@mui/material/Box";
+import { createContext, type PropsWithChildren } from "react";
 
 /**
  * @category Props

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

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

package/src/components-v2/product-dimensions/index.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
 import { Dimensions } from "@evenicanpm/storefront-core/src/components-v2/product-dimensions/compound/dimensions";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
 
 // TODO: When selecting a single dimension, loading spinner starts... not necessary, inefficient.
 

package/src/components-v2/product-dimensions/utils/has-selected-dimension.ts

@@ -1,4 +1,4 @@
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
+import type { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
 
 /**
  * Checks if dimension exists

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

@@ -1,6 +1,7 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 import { QuantityButtons } from "./compound/quantity-buttons-root";
 
 const meta = {

package/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root.tsx

@@ -1,16 +1,16 @@
 /**
  * @module ProductQuantityButtons
  */
-import React, { createContext, useContext, ReactNode } from "react";
+
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import Button from "@mui/material/Button";
-import { CartLine } from "@msdyn365-commerce/retail-proxy";
-import { useTranslations } from "next-intl";
-import { MdAdd as Add } from "react-icons/md";
-import { MdRemove as Remove } from "react-icons/md";
 import { H3 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import CircularProgress from "@mui/material/CircularProgress";
 import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
+import type { CartLine } from "@msdyn365-commerce/retail-proxy";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import { useTranslations } from "next-intl";
+import React, { createContext, type ReactNode, useContext } from "react";
+import { MdAdd as Add, MdRemove as Remove } from "react-icons/md";
 // TODO: Encapsulate the addToCart api calls inside this component
 // so no need to pass in props.
 

package/src/components-v2/product-quantity-buttons/index.tsx

@@ -2,9 +2,12 @@
  * @component
  * @category Implementation component
  */
+
+import {
+	type QuantityButtonProps,
+	QuantityButtons,
+} from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root";
 import React from "react";
-import { QuantityButtons } from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root";
-import { QuantityButtonProps } from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/compound/quantity-buttons-root";
 
 /**
  * Pre-composed version of quantity buttons.

package/src/components-v2/product-quantity-variants/ProductQuantity.stories.tsx

@@ -1,8 +1,9 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
-import QuantityButtons from "./index";
+import React from "react";
 import { product } from "../../../__mocks__/product-dimensions";
+import QuantityButtons from "./index";
 
 const meta = {
 	title: "Product/DimensionsQuantitySelector",

package/src/components-v2/product-quantity-variants/index.tsx

@@ -1,21 +1,19 @@
 "use client";
-import { useState } from "react";
-import Box from "@mui/material/Box";
-
-// GLOBAL CUSTOM COMPONENTS
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
 // API MANAGER
-import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import getProductAvailability from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-availability";
-
-// LOCAL HOOKS
-import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
+// LOCAL COMPONENTS
+import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+// GLOBAL CUSTOM COMPONENTS
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
 import useCart, {
-	AddToCartBopisInput,
+	type AddToCartBopisInput,
 } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 
-// LOCAL COMPONENTS
-import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+// LOCAL HOOKS
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import Box from "@mui/material/Box";
+import { useState } from "react";
 
 interface Props {
 	product: ProductDetails;
@@ -41,7 +39,9 @@ export default function QuantityVariantsSelect({ product }: Props) {
 		allDimensionsSelected,
 	} = useVariants(product);
 
-	const { handleAddToCart } = useCart(selectedVariant?.RecordId);
+	const productId = selectedVariant?.RecordId ?? RecordId;
+
+	const { handleAddToCart } = useCart(productId);
 
 	const searchCriteria = {
 		searchCriteria: {

package/src/components-v2/products-view/ProductsGrid.stories.tsx

@@ -1,8 +1,9 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
-import { ProductsGrid } from "./index";
+import React from "react";
 import { data, prices } from "../../../__mocks__/products";
+import { ProductsGrid } from "./index";
 
 const meta = {
 	title: "Product/ListGrid",

package/src/components-v2/products-view/ProductsList.stories.tsx

@@ -1,10 +1,11 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
-import { ProductsList } from "./index";
-import { data, prices } from "../../../__mocks__/products";
+import React from "react";
 //import { useSession } from "next-auth/react";
 import { expect, mocked } from "storybook/test";
+import { data, prices } from "../../../__mocks__/products";
+import { ProductsList } from "./index";
 
 const meta = {
 	title: "Product/ListList",

package/src/components-v2/products-view/compound/context.ts

@@ -1,10 +1,11 @@
 /**
  * @module ProductsView
  */
-import { createContext, useContext } from "react";
+
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { createContext, useContext } from "react";
 
 /**
  * Shared context value for the products list passed into root component.

package/src/components-v2/products-view/compound/products-grid-view.tsx

@@ -1,21 +1,22 @@
 /**
  * @module ProductsView
  */
-import React from "react";
-import Grid from "@mui/material/Grid2";
+
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
-// DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import {
 	ProductsViewCardContext,
 	ProductsViewContext,
 	useProductsView,
 } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
-import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+import type { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+// DATA MODEL
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import Grid from "@mui/material/Grid2";
+import type React from "react";
 import { cloneElement } from "react";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 
 /**
  * Root component of products grid view.

package/src/components-v2/products-view/compound/products-list-view.tsx

@@ -1,18 +1,19 @@
 /**
  * @module ProductsView
  */
-import { cloneElement } from "react";
+
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
 import { ProductCardPlpList } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/index";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
-// DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import {
 	ProductsViewContext,
 	useProductsView,
 } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
-import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+import type { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+// DATA MODEL
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { cloneElement } from "react";
 
 /**
  * Root component of the ProductsListView.

package/src/components-v2/products-view/compound/types.ts

@@ -1,5 +1,5 @@
-import { ProductsViewContext } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
-import { PropsWithChildren, ReactNode } from "react";
+import type { ProductsViewContext } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
+import type { PropsWithChildren, ReactNode } from "react";
 
 /**
  * This prop type is used for both the ProductsViewGrid and the ProductsViewList.

package/src/components-v2/products-view/index.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from "react";
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import ProductsGridView from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/products-grid-view";
 import ProductsListView from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/products-list-view";
 // DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import React, { type ReactNode } from "react";
 
 export interface Props {
 	/** List of products to display */

package/src/components-v2/progress/ProgressBar.stories.tsx

@@ -1,7 +1,7 @@
+import { Box, Button, Link as MUILink, Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
-import ProgressBar from "./index";
 import NProgress from "nprogress";
-import { Button, Box, Typography, Link as MUILink } from "@mui/material";
+import ProgressBar from "./index";
 
 const meta: Meta<typeof ProgressBar> = {
 	title: "Utility/ProgressBar",

package/src/components-v2/progress/progress.tsx

@@ -1,10 +1,10 @@
 // https://github.com/apal21/nextjs-progressbar/issues/86
 
 "use client";
-import { useEffect } from "react";
-import NProgress from "nprogress";
-import useTheme from "@mui/material/styles/useTheme";
 import GlobalStyles from "@mui/material/GlobalStyles";
+import useTheme from "@mui/material/styles/useTheme";
+import NProgress from "nprogress";
+import { useEffect } from "react";
 
 import "nprogress/nprogress.css";
 

package/src/components-v2/scrollbar/Scrollbar.stories.tsx

@@ -1,6 +1,7 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 import Scrollbar from "./index";
 
 const meta = {

package/src/components-v2/scrollbar/scrollbar.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { SxProps, Theme } from "@mui/material/styles";
-import { Props } from "simplebar-react";
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { ReactNode } from "react";
+import type { Props } from "simplebar-react";
 import "simplebar-react/dist/simplebar.min.css";
 // STYLED COMPONENT
 import { StyledScrollBar } from "@evenicanpm/storefront-core/src/components-v2/scrollbar/styles";