@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/navbar/nav-list/nav-list.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
+// import { useContext as useReactContext } from "react";
+import MenuItem from "@mui/material/MenuItem";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import MegaMenu from "../mega-menu";
+import CategoryBasedMenu from "../category-based-menu";
+import { StyledNavLink, NAV_LINK_STYLES, ChildNavListWrapper } from "../styles";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import {
+  transformCmsNav,
+  TransformedNavItem,
+} from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import NavItemChild from "./nav-item-child";
+
+type NavigationContextValue = {
+  list: TransformedNavItem[];
+};
+const NavigationContext = createContext<NavigationContextValue | undefined>(
+  undefined,
+);
+
+export default function Navigation({ children }: { children?: ReactNode }) {
+  const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
+  return (
+    <NavigationContext.Provider value={{ list: cmsList }}>
+      <FlexBox gap={4}>{children ?? <Navigation.List />}</FlexBox>
+    </NavigationContext.Provider>
+  );
+}
+
+Navigation.List = function List() {
+  const ctx = useContext(NavigationContext);
+  if (!ctx) return null;
+  return (
+    <>
+      {ctx.list.map((nav) => (
+        <Navigation.Item key={nav.title} nav={nav} isRoot />
+      ))}
+    </>
+  );
+};
+
+Navigation.Item = function Item({
+  nav,
+  isRoot = false,
+}: {
+  nav: TransformedNavItem;
+  isRoot?: boolean;
+}) {
+  const { href, title, items, menuType } = nav;
+  const hasChildren = !!(items && items.length);
+
+  if (isRoot) {
+    if (menuType === "mega-menu") {
+      return (
+        <MegaMenu title={title}>
+          <MegaMenu.Container>
+            {nav.items
+              .map((i) => [i])
+              .map((column, i) => (
+                <MegaMenu.Column
+                  key={i}
+                  count={nav.items.map((i) => [i]).length}
+                >
+                  {column.map((cat) => (
+                    <MegaMenu.Category key={cat.title} title={cat.title}>
+                      {cat.items.map((sub) => (
+                        <MegaMenu.Item key={sub.title} href={sub.href}>
+                          {sub.title}
+                        </MegaMenu.Item>
+                      ))}
+                    </MegaMenu.Category>
+                  ))}
+                </MegaMenu.Column>
+              ))}
+          </MegaMenu.Container>
+        </MegaMenu>
+      );
+    }
+    if (menuType === "full-screen-mega-menu") {
+      return (
+        <CategoryBasedMenu key={title} title={title} menuList={nav.items}>
+          <CategoryBasedMenu.MainList />
+          <CategoryBasedMenu.Section />
+        </CategoryBasedMenu>
+      );
+    }
+    if (href && !hasChildren) {
+      return <StyledNavLink href={href}>{title}</StyledNavLink>;
+    }
+    if (hasChildren) {
+      return (
+        <FlexBox
+          alignItems="center"
+          position="relative"
+          flexDirection="column"
+          sx={{
+            "&:hover": { "& > .child-nav-item": { display: "block" } },
+          }}
+        >
+          <FlexBox alignItems="flex-end" gap={0.3} sx={NAV_LINK_STYLES}>
+            {title}{" "}
+            <KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
+          </FlexBox>
+          <ChildNavListWrapper className="child-nav-item">
+            <BazaarCard elevation={3} sx={{ mt: 2.5, py: 1, minWidth: 100 }}>
+              {items.map((child) => (
+                <Navigation.Item key={child.title} nav={child} />
+              ))}
+            </BazaarCard>
+          </ChildNavListWrapper>
+        </FlexBox>
+      );
+    }
+  } else {
+    if (href && !hasChildren) {
+      return (
+        <NavLink href={href}>
+          <MenuItem>{title}</MenuItem>
+        </NavLink>
+      );
+    }
+    if (hasChildren) {
+      return (
+        <Navigation.Child nav={nav}>
+          {items.map((child) => (
+            <Navigation.Item key={child.title} nav={child} />
+          ))}
+        </Navigation.Child>
+      );
+    }
+  }
+  return null;
+};
+
+Navigation.Child = NavItemChild;

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

