@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,52 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-// GLOBAL CUSTOM COMPONENT
-import FlexRowCenter from "@evenicanpm/storefront-core/src/components/_components/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/_components/navbar/category-based-menu/components/categories.tsx

@@ -1,44 +0,0 @@
-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/_components/navbar/category-based-menu/components/category-item.tsx

@@ -1,31 +0,0 @@
-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/_components/navbar/category-based-menu/components/child-categories.tsx

@@ -1,38 +0,0 @@
-import Box from "@mui/material/Box";
-// LOCAL CUSTOM COMPONENTS
-import { H6 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import Scrollbar from "@evenicanpm/storefront-core/src/components/_components/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/_components/navbar/category-based-menu/index.ts

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

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

@@ -1,81 +0,0 @@
-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 "@/components/_components/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/_components/navbar/category-based-menu/types.ts

@@ -1,18 +0,0 @@
-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/_components/navbar/index.ts

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

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

@@ -1,29 +0,0 @@
-import List from "@mui/material/List";
-// GLOBAL CUSTOM COMPONENTS
-import { H6 } from "@evenicanpm/storefront-core/src/components/_components/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/_components/navbar/mega-menu/index.ts

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

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

@@ -1,71 +0,0 @@
-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/_components/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/_components/navbar/mega-menu/styles.ts

@@ -1,43 +0,0 @@
-import ListItem from "@mui/material/ListItem";
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENTS
-import { NavLink } from "@/components/_components/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/_components/navbar/mobile-menu/index.ts

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

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

@@ -1,70 +0,0 @@
-"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/_components/scrollbar/index";
-// RENDER MENU LEVEL FUNCTION
-import { renderLevels } from "./render-levels";
-// Nav Related
-import { NavContext } from "@/components/NavProvider/index";
-import {
-  transformCategoryNav,
-  transformCmsNav,
-} from "@evenicanpm/storefront-core/src/components/_components/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/_components/navbar/mobile-menu/render-levels.tsx

@@ -1,62 +0,0 @@
-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/_components/Typography";
-import { NavLink } from "@evenicanpm/storefront-core/src/components/_components/nav-link/index";
-
-import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components/_components/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>
-    );
-  });
-};

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

@@ -1 +0,0 @@
-export { default } from "./nav-list";

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

@@ -1,66 +0,0 @@
-"use client";
-
-import { PropsWithChildren, RefObject } from "react";
-import { usePathname } from "next/navigation";
-import MenuItem from "@mui/material/MenuItem";
-// MUI ICON COMPONENTS
-import ArrowLeft from "@mui/icons-material/ArrowLeft";
-import ArrowRight from "@mui/icons-material/ArrowRight";
-// GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
-import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import BazaarCard from "@evenicanpm/storefront-core/src/components/_components/BazaarCard";
-// STYLED COMPONENTS
-import { ParentNav, ParentNavItem } from "../styles";
-
-import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components/_components/navbar/utils/transform-nav";
-
-// ==============================================================
-interface Props extends PropsWithChildren {
-  nav: TransformedNavItem;
-}
-// ==============================================================
-
-export default function NavItemChild({ nav, children }: Props) {
-  const pathname = usePathname();
-  const { settings } = useSettings();
-  const { checkOverflow, elementRef, isLeftOverflowing, isRightOverflowing } =
-    useOverflowDetect();
-
-  const isActive = nav.items.flat().find((item) => {
-    const { href } = item;
-    if (!href || !pathname) return false;
-    return href === pathname;
-  });
-
-  return (
-    <ParentNav
-      minWidth={200}
-      active={isActive ? 1 : 0}
-      onMouseEnter={checkOverflow}
-    >
-      <MenuItem color="grey.700">
-        <Span flex="1 1 0">{nav?.title}</Span>
-
-        {settings.direction === "ltr" ? (
-          <ArrowRight fontSize="small" />
-        ) : (
-          <ArrowLeft fontSize="small" />
-        )}
-      </MenuItem>
-
-      <ParentNavItem
-        ref={elementRef as RefObject<HTMLDivElement>}
-        left={isLeftOverflowing}
-        right={isRightOverflowing}
-        className="parent-nav-item"
-      >
-        <BazaarCard elevation={3} sx={{ py: "0.5rem", minWidth: 180 }}>
-          {children}
-        </BazaarCard>
-      </ParentNavItem>
-    </ParentNav>
-  );
-}