@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/components-v2/navbar/utils/transform-nav.test.ts

@@ -1,212 +1,212 @@
 import { describe, it, expect } from "vitest";
 import {
-  transformCategoryNav,
-  transformCmsNav,
+	transformCategoryNav,
+	transformCmsNav,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 import { CmsNavItem } from "@/cms/interfaces/navigation";
-import { CategoryHierarchy } from "@/lib/category-helpers";
+import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 
 describe("transform nav items", () => {
-  it("should recursively transform deeply nested categories and its children with correct href, title, and items", () => {
-    const result = transformCategoryNav(
-      categories as unknown as CategoryHierarchy[],
-    );
-    const accessories = result[0];
-    expect(accessories.title).toBe("Accessories");
-    expect(accessories.href).toBe(
-      "/products/fabrikam-fashion/accessories/68719478036",
-    );
-    expect(Array.isArray(accessories.items)).toBe(true);
+	it("should recursively transform deeply nested categories and its children with correct href, title, and items", () => {
+		const result = transformCategoryNav(
+			categories as unknown as CategoryHierarchy[],
+		);
+		const accessories = result[0];
+		expect(accessories.title).toBe("Accessories");
+		expect(accessories.href).toBe(
+			"/products/fabrikam-fashion/accessories/68719478036",
+		);
+		expect(Array.isArray(accessories.items)).toBe(true);
 
-    const handbagsAndWallets = accessories.items.find(
-      (i) => i.title === "Handbags and Wallets",
-    );
-    expect(handbagsAndWallets?.title).toBe("Handbags and Wallets");
-    expect(handbagsAndWallets?.href).toBe(
-      "/products/fabrikam-fashion/accessories/handbags-and-wallets/68719478063",
-    );
-    expect(Array.isArray(handbagsAndWallets?.items)).toBe(true);
+		const handbagsAndWallets = accessories.items.find(
+			(i) => i.title === "Handbags and Wallets",
+		);
+		expect(handbagsAndWallets?.title).toBe("Handbags and Wallets");
+		expect(handbagsAndWallets?.href).toBe(
+			"/products/fabrikam-fashion/accessories/handbags-and-wallets/68719478063",
+		);
+		expect(Array.isArray(handbagsAndWallets?.items)).toBe(true);
 
-    const handbags = handbagsAndWallets?.items.find(
-      (i) => i.title === "Handbags",
-    );
-    expect(handbags?.title).toBe("Handbags");
-    expect(handbags?.href).toBe(
-      "/products/fabrikam-fashion/accessories/handbags-and-wallets/handbags/68719478067",
-    );
-    expect(Array.isArray(handbags?.items)).toBe(true);
-    expect(handbags?.items.length).toBe(0); // leaf node
+		const handbags = handbagsAndWallets?.items.find(
+			(i) => i.title === "Handbags",
+		);
+		expect(handbags?.title).toBe("Handbags");
+		expect(handbags?.href).toBe(
+			"/products/fabrikam-fashion/accessories/handbags-and-wallets/handbags/68719478067",
+		);
+		expect(Array.isArray(handbags?.items)).toBe(true);
+		expect(handbags?.items.length).toBe(0); // leaf node
 
-    const wallets = handbagsAndWallets?.items.find(
-      (i) => i.title === "Wallets",
-    );
-    expect(wallets?.title).toBe("Wallets");
-    expect(wallets?.href).toBe(
-      "/products/fabrikam-fashion/accessories/handbags-and-wallets/wallets/68719478069",
-    );
-    expect(Array.isArray(wallets?.items)).toBe(true);
-    expect(wallets?.items.length).toBe(0); // leaf node
-  });
+		const wallets = handbagsAndWallets?.items.find(
+			(i) => i.title === "Wallets",
+		);
+		expect(wallets?.title).toBe("Wallets");
+		expect(wallets?.href).toBe(
+			"/products/fabrikam-fashion/accessories/handbags-and-wallets/wallets/68719478069",
+		);
+		expect(Array.isArray(wallets?.items)).toBe(true);
+		expect(wallets?.items.length).toBe(0); // leaf node
+	});
 
-  it("should transform cms nav items with proper href", () => {
-    const { href, items } = transformCmsNav([cmsNavItemApiResponse])[0];
-    expect(href).toBe("/pages/news"); // Internal link
-    expect(items.length).toBe(1);
-    expect(items[0].href).toBe("http://example.com"); // External link
-  });
+	it("should transform cms nav items with proper href", () => {
+		const { href, items } = transformCmsNav([cmsNavItemApiResponse])[0];
+		expect(href).toBe("/pages/news"); // Internal link
+		expect(items.length).toBe(1);
+		expect(items[0].href).toBe("http://example.com"); // External link
+	});
 });
 
 // Mock Data
 export const categories = [
-  {
-    RecordId: 68719478036,
-    Name: "Accessories",
-    ParentCategory: 68719478035,
-    DisplayOrder: 1,
-    LocalizedDescription: "Accessories",
-    Images: [
-      {
-        Uri: "Categories/Accessories.png",
-        IsDefault: false,
-        IsSelfHosted: false,
-        Priority: 0,
-        IsAdditionalMedia: false,
-        MediaTypeValue: 0,
-        DisplayOrder: 0,
-        IsApplicableForChildEntities: false,
-        ExtensionProperties: [],
-      },
-    ],
-    NameTranslations: [
-      {
-        Language: "en-us",
-        Text: "Accessories",
-        ExtensionProperties: [],
-      },
-    ],
-    ExtensionProperties: [],
-    NeutralizedName: "Accessories",
-    Slug: "accessories",
-    Children: [
-      {
-        RecordId: 68719478063,
-        Name: "Handbags and Wallets",
-        ParentCategory: 68719478036,
-        DisplayOrder: 5,
-        LocalizedDescription: "Handbags and Wallets",
-        Images: [
-          {
-            Uri: "Categories/Handbags and Wallets.png",
-            IsDefault: false,
-            IsSelfHosted: false,
-            Priority: 0,
-            IsAdditionalMedia: false,
-            MediaTypeValue: 0,
-            DisplayOrder: 0,
-            IsApplicableForChildEntities: false,
-            ExtensionProperties: [],
-          },
-        ],
-        NameTranslations: [
-          {
-            Language: "en-us",
-            Text: "Handbags and Wallets",
-            ExtensionProperties: [],
-          },
-        ],
-        ExtensionProperties: [],
-        NeutralizedName: "Handbags and Wallets",
-        Slug: "handbags-and-wallets",
-        Children: [
-          {
-            RecordId: 68719478067,
-            Name: "Handbags",
-            ParentCategory: 68719478063,
-            DisplayOrder: 0,
-            LocalizedDescription: "Handbags",
-            Images: [
-              {
-                Uri: "Categories/Handbags.png",
-                IsDefault: false,
-                IsSelfHosted: false,
-                Priority: 0,
-                IsAdditionalMedia: false,
-                MediaTypeValue: 0,
-                DisplayOrder: 0,
-                IsApplicableForChildEntities: false,
-                ExtensionProperties: [],
-              },
-            ],
-            NameTranslations: [
-              {
-                Language: "en-us",
-                Text: "Handbags",
-                ExtensionProperties: [],
-              },
-            ],
-            ExtensionProperties: [],
-            NeutralizedName: "Handbags",
-            Slug: "handbags",
-            Url: "fabrikam-fashion/accessories/handbags-and-wallets/handbags/68719478067",
-          },
-          {
-            RecordId: 68719478069,
-            Name: "Wallets",
-            ParentCategory: 68719478063,
-            DisplayOrder: 6,
-            LocalizedDescription: "Wallets",
-            Images: [
-              {
-                Uri: "Categories/Wallets.png",
-                IsDefault: false,
-                IsSelfHosted: false,
-                Priority: 0,
-                IsAdditionalMedia: false,
-                MediaTypeValue: 0,
-                DisplayOrder: 0,
-                IsApplicableForChildEntities: false,
-                ExtensionProperties: [],
-              },
-            ],
-            NameTranslations: [
-              {
-                Language: "en-us",
-                Text: "Wallets",
-                ExtensionProperties: [],
-              },
-            ],
-            ExtensionProperties: [],
-            NeutralizedName: "Wallets",
-            Slug: "wallets",
-            Url: "fabrikam-fashion/accessories/handbags-and-wallets/wallets/68719478069",
-          },
-        ],
-        Url: "fabrikam-fashion/accessories/handbags-and-wallets/68719478063",
-      },
-    ],
-    Url: "fabrikam-fashion/accessories/68719478036",
-  },
+	{
+		RecordId: 68719478036,
+		Name: "Accessories",
+		ParentCategory: 68719478035,
+		DisplayOrder: 1,
+		LocalizedDescription: "Accessories",
+		Images: [
+			{
+				Uri: "Categories/Accessories.png",
+				IsDefault: false,
+				IsSelfHosted: false,
+				Priority: 0,
+				IsAdditionalMedia: false,
+				MediaTypeValue: 0,
+				DisplayOrder: 0,
+				IsApplicableForChildEntities: false,
+				ExtensionProperties: [],
+			},
+		],
+		NameTranslations: [
+			{
+				Language: "en-us",
+				Text: "Accessories",
+				ExtensionProperties: [],
+			},
+		],
+		ExtensionProperties: [],
+		NeutralizedName: "Accessories",
+		Slug: "accessories",
+		Children: [
+			{
+				RecordId: 68719478063,
+				Name: "Handbags and Wallets",
+				ParentCategory: 68719478036,
+				DisplayOrder: 5,
+				LocalizedDescription: "Handbags and Wallets",
+				Images: [
+					{
+						Uri: "Categories/Handbags and Wallets.png",
+						IsDefault: false,
+						IsSelfHosted: false,
+						Priority: 0,
+						IsAdditionalMedia: false,
+						MediaTypeValue: 0,
+						DisplayOrder: 0,
+						IsApplicableForChildEntities: false,
+						ExtensionProperties: [],
+					},
+				],
+				NameTranslations: [
+					{
+						Language: "en-us",
+						Text: "Handbags and Wallets",
+						ExtensionProperties: [],
+					},
+				],
+				ExtensionProperties: [],
+				NeutralizedName: "Handbags and Wallets",
+				Slug: "handbags-and-wallets",
+				Children: [
+					{
+						RecordId: 68719478067,
+						Name: "Handbags",
+						ParentCategory: 68719478063,
+						DisplayOrder: 0,
+						LocalizedDescription: "Handbags",
+						Images: [
+							{
+								Uri: "Categories/Handbags.png",
+								IsDefault: false,
+								IsSelfHosted: false,
+								Priority: 0,
+								IsAdditionalMedia: false,
+								MediaTypeValue: 0,
+								DisplayOrder: 0,
+								IsApplicableForChildEntities: false,
+								ExtensionProperties: [],
+							},
+						],
+						NameTranslations: [
+							{
+								Language: "en-us",
+								Text: "Handbags",
+								ExtensionProperties: [],
+							},
+						],
+						ExtensionProperties: [],
+						NeutralizedName: "Handbags",
+						Slug: "handbags",
+						Url: "fabrikam-fashion/accessories/handbags-and-wallets/handbags/68719478067",
+					},
+					{
+						RecordId: 68719478069,
+						Name: "Wallets",
+						ParentCategory: 68719478063,
+						DisplayOrder: 6,
+						LocalizedDescription: "Wallets",
+						Images: [
+							{
+								Uri: "Categories/Wallets.png",
+								IsDefault: false,
+								IsSelfHosted: false,
+								Priority: 0,
+								IsAdditionalMedia: false,
+								MediaTypeValue: 0,
+								DisplayOrder: 0,
+								IsApplicableForChildEntities: false,
+								ExtensionProperties: [],
+							},
+						],
+						NameTranslations: [
+							{
+								Language: "en-us",
+								Text: "Wallets",
+								ExtensionProperties: [],
+							},
+						],
+						ExtensionProperties: [],
+						NeutralizedName: "Wallets",
+						Slug: "wallets",
+						Url: "fabrikam-fashion/accessories/handbags-and-wallets/wallets/68719478069",
+					},
+				],
+				Url: "fabrikam-fashion/accessories/handbags-and-wallets/68719478063",
+			},
+		],
+		Url: "fabrikam-fashion/accessories/68719478036",
+	},
 ];
 
 const cmsNavItemApiResponse = {
-  title: "News",
-  menuAttached: true,
-  path: "/news",
-  type: "INTERNAL",
-  uiRouterKey: "news",
-  slug: "benefits",
-  external: false,
-  related: {
-    slug: "news",
-  },
-  items: [
-    {
-      title: "External url",
-      menuAttached: true,
-      path: "http://example.com",
-      type: "EXTERNAL",
-      uiRouterKey: "generic",
-      external: true,
-    },
-  ],
+	title: "News",
+	menuAttached: true,
+	path: "/news",
+	type: "INTERNAL",
+	uiRouterKey: "news",
+	slug: "benefits",
+	external: false,
+	related: {
+		slug: "news",
+	},
+	items: [
+		{
+			title: "External url",
+			menuAttached: true,
+			path: "http://example.com",
+			type: "EXTERNAL",
+			uiRouterKey: "generic",
+			external: true,
+		},
+	],
 } as CmsNavItem;

package/src/components-v2/navbar/utils/transform-nav.ts

@@ -1,43 +1,43 @@
 import { CmsNavItem } from "@/cms/interfaces/navigation";
-import { CategoryHierarchy } from "@/lib/category-helpers";
+import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { SvgIconComponent } from "@mui/icons-material";
 
 type MenuType = "default" | "mega-menu" | "full-screen-mega-menu";
 export interface TransformedNavItem {
-  href: string;
-  title: string;
-  items: TransformedNavItem[];
-  menuType: MenuType;
-  // Icon and img used only in full screen mega menu
-  Icon?: SvgIconComponent;
-  img?: string;
+	href: string;
+	title: string;
+	items: TransformedNavItem[];
+	menuType: MenuType;
+	// Icon and img used only in full screen mega menu
+	Icon?: SvgIconComponent;
+	img?: string;
 }
 
 export const transformCmsNav = (items: CmsNavItem[]): TransformedNavItem[] => {
-  return items.map((item) => {
-    const transformedItem: TransformedNavItem = {
-      href:
-        item.type === "INTERNAL"
-          ? `/pages/${item.related?.slug}`
-          : (item.path ?? ""),
-      title: item.title,
-      menuType: "default",
-      items: item.items ? transformCmsNav(item.items) : [],
-    };
+	return items.map((item) => {
+		const transformedItem: TransformedNavItem = {
+			href:
+				item.type === "INTERNAL"
+					? `/pages/${item.related?.slug}`
+					: (item.path ?? ""),
+			title: item.title,
+			menuType: "default",
+			items: item.items ? transformCmsNav(item.items) : [],
+		};
 
-    return transformedItem;
-  });
+		return transformedItem;
+	});
 };
 
 export const transformCategoryNav = (
-  items: CategoryHierarchy[],
+	items: CategoryHierarchy[],
 ): TransformedNavItem[] => {
-  return items.map((item: CategoryHierarchy) => {
-    return {
-      href: `/products/${item?.Url}`,
-      title: item?.Name ?? "",
-      menuType: "default",
-      items: item?.Children ? transformCategoryNav(item.Children) : [],
-    };
-  });
+	return items.map((item: CategoryHierarchy) => {
+		return {
+			href: `/products/${item?.Url}`,
+			title: item?.Name ?? "",
+			menuType: "default",
+			items: item?.Children ? transformCategoryNav(item.Children) : [],
+		};
+	});
 };

package/src/components-v2/no-records.tsx

@@ -6,15 +6,15 @@ import { useTranslations } from "next-intl";
 type Props = { message: string };
 
 export default function NoRecords({ message }: Props) {
-  const t = useTranslations();
-  return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      height="50vh"
-    >
-      <H4 color="grey.500">{t(message)}</H4>
-    </Box>
-  );
+	const t = useTranslations();
+	return (
+		<Box
+			display="flex"
+			justifyContent="center"
+			alignItems="center"
+			height="50vh"
+		>
+			<H4 color="grey.500">{t(message)}</H4>
+		</Box>
+	);
 }

