@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -4,122 +4,122 @@ import { useState, useEffect } from "react";
 import { Box, Typography, Slider, TextField } from "@mui/material";
 import { RenderedFacetProps } from "./facet-group";
 import {
-  ProductRefinerSource,
-  ProductRefinerValue,
+	ProductRefinerSource,
+	ProductRefinerValue,
 } from "@msdyn365-commerce/retail-proxy";
 import React from "react";
 
 type Props = RenderedFacetProps & {
-  selectedValues?: ProductRefinerValue;
+	selectedValues?: ProductRefinerValue;
 };
 export default function RangeFilter({
-  facet,
-  handleRefinerSelect,
-  selectedValues,
+	facet,
+	handleRefinerSelect,
+	selectedValues,
 }: Props) {
-  const getMinValForSlider = () => {
-    const item = facet.Values?.[0];
-    if (item) {
-      return Number(item.LeftValueBoundString);
-    }
-    return 0;
-  };
+	const getMinValForSlider = () => {
+		const item = facet.Values?.[0];
+		if (item) {
+			return Number(item.LeftValueBoundString);
+		}
+		return 0;
+	};
 
-  const getMaxValForSlider = () => {
-    const item = facet.Values?.[0];
-    if (item) {
-      return Number(item.RightValueBoundString);
-    }
-    return 0;
-  };
-  const [minVal, setMinVal] = useState<number>(getMinValForSlider());
-  const [maxVal, setMaxVal] = useState<number>(getMaxValForSlider());
-  const [textMin, setTextMin] = useState<number>(getMinValForSlider());
-  const [textMax, setTextMax] = useState<number>(getMaxValForSlider());
-  const [selected, setSelected] = useState<boolean>(false);
+	const getMaxValForSlider = () => {
+		const item = facet.Values?.[0];
+		if (item) {
+			return Number(item.RightValueBoundString);
+		}
+		return 0;
+	};
+	const [minVal, setMinVal] = useState<number>(getMinValForSlider());
+	const [maxVal, setMaxVal] = useState<number>(getMaxValForSlider());
+	const [textMin, setTextMin] = useState<number>(getMinValForSlider());
+	const [textMax, setTextMax] = useState<number>(getMaxValForSlider());
+	const [selected, setSelected] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (selectedValues) {
-      setMinVal(Number(selectedValues.LeftValueBoundString));
-      setMaxVal(Number(selectedValues.RightValueBoundString));
-      setTextMin(Number(selectedValues.LeftValueBoundString));
-      setTextMax(Number(selectedValues.RightValueBoundString));
-    } else {
-    }
-  }, [selectedValues]);
+	useEffect(() => {
+		if (selectedValues) {
+			setMinVal(Number(selectedValues.LeftValueBoundString));
+			setMaxVal(Number(selectedValues.RightValueBoundString));
+			setTextMin(Number(selectedValues.LeftValueBoundString));
+			setTextMax(Number(selectedValues.RightValueBoundString));
+		} else {
+		}
+	}, [selectedValues]);
 
-  useEffect(() => {
-    // debouncing
-    const request = setTimeout(pushPriceFilter, 600);
-    return () => clearTimeout(request);
-  });
+	useEffect(() => {
+		// debouncing
+		const request = setTimeout(pushPriceFilter, 600);
+		return () => clearTimeout(request);
+	});
 
-  const handleSliderChange = (_: Event, newValue: number | number[]) => {
-    if (Array.isArray(newValue)) {
-      setMinVal(Number(newValue[0]));
-      setTextMin(Number(newValue[0]));
-      setMaxVal(Number(newValue[1]));
-      setTextMax(Number(newValue[1]));
-      setSelected(true);
-    }
-  };
+	const handleSliderChange = (_: Event, newValue: number | number[]) => {
+		if (Array.isArray(newValue)) {
+			setMinVal(Number(newValue[0]));
+			setTextMin(Number(newValue[0]));
+			setMaxVal(Number(newValue[1]));
+			setTextMax(Number(newValue[1]));
+			setSelected(true);
+		}
+	};
 
