@evenicanpm/storefront-core 1.1.0 → 1.2.1

package/src/components/_components/categories/category-list/category-list.tsx

@@ -1,59 +0,0 @@
-import { ReactNode } from "react";
-import CategoryListItem from "../category-list-item/index";
-import { StyledRoot, SubMenuStyledRoot } from "./styles";
-import { Props } from "./types";
-import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
-import { CategoryHierarchy } from "@/lib/category-helpers";
-import MegaMenu1 from "@evenicanpm/storefront-core/src/components/_components/categories/mega-menu/mega-menu-1";
-import MegaMenu2 from "@evenicanpm/storefront-core/src/components/_components/categories/mega-menu/mega-menu-2";
-
-type MegaMenuType = "default" | "mega-menu-1" | "mega-menu-2";
-
-export default function CategoryList({ open, position = "absolute" }: Props) {
-  let { data: categories } = getCategories.useSuspenseData();
-  if (!(categories && categories.length)) categories = [];
-
-  const megaMenuRenderers: Record<
-    MegaMenuType,
-    (children: CategoryHierarchy[]) => ReactNode
-  > = {
-    default: (children) => renderRecursiveMenu(children, true),
-    "mega-menu-1": (children) => <MegaMenu1 data={children} />,
-    "mega-menu-2": (children) => <MegaMenu2 data={children} />,
-  };
-
-  const renderRecursiveMenu = (
-    items: CategoryHierarchy[],
-    isSubMenu = true,
-  ) => {
-    const Wrapper = isSubMenu ? SubMenuStyledRoot : StyledRoot;
-
-    return (
-      <Wrapper elevation={2} {...(isSubMenu ? {} : { open, position })}>
-        {items.map((category) => {
-          const { RecordId, Name, Url, Children } = category;
-          const hasChildren = !!(Children && Children.length);
-
-          // Sub menu can also be "categories/mega-menu/mega-menu-1" or "mega-menu-2",
-          // Mega menus have submenu items listed in columns and also have option to show banners(offers).
-          // Which submenu to display should be decided from categopry data
-          const menuType: MegaMenuType = "default";
-
-          return (
-            <CategoryListItem
-              key={RecordId}
-              href={`/products/${Url}`}
-              title={Name ?? ""}
-              caret={hasChildren}
-              render={
-                hasChildren ? megaMenuRenderers[menuType]?.(Children) : null
-              }
-            />
-          );
-        })}
-      </Wrapper>
-    );
-  };
-
-  return renderRecursiveMenu(categories, false);
-}

package/src/components/_components/categories/category-list/index.ts

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

package/src/components/_components/categories/category-list/styles.ts

@@ -1,29 +0,0 @@
-import styled from "@mui/material/styles/styled";
-import { Props } from "./types";
-import Card from "@mui/material/Card";
-
-// styled component
-export const StyledRoot = styled("div", {
-  shouldForwardProp: (prop) => prop !== "position" && prop !== "open",
-})<Props>(({ theme, position, open }) => ({
-  left: 0,
-  zIndex: 98,
-  right: "auto",
-  borderRadius: 4,
-  padding: "0.5rem 0px",
-  transformOrigin: "top",
-  boxShadow: theme.shadows[2],
-  position: position || "unset",
-  transition: "all 250ms ease-in-out",
-  transform: open ? "scaleY(1)" : "scaleY(0)",
-  backgroundColor: theme.palette.background.paper,
-  top: position === "absolute" ? "calc(100% + 0.7rem)" : "0.5rem",
-}));
-
-export const SubMenuStyledRoot = styled(Card)(() => ({
-  marginLeft: "0.6rem",
-  paddingBlock: "0.5rem",
-  // Prevent clipping of 2nd-level dropdowns that are absolutely positioned.
-  // Needed to make sure submenus render outside the card's bounds
-  overflow: "visible",
-}));

