@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/providers/nav-provider/index.tsx

@@ -3,57 +3,57 @@ import { CmsNavItem } from "@/cms/interfaces/navigation";
 import React, { createContext, PropsWithChildren, useState } from "react";
 import { createLink } from "@evenicanpm/storefront-core/src/providers/nav-provider/utils/createLink";
 import { useTranslations } from "next-intl";
-import { CategoryHierarchy } from "@/lib/category-helpers";
+import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 
 type NavContextType = {
-  cmsNav: CmsNavItem[];
-  categories: CategoryHierarchy[];
-  isMobileSideNavOpen: boolean;
-  toggleMobileSideNav: () => void;
+	cmsNav: CmsNavItem[];
+	categories: CategoryHierarchy[];
+	isMobileSideNavOpen: boolean;
+	toggleMobileSideNav: () => void;
 };
 
 export const NavContext = createContext<NavContextType>({
-  cmsNav: [],
-  categories: [],
-  isMobileSideNavOpen: false,
-  toggleMobileSideNav: () => {
-    // gets overridden by NavProvider
-  },
+	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[];
+	categories: CategoryHierarchy[];
+	cmsNav: CmsNavItem[];
 }
 
 const NavProvider = ({
-  categories,
-  cmsNav,
-  children,
+	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>
-  );
+	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/providers/nav-provider/utils/createLink.ts

@@ -1,15 +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: [],
-  };
+	return {
+		title: name,
+		menuAttached: false,
+		type: "EXTERNAL",
+		path: path,
+		slug: "",
+		external: false,
+		uiRouterKey: "blog",
+		related: null,
+		items: [],
+	};
 };

package/src/providers/notifications/notification-context.tsx

@@ -1,82 +1,82 @@
 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";
+import { DatasourceApis } from "@evenicanpm/storefront-core/src/api-manager/types/Datasource";
 
 const DEFAULT_ALERT_TIME = 5000;
 
 export type NotificationType = {
-  severity: "success" | "info" | "warning" | "error";
-  message: string;
-  type?: keyof DatasourceApis | "general";
+	severity: "success" | "info" | "warning" | "error";
+	message: string;
+	type?: keyof DatasourceApis | "general";
 };
 
 type NotificationContextType = {
-  alert: NotificationType;
-  setNotification(notification: NotificationType): void;
+	alert: NotificationType;
+	setNotification(notification: NotificationType): void;
 };
 
 export type WithNotification<T> = {
-  notification: NotificationType;
-  data: T;
+	notification: NotificationType;
+	data: T;
 };
 export const NotificationContext =
-  createContext<NotificationContextType | null>(null);
+	createContext<NotificationContextType | null>(null);
 
 export const NotificationProvider = ({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) => {
-  const [alert, setAlert] = React.useState<NotificationType>({
-    message: "",
-    severity: "info",
-    type: "general",
-  });
-  // const [miniCartOpen, setMiniCartOpen] = React.useState<boolean>(false);
+	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 setNotification = (notification: NotificationType) => {
+		setAlert(notification);
+	};
 
-  const value = React.useMemo(() => ({ alert, setNotification }), [alert]);
-  return (
-    <NotificationContext.Provider value={value}>
-      {children}
-    </NotificationContext.Provider>
-  );
+	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();
+	const [open, setOpen] = React.useState<boolean>(false);
+	const { alert, setNotification } = useNotification();
 
-  React.useEffect(() => {
-    if (alert.message) {
-      setOpen(true);
-    }
-  }, [alert]);
+	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" });
-  };
+	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>
-  );
+	return (
+		<Snackbar
+			open={open}
+			autoHideDuration={DEFAULT_ALERT_TIME}
+			onClose={handleClose}
+		>
+			<Alert onClose={handleClose} severity={alert.severity} variant={"filled"}>
+				{alert.message}
+			</Alert>
+		</Snackbar>
+	);
 };

package/src/providers/notifications/use-notification.ts

@@ -2,11 +2,11 @@ import React from "react";
 import { NotificationContext } from "@evenicanpm/storefront-core/src/providers/notifications/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;
+	const context = React.useContext(NotificationContext);
+	if (!context) {
+		throw new Error(
+			"Notification Context must be used within the Notification Provider",
+		);
+	}
+	return context;
 };

package/src/theme/build-mui-theme.ts

