@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+// GLOBAL CUSTOM COMPONENT
+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";
+// STYLED COMPONENTS
+import { Wrapper, StyledCard, MenusContainer } from "./styles";
+// DATA TYPES
+import { TransformedNavItem } from "../utils/transform-nav";
+
+// ===============================================================
+type Props = { menuList: TransformedNavItem[]; title: string };
+// ===============================================================
+
+export default function CategoryBasedMenu({ title, menuList }: Props) {
+  const [openList, setOpenList] = useState(menuList[0]?.title);
+
+  const categories = menuList.reduce<string[]>(
+    (prev, curr) => [...prev, curr.title],
+    [],
+  ); // Designate the data type
+  const subCategories = menuList.find((item) => item.title === openList);
+
+  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>
+  );
+}

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

@@ -0,0 +1,44 @@
+import ChevronRight from "@mui/icons-material/ChevronRight";
+// GLOBAL CUSTOM HOOK
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+// STYLED COMPONENTS
+import { CategoryList, CategoryListItem } from "../styles";
+
+// ==============================================================
+interface Props {
+  categories: string[];
+  openList: string;
+  handleOpen: (item: string) => void;
+}
+// ==============================================================
+
+export default function Categories({
+  categories,
+  openList,
+  handleOpen,
+}: Props) {
+  const { settings } = useSettings();
+
+  return (
+    <CategoryList>
+      {categories.map((item) => (
+        <CategoryListItem
+          key={item}
+          active={openList === item ? 1 : 0}
+          onMouseEnter={() => handleOpen(item)}
+        >
+          {item}
+
+          <ChevronRight
+            fontSize="small"
+            sx={{
+              transform: `rotate(${
+                settings.direction === "rtl" ? "180deg" : "0"
+              })`,
+            }}
+          />
+        </CategoryListItem>
+      ))}
+    </CategoryList>
+  );
+}

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

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import Avatar from "@mui/material/Avatar";
+// STYLED COMPONENT
+import { SubCategoryListItem } from "../styles";
+// DATA TYPES
+import { TransformedNavItem } from "../../utils/transform-nav";
+
+// ==============================================================
+type Props = { item: TransformedNavItem };
+// ==============================================================
+
+export default function CategoryItem({ item }: Props) {
+  const { title, href = "/", Icon, img } = item || {};
+
+  return (
+    <Link href={href}>
+      <SubCategoryListItem>
+        {img ? (
+          <Avatar
+            alt={title}
+            src={img}
+            sx={{ backgroundColor: "grey.100", borderRadius: 1 }}
+          />
+        ) : null}
+
+        {Icon ? <Icon sx={{ fontSize: 16 }} /> : null}
+        {title}
+      </SubCategoryListItem>
+    </Link>
+  );
+}

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

@@ -0,0 +1,38 @@
+import Box from "@mui/material/Box";
+// LOCAL CUSTOM COMPONENTS
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+// LOCAL CUSTOM COMPONENT
+import CategoryItem from "./category-item";
+// STYLED COMPONENT
+import { SubCategoryList } from "../styles";
+// DATA TYPES
+import { TransformedNavItem } from "../../utils/transform-nav";
+
+// ==============================================================
+type Props = { categories: TransformedNavItem };
+// ==============================================================
+
+export default function ChildCategories({ categories }: Props) {
+  return (
+    <Scrollbar autoHide={false} sx={{ width: "100%" }}>
+      <Box px={6} py={2} height="100%">
+        {categories?.items.map((item, key) => (
+          <div key={key}>
+            {/* NAV / CATEGORY TITLE */}
+            <H6 fontWeight={700} my={3}>
+              {item?.title}
+            </H6>
+
+            {/* NAV LIST ITEM / CATEGORY LIST ITEM */}
+            <SubCategoryList>
+              {item?.items.map((sub, key) => (
+                <CategoryItem item={sub} key={key} />
+              ))}
+            </SubCategoryList>
+          </div>
+        ))}
+      </Box>
+    </Scrollbar>
+  );
+}

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

