@evenicanpm/storefront-core 1.0.2 → 1.0.3

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;

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";