@evenicanpm/storefront-core 1.1.0 → 1.2.1

package/src/components-v2/mini-cart/mini-cart-trigger.tsx

@@ -7,93 +7,93 @@ import { useNotification } from "@evenicanpm/storefront-core/src/providers/notif
 import { MiniCart } from "@evenicanpm/storefront-core/src/components-v2/mini-cart/index";
 
 const BADGE_STYLES = {
-  "& .MuiBadge-badge": {
-    fontSize: { xs: "0.625rem", md: "0.75rem" }, // ~10px, 12px
-    minWidth: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
-    height: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
-  },
+	"& .MuiBadge-badge": {
+		fontSize: { xs: "0.625rem", md: "0.75rem" }, // ~10px, 12px
+		minWidth: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
+		height: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
+	},
 };
 
 const ICON_BUTTON_STYLES = {
-  minWidth: { xs: "2.25rem", md: "2.5rem" }, // 36px, 40px
-  minHeight: { xs: "2.25rem", md: "2.5rem" },
+	minWidth: { xs: "2.25rem", md: "2.5rem" }, // 36px, 40px
+	minHeight: { xs: "2.25rem", md: "2.5rem" },
 };
 
 interface MiniCartTriggerContextValue {
-  cart: Cart;
-  open: boolean;
-  setOpen: (open: boolean) => void;
+	cart: Cart;
+	open: boolean;
+	setOpen: (open: boolean) => void;
 }
 
 const MiniCartTriggerContext =
-  createContext<MiniCartTriggerContextValue | null>(null);
+	createContext<MiniCartTriggerContextValue | null>(null);
 
 interface MiniCartTriggerProps {
-  cart: Cart;
-  children: React.ReactNode;
+	cart: Cart;
+	children: React.ReactNode;
 }
 
 const MiniCartTrigger = ({ cart, children }: MiniCartTriggerProps) => {
-  const [open, setOpen] = useState(false);
-  const { alert } = useNotification();
+	const [open, setOpen] = useState(false);
+	const { alert } = useNotification();
 
-  const SHOULD_OPEN_MINICART_ON_ADD = true; // Move to config
+	const SHOULD_OPEN_MINICART_ON_ADD = true; // Move to config
 
-  React.useEffect(() => {
-    if (alert?.type === "cart" && SHOULD_OPEN_MINICART_ON_ADD) {
-      setOpen(true);
-    }
-  }, [alert, SHOULD_OPEN_MINICART_ON_ADD]);
+	React.useEffect(() => {
+		if (alert?.type === "cart" && SHOULD_OPEN_MINICART_ON_ADD) {
+			setOpen(true);
+		}
+	}, [alert, SHOULD_OPEN_MINICART_ON_ADD]);
 
-  return (
-    <MiniCartTriggerContext.Provider value={{ cart, open, setOpen }}>
-      {children}
-    </MiniCartTriggerContext.Provider>
-  );
+	return (
+		<MiniCartTriggerContext.Provider value={{ cart, open, setOpen }}>
+			{children}
+		</MiniCartTriggerContext.Provider>
+	);
 };
 
 /* ---------- Subcomponents ---------- */
 
 MiniCartTrigger.Badge = ({ children }: { children: React.ReactNode }) => {
-  const ctx = useContext(MiniCartTriggerContext);
-  if (!ctx) return null;
-  const { cart } = ctx;
-  return (
-    <Badge
-      badgeContent={cart?.TotalItems || 0}
-      color="primary"
-      sx={BADGE_STYLES}
-    >
-      {children}
-    </Badge>
-  );
+	const ctx = useContext(MiniCartTriggerContext);
+	if (!ctx) return null;
+	const { cart } = ctx;
+	return (
+		<Badge
+			badgeContent={cart?.TotalItems || 0}
+			color="primary"
+			sx={BADGE_STYLES}
+		>
+			{children}
+		</Badge>
+	);
 };
 
 MiniCartTrigger.Button = ({ children }: { children: React.ReactNode }) => {
-  const ctx = useContext(MiniCartTriggerContext);
-  if (!ctx) return null;
-  const { setOpen } = ctx;
-  return (
-    <IconButton sx={ICON_BUTTON_STYLES} onClick={() => setOpen(true)}>
-      {children}
-    </IconButton>
-  );
+	const ctx = useContext(MiniCartTriggerContext);
+	if (!ctx) return null;
+	const { setOpen } = ctx;
+	return (
+		<IconButton sx={ICON_BUTTON_STYLES} onClick={() => setOpen(true)}>
+			{children}
+		</IconButton>
+	);
 };
 
 MiniCartTrigger.Drawer = () => {
-  const ctx = useContext(MiniCartTriggerContext);
-  if (!ctx) return null;
-  const { cart, open, setOpen } = ctx;
-  return (
-    <Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
-      <MiniCart cart={cart} closeDrawer={() => setOpen(false)}>
-        <MiniCart.Header />
-        <MiniCart.Divider />
-        <MiniCart.Items />
-        <MiniCart.Actions />
-      </MiniCart>
-    </Drawer>
-  );
+	const ctx = useContext(MiniCartTriggerContext);
+	if (!ctx) return null;
+	const { cart, open, setOpen } = ctx;
+	return (
+		<Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
+			<MiniCart cart={cart} closeDrawer={() => setOpen(false)}>
+				<MiniCart.Header />
+				<MiniCart.Divider />
+				<MiniCart.Items />
+				<MiniCart.Actions />
+			</MiniCart>
+		</Drawer>
+	);
 };
 
 export default MiniCartTrigger;

