@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/page-sidenav/health-beauty-side-nav/components/nav-accordion.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Fragment, useState } from "react";
+import Collapse from "@mui/material/Collapse";
+// GLOBAL CUSTOM COMPONENTS
+import { AccordionHeader } from "@/components/_components/accordion/index";
+// LOCAL CUSTOM COMPONENT
+import ListItem from "./list-item";
+import { renderChild } from "./render-child";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+type Props = { item: CategoryItem };
+// ==============================================================
+
+export default function NavAccordion({ item }: Props) {
+  const { icon, title, child } = item;
+
+  const [open, setOpen] = useState(false);
+
+  const STYLE = {
+    padding: 0,
+    cursor: "pointer",
+    transition: "all 150ms ease-in-out",
+    ":hover": { color: "primary.main" },
+  };
+
+  return (
+    <Fragment>
+      {/* ACCORDION / COLLAPSE HEADER */}
+      <AccordionHeader
+        open={open}
+        onClick={() => setOpen((state) => !state)}
+        sx={STYLE}
+      >
+        <ListItem icon={icon} title={title} />
+      </AccordionHeader>
+
+      {/* RENDER NESTED NAV ITEMS */}
+      {child ? <Collapse in={open}>{renderChild(child)}</Collapse> : null}
+    </Fragment>
+  );
+}

package/src/components/_components/page-sidenav/health-beauty-side-nav/components/render-child.tsx

@@ -0,0 +1,20 @@
+import { Span } from "@/components/_components/Typography";
+import { NavLink } from "@/components/_components/nav-link/index";
+// STYLED COMPONENTS
+import { Circle, DotListItem } from "../styles/index";
+
+// ==============================================================
+type Item = { title: string; href: string };
+// ==============================================================
+
+// RENDER THE NESTED CHILD
+export const renderChild = (childList: Item[]) => {
+  return childList.map((item) => (
+    <NavLink href={item.href} key={item.title} color="grey.700">
+      <DotListItem>
+        <Circle className="dot" />
+        <Span lineHeight={1}>{item.title}</Span>
+      </DotListItem>
+    </NavLink>
+  ));
+};

package/src/components/_components/page-sidenav/health-beauty-side-nav/health-beauty-side-nav.tsx

@@ -0,0 +1,43 @@
+// GLOBAL CUSTOM COMPONENTS
+import { H4 } from "@/components/_components/Typography";
+import Scrollbar from "@/components/_components/scrollbar/index";
+import { NavLink } from "@/components/_components/nav-link/index";
+import FlexBox from "@/components/_components/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENT
+import ListItem from "./components/list-item";
+import NavAccordion from "./components/nav-accordion";
+// STYLED COMPONENT
+import { NavbarRoot } from "./styles/index";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@/components/_components/bazaar-types";
+
+// =================================================================
+type Props = { navigation: CategoryItem[] };
+// =================================================================
+
+export default function HealthBeautySideNav({ navigation }: Props) {
+  return (
+    <Scrollbar>
+      <NavbarRoot elevation={0}>
+        <FlexBox
+          padding="10px 18px"
+          borderRadius="0 0 8px 8px"
+          bgcolor="primary.200"
+          mb={1}
+        >
+          <H4>Categories</H4>
+        </FlexBox>
+
+        {navigation.map((item, ind) => {
+          if (item.child) return <NavAccordion item={item} key={ind} />;
+
+          return (
+            <NavLink key={ind} href={item.href ?? ""} color="grey.700">
+              <ListItem title={item.title} icon={item.icon} />
+            </NavLink>
+          );
+        })}
+      </NavbarRoot>
+    </Scrollbar>
+  );
+}

package/src/components/_components/page-sidenav/health-beauty-side-nav/index.ts

@@ -0,0 +1 @@
+export { default } from "./health-beauty-side-nav";