@@ -0,0 +1,95 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+// LOCAL CUSTOM COMPONENTS
+import Categories from "./categories";
+import NavigationList from "./nav-list/index";
+
+// STYLED COMPONENTS
+import { NavBarWrapper, InnerContainer } from "./styles";
+
+/**
+ * Usage Examples:
+ * 
+ * Default Behavior
+<Navbar />
+
+*** Custom Layout (reorder/override)
+<Navbar>
+  <Navbar.Content>
+    <Navbar.Navigation />
+    <Navbar.Categories />
+  </Navbar.Content>
+</Navbar>
+
+*** Custom Categories / Navigation
+<Navbar>
+  <Navbar.Content>
+    <CustomCategories />
+    <CustomNavigation />
+  </Navbar.Content>
+</Navbar>
+ */
+
+// ==========================================================
+interface Props {
+  border?: number;
+  elevation?: number;
+  hideCategories?: boolean;
+  children?: React.ReactNode;
+}
+
+interface NavbarContextType {
+  hideCategories: boolean;
+}
+// ==========================================================
+
+const NavbarContext = createContext<NavbarContextType>({
+  hideCategories: false,
+});
+
+export default function Navbar({
+  border = 0,
+  elevation = 2,
+  hideCategories = false,
+  children,
+}: Props) {
+  return (
+    <NavbarContext.Provider value={{ hideCategories }}>
+      <NavBarWrapper hoverEffect={false} elevation={elevation} border={border}>
+        {children ?? (
+          <Navbar.Content>
+            <Navbar.Categories />
+            <Navbar.Navigation />
+          </Navbar.Content>
+        )}
+      </NavBarWrapper>
+    </NavbarContext.Provider>
+  );
+}
+
+Navbar.Content = function NavbarContent({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { hideCategories } = useContext(NavbarContext);
+  return (
+    <InnerContainer
+      sx={hideCategories ? { justifyContent: "center" } : undefined}
+    >
+      {children}
+    </InnerContainer>
+  );
+};
+
+Navbar.Categories = function NavbarCategories() {
+  const { hideCategories } = useContext(NavbarContext);
+  if (hideCategories) return null;
+  return <Categories />;
+};
+
+Navbar.Navigation = function NavbarNavigation() {
+  return <NavigationList />;
+};

package/src/components-v2/navbar/styles.ts

@@ -0,0 +1,90 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import styled from "@mui/material/styles/styled";
+import Container from "@mui/material/Container";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+
+// COMMON STYLED OBJECT
+export const NAV_LINK_STYLES = {
+  fontWeight: 600,
+  cursor: "pointer",
+  transition: "color 150ms ease-in-out",
+  "&:hover": { color: "primary.main" },
+  "&:last-child": { marginRight: 0 },
+};
+
+export const StyledNavLink = styled(NavLink)({ ...NAV_LINK_STYLES });
+
+export const ParentNav = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  position: "relative",
+  "&:hover": {
+    color: theme.palette.primary.main,
+    "& > .parent-nav-item": { display: "block" },
+  },
+  ...(active && { color: theme.palette.primary.main }),
+}));
+
+type Args = { left: boolean; right: boolean };
+
+export const ParentNavItem = styled("div", {
+  shouldForwardProp: (prop) => prop !== "left" && prop !== "right",
+})<Args>(({ theme, left, right }) => ({
+  top: 0,
+  zIndex: 5,
+  left: "100%",
+  paddingLeft: 8,
+  display: "none",
+  position: "absolute",
+  ...(right && left && { right: "100%", left: "auto", paddingRight: 8 }),
+  [theme.breakpoints.down(1640)]: {
+    right: "100%",
+    left: "auto",
+    paddingRight: 8,
+  },
+}));
+
+export const NavBarWrapper = styled(BazaarCard, {
+  shouldForwardProp: (prop) => prop !== "border",
+})<{ border: number }>(({ theme, border }) => ({
+  height: "60px",
+  display: "block",
+  borderRadius: "0px",
+  position: "relative",
+  boxShadow: "none",
+  ...(border && { borderBottom: `1px solid ${theme.palette.grey[200]}` }),
+  [theme.breakpoints.down(1150)]: { display: "none" },
+}));
+
+export const InnerContainer = styled(Container)({
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});
+
+export const CategoryMenuButton = styled(Button)(({ theme }) => ({
+  width: 220,
+  borderRadius: 4,
+  backgroundColor: theme.palette.grey[200],
+  ...(theme.direction === "rtl" && { ".dropdown-icon": { rotate: "180deg" } }),
+  ".prefix": {
+    gap: 8,
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    color: theme.palette.grey[800],
+  },
+}));
+
+export const ChildNavListWrapper = styled("div")({
+  zIndex: 5,
+  left: "50%",
+  top: "100%",
+  display: "none",
+  position: "absolute",
+  transform: "translate(-50%, 0%)",
+});

