@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,24 +1,26 @@
-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 "./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 +30,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/mobile-menu.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import MobileMenu from "./mobile-menu";
+import { transformCmsNav } from "../utils/transform-nav";
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+
+// 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(),
+  };
+});
+
+import * as NavProvider from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import { useContext } from "react";
+
+describe("MobileMenu", () => {
+  const cmsNav = transformCmsNav(mockCmsData as unknown as CmsNavItem[]);
+  const handleClose = vi.fn();
+  vi.mock("react", () => ({
+    ...jest.requireActual("react"),
+    useContext: vi.fn(),
+  }));
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    (useContext as vi.Mock).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,
+      },
+    ],
+  },
+];

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

@@ -1,70 +1,141 @@
 "use client";
 
-import { Fragment, useContext } from "react";
+import { useContext, Fragment } from "react";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
-import { Divider } from "@mui/material";
-// ICON COMPONENTS
-import { MdMenu as Menu } from "react-icons/md";
-import { MdClear as Clear } from "react-icons/md";
-// GLOBAL CUSTOM COMPONENT
-import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
-// RENDER MENU LEVEL FUNCTION
-import { renderLevels } from "./render-levels";
-// Nav Related
-import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import Divider from "@mui/material/Divider";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
 import {
-  transformCategoryNav,
-  transformCmsNav,
-} from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+  MdMenu as Menu,
+  MdClear as Clear,
+  MdExpandMore as ExpandMore,
+} from "react-icons/md";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
+import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+
+type RootProps = { children: React.ReactNode };
 
-export default function MobileMenu() {
-  const { categories, cmsNav, isMobileSideNavOpen, toggleMobileSideNav } =
-    useContext(NavContext);
-  const categoriesNavItems = transformCategoryNav(categories ?? []);
-  const cmsNavItems = transformCmsNav(cmsNav ?? []);
+const MobileMenu = ({ children }: RootProps) => {
+  return <>{children}</>;
+};
 
+MobileMenu.Trigger = () => {
+  const { toggleMobileSideNav } = useContext(NavContext);
   return (
-    <Fragment>
-      <IconButton
-        onClick={toggleMobileSideNav}
-        sx={{ flexShrink: 0, color: "grey.600" }}
-      >
-        <Menu />
-      </IconButton>
+    <IconButton
+      onClick={toggleMobileSideNav}
+      sx={{ flexShrink: 0, color: "grey.600" }}
+    >
+      <Menu />
+    </IconButton>
+  );
+};
+
+MobileMenu.Drawer = ({ children }: { children: React.ReactNode }) => {
+  const { isMobileSideNavOpen, toggleMobileSideNav } = useContext(NavContext);
 
-      <Drawer
-        anchor="left"
-        open={isMobileSideNavOpen}
-        onClose={toggleMobileSideNav}
-        sx={{ zIndex: 15001 }}
-      >
-        <Box width="100vw" height="100%" position="relative">
-          <Scrollbar autoHide={false} sx={{ height: "100vh" }}>
-            <Box
-              px={5}
-              py={8}
-              maxWidth={500}
-              margin="auto"
-              position="relative"
-              height="100%"
+  return (
+    <Drawer
+      anchor="left"
+      open={isMobileSideNavOpen}
+      onClose={toggleMobileSideNav}
+      sx={{ zIndex: 15001 }}
+    >
+      <Box width="100vw" height="100%" position="relative">
+        <Scrollbar autoHide={false} sx={{ height: "100vh" }}>
+          <Box
+            px={5}
+            py={8}
+            maxWidth={500}
+            margin="auto"
+            position="relative"
+            height="100%"
+          >
+            <IconButton
+              onClick={toggleMobileSideNav}
+              sx={{ position: "absolute", right: 30, top: 15 }}
             >
-              <IconButton
-                onClick={toggleMobileSideNav}
-                sx={{ position: "absolute", right: 30, top: 15 }}
-              >
-                <Clear />
-              </IconButton>
+              <Clear />
+            </IconButton>
 
-              {/* Multi level menu render */}
-              {renderLevels(categoriesNavItems, toggleMobileSideNav)}
-              <Divider sx={{ my: 2 }} />
-              {renderLevels(cmsNavItems, toggleMobileSideNav)}
-            </Box>
-          </Scrollbar>
-        </Box>
-      </Drawer>
+            {children}
+          </Box>
+        </Scrollbar>
+      </Box>
+    </Drawer>
+  );
+};
+
+MobileMenu.List = ({ data }: { data: TransformedNavItem[] }) => {
+  const { toggleMobileSideNav } = useContext(NavContext);
+  return (
+    <Fragment>
+      {data.map((item, idx) => (
+        <MobileMenu.Item key={idx} item={item} onClose={toggleMobileSideNav} />
+      ))}
     </Fragment>
   );
-}
+};
+
+const ACCORDION_STYLES = {
+  "&:not(:last-child)": { borderBottom: 0 },
+  "&:before": { display: "none" },
+};
+const ACCORDION_SUMMARY_STYLES = {
+  padding: 0,
+  minHeight: 48,
+  boxShadow: "none",
+  "& .Mui-expanded": { color: "primary.main", margin: 0 },
+  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+    margin: 0,
+    "& .MuiSvgIcon-root": { color: "primary.main" },
+  },
+};
+
+// Single Item (link or accordion)
+MobileMenu.Item = ({
+  item,
+  onClose,
+}: {
+  item: TransformedNavItem;
+  onClose: () => void;
+}) => {
+  const { href, title, items } = item;
+
+  if (items && items.length) {
+    return (
+      <Accordion square elevation={0} disableGutters sx={ACCORDION_STYLES}>
+        <AccordionSummary
+          expandIcon={<ExpandMore style={{ fontSize: "1.5rem" }} />}
+          sx={ACCORDION_SUMMARY_STYLES}
+        >
+          <H6>{title}</H6>
+        </AccordionSummary>
+        <Box mx={2}>
+          {items.map((sub, idx) => (
+            <MobileMenu.Item key={idx} item={sub} onClose={onClose} />
+          ))}
+        </Box>
+      </Accordion>
+    );
+  }
+
+  return (
+    <Box py={1}>
+      <NavLink href={href} onClick={onClose}>
+        {title}
+      </NavLink>
+    </Box>
+  );
+};
+
+MobileMenu.Divider = () => {
+  return <Divider sx={{ my: 2 }} />;
+};
+
+export default MobileMenu;