@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/theme/theme-options.ts

@@ -1,40 +1,40 @@
 import { components } from "./components";
 import { typography } from "./typography";
 import {
-  blue,
-  marron,
-  paste,
-  primary,
-  themeColors,
-  orange,
-  bluish,
-  success,
-  warning,
-  gold,
+	blue,
+	marron,
+	paste,
+	primary,
+	themeColors,
+	orange,
+	bluish,
+	success,
+	warning,
+	gold,
 } from "./theme-colors";
 
 const THEMES = {
-  GIFT: "GIFT",
-  HEALTH: "HEALTH",
-  DEFAULT: "DEFAULT",
-  GROCERY: "GROCERY",
-  PASTE: "PASTE",
-  ORANGE: "ORANGE",
-  GOLD: "GOLD",
-  BLUISH: "BLUISH",
-  GREEN: "GREEN",
-  YELLOW: "YELLOW",
+	GIFT: "GIFT",
+	HEALTH: "HEALTH",
+	DEFAULT: "DEFAULT",
+	GROCERY: "GROCERY",
+	PASTE: "PASTE",
+	ORANGE: "ORANGE",
+	GOLD: "GOLD",
+	BLUISH: "BLUISH",
+	GREEN: "GREEN",
+	YELLOW: "YELLOW",
 };
 
 const breakpoints = {
-  values: {
-    xs: 0,
-    sm: 600,
-    md: 960,
-    lg: 1280,
-    xl: 1600,
-    xxl: 1920,
-  },
+	values: {
+		xs: 0,
+		sm: 600,
+		md: 960,
+		lg: 1280,
+		xl: 1600,
+		xxl: 1920,
+	},
 };
 
 /*
@@ -43,130 +43,130 @@ WE CREATED MULTIPLE THEME OPTIONS FOR DIFFERENT SHOP VARIATION.
 YOU CAN JUST KEEP [THEMES.DEFAULT] AND REMOVE OTHER THEME OPTIONS.
 */
 const themesOptionList = {
-  [THEMES.DEFAULT]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
-  },
-  [THEMES.GROCERY]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
-  },
-  [THEMES.PASTE]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...paste, light: paste[100] }, ...themeColors },
-  },
-  [THEMES.HEALTH]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...blue, light: blue[100] }, ...themeColors },
-  },
-  [THEMES.GIFT]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...marron, light: marron[100] }, ...themeColors },
-  },
-  [THEMES.ORANGE]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...orange }, ...themeColors },
-  },
-  [THEMES.GOLD]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...gold }, ...themeColors },
-  },
-  [THEMES.BLUISH]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...bluish }, ...themeColors },
-  },
-  [THEMES.GREEN]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...success }, ...themeColors },
-  },
-
-  [THEMES.YELLOW]: {
-    typography,
-    components,
-    breakpoints,
-    palette: { primary: { ...warning }, ...themeColors },
-  },
+	[THEMES.DEFAULT]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+	},
+	[THEMES.GROCERY]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+	},
+	[THEMES.PASTE]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...paste, light: paste[100] }, ...themeColors },
+	},
+	[THEMES.HEALTH]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...blue, light: blue[100] }, ...themeColors },
+	},
+	[THEMES.GIFT]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...marron, light: marron[100] }, ...themeColors },
+	},
+	[THEMES.ORANGE]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...orange }, ...themeColors },
+	},
+	[THEMES.GOLD]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...gold }, ...themeColors },
+	},
+	[THEMES.BLUISH]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...bluish }, ...themeColors },
+	},
+	[THEMES.GREEN]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...success }, ...themeColors },
+	},
+
+	[THEMES.YELLOW]: {
+		typography,
+		components,
+		breakpoints,
+		palette: { primary: { ...warning }, ...themeColors },
+	},
 };
 
 const themeOptions = (pathname: string) => {
-  let themeOption;
+	let themeOption;
 
-  const path = pathname || "/"; // Fallback to root if null
-  /*
+	const path = pathname || "/"; // Fallback to root if null
+	/*
     YOU CAN ALSO REMOVE updateTheme function
     AND FOLLOWING ENTIRE switch case BLOCK.
   */
-  const updateTheme = (themeName: string) => {
-    themeOption = themesOptionList[themeName];
-  };
-
-  switch (path) {
-    case "/":
-      updateTheme(THEMES.DEFAULT);
-      break;
-
-    case "/furniture-1":
-      updateTheme(THEMES.PASTE);
-      break;
-
-    case "/medical":
-      updateTheme(THEMES.PASTE);
-      break;
-
-    case "/furniture-2":
-      updateTheme(THEMES.ORANGE);
-      break;
-
-    case "/furniture-3":
-      updateTheme(THEMES.GOLD);
-      break;
-
-    case "/health-beauty":
-      updateTheme(THEMES.HEALTH);
-      break;
-
-    case "/gift-shop":
-      updateTheme(THEMES.GIFT);
-      break;
-
-    default:
-      if (path.startsWith("/grocery-4")) {
-        themeOption = themesOptionList[THEMES.GREEN];
-      } else if (path.startsWith("/gadget-3")) {
-        themeOption = themesOptionList[THEMES.HEALTH];
-      } else if (path.startsWith("/admin") || path.startsWith("/vendor")) {
-        themeOption = themesOptionList[THEMES.HEALTH];
-      } else {
-        themeOption = themesOptionList[THEMES.DEFAULT];
-      }
-
-      break;
-  }
-  /*
+	const updateTheme = (themeName: string) => {
+		themeOption = themesOptionList[themeName];
+	};
+
+	switch (path) {
+		case "/":
+			updateTheme(THEMES.DEFAULT);
+			break;
+
+		case "/furniture-1":
+			updateTheme(THEMES.PASTE);
+			break;
+
+		case "/medical":
+			updateTheme(THEMES.PASTE);
+			break;
+
+		case "/furniture-2":
+			updateTheme(THEMES.ORANGE);
+			break;
+
+		case "/furniture-3":
+			updateTheme(THEMES.GOLD);
+			break;
+
+		case "/health-beauty":
+			updateTheme(THEMES.HEALTH);
+			break;
+
+		case "/gift-shop":
+			updateTheme(THEMES.GIFT);
+			break;
+
+		default:
+			if (path.startsWith("/grocery-4")) {
+				themeOption = themesOptionList[THEMES.GREEN];
+			} else if (path.startsWith("/gadget-3")) {
+				themeOption = themesOptionList[THEMES.HEALTH];
+			} else if (path.startsWith("/admin") || path.startsWith("/vendor")) {
+				themeOption = themesOptionList[THEMES.HEALTH];
+			} else {
+				themeOption = themesOptionList[THEMES.DEFAULT];
+			}
+
+			break;
+	}
+	/*
         IF YOU REMOVE THE switch case, YOU NEED TO ASSIGN VALUE TO themeOptions
         E.G. themeOption = themesOptions[THEMES.DEFAULT];
     */
-  // themeOption = themesOptions[THEMES.DEFAULT];
+	// themeOption = themesOptions[THEMES.DEFAULT];
 
-  return themeOption;
+	return themeOption;
 };
 
 export default themeOptions;

