@evenicanpm/storefront-core 1.1.0 → 1.2.1

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 "@evenicanpm/storefront-core/src/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 "@evenicanpm/storefront-core/src/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>
-  );
-}

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 "@evenicanpm/storefront-core/src/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[];
-}