@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/GlobalLoading/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useRef, useEffect, PropsWithChildren } from "react";
+
+// Material-UI
+import { Theme, useTheme } from "@mui/material/styles";
+import { CircularProgress } from "@mui/material";
+
+interface Props extends PropsWithChildren {
+  delay?: number;
+}
+
+export default function GlobalLoading(props: Props) {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  const timeOut = useRef<ReturnType<typeof setTimeout>>();
+  const [show, setShow] = useState(false);
+
+  if (show === false && !timeOut.current) {
+    timeOut.current = setTimeout(
+      () => {
+        setShow(true);
+      },
+      props.delay ? props.delay : 100,
+    );
+  }
+
+  // This is needed to avoid state update on an unmounted component.
+  // If missing the following error is thrown:
+  // ***********************************************************************
+  // Can't perform a React state update on an unmounted component.        **
+  // This is a no-op, but it indicates a memory leak in your application. **
+  // ***********************************************************************
+  useEffect(
+    () => () => {
+      clearTimeout(timeOut.current);
+    },
+    [],
+  );
+
+  return (
+    <div className={`${styles.root} ${show ? "" : styles.hide}`}>
+      <div className={`${styles.highAttention} ${styles.animationInBackdrop}`}>
+        <CircularProgress />
+        <p>{props.children}</p>
+      </div>
+    </div>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {
+    root: {},
+    highAttention: {
+      position: "fixed",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      background: "rgba(355,355,355, 0.5)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexDirection: "column",
+      zIndex: 10000,
+    },
+    alertMarginBottom: {
+      marginBottom: theme.spacing(1),
+    },
+    animationInMessage: {
+      position: "relative",
+      display: "block",
+      transform: "translateY(15%)",
+      animation: "$fadeInUp 100ms linear forwards",
+      zIndex: 1,
+    },
+    "@keyframes fadeInUp": {
+      "0%": {
+        opacity: 0,
+        transform: "translateY(15%)",
+      },
+      "100%": {
+        opacity: 1,
+        transform: "translateY(0)",
+      },
+    },
+    animationInBackdrop: {
+      animation: "$fadeIn 100ms linear forwards",
+      zIndex: 1,
+      opacity: 1,
+    },
+    "@keyframes fadeIn": {
+      "0%": {
+        opacity: 0,
+      },
+      "100%": {
+        opacity: 1,
+      },
+    },
+    hide: {
+      display: "none",
+    },
+  };
+};

package/src/components/ImageWithFallback.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { ImageProps } from "next/image";
+import LazyImage from "./_components/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/Loading/index.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/NavProvider/index.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+import React, { createContext, PropsWithChildren, useState } from "react";
+import { createLink } from "@/components/NavProvider/utils/createLink";
+import { useTranslations } from "next-intl";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+
+type NavContextType = {
+  cmsNav: CmsNavItem[];
+  categories: CategoryHierarchy[];
+  isMobileSideNavOpen: boolean;
+  toggleMobileSideNav: () => void;
+};
+
+export const NavContext = createContext<NavContextType>({
+  cmsNav: [],
+  categories: [],
+  isMobileSideNavOpen: false,
+  toggleMobileSideNav: () => {
+    // gets overridden by NavProvider
+  },
+});
+
+// These are all the inputs into the navigation provider, extend as needed
+interface Props {
+  categories: CategoryHierarchy[];
+  cmsNav: CmsNavItem[];
+}
+
+const NavProvider = ({
+  categories,
+  cmsNav,
+  children,
+}: PropsWithChildren<Props>) => {
+  const [isMobileSideNavOpen, setIsMobileSideNavOpen] = useState(false);
+  const toggleMobileSideNav = () => setIsMobileSideNavOpen((prev) => !prev);
+
+  const t = useTranslations("Navigation");
+
+  if (!Array.isArray(cmsNav)) cmsNav = [];
+
+  // Extend nav by creating links here
+  const blogLink = createLink(t("blogLink"), "/blog"); //Localization example with hooks
+
+  return (
+    <NavContext.Provider
+      value={{
+        categories,
+        cmsNav: [blogLink, ...cmsNav],
+        isMobileSideNavOpen,
+        toggleMobileSideNav,
+      }}
+    >
+      {children}
+    </NavContext.Provider>
+  );
+};
+
+export default NavProvider;

package/src/components/NavProvider/utils/createLink.ts

@@ -0,0 +1,15 @@
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+
+export const createLink = (name: string, path: string): CmsNavItem => {
+  return {
+    title: name,
+    menuAttached: false,
+    type: "EXTERNAL",
+    path: path,
+    slug: "",
+    external: false,
+    uiRouterKey: "blog",
+    related: null,
+    items: [],
+  };
+};

package/src/components/Notifications/README.md

@@ -0,0 +1,15 @@
+# Notifications Store
+
+_Example of how to trigger a notification._
+
+```javascript
+// import notification store
+import { useNotificationStore } from "@/components/Notifications/useNotificationsStore";
+
+// call hook and destructure trigger function
+const { triggerNotification } = useNotificationStore();
+
+// call trigger function
+// severity options: 'success' | 'info' | 'warning' | 'error';
+triggerNotification({ severity: "warning", message: "This is a warning." });
+```

package/src/components/Notifications/notification-context.tsx

@@ -0,0 +1,82 @@
+import { Alert, Snackbar, SnackbarCloseReason } from "@mui/material";
+import React, { createContext } from "react";
+import { useNotification } from "./use-notification";
+import { DatasourceApis } from "@/api-manager/types/Datasource";
+
+const DEFAULT_ALERT_TIME = 5000;
+
+export type NotificationType = {
+  severity: "success" | "info" | "warning" | "error";
+  message: string;
+  type?: keyof DatasourceApis | "general";
+};
+
+type NotificationContextType = {
+  alert: NotificationType;
+  setNotification(notification: NotificationType): void;
+};
+
+export type WithNotification<T> = {
+  notification: NotificationType;
+  data: T;
+};
+export const NotificationContext =
+  createContext<NotificationContextType | null>(null);
+
+export const NotificationProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [alert, setAlert] = React.useState<NotificationType>({
+    message: "",
+    severity: "info",
+    type: "general",
+  });
+  // const [miniCartOpen, setMiniCartOpen] = React.useState<boolean>(false);
+
+  const setNotification = (notification: NotificationType) => {
+    setAlert(notification);
+  };
+
+  const value = React.useMemo(() => ({ alert, setNotification }), [alert]);
+  return (
+    <NotificationContext.Provider value={value}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const Notification: React.FC = () => {
+  const [open, setOpen] = React.useState<boolean>(false);
+  const { alert, setNotification } = useNotification();
+
+  React.useEffect(() => {
+    if (alert.message) {
+      setOpen(true);
+    }
+  }, [alert]);
+
+  const handleClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setOpen(false);
+    setNotification({ message: "", severity: "info", type: "general" });
+  };
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={DEFAULT_ALERT_TIME}
+      onClose={handleClose}
+    >
+      <Alert onClose={handleClose} severity={alert.severity} variant={"filled"}>
+        {alert.message}
+      </Alert>
+    </Snackbar>
+  );
+};

package/src/components/Notifications/use-notification.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { NotificationContext } from "./notification-context";
+
+export const useNotification = () => {
+  const context = React.useContext(NotificationContext);
+  if (!context) {
+    throw new Error(
+      "Notification Context must be used within the Notification Provider",
+    );
+  }
+  return context;
+};

package/src/components/README.md

@@ -0,0 +1,9 @@
+# Components
+
+- Temporary location of storefront components
+- As we port pages to SSR, we will move components from
+  this folder into there corresponding /app/page/components folder
+  in their respective features.
+- Organize by feature, not by technology for better clarity
+- TODO: create a /providers folder for theme provider, auth, etc..
+  anything that wraps the app

package/src/components/ReactQueryProvider/index.tsx

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = React.useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

package/src/components/Shared/Image.tsx

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

package/src/components/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/_components/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/_components/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/_components/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/_components/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/_components/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",
+];