@evenicanpm/storefront-core 1.0.2 → 1.0.3

package/src/cms/blocks/interfaces.ts

@@ -0,0 +1,240 @@
+export interface Slide {
+  id: number;
+  heading: string;
+  description: string;
+  buttonText: string;
+  buttonColor: string;
+  image: Media;
+  linkToPage: PageLink | null;
+  linkToProduct: ProductLink | null;
+}
+
+export interface HeroCarouselBlock {
+  __component: "blocks.hero-carousel";
+  id: number;
+  Slides: Slide[];
+}
+
+export interface LogoScrollerBlock {
+  __component: "blocks.logo-scroller";
+  id: number;
+  image: Media[];
+}
+
+export interface ServiceCard {
+  id: number;
+  title: string;
+  description: string;
+  icon: string;
+}
+
+export interface ServicesBlock {
+  __component: "blocks.services";
+  id: number;
+  Services_Card: ServiceCard[];
+}
+
+export interface HeroSectionBlock {
+  __component: "blocks.hero-section";
+  id: number;
+  heading: string;
+  subheading: string | null;
+  buttonText: string;
+  backgroundImage: Media;
+}
+
+export interface Category {
+  id: number;
+  name: string;
+  image: Media;
+  tier: number;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+}
+
+export interface CategoryWrapper {
+  id: number;
+  category: Category;
+}
+
+export interface CategoryCarouselBlock {
+  __component: "blocks.category-carousel";
+  id: number;
+  CategoryWrapper: CategoryWrapper[];
+}
+
+export interface Product {
+  id: number;
+  sku: string;
+  description: string | null;
+  image: Media[];
+  keywords: string | null;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+}
+
+export interface ProductWrapper {
+  id: number;
+  product: Product;
+}
+
+export interface ProductSectionFullWidthBlock {
+  __component: "blocks.product-section-full-width";
+  id: number;
+  heading: string;
+  icon: string;
+  ProductWrapper: ProductWrapper[];
+}
+
+export interface ProductCarouselBlock {
+  __component: "blocks.product-carousel";
+  id: number;
+  heading: string;
+  products: Product[];
+}
+
+export interface FeaturesPillBlock {
+  __component: "blocks.features-pill";
+  id: number;
+  feature_1: string;
+  feature_2: string;
+  feature_3: string;
+  feature_4: string;
+}
+
+export interface FeaturedCategoriesBlock {
+  __component: "blocks.featured-categories";
+  id: number;
+  categories: Category[];
+}
+
+export interface FeaturedProductsBlock {
+  __component: "blocks.featured-products";
+  id: number;
+  name: string;
+  products: Product[];
+}
+
+export interface FooterBlock {
+  id: number;
+  __component: "blocks.footer";
+  address: string;
+  companyDescription: string;
+  companyName: string;
+  email: string;
+  phoneNumber: string;
+}
+
+export interface ImageBlock {
+  id: number;
+  __component: "blocks.image-block";
+  media: MediaData;
+}
+
+export interface RichTextBlock {
+  id: number;
+  __component: "blocks.rich-text";
+  content: string;
+}
+
+export interface ImageFormat {
+  ext: string;
+  url: string;
+  hash: string;
+  mime: string;
+  name: string;
+  path: string | null;
+  size: number;
+  width: number;
+  height: number;
+}
+
+export interface Formats {
+  /** Strapi generates only the sizes you configure.  
+        Keep this flexible by using an index signature. */
+  [size: string]: ImageFormat;
+}
+
+export interface Media {
+  id: number;
+  name: string;
+  alternativeText: string | null;
+  caption: string | null;
+  width: number | null;
+  height: number | null;
+  url: string;
+  ext: string;
+  mime: string;
+  size: number;
+  createdAt: string;
+  updatedAt: string;
+  formats?: Formats;
+}
+
+export interface PageLink {
+  id: number;
+  title: string;
+  slug: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ProductLink {
+  id: number;
+  name: string;
+  slug: string;
+  sku: string;
+  // Add more fields if needed
+}
+
+export interface MetaItem {
+  id: number;
+  name: string;
+  content: string;
+}
+
+export interface MediaAttributes {
+  url: string;
+}
+
+export interface MediaData {
+  attributes: MediaAttributes;
+}
+
+export interface MetaMedia {
+  data: MediaData;
+}
+
+export interface SeoData {
+  metaTitle?: string;
+  metaDescription?: string;
+  metaKeywords?: string;
+  metaImage?: { media?: MetaMedia | null } | null;
+  meta?: MetaItem[];
+  preventIndexing?: boolean;
+  structuredData?: string | null;
+}
+
+export interface SeoPageData {
+  title?: string;
+  seo?: SeoData;
+}
+
+export type Block =
+  | HeroCarouselBlock
+  | LogoScrollerBlock
+  | ServicesBlock
+  | HeroSectionBlock
+  | CategoryCarouselBlock
+  | ProductSectionFullWidthBlock
+  | ProductCarouselBlock
+  | FeaturesPillBlock
+  | FeaturedCategoriesBlock
+  | FeaturedProductsBlock
+  | FooterBlock
+  | ImageBlock
+  | RichTextBlock;
+
+export type BlockManagerType = Block[];

package/src/components/Notifications/README.md

@@ -4,7 +4,7 @@ _Example of how to trigger a notification._
 
 ```javascript
 // import notification store
-import { useNotificationStore } from "@/components/Notifications/useNotificationsStore";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 
 // call hook and destructure trigger function
 const { triggerNotification } = useNotificationStore();

package/src/components/Notifications/notification-context.tsx

@@ -1,6 +1,6 @@
 import { Alert, Snackbar, SnackbarCloseReason } from "@mui/material";
 import React, { createContext } from "react";
-import { useNotification } from "./use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { DatasourceApis } from "@/api-manager/types/Datasource";
 
 const DEFAULT_ALERT_TIME = 5000;

package/src/components/README.md

@@ -1,9 +1,4 @@
-# Components
+# Components V1 Folder (Deprecated)
 
-- Temporary location of storefront components
-- As we port pages to SSR, we will move components from
-  this folder into there corresponding /app/page/components folder
-  in their respective features.
-- Organize by feature, not by technology for better clarity
-- TODO: create a /providers folder for theme provider, auth, etc..
-  anything that wraps the app
+- Keeping this temporarily to maintain compatability for OLCC while we create the new component system
+- OLCC will start moving over to components and pages and then we will remove this folder

package/src/components/_components/MiniCartClient.tsx

@@ -5,7 +5,7 @@ import { MdOutlineShoppingBag as ShoppingBagOutlined } from "react-icons/md";
 import MobileCartBag from "@/components/_components/icons/cart-bag";
 import { Badge, Drawer, IconButton } from "@mui/material";
 import { Cart } from "@/schemas/cart.schema";
-import { useNotification } from "../Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { MiniCart } from "@/components/_components/mini-cart/index";
 
 const BADGE_STYLES = {

package/src/components/_components/navbar/category-based-menu/components/categories.tsx

@@ -1,6 +1,6 @@
 import ChevronRight from "@mui/icons-material/ChevronRight";
 // GLOBAL CUSTOM HOOK
-import useSettings from "@/hooks/use-settings";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
 // STYLED COMPONENTS
 import { CategoryList, CategoryListItem } from "../styles";
 

package/src/components/_components/navbar/mega-menu/mega-menu.tsx

@@ -5,7 +5,7 @@ import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 // GLOBAL CUSTOM COMPONENTS
 import FlexRowCenter from "@/components/_components/flex-box/flex-row-center";
 // GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@/hooks/use-overflow-detect";
+import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
 // LOCAL CUSTOM COMPONENT
 import CategoryList from "./category-list";
 // STYLED COMPONENTS

package/src/components/_components/navbar/nav-list/nav-item-child.tsx

@@ -7,8 +7,8 @@ import MenuItem from "@mui/material/MenuItem";
 import ArrowLeft from "@mui/icons-material/ArrowLeft";
 import ArrowRight from "@mui/icons-material/ArrowRight";
 // GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@/hooks/use-overflow-detect";
-import useSettings from "@/hooks/use-settings";
+import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
 // GLOBAL CUSTOM COMPONENTS
 import { Span } from "@/components/_components/Typography";
 import BazaarCard from "@/components/_components/BazaarCard";

package/src/components/_components/product-cards/product-card-1/product-card-1-wrapper.tsx

@@ -19,7 +19,7 @@ import { FlexBox } from "@/_components/flex-box";
 import AddToWishlistDialog from "@/_components/wishlist/add-to-wishlist-dialog";
 import RemoveFromWishlistDialog from "@/_components/wishlist/remove-from-wishlist-dialog";
 import ProductViewDialog from "@/_components/products-view/product-view-dialog";
-import { useNotification } from "@/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 
 type Props = {
   title: string;

package/src/components/_components/products-view/product-view-dialog.tsx

@@ -16,7 +16,7 @@ import { useTranslations } from "next-intl";
 import getCart from "@/api-manager/services/cart/queries/get-cart";
 // CUSTOM UTILS LIBRARY FUNCTION
 import { Carousel } from "../carousel";
-import { useNotification } from "@/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import BazaarImage from "../BazaarImage";
 import { FlexBox } from "../flex-box";
 import { H2, Paragraph, H1, H6, H3 } from "../Typography";

package/src/components/_components/settings/setting.tsx

@@ -15,7 +15,7 @@ import { H6 } from "@/components/_components/Typography";
 import Scrollbar from "@/components/_components/scrollbar/scrollbar";
 import FlexBox from "@/components/_components/flex-box/flex-box";
 // GLOBAL CUSTOM HOOK
-import useSettings from "@/hooks/use-settings";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
 // STYLED COMPONENTS
 import {
   BodyWrapper,

package/src/components/_components/wishlist/add-to-wishlist-dialog.tsx

@@ -16,7 +16,7 @@ import {
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
 import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
-import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
 import { useSession } from "next-auth/react";
 import getWishlists from "@/api-manager/services/user/queries/get-wishlists";

package/src/components/_components/wishlist/components/create-new-list.tsx

@@ -13,7 +13,7 @@ import {
 import Grid from "@mui/material/Grid2";
 // Global Custom components
 import { H5 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 // Forms
 import { useFormik } from "formik";
 import { z } from "zod";

package/src/components/_components/wishlist/remove-from-wishlist-dialog.tsx

@@ -14,7 +14,7 @@ import {
   Wishlist,
   WishlistLinesInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
-import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { useSession } from "next-auth/react";
 import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
 

package/src/components/_components/wishlist-modal/add-to-wishlist-dialog.tsx

@@ -16,7 +16,7 @@ import {
 } from "@/api-manager/schemas/user.schema";
 import { Cart } from "@/api-manager/schemas/cart.schema";
 import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
-import { useNotification } from "@/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
 import { useSession } from "next-auth/react";
 import getWishlists from "@/api-manager/services/user/queries/get-wishlists";

package/src/components/_components/wishlist-modal/remove-from-wishlist-dialog.tsx

@@ -14,7 +14,7 @@ import {
   Wishlist,
   WishlistLinesInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
-import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { useSession } from "next-auth/react";
 import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
 

package/src/components/countries-input.tsx

@@ -45,7 +45,6 @@ export default function CountryInput({
       size="small"
       label={label}
       variant="outlined"
-      data-testid="country-input"
       placeholder="Select Country"
     />
   );

package/src/components-v2/BazaarCard.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Card, { CardProps } from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+// ===============================================
+export interface Props extends CardProps {
+  hoverEffect?: boolean;
+}
+// ===============================================
+
+const BazaarCard = styled(Card, {
+  shouldForwardProp: (prop) => prop !== "hoverEffect",
+})<Props>(({ theme, hoverEffect }) => ({
+  overflow: "unset",
+  borderRadius: "8px",
+  transition: "all 250ms ease-in-out",
+  "&:hover": { ...(hoverEffect && { boxShadow: theme.shadows[3] }) },
+}));
+
+export default BazaarCard;

package/src/components-v2/BazaarImage.tsx

@@ -0,0 +1,12 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+// ==============================================================
+interface Props extends BoxProps {
+  src: string;
+  alt: string;
+}
+// ==============================================================
+
+export default function BazaarImage(props: Props) {
+  return <Box component="img" {...props} />;
+}

package/src/components-v2/BazaarMenu.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Fragment, ReactNode, useState } from "react";
+import Menu from "@mui/material/Menu";
+import { SxProps, Theme } from "@mui/material/styles";
+
+// ===============================================================
+interface Props {
+  open?: boolean;
+  sx?: SxProps<Theme>;
+  handler?: (e: (event: React.MouseEvent) => void) => ReactNode;
+  options: (e: () => void) => ReactNode;
+  direction?: "left" | "right" | "center";
+}
+// ===============================================================
+
+export default function BazaarMenu({
+  open,
+  handler,
+  options,
+  direction = "left",
+  ...props
+}: Props) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleClose = () => setAnchorEl(null);
+  const handleClick = (event: React.MouseEvent<Element>) =>
+    setAnchorEl(event.currentTarget as HTMLElement);
+
+  return (
+    <Fragment>
+      {handler ? handler(handleClick) : null}
+
+      <Menu
+        elevation={0}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        open={open !== undefined ? open : !!anchorEl}
+        anchorOrigin={{ vertical: "bottom", horizontal: direction }}
+        transformOrigin={{ vertical: "top", horizontal: direction }}
+        {...props}
+      >
+        {options(handleClose)}
+      </Menu>
+    </Fragment>
+  );
+}

package/src/components-v2/BazaarSwitch.tsx

@@ -0,0 +1,37 @@
+import Switch, { SwitchProps } from "@mui/material/Switch";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+const StyledSwitch = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  "& .MuiSwitch-switchBase.MuiButtonBase-root": {
+    backgroundColor: "transparent",
+  },
+  "& .MuiSwitch-track": {
+    opacity: 1,
+    borderRadius: 22 / 2,
+    backgroundColor: theme.palette.grey[400],
+    "&:before, &:after": {
+      width: 16,
+      height: 16,
+      top: "50%",
+      content: '""',
+      position: "absolute",
+      transform: "translateY(-50%)",
+    },
+  },
+  "& .MuiSwitch-thumb": {
+    width: 16,
+    height: 16,
+    margin: "2px",
+    boxShadow: "none",
+    backgroundColor: theme.palette.grey[600],
+  },
+  "& .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb": {
+    backgroundColor: theme.palette.info.main,
+  },
+}));
+
+export default function BazaarSwitch(props: SwitchProps) {
+  return <StyledSwitch {...props} />;
+}

package/src/components-v2/BazaarTextField.tsx

@@ -0,0 +1,73 @@
+import Box, { BoxProps } from "@mui/material/Box";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+// CUSTOM COMPONENT
+import { H6 } from "./Typography";
+
+// ==============================================================
+type Props = TextFieldProps & BoxProps;
+// ==============================================================
+
+export default function BazaarTextField({
+  label,
+  InputProps,
+  ...props
+}: Props) {
+  const boxProps: BoxProps = {};
+  const textFieldProps: TextFieldProps = {};
+
+  for (const key in props) {
+    if (SPACE_PROPS_LIST.includes(key)) boxProps.key = props.key;
+    else textFieldProps.key = props.key;
+  }
+
+  return (
+    <Box {...boxProps}>
+      {/* INPUT LEVEL TEXT */}
+      {label ? (
+        <H6 mb={1} fontSize={13} color="grey.700">
+          {label}
+        </H6>
+      ) : null}
+
+      {/* INPUT FIELD SECTION */}
+      <TextField
+        InputProps={{
+          ...InputProps,
+          style: { ...InputProps?.style, height: 44 },
+        }}
+        {...textFieldProps}
+      />
+    </Box>
+  );
+}
+
+const SPACE_PROPS_LIST = [
+  "m",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mx",
+  "my",
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "px",
+  "py",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginX",
+  "marginY",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingX",
+  "paddingY",
+];

package/src/components-v2/BoxShadowCard.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { styled } from "@mui/material/styles";
+
+export const BorderShadowCard = styled("div")(({ theme }) => ({
+  borderRadius: 4,
+  padding: "0.5rem 0px",
+  transformOrigin: "top",
+  boxShadow: "rgba(149, 157, 165, 0.1) 0px 8px 24px;",
+  backgroundColor: theme.palette.background.paper,
+  border: "1px solid rgba(0, 0, 0, 0.1)",
+  marginBottom: "1rem",
+}));
+
+// these should use theme
+export const lightShadow = { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)" };
+export const lightBorder = { border: "1px solid rgba(0, 0, 0, 0.1)" };