@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,83 @@
+/**
+ * @module SearchBar
+ */
+"use client";
+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 { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
+import { findCategoryNameById } from "../utils/findCategoryNameById";
+import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
+import { DropDownHandler } from "../styles/index";
+import { useTranslations } from "next-intl";
+type DisplayCategory = {
+  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;
+}
+
+/**
+ * Category Dropdown filter for SearchBar. Selecting a category
+ * will filter the search query.
+ *
+ * @category Sub-Component
+ */
+const CategoryDropdown = ({
+  selectedCategoryId,
+  handleChange,
+}: CategoryDropdownProps) => {
+  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 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>
+            ));
+        }}
+      />
+    </>
+  );
+};
+
+export default CategoryDropdown;

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

@@ -0,0 +1,34 @@
+/**
+ * @module SearchBar
+ */
+import Box from "@mui/material/Box";
+import { IconButton } from "@mui/material";
+import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
+
+interface Props {
+  handleNavigate: () => void;
+}
+
+/**
+ * Search icon that appears in the left adornment slot of search-box
+ * @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>
+  );
+};
+
+export default AdornmentSearchIcon;

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

@@ -0,0 +1,58 @@
+/**
+ * @module SearchBar
+ */
+"use client";
+import React, { useContext } from "react";
+import TextField from "@mui/material/TextField";
+
+import SearchIconAdornment from "./textfield-adornment-search-icon";
+import AdornmentButton from "./textfield-adornment-button";
+import CategoryDropdown from "./textfield-adornment-category";
+
+import { INPUT_SX } from "../styles/index";
+import { useTheme, useMediaQuery } from "@mui/material";
+import _ from "lodash";
+import { useTranslations } from "next-intl";
+import { SearchContext } from "./context";
+
+/**
+ * The actual input field for the search bar.
+ * Adornment will change based on media query width -
+ * Categories filter for desktop and search button for mobile.
+ * @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 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>
+  );
+}

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

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

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

@@ -0,0 +1,63 @@
+"use client";
+import React, { FormEvent, useState } from "react";
+import { PageSlug } from "@/lib/page-slugs";
+import { PageKey } from "@/lib/product-list-types";
+
+import _ from "lodash";
+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,
+    },
+  };
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @module SearchBar
+ */
+import SearchBar from "./compound/search-bar-root";
+
+interface Props {
+  handleCloseDrawer?: () => void;
+}
+
+/**
+ * @category Implementation
+ */
+export const SearchBarViewLg = ({ handleCloseDrawer }: Props) => {
+  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>
+  );
+};

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

@@ -0,0 +1,49 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+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,
+}));
+
+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" },
+}));
+
+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" },
+}));
+
+export const INPUT_SX = {
+  padding: 0,
+  height: 44,
+  overflow: "hidden",
+  backgroundColor: "grey.200",
+  "& .MuiOutlinedInput-notchedOutline": { border: 0 },
+};

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

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

package/src/components-v2/section/compound/section-header.tsx

@@ -0,0 +1,63 @@
+/**
+ * @module Section
+ */
+"use client";
+
+import Link from "next/link";
+import { ReactNode } from "react";
+// Mui Icon Components
+import ArrowLeft from "@mui/icons-material/ArrowLeft";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+// Local Custom Components
+import { H2 } from "../../Typography";
+import { FlexBetween, FlexBox } from "../../flex-box/index";
+import useSettings from "../../../hooks/use-settings";
+
+/**
+ * @category Sub-Component
+ */
+export const SectionHeader = ({ children }: { children: ReactNode }) => {
+  return <FlexBetween mb={3}>{children}</FlexBetween>;
+};
+
+/**
+ * @category Props
+ */
+export interface TitleProps {
+  /** Title of section */
+  title: string;
+  /** Icon to display beside title */
+  icon?: ReactNode;
+}
+
+/**
+ * @category Sub-Component
+ */
+export const SectionHeaderTitle = ({ icon, title }: TitleProps) => (
+  <FlexBox alignItems="center" gap={1}>
+    {icon ?? null}
+    <H2 lineHeight={1}>{title}</H2>
+  </FlexBox>
+);
+
+/**
+ * @category Sub-Component
+ */
+export const SectionHeaderSeeMoreLink = ({ link }: { link: string }) => {
+  const { settings } = useSettings();
+  return (
+    <Link href={link}>
+      <FlexBox alignItems="center" color="grey.600">
+        View all
+        {settings.direction === "ltr" ? (
+          <ArrowRight fontSize="small" color="inherit" />
+        ) : (
+          <ArrowLeft fontSize="small" color="inherit" />
+        )}
+      </FlexBox>
+    </Link>
+  );
+};
+
+SectionHeader.Title = SectionHeaderTitle;
+SectionHeader.SeeMoreLink = SectionHeaderSeeMoreLink;

package/src/components-v2/section/compound/section.tsx

@@ -0,0 +1,26 @@
+/**
+ * @module Section
+ */
+import { ReactNode } from "react";
+import Container from "@mui/material/Container";
+import Box, { BoxProps } from "@mui/material/Box";
+import { SectionHeader } from "./section-header";
+
+interface Props extends BoxProps {
+  children: ReactNode;
+}
+
+/**
+ * @category Compound Component
+ */
+export const Section = (props: Props) => {
+  const { children, ...others } = props;
+
+  return (
+    <Box mb={7.5} {...others}>
+      <Container className="pb-1">{children}</Container>
+    </Box>
+  );
+};
+
+Section.Header = SectionHeader;

