@evenicanpm/storefront-core 1.1.0 → 1.2.1

package/src/components-v2/products-view/compound/products-grid-view.tsx

@@ -9,12 +9,13 @@ import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/produc
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import {
-  ProductsViewContext,
-  useProductsView,
+	ProductsViewCardContext,
+	ProductsViewContext,
+	useProductsView,
 } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
 import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
 import { cloneElement } from "react";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
+import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 
 /**
  * Root component of products grid view.
@@ -29,18 +30,18 @@ import { ProductPrice } from "@/api-manager/schemas/product.schema";
  * </ProductsGridView>
  */
 export default function ProductsGridView(props: ProductsViewProps) {
-  const { products, productPrices, pagination, children } = props;
+	const { products, productPrices, pagination, children } = props;
 
-  return (
-    <ProductsViewContext.Provider value={{ products, productPrices }}>
-      <Grid container spacing={3}>
-        {children}
-      </Grid>
-      <FlexBetween flexWrap="wrap" mt={6}>
-        {pagination}
-      </FlexBetween>
-    </ProductsViewContext.Provider>
-  );
+	return (
+		<ProductsViewContext.Provider value={{ products, productPrices }}>
+			<Grid container spacing={3}>
+				{children}
+			</Grid>
+			<FlexBetween flexWrap="wrap" mt={6}>
+				{pagination}
+			</FlexBetween>
+		</ProductsViewContext.Provider>
+	);
 }
 
 /**
@@ -51,27 +52,35 @@ export default function ProductsGridView(props: ProductsViewProps) {
  *
  */
 ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
-  const { products, productPrices } = useProductsView();
+	const { products, productPrices } = useProductsView();
 
-  return (
-    <>
-      {products.map((product: Product, i) => {
-        const matchingPrice = productPrices?.find(
-          (price) => price.ProductId === product.RecordId,
-        );
-        return cloneElement(children, {
-          key: i,
-          product: product,
-          price: matchingPrice,
-        });
-      })}
-    </>
-  );
+	return (
+		<>
+			{products.map((product, i) => {
+				const matchingPrice = productPrices?.find(
+					(price) => price.ProductId === product.RecordId,
+				);
+
+				return (
+					<ProductsViewCardContext.Provider
+						key={product.RecordId ?? product.ItemId ?? i}
+						value={{ price: matchingPrice, product }}
+					>
+						{cloneElement(children, {
+							key: i,
+							product: product,
+							price: matchingPrice,
+						})}
+					</ProductsViewCardContext.Provider>
+				);
+			})}
+		</>
+	);
 };
 
 export interface ProductCardProps {
-  product?: Product;
-  price?: ProductPrice;
+	product?: Product;
+	price?: ProductPrice;
 }
 /**
  * Individual product card component displayed in the grid.
@@ -80,39 +89,39 @@ export interface ProductCardProps {
  * @category Sub-Component
  */
 ProductsGridView.Card = ({ product, price }: ProductCardProps) => {
-  if (!product) return null;
-  return (
-    <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={product.ItemId}>
-      <ProductCardPlp
-        key={product.RecordId}
-        product={{
-          title: product.Name ?? "",
-          slug: product.ItemId ?? "",
-          price: price?.CustomerContextualPrice ?? 0,
-          imgUrl: product.PrimaryImageUrl ?? "",
-          rating: product.TotalRatings ?? 0,
-          discount: 0, // Need to get discount info for product.
-          id: product.RecordId,
-        }}
-      >
-        <ProductCardPlp.ImageWrapper>
-          <ProductCardPlp.Image />
-          <ProductCardPlp.HoverActions>
-            <ProductCardPlp.QuickViewButton />
-            <ProductCardPlp.FavoriteButton />
-          </ProductCardPlp.HoverActions>
-        </ProductCardPlp.ImageWrapper>
-        <ProductCardPlp.Body>
-          <ProductCardPlp.Info>
-            <ProductCardPlp.Title />
-            <ProductCardPlp.Rating />
-            <ProductCardPlp.Price />
-          </ProductCardPlp.Info>
-          {/* <ProductCardPlp.Actions>
+	if (!product) return null;
+	return (
+		<Grid size={{ lg: 4, sm: 6, xs: 12 }} key={product.ItemId}>
+			<ProductCardPlp
+				key={product.RecordId}
+				product={{
+					title: product.Name ?? "",
+					slug: product.ItemId ?? "",
+					price: price?.CustomerContextualPrice ?? 0,
+					imgUrl: product.PrimaryImageUrl ?? "",
+					rating: product.TotalRatings ?? 0,
+					discount: 0, // Need to get discount info for product.
+					id: product.RecordId,
+				}}
+			>
+				<ProductCardPlp.ImageWrapper>
+					<ProductCardPlp.Image />
+					<ProductCardPlp.HoverActions>
+						<ProductCardPlp.QuickViewButton />
+						<ProductCardPlp.FavoriteButton />
+					</ProductCardPlp.HoverActions>
+				</ProductCardPlp.ImageWrapper>
+				<ProductCardPlp.Body>
+					<ProductCardPlp.Info>
+						<ProductCardPlp.Title />
+						<ProductCardPlp.Rating />
+						<ProductCardPlp.Price />
+					</ProductCardPlp.Info>
+					{/* <ProductCardPlp.Actions>
             <ProductCardPlp.QuantityButtons />
           </ProductCardPlp.Actions> */}
-        </ProductCardPlp.Body>
-      </ProductCardPlp>
-    </Grid>
-  );
+				</ProductCardPlp.Body>
+			</ProductCardPlp>
+		</Grid>
+	);
 };

