@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/components/Footer/sections/FooterSocialLinks.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import React from "react";
-import IconButton from "@mui/material/IconButton";
-import styled from "@mui/material/styles/styled";
-
-// Social Icons
-import { MdFacebook as Facebook } from "react-icons/md";
-import { FaGoogle as Google } from "react-icons/fa";
-import { FaTwitter as Twitter } from "react-icons/fa";
-import { FaInstagram as Instagram } from "react-icons/fa";
-
-// Custom Components
-import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-import { SocialLink } from "../interfaces";
-
-// Styled Components
-const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== "variant",
-})<Props>(({ variant, theme }) => ({
-  margin: 4,
-  fontSize: 12,
-  padding: "10px",
-  ...(variant === "light" && {
-    backgroundColor: "rgba(0,0,0,0.2)",
-  }),
-  ...(variant === "dark" && {
-    backgroundColor: theme.palette.grey[700],
-    ":hover": { backgroundColor: theme.palette.grey[800] },
-  }),
-  ".icon": { color: "white" },
-}));
-
-interface Props {
-  variant?: "light" | "dark";
-  socials?: SocialLink[];
-}
-
-export default function SocialLinks({ variant = "light", socials }: Props) {
-  return (
-    <FlexBox className="flex" mx={-0.625}>
-      {socials?.map(({ name, link }, i) => {
-        let Icon;
-
-        switch (name) {
-          case "Facebook":
-            Icon = Facebook;
-            break;
-          case "Instagram":
-            Icon = Instagram;
-            break;
-          case "Google":
-            Icon = Google;
-            break;
-          case "Twitter":
-            Icon = Twitter;
-            break;
-        }
-
-        return (
-          <a href={link} target="_blank" rel="noreferrer noopenner" key={i}>
-            <StyledIconButton variant={variant}>
-              {Icon && <Icon fontSize="inherit" className="icon" />}
-            </StyledIconButton>
-          </a>
-        );
-      })}
-    </FlexBox>
-  );
-}

package/src/components/Footer/styles/index.ts

@@ -1,39 +0,0 @@
-"use client";
-
-import NextLink from "next/link";
-import styled from "@mui/material/styles/styled";
-
-type LinkProps = { isDark?: boolean };
-
-export const StyledLink = styled(NextLink, {
-  shouldForwardProp: (prop) => prop !== "isDark",
-})<LinkProps>(({ theme, isDark }) => ({
-  borderRadius: 4,
-  display: "block",
-  cursor: "pointer",
-  position: "relative",
-  padding: "0.3rem 0rem",
-  ...(!isDark && {
-    color: theme.palette.grey[500],
-    "&:hover": { color: theme.palette.grey[100] },
-  }),
-}));
-
-export const StyledFooter = styled("footer")(({ theme }) => ({
-  [theme.breakpoints.down("md")]: { marginBottom: "4rem" },
-}));
-
-export const StyledRoot = styled("footer")(({ theme }) => ({
-  padding: 40,
-  color: "white",
-  borderRadius: 8,
-  background: theme.palette.primary.main,
-  [theme.breakpoints.down("md")]: { marginBottom: "6rem !important" },
-}));
-
-export const Heading = styled("h6")({
-  fontSize: 18,
-  lineHeight: 1,
-  fontWeight: 600,
-  marginBottom: 12,
-});

package/src/components/GlobalLoading/index.tsx

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

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

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

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

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

@@ -1,15 +0,0 @@
-# Notifications Store
-
-_Example of how to trigger a notification._
-
-```javascript
-// import notification store
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-
-// 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

@@ -1,82 +0,0 @@
-import { Alert, Snackbar, SnackbarCloseReason } from "@mui/material";
-import React, { createContext } from "react";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/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

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

@@ -1,4 +0,0 @@
-# Components V1 Folder (Deprecated)
-
-- Keeping this temporarily to maintain compatability for OLCC while we create the new component system
-- OLCC will start moving over to components and pages and then we will remove this folder

package/src/components/ReactQueryProvider/index.tsx

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

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

package/src/components/T/index.tsx

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

@@ -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} />;
-}