@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,119 +0,0 @@
-import { useContext } 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/_components/nav-link/index";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import BazaarCard from "@evenicanpm/storefront-core/src/components/_components/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 { NavContext } from "@/components/NavProvider/index";
-import {
-  transformCmsNav,
-  TransformedNavItem,
-} from "@evenicanpm/storefront-core/src/components/_components/navbar/utils/transform-nav";
-
-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[]}
-            />
-          );
-        }
-
-        const hasChildren = !!(items && items.length);
-
-        if (href && !hasChildren) {
-          return (
-            <StyledNavLink href={href} key={title}>
-              {title}
-            </StyledNavLink>
-          );
-        }
-
-        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>
-
-              <ChildNavListWrapper className="child-nav-item">
-                <BazaarCard
-                  elevation={3}
-                  sx={{ mt: 2.5, py: 1, minWidth: 100 }}
-                >
-                  {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>
-          );
-        }
-      }
-    });
-  };
-
-  const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
-
-  return <FlexBox gap={4}>{renderNestedNav(cmsList, true)}</FlexBox>;
-}

package/src/components/_components/navbar/navbar.tsx

@@ -1,43 +0,0 @@
-"use client";
-// LOCAL CUSTOM COMPONENTS
-import Categories from "./categories";
-import NavigationList from "./nav-list/index";
-// STYLED COMPONENTS
-import { NavBarWrapper, InnerContainer } from "./styles";
-// DATA TYPES
-
-// ==========================================================
-interface Props {
-  border?: number;
-  elevation?: number;
-  hideCategories?: boolean;
-}
-// ==========================================================
-
-export default function Navbar({
-  border = 0,
-  elevation = 2,
-  hideCategories = false,
-}: 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>
-  );
-}

package/src/components/_components/navbar/styles.ts

@@ -1,90 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import styled from "@mui/material/styles/styled";
-import Container from "@mui/material/Container";
-// GLOBAL CUSTOM COMPONENTS
-import { NavLink } from "@/components/_components/nav-link/index";
-import BazaarCard from "@/components/_components/BazaarCard";
-
-// COMMON STYLED OBJECT
-export const NAV_LINK_STYLES = {
-  fontWeight: 600,
-  cursor: "pointer",
-  transition: "color 150ms ease-in-out",
-  "&:hover": { color: "primary.main" },
-  "&:last-child": { marginRight: 0 },
-};
-
-export const StyledNavLink = styled(NavLink)({ ...NAV_LINK_STYLES });
-
-export const ParentNav = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "active",
-})<{ active: number }>(({ theme, active }) => ({
-  position: "relative",
-  "&:hover": {
-    color: theme.palette.primary.main,
-    "& > .parent-nav-item": { display: "block" },
-  },
-  ...(active && { color: theme.palette.primary.main }),
-}));
-
-type Args = { left: boolean; right: boolean };
-
-export const ParentNavItem = styled("div", {
-  shouldForwardProp: (prop) => prop !== "left" && prop !== "right",
-})<Args>(({ theme, left, right }) => ({
-  top: 0,
-  zIndex: 5,
-  left: "100%",
-  paddingLeft: 8,
-  display: "none",
-  position: "absolute",
-  ...(right && left && { right: "100%", left: "auto", paddingRight: 8 }),
-  [theme.breakpoints.down(1640)]: {
-    right: "100%",
-    left: "auto",
-    paddingRight: 8,
-  },
-}));
-
-export const NavBarWrapper = styled(BazaarCard, {
-  shouldForwardProp: (prop) => prop !== "border",
-})<{ border: number }>(({ theme, border }) => ({
-  height: "60px",
-  display: "block",
-  borderRadius: "0px",
-  position: "relative",
-  boxShadow: "none",
-  ...(border && { borderBottom: `1px solid ${theme.palette.grey[200]}` }),
-  [theme.breakpoints.down(1150)]: { display: "none" },
-}));
-
-export const InnerContainer = styled(Container)({
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-});
-
-export const CategoryMenuButton = styled(Button)(({ theme }) => ({
-  width: 220,
-  borderRadius: 4,
-  backgroundColor: theme.palette.grey[200],
-  ...(theme.direction === "rtl" && { ".dropdown-icon": { rotate: "180deg" } }),
-  ".prefix": {
-    gap: 8,
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    color: theme.palette.grey[800],
-  },
-}));
-
-export const ChildNavListWrapper = styled("div")({
-  zIndex: 5,
-  left: "50%",
-  top: "100%",
-  display: "none",
-  position: "absolute",
-  transform: "translate(-50%, 0%)",
-});

