@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/Typography.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import Box, { BoxProps } from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+import clsx from "clsx";
+import React from "react";
+
+// ==============================================================
+type Ellipsis = { ellipsis: number };
+export interface EllipsisProps extends BoxProps {
+  ellipsis?: boolean;
+}
+// ==============================================================
+
+const StyledBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "ellipsis",
+})<Ellipsis>(({ ellipsis }) => ({
+  ...(ellipsis && {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  }),
+}));
+
+export function H1(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={30}
+      component="h1"
+      fontWeight={700}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function H2(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={25}
+      component="h2"
+      fontWeight={700}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function H3(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={20}
+      component="h3"
+      fontWeight={700}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function H4(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={17}
+      component="h4"
+      fontWeight={600}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function H5(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={16}
+      component="h5"
+      lineHeight={1}
+      fontWeight={600}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function H6(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={14}
+      component="h6"
+      fontWeight={600}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function Paragraph(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={14}
+      component="p"
+      fontWeight={400}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function Small(props: EllipsisProps) {
+  const { ellipsis = false, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={12}
+      fontWeight={400}
+      component="small"
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function Span(props: EllipsisProps) {
+  const { ellipsis = false, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      component="span"
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function Tiny(props: EllipsisProps) {
+  const { ellipsis = false, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      component="small"
+      fontSize={10}
+      fontWeight={400}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function Display(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={48}
+      component="h1"
+      fontWeight={400}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}
+
+export function Subtitle(props: EllipsisProps) {
+  const { ellipsis, children, className, ...others } = props;
+
+  return (
+    <StyledBox
+      fontSize={11}
+      component="h1"
+      fontWeight={400}
+      sx={{ opacity: 0.7 }}
+      ellipsis={ellipsis ? 1 : 0}
+      {...(className && { className: clsx({ [className]: true }) })}
+      {...others}
+    >
+      {children}
+    </StyledBox>
+  );
+}

package/src/components-v2/WhiteButton.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+import Button, { ButtonProps } from "@mui/material/Button";
+
+// ==================================================
+interface Props extends PropsWithChildren, ButtonProps {}
+// ==================================================
+
+export default function WhiteButton({ children, ...props }: Props) {
+  const STYLE = {
+    color: "dark.main",
+    backgroundColor: "white",
+    ":hover": { color: "#fff", backgroundColor: "dark.main" },
+  };
+
+  return (
+    <Button variant="contained" sx={STYLE} {...props}>
+      {children}
+    </Button>
+  );
+}

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

@@ -0,0 +1,43 @@
+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 "@evenicanpm/storefront-core/src/components-v2/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-v2/accordion/index.ts

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

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

@@ -0,0 +1,84 @@
+/* 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-v2/carousel/carousel.tsx

@@ -0,0 +1,72 @@
+"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-v2/carousel/components/carousel-arrows.tsx

@@ -0,0 +1,60 @@
+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-v2/carousel/components/carousel-dots.tsx

@@ -0,0 +1,21 @@
+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-v2/carousel/index.ts

@@ -0,0 +1,3 @@
+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-v2/carousel/styles/index.ts

@@ -0,0 +1,93 @@
+"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-v2/carousel-cards/carousel-card-1/carousel-card-1.tsx

@@ -0,0 +1,64 @@
+import Grid from "@mui/material/Grid2";
+import Button from "@mui/material/Button";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/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-v2/carousel-cards/carousel-card-1/index.ts

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