@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components-v2/search-bar/compound/textfield-adornment-category.tsx

@@ -6,25 +6,25 @@ import React from "react";
 import MenuItem from "@mui/material/MenuItem";
 import TouchRipple from "@mui/material/ButtonBase";
 import useTheme from "@mui/material/styles/useTheme";
-import getCategories from "@/services/categories/queries/get-categories";
+import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
 import { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
 import { findCategoryNameById } from "@evenicanpm/storefront-core/src/components-v2/search-bar/utils/findCategoryNameById";
 import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
 import { DropDownHandler } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
 import { useTranslations } from "next-intl";
 type DisplayCategory = {
-  name: string;
-  id: number;
+	name: string;
+	id: number;
 };
 
 /**
  * @category Props
  */
 export interface CategoryDropdownProps {
-  /** The currently selected category id, "All" by default. Used to filter typeahead search query. */
-  selectedCategoryId: number;
-  /** A handler to call when the category is changed. In this case will be changing the state that is held in top-level context */
-  handleChange: (categoryId: number) => void;
+	/** The currently selected category id, "All" by default. Used to filter typeahead search query. */
+	selectedCategoryId: number;
+	/** A handler to call when the category is changed. In this case will be changing the state that is held in top-level context */
+	handleChange: (categoryId: number) => void;
 }
 
 /**
@@ -34,50 +34,50 @@ export interface CategoryDropdownProps {
  * @category Sub-Component
  */
 const CategoryDropdown = ({
-  selectedCategoryId,
-  handleChange,
+	selectedCategoryId,
+	handleChange,
 }: CategoryDropdownProps) => {
-  const { data: categories } = getCategories.useSuspenseData();
-  const t = useTranslations();
-  const { breakpoints } = useTheme();
+	const { data: categories } = getCategories.useSuspenseData();
+	const t = useTranslations();
+	const { breakpoints } = useTheme();
 
-  const _categories = Array.isArray(categories) ? categories : [];
-  const options: DisplayCategory[] = [
-    ..._categories.map((cat) => ({ name: cat?.Name ?? "", id: cat.RecordId })),
-    { name: "All Categories", id: 0 },
-  ]; // add all categories option
+	const _categories = Array.isArray(categories) ? categories : [];
+	const options: DisplayCategory[] = [
+		..._categories.map((cat) => ({ name: cat?.Name ?? "", id: cat.RecordId })),
+		{ name: "All Categories", id: 0 },
+	]; // add all categories option
 
-  const title = findCategoryNameById(selectedCategoryId, categories, t);
+	const title = findCategoryNameById(selectedCategoryId, categories, t);
 
-  return (
-    <>
-      <Menu
-        direction="left"
-        sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
-        handler={(e) => (
-          <DropDownHandler as={TouchRipple} onClick={e}>
-            {title}
-            <KeyboardArrowDownOutlined fontSize="small" color="inherit" />
-          </DropDownHandler>
-        )}
-        options={(onClose) => {
-          return options
-            ?.filter((current: DisplayCategory) => current.name !== title)
-            .map((item: DisplayCategory) => (
-              <MenuItem
-                key={item.id}
-                onClick={() => {
-                  handleChange(item.id);
-                  onClose();
-                }}
-              >
-                {item.name}
-              </MenuItem>
-            ));
-        }}
-      />
-    </>
-  );
+	return (
+		<>
+			<Menu
+				direction="left"
+				sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
+				handler={(e) => (
+					<DropDownHandler as={TouchRipple} onClick={e}>
+						{title}
+						<KeyboardArrowDownOutlined fontSize="small" color="inherit" />
+					</DropDownHandler>
+				)}
+				options={(onClose) => {
+					return options
+						?.filter((current: DisplayCategory) => current.name !== title)
+						.map((item: DisplayCategory) => (
+							<MenuItem
+								key={item.id}
+								onClick={() => {
+									handleChange(item.id);
+									onClose();
+								}}
+							>
+								{item.name}
+							</MenuItem>
+						));
+				}}
+			/>
+		</>
+	);
 };
 
 export default CategoryDropdown;

package/src/components-v2/search-bar/compound/textfield-adornment-search-icon.tsx

@@ -6,7 +6,7 @@ import { IconButton } from "@mui/material";
 import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
 
 interface Props {
-  handleNavigate: () => void;
+	handleNavigate: () => void;
 }
 
 /**
@@ -14,21 +14,21 @@ interface Props {
  * @category Sub-Component
  */
 const AdornmentSearchIcon = ({ handleNavigate }: Props) => {
-  return (
-    <Box
-      mr={1}
-      px={1}
-      display="grid"
-      alignItems="center"
-      justifyContent="center"
-      borderRight="1px solid"
-      borderColor="grey.400"
-    >
-      <IconButton onClick={handleNavigate}>
-        <Search sx={{ fontSize: 17, color: "grey.600" }} />
-      </IconButton>
-    </Box>
-  );
+	return (
+		<Box
+			mr={1}
+			px={1}
+			display="grid"
+			alignItems="center"
+			justifyContent="center"
+			borderRight="1px solid"
+			borderColor="grey.400"
+		>
+			<IconButton onClick={handleNavigate}>
+				<Search sx={{ fontSize: 17, color: "grey.600" }} />
+			</IconButton>
+		</Box>
+	);
 };
 
 export default AdornmentSearchIcon;

package/src/components-v2/search-bar/compound/textfield.tsx

@@ -2,7 +2,7 @@
  * @module SearchBar
  */
 "use client";
-import React, { useContext } from "react";
+import React from "react";
 import TextField from "@mui/material/TextField";
 
 import SearchIconAdornment from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-search-icon";
@@ -13,7 +13,7 @@ import { INPUT_SX } from "@evenicanpm/storefront-core/src/components-v2/search-b
 import { useTheme, useMediaQuery } from "@mui/material";
 import _ from "lodash";
 import { useTranslations } from "next-intl";
-import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import { useSearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 
 /**
  * The actual input field for the search bar.
@@ -22,37 +22,37 @@ import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/sea
  * @category Sub-Component
  */
 export default function SearchBarTextField() {
-  const { handlers, state } = useContext(SearchContext);
-  const t = useTranslations();
-  const theme = useTheme();
-  const downMd = useMediaQuery(theme.breakpoints.down(1150));
+	const { handlers, state } = useSearchContext();
+	const t = useTranslations();
+	const theme = useTheme();
+	const downMd = useMediaQuery(theme.breakpoints.down(1150));
 
-  const endAdornment = downMd ? (
-    <AdornmentButton label={t("Search.searchBtn")} />
-  ) : (
-    <CategoryDropdown
-      selectedCategoryId={state.searchCategory}
-      handleChange={handlers.handleCategoryChange}
-    />
-  );
+	const endAdornment = downMd ? (
+		<AdornmentButton label={t("Search.searchBtn")} />
+	) : (
+		<CategoryDropdown
+			selectedCategoryId={state.searchCategory}
+			handleChange={handlers.handleCategoryChange}
+		/>
+	);
 
-  return (
-    <form onSubmit={handlers.handleSubmit}>
-      <TextField
-        fullWidth
-        variant="outlined"
-        placeholder={t("Search.searchPlaceholder")}
-        onChange={handlers.handleSearch}
-        slotProps={{
-          input: {
-            sx: INPUT_SX,
-            startAdornment: (
-              <SearchIconAdornment handleNavigate={handlers.handleNavigate} />
-            ),
-            endAdornment: endAdornment,
-          },
-        }}
-      />
-    </form>
-  );
+	return (
+		<form onSubmit={handlers.handleSubmit}>
+			<TextField
+				fullWidth
+				variant="outlined"
+				placeholder={t("Search.searchPlaceholder")}
+				onChange={handlers.handleSearch}
+				slotProps={{
+					input: {
+						sx: INPUT_SX,
+						startAdornment: (
+							<SearchIconAdornment handleNavigate={handlers.handleNavigate} />
+						),
+						endAdornment: endAdornment,
+					},
+				}}
+			/>
+		</form>
+	);
 }

package/src/components-v2/search-bar/hooks/use-click-outside.ts

@@ -4,17 +4,17 @@ import { useEffect } from "react";
  * Detect if clicks are outside of an element in an ref
  */
 export const useClickOutside = (
-  ref: React.RefObject<HTMLElement>,
-  callback: () => void,
+	ref: React.RefObject<HTMLElement>,
+	callback: () => void,
 ) => {
-  useEffect(() => {
-    const handleClick = (e: PointerEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) callback();
-    };
+	useEffect(() => {
+		const handleClick = (e: Event) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) callback();
+		};
 
-    document.addEventListener("click", handleClick);
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  }, [ref, callback]);
+		document.addEventListener("click", handleClick);
+		return () => {
+			document.removeEventListener("click", handleClick);
+		};
+	}, [ref, callback]);
 };

