@evenicanpm/storefront-core 1.0.0-alpha

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

@@ -0,0 +1,37 @@
+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

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

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,51 @@
+"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

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { H3, Paragraph, Small } from "@/components/_components/Typography";
+import FlexBox from "@/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

@@ -0,0 +1,70 @@
+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 "@/components/_components/LazyImage";
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { NavLink } from "@/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

@@ -0,0 +1,37 @@
+import Link from "next/link";
+// MUI
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/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}
+              sx={{ objectFit: "cover", objectPosition: "center center" }}
+            />
+          </Box>
+        </Link>
+      ) : null}
+    </ColumnList>
+  );
+}

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

@@ -0,0 +1,37 @@
+// 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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,21 @@
+// GLOBAL CUSTOM COMPONENTS
+import { H4 } from "@/components/_components/Typography";
+import LazyImage from "@/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

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

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

@@ -0,0 +1,37 @@
+"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

@@ -0,0 +1,16 @@
+import { H3, Span } from "@/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

@@ -0,0 +1,24 @@
+"use client";
+
+// GLOBAL CUSTOM COMPONENT
+import FlexBetween from "@/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

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

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

@@ -0,0 +1,41 @@
+"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

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

package/src/components/_components/data-table/table-header.tsx

@@ -0,0 +1,91 @@
+import { ChangeEvent } from "react";
+import styled from "@mui/material/styles/styled";
+import Checkbox from "@mui/material/Checkbox";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableSortLabel from "@mui/material/TableSortLabel";
+// CUSTOM ICON COMPONENT
+import UpDown from "@/components/_components/icons/up-down";
+
+// STYLED COMPONENTS
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  fontWeight: 600,
+  padding: "16px 20px",
+  color: theme.palette.grey[900],
+}));
+
+// ----------------------------------------------------------------------
+interface Props {
+  heading: Headings[];
+  orderBy: string;
+  rowCount: number;
+  numSelected: number;
+  order: "asc" | "desc";
+  hideSelectBtn?: boolean;
+  onRequestSort: (id: string) => void;
+  onSelectAllClick?: (checked: boolean, defaultSelect: string) => void;
+}
+// ----------------------------------------------------------------------
+export type Key = string | number | bigint;
+export type Align = "inherit" | "left" | "center" | "right" | "justify";
+export type SortDirection = "asc" | "desc" | false;
+
+export type Headings = {
+  label: string;
+  align: Align;
+  key: Key;
+  sortDirection: SortDirection;
+  id: string;
+};
+// ----------------------------------------------------------------------
+export default function TableHeader(props: Props) {
+  const {
+    order,
+    heading,
+    orderBy,
+    rowCount,
+    numSelected,
+    onRequestSort,
+    onSelectAllClick,
+    hideSelectBtn = false,
+  } = props;
+
+  return (
+    <TableHead sx={{ backgroundColor: "grey.200" }}>
+      <TableRow>
+        {!hideSelectBtn ? (
+          <StyledTableCell align="left">
+            <Checkbox
+              color="info"
+              checked={rowCount > 0 && numSelected === rowCount}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                onSelectAllClick?.(event.target.checked, "product")
+              }
+            />
+          </StyledTableCell>
+        ) : null}
+
+        {heading.map((headCell) => (
+          <StyledTableCell
+            key={headCell.id}
+            align={headCell.align}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              onClick={() => onRequestSort(headCell.id)}
+              direction={orderBy === headCell.id ? order : "asc"}
+              sx={{ "& .MuiTableSortLabel-icon": { opacity: 1 } }}
+              IconComponent={() => (
+                <UpDown sx={{ fontSize: 14, ml: 1, color: "grey.600" }} />
+              )}
+            >
+              {headCell.label}
+            </TableSortLabel>
+          </StyledTableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}

package/src/components/_components/data-table/table-pagination.tsx

@@ -0,0 +1,36 @@
+import Pagination, { PaginationProps } from "@mui/material/Pagination";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+const StyledPagination = styled(Pagination)(({ theme }) => ({
+  "& .MuiPaginationItem-root": {
+    fontSize: 14,
+    fontWeight: 500,
+    color: theme.palette.grey[900],
+    border: `1px solid transparent`,
+  },
+  "& .MuiPaginationItem-page:hover": {
+    borderRadius: 20,
+    backgroundColor: "transparent",
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+  },
+  "& .MuiPaginationItem-page.Mui-selected": {
+    borderRadius: 20,
+    backgroundColor: "transparent",
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+    ":hover": { backgroundColor: "transparent" },
+  },
+  "& .MuiPaginationItem-previousNext": {
+    margin: 10,
+    borderRadius: 20,
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+    "&:hover": { backgroundColor: "transparent" },
+  },
+}));
+
+export default function TablePagination(props: PaginationProps) {
+  return <StyledPagination {...props} />;
+}

package/src/components/_components/flex-box/flex-between.tsx

@@ -0,0 +1,14 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexBetween({ children, ...props }: BoxProps) {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}