package/src/components/_components/categories/category-list/types.ts

@@ -1,4 +0,0 @@
-export interface Props {
-  open?: boolean;
-  position?: "absolute" | "relative";
-}

package/src/components/_components/categories/category-list-item/category-menu-item.tsx

@@ -1,37 +0,0 @@
-import Link from "next/link";
-import { ReactNode } from "react";
-// MUI ICON COMPONENTS
-import { SvgIconComponent } from "@mui/icons-material";
-import ChevronRight from "@mui/icons-material/ChevronRight";
-// STYLED COMPONENT
-import { Wrapper } from "./styles";
-
-// =============================================================
-interface Props {
-  href: string;
-  title: string;
-  caret?: boolean;
-  render?: ReactNode;
-  icon?: SvgIconComponent;
-}
-// =============================================================
-
-export default function CategoryListItem(props: Props) {
-  const { href, title, render, caret = true, icon: Icon } = props;
-
-  return (
-    <Wrapper>
-      <Link href={href}>
-        <div className="category-dropdown-link">
-          {Icon ? <Icon fontSize="small" color="inherit" /> : null}
-          <span className="title">{title}</span>
-          {caret ? (
-            <ChevronRight fontSize="small" className="caret-icon" />
-          ) : null}
-        </div>
-      </Link>
-
-      {render ? <div className="mega-menu">{render}</div> : null}
-    </Wrapper>
-  );
-}

package/src/components/_components/categories/category-list-item/index.ts

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

package/src/components/_components/categories/category-list-item/styles.ts

@@ -1,35 +0,0 @@
-import styled from "@mui/material/styles/styled";
-
-export const Wrapper = styled("div")(({ theme }) => ({
-  // Needed "relative" here so that the absolutely positioned `.mega-menu` inside this wrapper
-  // is aligned relative to this parent element.
-  // If we want submenu to align to the top always then we can remove this.
-  position: "relative",
-  "& .category-dropdown-link": {
-    height: 40,
-    display: "flex",
-    minWidth: "220px", // same as CategoryMenuButton width
-    cursor: "pointer",
-    whiteSpace: "pre",
-    padding: "0px 1rem",
-    alignItems: "center",
-    transition: "all 300ms ease-in-out",
-    ".title": { flexGrow: 1, paddingLeft: "0.75rem" },
-  },
-
-  ":hover": {
-    color: theme.palette.primary.main,
-    background: theme.palette.action.hover,
-    "& > .mega-menu": { display: "block" },
-  },
-
-  ".mega-menu": {
-    top: 0,
-    zIndex: 99,
-    left: "100%",
-    right: "auto",
-    display: "none",
-    position: "absolute",
-  },
-  ...(theme.direction === "rtl" && { ".caret-icon": { rotate: "180deg" } }),
-}));

package/src/components/_components/categories/category-menu.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import { MouseEvent, useCallback, useEffect, useState } from "react";
-import styled from "@mui/material/styles/styled";
-import CategoryList from "./category-list/index";
-
-// STYLED COMPONENT
-const Wrapper = styled("div", {
-  shouldForwardProp: (prop) => prop !== "open",
-})<{ open: boolean }>(({ open, theme: { direction } }) => ({
-  cursor: "pointer",
-  position: "relative",
-  "& .dropdown-icon": {
-    transition: "all 250ms ease-in-out",
-    transform: `rotate(${
-      open ? (direction === "rtl" ? "-90deg" : "90deg") : "0deg"
-    })`,
-  },
-}));
-
-// ===========================================================
-type Props = {
-  render: (
-    handler: (e: React.MouseEvent<HTMLButtonElement>) => void,
-  ) => JSX.Element;
-};
-// ===========================================================
-
-export default function CategoryMenu({ render }: Props) {
-  const [open, setOpen] = useState(false);
-
-  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    setOpen((open) => !open);
-  };
-
-  const handleDocumentClick = useCallback(() => setOpen(false), []);
-
-  useEffect(() => {
-    window.addEventListener("click", handleDocumentClick);
-    return () => window.removeEventListener("click", handleDocumentClick);
-  }, [handleDocumentClick]);
-
-  return (
-    <Wrapper open={open}>
-      {render(onClick)}
-
-      <CategoryList open={open} />
-    </Wrapper>
-  );
-}