package/src/components-v2/product-cards/discount-chip.tsx

@@ -5,39 +5,39 @@ import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENT
 const StyledChip = styled(Chip, {
-  shouldForwardProp: (prop) => prop !== "shape",
+	shouldForwardProp: (prop) => prop !== "shape",
 })<{ shape: "rounded" | "square" }>(({ theme, shape }) => ({
-  zIndex: 1,
-  top: "10px",
-  left: "10px",
-  paddingLeft: 3,
-  paddingRight: 3,
-  fontWeight: 600,
-  fontSize: "10px",
-  position: "absolute",
-  color: theme.palette.common.white,
-  background: theme.palette.primary.main,
-  ...(shape === "square" && { borderRadius: 0 }),
+	zIndex: 1,
+	top: "10px",
+	left: "10px",
+	paddingLeft: 3,
+	paddingRight: 3,
+	fontWeight: 600,
+	fontSize: "10px",
+	position: "absolute",
+	color: theme.palette.common.white,
+	background: theme.palette.primary.main,
+	...(shape === "square" && { borderRadius: 0 }),
 }));
 
 // ==============================================================
 interface Props extends ChipProps {
-  discount: number;
-  shape?: "rounded" | "square";
+	discount: number;
+	shape?: "rounded" | "square";
 }
 // ==============================================================
 
 export default function DiscountChip({
-  discount = 0,
-  shape = "rounded",
-  ...props
+	discount = 0,
+	shape = "rounded",
+	...props
 }: Props) {
-  return discount > 0 ? (
-    <StyledChip
-      size="small"
-      shape={shape}
-      label={`${discount}% off`}
-      {...props}
-    />
-  ) : null;
+	return discount > 0 ? (
+		<StyledChip
+			size="small"
+			shape={shape}
+			label={`${discount}% off`}
+			{...props}
+		/>
+	) : null;
 }

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

