@evenicanpm/storefront-core 1.2.1 → 1.3.0

package/src/pages-v2/quickorder/quick-order.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import React, {
-	ReactNode,
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-} from "react";
+import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components/BoxShadowCard";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import OrderUploadInner, {
+	type OrderUploadItem,
+} from "@evenicanpm/storefront-core/src/pages/quickorder/order-upload";
+import type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
 	Button,
 	Table,
@@ -17,28 +16,26 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
-	useTheme,
-	Box,
 	TextField,
+	useTheme,
 } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import _ from "lodash";
 import { useTranslations } from "next-intl";
-
-import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components/BoxShadowCard";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
-import useSearchProducts from "@/api-manager/services/product/mutations/search-products";
+import type React from "react";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
 import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
 import getCart from "@/api-manager/services/cart/queries/get-cart";
+import useSearchProducts from "@/api-manager/services/product/mutations/search-products";
 import useCurrencyFormatter from "@/lib/currency-formatter";
 
-import OrderUploadInner, {
-	OrderUploadItem,
-} from "@evenicanpm/storefront-core/src/pages/quickorder/order-upload";
-
 type TextInputProps = {
 	value: string;
 	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -81,7 +78,6 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 	const { mutateAsync: searchProducts } = useSearchProducts();
 	const { mutateAsync: addToCartMut } = useAddToCart();
 	const { data: cart } = getCart.useData();
-	const t = useTranslations("QuickOrder");
 
 	const generateEmptyRow = (id: number): QuickOrderRowData => ({
 		id,

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

@@ -1,9 +1,9 @@
 "use client";
-import { CmsNavItem } from "@/cms/interfaces/navigation";
-import React, { createContext, PropsWithChildren, useState } from "react";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { createLink } from "@evenicanpm/storefront-core/src/providers/nav-provider/utils/createLink";
 import { useTranslations } from "next-intl";
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import React, { createContext, type PropsWithChildren, useState } from "react";
+import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 type NavContextType = {
 	cmsNav: CmsNavItem[];

package/src/providers/nav-provider/utils/createLink.ts

@@ -1,4 +1,4 @@
-import { CmsNavItem } from "@/cms/interfaces/navigation";
+import type { CmsNavItem } from "@evenicanpm/storefront-core/src/cms/interfaces/navigation";
 
 export const createLink = (name: string, path: string): CmsNavItem => {
 	return {

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

@@ -1,7 +1,7 @@
-import { Alert, Snackbar, SnackbarCloseReason } from "@mui/material";
-import React, { createContext } from "react";
+import type { DatasourceApis } from "@evenicanpm/storefront-core/src/api-manager/types/Datasource";
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import { DatasourceApis } from "@evenicanpm/storefront-core/src/api-manager/types/Datasource";
+import { Alert, Snackbar, type SnackbarCloseReason } from "@mui/material";
+import React, { createContext } from "react";
 
 const DEFAULT_ALERT_TIME = 5000;
 

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { NotificationContext } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+import React from "react";
 
 export const useNotification = () => {
 	const context = React.useContext(NotificationContext);

package/tsconfig.json

@@ -30,5 +30,5 @@
 			"@messages/*": ["../../../../storefront/messages/*"]
 		}
 	},
-	"include": ["src", "."]
+	"include": ["src"]
 }

package/src/components-v2/sticky/Sticky.stories.tsx

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Sticky from "./index";
-import { Box, Paper, Typography } from "@mui/material";
-
-const meta: Meta<typeof Sticky> = {
-	title: "Utility/Sticky",
-	component: Sticky,
-	parameters: {
-		layout: "fullscreen",
-	},
-};
-export default meta;
-type Story = StoryObj<typeof Sticky>;
-
-// helper scrollable content
-const ScrollContent = () => (
-	<Box sx={{ height: "1500px", p: 2, bgcolor: "grey.100" }}>
-		<Typography>Scroll down to see Sticky in action.</Typography>
-	</Box>
-);
-
-export const Basic: Story = {
-	args: {
-		fixedOn: 100,
-	},
-	render: (args) => (
-		<Box>
-			<Sticky {...args}>
-				<Paper
-					sx={{
-						p: 2,
-						bgcolor: "primary.main",
-						color: "white",
-						textAlign: "center",
-					}}
-				>
-					<Typography>Basic Sticky Header</Typography>
-				</Paper>
-			</Sticky>
-			<ScrollContent />
-		</Box>
-	),
-};
-
-export const WithScrollDistance: Story = {
-	args: {
-		fixedOn: 100,
-		scrollDistance: 50,
-	},
-	render: (args) => (
-		<Box>
-			<Sticky {...args}>
-				<Paper
-					sx={{
-						p: 2,
-						bgcolor: "secondary.main",
-						color: "white",
-						textAlign: "center",
-					}}
-				>
-					<Typography>Becomes sticky at 150px (100 + 50)</Typography>
-				</Paper>
-			</Sticky>
-			<ScrollContent />
-		</Box>
-	),
-};
-
-export const Sidebar: Story = {
-	args: {
-		fixedOn: 200,
-	},
-	render: (args) => (
-		<Box sx={{ display: "flex", minHeight: "150vh" }}>
-			<Box sx={{ flex: 1, p: 2 }}>
-				<Typography>Main content goes here...</Typography>
-				<ScrollContent />
-			</Box>
-			<Box sx={{ width: 250, p: 2 }}>
-				<Sticky {...args}>
-					<Paper sx={{ p: 2, bgcolor: "info.main", color: "white" }}>
-						<Typography>Sticky Sidebar</Typography>
-					</Paper>
-				</Sticky>
-			</Box>
-		</Box>
-	),
-};

package/src/components-v2/sticky/index.ts

@@ -1 +0,0 @@
-export { default } from "@evenicanpm/storefront-core/src/components-v2/sticky/sticky";

package/src/components-v2/sticky/sticky.tsx

@@ -1,62 +0,0 @@
-import { useCallback, useEffect, useRef, useState, ReactNode } from "react";
-import clsx from "clsx";
-import { StyledBox } from "@evenicanpm/storefront-core/src/components-v2/sticky/styles";
-
-// ============================================================
-interface Props {
-	fixedOn: number;
-	children: ReactNode;
-	scrollDistance?: number;
-	onSticky?: (isFixed: boolean) => void;
-}
-
-// ============================================================
-
-export default function Sticky({
-	fixedOn,
-	children,
-	onSticky,
-	scrollDistance = 0,
-}: Props) {
-	const [fixed, setFixed] = useState(false);
-	const elementRef = useRef<HTMLDivElement>(null);
-	const [height, setHeight] = useState(0);
-
-	const scrollListener = useCallback(() => {
-		if (!window) return;
-
-		const isFixed = window.scrollY >= fixedOn + scrollDistance;
-		setFixed(isFixed);
-	}, [fixedOn, scrollDistance]);
-
-	useEffect(() => {
-		if (!window) return;
-
-		window.addEventListener("scroll", scrollListener);
-		window.addEventListener("resize", scrollListener);
-
-		return () => {
-			window.removeEventListener("scroll", scrollListener);
-			window.removeEventListener("resize", scrollListener);
-		};
-	}, [scrollListener]);
-
-	useEffect(() => {
-		if (onSticky) onSticky(fixed);
-	}, [fixed, onSticky]);
-
-	useEffect(() => {
-		if (elementRef.current) {
-			setHeight(elementRef.current.offsetHeight);
-			scrollListener();
-		}
-	}, [scrollListener]);
-
-	return (
-		<StyledBox fixedOn={fixedOn} componentHeight={height} fixed={fixed}>
-			<div className={clsx({ hold: !fixed, fixed: fixed })} ref={elementRef}>
-				{children}
-			</div>
-		</StyledBox>
-	);
-}

package/src/components-v2/sticky/styles.ts

@@ -1,38 +0,0 @@
-import { keyframes, styled } from "@mui/material/styles";
-
-// ==============================================================
-interface Props {
-	fixed?: boolean;
-	fixedOn?: number;
-	componentHeight?: number;
-}
-// ==============================================================
-
-const slideDown = keyframes`
-    from {transform: translateY(-200%)}
-    to {transform: translateY(0)}
-`;
-
-export const StyledBox = styled("div", {
-	shouldForwardProp: (prop) =>
-		prop !== "componentHeight" && prop !== "fixed" && prop !== "fixedOn",
-})<Props>(({ theme, componentHeight, fixedOn, fixed }) => ({
-	paddingTop: fixed ? componentHeight : 0,
-
-	"& .hold": {
-		zIndex: 5,
-		boxShadow: "none",
-		position: "relative",
-	},
-
-	"& .fixed": {
-		left: 0,
-		right: 0,
-		zIndex: 1500,
-		position: "fixed",
-		top: `${fixedOn}px`,
-		boxShadow: theme.shadows[2],
-		transition: "all 350ms ease-in-out",
-		animation: `${slideDown} 400ms ${theme.transitions.easing.easeInOut}`,
-	},
-}));

package/src/components-v2/utils/constants.ts

@@ -1,8 +0,0 @@
-export const layoutConstant = {
-	topbarHeight: 40,
-	headerHeight: 80,
-	mobileNavHeight: 64,
-	containerWidth: 1200,
-	mobileHeaderHeight: 64,
-	grocerySidenavWidth: 280,
-};

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

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

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

@@ -1,101 +0,0 @@
-"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>;
-}