@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/mini-cart/mini-cart.tsx

@@ -1,40 +1,60 @@
 "use client";
 
+import React, { createContext, useContext } from "react";
 import { useRouter } from "next/navigation";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 
-// LOCAL CUSTOM COMPONENTS
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
 import TopHeader from "./components/top-header";
 import MiniCartItem from "./components/cart-item";
-import EmptyCartView from "./components/empty-view";
+import EmptyCart from "./components/empty-view";
 import BottomActions from "./components/bottom-actions";
-// GLOBAL CUSTOM COMPONENT
-import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
-// CUSTOM UTILS LIBRARY FUNCTION
-// CUSTOM DATA MODEL
+
 import { Cart, CartLine } from "@/schemas/cart.schema";
 import { useFormatter } from "next-intl";
 import useUpdateCartLines from "@/services/cart/mutations/update-cart-lines";
 import useDeleteCartLine from "@/services/cart/mutations/delete-cart-line";
 
-// =========================================================
+interface MiniCartContextValue {
+  cart: Cart;
+  closeDrawer: () => void;
+  currency: (value: number) => string;
+  handleCartAmountChange: (cartLine: CartLine) => void;
+  shouldShowLoadingSpinner: (lineId: string) => boolean;
+  handleNavigate: (path: string) => () => void;
+}
+
+const MiniCartContext = createContext<MiniCartContextValue | null>(null);
+
+const useMiniCartContext = () => {
+  const ctx = useContext(MiniCartContext);
+  if (!ctx) {
+    throw new Error(
+      "MiniCart compound components must be used inside <MiniCart>",
+    );
+  }
+  return ctx;
+};
+
 export interface MiniCartProps {
   cart: Cart;
   closeDrawer: () => void;
+  children: React.ReactNode;
 }
-// =========================================================
 
-export default function MiniCart({ cart, closeDrawer }: MiniCartProps) {
+const MiniCart = ({ cart, closeDrawer, children }: MiniCartProps) => {
   const { push } = useRouter();
   const { number } = useFormatter();
   const currency = (value: number) =>
     number(value, { style: "currency", currency: "USD" });
+
   const {
     mutate: updateLine,
     isPending: isUpdatePending,
     variables: updateVariables,
   } = useUpdateCartLines();
+
   const {
     mutate: deleteLine,
     isPending: isDeletePending,
@@ -63,45 +83,93 @@ export default function MiniCart({ cart, closeDrawer }: MiniCartProps) {
   };
 
   const handleNavigate = (path: string) => () => {
-    // toggleSidenav();
     push(path);
   };
 
   return (
-    <Box width="100%" minWidth={380}>
-      {/* HEADING SECTION */}
-      <TopHeader toggle={closeDrawer} total={cart?.CartLines.length || 0} />
-
-      <Divider />
-
-      <Box
-        height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}
-      >
-        {/* CART ITEM LIST */}
-        {cart.CartLines.length > 0 ? (
-          <Scrollbar>
-            {cart?.CartLines?.map((item) => (
-              <MiniCartItem
-                item={item}
-                key={item.LineId}
-                handleCartAmountChange={handleCartAmountChange}
-                isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
-                closeDrawer={closeDrawer}
-              />
-            ))}
-          </Scrollbar>
-        ) : (
-          <EmptyCartView />
-        )}
+    <MiniCartContext.Provider
+      value={{
+        cart,
+        closeDrawer,
+        currency,
+        handleCartAmountChange,
+        shouldShowLoadingSpinner,
+        handleNavigate,
+      }}
+    >
+      <Box width="100%" minWidth={380}>
+        {children}
       </Box>
+    </MiniCartContext.Provider>
+  );
+};
 
-      {/* CART BOTTOM ACTION BUTTONS */}
-      {cart?.CartLines.length > 0 ? (
-        <BottomActions
-          total={currency(cart?.TotalAmount || 0)}
-          handleNavigate={handleNavigate}
-        />
-      ) : null}
+/* ---------- Subcomponents ---------- */
+
+MiniCart.Header = () => {
+  const { cart, closeDrawer } = useMiniCartContext();
+  return (
+    <TopHeader toggle={closeDrawer} total={cart?.CartLines.length || 0}>
+      <TopHeader.Heading />
+      <TopHeader.CloseButton />
+    </TopHeader>
+  );
+};
+
+MiniCart.Divider = () => {
+  return <Divider />;
+};
+
+MiniCart.Items = () => {
+  const {
+    cart,
+    handleCartAmountChange,
+    shouldShowLoadingSpinner,
+    closeDrawer,
+  } = useMiniCartContext();
+
+  return (
+    <Box height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}>
+      {cart.CartLines.length > 0 ? (
+        <Scrollbar>
+          {cart?.CartLines?.map((item) => (
+            <MiniCartItem
+              item={item}
+              key={item.LineId}
+              handleCartAmountChange={handleCartAmountChange}
+              isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
+              closeDrawer={closeDrawer}
+            >
+              <MiniCartItem.QuantityControls />
+              <MiniCartItem.ProductImage />
+              <MiniCartItem.ProductDetails />
+              <MiniCartItem.RemoveButton />
+            </MiniCartItem>
+          ))}
+        </Scrollbar>
+      ) : (
+        <EmptyCart>
+          <EmptyCart.Icon />
+          <EmptyCart.Message />
+        </EmptyCart>
+      )}
     </Box>
   );
-}
+};
+
+MiniCart.Actions = () => {
+  const { cart, currency, handleNavigate } = useMiniCartContext();
+  return cart?.CartLines.length > 0 ? (
+    <BottomActions
+      total={currency(cart?.TotalAmount || 0)}
+      handleNavigate={handleNavigate}
+    >
+      <BottomActions.ViewCartButton />
+      {/* <BottomActions.CustomButton path="/custom" variant="text">
+        custom button name
+      </BottomActions.CustomButton> */}
+    </BottomActions>
+  ) : null;
+};
+
+export default MiniCart;

