@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/page-sidenav/side-navbar/side-nav-bar.tsx

@@ -0,0 +1,77 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENTS
+import ListItem from "./components/list-item";
+import Accordion from "./components/nav-accordion";
+// STYLED COMPONENTS
+import { BorderBox, ColorBorder, NavbarRoot } from "./styles/index";
+// CUSTOM DATA MODEL
+import { CategoryNavList } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==================================================================
+interface Props {
+  navList: CategoryNavList[];
+  lineStyle?: "dash" | "solid";
+  sidebarHeight?: string | number;
+  sidebarStyle?: "transparent" | "colored";
+  handleSelect?: (category: string) => void;
+}
+
+// ==================================================================
+
+export default function SideNavbar({
+  navList,
+  lineStyle = "solid",
+  sidebarHeight = "auto",
+  sidebarStyle = "transparent",
+  handleSelect,
+}: Props) {
+  return (
+    <Scrollbar autoHide={false} sx={{ maxHeight: sidebarHeight }}>
+      <NavbarRoot sidebar={sidebarStyle}>
+        {navList.map((nav, ind) => (
+          <div key={ind}>
+            {/* GROUP TITLE */}
+            <Box padding="16px 20px 5px 20px">
+              <H5>{nav.category}</H5>
+
+              <BorderBox line={lineStyle}>
+                <ColorBorder />
+                <ColorBorder grey={1} />
+              </BorderBox>
+            </Box>
+
+            {/* CATEGORY/NAV LIST */}
+            {nav.categoryItem.map((item, ind) => {
+              // Needs to check the structure of CategoryNavList but currently file is not exists
+              if (item.child) {
+                return (
+                  <Accordion
+                    item={item}
+                    handleSelect={handleSelect}
+                    key={ind}
+                  />
+                );
+              }
+
+              return (
+                <FlexBox
+                  gap={1.5}
+                  py={0.75}
+                  key={item.title}
+                  className="linkList"
+                  onClick={() => handleSelect?.(item.title)}
+                >
+                  <ListItem title={item.title} icon={item.icon} />
+                </FlexBox>
+              );
+            })}
+          </div>
+        ))}
+      </NavbarRoot>
+    </Scrollbar>
+  );
+}

package/src/components-v2/page-sidenav/side-navbar/styles/index.ts

@@ -0,0 +1,73 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+import getPaletteColor from "@/lib/get-palette-color";
+
+export const NavbarRoot = styled(Card, {
+  shouldForwardProp: (prop) => prop !== "fixed" && prop !== "sidebar",
+})<{ sidebar: "transparent" | "colored" }>(({ theme, sidebar }) => ({
+  height: "100%",
+  borderRadius: 8,
+  position: "relative",
+  "& .linkList": {
+    cursor: "pointer",
+    padding: "8px 20px",
+    transition: "all 0.2s",
+    color: theme.palette.grey[700],
+    ":hover": { color: theme.palette.primary.main },
+  },
+  ...(sidebar === "colored" && {
+    paddingBottom: 10,
+    backgroundColor: getPaletteColor(theme, "primary", 50),
+  }),
+}));
+
+export const StyledList = styled("div")(({ theme }) => ({
+  display: "flex",
+  cursor: "pointer",
+  padding: "4px 20px",
+  alignItems: "center",
+  transition: "all 0.2s",
+  color: theme.palette.grey[700],
+  ":hover": {
+    color: theme.palette.primary.main,
+    ".dot": { backgroundColor: theme.palette.primary.main },
+  },
+}));
+
+export const Circle = styled("span")(({ theme }) => ({
+  width: 4,
+  height: 4,
+  marginLeft: "2rem",
+  marginRight: "8px",
+  borderRadius: "3px",
+  backgroundColor: theme.palette.grey[600],
+}));
+
+export const BorderBox = styled(FlexBetween, {
+  shouldForwardProp: (prop) => prop !== "line",
+})<{ line: "dash" | "solid" }>(({ theme, line }) => ({
+  marginTop: 5,
+  marginBottom: 15,
+  "& span": { width: "100%" },
+  ...(line === "dash" && {
+    borderBottom: "2px",
+    borderStyle: "none none dashed none",
+    borderColor: theme.palette.primary.main,
+    "& span": { display: "none" },
+  }),
+}));
+
+export const ColorBorder = styled(Span, {
+  shouldForwardProp: (prop) => prop !== "grey",
+})<{ grey?: number }>(({ grey, theme }) => ({
+  borderRadius: "2px 0 0 2px",
+  height: grey ? "2px" : "3px",
+  background: grey
+    ? theme.palette.grey[400]
+    : getPaletteColor(theme, "primary", 200),
+}));

