@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/components-v2/carousel/components/carousel-arrows.tsx

@@ -1,60 +1,54 @@
-import { CustomArrowProps } from "react-slick"; // Installed react slick package for fixing error
+import { Settings, CustomArrowProps } from "react-slick";
 import { SxProps, Theme } from "@mui/material/styles";
 // MUI ICON COMPONENTS
 import ArrowBack from "@mui/icons-material/ArrowBack";
 import ArrowForward from "@mui/icons-material/ArrowForward";
 // STYLED COMPONENT
-import { ArrowButton } from "../styles/index";
+import { ArrowButton } from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
 
-// ==============================================================
-interface ArrowProps extends CustomArrowProps {
+type ArrowConfig = {
   sx?: SxProps<Theme>;
-}
-// ==============================================================
-
-function NextArrow({ onClick, sx, className }: ArrowProps) {
-  const updatedClassName =
-    className ||
-    ""
-      .split(" ")
-      .filter((item: string) => item !== "slick-next")
-      .join(" ");
+  // optionally allow custom components:
+  NextArrow?: React.ComponentType<CustomArrowProps & { sx?: SxProps<Theme> }>;
+  PrevArrow?: React.ComponentType<CustomArrowProps & { sx?: SxProps<Theme> }>;
+};
 
-  return (
-    <ArrowButton
-      right={0}
-      onClick={onClick}
-      className={`next ${updatedClassName}`}
-      sx={{ ...sx }}
-    >
-      <ArrowForward fontSize="small" color="inherit" className="forward-icon" />
-    </ArrowButton>
-  );
-}
+const DefaultNextArrow: React.FC<
+  CustomArrowProps & { sx?: SxProps<Theme> }
+> = ({ onClick, className, sx }) => (
+  <ArrowButton
+    right={0}
+    onClick={onClick}
+    className={`next ${className || ""}`}
+    sx={{ ...sx }}
+  >
+    <ArrowForward fontSize="small" color="inherit" />
+  </ArrowButton>
+);
 
-function PrevArrow({ onClick, sx, className }: ArrowProps) {
-  const updatedClassName =
-    className ||
-    ""
-      .split(" ")
-      .filter((item: string) => item !== "slick-prev")
-      .join(" ");
-
-  return (
-    <ArrowButton
-      left={0}
-      onClick={onClick}
-      className={`prev ${updatedClassName}`}
-      sx={{ ...sx }}
-    >
-      <ArrowBack fontSize="small" color="inherit" className="back-icon" />
-    </ArrowButton>
-  );
-}
+const DefaultPrevArrow: React.FC<
+  CustomArrowProps & { sx?: SxProps<Theme> }
+> = ({ onClick, className, sx }) => (
+  <ArrowButton
+    left={0}
+    onClick={onClick}
+    className={`prev ${className || ""}`}
+    sx={{ ...sx }}
+  >
+    <ArrowBack fontSize="small" color="inherit" />
+  </ArrowButton>
+);
 