-  const handleTextMin = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    const val = Number(evt.target.value);
-    setTextMin(val);
-    setMinVal(val);
-    setSelected(true);
-  };
+	const handleTextMin = (evt: React.ChangeEvent<HTMLInputElement>) => {
+		const val = Number(evt.target.value);
+		setTextMin(val);
+		setMinVal(val);
+		setSelected(true);
+	};
 
-  const handleTextMax = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    const val = Number(evt.target.value);
-    setTextMax(val);
-    setMaxVal(val);
-    setSelected(true);
-  };
+	const handleTextMax = (evt: React.ChangeEvent<HTMLInputElement>) => {
+		const val = Number(evt.target.value);
+		setTextMax(val);
+		setMaxVal(val);
+		setSelected(true);
+	};
 
-  const pushPriceFilter = () => {
-    if (selected) {
-      const refiner: ProductRefinerValue = {
-        RefinerRecordId: 0,
-        RefinerSourceValue: ProductRefinerSource.Price,
-        LeftValueBoundString: minVal.toString(),
-        RightValueBoundString: maxVal.toString(),
-        DataTypeValue: 1,
-      };
-      handleRefinerSelect(refiner);
-    }
-  };
+	const pushPriceFilter = () => {
+		if (selected) {
+			const refiner: ProductRefinerValue = {
+				RefinerRecordId: 0,
+				RefinerSourceValue: ProductRefinerSource.Price,
+				LeftValueBoundString: minVal.toString(),
+				RightValueBoundString: maxVal.toString(),
+				DataTypeValue: 1,
+			};
+			handleRefinerSelect(refiner);
+		}
+	};
 
-  return (
-    <Box mb={3}>
-      <Slider
-        min={getMinValForSlider()}
-        max={getMaxValForSlider()}
-        size="small"
-        value={[minVal, maxVal]}
-        valueLabelDisplay="auto"
-        onChange={handleSliderChange}
-      />
-      <Box display="flex" gap={1} alignItems="center">
-        <TextField
-          fullWidth
-          size="small"
-          type="number"
-          label="Min"
-          value={textMin}
-          onChange={handleTextMin}
-        />
-        <Typography>-</Typography>
-        <TextField
-          fullWidth
-          size="small"
-          type="number"
-          label="Max"
-          value={textMax}
-          onChange={handleTextMax}
-        />
-      </Box>
-    </Box>
-  );
+	return (
+		<Box mb={3}>
+			<Slider
+				min={getMinValForSlider()}
+				max={getMaxValForSlider()}
+				size="small"
+				value={[minVal, maxVal]}
+				valueLabelDisplay="auto"
+				onChange={handleSliderChange}
+			/>
+			<Box display="flex" gap={1} alignItems="center">
+				<TextField
+					fullWidth
+					size="small"
+					type="number"
+					label="Min"
+					value={textMin}
+					onChange={handleTextMin}
+				/>
+				<Typography>-</Typography>
+				<TextField
+					fullWidth
+					size="small"
+					type="number"
+					label="Max"
+					value={textMax}
+					onChange={handleTextMax}
+				/>
+			</Box>
+		</Box>
+	);
 }

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