package/src/theme/theme-provider.tsx

@@ -12,33 +12,33 @@ import NextAppDirEmotionCacheProvider from "./emotion-cache";
 import { ThemeItem } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
 
 const ThemeProvider = ({
-  children,
-  baseTheme,
+	children,
+	baseTheme,
 }: {
-  children: ReactNode;
-  baseTheme: ThemeItem | null | undefined;
+	children: ReactNode;
+	baseTheme: ThemeItem | null | undefined;
 }) => {
-  const pathname = usePathname();
-  const themeOptions = customThemeOptions(pathname);
-  const mergedThemeOptions = merge({}, { ...themeOptions, ...baseTheme });
-  let theme = createTheme(mergedThemeOptions as ThemeOptions);
+	const pathname = usePathname();
+	const themeOptions = customThemeOptions(pathname);
+	const mergedThemeOptions = merge({}, { ...themeOptions, ...baseTheme });
+	let theme = createTheme(mergedThemeOptions as ThemeOptions);
 
-  theme = responsiveFontSizes(theme);
+	theme = responsiveFontSizes(theme);
 
-  // theme shadows
-  theme.shadows[1] = "0px 1px 3px rgba(3, 0, 71, 0.09)";
-  theme.shadows[2] = "0px 4px 16px rgba(43, 52, 69, 0.1)";
-  theme.shadows[3] = "0px 8px 45px rgba(3, 0, 71, 0.09)";
-  theme.shadows[4] = "0px 0px 28px rgba(3, 0, 71, 0.01)";
+	// theme shadows
+	theme.shadows[1] = "0px 1px 3px rgba(3, 0, 71, 0.09)";
+	theme.shadows[2] = "0px 4px 16px rgba(43, 52, 69, 0.1)";
+	theme.shadows[3] = "0px 8px 45px rgba(3, 0, 71, 0.09)";
+	theme.shadows[4] = "0px 0px 28px rgba(3, 0, 71, 0.01)";
 
-  return (
-    <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
-      <MuiThemeProvider theme={theme}>
-        <CssBaseline />
-        {children}
-      </MuiThemeProvider>
-    </NextAppDirEmotionCacheProvider>
-  );
+	return (
+		<NextAppDirEmotionCacheProvider options={{ key: "css" }}>
+			<MuiThemeProvider theme={theme}>
+				<CssBaseline />
+				{children}
+			</MuiThemeProvider>
+		</NextAppDirEmotionCacheProvider>
+	);
 };
 
 export default ThemeProvider;