package/src/components-v2/navbar/utils/transform-nav.test.ts

@@ -0,0 +1,209 @@
+import { describe, it, expect } from "vitest";
+import { transformCategoryNav, transformCmsNav } from "./transform-nav";
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+describe("transform nav items", () => {
+  it("should recursively transform deeply nested categories and its children with correct href, title, and items", () => {
+    const result = transformCategoryNav(
+      categories as unknown as CategoryHierarchy[],
+    );
+    const accessories = result[0];
+    expect(accessories.title).toBe("Accessories");
+    expect(accessories.href).toBe(
+      "/products/fabrikam-fashion/accessories/68719478036",
+    );
+    expect(Array.isArray(accessories.items)).toBe(true);
+
+    const handbagsAndWallets = accessories.items.find(
+      (i) => i.title === "Handbags and Wallets",
+    );
+    expect(handbagsAndWallets?.title).toBe("Handbags and Wallets");
+    expect(handbagsAndWallets?.href).toBe(
+      "/products/fabrikam-fashion/accessories/handbags-and-wallets/68719478063",
+    );
+    expect(Array.isArray(handbagsAndWallets?.items)).toBe(true);
+
+    const handbags = handbagsAndWallets?.items.find(
+      (i) => i.title === "Handbags",
+    );
+    expect(handbags?.title).toBe("Handbags");
+    expect(handbags?.href).toBe(
+      "/products/fabrikam-fashion/accessories/handbags-and-wallets/handbags/68719478067",
+    );
+    expect(Array.isArray(handbags?.items)).toBe(true);
+    expect(handbags?.items.length).toBe(0); // leaf node
+
+    const wallets = handbagsAndWallets?.items.find(
+      (i) => i.title === "Wallets",
+    );
+    expect(wallets?.title).toBe("Wallets");
+    expect(wallets?.href).toBe(
+      "/products/fabrikam-fashion/accessories/handbags-and-wallets/wallets/68719478069",
+    );
+    expect(Array.isArray(wallets?.items)).toBe(true);
+    expect(wallets?.items.length).toBe(0); // leaf node
+  });
+
+  it("should transform cms nav items with proper href", () => {
+    const { href, items } = transformCmsNav([cmsNavItemApiResponse])[0];
+    expect(href).toBe("/pages/news"); // Internal link
+    expect(items.length).toBe(1);
+    expect(items[0].href).toBe("http://example.com"); // External link
+  });
+});
+
+// Mock Data
+export const categories = [
+  {
+    RecordId: 68719478036,
+    Name: "Accessories",
+    ParentCategory: 68719478035,
+    DisplayOrder: 1,
+    LocalizedDescription: "Accessories",
+    Images: [
+      {
+        Uri: "Categories/Accessories.png",
+        IsDefault: false,
+        IsSelfHosted: false,
+        Priority: 0,
+        IsAdditionalMedia: false,
+        MediaTypeValue: 0,
+        DisplayOrder: 0,
+        IsApplicableForChildEntities: false,
+        ExtensionProperties: [],
+      },
+    ],
+    NameTranslations: [
+      {
+        Language: "en-us",
+        Text: "Accessories",
+        ExtensionProperties: [],
+      },
+    ],
+    ExtensionProperties: [],
+    NeutralizedName: "Accessories",
+    Slug: "accessories",
+    Children: [
+      {
+        RecordId: 68719478063,
+        Name: "Handbags and Wallets",
+        ParentCategory: 68719478036,
+        DisplayOrder: 5,
+        LocalizedDescription: "Handbags and Wallets",
+        Images: [
+          {
+            Uri: "Categories/Handbags and Wallets.png",
+            IsDefault: false,
+            IsSelfHosted: false,
+            Priority: 0,
+            IsAdditionalMedia: false,
+            MediaTypeValue: 0,
+            DisplayOrder: 0,
+            IsApplicableForChildEntities: false,
+            ExtensionProperties: [],
+          },
+        ],
+        NameTranslations: [
+          {
+            Language: "en-us",
+            Text: "Handbags and Wallets",
+            ExtensionProperties: [],
+          },
+        ],
+        ExtensionProperties: [],
+        NeutralizedName: "Handbags and Wallets",
+        Slug: "handbags-and-wallets",
+        Children: [
+          {
+            RecordId: 68719478067,
+            Name: "Handbags",
+            ParentCategory: 68719478063,
+            DisplayOrder: 0,
+            LocalizedDescription: "Handbags",
+            Images: [
+              {
+                Uri: "Categories/Handbags.png",
+                IsDefault: false,
+                IsSelfHosted: false,
+                Priority: 0,
+                IsAdditionalMedia: false,
+                MediaTypeValue: 0,
+                DisplayOrder: 0,
+                IsApplicableForChildEntities: false,
+                ExtensionProperties: [],
+              },
+            ],
+            NameTranslations: [
+              {
+                Language: "en-us",
+                Text: "Handbags",
+                ExtensionProperties: [],
+              },
+            ],
+            ExtensionProperties: [],
+            NeutralizedName: "Handbags",
+            Slug: "handbags",
+            Url: "fabrikam-fashion/accessories/handbags-and-wallets/handbags/68719478067",
+          },
+          {
+            RecordId: 68719478069,
+            Name: "Wallets",
+            ParentCategory: 68719478063,
+            DisplayOrder: 6,
+            LocalizedDescription: "Wallets",
+            Images: [
+              {
+                Uri: "Categories/Wallets.png",
+                IsDefault: false,
+                IsSelfHosted: false,
+                Priority: 0,
+                IsAdditionalMedia: false,
+                MediaTypeValue: 0,
+                DisplayOrder: 0,
+                IsApplicableForChildEntities: false,
+                ExtensionProperties: [],
+              },
+            ],
+            NameTranslations: [
+              {
+                Language: "en-us",
+                Text: "Wallets",
+                ExtensionProperties: [],
+              },
+            ],
+            ExtensionProperties: [],
+            NeutralizedName: "Wallets",
+            Slug: "wallets",
+            Url: "fabrikam-fashion/accessories/handbags-and-wallets/wallets/68719478069",
+          },
+        ],
+        Url: "fabrikam-fashion/accessories/handbags-and-wallets/68719478063",
+      },
+    ],
+    Url: "fabrikam-fashion/accessories/68719478036",
+  },
+];
+
+const cmsNavItemApiResponse = {
+  title: "News",
+  menuAttached: true,
+  path: "/news",
+  type: "INTERNAL",
+  uiRouterKey: "news",
+  slug: "benefits",
+  external: false,
+  related: {
+    slug: "news",
+  },
+  items: [
+    {
+      title: "External url",
+      menuAttached: true,
+      path: "http://example.com",
+      type: "EXTERNAL",
+      uiRouterKey: "generic",
+      external: true,
+    },
+  ],
+} as CmsNavItem;

