@evenicanpm/storefront-core 1.1.0 → 1.2.1

package/src/components/_components/product-cards/product-card-15/styles/index.ts

@@ -1,57 +0,0 @@
-"use client";
-
-import getPaletteColor from "@/lib/get-palette-color";
-import styled from "@mui/material/styles/styled";
-
-export const StyledRoot = styled("div")(({ theme }) => ({
-  borderRadius: 8,
-  border: `1px solid ${theme.palette.divider}`,
-  transition: "all 300ms ease-in-out",
-  ":hover": { boxShadow: theme.shadows[2] },
-}));
-
-export const PriceText = styled("p")(({ theme }) => ({
-  gap: 8,
-  fontSize: 17,
-  lineHeight: 1,
-  fontWeight: 700,
-  display: "flex",
-  alignItems: "center",
-  color: theme.palette.primary.main,
-  ".base-price": {
-    fontSize: 15,
-    fontWeight: 500,
-    textDecoration: "line-through",
-    color: getPaletteColor(theme, "grey", 500),
-  },
-}));
-
-export const Content = styled("div")(({ theme }) => ({
-  padding: 18,
-  display: "flex",
-  alignItems: "end",
-  justifyContent: "space-between",
-  ".button-group": {
-    color: "white",
-    display: "flex",
-    overflow: "hidden",
-    borderRadius: "6px",
-    alignItems: "center",
-    backgroundColor: theme.palette.primary.main,
-    ".base-button": {
-      padding: "8px 16px",
-      backgroundColor: getPaletteColor(theme, "primary", 800),
-    },
-  },
-  ".button-small": { maxWidth: 170, margin: "auto" },
-  ".MuiButton-containedPrimary": { color: "white" },
-}));
-
-// Extend PaletteColor to include numeric indices
-// interface ExtendedPaletteColor {
-//   main: string;
-//   light: string;
-//   dark: string;
-//   contrastText: string;
-//   [key: string]: string; // Allow numeric keys as string indices
-// }

package/src/components/_components/product-cards/product-card-16/components/quantity-buttons.tsx

@@ -1,56 +0,0 @@
-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/_components/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-
-// ==============================================================
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-}
-// ==============================================================
-
-export default function QuantityButtons(props: Props) {
-  const { quantity, handleDecrement, handleIncrement } = props || {};
-
-  return (
-    <FlexBox
-      width="30px"
-      alignItems="center"
-      className="add-cart"
-      flexDirection="column-reverse"
-      justifyContent={quantity ? "space-between" : "flex-start"}
-    >
-      <Button
-        color="primary"
-        variant="outlined"
-        onClick={handleIncrement}
-        sx={{ padding: "3px" }}
-      >
-        <Add fontSize="small" />
-      </Button>
-
-      {quantity ? (
-        <Fragment>
-          <Paragraph color="text.primary" fontWeight="600">
-            {quantity}
-          </Paragraph>
-
-          <Button
-            color="primary"
-            variant="outlined"
-            onClick={handleDecrement}
-            sx={{ padding: "3px" }}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </Fragment>
-      ) : null}
-    </FlexBox>
-  );
-}

package/src/components/_components/product-cards/product-card-16/index.ts

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

package/src/components/_components/product-cards/product-card-16/product-card.tsx

