@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/carousel-cards/carousel-card-1/carousel-card-1.tsx

@@ -0,0 +1,83 @@
+import { ReactNode } from "react";
+import Grid from "@mui/material/Grid2";
+import Button from "@mui/material/Button";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENT
+import { StyledRoot } from "./styles";
+
+type CarouselCard1Props = {
+  children: ReactNode;
+};
+
+const CarouselCard1 = ({ children }: CarouselCard1Props) => {
+  return (
+    <StyledRoot>
+      <Grid container spacing={3} alignItems="center">
+        {children}
+      </Grid>
+    </StyledRoot>
+  );
+};
+
+CarouselCard1.Info = ({ children }: { children: ReactNode }) => {
+  return (
+    <Grid className="Grid2-item" size={{ xl: 4, md: 5, sm: 6, xs: 12 }}>
+      {children}
+    </Grid>
+  );
+};
+
+CarouselCard1.Title = ({ title }: { title?: string }) => {
+  return <h1 className="title">{title}</h1>;
+};
+
+CarouselCard1.Description = ({ description }: { description?: string }) => {
+  return (
+    <Paragraph color="secondary.main" mb={2.7}>
+      {description}
+    </Paragraph>
+  );
+};
+
+CarouselCard1.Button = ({
+  buttonLink,
+  buttonText,
+}: {
+  buttonLink?: string;
+  buttonText?: string;
+}) => {
+  return (
+    <a href={buttonLink}>
+      <Button
+        size="large"
+        disableElevation
+        variant="contained"
+        className="button-link"
+        sx={{ height: 44, borderRadius: "4px" }}
+      >
+        {buttonText}
+      </Button>
+    </a>
+  );
+};
+
+CarouselCard1.Image = ({ imgUrl }: { imgUrl?: string }) => {
+  return (
+    <Grid size={{ xl: 8, md: 7, sm: 6, xs: 12 }}>
+      <BazaarImage
+        src={imgUrl ?? ""}
+        alt="carousel card image"
+        sx={{
+          mx: "auto",
+          maxHeight: 400,
+          display: "block",
+          maxWidth: "100%",
+        }}
+      />
+    </Grid>
+  );
+};
+
+export default CarouselCard1;

package/src/components-v2/carousel-cards/carousel-card-1/index.ts

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

package/src/components-v2/carousel-cards/carousel-card-1/styles.ts

@@ -0,0 +1,34 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const StyledRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  ".title": {
+    fontSize: 50,
+    marginTop: 0,
+    lineHeight: 1.2,
+    marginBottom: "1.35rem",
+  },
+  [theme.breakpoints.up("sm")]: {
+    ".grid-item": {
+      minHeight: 424,
+      display: "flex",
+      alignItems: "baseline",
+      flexDirection: "column",
+      justifyContent: "center",
+    },
+  },
+  [theme.breakpoints.down("sm")]: {
+    marginLeft: 0,
+    paddingLeft: 0,
+    ".title": { fontSize: 32 },
+  },
+  [theme.breakpoints.down("xs")]: {
+    ".title": { fontSize: 16 },
+    ".title + *": { fontSize: 13 },
+    ".button-link": { height: 36, padding: "0 1.5rem", fontSize: 13 },
+  },
+}));

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

