@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,27 +0,0 @@
-"use client";
-
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-// 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 (
-    <FlexBox py={1} gap={1.5} alignItems="center">
-      <Icon fontSize="small" />
-      <Span fontWeight={600}>{title}</Span>
-    </FlexBox>
-  );
-}

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

@@ -1,44 +0,0 @@
-"use client";
-
-import { Fragment, useState } from "react";
-import Collapse from "@mui/material/Collapse";
-// GLOBAL CUSTOM COMPONENTS
-import { AccordionHeader } from "@evenicanpm/storefront-core/src/components/_components/accordion/index";
-// LOCAL CUSTOM COMPONENT
-import ListItem from "./list-item";
-import { renderChild } from "./render-child";
-// CUSTOM DATA MODEL
-import { CategoryItem } from "@evenicanpm/storefront-core/src/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

@@ -1,20 +0,0 @@
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { NavLink } from "@evenicanpm/storefront-core/src/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

@@ -1,43 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { H4 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import Scrollbar from "@evenicanpm/storefront-core/src/components/_components/scrollbar/index";
-import { NavLink } from "@evenicanpm/storefront-core/src/components/_components/nav-link/index";
-import FlexBox from "@evenicanpm/storefront-core/src/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 "@evenicanpm/storefront-core/src/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

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

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

@@ -1,27 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-import { Fragment } from "react";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/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

@@ -1,46 +0,0 @@
-"use client";
-
-import { Fragment, useState } from "react";
-import Collapse from "@mui/material/Collapse";
-// GLOBAL CUSTOM COMPONENTS
-import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-import AccordionHeader from "@evenicanpm/storefront-core/src/components/_components/accordion/accordion-header";
-// LOCAL CUSTOM COMPONENT
-import ListItem from "./list-item";
-import { renderChild } from "./render-child";
-// CUSTOM DATA MODEL
-import { CategoryItem } from "@evenicanpm/storefront-core/src/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

@@ -1,20 +0,0 @@
-import { Span } from "@evenicanpm/storefront-core/src/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

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

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

@@ -1,77 +0,0 @@
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import Scrollbar from "@evenicanpm/storefront-core/src/components/_components/scrollbar/index";
-import { H5 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/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 "@evenicanpm/storefront-core/src/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

@@ -1,73 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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/_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

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

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

@@ -1,63 +0,0 @@
-"use client";
-
-import { usePathname, useRouter } from "next/navigation";
-// GLOBAL CUSTOM COMPONENT
-import Scrollbar from "@evenicanpm/storefront-core/src/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 "@evenicanpm/storefront-core/src/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

@@ -1,68 +0,0 @@
-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],
-  },
-}));