package/src/theme/typography.ts

@@ -8,15 +8,15 @@ export const fontSize = 14;
 // });
 
 const open_sans = Open_Sans({
-  weight: ["400", "500", "700"],
-  subsets: ["latin-ext"],
-  variable: "--font-open_sans",
+	weight: ["400", "500", "700"],
+	subsets: ["latin-ext"],
+	variable: "--font-open_sans",
 });
 
 export const typography = {
-  fontSize,
-  htmlFontSize: 16,
-  fontFamily: open_sans.style.fontFamily,
-  body1: { fontSize },
-  body2: { fontSize },
+	fontSize,
+	htmlFontSize: 16,
+	fontFamily: open_sans.style.fontFamily,
+	body1: { fontSize },
+	body2: { fontSize },
 };

package/src/theme/utils.ts

@@ -1,17 +1,17 @@
 export const classes = () => {
-  const obj: Record<string, unknown> = {};
+	const obj: Record<string, unknown> = {};
 
-  for (let i = 1; i < 11; i++) {
-    // PADDING
-    obj[`.p-${i}`] = { padding: i + "rem" };
-    obj[`.pt-${i}`] = { paddingTop: i + "rem" };
-    obj[`.pb-${i}`] = { paddingBottom: i + "rem" };
+	for (let i = 1; i < 11; i++) {
+		// PADDING
+		obj[`.p-${i}`] = { padding: i + "rem" };
+		obj[`.pt-${i}`] = { paddingTop: i + "rem" };
+		obj[`.pb-${i}`] = { paddingBottom: i + "rem" };
 
-    // MARGIN
-    obj[`.m-${i}`] = { margin: i + "rem" };
-    obj[`.mt-${i}`] = { marginTop: i + "rem" };
-    obj[`.mb-${i}`] = { marginBottom: i + "rem" };
-  }
+		// MARGIN
+		obj[`.m-${i}`] = { margin: i + "rem" };
+		obj[`.mt-${i}`] = { marginTop: i + "rem" };
+		obj[`.mb-${i}`] = { marginBottom: i + "rem" };
+	}
 
-  return obj;
+	return obj;
 };