package/src/components-v2/products-view/compound/products-list-view.tsx

@@ -5,12 +5,12 @@ import { cloneElement } from "react";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
 import { ProductCardPlpList } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/index";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
+import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import {
-  ProductsViewContext,
-  useProductsView,
+	ProductsViewContext,
+	useProductsView,
 } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
 import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
 
@@ -18,16 +18,16 @@ import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2
  * Root component of the ProductsListView.
  */
 export default function ProductsListView(props: ProductsViewProps) {
-  const { pagination, products, productPrices, children } = props;
-
-  return (
-    <ProductsViewContext.Provider value={{ products, productPrices }}>
-      {children}
-      <FlexBetween flexWrap="wrap" mt={4}>
-        {pagination}
-      </FlexBetween>
-    </ProductsViewContext.Provider>
-  );
+	const { pagination, products, productPrices, children } = props;
+	console.log(props);
+	return (
+		<ProductsViewContext.Provider value={{ products, productPrices }}>
+			{children}
+			<FlexBetween flexWrap="wrap" mt={4}>
+				{pagination}
+			</FlexBetween>
+		</ProductsViewContext.Provider>
+	);
 }
 
 /**
@@ -38,31 +38,31 @@ export default function ProductsListView(props: ProductsViewProps) {
  *
  */
 ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
-  const { products, productPrices } = useProductsView();
-  return (
-    <>
-      {products.map((item: Product, i) => {
-        const matchingPrice = productPrices?.find(
-          (price) => price.ProductId === item.RecordId,
-        );
-        // Legacy API, consider alternatives.
-        // Using this to pass props to child.
-        return cloneElement(children, {
-          key: i,
-          product: item,
-          price: matchingPrice,
-        });
-      })}
-    </>
-  );
+	const { products, productPrices } = useProductsView();
+	return (
+		<>
+			{products.map((item: Product, i) => {
+				const matchingPrice = productPrices?.find(
+					(price) => price.ProductId === item.RecordId,
+				);
+				// Legacy API, consider alternatives.
+				// Using this to pass props to child.
+				return cloneElement(children, {
+					key: i,
+					product: item,
+					price: matchingPrice,
+				});
+			})}
+		</>
+	);
 };
 
 /**
  * @category Props
  */
 export interface ProductCardProps {
-  product?: Product;
-  price?: ProductPrice;
+	product?: Product;
+	price?: ProductPrice;
 }
 
 /**
@@ -72,36 +72,36 @@ export interface ProductCardProps {
  * @category Sub-Component
  */
 ProductsListView.Card = ({ product, price }: ProductCardProps) => {
-  if (!product) return null;
-  return (
-    <ProductCardPlpList
-      key={product.RecordId}
-      product={{
-        id: product.RecordId,
-        title: product.Name ?? "",
-        slug: product.ItemId ?? "",
-        price: price?.CustomerContextualPrice ?? 0,
-        imgUrl: product.PrimaryImageUrl ?? "",
-        rating: product.TotalRatings ?? 0,
-        discount: 0, // Need to get discount info for product.,
-        //tags: ["Bike", "Motor", "Ducati"], // Example tags
-      }}
-    >
-      <ProductCardPlpList.QuickViewButton />
-      <ProductCardPlpList.Body>
-        <ProductCardPlpList.Image />
-        <ProductCardPlpList.Content>
-          <ProductCardPlpList.Info>
-            <ProductCardPlpList.Title />
-            <ProductCardPlpList.Price />
-            <ProductCardPlpList.Rating />
-          </ProductCardPlpList.Info>
-          <ProductCardPlpList.Actions>
-            <ProductCardPlpList.FavoriteButton />
-            {/* <ProductCardPlpList.QuantityButtons /> */}
-          </ProductCardPlpList.Actions>
-        </ProductCardPlpList.Content>
-      </ProductCardPlpList.Body>
-    </ProductCardPlpList>
-  );
+	if (!product) return null;
+	return (
+		<ProductCardPlpList
+			key={product.RecordId}
+			product={{
+				id: product.RecordId,
+				title: product.Name ?? "",
+				slug: product.ItemId ?? "",
+				price: price?.CustomerContextualPrice ?? 0,
+				imgUrl: product.PrimaryImageUrl ?? "",
+				rating: product.TotalRatings ?? 0,
+				discount: 0, // Need to get discount info for product.,
+				//tags: ["Bike", "Motor", "Ducati"], // Example tags
+			}}
+		>
+			<ProductCardPlpList.QuickViewButton />
+			<ProductCardPlpList.Body>
+				<ProductCardPlpList.Image />
+				<ProductCardPlpList.Content>
+					<ProductCardPlpList.Info>
+						<ProductCardPlpList.Title />
+						<ProductCardPlpList.Price />
+						<ProductCardPlpList.Rating />
+					</ProductCardPlpList.Info>
+					<ProductCardPlpList.Actions>
+						<ProductCardPlpList.FavoriteButton />
+						{/* <ProductCardPlpList.QuantityButtons /> */}
+					</ProductCardPlpList.Actions>
+				</ProductCardPlpList.Content>
+			</ProductCardPlpList.Body>
+		</ProductCardPlpList>
+	);
 };

