@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/theme/theme-colors.ts

@@ -0,0 +1,205 @@
+// =================================================================
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,44 @@
+"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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,17 @@
+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;
+};

package/tsconfig.json

@@ -1,30 +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",
-    "jsx": "preserve",
-    "baseUrl": "./",
-    "paths": {
-      "@/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/src/api-manager/lib/cart-cookie-handler.ts

@@ -1,14 +0,0 @@
-"use server";
-import { cookies } from "next/headers";
-
-const getCartCookie = async () => (await cookies()).get("cart_cookie")?.value;
-
-const setCartCookie = async (cartId: string) => {
-  (await cookies()).set("cart_cookie", cartId);
-};
-
-const deleteCartCookie = async () => {
-  (await cookies()).delete("cart_cookie");
-};
-
-export { getCartCookie, setCartCookie, deleteCartCookie };