@@ -1,117 +0,0 @@
-import Link from "next/link";
-import Rating from "@mui/material/Rating";
-// GLOBAL CUSTOM COMPONENTS
-import { H6 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import ImageWithFallback from "../../../ImageWithFallback";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-// STYLED COMPONENTS
-import { PriceText } from "./styles/index";
-// LOCAL COMPONENTS
-import DiscountChip from "../discount-chip";
-import QuantityButtons from "./components/quantity-buttons";
-// LOCAL CUSTOM HOOKS
-import useProduct from "../use-product";
-
-import buildDetailUrl from "@/lib/build-detail-url";
-
-type Props = {
-  title: string;
-  slug: string;
-  price: number;
-  imgUrl: string;
-  rating?: number;
-  discount?: number;
-  id: number;
-  // show or hide
-  showAddToCart?: boolean;
-};
-
-export default function ProductCard16({
-  title,
-  slug,
-  price,
-  imgUrl,
-  rating,
-  discount = 0,
-  id,
-  showAddToCart = true,
-}: Props) {
-  const { cartItem, handleCartAmountChange } = useProduct(slug);
-
-  const handleIncrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    product;
-    handleCartAmountChange();
-  };
-
-  const handleDecrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl,
-      qty: (cartItem?.Quantity || 0) - 1,
-    };
-    product;
-    handleCartAmountChange("remove");
-  };
-
-  return (
-    <div>
-      <Link href={buildDetailUrl(title, id)}>
-        <FlexBox position="relative" bgcolor="grey.50" borderRadius={3} mb={2}>
-          <ImageWithFallback
-            alt={title ?? "Product Image"}
-            width={380}
-            height={379}
-            src={imgUrl}
-            style={{ borderRadius: "12px" }}
-          />
-          {discount ? (
-            <DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
-          ) : null}
-        </FlexBox>
-      </Link>
-
-      <FlexBetween alignItems="flex-end">
-        <div>
-          <Link href={buildDetailUrl(title, id)}>
-            <H6 fontWeight={700} mb={1}>
-              {title}
-            </H6>
-          </Link>
-
-          <Rating readOnly value={rating} size="small" precision={0.5} />
-
-          <PriceText>
-            {discount ? (
-              <span className="base-price">{currency(price)}</span>
-            ) : null}
-            {calculateDiscount(price, discount)}
-          </PriceText>
-        </div>
-        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
-        {showAddToCart && (
-          <QuantityButtons
-            quantity={cartItem?.Quantity || 0}
-            handleIncrement={handleIncrementQuantity}
-            handleDecrement={handleDecrementQuantity}
-          />
-        )}
-      </FlexBetween>
-    </div>
-  );
-}

package/src/components/_components/product-cards/product-card-16/styles/index.ts

@@ -1,18 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-export const PriceText = styled("p")(({ theme }) => ({
-  fontSize: 17,
-  lineHeight: 1,
-  fontWeight: 700,
-  marginTop: ".75rem",
-  color: theme.palette.primary.main,
-  ".base-price": {
-    fontSize: 15,
-    marginRight: 8,
-    fontWeight: 600,
-    textDecoration: "line-through",
-    color: theme.palette.grey[600],
-  },
-}));

package/src/components/_components/product-cards/product-card-2/components/favorite-button.tsx

@@ -1,29 +0,0 @@
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Favorite from "@mui/icons-material/Favorite";
-import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  handleClick: () => void;
-}
-// ==============================================================
-
-export default function FavoriteButton({ isFavorite, handleClick }: Props) {
-  const STYLES = {
-    height: 0,
-    alignItems: "flex-start",
-    "&:hover": { backgroundColor: "transparent" },
-  };
-
-  return (
-    <Button disableRipple disableElevation onClick={handleClick} sx={STYLES}>
-      {isFavorite ? (
-        <Favorite fontSize="small" color="primary" />
-      ) : (
-        <FavoriteBorder fontSize="small" sx={{ opacity: 0.5 }} />
-      )}
-    </Button>
-  );
-}

package/src/components/_components/product-cards/product-card-2/components/product-price.tsx

@@ -1,26 +0,0 @@
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-
-// ==============================================================
-type Props = { price: number; off: number };
-// ==============================================================
-
-export default function ProductPrice({ price, off }: Props) {
-  return (
-    <FlexBox gap={1} alignItems="center">
-      <Paragraph fontWeight="600" color="primary.main">
-        {calculateDiscount(price, off)}
-      </Paragraph>
-
-      {off ? (
-        <Box component="del" fontWeight="600" color="grey.600">
-          {currency(price)}
-        </Box>
-      ) : null}
-    </FlexBox>
-  );
-}

package/src/components/_components/product-cards/product-card-2/index.ts

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