package/src/components-v2/page-sidenav/side-navbar-2/components/button-content.tsx

@@ -0,0 +1,32 @@
+import Box from "@mui/material/Box";
+// STYLED COMPONENT
+import { ListIconWrapper } from "../styles/index";
+// CUSTOM ICON COMPONENTS
+// import Icons from "icons/grocery-4";
+import FallbackIcon from "@/cms/blocks/Icons/Components/FallbackIcon";
+
+// ==============================================================
+interface Props {
+  name: string;
+  icon?: string;
+}
+// ==============================================================
+
+export default function ButtonContent({ icon, name }: Props) {
+  // const Icon = icon ? (Icons[icon] as SvgIconComponent) : null;
+  const Icon = FallbackIcon;
+
+  return (
+    <Box display="flex" alignItems="center">
+      {icon ? (
+        <ListIconWrapper>
+          <Icon />
+        </ListIconWrapper>
+      ) : (
+        <Box marginRight="0.6rem" />
+      )}
+
+      {name}
+    </Box>
+  );
+}

package/src/components-v2/page-sidenav/side-navbar-2/components/sidebar-accordion.tsx

@@ -0,0 +1,66 @@
+import { PropsWithChildren, useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import Collapse from "@mui/material/Collapse";
+// LOCAL CUSTOM COMPONENTS
+import ButtonContent from "./button-content";
+// STYLED COMPONENTS
+import {
+  NavItemButton,
+  ChevronRightIcon,
+  NavExpandRoot,
+} from "../styles/index";
+// CUSTOM DATA MODEL
+import { Category } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ================================================================
+interface Props extends PropsWithChildren {
+  item: Category;
+}
+// ================================================================
+
+export default function SidebarAccordion({ item, children }: Props) {
+  const { name, icon } = item || {};
+
+  const pathname = usePathname();
+  const [hasActive, setHasActive] = useState(0);
+  const [collapsed, setCollapsed] = useState(false);
+
+  const handleClick = () => setCollapsed((state) => !state);
+
+  const find = item.children?.find((li) => {
+    // Need to check the structure of Category but currently file not exists
+    if (li.children) return li.children?.find((l) => l.path === pathname);
+    return li.path === pathname;
+  });
+
+  useEffect(() => {
+    if (find) {
+      setCollapsed(true);
+      setHasActive(1);
+    }
+
+    return () => {
+      setCollapsed(false);
+      setHasActive(0);
+    };
+  }, [find]);
+
+  return (
+    <NavExpandRoot className="subMenu">
+      <NavItemButton
+        disableRipple
+        disableTouchRipple
+        active={hasActive}
+        onClick={handleClick}
+        sx={{ justifyContent: "space-between" }}
+      >
+        <ButtonContent name={name} icon={icon} />
+        <ChevronRightIcon collapsed={collapsed ? 1 : 0} />
+      </NavItemButton>
+
+      <Collapse in={collapsed} unmountOnExit>
+        <div className="expansion-panel">{children}</div>
+      </Collapse>
+    </NavExpandRoot>
+  );
+}

package/src/components-v2/page-sidenav/side-navbar-2/index.ts

@@ -0,0 +1 @@
+export { default } from "./side-navbar-2";

package/src/components-v2/page-sidenav/side-navbar-2/side-navbar-2.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+// GLOBAL CUSTOM COMPONENT
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+// LOCAL CUSTOM COMPONENT
+import ButtonContent from "./components/button-content";
+import SidebarAccordion from "./components/sidebar-accordion";
+// STYLED COMPONENTS
+import { NavItemButton } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Category } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+type Props = { navigation: Category[] };
+// ==============================================================
+
+export default function SideNavbarTwo({ navigation }: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // HANDLE ACTIVE CURRENT PAGE
+  const activeRoute = (path: string) => (pathname === path ? 1 : 0);
+
+  // HANDLE NAVIGATE TO ANOTHER ROUTE & CLOSE SIDEBAR DRAWER IN MOBILE DEVICE
+  const handleNavigation = (path: string) => {
+    router.push(path);
+  };
+
+  const renderLevels = (data: Category[]) => {
+    return data.map((item: Category) => {
+      if (item.children) {
+        return (
+          <SidebarAccordion key={item.name} item={item}>
+            {renderLevels(item.children)}
+          </SidebarAccordion>
+        );
+      }
+
+      return (
+        <NavItemButton
+          disableRipple
+          disableTouchRipple
+          key={item.name}
+          active={activeRoute(item.path)}
+          onClick={() => handleNavigation(item.path)}
+        >
+          <ButtonContent name={item.name} icon={item.icon} />
+        </NavItemButton>
+      );
+    });
+  };
+
+  return (
+    <Scrollbar
+      autoHide
+      clickOnTrack={false}
+      sx={{ overflowX: "hidden", height: "calc(100dvh - (120px + 87px))" }}
+    >
+      {renderLevels(navigation)}
+    </Scrollbar>
+  );
+}