package/src/components-v2/mobile-navigation/mobile-navigation-bar.tsx

@@ -1,73 +1,118 @@
 "use client";
 
-import { Fragment, useContext } from "react";
+import { Fragment, createContext, useContext } from "react";
 import Box from "@mui/material/Box";
 import Badge from "@mui/material/Badge";
 import { Theme } from "@mui/material/styles";
+import { SvgIconComponent } from "@mui/icons-material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslations } from "next-intl";
-// CUSTOM ICON COMPONENTS
+// STYLED COMPONENTS
+import { iconStyle, StyledBox, StyledNavLink, Wrapper } from "./styles/index";
+// ICON COMPONENTS
 import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
 import User2 from "@evenicanpm/storefront-core/src/components-v2/icons/user2";
 import CategoryOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/category-outline";
 import ShoppingBagOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/shopping-bag-outlined";
-// STYLED COMPONENTS
-import { iconStyle, StyledBox, StyledNavLink, Wrapper } from "./styles/index";
+// API and Context
 import getCart from "@/services/cart/queries/get-cart";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 
-const MENU_LIST = [
-  { title: "home", Icon: Home, href: "/" },
-  { title: "category", Icon: CategoryOutlined },
-  { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
-  { title: "account", Icon: User2, href: "/account/profile" },
-];
+/**
+Usage Examples:
+
+*** Default Menu:
+<MobileNavigationBar />
+
+*** Override Menu List:
+<MobileNavigationBar
+  menuList={[
+    { title: "home", Icon: Home, href: "/" },
+    { title: "custom", Icon: SomeOtherIcon, href: "/custom" },
+  ]}
+/>
 
-export default function MobileNavigationBar2() {
+*** Custom Menu Content (Full Control):
+<MobileNavigationBar>
+  <MobileNavigationBar.MenuItem title="home" Icon={Home} href="/" />
+  <MobileNavigationBar.MenuItem title="custom" Icon={SomeOtherIcon} href="/custom" />
+</MobileNavigationBar>
+ */
+
+type MenuItemProps = {
+  title: string;
+  Icon: SvgIconComponent;
+  href?: string;
+};
+
+type MobileNavigationBarProps = {
+  children?: React.ReactNode;
+  menuList?: MenuItemProps[];
+};
+
+const MobileNavContext = createContext<{ menuList: MenuItemProps[] }>({
+  menuList: [],
+});
+
+export default function MobileNavigationBar({
+  children,
+  menuList,
+}: MobileNavigationBarProps) {
   const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
 
-  const t = useTranslations("Navigation.Mobile");
+  const defaultMenuList: MenuItemProps[] = [
+    { title: "home", Icon: Home, href: "/" },
+    { title: "category", Icon: CategoryOutlined },
+    { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
+    { title: "account", Icon: User2, href: "/account/profile" },
+  ];
 
-  const { toggleMobileSideNav } = useContext(NavContext);
+  const listToRender = menuList || defaultMenuList;
 
-  const { data: cart } = getCart.useData();
+  if (!DOWN_900) return null;
 
-  if (DOWN_900) {
-    return (
+  return (
+    <MobileNavContext.Provider value={{ menuList: listToRender }}>
       <Box position="relative" display="flex" flexDirection="column">
         <Wrapper>
-          {MENU_LIST.map(({ Icon, title, href }) => {
-            // Link inner content
-            const ICON = <Icon sx={iconStyle} fontSize="small" />;
-
-            const CONTENT = (
-              <Fragment>
-                {title === "cart" ? (
-                  <Badge badgeContent={cart?.TotalItems || 0} color="primary">
-                    {ICON}
-                  </Badge>
-                ) : (
-                  ICON
-                )}
-
-                {t(title)}
-              </Fragment>
-            );
-
-            return href ? (
-              <StyledNavLink key={title} href={href}>
-                {CONTENT}
-              </StyledNavLink>
-            ) : (
-              <StyledBox key={title} onClick={toggleMobileSideNav}>
-                {CONTENT}
-              </StyledBox>
-            );
-          })}
+          {children ??
+            listToRender.map((item) => (
+              <MobileNavigationBar.MenuItem key={item.title} {...item} />
+            ))}
         </Wrapper>
       </Box>
-    );
-  }
-
-  return null;
+    </MobileNavContext.Provider>
+  );
 }
+
+MobileNavigationBar.MenuItem = function MenuItem({
+  title,
+  Icon,
+  href,
+}: MenuItemProps) {
+  const { toggleMobileSideNav } = useContext(NavContext);
+  const t = useTranslations("Navigation.Mobile");
+  const { data: cart } = getCart.useData();
+
+  const iconEl = <Icon sx={iconStyle} fontSize="small" />;
+  const isCart = title === "cart";
+
+  const content = (
+    <Fragment>
+      {isCart ? (
+        <Badge badgeContent={cart?.TotalItems || 0} color="primary">
+          {iconEl}
+        </Badge>
+      ) : (
+        iconEl
+      )}
+      {t(title)}
+    </Fragment>
+  );
+
+  return href ? (
+    <StyledNavLink href={href}>{content}</StyledNavLink>
+  ) : (
+    <StyledBox onClick={toggleMobileSideNav}>{content}</StyledBox>
+  );
+};

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

@@ -1,27 +1,81 @@
+"use client";
+
+import React, { createContext, useContext, ReactNode } from "react";
 import { MdChevronRight as ChevronRight } from "react-icons/md";
 import { useTranslations } from "next-intl";
-// GLOBAL CUSTOM COMPONENTS
+
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
-// CUSTOM ICON COMPONENT
 import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
-// STYLED COMPONENT
 import { CategoryMenuButton } from "./styles";
 
-export default function Categories() {
+type CategoriesContextValue = {
+  label: string;
+};
+
+const CategoriesContext = createContext<CategoriesContextValue | undefined>(
+  undefined,
+);
+
+export default function Categories({ children }: { children?: ReactNode }) {
   const t = useTranslations("Navigation");
+
+  const label = t("topLevelCategoryName");
+
   return (
-    <CategoryMenu
-      render={(handler) => (
-        <CategoryMenuButton variant="text" onClick={(e) => handler(e)}>
-          <div className="prefix">
-            <Category fontSize="small" />
-            <Paragraph fontWeight={600}>{t("topLevelCategoryName")}</Paragraph>
-          </div>
-
-          <ChevronRight className="dropdown-icon" fontSize="large" />
-        </CategoryMenuButton>
-      )}
-    />
+    <CategoriesContext.Provider value={{ label }}>
+      <CategoryMenu
+        render={(handler) =>
+          React.isValidElement(children) ? (
+            children
+          ) : (
+            <Categories.Trigger onClick={handler}>
+              <Categories.Prefix>
+                <Categories.Icon />
+                <Categories.Label />
+              </Categories.Prefix>
+              <Categories.Chevron />
+            </Categories.Trigger>
+          )
+        }
+      />
+    </CategoriesContext.Provider>
   );
 }
+
+Categories.Trigger = function Trigger({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}) {
+  return (
+    <CategoryMenuButton variant="text" onClick={onClick}>
+      {children}
+    </CategoryMenuButton>
+  );
+};
+
+// Prefix wrapper for icon + label
+Categories.Prefix = function Prefix({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="prefix">{children}</div>;
+};
+
+Categories.Icon = function Icon() {
+  return <Category fontSize="small" />;
+};
+
+Categories.Label = function Label() {
+  const ctx = useContext(CategoriesContext);
+  if (!ctx) return null;
+  return <Paragraph fontWeight={600}>{ctx.label}</Paragraph>;
+};
+
+Categories.Chevron = function Chevron() {
+  return <ChevronRight className="dropdown-icon" fontSize="large" />;
+};

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

@@ -1,52 +1,146 @@
 "use client";
 
-import { useState } from "react";
+import React, { createContext, useContext, useState } from "react";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-// GLOBAL CUSTOM COMPONENT
+import ChevronRight from "@mui/icons-material/ChevronRight";
+// GLOBAL COMPONENTS
 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 { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+// LOCAL COMPONENTS
 import { TransformedNavItem } from "../utils/transform-nav";
+// STYLED COMPONENTS
+import {
+  Wrapper,
+  StyledCard,
+  MenusContainer,
+  CategoryList,
+  CategoryListItem,
+  SubCategoryList,
+  SubCategoryListItem,
+} from "./styles";
+
+type MenuContextValue = {
+  openList: string;
+  setOpenList: (val: string) => void;
+  menuList: TransformedNavItem[];
+};
+
+const MenuContext = createContext<MenuContextValue | undefined>(undefined);
+
+const useCategoryMenu = () => {
+  const ctx = useContext(MenuContext);
+  if (!ctx)
+    throw new Error("useCategoryMenu must be used inside CategoryBasedMenu");
+  return ctx;
+};
+
+type RootProps = {
+  title: string;
+  menuList: TransformedNavItem[];
+  children: React.ReactNode;
+};
 
-// ===============================================================
-type Props = { menuList: TransformedNavItem[]; title: string };
-// ===============================================================
+const CategoryBasedMenu = ({ title, menuList, children }: RootProps) => {
+  const [openList, setOpenList] = useState(menuList[0]?.title || "");
 
-export default function CategoryBasedMenu({ title, menuList }: Props) {
-  const [openList, setOpenList] = useState(menuList[0]?.title);
+  return (
+    <MenuContext.Provider value={{ openList, setOpenList, menuList }}>
+      <Wrapper>
+        <CategoryBasedMenu.Trigger>{title}</CategoryBasedMenu.Trigger>
+        <MenusContainer className="menu-list">
+          <StyledCard>{children}</StyledCard>
+        </MenusContainer>
+      </Wrapper>
+    </MenuContext.Provider>
+  );
+};
+
+CategoryBasedMenu.Trigger = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+      {children}
+      <KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
+    </FlexRowCenter>
+  );
+};
 
-  const categories = menuList.reduce<string[]>(
-    (prev, curr) => [...prev, curr.title],
-    [],
-  ); // Designate the data type
-  const subCategories = menuList.find((item) => item.title === openList);
+// Main Categories List
+CategoryBasedMenu.MainList = () => {
+  const { openList, setOpenList, menuList } = useCategoryMenu();
+  const { settings } = useSettings();
 
   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>
+    <CategoryList>
+      {menuList.map((item) => (
+        <CategoryListItem
+          key={item.title}
+          active={openList === item.title ? 1 : 0}
+          onMouseEnter={() => setOpenList(item.title)}
+        >
+          {item.title}
+          <ChevronRight
+            fontSize="small"
+            sx={{
+              transform: `rotate(${settings.direction === "rtl" ? "180deg" : "0"})`,
+            }}
+          />
+        </CategoryListItem>
+      ))}
+    </CategoryList>
   );
-}
+};
+
+// Subcategories Panel
+CategoryBasedMenu.Section = () => {
+  const { openList, menuList } = useCategoryMenu();
+  const category = menuList.find((c) => c.title === openList);
+
+  if (!category) return null;
+
+  return (
+    <Scrollbar autoHide={false} sx={{ width: "100%" }}>
+      <Box px={6} py={2} height="100%">
+        {category.items.map((item, idx) => (
+          <div key={idx}>
+            <H6 fontWeight={700} my={3}>
+              {item.title}
+            </H6>
+            <SubCategoryList>
+              {item.items.map((sub, subIdx) => (
+                <CategoryBasedMenu.Item item={sub} key={subIdx} />
+              ))}
+            </SubCategoryList>
+          </div>
+        ))}
+      </Box>
+    </Scrollbar>
+  );
+};
+
+// Single Category Item
+CategoryBasedMenu.Item = ({ item }: { item: TransformedNavItem }) => {
+  const { title, href = "/", Icon, img } = item || {};
+
+  return (
+    <Link href={href}>
+      <SubCategoryListItem>
+        {img && (
+          <Avatar
+            alt={title}
+            src={img}
+            sx={{ backgroundColor: "grey.100", borderRadius: 1 }}
+          />
+        )}
+        {Icon && <Icon sx={{ fontSize: 16 }} />}
+        {title}
+      </SubCategoryListItem>
+    </Link>
+  );
+};
+
+export default CategoryBasedMenu;