@evenicanpm/storefront-core 1.2.2 → 1.4.0

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

@@ -2,9 +2,9 @@
 
 import DropZone from "@evenicanpm/storefront-core/src/components-v2/DropZone";
 import { Alert } from "@mui/material";
-import { useEffect, useState } from "react";
-import { Accept, FileRejection } from "react-dropzone";
 import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import type { Accept, FileRejection } from "react-dropzone";
 
 export interface OrderUploadItem {
 	itemId: string;
@@ -15,11 +15,14 @@ export interface OrderUploadProps {
 	onUploadItems: (data: OrderUploadItem[]) => void;
 }
 
-// eslint-disable-next-line
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const XLSX: any;
 
-export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
+export default function OrderUpload({
+	onUploadItems,
+}: Readonly<OrderUploadProps>) {
 	const t = useTranslations("QuickOrder");
+
 	const [items, setItems] = useState<OrderUploadItem[]>([]);
 	const [errCount, setErrCount] = useState<number>(0);
 	const [files, setFiles] = useState<File[]>();
@@ -27,13 +30,28 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
 
 	const accept: Accept = { "text/*": [".xlsx", ".csv", ".xls"] };
 
+	useEffect(loadXlsxScript, []);
+
 	useEffect(() => {
-		const script = document.createElement("script");
-		script.lang = "javascript";
-		script.src =
-			"https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js";
-		document.head.appendChild(script);
-	}, []);
+		if (!files) return;
+
+		const processFiles = async () => {
+			for (const file of files) {
+				const buffer = await file.arrayBuffer();
+
+				const sheet = readFirstSheet(buffer);
+				const parsed = extractItemsFromSheet(sheet);
+
+				const { validItems, errors } = validateItems(parsed, items);
+
+				setItems(validItems);
+				setErrCount(errCount + errors);
+				onUploadItems(validItems);
+			}
+		};
+
+		processFiles();
+	}, [files, items, onUploadItems]);
 
 	const handleReject = (rejs: FileRejection[]) => {
 		const msgs = rejs.map((r) => `${r.file.name} ${t("fileRejectionMsg")}`);
@@ -53,82 +71,16 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
 
 	const handleCloseError = () => setFileRejections([]);
 
-	useEffect(() => {
-		const handleUploadItems = (list: OrderUploadItem[]) => onUploadItems(list);
-
-		const parseFile = (file: File) => {
-			const currItems = items ? [...items] : [];
-			let currErrCount = errCount;
-
-			const reader = new FileReader();
-			reader.onload = (evt) => {
-				const bstr = evt.target?.result;
-				const wb = XLSX.read(bstr, { type: "binary" });
-				const wsname = wb.SheetNames[0];
-				const ws = wb.Sheets[wsname];
-				const ref = ws["!ref"];
-				let data: OrderUploadItem[] = [];
-
-				try {
-					if (ref) {
-						const spl = ref.split(":");
-						if (spl.length === 2) {
-							const rowCount = Number(spl[1].substring(1));
-							for (let i = 2; i < rowCount + 1; i++) {
-								const qty = ws[`B${i}`]?.v;
-								const itemId = ws[`A${i}`]?.v;
-								if (itemId) data.push({ itemId, qty });
-							}
-						}
-					}
-				} catch {}
-
-				if (data.length === 0) {
-					data = XLSX.utils.sheet_to_json(ws, {
-						header: 0,
-					}) as OrderUploadItem[];
-				}
-
-				data.forEach((d) => {
-					const qty =
-						typeof d.qty === "string" || d.qty - Math.floor(d.qty) !== 0
-							? 1
-							: d.qty;
-					if (d.itemId && d.qty) currItems.push({ qty, itemId: d.itemId });
-					else currErrCount++;
-				});
-
-				setItems(currItems);
-				setErrCount(currErrCount);
-				handleUploadItems(currItems);
-			};
-			reader.readAsBinaryString(file);
-		};
-
-		const isValidFile = (file: File): boolean => {
-			parseFile(file);
-			return file.type === "text/csv";
-		};
-
-		if (files) {
-			files.forEach((file) => {
-				if (isValidFile(file)) {
-					// noop
-				}
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [items, files, errCount, onUploadItems]);
-
 	return (
 		<>
 			{fileRejections.length > 0 && (
 				<Alert severity="error" onClose={handleCloseError}>
 					{fileRejections.map((msg, i) => (
-						<div key={i}>{msg}</div>
+						<div key={`e-msg-${i + 1}`}>{msg}</div>
 					))}
 				</Alert>
 			)}
+
 			<DropZone
 				onChange={getFiles}
 				handleReject={handleReject}
@@ -137,3 +89,65 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
 		</>
 	);
 }
+
+// Loading xlsx script from CDN, as the library doesn't support ESM imports yet
+function loadXlsxScript() {
+	const script = document.createElement("script");
+	script.lang = "javascript";
+	script.src =
+		"https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js";
+	document.head.appendChild(script);
+}
+
+//Read Excel Sheet
+function readFirstSheet(binary: string | ArrayBuffer) {
+	const wb = XLSX.read(binary, { type: "binary" });
+	const wsname = wb.SheetNames[0];
+	return wb.Sheets[wsname];
+}
+
+//Extract Items
+// biome-ignore lint/suspicious/noExplicitAny: <explanation> This is required as the XLSX library returns a sheet as an object with dynamic keys based on the cell positions (e.g., A1, B2, etc.), which cannot be typed more specifically without extensive type definitions that may not be practical. --- IGNORE ---
+function extractItemsFromSheet(ws: Record<string, any>): OrderUploadItem[] {
+	const ref = ws["!ref"];
+	let data: OrderUploadItem[] = [];
+
+	try {
+		if (ref) {
+			const [_, end] = ref.split(":");
+			const rowCount = Number(end.substring(1));
+
+			for (let i = 2; i < rowCount + 1; i++) {
+				const qty = ws[`B${i}`]?.v;
+				const itemId = ws[`A${i}`]?.v;
+
+				if (itemId) data.push({ itemId, qty });
+			}
+		}
+	} catch {}
+
+	if (data.length === 0) {
+		data = XLSX.utils.sheet_to_json(ws, { header: 0 });
+	}
+
+	return data;
+}
+
+//Validate Items
+function validateItems(data: OrderUploadItem[], existing: OrderUploadItem[]) {
+	const validItems = [...existing];
+	let errors = 0;
+
+	data.forEach((d) => {
+		const qty =
+			typeof d.qty === "string" || d.qty - Math.floor(d.qty) !== 0 ? 1 : d.qty;
+
+		if (d.itemId && d.qty) {
+			validItems.push({ itemId: d.itemId, qty });
+		} else {
+			errors++;
+		}
+	});
+
+	return { validItems, errors };
+}

package/src/pages-v2/quickorder/provider.tsx

@@ -1,16 +1,17 @@
 "use client";
 
-import React, { useCallback, useEffect, useState } from "react";
-import { QuickOrderContext, RowError } from "./context";
-import type { QuickOrderRowData } from "./quick-order-row";
-import useSearchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/mutations/search-products";
 import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-to-cart";
 import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
+import useSearchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/mutations/search-products";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { QuickOrderContext, RowError } from "./context";
+import type { QuickOrderRowData } from "./quick-order-row";
 
 export default function QuickOrderProvider({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	const [rows, setRows] = useState<QuickOrderRowData[]>([]);
 	const { mutateAsync: searchProducts } = useSearchProducts();
@@ -83,11 +84,11 @@ export default function QuickOrderProvider({
 		if (updated[idx].value !== value) {
 			updated[idx].value = value;
 			const response = await getProductSearchResults([value]);
-			product = (response && response[0]) || null;
+			product = response?.[0] || null;
 		}
 
 		updated[idx] = generateRowData(
-			!!product ? product : null,
+			product || null,
 			id,
 			value,
 			!!product,
@@ -97,7 +98,7 @@ export default function QuickOrderProvider({
 	};
 
 	const handleRowDelete = (id: number) => {
-		let updated = rows.filter((r) => r.id !== id);
+		const updated = rows.filter((r) => r.id !== id);
 		const lastId = updated.at(-1)?.id ?? 0;
 		if (updated.length < 3) {
 			updated.push(generateEmptyRow(lastId + 1));
@@ -138,7 +139,7 @@ export default function QuickOrderProvider({
 		const itemIds = items.map((it: any) => it.itemId.toString());
 		const response = await getProductSearchResults(itemIds);
 
-		let updated = rows.filter((r) => r.value);
+		const updated = rows.filter((r) => r.value);
 		let rowId = updated.reduce((max, r) => Math.max(max, r.id), 0) + 1;
 
 		items.forEach((it: any) => {
@@ -172,12 +173,14 @@ export default function QuickOrderProvider({
 			header +
 			rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
 		const uri = "data:text/csv;charset=utf-8," + csv;
+
 		const link = document.createElement("a");
 		link.setAttribute("href", encodeURI(uri));
 		link.setAttribute("download", "quick_order.csv");
+
 		document.body.appendChild(link);
 		link.click();
-		document.body.removeChild(link);
+		link.remove();
 	};
 
 	useEffect(() => initTable(), [initTable]);

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import {
 	H2,
 	Span,

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

@@ -1,6 +1,9 @@
 "use client";
 
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
+import type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
 	Button,
 	TableCell,
@@ -8,13 +11,11 @@ import {
 	TextField,
 	useTheme,
 } from "@mui/material";
-import React, { useEffect, useMemo, useState } from "react";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { RowError } from "./context";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { useTranslations } from "next-intl";
-import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
 import _ from "lodash";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { RowError } from "./context";
 
 export interface QuickOrderRowData {
 	id: number;
@@ -46,7 +47,7 @@ export default function QuickOrderRow({
 	onRowChange,
 	isLastRow,
 	rowError,
-}: QuickOrderRowProps) {
+}: Readonly<QuickOrderRowProps>) {
 	const theme = useTheme();
 	const t = useTranslations("QuickOrder");
 	const { formatCurrency } = useCurrencyFormatter();

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
 import {
 	Table,
 	TableBody,
@@ -8,10 +9,9 @@ import {
 	TableHead,
 	TableRow,
 } from "@mui/material";
-import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
-import QuickOrderRow from "./quick-order-row";
-import { useQuickOrder } from "./context";
 import { useTranslations } from "next-intl";
+import { useQuickOrder } from "./context";
+import QuickOrderRow from "./quick-order-row";
 
 const QuickOrderTable = () => {
 	const { rows, handleRowUpdate, handleRowDelete, handleAddRows } =

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,27 +16,26 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
-	useTheme,
 	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;
@@ -100,7 +98,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		const idx = current.findIndex((r) => r.id === id);
 		if (idx > -1) {
 			current.splice(idx, 1);
-			const newRowId = current.length ? current[current.length - 1].id + 1 : 1;
+			const newRowId = (current.at(-1)?.id ?? 0) + 1;
 			if (current.length < 3) current.push(generateEmptyRow(newRowId));
 			setRows(current);
 		}
@@ -169,7 +167,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		if (current[idx].value !== value) {
 			current[idx].value = value;
 			const response = await searchProductByRow(id, value);
-			product = (response && response[0]) || null;
+			product = response?.[0] || null;
 			found = !!product;
 		}
 
@@ -179,7 +177,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 
 	const addRows = () => {
 		const current = [...rows];
-		const maxRowId = current.reduce((m, r) => (r.id > m ? r.id : m), 0);
+		const maxRowId = current.reduce((m, r) => Math.max(m, r.id), 0);
 		const newRowId = maxRowId + 1;
 		current.push(generateEmptyRow(newRowId), generateEmptyRow(newRowId + 1));
 		setRows(current);
@@ -192,12 +190,13 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 			header +
 			rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
 		const encoded = encodeURI("data:text/csv;charset=utf-8," + csv);
+
 		const link = document.createElement("a");
 		link.setAttribute("href", encoded);
 		link.setAttribute("download", "quick_order.csv");
 		document.body.appendChild(link);
 		link.click();
-		document.body.removeChild(link);
+		link.remove();
 	};
 
 	const addToCart = async () => {
@@ -227,7 +226,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 			const firstEmptyIdx = curr.findIndex((r) => !r.value);
 			if (firstEmptyIdx > -1) curr = curr.slice(0, firstEmptyIdx);
 
-			let rowId = curr.reduce((m, r) => (r.id > m ? r.id : m), 0) + 1;
+			let rowId = curr.reduce((m, r) => Math.max(m, r.id), 0) + 1;
 
 			items.forEach((it) => {
 				const product = response?.find(
@@ -327,6 +326,24 @@ QuickOrder.Row = ({
 }) => {
 	const ctx = useQuickOrder();
 	const theme = useTheme();
+	const t = useTranslations("QuickOrder");
+	const { formatCurrency } = useCurrencyFormatter();
+
+	const [inputValue, setInputValue] = useState<string>(row.value || "");
+
+	useEffect(() => {
+		setInputValue(row.value || "");
+	}, [row.value]);
+
+	const debounced = useMemo(
+		() =>
+			_.debounce(
+				(val: string) => ctx?.updateRow(row.id, val, row.quantity),
+				500,
+			),
+		[ctx, row.id, row.quantity],
+	);
+
 	if (!ctx) return null;
 
 	const getStatus = (
@@ -346,22 +363,6 @@ QuickOrder.Row = ({
 		}
 	};
 
-	const t = useTranslations("QuickOrder");
-	const { formatCurrency } = useCurrencyFormatter();
-
-	const [inputValue, setInputValue] = useState<string>(row.value || "");
-
-	useEffect(() => setInputValue(row.value || ""), [row.value]);
-
-	const debounced = useMemo(
-		() =>
-			_.debounce(
-				(val: string) => ctx.updateRow(row.id, val, row.quantity),
-				500,
-			),
-		[ctx, row.id, row.quantity],
-	);
-
 	const onValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setInputValue(e.target.value);
 		debounced(e.target.value);
@@ -391,6 +392,7 @@ QuickOrder.Row = ({
 					placeholder={t("Table.itemNo")}
 				/>
 			</TableCell>
+
 			<TableCell sx={{ width: { xs: "20%" } }}>
 				<QuickOrder.QtyInput
 					value={row.quantity}
@@ -399,10 +401,13 @@ QuickOrder.Row = ({
 					placeholder={t("Table.quantity")}
 				/>
 			</TableCell>
+
 			<TableCell>{getStatus(row.product, row.rowError, t)}</TableCell>
+
 			<TableCell sx={{ display: { xs: "none", sm: "table-cell" } }}>
 				{row.product?.Price ? formatCurrency(row.product.Price) : ""}
 			</TableCell>
+
 			<TableCell>
 				<Button
 					variant="contained"

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;
 
@@ -33,7 +33,6 @@ export const NotificationProvider = ({
 		severity: "info",
 		type: "general",
 	});
-	// const [miniCartOpen, setMiniCartOpen] = React.useState<boolean>(false);
 
 	const setNotification = (notification: NotificationType) => {
 		setAlert(notification);

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