@evenicanpm/storefront-core 1.0.3 → 1.0.5

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

@@ -1,70 +1,141 @@
 "use client";
 
-import { Fragment, useContext } from "react";
+import { 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 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;

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

@@ -1,8 +1,8 @@
-/*import React from "react";
+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";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import NavCms from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/index";
 
 describe("NavCms", () => {
   it("Renders the page links and dropdown menu", () => {
@@ -18,8 +18,14 @@ describe("NavCms", () => {
   });
 });
 
+// When just using string as value ts is not inferring it as union type
+// so creating this type to manually cast it
+type navItemType = "INTERNAL" | "EXTERNAL" | "WRAPPER";
+
 const mockData = {
   categories: [],
+  isMobileSideNavOpen: false,
+  toggleMobileSideNav: () => null,
   cmsNav: [
     {
       id: 1,
@@ -27,9 +33,9 @@ const mockData = {
       menuAttached: false,
       order: 1,
       path: "https://youtube.com",
-      type: "EXTERNAL",
+      type: "EXTERNAL" as navItemType,
       uiRouterKey: "about-us",
-      slug: {},
+      slug: "",
       external: true,
     },
     {
@@ -38,7 +44,7 @@ const mockData = {
       menuAttached: true,
       order: 2,
       path: "/pages",
-      type: "WRAPPER",
+      type: "WRAPPER" as navItemType,
       uiRouterKey: "pages",
       slug: "pages-1",
       external: false,
@@ -49,7 +55,7 @@ const mockData = {
           menuAttached: false,
           order: 1,
           path: "/pages/my-page",
-          type: "INTERNAL",
+          type: "INTERNAL" as navItemType,
           uiRouterKey: "my-page",
           slug: "pages-my-page",
           external: false,
@@ -71,9 +77,9 @@ const mockData = {
               menuAttached: false,
               order: 1,
               path: "https://google.com",
-              type: "EXTERNAL",
+              type: "EXTERNAL" as navItemType,
               uiRouterKey: "nested",
-              slug: {},
+              slug: "",
               external: true,
             },
           ],
@@ -81,4 +87,4 @@ const mockData = {
       ],
     },
   ],
-};*/
+};

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

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

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

@@ -13,7 +13,10 @@ import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
 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 {
+  ParentNav,
+  ParentNavItem,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
 
 import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 

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

@@ -1,119 +1,145 @@
-import { useContext } from "react";
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
+// import { useContext as useReactContext } 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 { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
 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 MegaMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu";
+import CategoryBasedMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/category-based-menu";
+import {
+  StyledNavLink,
+  NAV_LINK_STYLES,
+  ChildNavListWrapper,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import {
   transformCmsNav,
   TransformedNavItem,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import NavItemChild from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/nav-item-child";
 
-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
+type NavigationContextValue = {
+  list: TransformedNavItem[];
+};
+const NavigationContext = createContext<NavigationContextValue | undefined>(
+  undefined,
+);
 
-        // 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);
+export default function Navigation({ children }: { children?: ReactNode }) {
+  const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
+  return (
+    <NavigationContext.Provider value={{ list: cmsList }}>
+      <FlexBox gap={4}>{children ?? <Navigation.List />}</FlexBox>
+    </NavigationContext.Provider>
+  );
+}
 
-        if (href && !hasChildren) {
-          return (
-            <StyledNavLink href={href} key={title}>
-              {title}
-            </StyledNavLink>
-          );
-        }
+Navigation.List = function List() {
+  const ctx = useContext(NavigationContext);
+  if (!ctx) return null;
+  return (
+    <>
+      {ctx.list.map((nav) => (
+        <Navigation.Item key={nav.title} nav={nav} isRoot />
+      ))}
+    </>
+  );
+};
 
-        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>
+Navigation.Item = function Item({
+  nav,
+  isRoot = false,
+}: {
+  nav: TransformedNavItem;
+  isRoot?: boolean;
+}) {
+  const { href, title, items, menuType } = nav;
+  const hasChildren = !!(items && items.length);
 
-              <ChildNavListWrapper className="child-nav-item">
-                <BazaarCard
-                  elevation={3}
-                  sx={{ mt: 2.5, py: 1, minWidth: 100 }}
+  if (isRoot) {
+    if (menuType === "mega-menu") {
+      return (
+        <MegaMenu title={title}>
+          <MegaMenu.Container>
+            {nav.items
+              .map((i) => [i])
+              .map((column, i) => (
+                <MegaMenu.Column
+                  key={i}
+                  count={nav.items.map((i) => [i]).length}
                 >
-                  {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>
-          );
-        }
-      }
-    });
-  };
+                  {column.map((cat) => (
+                    <MegaMenu.Category key={cat.title} title={cat.title}>
+                      {cat.items.map((sub) => (
+                        <MegaMenu.Item key={sub.title} href={sub.href}>
+                          {sub.title}
+                        </MegaMenu.Item>
+                      ))}
+                    </MegaMenu.Category>
+                  ))}
+                </MegaMenu.Column>
+              ))}
+          </MegaMenu.Container>
+        </MegaMenu>
+      );
+    }
+    if (menuType === "full-screen-mega-menu") {
+      return (
+        <CategoryBasedMenu key={title} title={title} menuList={nav.items}>
+          <CategoryBasedMenu.MainList />
+          <CategoryBasedMenu.Section />
+        </CategoryBasedMenu>
+      );
+    }
+    if (href && !hasChildren) {
+      return <StyledNavLink href={href}>{title}</StyledNavLink>;
+    }
+    if (hasChildren) {
+      return (
+        <FlexBox
+          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 }}>
+              {items.map((child) => (
+                <Navigation.Item key={child.title} nav={child} />
+              ))}
+            </BazaarCard>
+          </ChildNavListWrapper>
+        </FlexBox>
+      );
+    }
+  } else {
+    if (href && !hasChildren) {
+      return (
+        <NavLink href={href}>
+          <MenuItem>{title}</MenuItem>
+        </NavLink>
+      );
+    }
+    if (hasChildren) {
+      return (
+        <Navigation.Child nav={nav}>
+          {items.map((child) => (
+            <Navigation.Item key={child.title} nav={child} />
+          ))}
+        </Navigation.Child>
+      );
+    }
+  }
+  return null;
+};
 