@@ -0,0 +1,101 @@
+"use client";
+
+import React, { createContext, useContext, ReactNode } from "react";
+import getCategories from "@/services/categories/queries/get-categories";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+import { StyledRoot, SubMenuStyledRoot } from "./styles";
+
+import MegaMenu1 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-1";
+import MegaMenu2 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-2";
+import CategoryListItem from "../category-list-item/index";
+
+type MegaMenuType = "default" | "mega-menu-1" | "mega-menu-2";
+
+interface CategoryListContextValue {
+  open?: boolean;
+  position: "absolute" | "relative";
+  megaMenuRenderers: Record<
+    MegaMenuType,
+    (children: CategoryHierarchy[]) => ReactNode
+  >;
+}
+
+const CategoryListContext = createContext<CategoryListContextValue | null>(
+  null,
+);
+
+interface RootProps {
+  open?: boolean;
+  position?: "absolute" | "relative";
+  categories?: CategoryHierarchy[];
+  children?: ReactNode;
+}
+
+const CategoryList = ({
+  open,
+  position = "absolute",
+  categories,
+  children,
+}: RootProps) => {
+  let { data: fetchedCategories } = getCategories.useSuspenseData();
+  const cats = categories ?? fetchedCategories ?? [];
+
+  const megaMenuRenderers: Record<
+    MegaMenuType,
+    (children: CategoryHierarchy[]) => ReactNode
+  > = {
+    default: (children) => <CategoryList.SubMenu items={children} />,
+    "mega-menu-1": (children) => <MegaMenu1 data={children} />,
+    "mega-menu-2": (children) => <MegaMenu2 data={children} />,
+  };
+
+  return (
+    <CategoryListContext.Provider value={{ open, position, megaMenuRenderers }}>
+      <StyledRoot elevation={2} open={open} position={position}>
+        {children ??
+          cats.map((c) => <CategoryList.Item key={c.RecordId} category={c} />)}
+      </StyledRoot>
+    </CategoryListContext.Provider>
+  );
+};
+
+interface ItemProps {
+  category: CategoryHierarchy;
+}
+CategoryList.Item = ({ category }: ItemProps) => {
+  const ctx = useContext(CategoryListContext);
+  if (!ctx) return null;
+  const { megaMenuRenderers } = ctx;
+  const { RecordId, Name, Url, Children } = category;
+  const hasChildren = !!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}
+    />
+  );
+};
+
+interface SubMenuProps {
+  items: CategoryHierarchy[];
+}
+CategoryList.SubMenu = ({ items }: SubMenuProps) => {
+  return (
+    <SubMenuStyledRoot elevation={2}>
+      {items.map((c) => (
+        <CategoryList.Item key={c.RecordId} category={c} />
+      ))}
+    </SubMenuStyledRoot>
+  );
+};
+
+export default CategoryList;

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

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

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

@@ -0,0 +1,35 @@
+import styled from "@mui/material/styles/styled";
+import { Props } from "./types";
+import Card from "@mui/material/Card";
+
+interface StyledRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  elevation: number;
+  open?: boolean;
+  position: "absolute" | "relative";
+}
+
+// styled component
+export const StyledRoot: React.FC<StyledRootProps> = 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-v2/categories/category-list/types.ts

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

package/src/components-v2/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-v2/categories/category-list-item/index.ts

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

package/src/components-v2/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-v2/categories/category-menu.tsx

@@ -0,0 +1,53 @@
+"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;
+};
+// ===========================================================
+
+// CategoryMenu is acting purely as a configuration/wiring component,
+// not as a reusable UI element that needs further extensibility.
+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-v2/categories/mega-menu/banner.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { ReactNode } from "react";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import {
+  H3,
+  Paragraph,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+interface RootProps {
+  href: string;
+  children?: ReactNode;
+}
+const OfferBanner = ({ href, children }: RootProps) => {
+  return (
+    <Link href={href}>
+      <Grid
+        className="h-full"
+        container
+        spacing={0}
+        wrap="wrap-reverse"
+        alignItems="center"
+        mb={-1}
+      >
+        {children}
+      </Grid>
+    </Link>
+  );
+};
+
+interface TextProps {
+  title: string;
+  subtitle?: string;
+  ctaText?: string;
+}
+OfferBanner.Text = ({ title, subtitle, ctaText }: TextProps) => {
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <Box px={2.5}>
+        <H3 mb={1}>{title}</H3>
+        {subtitle && (
+          <Paragraph color="grey.600" mb={1}>
+            {subtitle}
+          </Paragraph>
+        )}
+        {ctaText && (
+          <Small
+            fontWeight="700"
+            borderBottom="2px solid"
+            borderColor="primary.main"
+          >
+            {ctaText}
+          </Small>
+        )}
+      </Box>
+    </Grid>
+  );
+};
+
+interface ImageProps {
+  src: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+}
+OfferBanner.Image = ({
+  src,
+  alt = "",
+  width = 292,
+  height = 195,
+}: ImageProps) => {
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <FlexBox
+        height="160px"
+        position="relative"
+        flexDirection="column"
+        justifyContent="flex-end"
+      >
+        <LazyImage alt={alt} width={width} height={height} src={src} />
+      </FlexBox>
+    </Grid>
+  );
+};
+
+export default OfferBanner;

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