package/src/components-v2/section/index.ts

@@ -0,0 +1 @@
+export { Section } from "./compound/section";

package/src/components-v2/side-nav/index.ts

@@ -0,0 +1 @@
+export { default } from "./side-nav";

package/src/components-v2/side-nav/side-nav.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState, ReactNode } from "react";
+import Drawer from "@mui/material/Drawer";
+// GLOBAL CUSTOM COMPONENT
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+
+interface Props {
+  /** Optionally manage open state from parent, default is to use local state. */
+  open?: boolean;
+  width?: number;
+  children: ReactNode;
+  toggle?: () => void;
+  position?: "left" | "right";
+  handler: (event: () => void) => ReactNode;
+}
+
+export default function SideNav(props: Props) {
+  const {
+    position = "left",
+    open = false,
+    width = 280,
+    children,
+    handler,
+    toggle,
+  } = props;
+  /** If no external state, just use local. */
+  const [sideNavOpen, setSideNavOpen] = useState(open);
+  const handleToggleSideNav = () => setSideNavOpen(!sideNavOpen);
+
+  /** Keep external and local state in sync */
+  useEffect(() => setSideNavOpen(open), [open]);
+
+  const handleClose = toggle || handleToggleSideNav;
+
+  return (
+    <div>
+      <Drawer
+        anchor={position}
+        open={sideNavOpen}
+        onClose={handleClose}
+        slotProps={{ transition: { style: { width } } }}
+      >
+        <Scrollbar autoHide={false}>{children}</Scrollbar>
+      </Drawer>
+
+      {handler(handleClose)}
+    </div>
+  );
+}

package/src/components-v2/site-logo.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import Link from "next/link";
+
+interface SiteLogoProps {
+  height?: string;
+}
+
+const SiteLogo: React.FC<SiteLogoProps> = () => {
+  return (
+    <Link href="/">
+      <img src={"/logo-blue.png"} alt="E4 Logo" height={54} />
+    </Link>
+  );
+};
+
+export default SiteLogo;

package/src/components-v2/sticky/index.ts

@@ -0,0 +1 @@
+export { default } from "./sticky";

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

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState, ReactNode } from "react";
+import clsx from "clsx";
+import { StyledBox } from "./styles";
+
+// ============================================================
+interface Props {
+  fixedOn: number;
+  children: ReactNode;
+  scrollDistance?: number;
+  onSticky?: (isFixed: boolean) => void;
+}
+
+// ============================================================
+
+export default function Sticky({
+  fixedOn,
+  children,
+  onSticky,
+  scrollDistance = 0,
+}: Props) {
+  const [fixed, setFixed] = useState(false);
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  const scrollListener = useCallback(() => {
+    if (!window) return;
+
+    const isFixed = window.scrollY >= fixedOn + scrollDistance;
+    setFixed(isFixed);
+  }, [fixedOn, scrollDistance]);
+
+  useEffect(() => {
+    if (!window) return;
+
+    window.addEventListener("scroll", scrollListener);
+    window.addEventListener("resize", scrollListener);
+
+    return () => {
+      window.removeEventListener("scroll", scrollListener);
+      window.removeEventListener("resize", scrollListener);
+    };
+  }, [scrollListener]);
+
+  useEffect(() => {
+    if (onSticky) onSticky(fixed);
+  }, [fixed, onSticky]);
+
+  useEffect(() => {
+    if (elementRef.current) {
+      setHeight(elementRef.current.offsetHeight);
+      scrollListener();
+    }
+  }, [scrollListener]);
+
+  return (
+    <StyledBox fixedOn={fixedOn} componentHeight={height} fixed={fixed}>
+      <div className={clsx({ hold: !fixed, fixed: fixed })} ref={elementRef}>
+        {children}
+      </div>
+    </StyledBox>
+  );
+}

package/src/components-v2/sticky/styles.ts

@@ -0,0 +1,38 @@
+import { keyframes, styled } from "@mui/material/styles";
+
+// ==============================================================
+interface Props {
+  fixed?: boolean;
+  fixedOn?: number;
+  componentHeight?: number;
+}
+// ==============================================================
+
+const slideDown = keyframes`
+    from {transform: translateY(-200%)}
+    to {transform: translateY(0)}
+`;
+
+export const StyledBox = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "componentHeight" && prop !== "fixed" && prop !== "fixedOn",
+})<Props>(({ theme, componentHeight, fixedOn, fixed }) => ({
+  paddingTop: fixed ? componentHeight : 0,
+
+  "& .hold": {
+    zIndex: 5,
+    boxShadow: "none",
+    position: "relative",
+  },
+
+  "& .fixed": {
+    left: 0,
+    right: 0,
+    zIndex: 1500,
+    position: "fixed",
+    top: `${fixedOn}px`,
+    boxShadow: theme.shadows[2],
+    transition: "all 350ms ease-in-out",
+    animation: `${slideDown} 400ms ${theme.transitions.easing.easeInOut}`,
+  },
+}));

package/src/components-v2/utils/constants.ts

@@ -0,0 +1,8 @@
+export const layoutConstant = {
+  topbarHeight: 40,
+  headerHeight: 80,
+  mobileNavHeight: 64,
+  containerWidth: 1200,
+  mobileHeaderHeight: 64,
+  grocerySidenavWidth: 280,
+};