@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/components-v2/footer/styles/index.ts

@@ -1,42 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import styled from "@mui/material/styles/styled";
-import getPaletteColor from "@/lib/get-palette-color";
-
-// ==============================================================
-type LinkProps = { isDark?: boolean };
-// ==============================================================
-
-export const StyledLink = styled(Link, {
-  shouldForwardProp: (prop) => prop !== "isDark",
-})<LinkProps>(({ theme, isDark }) => ({
-  borderRadius: 4,
-  display: "block",
-  cursor: "pointer",
-  position: "relative",
-  padding: "0.3rem 0rem",
-  ...(!isDark && {
-    color: theme.palette.grey[500],
-    "&:hover": { color: theme.palette.grey[100] },
-  }),
-}));
-
-export const StyledFooter = styled("footer")(({ theme }) => ({
-  [theme.breakpoints.down("md")]: { marginBottom: "4rem" },
-}));
-
-export const StyledRoot = styled("footer")(({ theme }) => ({
-  padding: 40,
-  color: "white",
-  borderRadius: 8,
-  background: getPaletteColor(theme, "primary", 600),
-  [theme.breakpoints.down("md")]: { marginBottom: "6rem !important" },
-}));
-
-export const Heading = styled("h6")({
-  fontSize: 18,
-  lineHeight: 1,
-  fontWeight: 600,
-  marginBottom: 12,
-});

package/src/components-v2/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-v2/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-v2/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-v2/Typography";
-import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/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-v2/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-v2/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-v2/navbar/mobile-menu/render-levels.test.tsx

@@ -1,71 +0,0 @@
-import { describe, it, vi } from "vitest";
-import { renderLevels } from "./render-levels";
-import { render, screen } from "@testing-library/react";
-import { transformCmsNav } from "../utils/transform-nav";
-import { CmsNavItem } from "@/cms/interfaces/navigation";
-
-describe("Render Nested Mobile Nav", () => {
-  const cmsNav = transformCmsNav(mockCmsData as unknown as CmsNavItem[]);
-  const handleClose = vi.fn();
-  it("should render the menu ", () => {
-    render(renderLevels(cmsNav, handleClose));
-    expect(screen.getByText("NESTED")).toBeInTheDocument();
-  });
-
-  it("should expand dropdown when clicked", () => {
-    render(renderLevels(cmsNav, handleClose));
-    screen.getByText("My Page").click();
-    expect(screen.getByText("NESTED")).toBeInTheDocument();
-  });
-
-  it("should navigate to page when link is clicked", () => {
-    render(renderLevels(cmsNav, handleClose));
-
-    const link = screen.getByText("NESTED");
-    expect(link).toHaveAttribute("href", "https://google.com");
-
-    link.click();
-    expect(handleClose).toHaveBeenCalled();
-
-    //Can't test actual navigation unless we use router.push() instead of Link and then mock it
-    // Should be part of E2E tests
-  });
-});
-
-const mockCmsData = [
-  {
-    id: 3,
-    title: "My Page",
-    menuAttached: false,
-    order: 1,
-    path: "/pages/my-page",
-    type: "INTERNAL",
-    uiRouterKey: "my-page",
-    slug: "pages-my-page",
-    external: false,
-    related: {
-      id: 1,
-      title: "My Page",
-      slug: "my-page",
-      createdAt: "2025-01-20T17:27:16.685Z",
-      updatedAt: "2025-01-20T17:27:19.608Z",
-      publishedAt: "2025-01-20T17:27:19.603Z",
-      __contentType: "api::page.page",
-      navigationItemId: 3,
-      __templateName: "Generic",
-    },
-    items: [
-      {
-        id: 4,
-        title: "NESTED",
-        menuAttached: false,
-        order: 1,
-        path: "https://google.com",
-        type: "EXTERNAL",
-        uiRouterKey: "nested",
-        slug: "",
-        external: true,
-      },
-    ],
-  },
-];

package/src/components-v2/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-v2/Typography";
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
-
-import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/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-v2/newsletter/index.ts

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

package/src/components-v2/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-v2/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-v2/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-v2/flex-box/flex-row-center";
-// CUSTOM ICON COMPONENT
-// import Facebook from "icons/Facebook";
-import FallbackIcon from "@/cms/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-v2/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-v2/page-sidenav/grocery-side-nav/components/link-item.tsx

@@ -1,21 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/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-v2/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-v2/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-// CUSTOM ICON COMPONENTS
-// import appIcons from "icons";
-import FallbackIcon from "@/cms/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-v2/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-v2/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-v2/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-v2/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} />
-  ));
-};