@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/product-cards/product-card-5/components/hover-actions.tsx

@@ -1,50 +0,0 @@
-import Divider from "@mui/material/Divider";
-// MUI ICON COMPONENTS
-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-v2/Typography";
-// STYLED COMPONENT
-import { HoverWrapper } from "../styles/index";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  toggleView: () => void;
-  toggleFavorite: () => void;
-  handleIncrementQuantity: () => void;
-}
-// ==============================================================
-
-export default function HoverActions({
-  isFavorite,
-  toggleView,
-  toggleFavorite,
-  handleIncrementQuantity,
-}: Props) {
-  return (
-    <HoverWrapper className="controller">
-      <Span onClick={toggleView}>
-        <RemoveRedEye />
-      </Span>
-
-      <Divider orientation="horizontal" flexItem />
-
-      <Span onClick={toggleFavorite}>
-        {isFavorite ? (
-          <Favorite color="primary" fontSize="small" />
-        ) : (
-          <FavoriteBorder fontSize="small" color="primary" />
-        )}
-      </Span>
-
-      <Divider orientation="horizontal" flexItem />
-
-      <Span onClick={handleIncrementQuantity}>
-        <AddShoppingCart />
-      </Span>
-    </HoverWrapper>
-  );
-}

package/src/components-v2/product-cards/product-card-5/index.ts

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

package/src/components-v2/product-cards/product-card-5/product-card.tsx

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

package/src/components-v2/product-cards/product-card-5/styles/index.ts

@@ -1,94 +0,0 @@
-import styled from "@mui/material/styles/styled";
-import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import getPaletteColor from "@/lib/get-palette-color";
-
-export const StyledBazaarCard = styled(BazaarCard)(({ theme }) => ({
-  margin: "auto",
-  height: "100%",
-  display: "flex",
-  overflow: "hidden",
-  position: "relative",
-  flexDirection: "column",
-  justifyContent: "space-between",
-  transition: "all 250ms ease-in-out",
-  border: `1px solid ${theme.palette.grey[300]}`,
-  ":hover": {
-    boxShadow: theme.shadows[2],
-    ".controller": { right: 10 },
-  },
-}));
-
-export const ImageWrapper = styled("div")(({ theme }) => ({
-  height: "100%",
-  textAlign: "center",
-  position: "relative",
-  display: "inline-block",
-  [theme.breakpoints.down("sm")]: { display: "block" },
-}));
-
-export const ImageBox = styled("div")(({ theme }) => ({
-  padding: "3rem",
-  height: "100%",
-  borderBottom: `1px solid ${theme.palette.grey[300]}`,
-}));
-
-export const HoverWrapper = styled("div")(({ theme }) => ({
-  top: 0,
-  bottom: 0,
-  width: 35,
-  right: -40,
-  height: 120,
-  margin: "auto",
-  display: "flex",
-  background: "#fff",
-  overflow: "hidden",
-  borderRadius: "5px",
-  alignItems: "center",
-  position: "absolute",
-  flexDirection: "column",
-  boxShadow: theme.shadows[2],
-  justifyContent: "space-between",
-  transition: "right 0.3s ease-in-out",
-  span: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    padding: "10px 0px",
-    alignItems: "center",
-    justifyContent: "center",
-    ":hover": { cursor: "pointer", background: "#f3f5f9" },
-  },
-  a: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    "&:hover": { cursor: "pointer", background: "#f3f5f9" },
-  },
-  svg: {
-    fontSize: 18,
-    color: theme.palette.grey[600],
-  },
-}));
-
-export const ContentWrapper = styled("div")({
-  padding: "1rem",
-  "& .title, & .categories": {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-});
-
-export const ButtonBox = styled("div")(({ theme }) => ({
-  gap: 10,
-  display: "flex",
-  marginTop: "15px",
-  justifyContent: "space-between",
-  "& button": {
-    color: "#fff",
-    background: theme.palette.primary.main,
-    "&:hover": { background: getPaletteColor(theme, "primary", 600) },
-  },
-}));

package/src/components-v2/product-cards/product-card-6/components/hover-actions.tsx

@@ -1,50 +0,0 @@
-import Divider from "@mui/material/Divider";
-// MUI ICON COMPONENTS
-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-v2/Typography";
-// STYLED COMPONENT
-import { ItemController } from "../styles/index";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  toggleView: () => void;
-  toggleFavorite: () => void;
-  handleAddToCart: () => void;
-}
-// ==============================================================
-
-export default function HoverActions({
-  isFavorite,
-  toggleView,
-  toggleFavorite,
-  handleAddToCart,
-}: Props) {
-  return (
-    <ItemController className="controlBox">
-      <Span onClick={toggleView}>
-        <RemoveRedEye />
-      </Span>
-
-      <Divider orientation="horizontal" flexItem />
-
-      <Span onClick={toggleFavorite}>
-        {isFavorite ? (
-          <Favorite color="primary" fontSize="small" />
-        ) : (
-          <FavoriteBorder fontSize="small" color="primary" />
-        )}
-      </Span>
-
-      <Divider orientation="horizontal" flexItem />
-
-      <Span onClick={handleAddToCart}>
-        <AddShoppingCart />
-      </Span>
-    </ItemController>
-  );
-}

