@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,119 +1,141 @@
-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 MegaMenu from "../mega-menu";
+import CategoryBasedMenu from "../category-based-menu";
 import { StyledNavLink, NAV_LINK_STYLES, ChildNavListWrapper } from "../styles";
-// NAV RELATED
 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 "./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
-
-        // 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[]}
-            />
-          );
-        }
+type NavigationContextValue = {
+  list: TransformedNavItem[];
+};
+const NavigationContext = createContext<NavigationContextValue | undefined>(
+  undefined,
+);
 
-        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,95 @@
 "use client";
+
+import React, { createContext, useContext } from "react";
+
 // LOCAL CUSTOM COMPONENTS
 import Categories from "./categories";
 import NavigationList from "./nav-list/index";
+
 // STYLED COMPONENTS
 import { NavBarWrapper, InnerContainer } from "./styles";
-// DATA TYPES
+
+/**
+ * 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/product-cards/{product-card-1 → product-card}/components/quantity-buttons.tsx

@@ -39,7 +39,7 @@ export default function QuantityButtons(props: Props) {
         <Add fontSize="small" />
       </Button>
 
-      {quantity && (
+      {quantity > 0 && (
         <Fragment>
           {isLineUpdating ? (
             <CircularProgress size={"10px"} color={"primary"} />