nexus-shared 1.1.20 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexus-shared",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "Nexus shared React components for Next.js",
   "type": "module",
   "sideEffects": [

package/src/api-services/system-service.tsx

@@ -1,20 +1,15 @@
 "use server";
 
 import { IThemeInformation } from "../interface";
-import { EMenuTargets, IClientMenu, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
+import { EMenuTargets, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
 import { APIS, NEXUS_CONFIG, NEXUS_INFO } from "../nexus.environments";
 import { HttpGet } from "../services/http-services";
 
-const TOKEN_GLOBAL_CLIENT_MENU = "DJ3FKL4_IOR4U5_I4O5J4KDLJ_U_IO";
-const TOKEN_GLOBAL_UTILITY_MENU = "DJ3FKL4_IOR4U5_I4O5J4KDLJ_dfj45k_d";
-const TOKEN_GLOBAL_PANEL_MENU = "dj_dfjk3453IOR4U5_I4O5J4KDLJ_dfj45k_d";
-const TOKEN_GLOBAL_THEMES = "DJWJR_GJDK_65GKD54ZJD_00";
-
-export const GetClientMenusAsync = async (): Promise<IClientMenu[]> => {
-  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/GlobalMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_CLIENT_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
-  if (!response.isSuccess) return [];
-  return response.result as IClientMenu[];
-};
+// @ts-ignore
+const processEnv = process.env;
+const TOKEN_GLOBAL_UTILITY_MENU = processEnv.TOKEN_GLOBAL_UTILITY_MENU as string;
+const TOKEN_GLOBAL_PANEL_MENU = processEnv.TOKEN_GLOBAL_PANEL_MENU as string;
+const TOKEN_GLOBAL_THEMES = processEnv.TOKEN_GLOBAL_THEMES as string;
 
 export const GetUtilityMenusAsync = async (): Promise<IUtilityMenu[]> => {
   const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/UtilityMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_UTILITY_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);

package/src/components/documents/button.tsx

@@ -1,7 +1,9 @@
 import Link from "next/link";
 import React from "react";
 import { IsValidURL } from "../../helpers/browser-helpers";
-import { SetElementStyles } from "../../helpers/element-helpers";
+import { SET_BUTTON_ACTIVE_CLASS, SetElementStyles } from "../../helpers/element-helpers";
+
+export { SET_BUTTON_ACTIVE_CLASS };
 import { DEFAULT_BUTTON_CLASS, DEFAULT_LINK_BUTTON_STYLE, EButtonTypes, ETargets, IButton } from "../../interfaces/button-interfaces";
 import { DEFAULT_ICON_SIZE, EIconTypes } from "../../interfaces/icon-interfaces";
 import { COLUMN_SIZE_ATTRIBUTE_KEY, EFlexPositions, EOpacity } from "../../interfaces/layout-interfaces";
@@ -10,17 +12,6 @@ import { ClickHandler, UN } from "../../interfaces/type-interfaces";
 import { NEXUS_CONFIG } from "../../nexus.environments";
 import { CreateIcon, Icon } from "./icon-box";
 
-export const SET_BUTTON_ACTIVE_CLASS = (isActive: boolean, element: HTMLElement, overrideBackgroundColor?: EBackgroundColors | UN, overrideBorderColor?: EBackgroundColors | UN, overrideTextColor?: EBackgroundColors | UN, overrideActiveClass?: string | UN) => {
-  if (!element) return;
-
-  if (isActive && overrideBackgroundColor) element.style.setProperty("--ACTIVE_BACKGROUND_COLOR", overrideBackgroundColor);
-  if (isActive && overrideBorderColor) element.style.setProperty("--ACTIVE_BORDER_COLOR", overrideBorderColor);
-  if (isActive && overrideTextColor) element.style.setProperty("--ACTIVE_TEXT_COLOR", overrideTextColor);
-
-  if (isActive) element.classList.add(overrideActiveClass ?? "active");
-  else element.classList.remove(overrideActiveClass ?? "active");
-};
-
 export const Button = ({ button, buttonType, styles, needColumnSize }: { button: IButton; buttonType?: EButtonTypes; styles?: React.CSSProperties | UN; needColumnSize?: boolean | UN }) => {
   return IsValidURL(button.url) ? (
     <Link href={button.url ?? "#"} style={styles ?? undefined} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder ?? 0} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>

package/src/components/layouts/global-layout.tsx

@@ -16,6 +16,8 @@ import "./../../styles/nexus.loader.css";
 import "./../../styles/nexus.logic.css";
 import "./../../styles/nexus.utility.css";
 
+//  import "./../../styles/nexus.grid-view.css";
+
 const inter = Inter({ weight: ["300", "400", "500", "600", "700", "800"], subsets: ["latin"] });
 
 export const GlobalLayout = async ({ children, globalLayout }: Readonly<{ children: React.ReactNode; globalLayout: IGlobalLayout }>) => {
@@ -53,6 +55,9 @@ export const GlobalLayout = async ({ children, globalLayout }: Readonly<{ childr
         {children}
         <Script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" strategy="lazyOnload"></Script>
         <Script noModule src="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/ionicons/ionicons.js" strategy="lazyOnload"></Script>
+        {
+          // <div id="half-mm-grid"></div>
+        }
       </body>
     </html>
   );

package/src/components/layouts/utility-menu.tsx

@@ -11,7 +11,7 @@ import { ProfilePanel } from "./panels/user-panel";
 
 export const UtilityMenu = ({ utilityMenus, userPanels, column, paddingRight, globalLayout, iconBoxBackground, hasAccessToken }: Readonly<{ utilityMenus: IUtilityMenu[]; userPanels: IPanelMenu[]; column?: number; paddingRight?: number; globalLayout: IGlobalLayout; iconBoxBackground: EBackgrounds; hasAccessToken?: boolean | UN }>) => {
   return (
-    <div style={{ paddingRight: paddingRight ?? 0 }} className={`utilities df fr ac jr h100p col-${column ?? 12}`}>
+    <div className={`utilities df fr ac jr h100p pr${paddingRight ?? 0} col-${column ?? 12}`}>
       {utilityMenus.map((utilityMenu, index) => (
         <UtilityIcon key={index} utilityMenu={utilityMenu} boxBackground={iconBoxBackground} globalLayout={globalLayout} />
       ))}

package/src/helpers/element-helpers.tsx

@@ -1,4 +1,70 @@
+import { EBackgroundColors, EBackgrounds, EColorTypes } from "../interfaces/theme-interfaces";
 import { UN } from "../interfaces/type-interfaces";
+import { GetDynamicColor } from "../services/theme-service";
+import { GetCurrentBaseURL, GetCurrentFullURL, SetDocumentTitleDebounce } from "./browser-helpers";
+
+const HOME_PATHS = ["/", "", "/home", "home", "/index", "index"];
+
+export interface IMenuDocumentTitle {
+  menuUrl?: string;
+  menuName: string;
+  documentTitle?: string;
+}
+
+export interface IFindActiveMenuOptions {
+  rootPath?: string;
+  defaultMenuUrl?: string;
+}
+
+export const SET_BUTTON_ACTIVE_CLASS = (isActive: boolean, element: HTMLElement, overrideBackgroundColor?: EBackgroundColors | UN, overrideBorderColor?: EBackgroundColors | UN, overrideTextColor?: EBackgroundColors | UN, overrideActiveClass?: string | UN) => {
+  if (!element) return;
+
+  if (isActive && overrideBackgroundColor) element.style.setProperty("--ACTIVE_BACKGROUND_COLOR", overrideBackgroundColor);
+  if (isActive && overrideBorderColor) element.style.setProperty("--ACTIVE_BORDER_COLOR", overrideBorderColor);
+  if (isActive && overrideTextColor) element.style.setProperty("--ACTIVE_TEXT_COLOR", overrideTextColor);
+
+  if (isActive) element.classList.add(overrideActiveClass ?? "active");
+  else element.classList.remove(overrideActiveClass ?? "active");
+};
+
+export function FindActiveMenu<T extends IMenuDocumentTitle>(menus: T[], options?: IFindActiveMenuOptions): T | undefined {
+  const rootPath = options?.rootPath ?? "";
+  const defaultMenuUrl = options?.defaultMenuUrl ?? "/home";
+
+  const fullUrl = GetCurrentFullURL()?.split("?")[0] ?? "";
+  const baseURL = GetCurrentBaseURL() ?? "";
+  const url = fullUrl.replace(baseURL, "");
+
+  const relativePath = rootPath ? (url === rootPath || url === `${rootPath}/` ? "/" : url.startsWith(`${rootPath}/`) ? url.slice(rootPath.length) : url) : url;
+  const normalizedRelativePath = relativePath.replace(/^\//, "");
+  const isHome = HOME_PATHS.includes(relativePath) || HOME_PATHS.includes(normalizedRelativePath);
+
+  let activeMenu: T | undefined;
+
+  if (isHome) {
+    activeMenu = rootPath ? menus.find((x) => x.menuUrl === defaultMenuUrl.replace(/^\//, "")) : menus.find((x) => x.menuUrl === defaultMenuUrl);
+  } else {
+    activeMenu = menus.find((x) => {
+      const menuPath = rootPath ? `${rootPath}/${x.menuUrl}` : (x.menuUrl ?? "");
+      return url.includes(menuPath) || url.includes(x.menuUrl ?? "");
+    });
+  }
+
+  SetDocumentTitleDebounce(activeMenu?.documentTitle ?? activeMenu?.menuName);
+  return activeMenu;
+}
+
+export const SetSiblingMenuLinkActive = (activeLink: HTMLElement, container: HTMLElement | UN, linkSelector: string, boxBackground: EBackgrounds, activeClass: string = "left-active") => {
+  if (!activeLink) return;
+
+  SET_BUTTON_ACTIVE_CLASS(true, activeLink, GetDynamicColor(boxBackground, EColorTypes.Hover) as EBackgroundColors, null, GetDynamicColor(boxBackground, EColorTypes.Text) as EBackgroundColors, activeClass);
+
+  const menuContainer = container ?? activeLink.closest("ul");
+  const allMenuLinks = menuContainer?.querySelectorAll(linkSelector) ?? [];
+  for (const menuLink of allMenuLinks) {
+    if (menuLink !== activeLink) SET_BUTTON_ACTIVE_CLASS(false, menuLink as HTMLElement, null, null, null, activeClass);
+  }
+};
 
 export function RenderChildren<T>(parentContainer: HTMLElement, elementList: HTMLElement[], toggleButton: HTMLElement, activeItem: T | UN, visibleItems: T[], hiddenItems: T[], createItem: (item: T) => HTMLElement, refreshElementClass: (element: HTMLElement, activeItem: T | UN) => void, isInit: boolean, isHiddenItemClicked: boolean, dataUniqueKey: string, dataAttributeKey: string) {
   if (!isInit) {

package/src/interfaces/menu-interfaces.tsx

@@ -1,4 +1,5 @@
 import { EIcons } from "./icon-interfaces";
+import { UN } from "./type-interfaces";
 
 export const UTILITIES_BUTTON_PREFIX = "btn-utility-";
 export const GetUtilityMenuCode = (utilityCode: string) => `${UTILITIES_BUTTON_PREFIX}${utilityCode}`;
@@ -14,7 +15,7 @@ export enum EMenuVisibility {
 }
 export interface IMenuBase {
   id?: string | number;
-  menuVisibilities: EMenuVisibility;
+  menuVisibilities: EMenuVisibility | UN;
   menuName: string;
   menuCode: string;
   menuIcon: EIcons;
@@ -34,6 +35,9 @@ export interface IClientMenu extends IMenuBase {
   pageTitle: string;
   breadcrumbTitle?: string;
 }
+export interface IAdminMenu extends IClientMenu {
+  parentId?: string | number;
+}
 export const BUTTON_IDENTITY = (isneedPrefix: boolean) => {
   const _ = isneedPrefix ? UTILITIES_BUTTON_PREFIX : "";
   return {

package/src/services/theme-service.tsx

@@ -134,6 +134,8 @@ export const InitializeStyles = () => {
     const css = `min-width: ${size} ${I}; min-height: ${size} ${I}; max-width: ${size} ${I}; max-height: ${size} ${I};`;
     _setRule(sheet, `.ib.${k}`, css);
   });
+
+  _setVariable(`--TOP_HEIGHT`, `calc(var(--IH) * ${ICON_BOX_SCALES.sm})`);
 };
 export const SwitchTheme = (themeCode: string): boolean => {
   const themeInformations = O.systemThemes;

package/src/sso-config/cookie-helpers.tsx

@@ -3,8 +3,8 @@ import { NextRequest, NextResponse } from "next/server";
 import { VerifyAccessToken } from "./auth-token-validation";
 import { DecryptCookieValue, EncryptCookieValue } from "./cookie-encryption";
 import { GetAuthCookieOptions } from "./redirect-context-helpers";
-import { CookieInfo, SSOAuthResponse } from "./sso-interfaces";
 import { SSO_CONFIG } from "./sso-config";
+import { CookieInfo, SSOAuthResponse } from "./sso-interfaces";
 
 export const AUTH_COOKIES = {
   ssoSession: "sso_session",

package/src/styles/nexus.grid-view.css

@@ -0,0 +1,42 @@
+:root {
+  --Border-Size: 0.03rem;
+}
+
+#inch-grid,
+#cm-grid,
+#mm-grid,
+#half-mm-grid,
+#quarter-mm-grid {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000000;
+  width: 100%;
+  height: 100vh;
+  pointer-events: none;
+}
+
+#inch-grid {
+  background-image: repeating-linear-gradient(0deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 1in), repeating-linear-gradient(90deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 1in);
+  background-size: 100% 1in, 1in 1in;
+  display: none;
+}
+
+#cm-grid {
+  background-image: repeating-linear-gradient(0deg, rgb(70, 70, 70), rgb(70, 70, 700) var(--Border-Size), transparent var(--Border-Size), transparent 1cm), repeating-linear-gradient(90deg, rgb(70, 70, 700), rgb(700, 700, 700) var(--Border-Size), transparent var(--Border-Size), transparent 1cm);
+  background-size: 100% 1cm, 1cm 1cm;
+}
+
+#mm-grid {
+  background-image: repeating-linear-gradient(0deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 1cm), repeating-linear-gradient(90deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 5mm);
+  background-size: 100% 5mm, 5mm 5mm;
+}
+#half-mm-grid {
+  background-image: repeating-linear-gradient(0deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 1cm), repeating-linear-gradient(90deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 2.5mm);
+  background-size: 100% 2.5mm, 2.5mm 2.5mm;
+}
+
+#quarter-mm-grid {
+  background-image: repeating-linear-gradient(0deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 1cm), repeating-linear-gradient(90deg, rgb(200, 200, 200), rgb(200, 200, 200) var(--Border-Size), transparent var(--Border-Size), transparent 1.25mm);
+  background-size: 100% 1.25mm, 1.25mm 1.25mm;
+}