@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,84 @@
+/*import React from "react";
+import { expect, describe, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { NavContext } from "@evenicanpm/storefront-core/src/components-v2/NavProvider";
+import NavCms from "./index";
+
+describe("NavCms", () => {
+  it("Renders the page links and dropdown menu", () => {
+    render(
+      <NavContext.Provider value={mockData}>
+        <NavCms />
+      </NavContext.Provider>,
+    );
+
+    expect(screen.getByText("About Us")).toBeInTheDocument();
+    expect(screen.getByText("Pages")).toBeInTheDocument();
+    expect(screen.getByText("My Page")).toBeInTheDocument();
+  });
+});
+
+const mockData = {
+  categories: [],
+  cmsNav: [
+    {
+      id: 1,
+      title: "About Us",
+      menuAttached: false,
+      order: 1,
+      path: "https://youtube.com",
+      type: "EXTERNAL",
+      uiRouterKey: "about-us",
+      slug: {},
+      external: true,
+    },
+    {
+      id: 2,
+      title: "Pages",
+      menuAttached: true,
+      order: 2,
+      path: "/pages",
+      type: "WRAPPER",
+      uiRouterKey: "pages",
+      slug: "pages-1",
+      external: false,
+      items: [
+        {
+          id: 3,
+          title: "My Page",
+          menuAttached: false,
+          order: 1,
+          path: "/pages/my-page",
+          type: "INTERNAL",
+          uiRouterKey: "my-page",
+          slug: "pages-my-page",
+          external: false,
+          related: {
+            id: 1,
+            title: "My Page",
+            slug: "my-page",
+            createdAt: "2025-01-20T17:27:16.685Z",
+            updatedAt: "2025-01-20T17:27:19.608Z",
+            publishedAt: "2025-01-20T17:27:19.603Z",
+            __contentType: "api::page.page",
+            navigationItemId: 3,
+            __templateName: "Generic",
+          },
+          items: [
+            {
+              id: 4,
+              title: "NESTED",
+              menuAttached: false,
+              order: 1,
+              path: "https://google.com",
+              type: "EXTERNAL",
+              uiRouterKey: "nested",
+              slug: {},
+              external: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};*/

package/src/components-v2/navbar/nav-list/index.ts

@@ -0,0 +1 @@
+export { default } from "./nav-list";

package/src/components-v2/navbar/nav-list/nav-item-child.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { PropsWithChildren, RefObject } from "react";
+import { usePathname } from "next/navigation";
+import MenuItem from "@mui/material/MenuItem";
+// MUI ICON COMPONENTS
+import ArrowLeft from "@mui/icons-material/ArrowLeft";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+// GLOBAL CUSTOM HOOKS
+import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+// STYLED COMPONENTS
+import { ParentNav, ParentNavItem } from "../styles";
+
+import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+
+// ==============================================================
+interface Props extends PropsWithChildren {
+  nav: TransformedNavItem;
+}
+// ==============================================================
+
+export default function NavItemChild({ nav, children }: Props) {
+  const pathname = usePathname();
+  const { settings } = useSettings();
+  const { checkOverflow, elementRef, isLeftOverflowing, isRightOverflowing } =
+    useOverflowDetect();
+
+  const isActive = nav.items.flat().find((item) => {
+    const { href } = item;
+    if (!href || !pathname) return false;
+    return href === pathname;
+  });
+
+  return (
+    <ParentNav
+      minWidth={200}
+      active={isActive ? 1 : 0}
+      onMouseEnter={checkOverflow}
+    >
+      <MenuItem color="grey.700">
+        <Span flex="1 1 0">{nav?.title}</Span>
+
+        {settings.direction === "ltr" ? (
+          <ArrowRight fontSize="small" />
+        ) : (
+          <ArrowLeft fontSize="small" />
+        )}
+      </MenuItem>
+
+      <ParentNavItem
+        ref={elementRef as RefObject<HTMLDivElement>}
+        left={isLeftOverflowing}
+        right={isRightOverflowing}
+        className="parent-nav-item"
+      >
+        <BazaarCard elevation={3} sx={{ py: "0.5rem", minWidth: 180 }}>
+          {children}
+        </BazaarCard>
+      </ParentNavItem>
+    </ParentNav>
+  );
+}

