@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components/_components/accordion/accordion-header.tsx

@@ -1,43 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "@mui/material/Box";
-import { styled, SxProps, Theme } from "@mui/material/styles";
-// MUI ICON COMPONENTS
-import ChevronRight from "@mui/icons-material/ChevronRight";
-// GLOBAL CUSTOM COMPONENT
-import FlexBox from "@/components/_components/flex-box/flex-box";
-
-// STYLED COMPONENT
-const RootContainer = styled(FlexBox, {
-  shouldForwardProp: (prop) => prop !== "open",
-})<{ open: number }>(({ open, theme }) => ({
-  alignItems: "center",
-  padding: ".5rem 1rem",
-  justifyContent: "space-between",
-  ".caret": {
-    transition: "transform 250ms ease-in-out",
-    transform: `rotate(${open ? "90deg" : "0deg"})`,
-    ...(theme.direction === "rtl" && {
-      transform: `rotate(${open ? "90deg" : "180deg"})`,
-    }),
-  },
-}));
-
-// =================================================================
-interface Props extends BoxProps {
-  open?: boolean;
-  showIcon?: boolean;
-  sx?: SxProps<Theme>;
-  children: ReactNode;
-}
-// =================================================================
-
-export default function AccordionHeader(props: Props) {
-  const { open, children, showIcon = true, ...others } = props;
-
-  return (
-    <RootContainer open={open ? 1 : 0} {...others}>
-      {children}
-      {showIcon ? <ChevronRight className="caret" fontSize="small" /> : null}
-    </RootContainer>
-  );
-}

package/src/components/_components/accordion/index.ts

@@ -1 +0,0 @@
-export { default as AccordionHeader } from "./accordion-header";

package/src/components/_components/bazaar-types.ts

@@ -1,84 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-// These are custom types used in bazaar template project - should be replaced as we migrate screens to use data source types
-// Don't add any data source types here.
-
-interface Shop {
-  id: string;
-  slug: string;
-  user: any;
-  email: string;
-  name: string;
-  phone: string;
-  address: string;
-  rating?: number;
-  verified: boolean;
-  products?: any | Product[];
-  coverPicture: string;
-  profilePicture: string;
-  socialLinks: {
-    facebook?: string;
-    youtube?: string;
-    twitter?: string;
-    instagram?: string;
-  };
-}
-
-interface User {
-  id: string;
-  email: string;
-  phone: string;
-  avatar: string;
-  password: string;
-  dateOfBirth: Date | string;
-  verified: boolean;
-  name: { firstName: string; lastName: string };
-}
-
-interface Review {
-  id: string;
-  rating: number;
-  customer: User;
-  comment: string;
-  product: Product;
-  published?: boolean;
-}
-
-export interface Product {
-  unit?: any;
-  slug: string;
-  price: number;
-  title: string;
-  rating: number;
-  discount: number;
-  thumbnail: string;
-  id: string;
-  shop?: Shop;
-  brand?: string;
-  size?: string[];
-  status?: string;
-  colors?: string[];
-  images?: string[];
-  categories: any[];
-  reviews?: Review[];
-  published?: boolean;
-}
-
-export interface Category {
-  path: string;
-  name: string;
-  icon?: string;
-  children?: Category[];
-}
-
-export type CategoryItem = {
-  icon: string;
-  title: string;
-  href?: string;
-  child?: { title: string; href: string }[];
-};
-
-export interface CategoryNavList {
-  category: string;
-  categoryItem: CategoryItem[];
-}

package/src/components/_components/carousel/carousel.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import { PropsWithChildren, forwardRef } from "react";
-import { SxProps, Theme, useTheme } from "@mui/material/styles";
-import SlickCarousel, { Settings } from "react-slick";
-import Slider from "react-slick";
-// LOCAL CUSTOM COMPONENTS
-import CarouselDots from "./components/carousel-dots";
-import CarouselArrows from "./components/carousel-arrows";
-// SLICK CAROUSEL CSS
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
-// STYLED COMPONENT
-import { RootStyle } from "./styles/index";
-
-// ==============================================================
-interface Props extends PropsWithChildren, Settings {
-  dotColor?: string;
-  spaceBetween?: number;
-  dotStyles?: SxProps<Theme>;
-  arrowStyles?: SxProps<Theme>;
-  dots?: boolean;
-  arrows?: boolean;
-  slidesToShow?: number;
-  height?: number;
-  autoplay?: boolean;
-  autoplaySpeed?: number;
-}
-// ==============================================================
-
-const Carousel = forwardRef<Slider, Props>((props, ref) => {
-  const {
-    dotColor,
-    children,
-    arrowStyles,
-    dots = false,
-    arrows = true,
-    slidesToShow = 4,
-    spaceBetween = 10,
-    dotStyles = { mt: 4 },
-    height = 400,
-    autoplay = false,
-    autoplaySpeed = 3000,
-    ...others
-  } = props;
-
-  const theme = useTheme();
-
-  const settings: Settings = {
-    dots,
-    arrows,
-    slidesToShow,
-    autoplay,
-    autoplaySpeed,
-    rtl: theme.direction === "rtl",
-    ...CarouselArrows(arrowStyles),
-    ...CarouselDots({ dotColor, sx: dotStyles }),
-    ...others,
-  };
-
-  return (
-    <RootStyle space={spaceBetween} sx={{ height, paddingBottom: "25px" }}>
-      <SlickCarousel ref={ref} {...settings}>
-        {children}
-      </SlickCarousel>
-    </RootStyle>
-  );
-});
-
-Carousel.displayName = "Carousel";
-
-export default Carousel;

