@evenicanpm/storefront-core 1.2.2 → 1.4.0

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

@@ -1,46 +1,49 @@
 // Template: Market1
 // This component works best with cutout product images
-import React from "react";
-import { Box, Container } from "@mui/material";
 
 // GLOBAL CUSTOM COMPONENTS
 import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
 import CarouselCard1 from "@evenicanpm/storefront-core/src/components-v2/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";
-import { HeroCarouselBlock, Slide } from "@/cms/blocks/interfaces";
 
-export default function HeroCarousel(data: HeroCarouselBlock) {
+export default function HeroCarousel(data: Readonly<HeroCarouselBlock>) {
 	return (
 		<Box sx={{ backgroundColor: "white" }}>
 			<Container className="pt-2 pb-2">
 				<Carousel slidesToShow={1} autoplay={true} arrows={false} dots={true}>
-					{data.Slides.map((data: Slide, ind: number) => (
-						<CarouselCard1 key={ind}>
-							<CarouselCard1.Info>
-								<CarouselCard1.Title title={data?.heading} />
-								<CarouselCard1.Description description={data?.description} />
-								<CarouselCard1.Button
-									buttonLink={
-										data?.linkToPage?.slug
-											? `/pages/${data?.linkToPage?.slug}`
-											: data?.linkToProduct?.sku
-												? `/product/${data?.linkToProduct?.sku}`
-												: ""
+					{data.Slides.map((data: Slide, ind: number) => {
+						const productLink = data?.linkToProduct?.sku
+							? `/product/${data.linkToProduct.sku}`
+							: "";
+
+						const buttonLink = data?.linkToPage?.slug
+							? `/pages/${data.linkToPage.slug}`
+							: productLink;
+
+						return (
+							<CarouselCard1 key={data.id + ind}>
+								<CarouselCard1.Info>
+									<CarouselCard1.Title title={data?.heading} />
+									<CarouselCard1.Description description={data?.description} />
+									<CarouselCard1.Button
+										buttonLink={buttonLink}
+										buttonText={data?.buttonText}
+									/>
+								</CarouselCard1.Info>
+
+								<CarouselCard1.Image
+									imgUrl={
+										data?.image?.formats
+											? getImageUrl(data?.image?.formats)
+											: data?.image?.url
 									}
-									buttonText={data?.buttonText}
 								/>
-							</CarouselCard1.Info>
-
-							<CarouselCard1.Image
-								imgUrl={
-									data?.image?.formats
-										? getImageUrl(data?.image?.formats)
-										: data?.image?.url
-								}
-							/>
-						</CarouselCard1>
-					))}
+							</CarouselCard1>
+						);
+					})}
 				</Carousel>
 			</Container>
 		</Box>

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

@@ -1,10 +1,9 @@
-import React from "react";
-import NextLink from "next/link";
+import { Box, Button, Container, Typography } from "@mui/material";
 import Image from "next/image";
-import { Box, Container, Button, Typography } from "@mui/material";
-
+import NextLink from "next/link";
+import React from "react";
+import type { HeroSectionBlock } from "@/cms/blocks/interfaces";
 import cmsEndPoints from "@/cms/endpoints";
-import { HeroSectionBlock } from "@/cms/blocks/interfaces";
 
 const sxBanner = {
 	position: "relative",

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

@@ -1,9 +1,8 @@
-import React from "react";
-import NextImage from "next/image";
-import { getImageUrl } from "@/cms/endpoints";
-import { sizes } from "@/cms/endpoints";
 import { Container, Paper } from "@mui/material";
-import { Media } from "@/cms/blocks/interfaces";
+import NextImage from "next/image";
+import React from "react";
+import type { Media } from "@/cms/blocks/interfaces";
+import { getImageUrl, type sizes } from "@/cms/endpoints";
 
 interface Props {
 	media: Media;

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

@@ -1,9 +1,9 @@
-import React from "react";
+import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Image from "next/image";
+import React from "react";
 
 import cmsEndPoints from "@/cms/endpoints";
 
@@ -12,7 +12,7 @@ interface Props {
 	imgUrl: string;
 }
 
-export default function MediaCard({ name, imgUrl }: Props) {
+export default function MediaCard({ name, imgUrl }: Readonly<Props>) {
 	return (
 		<Card sx={{ width: "100%" }}>
 			<Box

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

@@ -1,20 +1,19 @@
 "use client";
-import React from "react";
-import { Light } from "@/cms/blocks/icons/index";
-import { Box } from "@mui/system";
+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 { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
-
 // 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 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";
-import getProductByIds from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-ids";
-import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
-import { Product, ProductCarouselBlock } from "@/cms/blocks/interfaces";
 
 type CombinedProduct = Product & SimpleProduct;
 
-export default function ProductCarousel(data: ProductCarouselBlock) {
+export default function ProductCarousel(data: Readonly<ProductCarouselBlock>) {
 	const { data: e4Products = [], error } = getProductByIds.useData({
 		id: data?.products?.map((product: Product) => product.sku),
 	});

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

@@ -1,36 +1,32 @@
-import React from "react";
-import NextLink from "next/link";
-import Image from "next/image";
-
-// Icons
-import { getIcon } from "@/cms/blocks/icons/index";
-
-// Components
-import Grid from "@mui/material/Grid2";
-import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
-import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+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 buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 // Utils
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
-import { getImageUrl } from "@/cms/endpoints";
-
-// API
-import getProductByIds from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-ids";
-import { getQueryClient } from "@evenicanpm/storefront-core/src/api-manager/services/get-query-client";
-import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import type { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
+// Components
+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";
 
-import {
+import type {
 	Product,
 	ProductSectionFullWidthBlock,
 	ProductWrapper,
 } from "@/cms/blocks/interfaces";
-import { SimpleProduct } from "@msdyn365-commerce/retail-proxy";
+import { getImageUrl } from "@/cms/endpoints";
 
 type CombinedProduct = Product & SimpleProduct;
 export default async function ProductSectionFullWidth(
-	data: ProductSectionFullWidthBlock,
+	data: Readonly<ProductSectionFullWidthBlock>,
 ) {
 	const queryClient = getQueryClient();
 
@@ -38,7 +34,7 @@ export default async function ProductSectionFullWidth(
 
 	const e4Products = await getProductByIds.fetchData(queryClient, { id: skus });
 
-	if (!(e4Products && e4Products.length)) {
+	if (!e4Products?.length) {
 		return null;
 	}
 

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

@@ -1,8 +1,8 @@
 "use client";
 
-import React from "react";
-import Markdown from "marked-react";
 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,7 +1,7 @@
 import React from "react";
-import cmsEndPoints from "@/cms/endpoints";
 import { Helmet } from "react-helmet-async";
-import { MetaItem, SeoPageData } from "@/cms/blocks/interfaces";
+import type { MetaItem, SeoPageData } from "@/cms/blocks/interfaces";
+import cmsEndPoints from "@/cms/endpoints";
 
 // SEO Component to be populated
 // Included in storefront repo to ensure correct import of react-helmet-async,
@@ -36,7 +36,11 @@ const Seo = (pageData: SeoPageData) => {
 				</>
 			)}
 			{pageData?.seo?.meta?.map((metaItem: MetaItem, i: number) => (
-				<meta name={metaItem.name} key={i} content={metaItem.content} />
+				<meta
+					name={metaItem.name}
+					key={metaItem.id}
+					content={metaItem.content}
+				/>
 			))}
 			<script type="application/ld+json">
 				{JSON.stringify(pageData?.seo?.structuredData)}

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

@@ -1,14 +1,14 @@
-import React from "react";
-import Grid from "@mui/material/Grid2";
 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 {
-	ServicesBlock,
+import type {
 	ServiceCard as ServiceCardItem,
+	ServicesBlock,
 } from "@/cms/blocks/interfaces";
 
-export default function Services(data: ServicesBlock) {
+export default function Services(data: Readonly<ServicesBlock>) {
 	return (
 		<Container sx={{ marginBottom: "80px", marginTop: "80px" }}>
 			<Grid container spacing={3}>

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

@@ -1,19 +1,17 @@
 "use client";
 
-import React from "react";
-import Fab from "@mui/material/Fab";
-import Grid from "@mui/material/Grid2";
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-// CUSTOM ICON COMPONENTS
-import { getIcon } from "@/cms/blocks/icons/index";
-
 // GLOBAL CUSTOM COMPONENTS
 import {
 	H4,
 	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/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";
 
 // CUSTOM DATA MODEL
 interface Service {
@@ -47,7 +45,7 @@ const StyledCard = styled(Card)(({ theme }) => ({
 type Props = { service: Service };
 // ==================================================
 
-export default function ServiceCard({ service }: Props) {
+export default function ServiceCard({ service }: Readonly<Props>) {
 	const { icon, title, description } = service;
 
 	const Icon = getIcon(icon);

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

@@ -1,14 +1,17 @@
-import React from "react";
 // GLOBAL CUSTOM COMPONENTS
 import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
-import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import React from "react";
 
 // ==========================================================
 type Props = { title: string; imgUrl: string };
 // ==========================================================
 
-export default function FeaturedProductCard({ imgUrl, title }: Props) {
+export default function FeaturedProductCard({
+	imgUrl,
+	title,
+}: Readonly<Props>) {
 	return (
 		<div>
 			<HoverBox borderRadius="5px" mb={1}>

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

@@ -1,10 +1,9 @@
-import React from "react";
-import { HtmlHTMLAttributes } from "react";
-import { styled, SxProps, Theme } from "@mui/material/styles";
-// GLOBAL CUSTOM COMPONENTS
-import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+// GLOBAL CUSTOM COMPONENTS
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { type SxProps, styled, type Theme } from "@mui/material/styles";
+import React, { type HtmlHTMLAttributes } from "react";
 
 // STYLED COMPONENT
 const StyledBazaarCard = styled(BazaarCard)(({ theme }) => ({
@@ -32,7 +31,7 @@ export default function ProductCategoryItem({
 	isSelected,
 	sx = {},
 	...others
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<StyledBazaarCard
 			elevation={isSelected ? 2 : 0}

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

@@ -1,9 +1,10 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
 // GLOBAL CUSTOM COMPONENTS
 import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
-import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import React from "react";
+
 // CUSTOM DATA MODEL
 
 interface Product {
@@ -19,7 +20,10 @@ interface Product {
 
 type Props = { products: Product[]; heading: string };
 
-export default function ProductGridList({ products, heading }: Props) {
+export default function ProductGridList({
+	products,
+	heading,
+}: Readonly<Props>) {
 	return (
 		<Box flex="1 1 0">
 			<Section>

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

@@ -1,13 +1,12 @@
-import React from "react";
-
-import Card from "@mui/material/Card";
-import Chip from "@mui/material/Chip";
-import styled from "@mui/material/styles/styled";
-import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
 // GLOBAL CUSTOM COMPONENTS
 import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import Image from "@evenicanpm/storefront-core/src/components-v2/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)({
@@ -27,7 +26,11 @@ interface Props {
 }
 // ========================================================
 
-export default function TopCategoriesCard({ title, subtitle, imgUrl }: Props) {
+export default function TopCategoriesCard({
+	title,
+	subtitle,
+	imgUrl,
+}: Readonly<Props>) {
 	const theme = useTheme();
 	const color = theme.palette.secondary.main;
 	return (

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

@@ -1,5 +1,4 @@
-import React from "react";
-import Rating from "@mui/material/Rating";
+import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/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";
@@ -7,9 +6,10 @@ import {
 	H4,
 	Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 // 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 {
@@ -21,7 +21,7 @@ interface Props {
 }
 // ======================================================
 
-export default function TopRatingProductCard(props: Props) {
+export default function TopRatingProductCard(props: Readonly<Props>) {
 	const { title, price, imgUrl, rating = 5, reviewCount = 10 } = props;
 
 	return (

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

@@ -1,8 +1,8 @@
 "use client";
-import { OverridableComponent } from "@mui/material/OverridableComponent";
-import React from "react";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
+import type { SvgIconTypeMap } from "@mui/material/SvgIcon";
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+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,7 @@
 "use client";
-import React from "react";
 
 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,7 @@
 "use client";
-import React from "react";
 
 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,7 @@
 "use client";
-import React from "react";
 
 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,7 @@
 "use client";
-import React from "react";
 
 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,7 @@
 "use client";
-import React from "react";
 
 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,6 @@
 "use client";
-import React from "react";
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import React from "react";
 
 const RankBadge = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

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

@@ -1,15 +1,15 @@
-import { OverridableComponent } from "@mui/material/OverridableComponent";
-import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
+import type { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
 type IconComponent = OverridableComponent<SvgIconTypeMap<unknown, "svg">>;
 
 import Category from "@/cms/blocks/icons/components/category";
 import DottedStar from "@/cms/blocks/icons/components/dotted-star";
+import FallbackIcon from "@/cms/blocks/icons/components/fallback-icon";
 import GiftBox from "@/cms/blocks/icons/components/gift-box";
 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";
-import FallbackIcon from "@/cms/blocks/icons/components/fallback-icon";
 
 export { Category };
 export { DottedStar };

package/src/cms/blocks/index.tsx

@@ -1,16 +1,16 @@
 // From scratch components
 export { default as BrandLogosScroller } from "@/cms/blocks/components/brand-logos-scroller";
 export { default as CategoryCard } from "@/cms/blocks/components/category-card";
+export { default as CategoryCarousel } from "@/cms/blocks/components/category-carousel/index";
+export { default as FeaturePill } from "@/cms/blocks/components/feature-pill";
 export { default as FeaturedCategories } from "@/cms/blocks/components/featured-categories";
 export { default as FeaturedProducts } from "@/cms/blocks/components/featured-products";
-export { default as FeaturePill } from "@/cms/blocks/components/feature-pill";
 export { default as Footer } from "@/cms/blocks/components/footer";
 export { default as Hero } from "@/cms/blocks/components/hero";
-export { default as MediaCard } from "@/cms/blocks/components/media-card";
-export { default as RichText } from "@/cms/blocks/components/rich-text";
-export { default as Image } from "@/cms/blocks/components/image";
 export { default as HeroCarousel } from "@/cms/blocks/components/hero-carousel/index";
-export { default as Services } from "@/cms/blocks/components/services/index";
+export { default as Image } from "@/cms/blocks/components/image";
+export { default as MediaCard } from "@/cms/blocks/components/media-card";
 export { default as ProductCarousel } from "@/cms/blocks/components/product-carousel/index";
 export { default as ProductSectionFullWidth } from "@/cms/blocks/components/product-section-fullwidth/index";
-export { default as CategoryCarousel } from "@/cms/blocks/components/category-carousel/index";
+export { default as RichText } from "@/cms/blocks/components/rich-text";
+export { default as Services } from "@/cms/blocks/components/services/index";

package/src/cms/blog.ts

@@ -1,6 +1,6 @@
+import type { BlocksContent } from "@strapi/blocks-react-renderer";
 import cms from "@/cms/endpoints";
-import { type BlocksContent } from "@strapi/blocks-react-renderer";
-import { Formats } from "@/cms/interfaces/product-data";
+import type { Formats } from "@/cms/interfaces/product-data";
 
 export interface Blogs {
 	data: Array<{

package/src/cms/endpoints.ts

@@ -1,4 +1,4 @@
-import { Formats } from "@/cms/interfaces/product-data";
+import type { Formats } from "@/cms/interfaces/product-data";
 
 const apiKeys = {
 	pages: "/cms/pages",

package/src/components-v2/BazaarCard.stories.tsx

@@ -1,6 +1,6 @@
+import { Box, Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 import BazaarCard from "./BazaarCard";
-import { Typography, Box } from "@mui/material";
 
 const meta = {
 	title: "Bazaar/BazaarCard",

package/src/components-v2/BazaarCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Card, { CardProps } from "@mui/material/Card";
+import Card, { type CardProps } from "@mui/material/Card";
 import styled from "@mui/material/styles/styled";
 
 // ===============================================

package/src/components-v2/BazaarImage.tsx

@@ -1,4 +1,4 @@
-import Box, { BoxProps } from "@mui/material/Box";
+import Box, { type BoxProps } from "@mui/material/Box";
 
 // ==============================================================
 interface Props extends BoxProps {
@@ -7,6 +7,6 @@ interface Props extends BoxProps {
 }
 // ==============================================================
 
-export default function BazaarImage(props: Props) {
+export default function BazaarImage(props: Readonly<Props>) {
 	return <Box component="img" {...props} />;
 }

package/src/components-v2/BazaarMenu.stories.tsx

@@ -1,6 +1,6 @@
+import { Button, MenuItem } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 import BazaarMenu from "./BazaarMenu";
-import { Button, MenuItem } from "@mui/material";
 
 const meta = {
 	title: "Bazaar/BazaarMenu",