package/src/components/_components/page-sidenav/health-beauty-side-nav/styles/index.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+export const NavbarRoot = styled(Card)(() => ({
+  height: "100%",
+  borderRadius: 0,
+  position: "relative",
+}));
+
+export const DotListItem = styled("div")(({ theme }) => ({
+  gap: 8,
+  display: "flex",
+  paddingBlock: 10,
+  alignItems: "center",
+  transition: "all 0.2s",
+  ":hover": { ".dot": { backgroundColor: theme.palette.primary.main } },
+}));
+
+export const Circle = styled("div")(({ theme }) => ({
+  width: 4,
+  height: 4,
+  borderRadius: 3,
+  marginLeft: "2rem",
+  backgroundColor: theme.palette.grey[600],
+}));

package/src/components/_components/page-sidenav/side-navbar/components/list-item.tsx

@@ -0,0 +1,25 @@
+import { Fragment } from "react";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@/components/_components/Typography";
+// CUSTOM ICON COMPONENTS
+// import appIcons from "icons";
+import FallbackIcon from "@/components/Blocks/Icons/Components/FallbackIcon";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+}
+// ==============================================================
+
+export default function ListItem({ title }: Props) {
+  // const Icon = appIcons[icon] as SvgIconComponent;
+  const Icon = FallbackIcon;
+
+  return (
+    <Fragment>
+      <Icon fontSize="small" />
+      <Span fontWeight="600">{title}</Span>
+    </Fragment>
+  );
+}

package/src/components/_components/page-sidenav/side-navbar/components/nav-accordion.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Fragment, useState } from "react";
+import Collapse from "@mui/material/Collapse";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@/components/_components/flex-box/flex-box";
+import AccordionHeader from "@/components/_components/accordion/accordion-header";
+// LOCAL CUSTOM COMPONENT
+import ListItem from "./list-item";
+import { renderChild } from "./render-child";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+interface Props {
+  item: CategoryItem;
+  handleSelect?: (category: string) => void;
+}
+// ==============================================================
+
+export default function Accordion({ item, handleSelect }: Props) {
+  const { icon, title, child } = item;
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Fragment>
+      {/* ACCORDION / COLLAPSE HEADER */}
+      <AccordionHeader
+        py={0.75}
+        open={open}
+        className="linkList"
+        onClick={() => setOpen((state) => !state)}
+      >
+        <FlexBox gap={1.5} alignItems="center">
+          <ListItem icon={icon} title={title} />
+        </FlexBox>
+      </AccordionHeader>
+
+      {/* RENDER NESTED NAV ITEMS */}
+      {child && handleSelect ? (
+        <Collapse in={open}>{renderChild(child, handleSelect)}</Collapse>
+      ) : null}
+    </Fragment>
+  );
+}

package/src/components/_components/page-sidenav/side-navbar/components/render-child.tsx

@@ -0,0 +1,20 @@
+import { Span } from "@/components/_components/Typography";
+import { Circle, StyledList } from "../styles/index";
+
+interface Title {
+  title: string;
+}
+
+export const renderChild = (
+  childList: Title[],
+  handleSelect: (category: string) => void,
+) => {
+  return childList.map((item) => (
+    <StyledList key={item.title} onClick={() => handleSelect(item.title)}>
+      <Circle className="dot" />
+      <Span py={0.75} flex="1 1 0">
+        {item.title}
+      </Span>
+    </StyledList>
+  ));
+};

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

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

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

@@ -0,0 +1,77 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import Scrollbar from "@/components/_components/scrollbar/index";
+import { H5 } from "@/components/_components/Typography";
+import FlexBox from "@/components/_components/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 "@/components/_components/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/_components/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 "@/components/_components/Typography";
+import FlexBetween from "@/components/_components/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/_components/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 "@/components/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/_components/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 "@/components/_components/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/_components/page-sidenav/side-navbar-2/index.ts

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

package/src/components/_components/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 "@/components/_components/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 "@/components/_components/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/_components/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/_components/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;
+}