package/src/components/_components/navbar/utils/transform-nav.ts

@@ -1,43 +0,0 @@
-import { CmsNavItem } from "@/cms/interfaces/navigation";
-import { CategoryHierarchy } from "@/lib/category-helpers";
-import { SvgIconComponent } from "@mui/icons-material";
-
-type MenuType = "default" | "mega-menu" | "full-screen-mega-menu";
-export interface TransformedNavItem {
-  href: string;
-  title: string;
-  items: TransformedNavItem[];
-  menuType: MenuType;
-  // Icon and img used only in full screen mega menu
-  Icon?: SvgIconComponent;
-  img?: string;
-}
-
-export const transformCmsNav = (items: CmsNavItem[]): TransformedNavItem[] => {
-  return items.map((item) => {
-    const transformedItem: TransformedNavItem = {
-      href:
-        item.type === "INTERNAL"
-          ? `/pages/${item.related?.slug}`
-          : (item.path ?? ""),
-      title: item.title,
-      menuType: "default",
-      items: item.items ? transformCmsNav(item.items) : [],
-    };
-
-    return transformedItem;
-  });
-};
-
-export const transformCategoryNav = (
-  items: CategoryHierarchy[],
-): TransformedNavItem[] => {
-  return items.map((item: CategoryHierarchy) => {
-    return {
-      href: `/products/${item?.Url}`,
-      title: item?.Name ?? "",
-      menuType: "default",
-      items: item?.Children ? transformCategoryNav(item.Children) : [],
-    };
-  });
-};

package/src/components/_components/newsletter/index.ts

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

package/src/components/_components/newsletter/newsletter.tsx