package/src/components-v2/navbar/nav-list/nav-list.tsx

@@ -0,0 +1,119 @@
+import { useContext } from "react";
+import MenuItem from "@mui/material/MenuItem";
+// MUI ICON COMPONENTS
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+// LOCAL CUSTOM COMPONENTS
+import MegaMenu from "../mega-menu/index";
+import NavItemChild from "./nav-item-child";
+import CategoryBasedMenu from "../category-based-menu/index";
+// STYLED COMPONENTS
+import { StyledNavLink, NAV_LINK_STYLES, ChildNavListWrapper } from "../styles";
+// NAV RELATED
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import {
+  transformCmsNav,
+  TransformedNavItem,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+
+export default function NavigationList() {
+  const renderNestedNav = (list: TransformedNavItem[], isRoot = false) => {
+    return list.map((nav: TransformedNavItem) => {
+      const { href, title, items } = nav;
+
+      if (isRoot) {
+        // We can show mega menu or full screen mega menu based on client requirements
+        // Just set menuType as required in transform nav data (/navbar/utils/transform-nav.ts) and see the magic.
+        // By default we show normal menu
+
+        // Show mega menu - column based menu with single level children
+        if (nav.menuType === "mega-menu") {
+          return (
+            <MegaMenu
+              key={title}
+              title={title}
+              menuList={
+                nav.items.map((item) => [item]) as TransformedNavItem[][]
+              }
+            />
+          );
+        }
+
+        // Show fullscreen mega menu with multi level children - good to use for categories
+        if (nav.menuType === "full-screen-mega-menu") {
+          return (
+            <CategoryBasedMenu
+              key={title}
+              title={title}
+              menuList={nav.items as TransformedNavItem[]}
+            />
+          );
+        }
+
+        const hasChildren = !!(items && items.length);
+
+        if (href && !hasChildren) {
+          return (
+            <StyledNavLink href={href} key={title}>
+              {title}
+            </StyledNavLink>
+          );
+        }
+
+        if (hasChildren) {
+          return (
+            <FlexBox
+              key={title}
+              alignItems="center"
+              position="relative"
+              flexDirection="column"
+              sx={{
+                "&:hover": { "& > .child-nav-item": { display: "block" } },
+              }}
+            >
+              <FlexBox alignItems="flex-end" gap={0.3} sx={NAV_LINK_STYLES}>
+                {title}{" "}
+                <KeyboardArrowDown
+                  sx={{ color: "grey.500", fontSize: "1.1rem" }}
+                />
+              </FlexBox>
+
+              <ChildNavListWrapper className="child-nav-item">
+                <BazaarCard
+                  elevation={3}
+                  sx={{ mt: 2.5, py: 1, minWidth: 100 }}
+                >
+                  {renderNestedNav(items as TransformedNavItem[])}
+                </BazaarCard>
+              </ChildNavListWrapper>
+            </FlexBox>
+          );
+        }
+      } else {
+        const hasChildren = !!(items && items.length);
+        if (href && !hasChildren) {
+          return (
+            <NavLink href={href} key={title}>
+              <MenuItem>{title}</MenuItem>
+            </NavLink>
+          );
+        }
+
+        if (hasChildren) {
+          return (
+            <NavItemChild nav={nav} key={title}>
+              {renderNestedNav(items as TransformedNavItem[])}
+            </NavItemChild>
+          );
+        }
+      }
+    });
+  };
+
+  const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
+
+  return <FlexBox gap={4}>{renderNestedNav(cmsList, true)}</FlexBox>;
+}

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

@@ -0,0 +1,43 @@
+"use client";
+// LOCAL CUSTOM COMPONENTS
+import Categories from "./categories";
+import NavigationList from "./nav-list/index";
+// STYLED COMPONENTS
+import { NavBarWrapper, InnerContainer } from "./styles";
+// DATA TYPES
+
+// ==========================================================
+interface Props {
+  border?: number;
+  elevation?: number;
+  hideCategories?: boolean;
+}
+// ==========================================================
+
+export default function Navbar({
+  border = 0,
+  elevation = 2,
+  hideCategories = false,
+}: Props) {
+  return (
+    <NavBarWrapper
+      hoverEffect={false}
+      elevation={elevation}
+      border={border || 0}
+    >
+      {hideCategories ? (
+        <InnerContainer sx={{ justifyContent: "center" }}>
+          <NavigationList />
+        </InnerContainer>
+      ) : (
+        <InnerContainer>
+          {/* CATEGORY MEGA MENU */}
+          <Categories />
+
+          {/* HORIZONTAL MENU */}
+          <NavigationList />
+        </InnerContainer>
+      )}
+    </NavBarWrapper>
+  );
+}

package/src/components-v2/navbar/styles.ts

@@ -0,0 +1,90 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import styled from "@mui/material/styles/styled";
+import Container from "@mui/material/Container";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+
+// COMMON STYLED OBJECT
+export const NAV_LINK_STYLES = {
+  fontWeight: 600,
+  cursor: "pointer",
+  transition: "color 150ms ease-in-out",
+  "&:hover": { color: "primary.main" },
+  "&:last-child": { marginRight: 0 },
+};
+
+export const StyledNavLink = styled(NavLink)({ ...NAV_LINK_STYLES });
+
+export const ParentNav = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  position: "relative",
+  "&:hover": {
+    color: theme.palette.primary.main,
+    "& > .parent-nav-item": { display: "block" },
+  },
+  ...(active && { color: theme.palette.primary.main }),
+}));
+
+type Args = { left: boolean; right: boolean };
+
+export const ParentNavItem = styled("div", {
+  shouldForwardProp: (prop) => prop !== "left" && prop !== "right",
+})<Args>(({ theme, left, right }) => ({
+  top: 0,
+  zIndex: 5,
+  left: "100%",
+  paddingLeft: 8,
+  display: "none",
+  position: "absolute",
+  ...(right && left && { right: "100%", left: "auto", paddingRight: 8 }),
+  [theme.breakpoints.down(1640)]: {
+    right: "100%",
+    left: "auto",
+    paddingRight: 8,
+  },
+}));
+
+export const NavBarWrapper = styled(BazaarCard, {
+  shouldForwardProp: (prop) => prop !== "border",
+})<{ border: number }>(({ theme, border }) => ({
+  height: "60px",
+  display: "block",
+  borderRadius: "0px",
+  position: "relative",
+  boxShadow: "none",
+  ...(border && { borderBottom: `1px solid ${theme.palette.grey[200]}` }),
+  [theme.breakpoints.down(1150)]: { display: "none" },
+}));
+
+export const InnerContainer = styled(Container)({
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});
+
+export const CategoryMenuButton = styled(Button)(({ theme }) => ({
+  width: 220,
+  borderRadius: 4,
+  backgroundColor: theme.palette.grey[200],
+  ...(theme.direction === "rtl" && { ".dropdown-icon": { rotate: "180deg" } }),
+  ".prefix": {
+    gap: 8,
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    color: theme.palette.grey[800],
+  },
+}));
+
+export const ChildNavListWrapper = styled("div")({
+  zIndex: 5,
+  left: "50%",
+  top: "100%",
+  display: "none",
+  position: "absolute",
+  transform: "translate(-50%, 0%)",
+});

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

@@ -0,0 +1,209 @@
+import { describe, it, expect } from "vitest";
+import { transformCategoryNav, transformCmsNav } from "./transform-nav";
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+import { CategoryHierarchy } from "@/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);
+
+    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 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
+  });
+});
+
+// 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",
+  },
+];
+
+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,
+    },
+  ],
+} as CmsNavItem;

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

@@ -0,0 +1,43 @@
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+import { CategoryHierarchy } from "@/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;
+}
+
+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 transformedItem;
+  });
+};
+
+export const transformCategoryNav = (
+  items: CategoryHierarchy[],
+): TransformedNavItem[] => {
+  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/newsletter/index.ts

@@ -0,0 +1 @@
+export { default } from "./newsletter";