@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,68 +1,102 @@
 "use client";
 
-import { PropsWithChildren, forwardRef } from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { SxProps, Theme, useTheme } from "@mui/material/styles";
-import SlickCarousel, { Settings } from "react-slick";
 import Slider from "react-slick";
-// LOCAL CUSTOM COMPONENTS
-import CarouselDots from "./components/carousel-dots";
-import CarouselArrows from "./components/carousel-arrows";
-// SLICK CAROUSEL CSS
+import { Settings, CustomArrowProps } from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-// STYLED COMPONENT
+import { createArrows } from "./components/carousel-arrows";
+import { createDots } from "./components/carousel-dots";
 import { RootStyle } from "./styles/index";
 
-// ==============================================================
-interface Props extends PropsWithChildren, Settings {
+type ArrowConfig = {
+  sx?: SxProps<Theme>;
+  // optionally allow custom components:
+  NextArrow?: React.ComponentType<CustomArrowProps & { sx?: SxProps<Theme> }>;
+  PrevArrow?: React.ComponentType<CustomArrowProps & { sx?: SxProps<Theme> }>;
+};
+
+type DotConfig = {
   dotColor?: string;
-  spaceBetween?: number;
-  dotStyles?: SxProps<Theme>;
+  sx?: SxProps<Theme>;
+};
+
+export interface CarouselProps
+  extends PropsWithChildren<Omit<Settings, "arrows" | "dots">> {
+  arrows?: boolean | ArrowConfig;
+  dots?: boolean | DotConfig;
+
+  // backward-compatible convenience props
   arrowStyles?: SxProps<Theme>;
-  dots?: boolean;
-  arrows?: boolean;
-  slidesToShow?: number;
+  dotColor?: string;
+  dotStyles?: SxProps<Theme>;
+
+  // layout helpers
+  spaceBetween?: number;
   height?: number;
-  autoplay?: boolean;
-  autoplaySpeed?: number;
 }
-// ==============================================================
 
-const Carousel = forwardRef<Slider, Props>((props, ref) => {
+const Carousel = forwardRef<Slider, CarouselProps>((props, ref) => {
+  const theme = useTheme();
+
   const {
-    dotColor,
     children,
-    arrowStyles,
-    dots = false,
-    arrows = true,
-    slidesToShow = 4,
     spaceBetween = 10,
-    dotStyles = { mt: 4 },
     height = 400,
     autoplay = false,
     autoplaySpeed = 3000,
+    arrowStyles,
+    dotColor,
+    dotStyles,
+    arrows,
+    dots,
     ...others
   } = props;
 
-  const theme = useTheme();
-
-  const settings: Settings = {
-    dots,
-    arrows,
-    slidesToShow,
+  // base settings from others (these come from props or react-slick Settings)
+  const baseSettings: Settings = {
+    rtl: theme.direction === "rtl",
     autoplay,
     autoplaySpeed,
-    rtl: theme.direction === "rtl",
-    ...CarouselArrows(arrowStyles),
-    ...CarouselDots({ dotColor, sx: dotStyles }),
     ...others,
   };
 
+  // compute final settings
+  const finalSettings: Settings = { ...baseSettings };
+
+  // ---- arrows handling ----
+  // Priority:
+  // 1. arrows prop is object -> use its config
+  // 2. arrowStyles prop provided -> use default arrow components with that sx
+  // 3. arrows === true -> let react-slick render default arrows (no custom nextArrow/prevArrow)
+  if (typeof arrows === "object") {
+    Object.assign(finalSettings, createArrows(arrows));
+  } else if (arrowStyles) {
+    Object.assign(finalSettings, createArrows({ sx: arrowStyles }));
+  } else if (arrows === true) {
+    finalSettings.arrows = true;
+  } else {
+    finalSettings.arrows = Boolean(arrows); // false or undefined -> false
+  }
+
+  // ---- dots handling ----
+  if (typeof dots === "object") {
+    Object.assign(finalSettings, createDots(dots));
+  } else if (dotColor || dotStyles) {
+    Object.assign(
+      finalSettings,
+      createDots({ dotColor: dotColor, sx: dotStyles }),
+    );
+  } else {
+    finalSettings.dots = Boolean(dots);
+  }
+
   return (
     <RootStyle space={spaceBetween} sx={{ height, paddingBottom: "25px" }}>
-      <SlickCarousel ref={ref} {...settings}>
+      <Slider ref={ref} {...finalSettings}>
         {children}
-      </SlickCarousel>
+      </Slider>
     </RootStyle>
   );
 });

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

@@ -1,4 +1,4 @@
-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";
@@ -6,55 +6,49 @@ import ArrowForward from "@mui/icons-material/ArrowForward";
 // STYLED COMPONENT
 import { ArrowButton } from "../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,18 @@
-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";
 
-// ==============================================================
-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";

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

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import Grid from "@mui/material/Grid2";
 import Button from "@mui/material/Button";
 // GLOBAL CUSTOM COMPONENTS
@@ -6,59 +7,77 @@ import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typogra
 // STYLED COMPONENT
 import { StyledRoot } from "./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/categories/category-list/category-list.tsx

@@ -1,59 +1,101 @@
-import { ReactNode } from "react";
-import CategoryListItem from "../category-list-item/index";
-import { StyledRoot, SubMenuStyledRoot } from "./styles";
-import { Props } from "./types";
+"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";
 
-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/styles.ts

@@ -2,8 +2,14 @@ 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 = 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-menu.tsx

@@ -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);