@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -14,56 +14,56 @@ import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 // STYLED COMPONENTS
 import {
-  ParentNav,
-  ParentNavItem,
+	ParentNav,
+	ParentNavItem,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
 
 import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 
 // ==============================================================
 interface Props extends PropsWithChildren {
-  nav: TransformedNavItem;
+	nav: TransformedNavItem;
 }
 // ==============================================================
 
 export default function NavItemChild({ nav, children }: Props) {
-  const pathname = usePathname();
-  const { settings } = useSettings();
-  const { checkOverflow, elementRef, isLeftOverflowing, isRightOverflowing } =
-    useOverflowDetect();
+	const pathname = usePathname();
+	const { settings } = useSettings();
+	const { checkOverflow, elementRef, isLeftOverflowing, isRightOverflowing } =
+		useOverflowDetect();
 
-  const isActive = nav.items.flat().find((item) => {
-    const { href } = item;
-    if (!href || !pathname) return false;
-    return href === pathname;
-  });
+	const isActive = nav.items.flat().find((item) => {
+		const { href } = item;
+		if (!href || !pathname) return false;
+		return href === pathname;
+	});
 
-  return (
-    <ParentNav
-      minWidth={200}
-      active={isActive ? 1 : 0}
-      onMouseEnter={checkOverflow}
-    >
-      <MenuItem color="grey.700">
-        <Span flex="1 1 0">{nav?.title}</Span>
+	return (
+		<ParentNav
+			minWidth={200}
+			active={isActive ? 1 : 0}
+			onMouseEnter={checkOverflow}
+		>
+			<MenuItem color="grey.700">
+				<Span flex="1 1 0">{nav?.title}</Span>
 
-        {settings.direction === "ltr" ? (
-          <ArrowRight fontSize="small" />
-        ) : (
-          <ArrowLeft fontSize="small" />
-        )}
-      </MenuItem>
+				{settings.direction === "ltr" ? (
+					<ArrowRight fontSize="small" />
+				) : (
+					<ArrowLeft fontSize="small" />
+				)}
+			</MenuItem>
 
-      <ParentNavItem
-        ref={elementRef as RefObject<HTMLDivElement>}
-        left={isLeftOverflowing}
-        right={isRightOverflowing}
-        className="parent-nav-item"
-      >
-        <BazaarCard elevation={3} sx={{ py: "0.5rem", minWidth: 180 }}>
-          {children}
-        </BazaarCard>
-      </ParentNavItem>
-    </ParentNav>
-  );
+			<ParentNavItem
+				ref={elementRef as RefObject<HTMLDivElement>}
+				left={isLeftOverflowing}
+				right={isRightOverflowing}
+				className="parent-nav-item"
+			>
+				<BazaarCard elevation={3} sx={{ py: "0.5rem", minWidth: 180 }}>
+					{children}
+				</BazaarCard>
+			</ParentNavItem>
+		</ParentNav>
+	);
 }

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

@@ -10,136 +10,136 @@ import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard
 import MegaMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu";
 import CategoryBasedMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/category-based-menu";
 import {
-  StyledNavLink,
-  NAV_LINK_STYLES,
-  ChildNavListWrapper,
+	StyledNavLink,
+	NAV_LINK_STYLES,
+	ChildNavListWrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import {
-  transformCmsNav,
-  TransformedNavItem,
+	transformCmsNav,
+	TransformedNavItem,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 import NavItemChild from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/nav-item-child";
 
 type NavigationContextValue = {
-  list: TransformedNavItem[];
+	list: TransformedNavItem[];
 };
 const NavigationContext = createContext<NavigationContextValue | undefined>(
-  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>
-  );
+	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 />
-      ))}
-    </>
-  );
+	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,
+	isRoot = false,
 }: {
-  nav: TransformedNavItem;
-  isRoot?: boolean;
+	nav: TransformedNavItem;
+	isRoot?: boolean;
 }) {
-  const { href, title, items, menuType } = nav;
-  const hasChildren = !!(items && items.length);
+	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;
+	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

@@ -8,8 +8,8 @@ import NavigationList from "@evenicanpm/storefront-core/src/components-v2/navbar
 
 // STYLED COMPONENTS
 import {
-  NavBarWrapper,
-  InnerContainer,
+	NavBarWrapper,
+	InnerContainer,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
 
 /**
@@ -37,62 +37,62 @@ import {
 
 // ==========================================================
 interface Props {
-  border?: number;
-  elevation?: number;
-  hideCategories?: boolean;
-  children?: React.ReactNode;
+	border?: number;
+	elevation?: number;
+	hideCategories?: boolean;
+	children?: React.ReactNode;
 }
 
 interface NavbarContextType {
-  hideCategories: boolean;
+	hideCategories: boolean;
 }
 // ==========================================================
 
 const NavbarContext = createContext<NavbarContextType>({
-  hideCategories: false,
+	hideCategories: false,
 });
 
 export default function Navbar({
-  border = 0,
-  elevation = 2,
-  hideCategories = false,
-  children,
+	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>
-  );
+	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,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  const { hideCategories } = useContext(NavbarContext);
-  return (
-    <InnerContainer
-      sx={hideCategories ? { justifyContent: "center" } : undefined}
-    >
-      {children}
-    </InnerContainer>
-  );
+	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 />;
+	const { hideCategories } = useContext(NavbarContext);
+	if (hideCategories) return null;
+	return <Categories />;
 };
 
 Navbar.Navigation = function NavbarNavigation() {
-  return <NavigationList />;
+	return <NavigationList />;
 };

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

@@ -8,83 +8,83 @@ 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 },
+	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",
+	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 }),
+	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",
+	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,
-  },
+	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",
+	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" },
+	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",
+	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],
-  },
+	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%)",
+	zIndex: 5,
+	left: "50%",
+	top: "100%",
+	display: "none",
+	position: "absolute",
+	transform: "translate(-50%, 0%)",
 });