package/src/components/_components/categories/mega-menu/banner.tsx

@@ -1,60 +0,0 @@
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components/_components/LazyImage";
-import {
-  H3,
-  Paragraph,
-  Small,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-
-export default function OfferBanner() {
-  return (
-    <Link href="/sale-page-2">
-      <Grid
-        className="h-full"
-        container
-        spacing={0}
-        wrap="wrap-reverse"
-        alignItems="center"
-        mb={-1}
-      >
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <Box px={2.5}>
-            <H3 mb={1}>Big Sale Upto 60% Off</H3>
-
-            <Paragraph color="grey.600" mb={1}>
-              Handcrafted from genuine Italian Leather
-            </Paragraph>
-
-            <Small
-              fontWeight="700"
-              borderBottom="2px solid"
-              borderColor="primary.main"
-            >
-              SHOP NOW
-            </Small>
-          </Box>
-        </Grid>
-
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <FlexBox
-            height="160px"
-            position="relative"
-            flexDirection="column"
-            justifyContent="flex-end"
-          >
-            <LazyImage
-              alt="model"
-              width={292}
-              height={195}
-              src="/assets/images/models/model-1.png"
-            />
-          </FlexBox>
-        </Grid>
-      </Grid>
-    </Link>
-  );
-}

package/src/components/_components/categories/mega-menu/column-list.tsx

@@ -1,70 +0,0 @@
-import { PropsWithChildren } from "react";
-import Link from "next/link";
-// MUI
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components/_components/LazyImage";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import { NavLink } from "@evenicanpm/storefront-core/src/components/_components/nav-link/index";
-// STYLED COMPONENTS
-import { StyledRoot } from "./styles";
-// DATA TYPES
-import { CategoryItemOffer } from "../types";
-import { CategoryHierarchy } from "@/lib/category-helpers";
-
-// ==============================================================
-interface Props extends PropsWithChildren {
-  minWidth?: number;
-  list: CategoryHierarchy[];
-  banner?: CategoryItemOffer;
-}
-// ==============================================================
-
-export default function ColumnList({
-  list,
-  children,
-  banner,
-  minWidth = 760,
-}: Props) {
-  return (
-    <StyledRoot elevation={2} sx={{ minWidth }}>
-      <FlexBox px={2.5}>
-        <Box flex="1 1 0">
-          <Grid container spacing={4}>
-            {list.map((item, ind) => (
-              <Grid size={3} key={ind}>
-                <div className="title-link">{item.Name}</div>
-
-                {item.Children?.map((sub, ind) => (
-                  <NavLink
-                    className="child-link"
-                    href={`/products/${sub.Url}`}
-                    key={ind}
-                  >
-                    {sub.Name}
-                  </NavLink>
-                ))}
-              </Grid>
-            ))}
-          </Grid>
-        </Box>
-
-        {banner?.position === "right" ? (
-          <Box mt={1.5}>
-            <Link href={banner.href}>
-              <LazyImage
-                src={banner.url}
-                width={137}
-                height={318}
-                alt="banner"
-              />
-            </Link>
-          </Box>
-        ) : null}
-      </FlexBox>
-
-      {children}
-    </StyledRoot>
-  );
-}

package/src/components/_components/categories/mega-menu/mega-menu-1.tsx

@@ -1,37 +0,0 @@
-import Link from "next/link";
-// MUI
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components/_components/LazyImage";
-// LOCAL CUSTOM COMPONENTS
-import ColumnList from "./column-list";
-// DATA TYPE
-import { CategoryItemOffer } from "../types";
-import { CategoryHierarchy } from "@/lib/category-helpers";
-
-// =========================================================
-interface Props {
-  minWidth?: string;
-  data: CategoryHierarchy[];
-  banner?: CategoryItemOffer;
-}
-// =========================================================
-
-export default function MegaMenu1({ banner, data }: Props) {
-  return (
-    <ColumnList list={data} banner={banner}>
-      {banner?.position === "bottom" ? (
-        <Link href={banner.href}>
-          <Box position="relative" height={150} width="100%">
-            <LazyImage
-              fill
-              alt="banner"
-              src={banner.url}
-              style={{ objectFit: "cover", objectPosition: "center center" }}
-            />
-          </Box>
-        </Link>
-      ) : null}
-    </ColumnList>
-  );
-}

package/src/components/_components/categories/mega-menu/mega-menu-2.tsx

@@ -1,37 +0,0 @@
-// LOCAL CUSTOM COMPONENTS
-import OfferBanner from "./banner";
-import ColumnList from "./column-list";
-import CategoryMenuItem from "../category-list-item/index";
-// STYLED COMPONENT
-import { StyledRoot } from "./styles";
-// DATA TYPE
-import { CategoryHierarchy } from "@/lib/category-helpers";
-
-// =======================================================================
-interface Props {
-  data: CategoryHierarchy[];
-}
-// =======================================================================
-
-export default function MegaMenu2({ data }: Props) {
-  return (
-    <StyledRoot elevation={2}>
-      {data.map((item) => (
-        <CategoryMenuItem
-          href={`/products/${item.Url}`}
-          //icon={item.icon} // No icon information
-          key={item.RecordId}
-          title={item.Name ?? ""}
-          caret={!!(item.Children && item.Children.length)}
-          render={
-            item.Children?.length ? (
-              <ColumnList minWidth={550} list={item.Children}>
-                <OfferBanner />
-              </ColumnList>
-            ) : null
-          }
-        />
-      ))}
-    </StyledRoot>
-  );
-}

package/src/components/_components/categories/mega-menu/styles.ts

@@ -1,25 +0,0 @@
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENT
-export const StyledRoot = styled(Card)(({ theme }) => ({
-  marginLeft: "1rem",
-  paddingBlock: "0.5rem",
-  "& .title-link, & .child-link": {
-    color: "inherit",
-    fontWeight: 600,
-    display: "block",
-    padding: "0.5rem 0px",
-  },
-  "& .child-link": {
-    fontWeight: 400,
-  },
-  "& .mega-menu-content": {
-    borderRadius: 4,
-    marginLeft: "1rem",
-    padding: "0.5rem 0px",
-    boxShadow: theme.shadows[3],
-    transition: "all 250ms ease-in-out",
-    backgroundColor: theme.palette.background.paper,
-  },
-}));

package/src/components/_components/categories/types.ts

@@ -1,16 +0,0 @@
-import { SvgIconComponent } from "@mui/icons-material";
-
-export interface CategoryItemOffer {
-  url: string;
-  href: string;
-  position: "right" | "bottom";
-}
-
-export interface CategoryItem {
-  href: string;
-  title: string;
-  component?: string;
-  icon?: SvgIconComponent;
-  children?: CategoryItem[];
-  offer?: CategoryItemOffer;
-}

package/src/components/_components/category-cards/category-card-1/category-card-1.tsx

@@ -1,21 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { H4 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import LazyImage from "@evenicanpm/storefront-core/src/components/_components/LazyImage";
-// STYLED COMPONENTS
-import { CategoryTitle, Wrapper } from "./styles";
-
-// ============================================================
-type Props = { image: string; title: string };
-// ============================================================
-
-export default function CategoryCard1({ image, title }: Props) {
-  return (
-    <Wrapper>
-      <LazyImage src={image} width={213} height={213} alt="category" />
-
-      <CategoryTitle className="category-title">
-        <H4>{title}</H4>
-      </CategoryTitle>
-    </Wrapper>
-  );
-}

package/src/components/_components/category-cards/category-card-1/index.ts

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

package/src/components/_components/category-cards/category-card-1/styles.ts

@@ -1,37 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENTS
-export const Wrapper = styled("div")(({ theme }) => ({
-  height: "100%",
-  cursor: "pointer",
-  overflow: "hidden",
-  borderRadius: "4px",
-  position: "relative",
-  img: {
-    height: "100%",
-    objectFit: "cover",
-    transition: "all 0.3s",
-    objectPosition: "center center",
-  },
-  ":hover": {
-    img: { transform: "scale(1.1)" },
-    ".category-title": {
-      color: theme.palette.common.white,
-      backgroundColor: theme.palette.primary.dark,
-    },
-  },
-}));
-
-export const CategoryTitle = styled("div")({
-  left: 10,
-  right: 10,
-  bottom: 10,
-  padding: 8,
-  textAlign: "center",
-  borderRadius: "2px",
-  position: "absolute",
-  transition: "all 0.3s",
-  backgroundColor: "rgba(255,255,255, .67)",
-});

package/src/components/_components/countdown/count-box.tsx

@@ -1,19 +0,0 @@
-import {
-  H3,
-  Span,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-
-// ==============================================================
-type Props = { digit: number; title: string };
-// ==============================================================
-
-export default function CountBox({ digit = 365, title = "DAYS" }: Props) {
-  return (
-    <H3>
-      {digit}{" "}
-      <Span color="grey.600" fontSize={14} fontWeight={600}>
-        {title}
-      </Span>
-    </H3>
-  );
-}

package/src/components/_components/countdown/count-down.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-// GLOBAL CUSTOM COMPONENT
-import FlexBetween from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-between";
-// Local CUSTOM COMPONENT
-import CountBox from "./count-box";
-import useCountDown from "./useCountDown";
-
-// ==============================================================
-type Props = { expireDate: number };
-// ==============================================================
-
-export default function Countdown({ expireDate }: Props) {
-  const { timeLeft } = useCountDown({ expireDate });
-
-  return (
-    <FlexBetween width="90%" height="auto">
-      <CountBox digit={timeLeft.days} title="DAYS" />
-      <CountBox digit={timeLeft.hours} title="HOURS" />
-      <CountBox digit={timeLeft.minutes} title="MINS" />
-      <CountBox digit={timeLeft.seconds} title="SECS" />
-    </FlexBetween>
-  );
-}

package/src/components/_components/countdown/index.tsx

@@ -1,2 +0,0 @@
-export { default as Countdown } from "./count-down";
-export { default as useCountDown } from "./useCountDown";

package/src/components/_components/countdown/useCountDown.ts

@@ -1,41 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-
-const initialState = {
-  days: 0,
-  hours: 0,
-  minutes: 0,
-  seconds: 0,
-};
-
-// ==============================================================
-type Props = { expireDate: number };
-// ==============================================================
-
-export default function useCountDown({ expireDate }: Props) {
-  const [timeLeft, setTimeLeft] = useState(initialState);
-
-  const calculateTimeLeft = useCallback(() => {
-    const distance = expireDate - new Date().getTime();
-    // if date expire
-    if (distance < 0) return initialState;
-
-    return {
-      days: Math.floor(distance / (1000 * 60 * 60 * 24)),
-      hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-      minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
-      seconds: Math.floor((distance % (1000 * 60)) / 1000),
-    };
-  }, [expireDate]);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [calculateTimeLeft]);
-
-  return { timeLeft };
-}

package/src/components/_components/data-table/index.ts

@@ -1,2 +0,0 @@
-export { default as TableHeader } from "./table-header";
-export { default as TablePagination } from "./table-pagination";