@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components/_components/BazaarCard.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import Card, { CardProps } from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-// ===============================================
-export interface Props extends CardProps {
-  hoverEffect?: boolean;
-}
-// ===============================================
-
-const BazaarCard = styled(Card, {
-  shouldForwardProp: (prop) => prop !== "hoverEffect",
-})<Props>(({ theme, hoverEffect }) => ({
-  overflow: "unset",
-  borderRadius: "8px",
-  transition: "all 250ms ease-in-out",
-  "&:hover": { ...(hoverEffect && { boxShadow: theme.shadows[3] }) },
-}));
-
-export default BazaarCard;

package/src/components/_components/BazaarImage.tsx

@@ -1,12 +0,0 @@
-import Box, { BoxProps } from "@mui/material/Box";
-
-// ==============================================================
-interface Props extends BoxProps {
-  src: string;
-  alt: string;
-}
-// ==============================================================
-
-export default function BazaarImage(props: Props) {
-  return <Box component="img" {...props} />;
-}

package/src/components/_components/BazaarMenu.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { Fragment, ReactNode, useState } from "react";
-import Menu from "@mui/material/Menu";
-import { SxProps, Theme } from "@mui/material/styles";
-
-// ===============================================================
-interface Props {
-  open?: boolean;
-  sx?: SxProps<Theme>;
-  handler?: (e: (event: React.MouseEvent) => void) => ReactNode;
-  options: (e: () => void) => ReactNode;
-  direction?: "left" | "right" | "center";
-}
-// ===============================================================
-
-export default function BazaarMenu({
-  open,
-  handler,
-  options,
-  direction = "left",
-  ...props
-}: Props) {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
-  const handleClose = () => setAnchorEl(null);
-  const handleClick = (event: React.MouseEvent<Element>) =>
-    setAnchorEl(event.currentTarget as HTMLElement);
-
-  return (
-    <Fragment>
-      {handler ? handler(handleClick) : null}
-
-      <Menu
-        elevation={0}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        open={open !== undefined ? open : !!anchorEl}
-        anchorOrigin={{ vertical: "bottom", horizontal: direction }}
-        transformOrigin={{ vertical: "top", horizontal: direction }}
-        {...props}
-      >
-        {options(handleClose)}
-      </Menu>
-    </Fragment>
-  );
-}

package/src/components/_components/BazaarSwitch.tsx

@@ -1,37 +0,0 @@
-import Switch, { SwitchProps } from "@mui/material/Switch";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENT
-const StyledSwitch = styled(Switch)(({ theme }) => ({
-  padding: 8,
-  "& .MuiSwitch-switchBase.MuiButtonBase-root": {
-    backgroundColor: "transparent",
-  },
-  "& .MuiSwitch-track": {
-    opacity: 1,
-    borderRadius: 22 / 2,
-    backgroundColor: theme.palette.grey[400],
-    "&:before, &:after": {
-      width: 16,
-      height: 16,
-      top: "50%",
-      content: '""',
-      position: "absolute",
-      transform: "translateY(-50%)",
-    },
-  },
-  "& .MuiSwitch-thumb": {
-    width: 16,
-    height: 16,
-    margin: "2px",
-    boxShadow: "none",
-    backgroundColor: theme.palette.grey[600],
-  },
-  "& .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb": {
-    backgroundColor: theme.palette.info.main,
-  },
-}));
-
-export default function BazaarSwitch(props: SwitchProps) {
-  return <StyledSwitch {...props} />;
-}

package/src/components/_components/BazaarTextField.tsx

@@ -1,73 +0,0 @@
-import Box, { BoxProps } from "@mui/material/Box";
-import TextField, { TextFieldProps } from "@mui/material/TextField";
-// CUSTOM COMPONENT
-import { H6 } from "./Typography";
-
-// ==============================================================
-type Props = TextFieldProps & BoxProps;
-// ==============================================================
-
-export default function BazaarTextField({
-  label,
-  InputProps,
-  ...props
-}: Props) {
-  const boxProps: BoxProps = {};
-  const textFieldProps: TextFieldProps = {};
-
-  for (const key in props) {
-    if (SPACE_PROPS_LIST.includes(key)) boxProps.key = props.key;
-    else textFieldProps.key = props.key;
-  }
-
-  return (
-    <Box {...boxProps}>
-      {/* INPUT LEVEL TEXT */}
-      {label ? (
-        <H6 mb={1} fontSize={13} color="grey.700">
-          {label}
-        </H6>
-      ) : null}
-
-      {/* INPUT FIELD SECTION */}
-      <TextField
-        InputProps={{
-          ...InputProps,
-          style: { ...InputProps?.style, height: 44 },
-        }}
-        {...textFieldProps}
-      />
-    </Box>
-  );
-}
-
-const SPACE_PROPS_LIST = [
-  "m",
-  "mt",
-  "mr",
-  "mb",
-  "ml",
-  "mx",
-  "my",
-  "p",
-  "pt",
-  "pr",
-  "pb",
-  "pl",
-  "px",
-  "py",
-  "margin",
-  "marginTop",
-  "marginRight",
-  "marginBottom",
-  "marginLeft",
-  "marginX",
-  "marginY",
-  "padding",
-  "paddingTop",
-  "paddingRight",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingX",
-  "paddingY",
-];

package/src/components/_components/DropZone.tsx

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

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

@@ -1,12 +0,0 @@
-"use client";
-
-import NextImage, { ImageProps } from "next/image";
-import styled from "@mui/material/styles/styled";
-import { ComponentType } from "react";
-
-const LazyImage: ComponentType<ImageProps> = 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.
-});
-
-export default LazyImage;

package/src/components/_components/MiniCartClient.tsx

@@ -1,65 +0,0 @@
-"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 "@evenicanpm/storefront-core/src/providers/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

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

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

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

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