@@ -6,47 +6,47 @@ import Favorite from "@mui/icons-material/Favorite";
 import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
 
 export interface FavoriteButtonProps extends Omit<IconButtonProps, "onClick"> {
-  isFavorite: boolean;
-  onToggle: () => void;
-  iconSize?: "inherit" | "small" | "medium" | "large";
-  customIconSize?: number; // overides icon size
-  activeColor?:
-    | "primary"
-    | "secondary"
-    | "error"
-    | "disabled"
-    | "action"
-    | "inherit";
-  inactiveColor?: "disabled" | "action" | "inherit";
+	isFavorite: boolean;
+	onToggle: () => void;
+	iconSize?: "inherit" | "small" | "medium" | "large";
+	customIconSize?: number; // overides icon size
+	activeColor?:
+		| "primary"
+		| "secondary"
+		| "error"
+		| "disabled"
+		| "action"
+		| "inherit";
+	inactiveColor?: "disabled" | "action" | "inherit";
 }
 
 export default function FavoriteButton({
-  isFavorite,
-  onToggle,
-  iconSize = "small",
-  customIconSize,
-  activeColor = "primary",
-  inactiveColor = "disabled",
-  ...rest
+	isFavorite,
+	onToggle,
+	iconSize = "small",
+	customIconSize,
+	activeColor = "primary",
+	inactiveColor = "disabled",
+	...rest
 }: FavoriteButtonProps) {
-  const iconProps = customIconSize
-    ? { sx: { fontSize: customIconSize } }
-    : { fontSize: iconSize };
+	const iconProps = customIconSize
+		? { sx: { fontSize: customIconSize } }
+		: { fontSize: iconSize };
 
-  return (
-    <IconButton
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onToggle();
-      }}
-      {...rest}
-    >
-      {isFavorite ? (
-        <Favorite color={activeColor} {...iconProps} />
-      ) : (
-        <FavoriteBorder color={inactiveColor} {...iconProps} />
-      )}
-    </IconButton>
-  );
+	return (
+		<IconButton
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onToggle();
+			}}
+			{...rest}
+		>
+			{isFavorite ? (
+				<Favorite color={activeColor} {...iconProps} />
+			) : (
+				<FavoriteBorder color={inactiveColor} {...iconProps} />
+			)}
+		</IconButton>
+	);
 }