@evenicanpm/storefront-core 1.0.3 → 1.0.5

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

@@ -1,27 +1,81 @@
+"use client";
+
+import React, { createContext, useContext, ReactNode } from "react";
 import { MdChevronRight as ChevronRight } from "react-icons/md";
 import { useTranslations } from "next-intl";
-// GLOBAL CUSTOM COMPONENTS
+
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
-// CUSTOM ICON COMPONENT
 import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
-// STYLED COMPONENT
-import { CategoryMenuButton } from "./styles";
+import { CategoryMenuButton } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
+
+type CategoriesContextValue = {
+  label: string;
+};
+
+const CategoriesContext = createContext<CategoriesContextValue | undefined>(
+  undefined,
+);
 
-export default function Categories() {
+export default function Categories({ children }: { children?: ReactNode }) {
   const t = useTranslations("Navigation");
+
+  const label = t("topLevelCategoryName");
+
   return (
-    <CategoryMenu
-      render={(handler) => (
-        <CategoryMenuButton variant="text" onClick={(e) => handler(e)}>
-          <div className="prefix">
-            <Category fontSize="small" />
-            <Paragraph fontWeight={600}>{t("topLevelCategoryName")}</Paragraph>
-          </div>
-
-          <ChevronRight className="dropdown-icon" fontSize="large" />
-        </CategoryMenuButton>
-      )}
-    />
+    <CategoriesContext.Provider value={{ label }}>
+      <CategoryMenu
+        render={(handler) =>
+          React.isValidElement(children) ? (
+            children
+          ) : (
+            <Categories.Trigger onClick={handler}>
+              <Categories.Prefix>
+                <Categories.Icon />
+                <Categories.Label />
+              </Categories.Prefix>
+              <Categories.Chevron />
+            </Categories.Trigger>
+          )
+        }
+      />
+    </CategoriesContext.Provider>
   );
 }
+
+Categories.Trigger = function Trigger({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}) {
+  return (
+    <CategoryMenuButton variant="text" onClick={onClick}>
+      {children}
+    </CategoryMenuButton>
+  );
+};
+
+// Prefix wrapper for icon + label
+Categories.Prefix = function Prefix({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="prefix">{children}</div>;
+};
+
+Categories.Icon = function Icon() {
+  return <Category fontSize="small" />;
+};
+
+Categories.Label = function Label() {
+  const ctx = useContext(CategoriesContext);
+  if (!ctx) return null;
+  return <Paragraph fontWeight={600}>{ctx.label}</Paragraph>;
+};
+
+Categories.Chevron = function Chevron() {
+  return <ChevronRight className="dropdown-icon" fontSize="large" />;
+};

package/src/components-v2/navbar/category-based-menu/category-based-menu.tsx

@@ -1,52 +1,146 @@
 "use client";
 
-import { useState } from "react";
+import React, { createContext, useContext, useState } from "react";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-// GLOBAL CUSTOM COMPONENT
+import ChevronRight from "@mui/icons-material/ChevronRight";
+// GLOBAL COMPONENTS
 import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
-// LOCAL CUSTOM COMPONENTS
-import Categories from "./components/categories";
-import ChildCategories from "./components/child-categories";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+// LOCAL COMPONENTS
+import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 // STYLED COMPONENTS
-import { Wrapper, StyledCard, MenusContainer } from "./styles";
-// DATA TYPES
-import { TransformedNavItem } from "../utils/transform-nav";
+import {
+  Wrapper,
+  StyledCard,
+  MenusContainer,
+  CategoryList,
+  CategoryListItem,
+  SubCategoryList,
+  SubCategoryListItem,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/category-based-menu/styles";
 
-// ===============================================================
-type Props = { menuList: TransformedNavItem[]; title: string };
-// ===============================================================
+type MenuContextValue = {
+  openList: string;
+  setOpenList: (val: string) => void;
+  menuList: TransformedNavItem[];
+};
 
-export default function CategoryBasedMenu({ title, menuList }: Props) {
-  const [openList, setOpenList] = useState(menuList[0]?.title);
+const MenuContext = createContext<MenuContextValue | undefined>(undefined);
 
-  const categories = menuList.reduce<string[]>(
-    (prev, curr) => [...prev, curr.title],
-    [],
-  ); // Designate the data type
-  const subCategories = menuList.find((item) => item.title === openList);
+const useCategoryMenu = () => {
+  const ctx = useContext(MenuContext);
+  if (!ctx)
+    throw new Error("useCategoryMenu must be used inside CategoryBasedMenu");
+  return ctx;
+};
 
+type RootProps = {
+  title: string;
+  menuList: TransformedNavItem[];
+  children: React.ReactNode;
+};
+
+const CategoryBasedMenu = ({ title, menuList, children }: RootProps) => {
+  const [openList, setOpenList] = useState(menuList[0]?.title || "");
+
+  return (
+    <MenuContext.Provider value={{ openList, setOpenList, menuList }}>
+      <Wrapper>
+        <CategoryBasedMenu.Trigger>{title}</CategoryBasedMenu.Trigger>
+        <MenusContainer className="menu-list">
+          <StyledCard>{children}</StyledCard>
+        </MenusContainer>
+      </Wrapper>
+    </MenuContext.Provider>
+  );
+};
+
+CategoryBasedMenu.Trigger = ({ children }: { children: React.ReactNode }) => {
   return (
-    <Wrapper>
-      <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
-        {title}{" "}
-        <KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
-      </FlexRowCenter>
-
-      <MenusContainer className="menu-list">
-        <StyledCard>
-          {/* MAIN CATEGORIES SECTION */}
-          {categories && (
-            <Categories
-              openList={openList}
-              categories={categories}
-              handleOpen={(item) => setOpenList(item)}
-            />
-          )}
-
-          {/* SUB / CHILD CATEGORIES SECTION */}
-          {subCategories && <ChildCategories categories={subCategories} />}
-        </StyledCard>
-      </MenusContainer>
-    </Wrapper>
+    <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+      {children}
+      <KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
+    </FlexRowCenter>
   );
-}
+};
+
+// Main Categories List
+CategoryBasedMenu.MainList = () => {
+  const { openList, setOpenList, menuList } = useCategoryMenu();
+  const { settings } = useSettings();
+
+  return (
+    <CategoryList>
+      {menuList.map((item) => (
+        <CategoryListItem
+          key={item.title}
+          active={openList === item.title ? 1 : 0}
+          onMouseEnter={() => setOpenList(item.title)}
+        >
+          {item.title}
+          <ChevronRight
+            fontSize="small"
+            sx={{
+              transform: `rotate(${settings.direction === "rtl" ? "180deg" : "0"})`,
+            }}
+          />
+        </CategoryListItem>
+      ))}
+    </CategoryList>
+  );
+};
+
+// Subcategories Panel
+CategoryBasedMenu.Section = () => {
+  const { openList, menuList } = useCategoryMenu();
+  const category = menuList.find((c) => c.title === openList);
+
+  if (!category) return null;
+
+  return (
+    <Scrollbar autoHide={false} sx={{ width: "100%" }}>
+      <Box px={6} py={2} height="100%">
+        {category.items.map((item, idx) => (
+          <div key={idx}>
+            <H6 fontWeight={700} my={3}>
+              {item.title}
+            </H6>
+            <SubCategoryList>
+              {item.items.map((sub, subIdx) => (
+                <CategoryBasedMenu.Item item={sub} key={subIdx} />
+              ))}
+            </SubCategoryList>
+          </div>
+        ))}
+      </Box>
+    </Scrollbar>
+  );
+};
+
+// Single Category Item
+CategoryBasedMenu.Item = ({ item }: { item: TransformedNavItem }) => {
+  const { title, href = "/", Icon, img } = item || {};
+
+  return (
+    <Link href={href}>
+      <SubCategoryListItem>
+        {img && (
+          <Avatar
+            alt={title}
+            src={img}
+            sx={{ backgroundColor: "grey.100", borderRadius: 1 }}
+          />
+        )}
+        {Icon && <Icon sx={{ fontSize: 16 }} />}
+        {title}
+      </SubCategoryListItem>
+    </Link>
+  );
+};
+
+export default CategoryBasedMenu;

package/src/components-v2/navbar/category-based-menu/index.ts

@@ -1 +1 @@
-export { default } from "./category-based-menu";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/navbar/category-based-menu/category-based-menu";

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

@@ -1 +1 @@
-export { default as Navbar } from "./navbar";
+export { default as Navbar } from "@evenicanpm/storefront-core/src/components-v2/navbar/navbar";

package/src/components-v2/navbar/mega-menu/index.ts

@@ -1 +1 @@
-export { default } from "./mega-menu";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu/mega-menu";

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

@@ -1,24 +1,31 @@
-import { RefObject } from "react";
+"use client";
+
+import React, { RefObject, createContext, useContext } from "react";
 import Grid from "@mui/material/Grid2";
 import Card from "@mui/material/Card";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-// GLOBAL CUSTOM COMPONENTS
+import List from "@mui/material/List";
+// GLOBAL COMPONENTS
 import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
-// GLOBAL CUSTOM HOOKS
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// HOOKS
 import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
-// LOCAL CUSTOM COMPONENT
-import CategoryList from "./category-list";
-// STYLED COMPONENTS
-import { MenusContainer, Wrapper } from "./styles";
-// DATA TYPES
-import { TransformedNavItem } from "../utils/transform-nav";
+// STYLED
+import {
+  MenusContainer,
+  Wrapper,
+  MenuListItem,
+  StyledNavLink,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu/styles";
 
-// ===============================================================
-interface Props {
-  title: string;
-  menuList: Array<TransformedNavItem[]>;
-}
-// ===============================================================
+type MegaMenuContextType = {
+  isLeftOverflowing: boolean;
+  isRightOverflowing: boolean;
+  elementRef: RefObject<HTMLLIElement>;
+  checkOverflow: () => void;
+};
+const MegaMenuContext = createContext<MegaMenuContextType | null>(null);
+const useMegaMenu = () => useContext(MegaMenuContext)!;
 
 const Grid2Size = (length: number) => {
   if (length === 1) return 12;
@@ -28,44 +35,109 @@ const Grid2Size = (length: number) => {
   return 3;
 };
 
-export default function MegaMenu({ title, menuList }: Props) {
-  // get Grid2 size the basis of menu list
-  const Grid2 = Grid2Size(menuList?.length);
+const MegaMenu = ({
+  title,
+  children,
+}: {
+  title?: string;
+  children: React.ReactNode;
+}) => {
+  const { elementRef, isLeftOverflowing, isRightOverflowing, checkOverflow } =
+    useOverflowDetect();
+
+  return (
+    <MegaMenuContext.Provider
+      value={{
+        elementRef: elementRef as RefObject<HTMLLIElement>,
+        isLeftOverflowing,
+        isRightOverflowing,
+        checkOverflow,
+      }}
+    >
+      <Wrapper onMouseOver={checkOverflow}>
+        {title && (
+          <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+            {title}
+            <KeyboardArrowDown className="icon" />
+          </FlexRowCenter>
+        )}
+        {children}
+      </Wrapper>
+    </MegaMenuContext.Provider>
+  );
+};
+
+MegaMenu.Trigger = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+      {children}
+      <KeyboardArrowDown className="icon" />
+    </FlexRowCenter>
+  );
+};
+
+MegaMenu.Container = ({ children }: { children: React.ReactNode }) => {
+  const { elementRef, isLeftOverflowing, isRightOverflowing } = useMegaMenu();
+  return (
+    <MenusContainer
+      ref={elementRef}
+      className="menu-list"
+      left={isLeftOverflowing}
+      right={isRightOverflowing}
+    >
+      <Card className="card" elevation={3} sx={{ mt: 1.5, overflow: "hidden" }}>
+        <Grid container>{children}</Grid>
+      </Card>
+    </MenusContainer>
+  );
+};
 
+MegaMenu.Column = ({
+  children,
+  count,
+}: {
+  children: React.ReactNode;
+  count: number;
+}) => {
+  const size = Grid2Size(count);
   const STYLE = { py: 2, ":nth-of-type(odd)": { backgroundColor: "grey.100" } };
 
-  const { elementRef, isLeftOverflowing, isRightOverflowing, checkOverflow } =
-    useOverflowDetect();
+  return (
+    <Grid size={size} sx={STYLE}>
+      {children}
+    </Grid>
+  );
+};
 
+MegaMenu.Category = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => {
   return (
-    <Wrapper onMouseOver={checkOverflow}>
-      <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+    <List>
+      <H6 mb={0.5} pl={4}>
         {title}
-        <KeyboardArrowDown className="icon" />
-      </FlexRowCenter>
+      </H6>
+      {children}
+    </List>
+  );
+};
 
-      <MenusContainer
-        ref={elementRef as RefObject<HTMLLIElement>}
-        className="menu-list"
-        left={isLeftOverflowing}
-        right={isRightOverflowing}
-      >
-        <Card
-          className="card"
-          elevation={3}
-          sx={{ mt: 1.5, overflow: "hidden" }}
-        >
-          <Grid container>
-            {menuList?.slice(0, 4).map((category, key) => (
-              <Grid size={Grid2} key={key} sx={STYLE}>
-                {category?.map((item, i) => (
-                  <CategoryList category={item} key={item.title + i} />
-                ))}
-              </Grid>
-            ))}
-          </Grid>
-        </Card>
-      </MenusContainer>
-    </Wrapper>
+MegaMenu.Item = ({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <StyledNavLink href={href}>
+      <MenuListItem>{children}</MenuListItem>
+    </StyledNavLink>
   );
-}
+};
+
+export default MegaMenu;

package/src/components-v2/navbar/mobile-menu/index.ts

@@ -1 +1 @@
-export { default as MobileMenu } from "./mobile-menu";
+export { default as MobileMenu } from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/mobile-menu";

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

@@ -0,0 +1,105 @@
+import { describe, it, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import MobileMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/mobile-menu";
+import { transformCmsNav } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+
+const useContext = vi.fn();
+
+// Mock NavContext
+vi.mock("@evenicanpm/storefront-core/src/providers/nav-provider", () => {
+  return {
+    NavContext: {
+      // We'll replace these in beforeEach per test
+      Provider: ({ value, children }: any) => (
+        <div data-testid="nav-context-provider">{children}</div>
+      ),
+    },
+    useContext: vi.fn(),
+  };
+});
+describe.skip("MobileMenu", () => {
+  const cmsNav = transformCmsNav(mockCmsData as unknown as CmsNavItem[]);
+  const handleClose = vi.fn();
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    useContext.mockReturnValue({
+      isMobileSideNavOpen: true,
+      toggleMobileSideNav: handleClose,
+    });
+  });
+
+  it("should render root menu items", () => {
+    render(
+      <MobileMenu.Drawer>
+        <MobileMenu.List data={cmsNav} />
+      </MobileMenu.Drawer>,
+    );
+
+    expect(screen.getByText("My Page")).toBeInTheDocument();
+  });
+
+  it("should expand nested items when clicked", () => {
+    render(
+      <MobileMenu.Drawer>
+        <MobileMenu.List data={cmsNav} />
+      </MobileMenu.Drawer>,
+    );
+
+    fireEvent.click(screen.getByText("My Page"));
+    expect(screen.getByText("NESTED")).toBeInTheDocument();
+  });
+
+  it("should call onClose when leaf link is clicked", () => {
+    render(
+      <MobileMenu.Drawer>
+        <MobileMenu.List data={cmsNav} />
+      </MobileMenu.Drawer>,
+    );
+
+    const link = screen.getByText("NESTED");
+    expect(link.closest("a")).toHaveAttribute("href", "https://google.com");
+
+    fireEvent.click(link);
+    expect(handleClose).toHaveBeenCalled();
+  });
+});
+
+const mockCmsData = [
+  {
+    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,
+      },
+    ],
+  },
+];