package/src/components-v2/search-bar/hooks/use-search.ts

@@ -1,7 +1,7 @@
 "use client";
 import React, { FormEvent, useState } from "react";
-import { PageSlug } from "@/lib/page-slugs";
-import { PageKey } from "@/lib/product-list-types";
+import { PageSlug } from "@evenicanpm/storefront-core/src/lib/page-slugs";
+import { PageKey } from "@evenicanpm/storefront-core/src/lib/product-list-types";
 
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -10,54 +10,55 @@ import { useRouter } from "next/navigation";
  * Handles all main logic and state for the search bar components.
  */
 export default function useSearch() {
-  // State
-  const [resultsOpen, setResultsOpen] = useState(false);
-  const [searchText, setSearchText] = React.useState<string>("");
-  const [searchCategory, setSelectedCategory] = React.useState<number>(0);
-
-  // Hooks
-  const router = useRouter();
-
-  // Handlers
-  const handleCategoryChange = (categoryId: number) => {
-    setSelectedCategory(categoryId);
-  };
-
-  const handleNavigate = () => {
-    if (searchText.trim() === "") {
-      return;
-    }
-    const url = new URL(PageSlug.ProductList, window.location.origin);
-    url.searchParams.set(PageKey.SEARCH, searchText);
-    router.push(url.toString());
-  };
-
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
-    handleNavigate();
-    setResultsOpen(false);
-    setSearchText("");
-    setSelectedCategory(0);
-  };
-
-  const handleSearch = _.debounce((e) => {
-    setSearchText(e.target.value || "");
-  }, 500);
-
-  return {
-    state: {
-      resultsOpen,
-      searchText,
-      searchCategory,
-    },
-    setters: {
-      setResultsOpen,
-    },
-    handlers: {
-      handleNavigate,
-      handleCategoryChange,
-      handleSubmit,
-      handleSearch,
-    },
-  };
+	// State
+	const [resultsOpen, setResultsOpen] = useState(false);
+	const [searchText, setSearchText] = React.useState<string>("");
+	const [searchCategory, setSelectedCategory] = React.useState<number>(0);
+
+	// Hooks
+	const router = useRouter();
+
+	// Handlers
+	const handleCategoryChange = (categoryId: number) => {
+		setSelectedCategory(categoryId);
+	};
+
+	const handleNavigate = () => {
+		if (searchText.trim() === "") {
+			return;
+		}
+		const url = new URL(PageSlug.ProductList, window.location.origin);
+		url.searchParams.set(PageKey.SEARCH, searchText);
+		router.push(url.toString());
+		setResultsOpen(false);
+	};
+
+	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+		handleNavigate();
+		setResultsOpen(false);
+		setSearchText("");
+		setSelectedCategory(0);
+	};
+
+	const handleSearch = _.debounce((e) => {
+		setSearchText(e.target.value || "");
+	}, 500);
+
+	return {
+		state: {
+			resultsOpen,
+			searchText,
+			searchCategory,
+		},
+		setters: {
+			setResultsOpen,
+		},
+		handlers: {
+			handleNavigate,
+			handleCategoryChange,
+			handleSubmit,
+			handleSearch,
+		},
+	};
 }