@@ -7,32 +7,32 @@ import SimpleBar from "simplebar-react";
 
 // =============================================================
 interface ScrollbarProps extends Props {
-  autoHide?: boolean;
-  sx?: SxProps<Theme>;
-  children: ReactNode;
+	autoHide?: boolean;
+	sx?: SxProps<Theme>;
+	children: ReactNode;
 }
 // =============================================================
 
 const StyledScrollBar = styled(SimpleBar)(({ theme }) => ({
-  maxHeight: "100%",
-  "& .simplebar-scrollbar": {
-    "&.simplebar-visible:before": { opacity: 1 },
-    "&:before": { backgroundColor: alpha(theme.palette.grey[400], 0.6) },
-  },
-  "& .simplebar-track.simplebar-vertical": { width: 9 },
-  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": { height: 6 },
-  "& .simplebar-mask": { zIndex: "inherit" },
+	maxHeight: "100%",
+	"& .simplebar-scrollbar": {
+		"&.simplebar-visible:before": { opacity: 1 },
+		"&:before": { backgroundColor: alpha(theme.palette.grey[400], 0.6) },
+	},
+	"& .simplebar-track.simplebar-vertical": { width: 9 },
+	"& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": { height: 6 },
+	"& .simplebar-mask": { zIndex: "inherit" },
 }));
 
 export default function Scrollbar({
-  children,
-  autoHide = true,
-  sx,
-  ...props
+	children,
+	autoHide = true,
+	sx,
+	...props
 }: ScrollbarProps) {
-  return (
-    <StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
-      {children}
-    </StyledScrollBar>
-  );
+	return (
+		<StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
+			{children}
+		</StyledScrollBar>
+	);
 }

package/src/pages-v2/product-list/search-bar.tsx

@@ -1,162 +1,214 @@
 "use client";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import {
-  Box,
-  MenuItem,
-  Typography,
-  ToggleButtonGroup,
-  ToggleButton,
-  TextField,
+	Box,
+	MenuItem,
+	Typography,
+	ToggleButtonGroup,
+	ToggleButton,
+	TextField,
+	IconButton,
 } from "@mui/material";
 import Apps from "@mui/icons-material/Apps";
 import ViewList from "@mui/icons-material/ViewList";
 import FilterList from "@mui/icons-material/FilterList";
-import IconButton from "@mui/material/IconButton";
 import { Theme } from "@mui/material/styles";
-import { ViewMode } from "./utils/product-list-types";
-import useProductList from "./use-product-list";
-import { useTranslations } from "next-intl";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+
+import useProductList from "./use-product-list";
+import { ViewMode } from "./utils/product-list-types";
 import Sidenav from "./side-nav";
-import React from "react";
 
 const sxView = {
-  display: "flex",
-  border: "none",
-  "& button": {
-    border: "none",
-    borderTopRightRadius: "50% !important",
-    borderBottomRightRadius: "50% !important",
-    borderTopLeftRadius: "50% !important",
-    borderBottomLeftRadius: "50% !important",
-  },
+	display: "flex",
+	border: "none",
+	"& button": {
+		border: "none",
+		borderTopRightRadius: "50% !important",
+		borderBottomRightRadius: "50% !important",
+		borderTopLeftRadius: "50% !important",
+		borderBottomLeftRadius: "50% !important",
+	},
 };
 
-interface SearchBarProps {
-  children?: React.ReactNode;
-}
+type Ctx = ReturnType<typeof useProductList> & {
+	downMd: boolean;
+	t: ReturnType<typeof useTranslations<"ProductList.SearchBar">>;
+	mobileFiltersContent: React.ReactNode;
+	setMobileFiltersContent: (n: React.ReactNode) => void;
+};
+const SearchBarContext = createContext<Ctx | null>(null);
+const useSB = () => {
+	const ctx = useContext(SearchBarContext);
+	if (!ctx) throw new Error("SearchBar.* must be used within <SearchBar />");
+	return ctx;
+};
 
-const SearchBar = ({ children }: SearchBarProps) => {
-  const {
-    itemsPerPage,
-    sortOptions,
-    selectedSort,
-    view,
-    paramHandlers: { handleSortChange, handleViewChange, handlePerPageChange },
-  } = useProductList();
-  const t = useTranslations("ProductList.SearchBar");
-  const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("md"));
+type RootProps = { children?: React.ReactNode };
+type SearchBarType = React.FC<RootProps> & {
+	PerPage: React.FC;
+	Sort: React.FC;
+	View: React.FC;
+	MobileFilters: React.FC<{ children?: React.ReactNode }>;
+};
 