package/src/components/_components/product-cards/product-card-2/product-card.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useState } from "react";
-import Rating from "@mui/material/Rating";
-// LOCAL CUSTOM COMPONENTS
-import ProductPrice from "./components/product-price";
-import FavoriteButton from "./components/favorite-button";
-// GLOBAL CUSTOM COMPONENTS
-import HoverBox from "@evenicanpm/storefront-core/src/components/_components/HoverBox";
-import { H6 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import LazyImage from "@evenicanpm/storefront-core/src/components/_components/LazyImage";
-import { FlexBetween } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-
-// ========================================================
-interface Props {
-  off?: number;
-  slug: string;
-  title: string;
-  price: number;
-  imgUrl: string;
-  rating: number;
-  hideReview?: boolean;
-  hideFavoriteIcon?: boolean;
-}
-// ========================================================
-
-export default function ProductCard2({
-  slug,
-  title,
-  price,
-  imgUrl,
-  rating,
-  off = 20,
-  hideReview,
-  hideFavoriteIcon,
-}: Props) {
-  const [favorite, setFavorite] = useState(false);
-
-  return (
-    <div>
-      <Link href={`/products/${slug}`}>
-        <HoverBox overflow="hidden" borderRadius={2}>
-          <LazyImage width={270} height={270} alt={title} src={imgUrl} />
-        </HoverBox>
-      </Link>
-
-      <FlexBetween mt={2}>
-        <div>
-          <H6 mb={0.5} title={title} ellipsis>
-            {title}
-          </H6>
-
-          {!hideReview ? (
-            <Rating size="small" value={rating} color="warn" readOnly />
-          ) : null}
-
-          <ProductPrice price={price} off={off} />
-        </div>
-
-        {!hideFavoriteIcon ? (
-          <FavoriteButton
-            isFavorite={favorite}
-            handleClick={() => setFavorite((state) => !state)}
-          />
-        ) : null}
-      </FlexBetween>
-    </div>
-  );
-}

package/src/components/_components/product-cards/product-card-3/components/hover-actions.tsx

@@ -1,83 +0,0 @@
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-import Favorite from "@mui/icons-material/Favorite";
-import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
-import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
-import AddShoppingCart from "@mui/icons-material/AddShoppingCart";
-// GLOBAL CUSTOM COMPONENT
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-// STYLED COMPONENTS
-import { HoverButtonBox, ItemController } from "../styles/index";
-
-// ==============================================================
-interface Props {
-  hasQty: boolean;
-  isFavorite: boolean;
-  toggleDialog: () => void;
-  toggleFavorite: () => void;
-  handleAddToCart: () => void;
-  handleRemoveFormCart: () => void;
-}
-// ==============================================================
-
-export default function HoverActions(props: Props) {
-  const {
-    hasQty,
-    isFavorite,
-    toggleDialog,
-    toggleFavorite,
-    handleAddToCart,
-    handleRemoveFormCart,
-  } = props;
-
-  return (
-    <HoverButtonBox className="hoverButtonBox">
-      <div className="buttonBox">
-        <ItemController>
-          <Span onClick={toggleDialog}>
-            <RemoveRedEye />
-          </Span>
-
-          <Divider orientation="vertical" flexItem />
-
-          <Span onClick={toggleFavorite}>
-            {isFavorite ? (
-              <Favorite color="primary" fontSize="small" />
-            ) : (
-              <FavoriteBorder color="primary" fontSize="small" />
-            )}
-          </Span>
-
-          <Divider orientation="vertical" flexItem />
-
-          <Span onClick={handleAddToCart}>
-            <AddShoppingCart />
-          </Span>
-        </ItemController>
-
-        {hasQty ? (
-          <Button
-            color="primary"
-            variant="outlined"
-            className="addCartButton"
-            onClick={handleRemoveFormCart}
-          >
-            <Remove /> Remove from Cart
-          </Button>
-        ) : (
-          <Button
-            color="primary"
-            variant="outlined"
-            className="addCartButton"
-            onClick={handleAddToCart}
-          >
-            <Add /> Add to Cart
-          </Button>
-        )}
-      </div>
-    </HoverButtonBox>
-  );
-}

package/src/components/_components/product-cards/product-card-3/index.ts

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

package/src/components/_components/product-cards/product-card-3/product-card.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import Link from "next/link";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components/_components/LazyImage";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components/_components/products-view/product-view-dialog";
-// LOCAL CUSTOM HOOKS
-import useProduct from "../use-product";
-// LOCAL CUSTOM COMPONENTS
-import DiscountChip from "../discount-chip";
-import ProductPrice from "../product-price";
-import ProductTitle from "../product-title";
-import ProductRating from "../product-rating";
-import HoverActions from "./components/hover-actions";
-// STYLED COMPONENTS
-import {
-  ContentWrapper,
-  ImageBox,
-  ImageWrapper,
-  StyledBazaarCard,
-} from "./styles/index";
-
-// ====================================================================
-type Props = {
-  off: number;
-  slug: string;
-  price: number;
-  title: string;
-  imgUrl: string;
-  rating?: number;
-  id: string | number;
-  hideRating?: boolean;
-};
-// ====================================================================
-
-export default function ProductCard10(props: Props) {
-  const { off, id, title, price, imgUrl, rating, hideRating, slug } = props;
-
-  const {
-    handleCartAmountChange,
-    cartItem,
-    isFavorite,
-    openModal,
-    toggleDialog,
-    toggleFavorite,
-  } = useProduct(slug);
-
-  const handleAddToCart = () => {
-    const product = { price, imgUrl, id, name: title, qty: 1, slug };
-    product;
-    handleCartAmountChange();
-  };
-
-  const handleRemoveFormCart = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      imgUrl,
-      name: title,
-      qty: (cartItem?.Quantity || 0) - 1,
-    };
-    product;
-    handleCartAmountChange("remove");
-  };
-
-  return (
-    <StyledBazaarCard>
-      <ImageWrapper>
-        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-        <DiscountChip discount={off} />
-
-        {/* PRODUCT IMAGE / THUMBNAIL */}
-        <ImageBox className="hoverImgBox">
-          <Link href={`/products/${slug}`}>
-            <LazyImage alt={title} width={190} height={190} src={imgUrl} />
-          </Link>
-        </ImageBox>
-
-        {/* PRODUCT VIEW DIALOG BOX */}
-        <ProductViewDialog
-          openDialog={openModal}
-          handleCloseDialog={toggleDialog}
-          product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
-        />
-
-        {/* PRODUCT HOVER ACTION ICONS */}
-        <HoverActions
-          isFavorite={isFavorite}
-          toggleDialog={toggleDialog}
-          toggleFavorite={toggleFavorite}
-          handleAddToCart={handleAddToCart}
-          hasQty={cartItem?.Quantity ? true : false}
-          handleRemoveFormCart={handleRemoveFormCart}
-        />
-      </ImageWrapper>
-
-      <ContentWrapper>
-        {/* PRODUCT NAME / TITLE */}
-        <ProductTitle title={title} slug={slug} />
-
-        {/* PRODUCT RATING / REVIEW  */}
-        <ProductRating showRating={!hideRating} rating={rating ?? 0} />
-
-        {/* PRODUCT PRICE WITH DISCOUNT */}
-        <ProductPrice discount={off} price={price} />
-      </ContentWrapper>
-    </StyledBazaarCard>
-  );
-}

