@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/theme/theme-options-sample.ts

@@ -1,69 +0,0 @@
-import { components } from "./components";
-import { typography } from "./typography";
-import { primary, themeColors } from "./theme-colors";
-
-/********************************************
- * You can delete themeOptions.ts file and
- * rename this file to `themeOptions.ts`
- * Follow the documentation for more details
- *********************************************/
-
-const THEMES = {
-	GIFT: "GIFT",
-	HEALTH: "HEALTH",
-	DEFAULT: "DEFAULT",
-	GROCERY: "GROCERY",
-	FURNITURE: "FURNITURE",
-};
-
-const breakpoints = {
-	values: {
-		xs: 0,
-		sm: 600,
-		md: 960,
-		lg: 1280,
-		xl: 1600,
-		xxl: 1920,
-	},
-};
-
-const themesOptionList = {
-	[THEMES.DEFAULT]: {
-		typography,
-		breakpoints,
-		components: { ...components },
-		palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
-	},
-	//   [THEMES.GROCERY]: {
-	//     typography,
-	//     breakpoints,
-	//     components: { ...components },
-	//     palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
-	//   },
-	//   [THEMES.FURNITURE]: {
-	//     typography,
-	//     breakpoints,
-	//     components: { ...components },
-	//     palette: { primary: { ...paste, light: paste[100] }, ...themeColors },
-	//   },
-	//   [THEMES.HEALTH]: {
-	//     typography,
-	//     breakpoints,
-	//     components: { ...components },
-	//     palette: { primary: { ...blue, light: blue[100] }, ...themeColors },
-	//   },
-	//   [THEMES.GIFT]: {
-	//     typography,
-	//     breakpoints,
-	//     components: { ...components },
-	//     palette: { primary: { ...marron, light: marron[100] }, ...themeColors },
-	//   },
-};
-
-const themeOptions = () => {
-	// YOU CAN SET ANOTHER THEME HERE E.G. [THEMES.GROCERY] OR [THEMES.FURNITURE] ETC.
-	const themeOption = themesOptionList[THEMES.DEFAULT];
-	return themeOption;
-};
-
-export default themeOptions;

package/src/theme/theme-options.ts

@@ -1,172 +0,0 @@
-import { components } from "./components";
-import { typography } from "./typography";
-import {
-	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",
-};
-
-const breakpoints = {
-	values: {
-		xs: 0,
-		sm: 600,
-		md: 960,
-		lg: 1280,
-		xl: 1600,
-		xxl: 1920,
-	},
-};
-
-/*
-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 },
-	},
-};
-
-const themeOptions = (pathname: string) => {
-	let themeOption;
-
-	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;
-	}
-	/*
-        IF YOU REMOVE THE switch case, YOU NEED TO ASSIGN VALUE TO themeOptions
-        E.G. themeOption = themesOptions[THEMES.DEFAULT];
-    */
-	// themeOption = themesOptions[THEMES.DEFAULT];
-
-	return themeOption;
-};
-
-export default themeOptions;

package/src/theme/theme-provider.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-import { usePathname } from "next/navigation";
-import CssBaseline from "@mui/material/CssBaseline";
-import MuiThemeProvider from "@mui/material/styles/ThemeProvider";
-import responsiveFontSizes from "@mui/material/styles/responsiveFontSizes";
-import createTheme, { ThemeOptions } from "@mui/material/styles/createTheme";
-import merge from "lodash/merge";
-import customThemeOptions from "./theme-options";
-import NextAppDirEmotionCacheProvider from "./emotion-cache";
-import { ThemeItem } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
-
-const ThemeProvider = ({
-	children,
-	baseTheme,
-}: {
-	children: ReactNode;
-	baseTheme: ThemeItem | null | undefined;
-}) => {
-	const pathname = usePathname();
-	const themeOptions = customThemeOptions(pathname);
-	const mergedThemeOptions = merge({}, { ...themeOptions, ...baseTheme });
-	let theme = createTheme(mergedThemeOptions as ThemeOptions);
-
-	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)";
-
-	return (
-		<NextAppDirEmotionCacheProvider options={{ key: "css" }}>
-			<MuiThemeProvider theme={theme}>
-				<CssBaseline />
-				{children}
-			</MuiThemeProvider>
-		</NextAppDirEmotionCacheProvider>
-	);
-};
-
-export default ThemeProvider;

package/src/theme/typography.ts

@@ -1,22 +0,0 @@
-import { Open_Sans } from "next/font/google";
-export const fontSize = 14;
-
-// const roboto = Roboto({
-//   weight: ["400", "500", "700", "900"],
-//   subsets: ["latin-ext"],
-//   variable: "--font-roboto",
-// });
-
-const open_sans = 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 },
-};

package/src/theme/utils.ts

@@ -1,17 +0,0 @@
-export const classes = () => {
-	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" };
-
-		// MARGIN
-		obj[`.m-${i}`] = { margin: i + "rem" };
-		obj[`.mt-${i}`] = { marginTop: i + "rem" };
-		obj[`.mb-${i}`] = { marginBottom: i + "rem" };
-	}
-
-	return obj;
-};