-  const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
-
-  return <FlexBox gap={4}>{renderNestedNav(cmsList, true)}</FlexBox>;
-}
+Navigation.Child = NavItemChild;

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

@@ -1,43 +1,98 @@
 "use client";
+
+import React, { createContext, useContext } from "react";
+
 // LOCAL CUSTOM COMPONENTS
-import Categories from "./categories";
-import NavigationList from "./nav-list/index";
+import Categories from "@evenicanpm/storefront-core/src/components-v2/navbar/categories";
+import NavigationList from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/index";
+
 // STYLED COMPONENTS
-import { NavBarWrapper, InnerContainer } from "./styles";
-// DATA TYPES
+import {
+  NavBarWrapper,
+  InnerContainer,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
+
+/**
+ * Usage Examples:
+ * 
+ * Default Behavior
+<Navbar />
+
+*** Custom Layout (reorder/override)
+<Navbar>
+  <Navbar.Content>
+    <Navbar.Navigation />
+    <Navbar.Categories />
+  </Navbar.Content>
+</Navbar>
+
+*** Custom Categories / Navigation
+<Navbar>
+  <Navbar.Content>
+    <CustomCategories />
+    <CustomNavigation />
+  </Navbar.Content>
+</Navbar>
+ */
 
 // ==========================================================
 interface Props {
   border?: number;
   elevation?: number;
   hideCategories?: boolean;
+  children?: React.ReactNode;
+}
+
+interface NavbarContextType {
+  hideCategories: boolean;
 }
 // ==========================================================
 
+const NavbarContext = createContext<NavbarContextType>({
+  hideCategories: false,
+});
+
 export default function Navbar({
   border = 0,
   elevation = 2,
   hideCategories = false,
+  children,
 }: 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>
+    <NavbarContext.Provider value={{ hideCategories }}>
+      <NavBarWrapper hoverEffect={false} elevation={elevation} border={border}>
+        {children ?? (
+          <Navbar.Content>
+            <Navbar.Categories />
+            <Navbar.Navigation />
+          </Navbar.Content>
+        )}
+      </NavBarWrapper>
+    </NavbarContext.Provider>
   );
 }
+
+Navbar.Content = function NavbarContent({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { hideCategories } = useContext(NavbarContext);
+  return (
+    <InnerContainer
+      sx={hideCategories ? { justifyContent: "center" } : undefined}
+    >
+      {children}
+    </InnerContainer>
+  );
+};
+
+Navbar.Categories = function NavbarCategories() {
+  const { hideCategories } = useContext(NavbarContext);
+  if (hideCategories) return null;
+  return <Categories />;
+};
+
+Navbar.Navigation = function NavbarNavigation() {
+  return <NavigationList />;
+};

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

@@ -1,5 +1,8 @@
 import { describe, it, expect } from "vitest";
-import { transformCategoryNav, transformCmsNav } from "./transform-nav";
+import {
+  transformCategoryNav,
+  transformCmsNav,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 import { CmsNavItem } from "@/cms/interfaces/navigation";
 import { CategoryHierarchy } from "@/lib/category-helpers";