@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/BazaarCard.tsx

@@ -0,0 +1,21 @@
+"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-v2/BazaarImage.tsx

@@ -0,0 +1,12 @@
+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-v2/BazaarMenu.tsx

@@ -0,0 +1,47 @@
+"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-v2/BazaarSwitch.tsx

@@ -0,0 +1,37 @@
+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-v2/BazaarTextField.tsx

@@ -0,0 +1,73 @@
+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-v2/BoxShadowCard.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { styled } from "@mui/material/styles";
+
+export const BorderShadowCard = styled("div")(({ theme }) => ({
+  borderRadius: 4,
+  padding: "0.5rem 0px",
+  transformOrigin: "top",
+  boxShadow: "rgba(149, 157, 165, 0.1) 0px 8px 24px;",
+  backgroundColor: theme.palette.background.paper,
+  border: "1px solid rgba(0, 0, 0, 0.1)",
+  marginBottom: "1rem",
+}));
+
+// these should use theme
+export const lightShadow = { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)" };
+export const lightBorder = { border: "1px solid rgba(0, 0, 0, 0.1)" };

package/src/components-v2/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-v2/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-v2/Image.tsx

@@ -0,0 +1,5 @@
+import { styled } from "@mui/system";
+
+export default styled("img")({
+  height: "150px",
+});

package/src/components-v2/ImageWithFallback.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { ImageProps } from "next/image";
+import LazyImage from "./LazyImage";
+
+export interface ImageWithFallbackProps extends ImageProps {
+  fallbackSrc?: string;
+}
+const fallback = "e-Icon.svg";
+
+const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({
+  src,
+  fallbackSrc,
+  alt = "Fallback Image",
+  ...rest
+}) => {
+  const [imgSrc, setImgSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof src === "string" && src?.trim() !== "") {
+      setImgSrc(src);
+    } else {
+      // If src is empty or invalid - set fallback immediately, no need to wait for error.
+      setImgSrc(fallbackSrc || fallback);
+    }
+  }, [src, fallbackSrc]);
+
+  const handleError = () => {
+    setImgSrc(fallbackSrc || fallback);
+  };
+
+  // Don’t render the image if src is still invalid
+  if (!imgSrc) return null;
+
+  return (
+    // Should always use LazyImage which maintains the aspect ratio.
+    // In cases where you need fixed width and height like in shopping cart or PLP - list view,
+    // Wrap image in a container (like <Box className="img-wrapper">) with position: "relative" and fixed height and width,
+    // to prevent layout warnings and preserve responsiveness:
+    <LazyImage
+      {...rest}
+      src={imgSrc}
+      alt={alt}
+      onError={handleError}
+      loading="lazy"
+    />
+  );
+};
+
+export default ImageWithFallback;

package/src/components-v2/LazyImage.tsx

@@ -0,0 +1,12 @@
+"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-v2/Loading.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+// Material-UI
+import { Box, CircularProgress } from "@mui/material";
+
+interface Props {
+  height?: number;
+  fullscreen?: boolean;
+}
+
+const Loading: React.FC<Props> = (props) => {
+  const styles = getStyles(props);
+
+  return (
+    <Box sx={styles.root} data-full={props.fullscreen}>
+      <CircularProgress color="primary" />
+    </Box>
+  );
+};
+
+const getStyles = (props: Props) => {
+  return {
+    root: {
+      flexGrow: 1,
+      display: "grid",
+      placeItems: "center",
+      height: props.height ? props.height : "initial",
+      "&[data-full]": {
+        height: "100vh",
+        width: "100vw",
+      },
+    },
+  };
+};
+
+export default Loading;

package/src/components-v2/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 "@evenicanpm/storefront-core/src/components-v2/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-v2/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-v2/README.md

@@ -0,0 +1,4 @@
+# Components V2
+
+- This is the new components folder with updated structure
+- In progress: Converting to compound components and Typedoc for components

package/src/components-v2/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-v2/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-v2/T/index.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  path: string;
+}
+
+const T = ({ path }: Props) => {
+  const t = useTranslations();
+  return <>{t(path)}</>;
+};
+
+export default T;