package/src/components/_components/carousel/components/carousel-arrows.tsx

@@ -1,60 +0,0 @@
-import { CustomArrowProps } from "react-slick"; // Installed react slick package for fixing error
-import { SxProps, Theme } from "@mui/material/styles";
-// MUI ICON COMPONENTS
-import ArrowBack from "@mui/icons-material/ArrowBack";
-import ArrowForward from "@mui/icons-material/ArrowForward";
-// STYLED COMPONENT
-import { ArrowButton } from "../styles/index";
-
-// ==============================================================
-interface ArrowProps extends CustomArrowProps {
-  sx?: SxProps<Theme>;
-}
-// ==============================================================
-
-function NextArrow({ onClick, sx, className }: ArrowProps) {
-  const updatedClassName =
-    className ||
-    ""
-      .split(" ")
-      .filter((item: string) => item !== "slick-next")
-      .join(" ");
-
-  return (
-    <ArrowButton
-      right={0}
-      onClick={onClick}
-      className={`next ${updatedClassName}`}
-      sx={{ ...sx }}
-    >
-      <ArrowForward fontSize="small" color="inherit" className="forward-icon" />
-    </ArrowButton>
-  );
-}
-
-function PrevArrow({ onClick, sx, className }: ArrowProps) {
-  const updatedClassName =
-    className ||
-    ""
-      .split(" ")
-      .filter((item: string) => item !== "slick-prev")
-      .join(" ");
-
-  return (
-    <ArrowButton
-      left={0}
-      onClick={onClick}
-      className={`prev ${updatedClassName}`}
-      sx={{ ...sx }}
-    >
-      <ArrowBack fontSize="small" color="inherit" className="back-icon" />
-    </ArrowButton>
-  );
-}
-
-export default function CarouselArrows(sx?: SxProps<Theme>) {
-  return {
-    nextArrow: <NextArrow sx={sx} />,
-    prevArrow: <PrevArrow sx={sx} />,
-  };
-}

package/src/components/_components/carousel/components/carousel-dots.tsx

@@ -1,21 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "@mui/material/Box";
-// STYLED COMPONENTS
-import { Dot, DotList } from "../styles/index";
-
-// ==============================================================
-interface Props extends BoxProps {
-  dotColor?: string;
-}
-// ==============================================================
-
-export default function CarouselDots({ dotColor, ...props }: Props) {
-  return {
-    customPaging: () => <Dot dotColor={dotColor} />,
-    appendDots: (dots: ReactNode) => (
-      <DotList component="ul" {...props}>
-        {dots}
-      </DotList>
-    ),
-  };
-}

package/src/components/_components/carousel/index.ts

@@ -1,3 +0,0 @@
-export { default as Carousel } from "./carousel";
-export { default as CarouselDots } from "./components/carousel-dots";
-export { default as CarouselArrows } from "./components/carousel-arrows";

package/src/components/_components/carousel/styles/index.ts