package/src/components-v2/product-cards/product-card-6/index.ts

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

package/src/components-v2/product-cards/product-card-6/product-card.tsx

@@ -1,121 +0,0 @@
-"use client";
-
-import Link from "next/link";
-// LOCAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/products-view/product-view-dialog";
-// LOCAL CUSTOM HOOK
-import useProduct from "../use-product";
-// LOCAL CUSTOM COMPONENTS
-import HoverActions from "./components/hover-actions";
-import ProductTitle from "../product-title";
-import ProductPrice from "../product-price";
-import DiscountChip from "../discount-chip";
-import ProductRating from "../product-rating";
-// STYLED COMPONENTS
-import { ContentWrapper, ImgBox, StyledCard } from "./styles/index";
-// CUSTOM DATA MODEL
-import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
-
-// ============================================================
-interface Props extends Partial<Product> {
-  hideRating?: boolean;
-  showProductSize?: boolean;
-  discount?: number;
-  id?: string;
-  slug: string;
-  title?: string;
-  price?: number;
-  thumbnail?: string;
-  rating?: number;
-  imgUrl?: string;
-}
-// ============================================================
-
-export default function ProductCard6(props: Props) {
-  const {
-    hideRating,
-    discount,
-    id,
-    slug,
-    title,
-    price,
-    thumbnail,
-    rating,
-    imgUrl,
-  } = props;
-
-  const {
-    cartItem,
-    isFavorite,
-    openModal,
-    toggleDialog,
-    toggleFavorite,
-    handleCartAmountChange,
-  } = useProduct(slug);
-
-  const handleAddToCart = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      imgUrl,
-      name: title,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    product;
-    handleCartAmountChange();
-  };
-
-  return (
-    <StyledCard>
-      <ImgBox id="imgBox">
-        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
-        <DiscountChip discount={discount ?? 0} shape="square" />
-
-        {/* PRODUCT IMAGE / THUMBNAIL */}
-        <Link href={`/products/${slug}`}>
-          <LazyImage
-            alt={title ?? "title error"}
-            width={550}
-            height={550}
-            src={thumbnail ?? ""}
-            style={{ height: 190, objectFit: "contain" }}
-          />
-        </Link>
-
-        {/* HOVER ACTION ICONS */}
-        <HoverActions
-          isFavorite={isFavorite}
-          toggleView={toggleDialog}
-          toggleFavorite={toggleFavorite}
-          handleAddToCart={handleAddToCart}
-        />
-      </ImgBox>
-
-      {/* PRODUCT VIEW DIALOG BOX */}
-      <ProductViewDialog
-        openDialog={openModal}
-        handleCloseDialog={toggleDialog}
-        product={{
-          title: title || "",
-          price: price || 0,
-          id: id || "",
-          slug: slug || "",
-          imgGroup: imgUrl ? [imgUrl] : ([] as string[]),
-        }}
-      />
-
-      <ContentWrapper>
-        {/* PRODUCT PRICE WITH DISCOUNT */}
-        <ProductPrice discount={discount ?? 0} price={price ?? 0} />
-
-        {/* PRODUCT NAME / TITLE */}
-        <ProductTitle slug={slug} title={title ?? "title error"} />
-
-        {/* PRODUCT RATINGS IF AVAILABLE */}
-        <ProductRating rating={rating ?? 0} showRating={!hideRating} />
-      </ContentWrapper>
-    </StyledCard>
-  );
-}