package/tsconfig.json

@@ -1,32 +1,34 @@
 {
-  "compilerOptions": {
-    "target": "ES6",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "outDir": "./dist",
-    "baseUrl": "./",
-    "jsx": "preserve",
-    "typeRoots": ["../../../../storefront/node_modules/@types"],
-    "paths": {
-      "*": ["../../../../storefront/node_modules/*"],
-      "@/lib/*": ["src/lib/*"],
-      "@/api-manager/*": ["src/api-manager/*"],
-      "@/auth/*": ["src/auth/*"],
-      "@/_components/*": ["src/components/_components/*"],
-      "@/components/*": ["src/components/*"],
-      "@/cms/*": ["src/cms/*"],
-      "@/schemas/*": ["src/api-manager/schemas/*"],
-      "@/services/*": ["src/api-manager/services/*"],
-      "@/hooks/*": ["src/hooks/*"],
-      "@config": ["src/config"],
-      "@messages/*": ["../../../../storefront/messages/*"]
-    }
-  },
-  "include": ["src"]
+	"compilerOptions": {
+		"target": "ES6",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"outDir": "./dist",
+		"baseUrl": "./",
+		"jsx": "preserve",
+		"typeRoots": ["../../../../storefront/node_modules/@types"],
+		"paths": {
+			"*": ["../../../../storefront/node_modules/*"],
+			"@evenicanpm/storefront-core/src/*": ["./src/*"],
+			"@evenicanpm/storefront-core/src/lib/*": ["src/lib/*"],
+			"@evenicanpm/storefront-core/src/api-manager/*": ["src/api-manager/*"],
+			"@evenicanpm/storefront-core/src/components/*": ["src/components-v2/*"],
+			"@/auth/*": ["src/auth/*"],
+			"@/_components/*": ["src/components/_components/*"],
+			"@/components/*": ["src/components/*"],
+			"@/cms/*": ["src/cms/*"],
+			"@/schemas/*": ["src/api-manager/schemas/*"],
+			"@/services/*": ["src/api-manager/services/*"],
+			"@evenicanpm/storefront-core/src/hooks/*": ["src/hooks/*"],
+			"@config": ["src/config"],
+			"@messages/*": ["../../../../storefront/messages/*"]
+		}
+	},
+	"include": ["src", "."]
 }

package/typedoc.js

@@ -1,12 +1,12 @@
 module.exports = {
-  entryPoints: ["./src/components-v2/**/compound/*.tsx"],
-  out: "docs",
-  theme: "default",
-  name: "e4 ui",
-  plugin: ["typedoc-plugin-merge-modules"],
-  mergeModulesRenameDefaults: true, // NEW option of TypeDoc added by this plugin
-  mergeModulesMergeMode: "module", // NEW option of TypeDoc added by this plugin
-  excludeInternal: true,
-  skipErrorChecking: true,
-  tsconfig: "docs.tsconfig.json",
+	entryPoints: ["./src/components-v2/**/compound/*.tsx"],
+	out: "docs",
+	theme: "default",
+	name: "e4 ui",
+	plugin: ["typedoc-plugin-merge-modules"],
+	mergeModulesRenameDefaults: true, // NEW option of TypeDoc added by this plugin
+	mergeModulesMergeMode: "module", // NEW option of TypeDoc added by this plugin
+	excludeInternal: true,
+	skipErrorChecking: true,
+	tsconfig: "docs.tsconfig.json",
 };

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/react-webpack5'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/src/components/Blocks/BlockManager.tsx