@@ -1,112 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-// MUI
-import Grid from "@mui/material/Grid2";
-import Modal from "@mui/material/Modal";
-import Button from "@mui/material/Button";
-import Checkbox from "@mui/material/Checkbox";
-import TextField from "@mui/material/TextField";
-import IconButton from "@mui/material/IconButton";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-// MUI UTILS METHODS
-import debounce from "@mui/material/utils/debounce";
-// MUI ICON COMPONENTS
-import Clear from "@mui/icons-material/Clear";
-// GLOBAL CUSTOM COMPONENTS
-import {
-  H1,
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-// LOCAL CUSTOM COMPONENT
-import SocialIcons from "./social-icons";
-// STYLED COMPONENTS
-import { Wrapper } from "./styles";
-
-// ======================================================
-type Props = { image?: string };
-// ======================================================
-
-export default function Newsletter({
-  image = "/assets/images/newsletter/bg-1.png",
-}: Props) {
-  const [open, setOpen] = useState(false);
-  const handleClose = () => setOpen(false);
-
-  useEffect(() => {
-    if (!window) return;
-
-    if (!window.sessionStorage.getItem("newsletter")) {
-      debounce(() => {
-        setOpen(true);
-        window.sessionStorage.setItem("newsletter", "true");
-      }, 2000)();
-    }
-  }, []);
-
-  return (
-    <ClickAwayListener onClickAway={handleClose}>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-        sx={{ zIndex: 999999999 }}
-      >
-        <Wrapper img={image}>
-          <Grid container spacing={2}>
-            <Grid
-              size={{ lg: 6, md: 6 }}
-              display={{ md: "flex", xs: "none" }}
-            />
-
-            <Grid size={{ lg: 6, md: 6, xs: 12 }} alignItems="center">
-              <div className="content">
-                <Paragraph fontSize={22} fontWeight={700}>
-                  UP TO <Span color="primary.main">30% OFF</Span>
-                </Paragraph>
-
-                <H1 fontSize={36} fontWeight={700} mb={2}>
-                  Sign up to <Span color="primary.main">BAZAAR</Span>
-                </H1>
-
-                <Paragraph color="grey.600" mb={5}>
-                  Subscribe to the BAZAR eCommerce newsletter to receive timely
-                  updates from your favorite products.
-                </Paragraph>
-
-                <TextField
-                  fullWidth
-                  className="emailInput"
-                  placeholder="Enter your email address"
-                />
-
-                <Button
-                  variant="contained"
-                  fullWidth
-                  color="primary"
-                  sx={{ p: 1.5 }}
-                >
-                  SUBMIT
-                </Button>
-
-                <SocialIcons />
-
-                <FormControlLabel
-                  control={<Checkbox defaultChecked />}
-                  label="No, Thanks"
-                />
-              </div>
-            </Grid>
-          </Grid>
-
-          <IconButton onClick={handleClose} className="clear-btn">
-            <Clear color="inherit" />
-          </IconButton>
-        </Wrapper>
-      </Modal>
-    </ClickAwayListener>
-  );
-}

package/src/components/_components/newsletter/social-icons.tsx

@@ -1,35 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
-import Google from "@mui/icons-material/Google";
-import Twitter from "@mui/icons-material/Twitter";
-import Instagram from "@mui/icons-material/Instagram";
-// GLOBAL CUSTOM COMPONENT
-import FlexRowCenter from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-row-center";
-// CUSTOM ICON COMPONENT
-// import Facebook from "icons/Facebook";
-import FallbackIcon from "@/components/Blocks/Icons/Components/FallbackIcon";
-const Facebook = FallbackIcon;
-
-const STYLE = { fontSize: 20, color: "grey.900" };
-
-export default function SocialIcons() {
-  return (
-    <FlexRowCenter mt={4} mb={2}>
-      <IconButton>
-        <Facebook sx={STYLE} />
-      </IconButton>
-
-      <IconButton>
-        <Twitter sx={STYLE} />
-      </IconButton>
-
-      <IconButton>
-        <Instagram sx={STYLE} />
-      </IconButton>
-
-      <IconButton>
-        <Google sx={STYLE} />
-      </IconButton>
-    </FlexRowCenter>
-  );
-}

package/src/components/_components/newsletter/styles.ts

@@ -1,65 +0,0 @@
-import styled from "@mui/material/styles/styled";
-
-// styled components
-export const Wrapper = styled("div", {
-  shouldForwardProp: (prop) => prop !== "img",
-})<{ img: string }>(({ theme, img }) => ({
-  top: "50%",
-  padding: 0,
-  left: "50%",
-  width: "100%",
-  maxWidth: 1020,
-  height: "auto",
-  borderRadius: 8,
-  outline: "none",
-  position: "absolute",
-  boxShadow: theme.shadows[3],
-  transform: "translate(-50%, -50%)",
-  backgroundColor: theme.palette.background.paper,
-  ".content": {
-    zIndex: 2,
-    padding: 24,
-    textAlign: "center",
-    position: "relative",
-  },
-  ".clear-btn": {
-    top: 8,
-    right: 8,
-    zIndex: 2,
-    position: "absolute",
-    color: theme.palette.grey[900],
-  },
-  ".emailInput": {
-    marginBottom: 16,
-    "& input": { padding: 16, textAlign: "center" },
-    "& .MuiOutlinedInput-notchedOutline": {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-  [theme.breakpoints.between("sm", "md")]: {
-    padding: 24,
-    maxWidth: 620,
-  },
-  [theme.breakpoints.up("md")]: {
-    padding: 32,
-    height: 550,
-    ":after": {
-      content: "''",
-      width: "100%",
-      height: "100%",
-      backgroundImage: `url(${img})`,
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: "left",
-      top: 0,
-      left: 0,
-      zIndex: 1,
-      position: "absolute",
-      ...(theme.direction === "rtl" && {
-        right: 0,
-        marginRight: "auto",
-        backgroundPosition: "right",
-        transform: "rotateX(180deg) rotateZ(180deg)",
-      }),
-    },
-  },
-}));

package/src/components/_components/page-sidenav/grocery-side-nav/components/link-item.tsx

@@ -1,21 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { NavLink } from "@evenicanpm/storefront-core/src/components/_components/nav-link/index";
-
-// ==============================================================
-interface Props {
-  ml: number;
-  href: string;
-  title: string;
-}
-// ==============================================================
-
-export default function LinkItem({ href, title, ml = 4 }: Props) {
-  return (
-    <NavLink href={href} color="grey.700">
-      <Span display="block" ml={ml} py={1}>
-        {title}
-      </Span>
-    </NavLink>
-  );
-}

package/src/components/_components/page-sidenav/grocery-side-nav/components/list-item.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-// CUSTOM ICON COMPONENTS
-// import appIcons from "icons";
-import FallbackIcon from "@/components/Blocks/Icons/Components/FallbackIcon";
-
-// ==============================================================
-interface Props {
-  icon: string;
-  title: string;
-}
-// ==============================================================
-
-export default function ListItem({ title }: Props) {
-  // const Icon = appIcons[icon] as SvgIconComponent;
-  const Icon = FallbackIcon;
-
-  return (
-    <FlexBox py={1} gap={1.5} alignItems="center">
-      <Icon fontSize="small" />
-      <Span fontWeight={600}>{title}</Span>
-    </FlexBox>
-  );
-}

package/src/components/_components/page-sidenav/grocery-side-nav/components/nav-accordion.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { Fragment, useState } from "react";
-import Collapse from "@mui/material/Collapse";
-// GLOBAL CUSTOM COMPONENTS
-import { AccordionHeader } from "@evenicanpm/storefront-core/src/components/_components/accordion/index";
-// LOCAL CUSTOM COMPONENT
-import ListItem from "./list-item";
-import { renderChild } from "./render-child";
-// CUSTOM DATA MODEL
-import { CategoryItem } from "@evenicanpm/storefront-core/src/components/_components/bazaar-types";
-
-// ==============================================================
-type Props = { item: CategoryItem };
-// ==============================================================
-
-export default function NavAccordion({ item }: Props) {
-  const { icon, title, child } = item;
-
-  const [open, setOpen] = useState(true);
-
-  return (
-    <Fragment>
-      <AccordionHeader
-        open={open}
-        onClick={() => setOpen((state) => !state)}
-        sx={{ padding: 0, cursor: "pointer" }}
-      >
-        <ListItem icon={icon} title={title} />
-      </AccordionHeader>
-
-      {/* RENDER NESTED ITEMS */}
-      {child ? <Collapse in={open}>{renderChild(child)}</Collapse> : null}
-    </Fragment>
-  );
-}

package/src/components/_components/page-sidenav/grocery-side-nav/components/render-child.tsx

@@ -1,26 +0,0 @@
-import { Fragment } from "react";
-import LinkItem from "./link-item";
-
-// ==============================================================
-type Item = { title: string; href: string };
-
-interface Props extends Item {
-  child?: Item[];
-}
-// ==============================================================
-
-export const renderChild = (childList: Props[], type = "parent") => {
-  // NESTED LIST
-  if (type === "parent") {
-    return childList.map(({ href, title, child }) => (
-      <Fragment key={title}>
-        <LinkItem href={href} title={title} ml={4} />
-        {child ? renderChild(child, "child") : null}
-      </Fragment>
-    ));
-  }
-
-  return childList.map((item, ind) => (
-    <LinkItem key={ind} href={item.href} title={item.title} ml={6} />
-  ));
-};

package/src/components/_components/page-sidenav/grocery-side-nav/grocery-side-nav.tsx

@@ -1,32 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import Scrollbar from "@evenicanpm/storefront-core/src/components/_components/scrollbar/index";
-import { NavLink } from "@evenicanpm/storefront-core/src/components/_components/nav-link/index";
-// LOCAL CUSTOM COMPONENTS
-import ListItem from "./components/list-item";
-import NavAccordion from "./components/nav-accordion";
-// STYLED COMPONENTS
-import { StyledCard } from "./styles/index";
-// CUSTOM DATA MODEL
-import { CategoryItem } from "@evenicanpm/storefront-core/src/components/_components/bazaar-types";
-
-// ===========================================================
-type Props = { navigation: CategoryItem[] };
-// ===========================================================
-
-export default function GrocerySideNav({ navigation }: Props) {
-  return (
-    <Scrollbar>
-      <StyledCard elevation={3}>
-        {navigation.map((item, ind) => {
-          if (item.child) return <NavAccordion item={item} key={ind} />;
-
-          return (
-            <NavLink key={ind} href={item.href ?? ""} color="grey.700">
-              <ListItem title={item.title} icon={item.icon} />
-            </NavLink>
-          );
-        })}
-      </StyledCard>
-    </Scrollbar>
-  );
-}

package/src/components/_components/page-sidenav/grocery-side-nav/index.ts

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

package/src/components/_components/page-sidenav/grocery-side-nav/styles/index.ts

@@ -1,11 +0,0 @@
-"use client";
-
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-export const StyledCard = styled(Card)({
-  height: "100%",
-  borderRadius: 8,
-  position: "relative",
-  padding: "20px 20px 14px 24px",
-});