package/src/components-v2/mini-cart/mini-cart.tsx

@@ -17,154 +17,154 @@ import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/serv
 import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
 
 interface MiniCartContextValue {
-  cart: Cart;
-  closeDrawer: () => void;
-  currency: (value: number) => string;
-  handleCartAmountChange: (cartLine: CartLine) => void;
-  shouldShowLoadingSpinner: (lineId: string) => boolean;
-  handleNavigate: (path: string) => () => void;
+	cart: Cart;
+	closeDrawer: () => void;
+	currency: (value: number) => string;
+	handleCartAmountChange: (cartLine: CartLine) => void;
+	shouldShowLoadingSpinner: (lineId: string) => boolean;
+	handleNavigate: (path: string) => () => void;
 }
 
 const MiniCartContext = createContext<MiniCartContextValue | null>(null);
 export interface MiniCartProps {
-  cart: Cart;
-  closeDrawer: () => void;
-  children: React.ReactNode;
+	cart: Cart;
+	closeDrawer: () => void;
+	children: React.ReactNode;
 }
 
 const MiniCart = ({ cart, closeDrawer, children }: MiniCartProps) => {
-  const { push } = useRouter();
-  const { number } = useFormatter();
-  const currency = (value: number) =>
-    number(value, { style: "currency", currency: "USD" });
-
-  const {
-    mutate: updateLine,
-    isPending: isUpdatePending,
-    variables: updateVariables,
-  } = useUpdateCartLines();
-
-  const {
-    mutate: deleteLine,
-    isPending: isDeletePending,
-    variables: deleteVariables,
-  } = useDeleteCartLine();
-
-  const shouldShowLoadingSpinner = (lineId: string) =>
-    (isUpdatePending || isDeletePending) &&
-    (updateVariables?.cartLine[0].LineId === lineId ||
-      deleteVariables?.cartLine[0].LineId === lineId);
-
-  const handleCartAmountChange = (cartLine: CartLine) => {
-    if (cartLine.Quantity === 0) {
-      deleteLine({
-        cartLine: [cartLine],
-        cartId: cart.Id,
-        version: cart.Version,
-      });
-      return;
-    }
-    updateLine({
-      cartLine: [cartLine],
-      cartId: cart.Id,
-      version: cart.Version,
-    });
-  };
-
-  const handleNavigate = (path: string) => () => {
-    push(path);
-  };
-
-  return (
-    <MiniCartContext.Provider
-      value={{
-        cart,
-        closeDrawer,
-        currency,
-        handleCartAmountChange,
-        shouldShowLoadingSpinner,
-        handleNavigate,
-      }}
-    >
-      <Box width="100%" minWidth={380}>
-        {children}
-      </Box>
-    </MiniCartContext.Provider>
-  );
+	const { push } = useRouter();
+	const { number } = useFormatter();
+	const currency = (value: number) =>
+		number(value, { style: "currency", currency: "USD" });
+
+	const {
+		mutate: updateLine,
+		isPending: isUpdatePending,
+		variables: updateVariables,
+	} = useUpdateCartLines();
+
+	const {
+		mutate: deleteLine,
+		isPending: isDeletePending,
+		variables: deleteVariables,
+	} = useDeleteCartLine();
+
+	const shouldShowLoadingSpinner = (lineId: string) =>
+		(isUpdatePending || isDeletePending) &&
+		(updateVariables?.cartLine[0].LineId === lineId ||
+			deleteVariables?.cartLine[0].LineId === lineId);
+
+	const handleCartAmountChange = (cartLine: CartLine) => {
+		if (cartLine.Quantity === 0) {
+			deleteLine({
+				cartLine: [cartLine],
+				cartId: cart.Id,
+				version: cart.Version,
+			});
+			return;
+		}
+		updateLine({
+			cartLine: [cartLine],
+			cartId: cart.Id,
+			version: cart.Version,
+		});
+	};
+
+	const handleNavigate = (path: string) => () => {
+		push(path);
+	};
+
+	return (
+		<MiniCartContext.Provider
+			value={{
+				cart,
+				closeDrawer,
+				currency,
+				handleCartAmountChange,
+				shouldShowLoadingSpinner,
+				handleNavigate,
+			}}
+		>
+			<Box width="100%" minWidth={380}>
+				{children}
+			</Box>
+		</MiniCartContext.Provider>
+	);
 };
 
 /* ---------- Subcomponents ---------- */
 
 MiniCart.Header = () => {
-  const ctx = useContext(MiniCartContext);
-  if (!ctx) return null;
-  const { cart, closeDrawer } = ctx;
-  return (
-    <TopHeader toggle={closeDrawer} total={cart?.CartLines?.length || 0}>
-      <TopHeader.Heading />
-      <TopHeader.CloseButton />
-    </TopHeader>
-  );
+	const ctx = useContext(MiniCartContext);
+	if (!ctx) return null;
+	const { cart, closeDrawer } = ctx;
+	return (
+		<TopHeader toggle={closeDrawer} total={cart?.CartLines?.length || 0}>
+			<TopHeader.Heading />
+			<TopHeader.CloseButton />
+		</TopHeader>
+	);
 };
 
 MiniCart.Divider = () => {
-  return <Divider />;
+	return <Divider />;
 };
 
 MiniCart.Items = () => {
-  const ctx = useContext(MiniCartContext);
-  if (!ctx) return null;
-  const {
-    cart,
-    handleCartAmountChange,
-    shouldShowLoadingSpinner,
-    closeDrawer,
-  } = ctx;
-
-  return (
-    <Box height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}>
-      {cart.CartLines.length > 0 ? (
-        <Scrollbar>
-          {cart?.CartLines?.map((item) => (
-            <MiniCartItem
-              item={item}
-              key={item.LineId}
-              handleCartAmountChange={handleCartAmountChange}
-              isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
-              closeDrawer={closeDrawer}
-            >
-              <MiniCartItem.QuantityControls />
-              <MiniCartItem.ProductImage />
-              <MiniCartItem.ProductDetails />
-              <MiniCartItem.RemoveButton />
-            </MiniCartItem>
-          ))}
-        </Scrollbar>
-      ) : (
-        <EmptyCart>
-          <EmptyCart.Icon />
-          <EmptyCart.Message />
-        </EmptyCart>
-      )}
-    </Box>
-  );
+	const ctx = useContext(MiniCartContext);
+	if (!ctx) return null;
+	const {
+		cart,
+		handleCartAmountChange,
+		shouldShowLoadingSpinner,
+		closeDrawer,
+	} = ctx;
+
+	return (
+		<Box height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}>
+			{cart.CartLines.length > 0 ? (
+				<Scrollbar>
+					{cart?.CartLines?.map((item) => (
+						<MiniCartItem
+							item={item}
+							key={item.LineId}
+							handleCartAmountChange={handleCartAmountChange}
+							isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
+							closeDrawer={closeDrawer}
+						>
+							<MiniCartItem.QuantityControls />
+							<MiniCartItem.ProductImage />
+							<MiniCartItem.ProductDetails />
+							<MiniCartItem.RemoveButton />
+						</MiniCartItem>
+					))}
+				</Scrollbar>
+			) : (
+				<EmptyCart>
+					<EmptyCart.Icon />
+					<EmptyCart.Message />
+				</EmptyCart>
+			)}
+		</Box>
+	);
 };
 
 MiniCart.Actions = () => {
-  const ctx = useContext(MiniCartContext);
-  if (!ctx) return null;
-  const { cart, currency, handleNavigate } = ctx;
-  return cart?.CartLines.length > 0 ? (
-    <BottomActions
-      total={currency(cart?.TotalAmount || 0)}
-      handleNavigate={handleNavigate}
-    >
-      <BottomActions.ViewCartButton />
-      {/* <BottomActions.CustomButton path="/custom" variant="text">
+	const ctx = useContext(MiniCartContext);
+	if (!ctx) return null;
+	const { cart, currency, handleNavigate } = ctx;
+	return cart?.CartLines.length > 0 ? (
+		<BottomActions
+			total={currency(cart?.TotalAmount || 0)}
+			handleNavigate={handleNavigate}
+		>
+			<BottomActions.ViewCartButton />
+			{/* <BottomActions.CustomButton path="/custom" variant="text">
         custom button name
       </BottomActions.CustomButton> */}
-    </BottomActions>
-  ) : null;
+		</BottomActions>
+	) : null;
 };
 
 export default MiniCart;