-export default function CarouselArrows(sx?: SxProps<Theme>) {
+/**
+ * If you want to compute and spread settings manually:
+ * <Carousel {...createArrows({ sx: {...} })} {...createDots({ dotColor: "green" })} />
+ */
+export function createArrows(cfg: ArrowConfig = {}): Partial<Settings> {
+  const Next = cfg.NextArrow ?? DefaultNextArrow;
+  const Prev = cfg.PrevArrow ?? DefaultPrevArrow;
   return {
-    nextArrow: <NextArrow sx={sx} />,
-    prevArrow: <PrevArrow sx={sx} />,
+    nextArrow: <Next sx={cfg.sx} />,
+    prevArrow: <Prev sx={cfg.sx} />,
+    arrows: true,
   };
 }

package/src/components-v2/carousel/components/carousel-dots.tsx

@@ -1,21 +1,21 @@
-import { ReactNode } from "react";
-import { BoxProps } from "@mui/material/Box";
+import { Settings } from "react-slick";
+import { SxProps, Theme } from "@mui/material/styles";
 // STYLED COMPONENTS
-import { Dot, DotList } from "../styles/index";
+import {
+  Dot,
+  DotList,
+} from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
 
-// ==============================================================
-interface Props extends BoxProps {
+type DotConfig = {
   dotColor?: string;
-}
-// ==============================================================
-
-export default function CarouselDots({ dotColor, ...props }: Props) {
+  sx?: SxProps<Theme>;
+};
+export function createDots(cfg: DotConfig = {}): Partial<Settings> {
   return {
-    customPaging: () => <Dot dotColor={dotColor} />,
-    appendDots: (dots: ReactNode) => (
-      <DotList component="ul" {...props}>
-        {dots}
-      </DotList>
+    customPaging: () => <Dot dotColor={cfg.dotColor} />,
+    appendDots: (dots: React.ReactNode) => (
+      <DotList sx={{ ...cfg.sx }}>{dots}</DotList>
     ),
+    dots: true,
   };
 }

package/src/components-v2/carousel/index.ts

@@ -1,3 +1 @@
-export { default as Carousel } from "./carousel";
-export { default as CarouselDots } from "./components/carousel-dots";
-export { default as CarouselArrows } from "./components/carousel-arrows";
+export { default as Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/carousel";

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

@@ -1,64 +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";
+import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/carousel-cards/carousel-card-1/styles";
 
-// ==================================================
-interface Props {
-  title?: string;
-  imgUrl?: string;
-  buttonLink?: string;
-  buttonText?: string;
-  description?: string;
-  buttonColor?: "dark" | "primary";
-}
-// ==================================================
+type CarouselCard1Props = {
+  children: ReactNode;
+};
 
-export default function CarouselCard1({
-  title,
-  imgUrl,
-  buttonLink,
-  buttonText,
-  description,
-}: Props) {
+const CarouselCard1 = ({ children }: CarouselCard1Props) => {
   return (
     <StyledRoot>
       <Grid container spacing={3} alignItems="center">
-        <Grid className="Grid2-item" size={{ xl: 4, md: 5, sm: 6, xs: 12 }}>
-          <h1 className="title">{title}</h1>
-          <Paragraph color="secondary.main" mb={2.7}>
-            {description}
-          </Paragraph>
-
-          <a href={buttonLink}>
-            <Button
-              size="large"
-              disableElevation
-              variant="contained"
-              className="button-link"
-              sx={{ height: 44, borderRadius: "4px" }}
-            >
-              {buttonText}
-            </Button>
-          </a>
-        </Grid>
-
-        <Grid size={{ xl: 8, md: 7, sm: 6, xs: 12 }}>
-          <BazaarImage
-            src={imgUrl ?? ""}
-            alt="apple-watch-1"
-            sx={{
-              mx: "auto",
-              maxHeight: 400,
-              display: "block",
-              maxWidth: "100%",
-            }}
-          />
-        </Grid>
+        {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

@@ -1 +1 @@
-export { default } from "./carousel-card-1";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/carousel-cards/carousel-card-1/carousel-card-1";

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

@@ -1,59 +1,104 @@
-import { ReactNode } from "react";
-import CategoryListItem from "../category-list-item/index";
-import { StyledRoot, SubMenuStyledRoot } from "./styles";
-import { Props } from "./types";
-import getCategories from "@/services/categories/queries/get-categories";
-import { CategoryHierarchy } from "@/lib/category-helpers";
+"use client";
+
+import React, { createContext, useContext, ReactNode } from "react";
+import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
+import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import {
+  StyledRoot,
+  SubMenuStyledRoot,
+} from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/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 "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
 
 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 = [];
+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) => renderRecursiveMenu(children, true),
+    default: (children) => <CategoryList.SubMenu items={children} />,
     "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 (
+    <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>
+  );
+};
 
-  return renderRecursiveMenu(categories, false);
+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

@@ -1 +1 @@
-export { default } from "./category-list";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/category-list";

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

@@ -1,9 +1,15 @@
 import styled from "@mui/material/styles/styled";
-import { Props } from "./types";
+import { Props } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/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 = styled("div", {
+export const StyledRoot: React.FC<StyledRootProps> = styled("div", {
   shouldForwardProp: (prop) => prop !== "position" && prop !== "open",
 })<Props>(({ theme, position, open }) => ({
   left: 0,

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

@@ -4,7 +4,7 @@ import { ReactNode } from "react";
 import { SvgIconComponent } from "@mui/icons-material";
 import ChevronRight from "@mui/icons-material/ChevronRight";
 // STYLED COMPONENT
-import { Wrapper } from "./styles";
+import { Wrapper } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/styles";
 
 // =============================================================
 interface Props {

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

@@ -1 +1 @@
-export { default } from "./category-menu-item";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/category-menu-item";

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

@@ -2,7 +2,7 @@
 
 import { MouseEvent, useCallback, useEffect, useState } from "react";
 import styled from "@mui/material/styles/styled";
-import CategoryList from "./category-list/index";
+import CategoryList from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/index";
 
 // STYLED COMPONENT
 const Wrapper = styled("div", {
@@ -26,6 +26,8 @@ type Props = {
 };
 // ===========================================================
 
+// 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);
 

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

@@ -1,18 +1,24 @@
+"use client";
+
+import { ReactNode } from "react";
 import Link from "next/link";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
+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";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 
-export default function OfferBanner() {
+interface RootProps {
+  href: string;
+  children?: ReactNode;
+}
+const OfferBanner = ({ href, children }: RootProps) => {
   return (
-    <Link href="/sale-page-2">
+    <Link href={href}>
       <Grid
         className="h-full"
         container
@@ -21,40 +27,65 @@ export default function OfferBanner() {
         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>
+        {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;