@evenicanpm/storefront-core 1.2.2 → 1.3.0

package/src/theme/theme-colors.ts

@@ -1,205 +0,0 @@
-// =================================================================
-interface CustomPaletteColor {
-	50: string;
-	100: string;
-	200: string;
-	300: string;
-	400: string;
-	600: string;
-	700: string;
-	800: string;
-	900: string;
-	main: string;
-	contrastText: string;
-}
-
-declare module "@mui/material/styles" {
-	interface Palette {
-		dark: CustomPaletteColor;
-		paste: CustomPaletteColor;
-		marron: CustomPaletteColor;
-		orange: CustomPaletteColor;
-		bluish: CustomPaletteColor;
-	}
-
-	interface PaletteOptions {
-		gold: CustomPaletteColor;
-		dark: CustomPaletteColor;
-		paste: CustomPaletteColor;
-		marron: CustomPaletteColor;
-		orange: CustomPaletteColor;
-		bluish: CustomPaletteColor;
-	}
-}
-// =================================================================
-
-export const grey = {
-	900: "#2B3445", // Main Text
-	800: "#373F50", // Paragraph
-	700: "#4B566B",
-	600: "#7D879C", // Low Priority form Title/Text
-	500: "#AEB4BE",
-	400: "#DAE1E7", // Border
-	300: "#E3E9EF",
-	200: "#F3F5F9", // Line Stroke
-	100: "#FFFFFF",
-};
-
-export const primary = {
-	100: "#FCE9EC",
-	200: "#F8C7CF",
-	300: "#F07D90",
-	400: "#EC6178",
-	500: "#D23F57",
-	600: "#E63E58",
-	700: "#E3364E",
-	800: "#DF2E44",
-	900: "#D91F33",
-};
-
-export const secondary = {
-	100: "#e8e8ee",
-	200: "#b9bacb",
-	300: "#8a8ca8",
-	400: "#5b5d85",
-	500: "#141850",
-	600: "#0F3460",
-	700: "#101340",
-	800: "#0e1138",
-	900: "#0c0e30",
-	main: "#0F3460",
-	dark: "#0c0e30",
-};
-
-export const error = {
-	100: "#FFEAEA",
-	200: "#FFCBCB",
-	300: "#FFA9A9",
-	400: "#FF6D6D",
-	500: "#FF5353",
-	600: "#FF4C4C",
-	700: "#FF4242",
-	800: "#FF3939",
-	900: "#FF2929",
-	main: "#E94560",
-};
-
-export const success = {
-	100: "#E7F9ED",
-	200: "#C2F1D1",
-	300: "#99E8B3",
-	400: "#52D77E",
-	500: "#33D067",
-	600: "#2ECB5F",
-	700: "#27C454",
-	800: "#20BE4A",
-	900: "#0b7724",
-	main: "rgb(51, 208, 103)",
-};
-
-export const blue = {
-	50: "#f3f5f9",
-	100: "#DBF0FE",
-	200: "#B8DEFE",
-	300: "#94C9FE",
-	400: "#7AB6FD",
-	500: "#4E97FD",
-	600: "#3975D9",
-	700: "#2756B6",
-	800: "#183C92",
-	900: "#0E2979",
-	main: "#4E97FD",
-	contrastText: "#FFFFFF",
-};
-
-export const marron = {
-	50: "#f3f5f9",
-	100: "#F6F2ED",
-	200: "#F8DBD1",
-	300: "#EBBCB3",
-	400: "#D89C98",
-	600: "#A3545C",
-	700: "#883948",
-	800: "#6E2438",
-	900: "#5B162F",
-	main: "#BE7374",
-};
-
-export const paste = {
-	50: "#F5F5F5",
-	100: "#DDFBF1",
-	200: "#BDF7E8",
-	300: "#97E8DA",
-	400: "#76D2CA",
-	600: "#36929A",
-	700: "#257181",
-	800: "#175368",
-	900: "#0E3D56",
-	main: "#4BB4B4",
-	contrastText: "#FFFFFF",
-};
-
-export const orange = {
-	50: "#FEE9D2",
-	100: "#FDD8AF",
-	200: "#FCC487",
-	300: "#FCB05F",
-	400: "#FB9C37",
-	500: "#FA8C16",
-	600: "#C86904",
-	700: "#A05403",
-	800: "#783F03",
-	900: "#502A02",
-	main: "#FA8C16",
-	dark: "#C86904",
-	light: "#FDD8AF",
-};
-
-export const bluish = {
-	100: "#DDFBF1",
-	200: "#BDF7E8",
-	300: "#97E8DA",
-	400: "#76D2CA",
-	500: "#4BB4B4",
-	600: "#36929A",
-	700: "#257181",
-	800: "#175368",
-	900: "#0E3D56",
-	main: "#4BB4B4",
-	dark: "#36929A",
-	light: "#BDF7E8",
-};
-
-export const warning = {
-	100: "#FFF8E5",
-	main: "#FFCD4E",
-	dark: "#FA8C16",
-	contrastText: "#FFFFFF",
-};
-
-export const gold = {
-	main: "#BB9C36",
-};
-
-export const bluishBackground = "#F6F9FC";
-
-export const dark = { main: "#1F2937" };
-export const white = { main: "#fff" };
-
-export const themeColors = {
-	dark,
-	grey,
-	gold,
-	paste,
-	error,
-	orange,
-	marron,
-	bluish,
-	warning,
-	success,
-	secondary,
-	info: blue,
-	divider: grey[200],
-	background: { default: grey[100] },
-	text: { primary: grey[900], secondary: grey[800], disabled: grey[400] },
-};

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;
-};