package/src/components-v2/page-sidenav/side-navbar-2/styles/index.ts

@@ -0,0 +1,68 @@
+import ButtonBase from "@mui/material/ButtonBase";
+import styled from "@mui/material/styles/styled";
+// MUI ICON COMPONENTS
+
+import ChevronRight from "@mui/icons-material/ChevronRight";
+
+// ===============================================================
+type Active = { active: number };
+type Collapse = { collapsed: number };
+// ===============================================================
+
+export const NavExpandRoot = styled("div")(({ theme }) => ({
+  "& .expansion-panel": {
+    overflow: "hidden",
+    position: "relative",
+    paddingLeft: "1.5rem",
+
+    ":before": {
+      left: 8,
+      content: "''",
+      height: "100%",
+      position: "absolute",
+      borderLeft: `1px solid ${theme.palette.grey[400]}`,
+    },
+  },
+}));
+
+export const NavItemButton = styled(ButtonBase, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<Active>(({ theme, active }) => ({
+  height: 44,
+  width: "100%",
+  whiteSpace: "nowrap",
+  justifyContent: "flex-start",
+  transition: "all 0.15s ease",
+  ...(active && {
+    color: theme.palette.primary.dark,
+    "& .MuiSvgIcon-root": { color: theme.palette.primary.dark },
+  }),
+  ":hover": {
+    color: theme.palette.primary.dark,
+    "& .MuiSvgIcon-root": { color: theme.palette.primary.dark },
+  },
+}));
+
+export const ChevronRightIcon = styled(ChevronRight, {
+  shouldForwardProp: (prop) => prop !== "collapsed",
+})<Collapse>(({ collapsed, theme: { direction } }) => ({
+  fontSize: 18,
+  transform: collapsed ? "0deg" : "rotate(90deg)",
+  transition: "transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0ms",
+  ...(collapsed && direction === "rtl" && { transform: "rotate(180deg)" }),
+}));
+
+export const ListIconWrapper = styled("div")(({ theme }) => ({
+  width: 22,
+  height: 22,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  marginRight: "0.8rem",
+  justifyContent: "center",
+  "& svg": {
+    width: "100%",
+    height: "100%",
+    color: theme.palette.grey[500],
+  },
+}));

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-1/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>
+  );
+}

package/src/components-v2/product-cards/product-card-1/components/quantity-buttons.tsx

@@ -0,0 +1,65 @@
+import { Fragment } from "react";
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { CircularProgress } from "@mui/material";
+
+// ==============================================================
+interface Props {
+  quantity: number;
+  handleDecrement: () => void;
+  handleIncrement: () => void;
+  isLineUpdating: boolean;
+}
+// ==============================================================
+
+export default function QuantityButtons(props: Props) {
+  const { quantity, handleDecrement, handleIncrement, isLineUpdating } =
+    props || {};
+
+  return (
+    <FlexBox
+      alignItems="center"
+      className="add-cart"
+      flexDirection="row-reverse"
+      justifyContent={quantity ? "space-between" : "flex-start"}
+      gap={1}
+    >
+      <Button
+        color="primary"
+        variant="outlined"
+        onClick={handleIncrement}
+        sx={{ padding: "3px" }}
+        disabled={isLineUpdating}
+      >
+        <Add fontSize="small" />
+      </Button>
+
+      {quantity && (
+        <Fragment>
+          {isLineUpdating ? (
+            <CircularProgress size={"10px"} color={"primary"} />
+          ) : (
+            <Paragraph color="text.primary" fontWeight="600">
+              {quantity}
+            </Paragraph>
+          )}
+
+          <Button
+            color="primary"
+            variant="outlined"
+            onClick={handleDecrement}
+            sx={{ padding: "3px" }}
+            disabled={isLineUpdating}
+          >
+            <Remove fontSize="small" />
+          </Button>
+        </Fragment>
+      )}
+    </FlexBox>
+  );
+}

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

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