-  const handleSelectedOption = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const codeSelection = e.target.value;
-    const optionSelection = sortOptions.find(
-      (option) => option.code === codeSelection,
-    );
-    if (optionSelection !== undefined) {
-      handleSortChange(optionSelection);
-    }
-  };
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      columnGap={4}
-      flexWrap="wrap"
-      justifyContent={downMd ? "flex-start" : "flex-end"}
-    >
-      <Box display="flex" alignItems="center" gap={1} flex="1 1 0" pb={1}>
-        <Typography color="grey.600" whiteSpace="pre">
-          Per page:
-        </Typography>
+const SearchBar: SearchBarType = (({ children }: RootProps) => {
+	const pl = useProductList();
+	const t = useTranslations("ProductList.SearchBar");
+	const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("md"));
 
-        <TextField
-          select
-          fullWidth
-          size="small"
-          value={itemsPerPage}
-          variant="outlined"
-          placeholder="Sort by"
-          onChange={(e) => handlePerPageChange(Number(e.target.value))}
-          sx={{ flex: "1 1 0", minWidth: "150px" }}
-        >
-          <MenuItem value={20}>20</MenuItem>
-          <MenuItem value={50}>50</MenuItem>
-          <MenuItem value={100}>100</MenuItem>
-        </TextField>
-      </Box>
+	const [mobileFiltersContent, setMobileFiltersContent] =
+		useState<React.ReactNode>(null);
 
-      <Box display="flex" alignItems="center" gap={1} flex="1 1 0" pb={1}>
-        <Typography color="grey.600" whiteSpace="pre">
-          Sort by:
-        </Typography>
+	return (
+		<SearchBarContext.Provider
+			value={{
+				...pl,
+				t,
+				downMd,
+				mobileFiltersContent,
+				setMobileFiltersContent,
+			}}
+		>
+			<Box
+				display="flex"
+				alignItems="center"
+				columnGap={4}
+				flexWrap="wrap"
+				justifyContent={downMd ? "flex-start" : "flex-end"}
+			>
+				{children ?? (
+					<>
+						<SearchBar.PerPage />
+						<SearchBar.Sort />
+						<SearchBar.View />
+						<SearchBar.MobileFilters />
+					</>
+				)}
+			</Box>
+		</SearchBarContext.Provider>
+	);
+}) as SearchBarType;
 
-        <TextField
-          select
-          fullWidth
-          size="small"
-          value={selectedSort}
-          variant="outlined"
-          placeholder="Sort by"
-          onChange={handleSelectedOption}
-          sx={{ flex: "1 1 0", minWidth: "150px" }}
-        >
-          {sortOptions.map((option) => (
-            <MenuItem key={option.code} value={option.code}>
-              {option.displayName}
-            </MenuItem>
-          ))}
-        </TextField>
-      </Box>
+SearchBar.PerPage = function PerPage() {
+	const { itemsPerPage, paramHandlers, downMd } = useSB();
+	return (
+		<Box display="flex" alignItems="center" gap={1} flex="1 1 0" pb={1}>
+			<Typography color="grey.600" whiteSpace="pre">
+				Per page:
+			</Typography>
+			<TextField
+				select
+				fullWidth
+				size="small"
+				value={itemsPerPage}
+				variant="outlined"
+				onChange={(e) =>
+					paramHandlers.handlePerPageChange(Number(e.target.value))
+				}
+				sx={{ flex: "1 1 0", minWidth: downMd ? "120px" : "150px" }}
+			>
+				<MenuItem value={20}>20</MenuItem>
+				<MenuItem value={50}>50</MenuItem>
+				<MenuItem value={100}>100</MenuItem>
+			</TextField>
+		</Box>
+	);
+};
 
