@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/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-v2/product-cards/product-card-12/index.ts

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

package/src/components-v2/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 "@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

@@ -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-v2/product-cards/product-card-13/index.ts

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

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

@@ -0,0 +1,48 @@
+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

@@ -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-v2/product-cards/product-card-14/index.ts

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

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

@@ -0,0 +1,125 @@
+"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

@@ -0,0 +1,40 @@
+"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

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

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

@@ -0,0 +1,121 @@
+"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

@@ -0,0 +1,57 @@
+"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/components/quantity-buttons.tsx

@@ -0,0 +1,54 @@
+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-v2/flex-box/index";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/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-v2/product-cards/product-card-16/index.ts

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

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

@@ -0,0 +1,116 @@
+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>
+  );
+}