@@ -1,93 +0,0 @@
-"use client";
-
-import Box from "@mui/material/Box";
-import styled from "@mui/material/styles/styled";
-
-export const COMMON_DOT_STYLES = {
-  left: 0,
-  right: 0,
-  bottom: 25,
-  position: "absolute",
-};
-
-export const RootStyle = styled("div", {
-  shouldForwardProp: (prop) => prop !== "space",
-})<{ space: number }>(({ space }) => ({
-  ".slick-list": { marginInline: -space },
-  ".slick-slide": { paddingInline: space },
-  ":hover": {
-    ".slick-arrow": {
-      opacity: 1,
-      "&.next": { right: 5 },
-      "&.prev": { left: 5 },
-    },
-  },
-}));
-
-export const DotList = styled(Box)(({ theme }) => ({
-  gap: 6,
-  zIndex: 1,
-  margin: 0,
-  padding: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: theme.palette.primary.main,
-  "& li": {
-    width: 15,
-    height: 15,
-    display: "flex",
-    cursor: "pointer",
-    alignItems: "center",
-    justifyContent: "center",
-    "&.slick-active span::after": { scale: "1" },
-  },
-}));
-
-export const Dot = styled("span", {
-  shouldForwardProp: (prop) => prop !== "dotColor",
-})<{ dotColor?: string }>(({ dotColor, theme }) => ({
-  width: "100%",
-  height: "100%",
-  cursor: "pointer",
-  borderRadius: "50%",
-  position: "relative",
-  border: `1px solid ${dotColor || theme.palette.secondary.main}`,
-  "&:after": {
-    scale: 0,
-    inset: 0,
-    width: 9,
-    height: 9,
-    content: '""',
-    margin: "auto",
-    borderRadius: "50%",
-    position: "absolute",
-    transition: "scale 500ms ease-in-out",
-    backgroundColor: dotColor || theme.palette.secondary.main,
-  },
-}));
-
-export const ArrowButton = styled(Box)(({ theme }) => ({
-  zIndex: 1,
-  width: 35,
-  height: 35,
-  padding: 0,
-  opacity: 0,
-  top: "50%",
-  display: "flex",
-  cursor: "pointer",
-  position: "absolute",
-  alignItems: "center",
-  justifyContent: "center",
-  transform: "translate(0, -50%)",
-  transition: "all 0.2s ease-in-out",
-  color: theme.palette.secondary.contrastText,
-  backgroundColor: theme.palette.secondary.main,
-  boxShadow: "0px 10px 30px rgba(0, 0, 0, 0.1)",
-
-  ...(theme.direction === "rtl" && {
-    ".back-icon, .forward-icon": { rotate: "180deg" },
-  }),
-
-  "&.slick-disabled": { visibility: "hidden" },
-}));

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

@@ -1,64 +0,0 @@
-import Grid from "@mui/material/Grid2";
-import Button from "@mui/material/Button";
-// GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@/components/_components/BazaarImage";
-import { Paragraph } from "@/components/_components/Typography";
-// STYLED COMPONENT
-import { StyledRoot } from "./styles";
-
-// ==================================================
-interface Props {
-  title?: string;
-  imgUrl?: string;
-  buttonLink?: string;
-  buttonText?: string;
-  description?: string;
-  buttonColor?: "dark" | "primary";
-}
-// ==================================================
-
-export default function CarouselCard1({
-  title,
-  imgUrl,
-  buttonLink,
-  buttonText,
-  description,
-}: Props) {
-  return (
-    <StyledRoot>
-      <Grid container spacing={3} alignItems="center">
-        <Grid className="Grid2-item" size={{ xl: 4, md: 5, sm: 6, xs: 12 }}>
-          <h1 className="title">{title}</h1>
-          <Paragraph color="secondary.main" mb={2.7}>
-            {description}
-          </Paragraph>
-
-          <a href={buttonLink}>
-            <Button
-              size="large"
-              disableElevation
-              variant="contained"
-              className="button-link"
-              sx={{ height: 44, borderRadius: "4px" }}
-            >
-              {buttonText}
-            </Button>
-          </a>
-        </Grid>
-
-        <Grid size={{ xl: 8, md: 7, sm: 6, xs: 12 }}>
-          <BazaarImage
-            src={imgUrl ?? ""}
-            alt="apple-watch-1"
-            sx={{
-              mx: "auto",
-              maxHeight: 400,
-              display: "block",
-              maxWidth: "100%",
-            }}
-          />
-        </Grid>
-      </Grid>
-    </StyledRoot>
-  );
-}

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

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

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

@@ -1,34 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-export const StyledRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  ".title": {
-    fontSize: 50,
-    marginTop: 0,
-    lineHeight: 1.2,
-    marginBottom: "1.35rem",
-  },
-  [theme.breakpoints.up("sm")]: {
-    ".grid-item": {
-      minHeight: 424,
-      display: "flex",
-      alignItems: "baseline",
-      flexDirection: "column",
-      justifyContent: "center",
-    },
-  },
-  [theme.breakpoints.down("sm")]: {
-    marginLeft: 0,
-    paddingLeft: 0,
-    ".title": { fontSize: 32 },
-  },
-  [theme.breakpoints.down("xs")]: {
-    ".title": { fontSize: 16 },
-    ".title + *": { fontSize: 13 },
-    ".button-link": { height: 36, padding: "0 1.5rem", fontSize: 13 },
-  },
-}));

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

