@evenicanpm/storefront-core 1.0.0-alpha

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

@@ -0,0 +1,37 @@
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// STYLED COMPONENTS
+import { HoverIconWrapper } from "../styles/index";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  toggleView: () => void;
+  toggleFavorite: () => void;
+}
+// ==============================================================
+
+export default function HoverActions({
+  isFavorite,
+  toggleFavorite,
+  toggleView,
+}: Props) {
+  return (
+    <HoverIconWrapper className="hover-box">
+      <IconButton onClick={toggleView}>
+        <RemoveRedEye color="disabled" fontSize="small" />
+      </IconButton>
+
+      <IconButton onClick={toggleFavorite}>
+        {isFavorite ? (
+          <Favorite color="primary" fontSize="small" />
+        ) : (
+          <FavoriteBorder fontSize="small" color="disabled" />
+        )}
+      </IconButton>
+    </HoverIconWrapper>
+  );
+}

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

@@ -0,0 +1,56 @@
+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 "@/components/_components/flex-box/index";
+import { Paragraph } from "@/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-1/index.ts

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

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

@@ -0,0 +1,146 @@
+"use client";
+
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { Span } from "@/components/_components/Typography";
+import ProductViewDialog from "@/components/_components/products-view/product-view-dialog";
+// LOCAL CUSTOM HOOK
+import useProduct from "../use-product";
+// LOCAL CUSTOM COMPONENTS
+import HoverActions from "./components/hover-actions";
+import ProductPrice from "../product-price";
+import ProductTitle from "../product-title";
+import DiscountChip from "../discount-chip";
+import QuantityButtons from "./components/quantity-buttons";
+// STYLED COMPONENTS
+import { ImageWrapper, ContentWrapper, StyledBazaarCard } from "./styles/index";
+import buildDetailUrl from "@/lib/build-detail-url";
+
+// ========================================================
+type Props = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: string | number;
+  hideRating?: boolean;
+  hoverEffect?: boolean;
+  showProductSize?: boolean;
+};
+// ========================================================
+
+export default function ProductCard1({
+  id,
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating = 5,
+  hideRating,
+  hoverEffect,
+  discount = 5,
+  showProductSize,
+}: Props) {
+  const {
+    isFavorite,
+    openModal,
+    cartItem,
+    toggleDialog,
+    toggleFavorite,
+    handleCartAmountChange,
+  } = 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 hoverEffect={hoverEffect}>
+      <ImageWrapper>
+        {/* DISCOUNT PERCENT CHIP IF AVAILABLE */}
+        <DiscountChip discount={discount} />
+
+        {/* HOVER ACTION ICONS */}
+        <HoverActions
+          isFavorite={isFavorite}
+          toggleView={toggleDialog}
+          toggleFavorite={toggleFavorite}
+        />
+
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={buildDetailUrl(title, Number(id))}>
+          <LazyImage
+            priority
+            src={imgUrl}
+            width={500}
+            height={500}
+            alt={title}
+          />
+        </Link>
+      </ImageWrapper>
+
+      {/* PRODUCT VIEW DIALOG BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ title, price, id, slug, imgGroup: [imgUrl, imgUrl] }}
+      />
+
+      <ContentWrapper>
+        <Box flex="1 1 0" minWidth="0px" mr={1}>
+          {/* PRODUCT NAME / TITLE */}
+          <ProductTitle title={title} slug={slug} />
+
+          {/* PRODUCT RATINGS IF AVAILABLE */}
+          {!hideRating ? (
+            <Rating size="small" value={rating} color="warn" readOnly />
+          ) : null}
+
+          {/* PRODUCT SIZE IF AVAILABLE */}
+          {showProductSize ? (
+            <Span color="grey.600" mb={1} display="block">
+              Liter
+            </Span>
+          ) : null}
+
+          {/* PRODUCT PRICE WITH DISCOUNT */}
+          <ProductPrice discount={discount} price={price} />
+        </Box>
+
+        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
+        <QuantityButtons
+          quantity={cartItem?.Quantity || 0}
+          handleIncrement={handleIncrementQuantity}
+          handleDecrement={handleDecrementQuantity}
+        />
+      </ContentWrapper>
+    </StyledBazaarCard>
+  );
+}

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

@@ -0,0 +1,46 @@
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENT
+import BazaarCard from "@/components/_components/BazaarCard";
+
+export const StyledBazaarCard = styled(BazaarCard)({
+  height: "100%",
+  margin: "auto",
+  display: "flex",
+  overflow: "hidden",
+  borderRadius: "8px",
+  position: "relative",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  transition: "all 250ms ease-in-out",
+  ":hover": { "& .hover-box": { opacity: 1 } },
+});
+
+export const ImageWrapper = styled("div")(({ theme }) => ({
+  textAlign: "center",
+  position: "relative",
+  display: "inline-block",
+  [theme.breakpoints.down("sm")]: { display: "block" },
+}));
+
+export const HoverIconWrapper = styled("div")({
+  zIndex: 2,
+  top: "7px",
+  opacity: 0,
+  right: "15px",
+  display: "flex",
+  cursor: "pointer",
+  position: "absolute",
+  flexDirection: "column",
+  transition: "all 0.3s ease-in-out",
+});
+
+export const ContentWrapper = styled("div")({
+  gap: 8,
+  display: "flex",
+  padding: "1rem",
+  "& .title, & .categories": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+});

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

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

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