-      <Box display="flex" alignItems="center" my="0.25rem" pb={1}>
-        <Typography color="grey.600" mr={1}>
-          View:
-        </Typography>
+SearchBar.Sort = function Sort() {
+	const { sortOptions, selectedSort, paramHandlers, downMd } = useSB();
+	const handleSelectedOption = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const code = e.target.value;
+		const opt = sortOptions.find((o) => o.code === code);
+		if (opt) paramHandlers.handleSortChange(opt);
+	};
+	return (
+		<Box display="flex" alignItems="center" gap={1} flex="1 1 0" pb={1}>
+			<Typography color="grey.600" whiteSpace="pre">
+				Sort by:
+			</Typography>
+			<TextField
+				select
+				fullWidth
+				size="small"
+				value={selectedSort}
+				variant="outlined"
+				onChange={handleSelectedOption}
+				sx={{ flex: "1 1 0", minWidth: downMd ? "120px" : "150px" }}
+			>
+				{sortOptions.map((option) => (
+					<MenuItem key={option.code} value={option.code}>
+						{option.displayName}
+					</MenuItem>
+				))}
+			</TextField>
+		</Box>
+	);
+};
+
+SearchBar.View = function View() {
+	const { view, paramHandlers, t, downMd, mobileFiltersContent } = useSB();
+	return (
+		<Box display="flex" alignItems="center" my="0.25rem" pb={1}>
+			<Typography color="grey.600" mr={1}>
+				View:
+			</Typography>
+			<ToggleButtonGroup
+				exclusive
+				value={view}
+				onChange={(_e, value: ViewMode) =>
+					paramHandlers.handleViewChange(value)
+				}
+				sx={sxView}
+			>
+				<ToggleButton
+					value="grid"
+					aria-label={t("gridView")}
+					title={t("gridView")}
+				>
+					<Apps
+						fontSize="small"
+						color={view === "grid" ? "primary" : "inherit"}
+					/>
+				</ToggleButton>
+				<ToggleButton
+					value="list"
+					aria-label={t("listView")}
+					title={t("listView")}
+				>
+					<ViewList
+						fontSize="small"
+						color={view === "list" ? "primary" : "inherit"}
+					/>
+				</ToggleButton>
+			</ToggleButtonGroup>
 
-        <ToggleButtonGroup
-          exclusive
-          value={view}
-          onChange={(_e, value: ViewMode) => handleViewChange(value)}
-          sx={sxView}
-        >
-          <ToggleButton
-            value="grid"
-            aria-label={t("gridView")}
-            title={t("gridView")}
-          >
-            <Apps
-              fontSize="small"
-              color={view === "grid" ? "primary" : "inherit"}
-            />
-          </ToggleButton>
-          <ToggleButton
-            value="list"
-            aria-label={t("listView")}
-            title={t("listView")}
-          >
-            <ViewList
-              fontSize="small"
-              color={view === "list" ? "primary" : "inherit"}
-            />
-          </ToggleButton>
-        </ToggleButtonGroup>
+			{downMd && (
+				<Sidenav
+					handler={(close) => (
+						<IconButton onClick={close}>
+							<FilterList fontSize="small" />
+						</IconButton>
+					)}
+				>
+					<Box px={3} py={2}>
+						{mobileFiltersContent}
+					</Box>
+				</Sidenav>
+			)}
+		</Box>
+	);
+};
 
-        {/* SHOW IN THE SMALL DEVICE */}
-        {downMd && (
-          <Sidenav
-            handler={(close) => (
-              <IconButton onClick={close}>
-                <FilterList fontSize="small" />
-              </IconButton>
-            )}
-          >
-            <Box px={3} py={2}>
-              {children}
-            </Box>
-          </Sidenav>
-        )}
-      </Box>
-    </Box>
-  );
+SearchBar.MobileFilters = function MobileFilters({ children }) {
+	const { setMobileFiltersContent } = useSB();
+	useEffect(() => {
+		setMobileFiltersContent(children ?? null);
+		return () => setMobileFiltersContent(null);
+	}, [children, setMobileFiltersContent]);
+	return null;
 };
 
 export default SearchBar;