package/src/components-v2/product-cards/product-card-6/styles/index.ts

@@ -1,63 +0,0 @@
-import Box from "@mui/material/Box";
-import styled from "@mui/material/styles/styled";
-import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import getPaletteColor from "@/lib/get-palette-color";
-
-export const StyledCard = styled(Box)(({ theme }) => ({
-  height: "100%",
-  margin: "auto",
-  borderRadius: 0,
-  overflow: "hidden",
-  position: "relative",
-  transition: "all 250ms ease-in-out",
-  "&:hover": {
-    boxShadow: theme.shadows[2],
-    "& .css-1i2n18j": { display: "flex" },
-    "& .controlBox": { display: "flex", bottom: 0 },
-  },
-}));
-
-export const ImgBox = styled("div")(({ theme }) => ({
-  overflow: "hidden",
-  position: "relative",
-  padding: "0 40px 20px 40px",
-  background: getPaletteColor(theme, "primary", 100),
-}));
-
-export const ItemController = styled(FlexBetween)(({ theme }) => ({
-  width: 35,
-  right: 15,
-  height: 120,
-  bottom: -120,
-  background: "#fff",
-  overflow: "hidden",
-  position: "absolute",
-  flexDirection: "column",
-  transition: "bottom 0.3s ease-in-out",
-  "& span": {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    padding: "8px 10px",
-    alignItems: "center",
-    justifyContent: "center",
-    "&:hover": {
-      cursor: "pointer",
-      background: theme.palette.primary.main,
-      "& svg": { color: "#fff" },
-    },
-  },
-  "& svg": { fontSize: 18, color: theme.palette.grey[600] },
-}));
-
-export const ContentWrapper = styled("div")({
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "column",
-  padding: "1rem",
-  "& .title, & .categories": {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-});

package/src/components-v2/product-cards/product-card-7/components/product-status.tsx

@@ -1,18 +0,0 @@
-// STYLED COMPONENTS
-import { StatusChipBox, StatusChip } from "../styles/index";
-
-// ==============================================================
-type Props = { status: string };
-// ==============================================================
-
-export default function ProductStatus({ status }: Props) {
-  return status ? (
-    <StatusChipBox>
-      <StatusChip>{status}</StatusChip>
-      <div className="triangle">
-        <div className="triangle-left" />
-        <div className="triangle-right" />
-      </div>
-    </StatusChipBox>
-  ) : null;
-}

package/src/components-v2/product-cards/product-card-7/components/quantity-buttons.tsx

@@ -1,47 +0,0 @@
-import { Fragment } from "react";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENT
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// STYLED COMPONENT
-import { StyledButton } from "../styles/index";
-
-// ==============================================================
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-}
-// ==============================================================
-
-export default function QuantityButtons({
-  quantity,
-  handleDecrement,
-  handleIncrement,
-}: Props) {
-  return (
-    <FlexBox
-      width="30px"
-      alignItems="center"
-      className="add-cart"
-      flexDirection="column-reverse"
-      justifyContent={quantity ? "space-between" : "flex-start"}
-    >
-      <StyledButton variant="outlined" onClick={handleIncrement}>
-        <Add fontSize="small" />
-      </StyledButton>
-
-      {quantity ? (
-        <Fragment>
-          <Paragraph fontWeight={600}>{quantity}</Paragraph>
-
-          <StyledButton variant="outlined" onClick={handleDecrement}>
-            <Remove fontSize="small" />
-          </StyledButton>
-        </Fragment>
-      ) : null}
-    </FlexBox>
-  );
-}

package/src/components-v2/product-cards/product-card-7/index.ts

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