@@ -0,0 +1,124 @@
+"use client";
+
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Rating from "@mui/material/Rating";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+// LOCAL CUSTOM HOOK
+import useProduct from "../use-product";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { FlexRowCenter } from "@/components/_components/flex-box/index";
+import { H4, Paragraph, Small } from "@/components/_components/Typography";
+import ProductViewDialog from "@/components/_components/products-view/product-view-dialog";
+// STYLED COMPONENTS
+import {
+  StyledIconButton,
+  Card,
+  CardMedia,
+  FavoriteButton,
+} from "./styles/index";
+// CUSTOM UTILS LIBRARY FUNCTION
+import { currency } from "@/lib/lib";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+type Props = { product: Product };
+// ==============================================================
+
+export default function ProductCard10({ product }: Props) {
+  const { slug, id, price, rating, thumbnail, title, reviews } = product;
+
+  const {
+    cartItem,
+    handleCartAmountChange,
+    isFavorite,
+    openModal,
+    toggleDialog,
+    toggleFavorite,
+  } = useProduct(slug);
+
+  const handleAddToCart = () => {
+    const payload = {
+      id: id,
+      slug: slug,
+      name: title,
+      price: price,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    payload;
+    handleCartAmountChange();
+  };
+
+  return (
+    <Card>
+      <CardMedia>
+        {/* PRODUCT IMAGE / THUMBNAIL */}
+        <Link href={`/products/${slug}`}>
+          <LazyImage
+            width={300}
+            height={300}
+            alt="category"
+            src={thumbnail}
+            className="product-img"
+          />
+        </Link>
+
+        {/* PRODUCT VIEW BUTTON */}
+        <StyledIconButton className="product-actions" onClick={toggleDialog}>
+          <RemoveRedEye color="disabled" fontSize="small" />
+        </StyledIconButton>
+
+        {/* PRODUCT FAVORITE BUTTON */}
+        <FavoriteButton className="product-actions" onClick={toggleFavorite}>
+          {isFavorite ? (
+            <Favorite color="primary" fontSize="small" />
+          ) : (
+            <FavoriteBorder color="disabled" fontSize="small" />
+          )}
+        </FavoriteButton>
+      </CardMedia>
+
+      {/* PRODUCT VIEW BOX */}
+      <ProductViewDialog
+        openDialog={openModal}
+        handleCloseDialog={toggleDialog}
+        product={{ id, slug, title, price, imgGroup: [thumbnail, thumbnail] }}
+      />
+
+      <Box p={2} textAlign="center">
+        {/* PRODUCT TITLE */}
+        <Paragraph>{title}</Paragraph>
+
+        {/* PRODUCT PRICE */}
+        <H4 fontWeight={700} py={0.5}>
+          {currency(price)}
+        </H4>
+
+        {/* PRODUCT RATINGS */}
+        <FlexRowCenter gap={1} mb={2}>
+          <Rating
+            name="read-only"
+            value={rating || 4}
+            readOnly
+            sx={{ fontSize: 14 }}
+          />
+          <Small fontWeight={600} color="grey.500">
+            ({reviews?.length})
+          </Small>
+        </FlexRowCenter>
+
+        {/* PRODUCT ADD TO CART BUTTON */}
+        <Button fullWidth variant="outlined" onClick={handleAddToCart}>
+          Add To Cart
+        </Button>
+      </Box>
+    </Card>
+  );
+}

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

@@ -0,0 +1,38 @@
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+
+export const Card = styled("div")(({ theme }) => ({
+  height: "100%",
+  borderRadius: "3px",
+  transition: "all 0.3s",
+  backgroundColor: theme.palette.common.white,
+  border: `1px solid ${theme.palette.grey[100]}`,
+  ":hover": {
+    "& .product-actions": { right: 5 },
+    "& img": { transform: "scale(1.1)" },
+    border: `1px solid ${theme.palette.primary.dark}`,
+  },
+}));
+
+export const CardMedia = styled("div")({
+  width: "100%",
+  maxHeight: 300,
+  cursor: "pointer",
+  overflow: "hidden",
+  position: "relative",
+  "& img": { transition: "0.3s" },
+});
+
+export const StyledIconButton = styled(IconButton)({
+  top: 10,
+  right: -40,
+  position: "absolute",
+  transition: "right 0.3s .1s",
+});
+
+export const FavoriteButton = styled(IconButton)({
+  top: 45,
+  right: -40,
+  position: "absolute",
+  transition: "right 0.3s .2s",
+});

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

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

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

@@ -0,0 +1,63 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { H3, Paragraph } from "@/components/_components/Typography";
+import {
+  FlexBetween,
+  FlexRowCenter,
+} from "@/components/_components/flex-box/index";
+// STYLED COMPONENTS
+import { CardRoot, PriceText } from "./styles/index";
+
+// ==============================================================
+interface Props {
+  image: string;
+  sale?: boolean;
+  title?: string;
+  salePrice?: number;
+  description?: string;
+  regularPrice?: number;
+}
+// ==============================================================
+
+export default function ProductCard11(props: Props) {
+  const { image, sale, title } = props || {};
+
+  return (
+    <CardRoot elevation={0}>
+      {/* SALE CHIP */}
+      {sale ? (
+        <FlexRowCenter
+          top={12}
+          left={12}
+          width={50}
+          height={50}
+          borderRadius="50%"
+          position="absolute"
+          bgcolor="error.main"
+        >
+          <Paragraph color="white">Sale!</Paragraph>
+        </FlexRowCenter>
+      ) : null}
+
+      {/* PRODUCT IMAGE */}
+      <LazyImage width={379} height={340} alt="Apple Watch" src={image} />
+
+      <Box p={2}>
+        {/* PRODUCT TITLE & REGULAR PRICE */}
+        <FlexBetween>
+          <H3 fontSize={18}>{title}</H3>
+          <PriceText>$250.00</PriceText>
+        </FlexBetween>
+
+        {/* DESCRIPTION & SALE PRICE */}
+        <FlexBetween mt={0.5}>
+          <Paragraph color="grey.600" ellipsis>
+            Powerful sensors, advanced
+          </Paragraph>
+          <H3 fontSize={18}>$110.00</H3>
+        </FlexBetween>
+      </Box>
+    </CardRoot>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+export const CardRoot = styled(Card)(({ theme }) => ({
+  borderRadius: 16,
+  position: "relative",
+  border: `1px solid ${theme.palette.grey[300]}`,
+}));
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontWeight: 600,
+  color: theme.palette.grey[600],
+  textDecoration: "line-through",
+}));

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

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

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

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@/components/_components/Typography";
+import LazyImage from "@/components/_components/LazyImage";
+import { FlexBox } from "@/components/_components/flex-box/index";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { PriceText } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+type Props = { product: Product };
+// ==============================================================
+
+export default function ProductCard12({ product }: Props) {
+  const { slug, title, thumbnail, price, discount, rating } = product || {};
+
+  return (
+    <Link href={`/products/${slug}`}>
+      <FlexBox bgcolor="grey.50" borderRadius={3} mb={2}>
+        <LazyImage alt={title} width={380} height={379} src={thumbnail} />
+      </FlexBox>
+
+      <div>
+        <Rating readOnly value={rating} size="small" precision={0.5} />
+        <H6 fontSize={17} fontWeight={700}>
+          {title}
+        </H6>
+
+        <PriceText>
+          {discount ? (
+            <span className="base-price">{currency(price)}</span>
+          ) : null}
+          {calculateDiscount(price, discount)}
+        </PriceText>
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontSize: 17,
+  fontWeight: 700,
+  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-13/index.ts

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

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

@@ -0,0 +1,45 @@
+import Link from "next/link";
+// LOCAL CUSTOM COMPONENTS
+import DiscountChip from "../discount-chip";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { H3, Paragraph } from "@/components/_components/Typography";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { CardRoot, PriceText } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+type Props = { product: Product };
+// ==============================================================
+
+export default function ProductCard13({ product }: Props) {
+  const { title, thumbnail, price, discount, slug } = product || {};
+
+  return (
+    <CardRoot elevation={0}>
+      <Link href={`/products/${slug}`}>
+        {/* SALE CHIP */}
+        <DiscountChip discount={discount} sx={{ top: 15, left: 15 }} />
+
+        {/* PRODUCT IMAGE */}
+        <LazyImage alt={title} width={380} height={379} src={thumbnail} />
+
+        <div className="content">
+          <Paragraph fontWeight={600} color="grey.600">
+            Supplies
+          </Paragraph>
+
+          <H3 fontSize={18}>{title}</H3>
+
+          <PriceText>
+            {calculateDiscount(price, discount)}
+            {discount ? <span>{currency(price)}</span> : null}
+          </PriceText>
+        </div>
+      </Link>
+    </CardRoot>
+  );
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+export const CardRoot = styled(Card)(({ theme }) => ({
+  borderRadius: 16,
+  position: "relative",
+  border: `1px solid ${theme.palette.grey[300]}`,
+  ".content": { padding: "1rem", textAlign: "center" },
+}));
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontSize: 16,
+  fontWeight: 700,
+  color: theme.palette.primary.main,
+
+  span: {
+    fontSize: 14,
+    marginLeft: 6,
+    fontWeight: 600,
+    textDecoration: "line-through",
+    color: theme.palette.grey[600],
+  },
+}));

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

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