@@ -0,0 +1,104 @@
+"use client";
+// The file that contains a call to createTheme must have a use client directive
+// https://mui.com/material-ui/integrations/nextjs/
+import { createTheme, Theme } from "@mui/material/styles";
+import { Shadows, ThemeOptions } from "@mui/material";
+import { ThemeItem } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
+
+/**
+ * Converts database theme object into an MUI theme object to pass to the ThemeProvider
+ * @param themeObject is E4 theme entity
+ * @returns an MUI theme object
+ */
+const themeBuilder = (themeObject: ThemeItem): Theme => {
+	const theme = {
+		breakpoints: {
+			values: {
+				xs: 0,
+				sm: themeObject.smBreakpoint,
+				md: themeObject.mdBreakpoint,
+				lg: themeObject.lgBreakpoint,
+				xl: themeObject.xlBreakpoint,
+			},
+		},
+		palette: {
+			background: {
+				default: "#FAFAFA",
+				paper: themeObject.panelBackground || "#f6f9fc",
+			},
+			primary: {
+				main: themeObject.colorPrimary,
+				contrastText: "#FFF",
+			},
+			secondary: {
+				main: themeObject.colorSecondary,
+			},
+			text: {
+				primary: themeObject.textPrimary,
+				secondary: themeObject.textSecondary,
+			},
+			warning: {
+				main: themeObject.warning,
+			},
+			success: {
+				main: themeObject.success,
+			},
+			error: {
+				main: themeObject.error,
+			},
+			info: {
+				main: themeObject.info,
+			},
+		},
+		typography: {
+			fontFamily: themeObject.fontFamily,
+			h1: {
+				fontSize: `${themeObject.h1}rem`,
+				fontFamily: themeObject.h1Font || themeObject.fontFamily,
+			},
+			h2: {
+				fontSize: `${themeObject.h2}rem`,
+				fontFamily: themeObject.fontFamily,
+			},
+			h3: {
+				fontSize: `${themeObject.h3}rem`,
+				fontFamily: themeObject.fontFamily,
+			},
+			h4: {
+				fontSize: `${themeObject.h4}rem`,
+				fontFamily: themeObject.fontFamily,
+			},
+			h5: {
+				fontSize: `${themeObject.h5}rem`,
+				fontFamily: themeObject.h5Font || themeObject.fontFamily,
+			},
+			h6: {
+				fontSize: `${themeObject.h6}rem`,
+				fontFamily: themeObject.h6Font || themeObject.fontFamily,
+			},
+			body1: {
+				fontSize: `${themeObject.body1}rem`,
+				fontFamily: themeObject.body1Font || themeObject.fontFamily,
+			},
+			body2: {
+				fontSize: `${themeObject.body2}rem`,
+				fontFamily: themeObject.body2Font || themeObject.fontFamily,
+			},
+		},
+		shape: {
+			borderRadius: 4,
+		},
+		shadows: [
+			"none",
+			"0px 0px 3px rgba(0, 0, 0, 0.09)",
+			"0px 35px 60px rgba(0, 0, 0, 0.25)",
+			"20px 55px 60px rgba(0, 0, 0, 0.25)",
+			"10px 15px 60px rgba(0, 0, 0, 0.25)",
+			...Array(20).fill("none"),
+		] as Shadows,
+	};
+	const e4Theme = createTheme(theme as ThemeOptions);
+	return e4Theme;
+};
+
+export default themeBuilder;

package/src/theme/components.ts

@@ -0,0 +1,163 @@
+import { Components } from "@mui/material/styles/components";
+import { dark, grey, primary, secondary, success } from "./theme-colors";
+import { typography } from "./typography";
+import { classes } from "./utils";
+
+// ========================================================
+
+declare module "@mui/material/Button" {
+	interface ButtonPropsColorOverrides {
+		dark: true;
+		paste: true;
+		marron: true;
+		orange: true;
+	}
+
+	interface ButtonPropsSizeOverrides {
+		normal: true;
+	}
+}
+// =========================================================
+
+export const components: Components = {
+	MuiCssBaseline: {
+		styleOverrides: {
+			"*": {
+				margin: 0,
+				padding: 0,
+				boxSizing: "border-box",
+				scrollBehavior: "smooth",
+			},
+			html: {
+				scrollBehavior: "smooth",
+			},
+			p: {
+				lineHeight: 1.75,
+			},
+			button: {
+				fontSize: 14,
+				fontFamily: typography.fontFamily,
+			},
+			".MuiRating-sizeSmall": {
+				fontSize: "20px",
+			},
+			a: {
+				color: "inherit",
+				textDecoration: "none",
+			},
+			ul: {
+				margin: 0,
+				padding: 0,
+				listStyle: "none",
+			},
+			".bg-white": {
+				backgroundColor: "white",
+			},
+
+			...classes(),
+		},
+	},
+	MuiInputLabel: {
+		styleOverrides: {
+			root: { zIndex: 0 },
+		},
+	},
+	MuiDialog: {
+		styleOverrides: {
+			paper: { borderRadius: 8 },
+		},
+	},
+	MuiCard: {
+		styleOverrides: {
+			root: { borderRadius: "8px" },
+		},
+	},
+	MuiPagination: {
+		defaultProps: {
+			variant: "outlined",
+			color: "primary",
+		},
+	},
+	MuiMenuItem: {
+		styleOverrides: {
+			root: { paddingTop: 8, paddingBottom: 8 },
+		},
+	},
+	MuiSvgIcon: {
+		styleOverrides: {
+			root: {
+				"& .secondary": { opacity: 0.4 },
+			},
+		},
+	},
+	MuiTextField: {
+		defaultProps: { size: "small", variant: "outlined" },
+		styleOverrides: {
+			root: ({ ownerState }) => ({
+				...(ownerState.color === "info" && {
+					"& .MuiOutlinedInput-root": { borderRadius: "8px", fontWeight: 600 },
+					"& .MuiOutlinedInput-notchedOutline": { borderColor: grey[300] },
+				}),
+			}),
+		},
+	},
+
+	MuiButton: {
+		styleOverrides: {
+			root: ({ ownerState }) => ({
+				minWidth: 0,
+				minHeight: 0,
+				fontWeight: 600,
+				borderRadius: "6px",
+				textTransform: "capitalize",
+
+				...(ownerState.color === "dark" && {
+					color: "#fff",
+					borderRadius: 0,
+					transition: "all 0.3s",
+					":hover": { backgroundColor: "#343434" },
+				}),
+
+				...(ownerState.color === "dark" &&
+					ownerState.variant === "outlined" && {
+						color: dark.main,
+						borderRadius: "3px",
+						transition: "all 0.3s",
+						":hover": { backgroundColor: dark.main, color: "white" },
+					}),
+
+				...((ownerState.color === "info" || ownerState.color === "orange") && {
+					borderRadius: "8px",
+				}),
+
+				...((ownerState.color === "orange" ||
+					ownerState.color === "success") && {
+					color: "white",
+				}),
+			}),
+			sizeLarge: { padding: ".6rem 2.5rem" },
+		},
+		defaultProps: { color: "inherit" },
+	},
+
+	MuiChip: {
+		defaultProps: { color: "primary" },
+		styleOverrides: {
+			labelSmall: { paddingInline: 12 },
+			colorSuccess: { color: success.main, backgroundColor: success[100] },
+			colorSecondary: {
+				color: secondary[500],
+				backgroundColor: secondary[100],
+			},
+			colorPrimary: {
+				color: primary[500],
+				backgroundColor: primary[100],
+				"&:hover": { color: primary[500], backgroundColor: primary[100] },
+			},
+		},
+	},
+
+	MuiContainer: {
+		defaultProps: { maxWidth: "xl" },
+	},
+};