package/src/components-v2/navbar/utils/transform-nav.ts

@@ -0,0 +1,43 @@
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+import { SvgIconComponent } from "@mui/icons-material";
+
+type MenuType = "default" | "mega-menu" | "full-screen-mega-menu";
+export interface TransformedNavItem {
+  href: string;
+  title: string;
+  items: TransformedNavItem[];
+  menuType: MenuType;
+  // Icon and img used only in full screen mega menu
+  Icon?: SvgIconComponent;
+  img?: string;
+}
+
+export const transformCmsNav = (items: CmsNavItem[]): TransformedNavItem[] => {
+  return items.map((item) => {
+    const transformedItem: TransformedNavItem = {
+      href:
+        item.type === "INTERNAL"
+          ? `/pages/${item.related?.slug}`
+          : (item.path ?? ""),
+      title: item.title,
+      menuType: "default",
+      items: item.items ? transformCmsNav(item.items) : [],
+    };
+
+    return transformedItem;
+  });
+};
+
+export const transformCategoryNav = (
+  items: CategoryHierarchy[],
+): TransformedNavItem[] => {
+  return items.map((item: CategoryHierarchy) => {
+    return {
+      href: `/products/${item?.Url}`,
+      title: item?.Name ?? "",
+      menuType: "default",
+      items: item?.Children ? transformCategoryNav(item.Children) : [],
+    };
+  });
+};

