@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components-v2/product-dialog/compound/product-dialog.tsx

@@ -13,10 +13,10 @@ import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel
 import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import {
-  H2,
-  Paragraph,
-  H1,
-  H6,
+	H2,
+	Paragraph,
+	H1,
+	H6,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
 import QuantityVariantsSelect from "@evenicanpm/storefront-core/src/components-v2/product-quantity-variants";
@@ -28,29 +28,48 @@ import { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/sche
  * @category Props
  */
 interface Props {
-  productId: number;
-  openDialog: boolean;
-  cartId?: string;
-  handleCloseDialog?: () => void;
-  children: ReactElement;
+	productId: number;
+	openDialog: boolean;
+	cartId?: string;
+	handleCloseDialog?: () => void;
+	children: ReactElement;
 }
 
 /**
  * @category Context
  */
 interface ProductDialogContext {
-  /** the product details object that is return from getProductById */
-  product: ProductDetails;
-  /* is dialog open? */
-  openDialog: boolean;
-  /** close dialog handler */
-  handleCloseDialog?: () => void;
+	/** the product details object that is return from getProductById */
+	product: ProductDetails;
+	/* is dialog open? */
+	openDialog: boolean;
+	/** close dialog handler */
+	handleCloseDialog?: () => void;
 }
 
 /**
  * @internal
  */
-export const ProductDialogContext = createContext(null);
+export const ProductDialogContext = createContext<ProductDialogContext | null>(
+	null,
+);
+
+/**
+ * Hook to safely access ProductDialogContext
+ * @throws When used outside of ProductDialogProvider
+ * @returns The product dialog context value
+ */
+export const useProductDialog = () => {
+	const context = useContext(ProductDialogContext);
+
+	if (context === null) {
+		throw new Error(
+			"useProductDialog must be used within a ProductDialogProvider",
+		);
+	}
+
+	return context;
+};
 
 /**
  * @category Compound Component
@@ -69,165 +88,170 @@ export const ProductDialogContext = createContext(null);
  *   </ProductViewDialog>
  */
 export default function ProductDialog(props: Props) {
-  const { children, openDialog, handleCloseDialog } = props;
-  const { data: product, isPending } = getProductById.useData({
-    id: Number(props.productId),
-  });
-  if (isPending) return null;
-  return (
-    <ProductDialogContext.Provider
-      value={{ product, openDialog, handleCloseDialog }}
-    >
-      <Dialog
-        open={openDialog}
-        maxWidth={false}
-        onClose={handleCloseDialog}
-        sx={{ zIndex: 1501 }}
-      >
-        <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
-          {children}
-        </DialogContent>
-      </Dialog>
-    </ProductDialogContext.Provider>
-  );
+	const { children, openDialog, handleCloseDialog } = props;
+	const { data: product } = getProductById.useSuspenseData({
+		id: Number(props.productId),
+	});
+	if (!product) return null;
+	return (
+		<ProductDialogContext.Provider
+			value={{ product, openDialog, handleCloseDialog }}
+		>
+			<Dialog
+				open={openDialog}
+				maxWidth={false}
+				onClose={handleCloseDialog}
+				sx={{ zIndex: 1501 }}
+			>
+				{children}
+			</Dialog>
+		</ProductDialogContext.Provider>
+	);
 }
 
 /**
  * @category Sub-Component
  */
 export const ProductDialogContent = ({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) => {
-  const { handleCloseDialog } = useContext(ProductDialogContext);
-
-  return (
-    <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
-      <div>
-        <Grid container spacing={3}>
-          {children}
-        </Grid>
-      </div>
-      <IconButton
-        sx={{ position: "absolute", top: 3, right: 3 }}
-        onClick={handleCloseDialog}
-      >
-        <Close fontSize="small" color="secondary" />
-      </IconButton>
-    </DialogContent>
-  );
+	const { handleCloseDialog } = useProductDialog();
+
+	return (
+		<DialogContent
+			sx={{ maxWidth: 900, width: "100%" }}
+			onClick={(e) => e.stopPropagation()}
+		>
+			<div>
+				<Grid container spacing={3}>
+					{children}
+				</Grid>
+			</div>
+			<IconButton
+				sx={{ position: "absolute", top: 3, right: 3 }}
+				onClick={(e) => {
+					e.stopPropagation();
+					handleCloseDialog?.();
+				}}
+			>
+				<Close fontSize="small" color="secondary" />
+			</IconButton>
+		</DialogContent>
+	);
 };
 
 /**
  * @category Sub-Component
  */
 export const ProductDialogContentImages = () => {
-  const { product } = useContext(ProductDialogContext);
-
-  return (
-    <Grid size={{ md: 6, xs: 12 }}>
-      <Carousel
-        slidesToShow={1}
-        arrowStyles={{
-          boxShadow: 0,
-          color: "primary.main",
-          backgroundColor: "transparent",
-        }}
-      >
-        {product?.Images.map((item: string, index: number) => (
-          <BazaarImage
-            key={index}
-            src={item}
-            alt="product"
-            sx={{
-              mx: "auto",
-              width: "100%",
-              objectFit: "contain",
-              height: { sm: 400, xs: 250 },
-            }}
-          />
-        ))}
-      </Carousel>
-    </Grid>
-  );
+	const { product } = useProductDialog();
+
+	return (
+		<Grid size={{ md: 6, xs: 12 }}>
+			<Carousel
+				slidesToShow={1}
+				infinite={false}
+				arrowStyles={{
+					boxShadow: 0,
+					color: "primary.main",
+					backgroundColor: "transparent",
+				}}
+			>
+				{product?.Images?.map((item: string, index: number) => (
+					<BazaarImage
+						key={index}
+						src={item}
+						alt="product"
+						sx={{
+							mx: "auto",
+							width: "100%",
+							objectFit: "contain",
+							height: { sm: 400, xs: 250 },
+						}}
+					/>
+				))}
+			</Carousel>
+		</Grid>
+	);
 };
 
 /**
  * @category Sub-Component
  */
 export const ProductDialogContentInfo = ({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) => {
-  return (
-    <Grid size={{ md: 6, xs: 12 }} alignSelf="center">
-      {children}
-    </Grid>
-  );
+	return (
+		<Grid size={{ md: 6, xs: 12 }} alignSelf="center">
+			{children}
+		</Grid>
+	);
 };
 
 /**
  * @category Sub-Component
  */
 export const InfoName = () => {
-  const { product } = useContext(ProductDialogContext);
-  return <H2>{product?.Name}</H2>;
+	const { product } = useProductDialog();
+	return <H2>{product?.Name}</H2>;
 };
 
 /**
  * @category Sub-Component
  */
 export const InfoCategory = () => {
-  return (
-    <Paragraph py={1} color="grey.500" fontWeight={600} fontSize={13}>
-      CATEGORY
-    </Paragraph>
-  );
+	return (
+		<Paragraph py={1} color="grey.500" fontWeight={600} fontSize={13}>
+			CATEGORY
+		</Paragraph>
+	);
 };
 
 /**
  * @category Sub-Component
  */
 export const InfoPrice = () => {
-  const { product } = useContext(ProductDialogContext);
-  return <H1 color="primary.main">{currency(product?.Price)}</H1>;
+	const { product } = useProductDialog();
+	return <H1 color="primary.main">{currency(product?.Price)}</H1>;
 };
 
 /**
  * @category Sub-Component
  */
 export const InfoDescription = () => {
-  const { product } = useContext(ProductDialogContext);
-  return <Paragraph my={2}>{product?.Description}</Paragraph>;
+	const { product } = useProductDialog();
+	return <Paragraph my={2}>{product?.Description}</Paragraph>;
 };
 
 /**
  * @category Sub-Component
  */
 export const InfoRating = () => {
-  return (
-    <FlexBox alignItems="center" gap={1} mt={1}>
-      <Rating color="warn" value={4} readOnly />
-      <H6 lineHeight="1">(50)</H6>
-    </FlexBox>
-  );
+	return (
+		<FlexBox alignItems="center" gap={1} mt={1}>
+			<Rating color="warn" value={4} readOnly />
+			<H6 lineHeight="1">(50)</H6>
+		</FlexBox>
+	);
 };
 
 /**
  * @category Sub-Component
  */
 export const InfoAddToCart = () => {
-  const { product } = useContext(ProductDialogContext);
-  return (
-    <>
-      <Divider sx={{ mb: 2 }} />
-      <FlexBox alignItems="center">
-        <QuantityVariantsSelect product={product} />
-      </FlexBox>
-    </>
-  );
+	const { product } = useProductDialog();
+	return (
+		<>
+			<Divider sx={{ mb: 2 }} />
+			<FlexBox alignItems="center">
+				<QuantityVariantsSelect product={product} />
+			</FlexBox>
+		</>
+	);
 };
 
 ProductDialog.Content = ProductDialogContent;

package/src/components-v2/product-dialog/index.tsx

@@ -2,27 +2,27 @@
 import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog/compound/product-dialog";
 
 interface Props {
-  productId: number;
-  openDialog: boolean;
-  handleCloseDialog?: () => void;
+	productId: number;
+	openDialog: boolean;
+	handleCloseDialog?: () => void;
 }
 
 /**
  * @category Composed Component
  */
 export default function ProductDialog(props: Props) {
-  return (
-    <ProductViewDialog {...props}>
-      <ProductViewDialog.Content>
-        <ProductViewDialog.Content.Images />
-        <ProductViewDialog.Content.Info>
-          <ProductViewDialog.Content.Info.Name />
-          <ProductViewDialog.Content.Info.Category />
-          <ProductViewDialog.Content.Info.Description />
-          <ProductViewDialog.Content.Info.Rating />
-          <ProductViewDialog.Content.Info.AddToCart />
-        </ProductViewDialog.Content.Info>
-      </ProductViewDialog.Content>
-    </ProductViewDialog>
-  );
+	return (
+		<ProductViewDialog {...props}>
+			<ProductViewDialog.Content>
+				<ProductViewDialog.Content.Images />
+				<ProductViewDialog.Content.Info>
+					<ProductViewDialog.Content.Info.Name />
+					<ProductViewDialog.Content.Info.Category />
+					<ProductViewDialog.Content.Info.Description />
+					<ProductViewDialog.Content.Info.Rating />
+					<ProductViewDialog.Content.Info.AddToCart />
+				</ProductViewDialog.Content.Info>
+			</ProductViewDialog.Content>
+		</ProductViewDialog>
+	);
 }

package/src/components-v2/product-dimensions/Dimensions.stories.tsx

@@ -0,0 +1,34 @@
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { data, product } from "./__mocks__/data";
+import { Dimensions } from "./compound/dimensions";
+import useVariants from "../../hooks/use-variants";
+
+const meta = {
+	title: "Product/Dimensions",
+	component: Dimensions,
+	tags: ["autodocs"],
+} satisfies Meta<typeof Dimensions>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive = () => {
+	const { handleChangeVariant, selectDimensions } = useVariants(product);
+	return (
+		<Dimensions
+			dimensionGroups={data.dimensionGroups}
+			selectDimensions={selectDimensions}
+			handleChangeVariant={handleChangeVariant}
+			showDimensionError={true}
+		>
+			{data.dimensionGroups.map((group, i) => (
+				<Dimensions.Group dimensions={group}>
+					<Dimensions.Group.Label />
+					<Dimensions.Group.List />
+				</Dimensions.Group>
+			))}
+		</Dimensions>
+	);
+};