package/src/components-v2/search-bar/index.tsx

@@ -4,33 +4,33 @@
 import SearchBar from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/search-bar-root";
 
 interface Props {
-  handleCloseDrawer?: () => void;
+	handleCloseDrawer?: () => void;
 }
 
 /**
  * @category Implementation
  */
 export const SearchBarViewLg = ({ handleCloseDrawer }: Props) => {
-  return (
-    <SearchBar handleCloseDrawer={handleCloseDrawer}>
-      <SearchBar.TextField />
-      <SearchBar.Results>
-        <SearchBar.Results.ItemCardLg />
-      </SearchBar.Results>
-    </SearchBar>
-  );
+	return (
+		<SearchBar handleCloseDrawer={handleCloseDrawer}>
+			<SearchBar.TextField />
+			<SearchBar.Results>
+				<SearchBar.Results.ItemCardLg />
+			</SearchBar.Results>
+		</SearchBar>
+	);
 };
 
 /**
  * @category Implementation
  */
 export const SearchBarViewSm = ({ handleCloseDrawer }: Props) => {
-  return (
-    <SearchBar handleCloseDrawer={handleCloseDrawer}>
-      <SearchBar.TextField />
-      <SearchBar.Results>
-        <SearchBar.Results.ItemCardSm />
-      </SearchBar.Results>
-    </SearchBar>
-  );
+	return (
+		<SearchBar handleCloseDrawer={handleCloseDrawer}>
+			<SearchBar.TextField />
+			<SearchBar.Results>
+				<SearchBar.Results.ItemCardSm />
+			</SearchBar.Results>
+		</SearchBar>
+	);
 };