package/src/components/_components/product-cards/product-card-3/styles/index.ts

@@ -1,89 +0,0 @@
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENT
-import { FlexBetween } from "@/components/_components/flex-box/index";
-
-export const StyledBazaarCard = styled("div")({
-  height: "100%",
-  margin: "auto",
-  display: "flex",
-  overflow: "hidden",
-  position: "relative",
-  flexDirection: "column",
-  justifyContent: "space-between",
-});
-
-export const ImageWrapper = styled("div")(({ theme }) => ({
-  height: "100%",
-  borderRadius: 8,
-  overflow: "hidden",
-  textAlign: "center",
-  position: "relative",
-  display: "inline-block",
-  [theme.breakpoints.down("sm")]: { display: "block" },
-  "&:hover": {
-    "& .hoverButtonBox": { opacity: 1 },
-    "& .hoverImgBox": { filter: "blur(5px)" },
-  },
-}));
-
-export const HoverButtonBox = styled("div")({
-  opacity: 0,
-  top: "50%",
-  left: "50%",
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  transition: ".5s ease",
-  transform: "translate(-50%, -50%)",
-  "& .buttonBox": {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    flexDirection: "column",
-    justifyContent: "center",
-    "& .addCartButton": {
-      bottom: 20,
-      margin: "auto",
-      padding: "4px 14px",
-      position: "absolute",
-      "& svg": { fontSize: 16 },
-    },
-  },
-});
-
-export const ImageBox = styled("div")({
-  opacity: 1,
-  height: "100%",
-  display: "grid",
-  placeItems: "center",
-  padding: "44px 40px",
-  background: "#F5F5F5",
-  transition: "all .3s ease",
-});
-
-export const ItemController = styled(FlexBetween)(({ theme }) => ({
-  background: "#fff",
-  overflow: "hidden",
-  borderRadius: "5px",
-  boxShadow: theme.shadows[2],
-  "& span": {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    padding: "6px 12px",
-    alignItems: "center",
-    "&:hover": { cursor: "pointer", background: "#f3f5f9" },
-  },
-  "& svg": { fontSize: 22, color: theme.palette.grey[600] },
-}));
-
-export const ContentWrapper = styled("div")({
-  padding: "1rem",
-  "& .title, & .categories": {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-});