@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/pages-v2/product-list/facet.tsx

@@ -1,36 +1,64 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import { Box, Divider } from "@mui/material";
+import FacetGroup from "@evenicanpm/storefront-core/src/pages/product-list/facet-group";
 import {
-  ProductRefiner,
-  ProductRefinerValue,
+	ProductRefiner,
+	ProductRefinerValue,
 } from "@msdyn365-commerce/retail-proxy";
-import React from "react";
-import FacetGroup from "./facet-group";
-import { Box, Divider } from "@mui/material";
 
-type Props = {
-  facets: ProductRefiner[];
-  selectedRefiners: ProductRefinerValue[];
-  handleRefinerSelect(refiner: ProductRefinerValue): void;
+type Ctx = {
+	facets: ProductRefiner[];
+	selectedRefiners: ProductRefinerValue[];
+	onSelect: (r: ProductRefinerValue) => void;
+};
+const FacetContext = createContext<Ctx | null>(null);
+const useFacet = () => {
+	const ctx = useContext(FacetContext);
+	if (!ctx) throw new Error("Facet.* must be used within <Facet />");
+	return ctx;
+};
+
+type RootProps = {
+	facets: ProductRefiner[];
+	selectedRefiners: ProductRefinerValue[];
+	onSelect: (r: ProductRefinerValue) => void;
+	children?: React.ReactNode;
+};
+type FacetType = React.FC<RootProps> & {
+	Groups: React.FC;
+};
+
+const Facet: FacetType = (({
+	facets,
+	selectedRefiners,
+	onSelect,
+	children,
+}: RootProps) => {
+	return (
+		<FacetContext.Provider value={{ facets, selectedRefiners, onSelect }}>
+			{children ?? <Facet.Groups />}
+		</FacetContext.Provider>
+	);
+}) as FacetType;
+
+Facet.Groups = function Groups() {
+	const { facets, selectedRefiners, onSelect } = useFacet();
+	return (
+		<div>
+			{facets.map((facet, index) => (
+				<Box key={facet.KeyName ?? index}>
+					<FacetGroup
+						facet={facet}
+						selectedRefiners={selectedRefiners}
+						handleRefinerSelect={onSelect}
+					/>
+					{index < facets.length - 1 && <Divider />}
+				</Box>
+			))}
+		</div>
+	);
 };
 
-export default function Facet({
-  facets,
-  selectedRefiners,
-  handleRefinerSelect,
-}: Props) {
-  return (
-    <div>
-      {facets.map((facetGroup, index) => {
-        return (
-          <Box key={facetGroup.KeyName}>
-            <FacetGroup
-              facet={facetGroup}
-              selectedRefiners={selectedRefiners}
-              handleRefinerSelect={handleRefinerSelect}
-            />
-            {index < facets.length - 1 && <Divider />}
-          </Box>
-        );
-      })}
-    </div>
-  );
-}
+export default Facet;

package/src/pages-v2/product-list/list-filter.tsx

@@ -2,8 +2,8 @@ import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
 import React from "react";
 import CheckboxLabel from "./checkbox-label";
 import {
-  FlexBetween,
-  FlexBox,
+	FlexBetween,
+	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { RenderedFacetProps } from "./facet-group";
@@ -11,33 +11,33 @@ import { RenderedFacetProps } from "./facet-group";
 type Props = RenderedFacetProps & NonNullable<unknown>;
 
 const generateKey = (f: ProductRefinerValue) => {
-  return `${f.LeftValueBoundString}-${f.RefinerRecordId}`;
+	return `${f.LeftValueBoundString}-${f.RefinerRecordId}`;
 };
 
 export default function ListFilter({
-  facet,
-  handleRefinerSelect,
-  isRefinerSelected,
+	facet,
+	handleRefinerSelect,
+	isRefinerSelected,
 }: Props) {
-  const createFacetLabel = (f: ProductRefinerValue) => {
-    const label = f.LeftValueBoundLocalizedString || f.LeftValueBoundString;
-    return (
-      <FlexBetween>
-        <Span>{label}</Span>
-        <Span ml={2}>({f.Count})</Span>
-      </FlexBetween>
-    );
-  };
-  return (
-    <FlexBox flexDirection="column" pl={1}>
-      {facet.Values?.map((f) => (
-        <CheckboxLabel
-          key={generateKey(f)}
-          label={createFacetLabel(f)}
-          checked={isRefinerSelected(f)}
-          onChange={() => handleRefinerSelect(f)}
-        />
-      ))}
-    </FlexBox>
-  );
+	const createFacetLabel = (f: ProductRefinerValue) => {
+		const label = f.LeftValueBoundLocalizedString || f.LeftValueBoundString;
+		return (
+			<FlexBetween>
+				<Span>{label}</Span>
+				<Span ml={2}>({f.Count})</Span>
+			</FlexBetween>
+		);
+	};
+	return (
+		<FlexBox flexDirection="column" pl={1}>
+			{facet.Values?.map((f) => (
+				<CheckboxLabel
+					key={generateKey(f)}
+					label={createFacetLabel(f)}
+					checked={isRefinerSelected(f)}
+					onChange={() => handleRefinerSelect(f)}
+				/>
+			))}
+		</FlexBox>
+	);
 }

package/src/pages-v2/product-list/pagination.tsx

@@ -5,76 +5,76 @@ import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
 
 export interface PageInfo {
-  top?: number;
-  skip?: number;
-  search?: string;
-  sort?: string;
-  sortDesc?: boolean;
-  startCursor?: string;
-  endCursor?: string;
-  hasNextPage?: boolean;
-  hasPreviousPage?: boolean;
-  currentPage?: number;
-  after?: string;
-  before?: string;
-  // filter?: any;
+	top?: number;
+	skip?: number;
+	search?: string;
+	sort?: string;
+	sortDesc?: boolean;
+	startCursor?: string;
+	endCursor?: string;
+	hasNextPage?: boolean;
+	hasPreviousPage?: boolean;
+	currentPage?: number;
+	after?: string;
+	before?: string;
+	// filter?: any;
 }
 interface Props extends PaginationProps {
-  recordCount: number;
-  pageInfo: PageInfo;
-  handleChange: (filter: PageInfo) => void;
+	recordCount: number;
+	pageInfo: PageInfo;
+	handleChange: (filter: PageInfo) => void;
 }
 
 const Pagination = ({ recordCount, pageInfo, handleChange, page }: Props) => {
-  const t = useTranslations("ProductList");
+	const t = useTranslations("ProductList");
 
-  const newPageInfo = {
-    ...pageInfo,
-    top: pageInfo.top ?? 20,
-    skip: pageInfo.skip ?? 0,
-  };
+	const newPageInfo = {
+		...pageInfo,
+		top: pageInfo.top ?? 20,
+		skip: pageInfo.skip ?? 0,
+	};
 
-  // Calculate showing range
-  const start = recordCount === 0 ? 0 : newPageInfo.skip + 1;
-  const end = Math.min(newPageInfo.skip + newPageInfo.top, recordCount);
-  const showingText = t("showingRange", {
-    start,
-    end,
-    total: recordCount,
-  });
+	// Calculate showing range
+	const start = recordCount === 0 ? 0 : newPageInfo.skip + 1;
+	const end = Math.min(newPageInfo.skip + newPageInfo.top, recordCount);
+	const showingText = t("showingRange", {
+		start,
+		end,
+		total: recordCount,
+	});
 
-  // Calculate page count
-  let newCount = Math.floor(recordCount / newPageInfo.top);
-  if (recordCount === 0) {
-    newCount = 1;
-  } else if (recordCount % newPageInfo.top !== 0) {
-    newCount += 1;
-  }
+	// Calculate page count
+	let newCount = Math.floor(recordCount / newPageInfo.top);
+	if (recordCount === 0) {
+		newCount = 1;
+	} else if (recordCount % newPageInfo.top !== 0) {
+		newCount += 1;
+	}
 
-  const handleMuiPaginationChange = (
-    _event: ChangeEvent<unknown>,
-    newPage: number,
-  ) => {
-    const skip = newPageInfo.top * (newPage - 1);
-    handleChange({
-      ...newPageInfo,
-      currentPage: newPage,
-      skip,
-    });
-  };
+	const handleMuiPaginationChange = (
+		_event: ChangeEvent<unknown>,
+		newPage: number,
+	) => {
+		const skip = newPageInfo.top * (newPage - 1);
+		handleChange({
+			...newPageInfo,
+			currentPage: newPage,
+			skip,
+		});
+	};
 
-  return (
-    <>
-      <Span color="grey.600">{showingText}</Span>
-      <MuiPagination
-        color="primary"
-        variant="outlined"
-        count={newCount}
-        page={page}
-        onChange={handleMuiPaginationChange}
-      />
-    </>
-  );
+	return (
+		<>
+			<Span color="grey.600">{showingText}</Span>
+			<MuiPagination
+				color="primary"
+				variant="outlined"
+				count={newCount}
+				page={page}
+				onChange={handleMuiPaginationChange}
+			/>
+		</>
+	);
 };
 
 export default Pagination;