package/src/components-v2/no-records.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+
+type Props = { message: string };
+
+export default function NoRecords({ message }: Props) {
+  const t = useTranslations();
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height="50vh"
+    >
+      <H4 color="grey.500">{t(message)}</H4>
+    </Box>
+  );
+}

package/src/components-v2/product-cards/discount-chip.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Chip, { ChipProps } from "@mui/material/Chip";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+const StyledChip = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== "shape",
+})<{ shape: "rounded" | "square" }>(({ theme, shape }) => ({
+  zIndex: 1,
+  top: "10px",
+  left: "10px",
+  paddingLeft: 3,
+  paddingRight: 3,
+  fontWeight: 600,
+  fontSize: "10px",
+  position: "absolute",
+  color: theme.palette.common.white,
+  background: theme.palette.primary.main,
+  ...(shape === "square" && { borderRadius: 0 }),
+}));
+
+// ==============================================================
+interface Props extends ChipProps {
+  discount: number;
+  shape?: "rounded" | "square";
+}
+// ==============================================================
+
+export default function DiscountChip({
+  discount = 0,
+  shape = "rounded",
+  ...props
+}: Props) {
+  return discount > 0 ? (
+    <StyledChip
+      size="small"
+      shape={shape}
+      label={`${discount}% off`}
+      {...props}
+    />
+  ) : null;
+}

package/src/components-v2/product-cards/product-card/components/hover-actions.tsx

@@ -0,0 +1,37 @@
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// STYLED COMPONENTS
+import { HoverIconWrapper } from "../styles/index";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  toggleView: () => void;
+  toggleFavorite: () => void;
+}
+// ==============================================================
+
+export default function HoverActions({
+  isFavorite,
+  toggleFavorite,
+  toggleView,
+}: Props) {
+  return (
+    <HoverIconWrapper className="hover-box">
+      <IconButton onClick={toggleView}>
+        <RemoveRedEye color="disabled" fontSize="small" />
+      </IconButton>
+
+      <IconButton onClick={toggleFavorite}>
+        {isFavorite ? (
+          <Favorite color="primary" fontSize="small" />
+        ) : (
+          <FavoriteBorder fontSize="small" color="disabled" />
+        )}
+      </IconButton>
+    </HoverIconWrapper>
+  );
+}