@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/DropZone.tsx

@@ -0,0 +1,86 @@
+import { useCallback } from "react";
+// MUI
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+// DROPZONE
+import { Accept, FileRejection, useDropzone } from "react-dropzone";
+// LOCAL CUSTOM COMPONENT
+import { H5, Small } from "./Typography";
+import { useTranslations } from "next-intl";
+
+// ========================================================
+interface Props {
+  title?: string;
+  imageSize?: string;
+  onChange: (files: File[]) => void;
+  handleReject: (fileRejections: FileRejection[]) => void;
+  accept: Accept;
+}
+// ========================================================
+
+export default function DropZone({
+  onChange,
+  title = "Drag & drop files here",
+  handleReject,
+  accept,
+}: Props) {
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => onChange(acceptedFiles),
+    [onChange],
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    maxFiles: 10,
+    multiple: true,
+    accept,
+    useFsAccessApi: true,
+    onDropRejected: handleReject,
+  });
+
+  const t = useTranslations("QuickOrder.Dropzone");
+
+  return (
+    <Box
+      py={4}
+      px={{ md: 10, xs: 4 }}
+      display="flex"
+      minHeight="200px"
+      minWidth={{ xs: "100%", md: "600px" }}
+      textAlign="center"
+      alignItems="center"
+      borderRadius="10px"
+      border="1.5px dashed"
+      flexDirection="column"
+      borderColor="grey.300"
+      justifyContent="center"
+      bgcolor={isDragActive ? "grey.200" : "grey.100"}
+      sx={{ transition: "all 250ms ease-in-out", outline: "none" }}
+      {...getRootProps()}
+    >
+      <input {...getInputProps()} data-testid="file-upload-input" />
+
+      <H5 mb={1} color="grey.600">
+        {title}
+      </H5>
+
+      <Divider
+        sx={{ "::before, ::after": { borderColor: "grey.300", width: 70 } }}
+      >
+        <Small color="text.disabled" px={1}>
+          {t("orLabel")}
+        </Small>
+      </Divider>
+
+      <Button
+        type="button"
+        variant="outlined"
+        color="info"
+        sx={{ px: 4, my: 4 }}
+      >
+        {t("selectFilesBtn")}
+      </Button>
+    </Box>
+  );
+}

package/src/components/_components/HoverBox.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+
+export default styled(Box)({
+  display: "flex",
+  overflow: "hidden",
+  position: "relative",
+  "&:after": {
+    inset: 0,
+    zIndex: 1,
+    opacity: 0,
+    content: '""',
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    backgroundColor: "black",
+    transition: "all 250ms ease-in-out",
+  },
+  "&:hover:after": { opacity: 0.3 },
+});

package/src/components/_components/LazyImage.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import NextImage from "next/image";
+import styled from "@mui/material/styles/styled";
+
+export default styled(NextImage)({
+  width: "100%",
+  height: "auto", //If we use CSS to change the size of image, we should include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.
+});

package/src/components/_components/MiniCartClient.tsx

@@ -0,0 +1,65 @@
+"use client";
+// DUPLICATE - Remove storefront/app version
+import React, { useState } from "react";
+import { MdOutlineShoppingBag as ShoppingBagOutlined } from "react-icons/md";
+import MobileCartBag from "@/components/_components/icons/cart-bag";
+import { Badge, Drawer, IconButton } from "@mui/material";
+import { Cart } from "@/schemas/cart.schema";
+import { useNotification } from "../Notifications/use-notification";
+import { MiniCart } from "@/components/_components/mini-cart/index";
+
+const BADGE_STYLES = {
+  "& .MuiBadge-badge": {
+    fontSize: { xs: "0.625rem", md: "0.75rem" }, // ~10px, 12px
+    minWidth: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
+    height: { xs: "1rem", md: "1.25rem" }, // ~16px, 20px
+  },
+};
+
+const ICON_BUTTON_STYLES = {
+  minWidth: { xs: "2.25rem", md: "2.5rem" }, // 36px, 40px
+  minHeight: { xs: "2.25rem", md: "2.5rem" },
+};
+
+interface MiniCartClientProps {
+  cart: Cart;
+  mobile?: boolean;
+}
+
+const MiniCartClient: React.FC<MiniCartClientProps> = ({
+  cart,
+  mobile = false,
+}) => {
+  const SHOULD_OPEN_MINICART_ON_ADD = true; // Move to config
+  const [open, setOpen] = useState(false); // Client state for toggling the drawer
+  const { alert } = useNotification();
+  React.useEffect(() => {
+    if (alert?.type === "cart" && SHOULD_OPEN_MINICART_ON_ADD) {
+      setOpen(true);
+    }
+  }, [alert, SHOULD_OPEN_MINICART_ON_ADD]);
+  const handleCloseDrawer = () => setOpen(false);
+  return (
+    <Badge
+      badgeContent={cart?.TotalItems || 0}
+      color="primary"
+      sx={BADGE_STYLES}
+    >
+      {/* Drawer Toggle Button */}
+      <IconButton sx={ICON_BUTTON_STYLES} onClick={() => setOpen(true)}>
+        {mobile ? (
+          <MobileCartBag style={{ fontSize: "1.25rem" }} />
+        ) : (
+          <ShoppingBagOutlined />
+        )}
+      </IconButton>
+
+      {/* Drawer */}
+      <Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
+        <MiniCart cart={cart} closeDrawer={handleCloseDrawer} />
+      </Drawer>
+    </Badge>
+  );
+};
+
+export default MiniCartClient;

package/src/components/_components/SearchInput.tsx

@@ -0,0 +1,28 @@
+import InputBase, { InputBaseProps } from "@mui/material/InputBase";
+import styled from "@mui/material/styles/styled";
+// MUI ICON COMPONENT
+import Search from "@mui/icons-material/Search";
+
+// STYLED COMPONENT
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  height: 44,
+  fontSize: 14,
+  width: "100%",
+  maxWidth: 350,
+  fontWeight: 500,
+  padding: "0 1rem",
+  borderRadius: "8px",
+  color: theme.palette.grey[600],
+  backgroundColor: theme.palette.background.paper,
+  [theme.breakpoints.down("sm")]: { maxWidth: "100%" },
+  "::placeholder": { color: theme.palette.text.disabled },
+}));
+
+export default function SearchInput(props: InputBaseProps) {
+  return (
+    <StyledInputBase
+      startAdornment={<Search sx={{ fontSize: 19, mr: 1 }} />}
+      {...props}
+    />
+  );
+}

package/src/components/_components/SnackbarProvider.tsx

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from "react";
+import styled from "@mui/material/styles/styled";
+import { SnackbarProvider as NotistackProvider } from "notistack";
+
+// STYLED COMPONENT
+const Provider = styled(NotistackProvider)(({ theme }) => ({
+  "&.SnackbarContent-root.SnackbarItem-contentRoot": {
+    boxShadow: theme.shadows[2],
+    color: theme.palette.common.black,
+    background: theme.palette.common.white,
+    fontFamily: theme.typography.fontFamily,
+  },
+
+  "&.SnackbarItem-variantSuccess .MuiSvgIcon-root": {
+    color: theme.palette.success.main,
+  },
+  "&.SnackbarItem-variantError .MuiSvgIcon-root": {
+    color: theme.palette.error.main,
+  },
+}));
+
+export default function SnackbarProvider({ children }: PropsWithChildren) {
+  return (
+    <Provider
+      maxSnack={4}
+      autoHideDuration={2000}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+    >
+      {children}
+    </Provider>
+  );
+}

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

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

package/src/components/_components/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/_components/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;