package/src/theme/emotion-cache.tsx

@@ -0,0 +1,101 @@
+"use client";
+import * as React from "react";
+import createCache from "@emotion/cache";
+import { useServerInsertedHTML } from "next/navigation";
+import { CacheProvider as DefaultCacheProvider } from "@emotion/react";
+import type {
+	EmotionCache,
+	Options as OptionsOfCreateCache,
+} from "@emotion/cache";
+
+export type NextAppDirEmotionCacheProviderProps = {
+	/** This is the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+	options: Omit<OptionsOfCreateCache, "insertionPoint">;
+	/** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+	CacheProvider?: (props: {
+		value: EmotionCache;
+		children: React.ReactNode;
+	}) => React.JSX.Element | null;
+	children: React.ReactNode;
+};
+
+// Adapted from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
+export default function NextAppDirEmotionCacheProvider(
+	props: NextAppDirEmotionCacheProviderProps,
+) {
+	const { options, CacheProvider = DefaultCacheProvider, children } = props;
+
+	const [registry] = React.useState(() => {
+		const cache = createCache(options);
+		cache.compat = true;
+		const prevInsert = cache.insert;
+		let inserted: { name: string; isGlobal: boolean }[] = [];
+
+		cache.insert = (...args) => {
+			const [selector, serialized] = args;
+			if (cache.inserted[serialized.name] === undefined) {
+				inserted.push({
+					name: serialized.name,
+					isGlobal: !selector,
+				});
+			}
+			return prevInsert(...args);
+		};
+
+		const flush = () => {
+			const prevInserted = inserted;
+			inserted = [];
+			return prevInserted;
+		};
+
+		return { cache, flush };
+	});
+
+	useServerInsertedHTML(() => {
+		const inserted = registry.flush();
+
+		if (inserted.length === 0) {
+			return null;
+		}
+
+		let styles = "";
+		let dataEmotionAttribute = registry.cache.key;
+
+		const globals: { name: string; style: string }[] = [];
+
+		inserted.forEach(({ name, isGlobal }) => {
+			const style = registry.cache.inserted[name] ?? "";
+
+			if (typeof style !== "boolean") {
+				if (isGlobal) {
+					globals.push({ name, style });
+				} else {
+					styles += style;
+					dataEmotionAttribute += ` ${name}`;
+				}
+			}
+		});
+
+		return (
+			<React.Fragment>
+				{globals.map(({ name, style }) => (
+					<style
+						key={name}
+						data-emotion={`${registry.cache.key}-global ${name}`}
+						// eslint-disable-next-line react/no-danger
+						dangerouslySetInnerHTML={{ __html: style }}
+					/>
+				))}
+				{styles && (
+					<style
+						data-emotion={dataEmotionAttribute}
+						// eslint-disable-next-line react/no-danger
+						dangerouslySetInnerHTML={{ __html: styles }}
+					/>
+				)}
+			</React.Fragment>
+		);
+	});
+
+	return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
+}