@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/mobile-navigation/index.ts

@@ -0,0 +1,3 @@
+import MobileNavigationBar from "./mobile-navigation-bar";
+
+export { MobileNavigationBar };

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

@@ -0,0 +1,118 @@
+"use client";
+
+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";
+// 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";
+// API and Context
+import getCart from "@/services/cart/queries/get-cart";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+
+/**
+Usage Examples:
+
+*** Default Menu:
+<MobileNavigationBar />
+
+*** Override Menu List:
+<MobileNavigationBar
+  menuList={[
+    { title: "home", Icon: Home, href: "/" },
+    { title: "custom", Icon: SomeOtherIcon, href: "/custom" },
+  ]}
+/>
+
+*** 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 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 listToRender = menuList || defaultMenuList;
+
+  if (!DOWN_900) return null;
+
+  return (
+    <MobileNavContext.Provider value={{ menuList: listToRender }}>
+      <Box position="relative" display="flex" flexDirection="column">
+        <Wrapper>
+          {children ??
+            listToRender.map((item) => (
+              <MobileNavigationBar.MenuItem key={item.title} {...item} />
+            ))}
+        </Wrapper>
+      </Box>
+    </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/mobile-navigation/styles/index.ts

@@ -0,0 +1,63 @@
+import Drawer from "@mui/material/Drawer";
+import styled from "@mui/material/styles/styled";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
+
+// STYLED COMPONENTS
+const Wrapper = styled("div")(({ theme }) => ({
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "none",
+  position: "fixed",
+  justifyContent: "space-around",
+  zIndex: theme.zIndex.drawer + 1,
+  height: layoutConstant.mobileNavHeight,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: "0px 1px 4px 3px rgba(0, 0, 0, 0.1)",
+  "@media only screen and (max-width: 900px)": {
+    display: "flex",
+    width: "100vw",
+  },
+}));
+
+const StyledNavLink = styled(NavLink)({
+  flex: "1 1 0",
+  display: "flex",
+  fontSize: "13px",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+});
+
+const StyledBox = styled("div")(({ theme }) => ({
+  flex: "1 1 0",
+  display: "flex",
+  fontSize: "13px",
+  cursor: "pointer",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+  transition: "color 150ms ease-in-out",
+  "&:hover": { color: `${theme.palette.primary.main} !important` },
+}));
+
+const StyledDrawer = styled(Drawer)(({ theme }) => ({
+  width: 250,
+  zIndex: 1501,
+  flexShrink: 0,
+  "& .MuiDrawer-paper": {
+    width: 250,
+    boxSizing: "border-box",
+    boxShadow: theme.shadows[2],
+  },
+}));
+
+const iconStyle = {
+  display: "flex",
+  marginBottom: "4px",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+export { Wrapper, StyledBox, StyledNavLink, StyledDrawer, iconStyle };

package/src/components-v2/nav-link/index.ts

@@ -0,0 +1,5 @@
+import NavLink from "./nav-link";
+import NavLink2 from "./nav-link-2";
+import NavLink3 from "./nav-link-3";
+
+export { NavLink, NavLink2, NavLink3 };

package/src/components-v2/nav-link/nav-link-2.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+// GLOBAL CUSTOM COMPONENT
+import { Small } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+// ==============================================================
+interface NavLinkProps {
+  url: string;
+  title: string;
+  color?: string;
+  borderColor?: string;
+}
+// ==============================================================
+
+export default function NavLink2({
+  url,
+  color,
+  title = "SHOP NOW",
+  borderColor = "primary.600",
+}: NavLinkProps) {
+  return (
+    <Link href={url}>
+      <Small
+        fontWeight="700"
+        borderBottom={2}
+        color={color}
+        borderColor={borderColor}
+      >
+        {title}
+      </Small>
+    </Link>
+  );
+}

package/src/components-v2/nav-link/nav-link-3.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import Link from "next/link";
+// MUI ICON COMPONENT
+import ArrowForward from "@mui/icons-material/ArrowForward";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+//   ==========================================
+interface Props {
+  href: string;
+  text: string;
+  color?: string;
+  hoverColor?: string;
+}
+//   ==========================================
+
+export default function NavLink3({
+  href,
+  text,
+  color = "text.primary",
+  hoverColor = "primary.main",
+  ...props
+}: Props) {
+  return (
+    <Link href={href}>
+      <Span
+        color={color}
+        sx={{
+          color,
+          gap: 1,
+          lineHeight: 1,
+          fontWeight: 600,
+          alignItems: "center",
+          position: "relative",
+          paddingBottom: "4px",
+          display: "inline-flex",
+          ":after": {
+            left: 0,
+            bottom: 0,
+            width: "0%",
+            content: "''",
+            height: "2px",
+            transition: "0.3s",
+            position: "absolute",
+            backgroundColor: color,
+          },
+          ":hover": {
+            color: hoverColor,
+            "&::after": { width: "100%", backgroundColor: hoverColor },
+          },
+        }}
+        {...props}
+      >
+        {text}{" "}
+        <ArrowForward
+          sx={{
+            fontSize: 14,
+            flexShrink: 0,
+            transform: ({ direction }) =>
+              `rotate(${direction === "rtl" ? "180deg" : "0deg"})`,
+          }}
+        />
+      </Span>
+    </Link>
+  );
+}

package/src/components-v2/nav-link/nav-link.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { AnchorHTMLAttributes, CSSProperties } from "react";
+import styled from "@mui/material/styles/styled";
+import clsx from "clsx";
+
+// STYLED COMPONENT
+const StyledLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  position: "relative",
+  transition: "color 150ms ease-in-out",
+  color: active ? theme.palette.primary.main : "inherit",
+  "&:hover": { color: `${theme.palette.primary.main} !important` },
+}));
+
+// ==============================================================
+export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  style?: CSSProperties;
+  className?: string;
+}
+// ==============================================================
+
+export default function NavLink({
+  href,
+  children,
+  style,
+  className,
+  ...props
+}: NavLinkProps) {
+  const pathname = usePathname();
+
+  // CHECK CURRENT ROUTE
+  const checkRouteMatch = () => {
+    if (href === "/") return pathname === href;
+    return pathname?.includes(href);
+  };
+
+  return (
+    <StyledLink
+      href={href}
+      style={style}
+      className={clsx(className)}
+      active={checkRouteMatch() ? 1 : 0}
+      {...props}
+    >
+      {children}
+    </StyledLink>
+  );
+}

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

@@ -0,0 +1,81 @@
+"use client";
+
+import React, { createContext, useContext, ReactNode } from "react";
+import { MdChevronRight as ChevronRight } from "react-icons/md";
+import { useTranslations } from "next-intl";
+
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
+import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
+import { CategoryMenuButton } from "./styles";
+
+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 (
+    <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

@@ -0,0 +1,146 @@
+"use client";
+
+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";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+// 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";
+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;
+};
+
+const CategoryBasedMenu = ({ title, menuList, children }: RootProps) => {
+  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>
+  );
+};
+
+// Main Categories List
+CategoryBasedMenu.MainList = () => {
+  const { openList, setOpenList, menuList } = useCategoryMenu();
+  const { settings } = useSettings();
+
+  return (
+    <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;

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/index.ts

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