@@ -1,67 +0,0 @@
-import { Box } from "@mui/material";
-import {
-  Hero,
-  FeaturePill,
-  FeaturedProducts,
-  FeaturedCategories,
-  BrandLogosScroller,
-  HeroCarousel,
-  Services,
-  ProductCarousel,
-  ProductSectionFullWidth,
-  CategoryCarousel,
-  Footer,
-  Image,
-  RichText,
-} from "./index";
-import { Block } from "./interfaces";
-
-const componentMap = {
-  "blocks.hero-section": Hero,
-  "blocks.features-pill": FeaturePill, // Should replace this with bazaar-react-ts/src/pages-sections/market-2/section-2/section-2.tsx
-  "blocks.featured-products": FeaturedProducts,
-  "blocks.featured-categories": FeaturedCategories,
-  "blocks.logo-scroller": BrandLogosScroller, // Not mobile friendly
-  "blocks.footer": Footer, // Adds to only homepage, for all pages use src/Footer component
-  "blocks.image-block": Image,
-  "blocks.rich-text": RichText, // Not mobile friendly
-
-  // Bazaar Template Blocks
-  "blocks.hero-carousel": HeroCarousel,
-  "blocks.services": Services,
-  "blocks.product-carousel": ProductCarousel,
-  "blocks.product-section-full-width": ProductSectionFullWidth,
-  "blocks.category-carousel": CategoryCarousel,
-};
-
-const getBlockComponent: <B extends Block>(
-  block: B,
-  idx: number,
-) => JSX.Element | null = (block: Block, idx: number) => {
-  const Component = componentMap[
-    block.__component as keyof typeof componentMap
-  ] as React.ComponentType<Block>;
-  return <Component key={`block-${idx}`} {...block} />;
-};
-
-interface BlockManagerProps {
-  blocks: Block[];
-}
-
-const BlockManager: React.FC<BlockManagerProps> = ({ blocks }) => {
-  if (!Array.isArray(blocks)) return null;
-  return (
-    <Box>
-      {blocks.map((block, idx) => {
-        const isLast = idx === blocks.length - 1;
-        return (
-          <Box key={`block-wrapper-${idx}`} mb={isLast ? 0 : 6}>
-            {getBlockComponent(block, idx)}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-};
-
-export default BlockManager;

package/src/components/Blocks/Components/BrandLogosScroller.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import React from "react";
-import Image from "next/image";
-import { Box, Container } from "@mui/material";
-import { keyframes } from "@emotion/react";
-import cmsEndPoints from "@/cms/endpoints";
-import { LogoScrollerBlock } from "../interfaces";
-
-const bounce = keyframes`
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-`;
-
-const outerScroll = {
-  width: "100%",
-  overflow: "hidden",
-  mask: "linear-gradient(90deg, transparent, white 20%, white 80%, transparent)",
-};
-
-const BrandLogosScroller = (data: LogoScrollerBlock) => {
-  const innerSlider = React.useRef<HTMLElement>(null);
-  const logos = data?.image;
-
-  const renderLogo = (logo: (typeof logos)[0]) => (
-    <Box
-      key={logo?.url}
-      sx={{
-        marginLeft: "100px",
-        marginRight: "100px",
-        position: "relative",
-        height: "100px",
-        width: "auto",
-        minWidth: "100px",
-      }}
-    >
-      <Image
-        src={cmsEndPoints.buildCmsMediaUrl(logo?.url)}
-        alt="Brand Logo"
-        fill
-        sizes="100px"
-        style={{ objectFit: "contain" }}
-      />
-    </Box>
-  );
-
-  return (
-    <Container>
-      <Box sx={outerScroll}>
-        <Box
-          sx={{
-            display: "flex",
-            flexWrap: "nowrap",
-            alignItems: "center",
-            width: "fit-content",
-            animation: `${bounce} linear 100s infinite`,
-          }}
-          ref={innerSlider}
-        >
-          {logos?.map(renderLogo)}
-          {logos?.map(renderLogo)}
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default BrandLogosScroller;