@@ -0,0 +1 @@
+export { default } from "./category-based-menu";

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

@@ -0,0 +1,81 @@
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import styled from "@mui/material/styles/styled";
+// LOCAL CUSTOM COMPONENT
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import getPaletteColor from "@/lib/get-palette-color";
+
+const Wrapper = styled("div")(({ theme }) => ({
+  cursor: "pointer",
+  transition: "color 150ms ease-in-out",
+  ":hover": {
+    color: theme.palette.primary.main,
+    "& .menu-list": { display: "block" },
+  },
+}));
+
+const MenusContainer = styled("div")({
+  left: 0,
+  zIndex: 2,
+  top: "68%",
+  width: "100%",
+  height: "100%",
+  display: "none",
+  minHeight: "500px",
+  maxHeight: "500px",
+  position: "absolute",
+});
+
+const StyledCard = styled(BazaarCard)({
+  marginTop: 12,
+  height: "100%",
+  display: "flex",
+  borderRadius: 0,
+});
+
+const CategoryList = styled(List)(({ theme }) => ({
+  padding: 0,
+  width: 300,
+  height: "100%",
+  borderRight: `1px solid ${theme.palette.grey[200]}`,
+}));
+
+const CategoryListItem = styled(ListItem, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  padding: "1rem 1.5rem",
+  transition: "all 0.3s",
+  justifyContent: "space-between",
+  ...(active && {
+    color: theme.palette.primary.main,
+    backgroundColor: getPaletteColor(theme, "primary", 100),
+  }),
+}));
+
+const SubCategoryList = styled(List)(({ theme }) => ({
+  padding: 0,
+  display: "grid",
+  gridTemplateColumns: "repeat(6, 1fr)",
+  [theme.breakpoints.down("xl")]: { gridTemplateColumns: "repeat(5, 1fr)" },
+  [theme.breakpoints.down("lg")]: { gridTemplateColumns: "repeat(4, 1fr)" },
+}));
+
+const SubCategoryListItem = styled(ListItem)(({ theme }) => ({
+  gap: 12,
+  fontSize: 13,
+  padding: "0",
+  alignItems: "center",
+  marginBottom: "1.5rem",
+  transition: "all 0.3s",
+  ":hover": { color: theme.palette.primary.main },
+}));
+
+export {
+  Wrapper,
+  StyledCard,
+  CategoryList,
+  MenusContainer,
+  SubCategoryList,
+  CategoryListItem,
+  SubCategoryListItem,
+};

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

@@ -0,0 +1,18 @@
+import { SvgIconComponent } from "@mui/icons-material";
+
+export type NavLink = {
+  url: string;
+  img?: string;
+  title: string;
+  Icon?: SvgIconComponent;
+};
+
+export type MenuItem = {
+  title: string;
+  child: NavLink[];
+};
+
+export type MenuList = {
+  title: string;
+  child?: MenuItem[];
+};

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

@@ -0,0 +1 @@
+export { default as Navbar } from "./navbar";

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

@@ -0,0 +1,29 @@
+import List from "@mui/material/List";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENTS
+import { MenuListItem, StyledNavLink } from "./styles";
+// Types
+import { TransformedNavItem } from "../utils/transform-nav";
+
+// ==============================================================
+type Props = { category: TransformedNavItem };
+// ==============================================================
+
+export default function CategoryList({ category }: Props) {
+  const { title, items } = category || {};
+
+  return (
+    <List>
+      <H6 mb={0.5} pl={4}>
+        {title}
+      </H6>
+
+      {items.map((sub: TransformedNavItem, i) => (
+        <StyledNavLink href={sub.href} key={sub.title + i}>
+          <MenuListItem>{sub.title}</MenuListItem>
+        </StyledNavLink>
+      ))}
+    </List>
+  );
+}

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

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

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

