@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,42 +0,0 @@
-import Link from "next/link";
-import Rating from "@mui/material/Rating";
-// GLOBAL CUSTOM COMPONENTS
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/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 "@evenicanpm/storefront-core/src/components-v2/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-v2/product-cards/product-card-12/styles/index.ts

@@ -1,16 +0,0 @@
-"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-v2/product-cards/product-card-13/index.ts

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

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

@@ -1,48 +0,0 @@
-import Link from "next/link";
-// LOCAL CUSTOM COMPONENTS
-import DiscountChip from "../discount-chip";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import {
-  H3,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components-v2/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 "@evenicanpm/storefront-core/src/components-v2/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-v2/product-cards/product-card-13/styles/index.ts

@@ -1,25 +0,0 @@
-"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-v2/product-cards/product-card-14/index.ts

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

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

@@ -1,125 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { Fragment } from "react";
-import Button from "@mui/material/Button";
-import ButtonBase from "@mui/material/ButtonBase";
-import clsx from "clsx";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import {
-  H6,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// LOCAL CUSTOM HOOKS
-import useProduct from "../use-product";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-// STYLED COMPONENTS
-import { Content, PriceText } from "./styles/index";
-// CUSTOM DATA MODEL
-import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
-
-// ==============================================================
-interface Props {
-  product: Product;
-  btnSmall?: boolean;
-}
-// ==============================================================
-
-export default function ProductCard14({ product, btnSmall = false }: Props) {
-  const { id, slug, title, thumbnail, price, discount } = product || {};
-
-  const { cartItem, handleCartAmountChange } = useProduct(slug);
-
-  const handleIncrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl: thumbnail,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    product;
-    handleCartAmountChange();
-  };
-
-  const handleDecrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl: thumbnail,
-      qty: (cartItem?.Quantity || 0) - 1,
-    };
-    product;
-    handleCartAmountChange("remove");
-  };
-
-  return (
-    <Fragment>
-      <Link href={`/products/${slug}`}>
-        <FlexBox bgcolor="grey.50" borderRadius={3} mb={2}>
-          <LazyImage alt={title} width={260} height={280} src={thumbnail} />
-        </FlexBox>
-      </Link>
-
-      <Content>
-        <H6 fontSize={17} fontWeight={700}>
-          {title}
-        </H6>
-
-        <Paragraph color="grey.600" fontWeight={600}>
-          12 pcs
-        </Paragraph>
-
-        <PriceText>
-          {calculateDiscount(price, discount)}
-          {discount ? (
-            <span className="base-price">{currency(price)}</span>
-          ) : null}
-        </PriceText>
-
-        <div className={clsx({ "button-small": btnSmall })}>
-          {!cartItem?.Quantity ? (
-            <Button
-              fullWidth
-              disableElevation
-              color="primary"
-              variant="contained"
-              onClick={handleIncrementQuantity}
-            >
-              Add To Cart
-            </Button>
-          ) : (
-            <div className="button-group">
-              <ButtonBase
-                className="base-button"
-                onClick={handleDecrementQuantity}
-              >
-                <Remove fontSize="small" />
-              </ButtonBase>
-
-              <Paragraph flex={1} fontWeight="600" lineHeight={1.75}>
-                {cartItem?.Quantity}
-              </Paragraph>
-
-              <ButtonBase
-                className="base-button"
-                onClick={handleIncrementQuantity}
-              >
-                <Add fontSize="small" />
-              </ButtonBase>
-            </div>
-          )}
-        </div>
-      </Content>
-    </Fragment>
-  );
-}

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

@@ -1,40 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-import getPaletteColor from "@/lib/get-palette-color";
-
-export const PriceText = styled("p")(({ theme }) => ({
-  gap: 8,
-  fontSize: 17,
-  fontWeight: 700,
-  marginBottom: 8,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: theme.palette.primary.main,
-  ".base-price": {
-    fontSize: 15,
-    // marginLeft: 8,
-    fontWeight: 600,
-    textDecoration: "line-through",
-    color: theme.palette.grey[600],
-  },
-}));
-
-export const Content = styled("div")(({ theme }) => ({
-  textAlign: "center",
-  ".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" },
-}));

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

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

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

@@ -1,121 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import Button from "@mui/material/Button";
-import ButtonBase from "@mui/material/ButtonBase";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import {
-  H6,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// LOCAL CUSTOM HOOKS
-import useProduct from "../use-product";
-// CUSTOM UTILS LIBRARY FUNCTIONS
-import { calculateDiscount, currency } from "@/lib/lib";
-// STYLED COMPONENTS
-import { Content, PriceText, StyledRoot } from "./styles/index";
-// CUSTOM DATA MODEL
-import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
-
-// ==============================================================
-interface Props {
-  product: Product;
-}
-// ==============================================================
-
-export default function ProductCard14({ product }: Props) {
-  const { id, slug, title, thumbnail, price, discount } = product || {};
-
-  const { cartItem, handleCartAmountChange } = useProduct(slug);
-
-  const handleIncrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl: thumbnail,
-      qty: (cartItem?.Quantity || 0) + 1,
-    };
-    product;
-    handleCartAmountChange();
-  };
-
-  const handleDecrementQuantity = () => {
-    const product = {
-      id,
-      slug,
-      price,
-      name: title,
-      imgUrl: thumbnail,
-      qty: (cartItem?.Quantity || 0) - 1,
-    };
-    product;
-    handleCartAmountChange("remove");
-  };
-
-  return (
-    <StyledRoot>
-      <Link href={`/products/${slug}`}>
-        <LazyImage alt={title} width={260} height={280} src={thumbnail} />
-      </Link>
-
-      <Content>
-        <div>
-          <H6 fontSize={17} fontWeight={700}>
-            {title}
-          </H6>
-
-          <Paragraph color="grey.600" mb={2}>
-            10% off
-          </Paragraph>
-
-          <PriceText>
-            {calculateDiscount(price, discount)}
-            {discount ? (
-              <span className="base-price">{currency(price)}</span>
-            ) : null}
-          </PriceText>
-        </div>
-
-        <div>
-          {!cartItem?.Quantity ? (
-            <Button
-              fullWidth
-              disableElevation
-              color="primary"
-              variant="contained"
-              onClick={handleIncrementQuantity}
-            >
-              Add To Cart
-            </Button>
-          ) : (
-            <div className="button-group">
-              <ButtonBase
-                className="base-button"
-                onClick={handleDecrementQuantity}
-              >
-                <Remove fontSize="small" />
-              </ButtonBase>
-
-              <Paragraph flex={1} fontWeight="600" lineHeight={1.75}>
-                {cartItem?.Quantity}
-              </Paragraph>
-
-              <ButtonBase
-                className="base-button"
-                onClick={handleIncrementQuantity}
-              >
-                <Add fontSize="small" />
-              </ButtonBase>
-            </div>
-          )}
-        </div>
-      </Content>
-    </StyledRoot>
-  );
-}

package/src/components-v2/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-v2/product-cards/product-card-16/product-card.tsx

@@ -1,116 +0,0 @@
-import Link from "next/link";
-import Rating from "@mui/material/Rating";
-// GLOBAL CUSTOM COMPONENTS
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/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-v2/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-v2/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-v2/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/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-v2/product-cards/product-card-2/index.ts

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