@@ -0,0 +1,77 @@
+"use client";
+
+import { PropsWithChildren, ReactNode, createContext, useContext } from "react";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import { StyledRoot } from "./styles";
+
+interface RootProps extends PropsWithChildren {
+  minWidth?: number;
+}
+const ColumnList = ({ minWidth = 760, children }: RootProps) => {
+  return (
+    <StyledRoot elevation={2} sx={{ minWidth }}>
+      <FlexBox px={2.5}>{children}</FlexBox>
+    </StyledRoot>
+  );
+};
+
+interface WrapperProps {
+  children: ReactNode;
+}
+ColumnList.Wrapper = ({ children }: WrapperProps) => {
+  return (
+    <Box flex="1 1 0">
+      <Grid container spacing={4}>
+        {children}
+      </Grid>
+    </Box>
+  );
+};
+
+interface ColumnProps {
+  title: string;
+  children?: ReactNode;
+}
+ColumnList.Column = ({ title, children }: ColumnProps) => {
+  return (
+    <Grid size={3}>
+      <div className="title-link">{title}</div>
+      {children}
+    </Grid>
+  );
+};
+
+interface LinkProps {
+  href: string;
+  children: ReactNode;
+}
+ColumnList.Link = ({ href, children }: LinkProps) => {
+  return (
+    <NavLink className="child-link" href={href}>
+      {children}
+    </NavLink>
+  );
+};
+
+interface BannerProps {
+  href: string;
+  url: string;
+  width?: number;
+  height?: number;
+}
+ColumnList.Banner = ({ href, url, width = 137, height = 318 }: BannerProps) => {
+  return (
+    <Box mt={1.5}>
+      <Link href={href}>
+        <LazyImage src={url} width={width} height={height} alt="banner" />
+      </Link>
+    </Box>
+  );
+};
+
+export default ColumnList;

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

@@ -0,0 +1,55 @@
+import Link from "next/link";
+// MUI
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/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;
+}
+// =========================================================
+
+// MegaMenu1 is acting purely as a configuration/wiring component,
+// not as a reusable UI element that needs further extensibility.
+export default function MegaMenu1({ banner, data }: Props) {
+  return (
+    <ColumnList>
+      <ColumnList.Wrapper>
+        {data.map((item) => (
+          <ColumnList.Column key={item.RecordId} title={item.Name}>
+            {item.Children?.map((sub) => (
+              <ColumnList.Link key={sub.RecordId} href={`/products/${sub.Url}`}>
+                {sub.Name}
+              </ColumnList.Link>
+            ))}
+          </ColumnList.Column>
+        ))}
+      </ColumnList.Wrapper>
+
+      {banner?.position === "right" && (
+        <ColumnList.Banner href={banner.href} url={banner.url} />
+      )}
+
+      {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-v2/categories/mega-menu/mega-menu-2.tsx

@@ -0,0 +1,67 @@
+// 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[];
+}
+// =======================================================================
+
+// MegaMenu2 is acting purely as a configuration/wiring component,
+// not as a reusable UI element that needs further extensibility.
+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}>
+                <ColumnList.Wrapper>
+                  {item.Children.map((childItem) => (
+                    <ColumnList.Column
+                      key={childItem.RecordId}
+                      title={childItem.Name}
+                    >
+                      {childItem.Children?.map((sub) => (
+                        <ColumnList.Link
+                          key={sub.RecordId}
+                          href={`/products/${sub.Url}`}
+                        >
+                          {sub.Name}
+                        </ColumnList.Link>
+                      ))}
+                    </ColumnList.Column>
+                  ))}
+                </ColumnList.Wrapper>
+                {/* Sample offer banner */}
+                <OfferBanner href="/sale-page-2">
+                  <OfferBanner.Text
+                    title="Big Sale Upto 60% Off"
+                    subtitle="Handcrafted from genuine Italian Leather"
+                    ctaText="SHOP NOW"
+                  />
+                  <OfferBanner.Image
+                    src="/assets/images/models/model-1.png"
+                    alt="model"
+                  />
+                </OfferBanner>
+              </ColumnList>
+            ) : null
+          }
+        />
+      ))}
+    </StyledRoot>
+  );
+}