@@ -0,0 +1,71 @@
+import { RefObject } 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 FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
+// GLOBAL CUSTOM 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";
+
+// ===============================================================
+interface Props {
+  title: string;
+  menuList: Array<TransformedNavItem[]>;
+}
+// ===============================================================
+
+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;
+};
+
+export default function MegaMenu({ title, menuList }: Props) {
+  // get Grid2 size the basis of menu list
+  const Grid2 = Grid2Size(menuList?.length);
+
+  const STYLE = { py: 2, ":nth-of-type(odd)": { backgroundColor: "grey.100" } };
+
+  const { elementRef, isLeftOverflowing, isRightOverflowing, checkOverflow } =
+    useOverflowDetect();
+
+  return (
+    <Wrapper onMouseOver={checkOverflow}>
+      <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+        {title}
+        <KeyboardArrowDown className="icon" />
+      </FlexRowCenter>
+
+      <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>
+  );
+}

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.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Fragment, useContext } 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 {
+  transformCategoryNav,
+  transformCmsNav,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+
+export default function MobileMenu() {
+  const { categories, cmsNav, isMobileSideNavOpen, toggleMobileSideNav } =
+    useContext(NavContext);
+  const categoriesNavItems = transformCategoryNav(categories ?? []);
+  const cmsNavItems = transformCmsNav(cmsNav ?? []);
+
+  return (
+    <Fragment>
+      <IconButton
+        onClick={toggleMobileSideNav}
+        sx={{ flexShrink: 0, color: "grey.600" }}
+      >
+        <Menu />
+      </IconButton>
+
+      <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>
+
+              {/* Multi level menu render */}
+              {renderLevels(categoriesNavItems, toggleMobileSideNav)}
+              <Divider sx={{ my: 2 }} />
+              {renderLevels(cmsNavItems, toggleMobileSideNav)}
+            </Box>
+          </Scrollbar>
+        </Box>
+      </Drawer>
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { describe, it, vi } from "vitest";
+import { renderLevels } from "./render-levels";
+import { render, screen } from "@testing-library/react";
+import { transformCmsNav } from "../utils/transform-nav";
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+
+describe("Render Nested Mobile Nav", () => {
+  const cmsNav = transformCmsNav(mockCmsData as unknown as CmsNavItem[]);
+  const handleClose = vi.fn();
+  it("should render the menu ", () => {
+    render(renderLevels(cmsNav, handleClose));
+    expect(screen.getByText("NESTED")).toBeInTheDocument();
+  });
+
+  it("should expand dropdown when clicked", () => {
+    render(renderLevels(cmsNav, handleClose));
+    screen.getByText("My Page").click();
+    expect(screen.getByText("NESTED")).toBeInTheDocument();
+  });
+
+  it("should navigate to page when link is clicked", () => {
+    render(renderLevels(cmsNav, handleClose));
+
+    const link = screen.getByText("NESTED");
+    expect(link).toHaveAttribute("href", "https://google.com");
+
+    link.click();
+    expect(handleClose).toHaveBeenCalled();
+
+    //Can't test actual navigation unless we use router.push() instead of Link and then mock it
+    // Should be part of E2E tests
+  });
+});
+
+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/render-levels.tsx

@@ -0,0 +1,62 @@
+import Box from "@mui/material/Box";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import { MdExpandMore as ExpandMore } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+
+import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+
+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" },
+  },
+};
+
+export const renderLevels = (
+  data: TransformedNavItem[],
+  handleClose: () => void,
+) => {
+  return data.map((nav: TransformedNavItem, index: number) => {
+    const { href, title, items } = nav;
+    if (items && items.length) {
+      return (
+        <Accordion
+          square
+          key={index}
+          elevation={0}
+          disableGutters
+          sx={ACCORDION_STYLES}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMore style={{ fontSize: "1.5rem" }} />}
+            sx={ACCORDION_SUMMARY_STYLES}
+          >
+            <H6>{title}</H6>
+          </AccordionSummary>
+
+          <Box mx={2}>{renderLevels(items, handleClose)}</Box>
+        </Accordion>
+      );
+    }
+
+    return (
+      <Box key={index} py={1}>
+        <NavLink href={href} onClick={handleClose}>
+          {title}
+        </NavLink>
+      </Box>
+    );
+  });
+};