package/src/components-v2/search-bar/styles/index.ts

@@ -8,42 +8,42 @@ import SearchOutlined from "@mui/icons-material/SearchOutlined";
 // TODO: caused from symlinked node_modules in client-packages root
 // Need to install only types for mui/styled-engine
 export const SearchOutlinedIcon = styled(SearchOutlined)(({ theme }) => ({
-  color: theme.palette.grey[600],
-  marginRight: 6,
+	color: theme.palette.grey[600],
+	marginRight: 6,
 }));
 
 export const SearchResultCard = styled(Card)(({ theme }) => ({
-  zIndex: 99,
-  top: "100%",
-  width: "100%",
-  overflowY: "auto",
-  position: "absolute",
-  paddingTop: "0.5rem",
-  paddingBottom: "0.5rem",
-  paddingLeft: "2rem",
-  paddingRight: "2rem",
-  [theme.breakpoints.up("md")]: { maxHeight: "80vH" },
+	zIndex: 99,
+	top: "100%",
+	width: "100%",
+	overflowY: "auto",
+	position: "absolute",
+	paddingTop: "0.5rem",
+	paddingBottom: "0.5rem",
+	paddingLeft: "2rem",
+	paddingRight: "2rem",
+	[theme.breakpoints.up("md")]: { maxHeight: "80vH" },
 }));
 
 export const DropDownHandler = styled(Box)(({ theme }) => ({
-  width: 160,
-  minWidth: 160,
-  height: "100%",
-  display: "flex",
-  whiteSpace: "pre",
-  alignItems: "center",
-  gap: theme.spacing(0.5),
-  justifyContent: "flex-end",
-  color: theme.palette.grey[700],
-  paddingInline: theme.spacing(3),
-  borderLeft: `1px solid ${theme.palette.grey[400]}`,
-  [theme.breakpoints.down("xs")]: { display: "none" },
+	width: 160,
+	minWidth: 160,
+	height: "100%",
+	display: "flex",
+	whiteSpace: "pre",
+	alignItems: "center",
+	gap: theme.spacing(0.5),
+	justifyContent: "flex-end",
+	color: theme.palette.grey[700],
+	paddingInline: theme.spacing(3),
+	borderLeft: `1px solid ${theme.palette.grey[400]}`,
+	[theme.breakpoints.down("xs")]: { display: "none" },
 }));
 
 export const INPUT_SX = {
-  padding: 0,
-  height: 44,
-  overflow: "hidden",
-  backgroundColor: "grey.200",
-  "& .MuiOutlinedInput-notchedOutline": { border: 0 },
+	padding: 0,
+	height: 44,
+	overflow: "hidden",
+	backgroundColor: "grey.200",
+	"& .MuiOutlinedInput-notchedOutline": { border: 0 },
 };