package/src/components-v2/products-view/compound/types.ts

@@ -6,7 +6,7 @@ import { PropsWithChildren, ReactNode } from "react";
  * @category Props
  */
 export interface ProductsViewProps
-  extends ProductsViewContext,
-    PropsWithChildren {
-  pagination?: ReactNode;
+	extends ProductsViewContext,
+		PropsWithChildren {
+	pagination?: ReactNode;
 }

package/src/components-v2/products-view/index.tsx

@@ -3,30 +3,31 @@ import ProductsGridView from "@evenicanpm/storefront-core/src/components-v2/prod
 import ProductsListView from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/products-list-view";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
+import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 
 export interface Props {
-  /** List of products to display */
-  products: Product[];
-  /** Pagination component */
-  pagination?: ReactNode;
-  /** Array of product pricing */
-  productPrices?: ProductPrice[];
+	/** List of products to display */
+	products: Product[];
+	/** Pagination component */
+	pagination?: ReactNode;
+	/** Array of product pricing */
+	productPrices?: ProductPrice[];
 }
 
 /**
  *
  * Pre-composed implementation of ProductGrid
+ * TODO: Add Pagination to storybook
  *
  */
 export function ProductsGrid(props: Props) {
-  return (
-    <ProductsGridView {...props}>
-      <ProductsGridView.Grid>
-        <ProductsGridView.Card />
-      </ProductsGridView.Grid>
-    </ProductsGridView>
-  );
+	return (
+		<ProductsGridView {...props}>
+			<ProductsGridView.Grid>
+				<ProductsGridView.Card />
+			</ProductsGridView.Grid>
+		</ProductsGridView>
+	);
 }
 
 /**
@@ -35,11 +36,11 @@ export function ProductsGrid(props: Props) {
  *
  */
 export function ProductsList(props: Props) {
-  return (
-    <ProductsListView {...props}>
-      <ProductsListView.List>
-        <ProductsListView.Card />
-      </ProductsListView.List>
-    </ProductsListView>
-  );
+	return (
+		<ProductsListView {...props}>
+			<ProductsListView.List>
+				<ProductsListView.Card />
+			</ProductsListView.List>
+		</ProductsListView>
+	);
 }

package/src/components-v2/progress/ProgressBar.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ProgressBar from "./index";
+import NProgress from "nprogress";
+import { Button, Box, Typography, Link as MUILink } from "@mui/material";
+
+const meta: Meta<typeof ProgressBar> = {
+	title: "Utility/ProgressBar",
+	component: ProgressBar,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+// Default demo with links
+export const Default: Story = {
+	render: () => (
+		<>
+			<ProgressBar />
+			<Box sx={{ p: 3 }}>
+				<Typography variant="h5" gutterBottom>
+					Default ProgressBar Demo
+				</Typography>
+				<Typography variant="body2" paragraph>
+					Clicking these links will trigger NProgress automatically:
+				</Typography>
+				<ul>
+					<li>
+						<MUILink href="#page1">Go to Page 1</MUILink>
+					</li>
+					<li>
+						<MUILink href="#page2">Go to Page 2</MUILink>
+					</li>
+					<li>
+						<MUILink href="https://google.com" target="_blank" rel="noreferrer">
+							External Link
+						</MUILink>
+					</li>
+				</ul>
+			</Box>
+		</>
+	),
+};
+
+// Manual trigger with buttons
+export const ManualTrigger: Story = {
+	render: () => (
+		<>
+			<ProgressBar />
+			<Box sx={{ p: 3 }}>
+				<Typography variant="h5" gutterBottom>
+					Manual Trigger Demo
+				</Typography>
+				<Typography variant="body2" paragraph>
+					Use buttons below to start and complete the progress bar manually.
+				</Typography>
+				<Box sx={{ display: "flex", gap: 2 }}>
+					<Button variant="contained" onClick={() => NProgress.start()}>
+						Start
+					</Button>
+					<Button
+						variant="outlined"
+						color="success"
+						onClick={() => NProgress.done()}
+					>
+						Done
+					</Button>
+				</Box>
+			</Box>
+		</>
+	),
+};
+
+// Custom style demo
+export const CustomStyled: Story = {
+	render: () => (
+		<>
+			<ProgressBar />
+			<Box sx={{ p: 3 }}>
+				<Typography variant="h5" gutterBottom>
+					Custom Styled ProgressBar
+				</Typography>
+				<Typography variant="body2" paragraph>
+					This story demonstrates triggering NProgress with custom behavior.
+				</Typography>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={() => {
+						NProgress.start();
+						setTimeout(() => NProgress.done(), 2000);
+					}}
+				>
+					Run Example
+				</Button>
+			</Box>
+			<style>
+				{`
+          #nprogress .bar {
+            height: 6px !important;
+            background: linear-gradient(to right, #8e2de2, #4a00e0) !important;
+          }
+        `}
+			</style>
+		</>
+	),
+};

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

@@ -9,69 +9,69 @@ import GlobalStyles from "@mui/material/GlobalStyles";
 import "nprogress/nprogress.css";
 
 type PushStateInput = [
-  data: string,
-  unused: string,
-  url?: string | URL | null | undefined,
+	data: string,
+	unused: string,
+	url?: string | URL | null | undefined,
 ];
 
 export default function ProgressBar() {
-  const theme = useTheme();
+	const theme = useTheme();
 
-  useEffect(() => {
-    NProgress.configure({ showSpinner: false });
+	useEffect(() => {
+		NProgress.configure({ showSpinner: false });
 
-    const handleAnchorClick = (event: Event) => {
-      const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
-      const currentUrl = location.href;
-      if (targetUrl !== currentUrl) {
-        NProgress.start();
-      }
-    };
+		const handleAnchorClick = (event: Event) => {
+			const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
+			const currentUrl = location.href;
+			if (targetUrl !== currentUrl) {
+				NProgress.start();
+			}
+		};
 
-    const handleMutation: MutationCallback = () => {
-      const anchorElements = document.querySelectorAll("a[href]");
-      anchorElements.forEach((anchor) =>
-        anchor.addEventListener("click", handleAnchorClick),
-      );
-    };
+		const handleMutation: MutationCallback = () => {
+			const anchorElements = document.querySelectorAll("a[href]");
+			anchorElements.forEach((anchor) =>
+				anchor.addEventListener("click", handleAnchorClick),
+			);
+		};
 
-    const mutationObserver = new MutationObserver(handleMutation);
-    mutationObserver.observe(document, { childList: true, subtree: true });
+		const mutationObserver = new MutationObserver(handleMutation);
+		mutationObserver.observe(document, { childList: true, subtree: true });
 
-    window.history.pushState = new Proxy(window.history.pushState, {
-      apply: (target, thisArg, argArray: PushStateInput) => {
-        NProgress.done();
-        return target.apply(thisArg, argArray);
-      },
-    });
-  });
+		window.history.pushState = new Proxy(window.history.pushState, {
+			apply: (target, thisArg, argArray: PushStateInput) => {
+				NProgress.done();
+				return target.apply(thisArg, argArray);
+			},
+		});
+	});
 
-  return (
-    <GlobalStyles
-      styles={{
-        "#nprogress": {
-          pointerEvents: "none",
-          ".bar": {
-            top: 0,
-            left: 0,
-            height: 2,
-            width: "100%",
-            position: "fixed",
-            zIndex: 9999999999,
-            background: theme.palette.primary.main,
-          },
-          ".peg": {
-            right: 0,
-            opacity: 1,
-            width: 100,
-            height: "100%",
-            display: "block",
-            boxShadow: "none",
-            position: "absolute",
-            transform: "rotate(3deg) translate(0px, -4px)",
-          },
-        },
-      }}
-    />
-  );
+	return (
+		<GlobalStyles
+			styles={{
+				"#nprogress": {
+					pointerEvents: "none",
+					".bar": {
+						top: 0,
+						left: 0,
+						height: 2,
+						width: "100%",
+						position: "fixed",
+						zIndex: 9999999999,
+						background: theme.palette.primary.main,
+					},
+					".peg": {
+						right: 0,
+						opacity: 1,
+						width: 100,
+						height: "100%",
+						display: "block",
+						boxShadow: "none",
+						position: "absolute",
+						transform: "rotate(3deg) translate(0px, -4px)",
+					},
+				},
+			}}
+		/>
+	);
 }