@@ -1,73 +0,0 @@
-import Grid from "@mui/material/Grid2";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENT
-import Favorite from "@mui/icons-material/Favorite";
-// GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@/components/_components/BazaarImage";
-import { Countdown } from "@/components/_components/countdown/index";
-import FlexBox from "@/components/_components/flex-box/flex-box";
-import { H2, H3, H4, Paragraph } from "@/components/_components/Typography";
-// STYLED COMPONENT
-import { ContentWrapper, FavoriteButton } from "./styles";
-
-// ================================================================
-interface Props {
-  imgUrl: string;
-  expireDate: number;
-  productName: string;
-}
-// ================================================================
-
-export default function CarouselCard2({
-  imgUrl,
-  productName,
-  expireDate,
-}: Props) {
-  return (
-    <Grid container alignItems="center">
-      <Grid size={{ lg: 6, md: 5, sm: 12, xs: 12 }}>
-        <BazaarImage
-          src={imgUrl}
-          alt="xiaomi-watch-1"
-          sx={{ display: "block", mx: "auto", maxWidth: "100%", p: 5 }}
-        />
-      </Grid>
-
-      <Grid size={{ lg: 4, md: 5, sm: 12, xs: 12 }}>
-        <ContentWrapper>
-          <H3 color="primary.500" mb="0.2rem">
-            Deal Of The Day
-          </H3>
-          <H2>{productName}</H2>
-
-          <Paragraph mt="0.3rem">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis
-            lobortis consequat eu, quam etiam at quis ut convallis.
-          </Paragraph>
-
-          <H4 mt="1.5rem" mb="0.3rem">
-            Fresh Deal Everyday, Get It Now!
-          </H4>
-
-          {/* countdown time */}
-          <Countdown expireDate={expireDate} />
-
-          <FlexBox gap={2} mt={3}>
-            <Button
-              color="primary"
-              disableElevation
-              variant="contained"
-              sx={{ px: 4, borderRadius: 2 }}
-            >
-              BUY NOW
-            </Button>
-
-            <FavoriteButton>
-              <Favorite />
-            </FavoriteButton>
-          </FlexBox>
-        </ContentWrapper>
-      </Grid>
-    </Grid>
-  );
-}

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

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

package/src/components/_components/carousel-cards/carousel-card-2/styles.ts

@@ -1,26 +0,0 @@
-"use client";
-
-import Button from "@mui/material/Button";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENT
-export const ContentWrapper = styled("div")(({ theme }) => ({
-  [theme.breakpoints.down("sm")]: {
-    padding: "2rem",
-    width: "100%",
-  },
-  [theme.breakpoints.between("sm", "md")]: {
-    padding: "0 3rem",
-    paddingBottom: "2rem",
-    width: "80%",
-  },
-}));
-
-export const FavoriteButton = styled(Button)(({ theme }) => ({
-  color: "white",
-  height: "44px",
-  borderRadius: "8px",
-  paddingInline: "1rem",
-  backgroundColor: theme.palette.grey[500],
-  ":hover": { backgroundColor: theme.palette.grey[500] },
-}));

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

@@ -1,34 +0,0 @@
-import Link from "next/link";
-// GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@/components/_components/BazaarImage";
-import { H2, Paragraph } from "@/components/_components/Typography";
-// STYLED COMPONENTS
-import { ContentWrapper, LinkText, RootStyled } from "./styles";
-// CUSTOM DATA MODEL
-import { Product } from "@/components/_components/bazaar-types";
-
-// ==========================================================
-type Props = { product: Product };
-// ==========================================================
-
-export default function CarouselCard3({ product }: Props) {
-  return (
-    <RootStyled>
-      <ContentWrapper>
-        <H2 mb="0.5rem" textAlign="center" lineHeight={1.2}>
-          {product.title}
-        </H2>
-
-        <Paragraph color="grey.600" textAlign="center" mb="1.5rem">
-          Starting at ${product.price} & save upto {product.discount}%
-        </Paragraph>
-
-        <Link href={`/products/${product.slug}`}>
-          <LinkText>SHOP NOW</LinkText>
-        </Link>
-      </ContentWrapper>
-
-      <BazaarImage width="100%" src={product.thumbnail} alt="shoes" />
-    </RootStyled>
-  );
-}

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

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

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

@@ -1,28 +0,0 @@
-"use client";
-
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENTS
-export const RootStyled = styled(Card)(({ theme }) => ({
-  height: "100%",
-  overflow: "unset",
-  borderRadius: "2px",
-  boxShadow: theme.shadows[4],
-  transition: "all 250ms ease-in-out",
-}));
-
-export const ContentWrapper = styled("div")({
-  display: "flex",
-  padding: "1rem",
-  paddingTop: "3rem",
-  alignItems: "center",
-  flexDirection: "column",
-});
-
-export const LinkText = styled("small")(({ theme }) => ({
-  fontSize: 12,
-  fontWeight: 900,
-  lineHeight: 1.6,
-  borderBottom: `2px solid ${theme.palette.primary.main}`,
-}));