package/src/components-v2/search-bar/utils/findCategoryNameById.ts

@@ -4,15 +4,15 @@ import { Category } from "@msdyn365-commerce/retail-proxy";
  * Looks up the category name by id.
  */
 export const findCategoryNameById = (
-  searchCategory: number,
-  categories: any,
-  t: Function,
+	searchCategory: number,
+	categories: any,
+	t: Function,
 ) => {
-  if (searchCategory === 0) {
-    return t("Navigation.allCategoriesLabel");
-  }
-  return (
-    categories?.find((cat: Category) => cat.RecordId === searchCategory)
-      ?.Name || ""
-  );
+	if (searchCategory === 0) {
+		return t("Navigation.allCategoriesLabel");
+	}
+	return (
+		categories?.find((cat: Category) => cat.RecordId === searchCategory)
+			?.Name || ""
+	);
 };

package/src/components-v2/section/Section.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Section } from "./index";
+import { Typography } from "@mui/material";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+import {
+	SectionHeader,
+	SectionHeaderSeeMoreLink,
+	SectionHeaderTitle,
+} from "./compound/section-header";
+
+const meta: Meta<typeof Section> = {
+	title: "Section",
+	component: Section,
+	tags: ["autodocs"],
+	subcomponents: {
+		SectionHeader,
+		SectionHeaderTitle,
+		SectionHeaderSeeMoreLink,
+	},
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof Section>;
+
+export const Basic: Story = {
+	render: () => (
+		<Section>
+			<Section.Header>
+				<SectionHeader.Title title="Featured Products" icon={<ArrowRight />} />
+				<SectionHeader.SeeMoreLink link="/products" />
+			</Section.Header>
+
+			<Typography variant="body1">
+				This is a simple section showing how to use Section and its header
+				sub-components.
+			</Typography>
+		</Section>
+	),
+};
+
+export const NoHeader: Story = {
+	render: () => (
+		<Section>
+			<Typography variant="body1">
+				This section does not have a header. It just contains content.
+			</Typography>
+		</Section>
+	),
+};
+
+export const LongContent: Story = {
+	render: () => (
+		<Section>
+			<Section.Header>
+				<SectionHeader.Title title="Latest Articles" />
+				<SectionHeader.SeeMoreLink link="/articles" />
+			</Section.Header>
+
+			{Array.from({ length: 5 }).map((_, i) => (
+				<Typography key={i} paragraph>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Paragraph{" "}
+					{i + 1}.
+				</Typography>
+			))}
+		</Section>
+	),
+};
+
+export const CustomStyling: Story = {
+	render: () => (
+		<Section sx={{ bgcolor: "grey.100", p: 4, borderRadius: 2 }}>
+			<Section.Header>
+				<SectionHeader.Title title="Custom Styled Section" />
+				<SectionHeader.SeeMoreLink link="/custom" />
+			</Section.Header>
+
+			<Typography variant="body1">
+				This section uses custom MUI BoxProps (background color, padding, border
+				radius).
+			</Typography>
+		</Section>
+	),
+};