@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,138 @@
+"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";
+import List from "@mui/material/List";
+// GLOBAL COMPONENTS
+import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// HOOKS
+import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
+// STYLED
+import { MenusContainer, Wrapper, MenuListItem, StyledNavLink } from "./styles";
+
+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;
+  if (length === 2) return 6;
+  if (length === 3) return 4;
+  if (length === 4) return 3;
+  return 3;
+};
+
+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" } };
+
+  return (
+    <Grid size={size} sx={STYLE}>
+      {children}
+    </Grid>
+  );
+};
+
+MegaMenu.Category = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <List>
+      <H6 mb={0.5} pl={4}>
+        {title}
+      </H6>
+      {children}
+    </List>
+  );
+};
+
+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/mega-menu/styles.ts

@@ -0,0 +1,43 @@
+import ListItem from "@mui/material/ListItem";
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+
+// STYLED COMPONENTS
+export const Wrapper = styled("div")(({ theme }) => ({
+  cursor: "pointer",
+  position: "relative",
+  transition: "color 150ms ease-in-out",
+  ".icon": {
+    fontSize: "1.1rem",
+    color: theme.palette.grey[500],
+  },
+  ":hover": {
+    color: theme.palette.primary.main,
+    "& .menu-list": { display: "block" },
+  },
+}));
+
+type Props = { left: boolean; right: boolean };
+
+export const MenusContainer = styled(ListItem, {
+  shouldForwardProp: (prop) => prop !== "left" && prop !== "right",
+})<Props>(({ theme, left, right }) => ({
+  zIndex: 2,
+  top: "100%",
+  minWidth: 1000,
+  display: "none",
+  position: "absolute",
+  transform: "translate(-50%, 0%)",
+  [theme.breakpoints.down(1070)]: { minWidth: 800 },
+  ...(left && { transform: "translate(0%, 0%)" }),
+  ...(right && { transform: "translate(-80%, 0%)" }),
+  ...(left && right && { transform: "translate(-25%, 0%)" }),
+}));
+
+export const MenuListItem = styled(ListItem)(({ theme }) => ({
+  padding: ".5rem 2rem",
+  ":hover": { backgroundColor: theme.palette.action.hover },
+}));
+
+export const StyledNavLink = styled(NavLink)({ transition: "all 0.3s" });

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

@@ -0,0 +1 @@
+export { default as MobileMenu } from "./mobile-menu";

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

@@ -0,0 +1,141 @@
+"use client";
+
+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/Divider";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import {
+  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 };
+
+const MobileMenu = ({ children }: RootProps) => {
+  return <>{children}</>;
+};
+
+MobileMenu.Trigger = () => {
+  const { toggleMobileSideNav } = useContext(NavContext);
+  return (
+    <IconButton
+      onClick={toggleMobileSideNav}
+      sx={{ flexShrink: 0, color: "grey.600" }}
+    >
+      <Menu />
+    </IconButton>
+  );
+};
+
+MobileMenu.Drawer = ({ children }: { children: React.ReactNode }) => {
+  const { isMobileSideNavOpen, toggleMobileSideNav } = useContext(NavContext);
+
+  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 }}
+            >
+              <Clear />
+            </IconButton>
+
+            {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;

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>
+  );
+}