package/src/components-v2/mobile-navigation/MobileNavigationBar.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MobileNavigationBar } from "./index";
+import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
+import User2 from "@evenicanpm/storefront-core/src/components-v2/icons/user2";
+
+const meta = {
+	title: "MobileNavigationBar",
+	component: MobileNavigationBar,
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div style={{ maxWidth: 375 }}>
+				<p style={{ fontSize: 14, color: "#666" }}>
+					This component is designed for mobile viewports. Resize the screen to
+					see it properly.
+				</p>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta<typeof MobileNavigationBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => <MobileNavigationBar />,
+};
+
+export const WithCustomMenuList: Story = {
+	render: () => (
+		<MobileNavigationBar
+			menuList={[
+				{ title: "home", Icon: Home, href: "/" },
+				{ title: "profile", Icon: User2, href: "/custom-profile" },
+			]}
+		/>
+	),
+};

package/src/components-v2/mobile-navigation/mobile-navigation-bar.tsx

@@ -9,10 +9,10 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslations } from "next-intl";
 // STYLED COMPONENTS
 import {
-  iconStyle,
-  StyledBox,
-  StyledNavLink,
-  Wrapper,
+	iconStyle,
+	StyledBox,
+	StyledNavLink,
+	Wrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/mobile-navigation/styles/index";
 // ICON COMPONENTS
 import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
@@ -45,79 +45,79 @@ Usage Examples:
  */
 
 type MenuItemProps = {
-  title: string;
-  Icon: SvgIconComponent;
-  href?: string;
+	title: string;
+	Icon: SvgIconComponent;
+	href?: string;
 };
 
 type MobileNavigationBarProps = {
-  children?: React.ReactNode;
-  menuList?: MenuItemProps[];
+	children?: React.ReactNode;
+	menuList?: MenuItemProps[];
 };
 
 const MobileNavContext = createContext<{ menuList: MenuItemProps[] }>({
-  menuList: [],
+	menuList: [],
 });
 
 export default function MobileNavigationBar({
-  children,
-  menuList,
+	children,
+	menuList,
 }: MobileNavigationBarProps) {
-  const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
-
-  const defaultMenuList: MenuItemProps[] = [
-    { title: "home", Icon: Home, href: "/" },
-    { title: "category", Icon: CategoryOutlined },
-    { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
-    { title: "account", Icon: User2, href: "/account/profile" },
-  ];
-
-  const listToRender = menuList || defaultMenuList;
-
-  if (!DOWN_900) return null;
-
-  return (
-    <MobileNavContext.Provider value={{ menuList: listToRender }}>
-      <Box position="relative" display="flex" flexDirection="column">
-        <Wrapper>
-          {children ??
-            listToRender.map((item) => (
-              <MobileNavigationBar.MenuItem key={item.title} {...item} />
-            ))}
-        </Wrapper>
-      </Box>
-    </MobileNavContext.Provider>
-  );
+	const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
+
+	const defaultMenuList: MenuItemProps[] = [
+		{ title: "home", Icon: Home, href: "/" },
+		{ title: "category", Icon: CategoryOutlined },
+		{ title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
+		{ title: "account", Icon: User2, href: "/account/profile" },
+	];
+
+	const listToRender = menuList || defaultMenuList;
+
+	if (!DOWN_900) return null;
+
+	return (
+		<MobileNavContext.Provider value={{ menuList: listToRender }}>
+			<Box position="relative" display="flex" flexDirection="column">
+				<Wrapper>
+					{children ??
+						listToRender.map((item) => (
+							<MobileNavigationBar.MenuItem key={item.title} {...item} />
+						))}
+				</Wrapper>
+			</Box>
+		</MobileNavContext.Provider>
+	);
 }
 
 MobileNavigationBar.MenuItem = function MenuItem({
-  title,
-  Icon,
-  href,
+	title,
+	Icon,
+	href,
 }: MenuItemProps) {
-  const { toggleMobileSideNav } = useContext(NavContext);
-  const t = useTranslations("Navigation.Mobile");
-  const { data: cart } = getCart.useData();
-
-  const iconEl = <Icon sx={iconStyle} fontSize="small" />;
-  const isCart = title === "cart";
-
-  const content = (
-    <Fragment>
-      {isCart ? (
-        <Badge badgeContent={cart?.TotalItems || 0} color="primary">
-          {iconEl}
-        </Badge>
-      ) : (
-        iconEl
-      )}
-      {t(title)}
-    </Fragment>
-  );
-
-  return href ? (
-    <StyledNavLink href={href}>{content}</StyledNavLink>
-  ) : (
-    <StyledBox onClick={toggleMobileSideNav}>{content}</StyledBox>
-  );
+	const { toggleMobileSideNav } = useContext(NavContext);
+	const t = useTranslations("Navigation.Mobile");
+	const { data: cart } = getCart.useData();
+
+	const iconEl = <Icon sx={iconStyle} fontSize="small" />;
+	const isCart = title === "cart";
+
+	const content = (
+		<Fragment>
+			{isCart ? (
+				<Badge badgeContent={cart?.TotalItems || 0} color="primary">
+					{iconEl}
+				</Badge>
+			) : (
+				iconEl
+			)}
+			{t(title)}
+		</Fragment>
+	);
+
+	return href ? (
+		<StyledNavLink href={href}>{content}</StyledNavLink>
+	) : (
+		<StyledBox onClick={toggleMobileSideNav}>{content}</StyledBox>
+	);
 };