nexus-shared 1.1.19 → 1.1.21

package/src/components/layouts/panels/user-panel.tsx

@@ -0,0 +1,112 @@
+import Image from "next/image";
+import React, { JSX, useEffect, useMemo, useState } from "react";
+import { GetProfileDetails } from "../../../api-services/authentication-service";
+import { BuildImageUrl, GetAuthPageURL, GetSignOutPageURL } from "../../../helpers/browser-helpers";
+import { BUTTON_IDENTITY, ClickHandler, EBackgrounds, EButtonTypes, EFileSizes, EIcons, EMenuVisibility, EOpacity, EPositions, ESizes, GetButton, GetUtilityMenuCode, IButton, ICurrentUser, IGlobalLayout, IPanelMenu, IsAdmin_SuperAdmin, UN } from "../../../interface";
+import { FILES } from "../../../nexus.environments";
+import { InputLoader, ShowLoader } from "../../../services/loader-service";
+import { SetCurrentUser } from "../../../services/user-services";
+import { Buttons } from "../../documents/button";
+import { Iconbox } from "../../documents/icon-box";
+import { GetUserRoleTag } from "../../documents/tag";
+import { GlobalDialogbox } from "../global-dialogbox";
+
+const USER_PROFILE_ID = GetUtilityMenuCode("user-profile");
+export const DEFAULT_USER_PROFILE_PICTURE_CLASS = "profile-user";
+const USER_PROFILE_BUTTON_ID = "user-profile-menu-tab";
+
+export const ProfilePanel = ({ globalLayout, userPanels, boxBackground, hasAccessToken }: Readonly<{ globalLayout: IGlobalLayout; userPanels: IPanelMenu[]; boxBackground?: EBackgrounds; hasAccessToken?: boolean | UN }>): JSX.Element => {
+  const [isLoading, setIsLoading] = useState(hasAccessToken === true);
+  const [currentUser, setCurrentUser] = useState<ICurrentUser | null>(null);
+  const groupPanels = useMemo(() => {
+    // TODO: Implement menu visibility logic
+    const isAuthenticated = currentUser && currentUser.username && hasAccessToken === true;
+    const visibilityFlag = isAuthenticated ? EMenuVisibility.AuthenticatedOnly : EMenuVisibility.GuestOnly;
+    const visibleMenus = userPanels.filter((x) => (x.menuVisibilities & visibilityFlag) !== 0);
+    return groupByGroupOrder(visibleMenus);
+  }, [userPanels, currentUser]);
+  const fetchProfileDetails = async () => {
+    setIsLoading(true);
+    InputLoader(USER_PROFILE_ID, true);
+    const response = await GetProfileDetails(true);
+    setCurrentUser(response);
+    SetCurrentUser(response);
+    setIsLoading(false);
+    InputLoader(USER_PROFILE_ID, false);
+  };
+  useEffect(() => {
+    if (hasAccessToken) fetchProfileDetails();
+  }, [hasAccessToken]);
+  return (
+    <div id={USER_PROFILE_ID} className={`pr ${ESizes.Small} ib ${boxBackground} h p2 r`}>
+      <Image src={FILES.ICONS.USER} alt="logo" width={74} height={74} className="img" />
+      {!isLoading && (
+        <GlobalDialogbox hoverEffectDelay={false} defaultPadding={0} position={EPositions.Left} buttonIdentity={USER_PROFILE_ID} iggnoreChildClick={false} defaultWidth={25}>
+          <React.Fragment>
+            <div className="bb h100 oh df ddc pl5">
+              <div style={{ display: currentUser ? "flex" : "none" }} className="df ac pr5 pt5">
+                <div className="ib xl oh item pr">
+                  {currentUser && <Iconbox onClicked={() => onEditProfileClicked(currentUser)} iconOpacity={EOpacity.NONE} iconDefaultClass="xl" defaultClass="xl pa ho1 bg950 rr" background={EBackgrounds.None} icon={EIcons.CAMERA} />}
+                  <img src={BuildImageUrl(currentUser?.profilePicture, EFileSizes.SIZE_128, FILES.ICONS.USER)} alt="profile-picture" className={`${DEFAULT_USER_PROFILE_PICTURE_CLASS} img ba2 rr`} />
+                </div>
+                <div className="ml5 w100">
+                  <div className="df ac">
+                    <h5 className="fw500 bg1 o09">{currentUser?.fullname}</h5>
+                  </div>
+                  <div className="df ac mt2">
+                    <p className="bg1 mr5 o06">{currentUser?.emailAddress ?? `@${currentUser?.username}`}</p>
+                    {IsAdmin_SuperAdmin(currentUser?.roleName) && GetUserRoleTag(currentUser?.roleName, true, "")}
+                  </div>
+                </div>
+              </div>
+
+              <div className="sb sm h100 mt5 mb5 pr5">
+                {groupPanels.map((group, index) => (
+                  <Buttons key={index} padding={0} pt={index !== 0 ? 5 : 0} buttons={group} />
+                ))}
+              </div>
+            </div>
+          </React.Fragment>
+        </GlobalDialogbox>
+      )}
+    </div>
+  );
+};
+
+const onEditProfileClicked = (currentUser: ICurrentUser) => {
+  // TODO: Implement edit profile functionality
+};
+
+function groupByGroupOrder(menuArray: IPanelMenu[]): IButton[][] {
+  const grouped: Record<number, IButton[]> = {};
+  menuArray.forEach((menu) => {
+    if (!grouped[menu.groupOrder]) {
+      grouped[menu.groupOrder] = [];
+    }
+    grouped[menu.groupOrder].push(GetButton(menu.menuName, menu.menuCode, menu.menuUrl, menu.menuIcon, onClickedPanelMenu, menu, null, null, menu.displayOrder, null, null, 12, 0, EButtonTypes.BUTTON));
+  });
+
+  const groupedArray = Object.keys(grouped)
+    .sort((a, b) => Number(a) - Number(b)) // Sort groups by groupOrder
+    .map((groupKey) => grouped[Number(groupKey)].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)));
+
+  return groupedArray;
+}
+
+const onClickedPanelMenu: ClickHandler = async (event, element, data: IPanelMenu) => {
+  switch (data.menuCode) {
+    case BUTTON_IDENTITY(false).SIGN_IN_BUTTON: {
+      ShowLoader();
+      const url = GetAuthPageURL();
+      return (window.location.href = url);
+    }
+    case BUTTON_IDENTITY(false).SIGN_OUT_BUTTON: {
+      ShowLoader();
+      SetCurrentUser(null);
+      return (window.location.href = GetSignOutPageURL());
+    }
+    default: {
+      break;
+    }
+  }
+};

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

@@ -1,56 +1,36 @@
-import React, { JSX } from "react";
+import { UN } from "nexus-shared";
 import { EIconTypes } from "../../interfaces/icon-interfaces";
-import { EPositions, ESizes, IGlobalLayout } from "../../interfaces/layout-interfaces";
-import { GetUtilityMenuCode, IPanelMenu, IUtilityMenu, UTILITIES_BUTTON_PREFIX } from "../../interfaces/menu-interfaces";
+import { EOpacity, EPositions, ESizes, IGlobalLayout } from "../../interfaces/layout-interfaces";
+import { BUTTON_IDENTITY, GetUtilityMenuCode, IPanelMenu, IUtilityMenu } from "../../interfaces/menu-interfaces";
 import { EBackgrounds } from "../../interfaces/theme-interfaces";
 import { Iconbox } from "../documents/icon-box";
 import { PageTitle } from "../documents/page-title";
 import { ThemePanel } from "../panels/theme-panel";
 import { GlobalDialogbox } from "./global-dialogbox";
+import { ProfilePanel } from "./panels/user-panel";
 
-export const BUTTON_IDENTITY = (isneedPrefix: boolean) => {
-  const _ = isneedPrefix ? UTILITIES_BUTTON_PREFIX : "";
-  return {
-    PROFILE_BOX: `${_}profile`,
-    SEARCH_BOX: `${_}root-search`,
-    FAVORITE_BOX: `${_}favorite-menu`,
-    CARD_BOX: `${_}cart-menu`,
-    THEME_BOX: `${_}switch-theme`,
-    MEGA_BOX: `${_}mega-menu`,
-    SIGN_IN_BUTTON: `${_}sign-in`,
-    SIGN_OUT_BUTTON: `${_}sign-out`,
-  };
-};
-export const UtilityMenu = ({ utilityMenus, userPanels, column, paddingRight, globalLayout, iconBoxBackground }: Readonly<{ utilityMenus: IUtilityMenu[]; userPanels: IPanelMenu[]; column?: number; paddingRight?: number; globalLayout: IGlobalLayout; iconBoxBackground: EBackgrounds }>) => {
+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, zIndex: 3 }} 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} />
       ))}
-      <ProfilePanel globalLayout={globalLayout} boxBackground={iconBoxBackground} userPanels={userPanels} />
+      <ProfilePanel globalLayout={globalLayout} boxBackground={iconBoxBackground} userPanels={userPanels} hasAccessToken={hasAccessToken} />
     </div>
   );
 };
 
 const UtilityIcon = ({ utilityMenu, globalLayout, boxBackground }: Readonly<{ utilityMenu: IUtilityMenu; globalLayout: IGlobalLayout; boxBackground?: EBackgrounds }>) => {
   return (
-    <Iconbox id={GetUtilityMenuCode(utilityMenu.menuCode)} icon={utilityMenu.menuIcon} iconType={EIconTypes.FILLED} iconSize={ESizes.Small} boxSize={ESizes.Small} background={boxBackground} defaultClass="mr2">
+    <Iconbox id={GetUtilityMenuCode(utilityMenu.menuCode)} icon={utilityMenu.menuIcon} iconType={EIconTypes.FILLED} iconSize={ESizes.Small} boxSize={ESizes.Small} background={boxBackground} iconOpacity={EOpacity.O07} defaultClass="ml2">
       <UtilityDialogBox utilityMenu={utilityMenu} globalLayout={globalLayout} />
     </Iconbox>
   );
 };
 
-export const ProfilePanel = ({ globalLayout, userPanels, boxBackground }: Readonly<{ globalLayout: IGlobalLayout; userPanels: IPanelMenu[]; boxBackground?: EBackgrounds }>): JSX.Element => {
-  return (
-    <div className={`pr ${ESizes.Small} ib ${boxBackground} h p2 r`}>
-      <h6>BA</h6>
-    </div>
-  );
-};
-
 const UtilityDialogBox = ({ utilityMenu, globalLayout }: Readonly<{ utilityMenu: IUtilityMenu; globalLayout: IGlobalLayout }>) => {
   return (
-    <GlobalDialogbox hoverEffectDelay={true} defaultPadding={5} position={EPositions.Left} buttonIdentity={GetUtilityMenuCode(utilityMenu.menuCode)} defaultWidth={30}>
+    <GlobalDialogbox hoverEffectDelay={false} defaultPadding={5} position={EPositions.Left} buttonIdentity={GetUtilityMenuCode(utilityMenu.menuCode)} defaultWidth={30}>
       <div>
         <PageTitle marginBottom={5} borderBottom={1} title={utilityMenu.menuName} />
         <UtilityPanel utilityMenu={utilityMenu} globalLayout={globalLayout} />

package/src/components/panels/theme-panel.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import React, { useEffect } from "react";
 import { GetButton, IButton } from "../../interfaces/button-interfaces";
@@ -30,7 +30,7 @@ const RenderSwitchTheme = (baseElement: HTMLElement) => {
     baseElement.appendChild(p);
     return;
   }
-  const themeButtons: IButton[] = themes.map((theme, index) => GetButton(theme.displayName, theme.systemName, null, theme.icon, onClicked, theme, null, null, theme.displayOrder, EIconTypes.FILLED, null));
+  const themeButtons: IButton[] = themes.map((theme, index) => GetButton(theme.displayName, theme.systemName, null, theme.iconName, onClicked, theme, null, null, theme.displayOrder, EIconTypes.OUTLINED, null));
   const activeButton = themeButtons.find((button) => button.id === currentTheme);
   CreateTabButtons(themeButtons, baseElement, activeButton, onClicked);
 

package/src/helpers/browser-helpers.tsx

@@ -1,7 +1,7 @@
-import { UN } from "../interface";
+import { BuildProxyApiUrl, EModules, ESigninRequestMode, UN } from "../interface";
 import { EAnimationClasses } from "../interfaces/layout-interfaces";
-import { NEXUS_INFO } from "../nexus.environments";
-import { EKeyModifier, EKeys } from "./../interfaces/browser-interfaces";
+import { FILES, NEXUS_INFO, URLS } from "../nexus.environments";
+import { EFileSizes, EKeyModifier, EKeys } from "./../interfaces/browser-interfaces";
 import { HasFlag } from "./bitwise-helpers";
 import { Debounce } from "./utility-helpers";
 
@@ -109,3 +109,48 @@ export const ConvertColorToRGBA = (color: string, alpha: number = 0.1): string =
 
   return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+export function FindParentElement<ELEMENT extends Element>(element: Element | null | undefined, selector: string): ELEMENT | null {
+  if (!element || !selector || !element.matches) return null;
+
+  if (element.matches(selector)) return element as ELEMENT;
+
+  return FindParentElement<ELEMENT>(element.parentElement, selector);
+}
+export const GetCurrentFullURL = () => window?.location?.href;
+export const GetCurrentBaseURL = () => window?.location?.origin;
+export const BuildImageUrl = (viewToken?: string | UN, size?: EFileSizes | UN, fallback?: string | UN, isPublic: boolean = false) => {
+  if (!viewToken) return fallback ?? FILES.ICONS.NO_IMAGE;
+  if (!size) size = EFileSizes.SIZE_256;
+  if (isPublic) return BuildProxyApiUrl(EModules.Drive, `Public/Image/${size}/${viewToken}`);
+  else return BuildProxyApiUrl(EModules.Drive, `Private/Image/${size}/${viewToken}`);
+};
+
+const resolveReturnPath = (redirectURL?: string | UN): string => {
+  if (redirectURL) {
+    try {
+      const url = new URL(redirectURL, GetCurrentBaseURL());
+      return url.pathname + url.search || "/";
+    } catch {
+      /* fall through to current location */
+    }
+  }
+  if (!IsBrowser()) return "/";
+  return window.location.pathname + window.location.search || "/";
+};
+
+export const GetAuthPageURL = (redirectURL?: string | UN, signinMode?: ESigninRequestMode | UN) => {
+  const setupUrl = new URL(URLS.GLOBAL_SIGNIN);
+  setupUrl.searchParams.set("redirect_uri", `${GetCurrentBaseURL()}/api/auth/callback`);
+  setupUrl.searchParams.set("state", resolveReturnPath(redirectURL));
+  setupUrl.searchParams.set("signin_mode", signinMode ?? ESigninRequestMode.DEFAULT);
+  return setupUrl.toString();
+};
+
+/** Clears the session via /api/auth/sign-out; non-admin apps return to the current page (with query params). */
+export const GetSignOutPageURL = (returnPath?: string | UN) => {
+  const signOutUrl = new URL(`${GetCurrentBaseURL()}/api/auth/sign-out`);
+  if (!NEXUS_INFO.IS_ADMIN_MODULE) {
+    signOutUrl.searchParams.set("returnUrl", resolveReturnPath(returnPath));
+  }
+  return signOutUrl.toString();
+};

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/interface.ts

@@ -1,3 +1,4 @@
+export * from "./interfaces/auth-token-interfaces";
 export * from "./interfaces/browser-interfaces";
 export * from "./interfaces/button-interfaces";
 export * from "./interfaces/datasource-interfaces";

package/src/interfaces/auth-token-interfaces.tsx

@@ -0,0 +1,6 @@
+/** Token lifetimes from TBAuthentications.ClientApplications (seconds). */
+export interface IClientTokenLifetimes {
+  accessTokenLifetimeSeconds: number;
+  refreshTokenLifetimeSeconds: number;
+  ssoSessionLifetimeSeconds: number;
+}

package/src/interfaces/browser-interfaces.tsx

@@ -1,3 +1,5 @@
+export const DEFAULT_MOBILE_VIEW_WIDTH = 768;
+
 export enum EKeys {
   TAB = "Tab",
   DELETE = "Delete",
@@ -21,3 +23,14 @@ export enum EKeyModifier {
   Ctrl = 1 << 1, // 2
   Alt = 1 << 2, // 4
 }
+export enum EFileSizes {
+  ORGINAL = 0,
+  SIZE_16 = 1,
+  SIZE_32 = 2,
+  SIZE_64 = 3,
+  SIZE_128 = 4,
+  SIZE_256 = 5,
+  SIZE_512 = 6,
+  SIZE_1024 = 7,
+  SIZE_2048 = 8,
+}

package/src/interfaces/http-interfaces.tsx

@@ -77,9 +77,6 @@ export const GetResponse = {
     message: message,
     messageCode: messageCode,
     code: code,
-    exceptionCategory: EExceptionCategories.Application,
-    errorCode: EErrorCodes.Unknown,
-    inputName: undefined,
   }),
 };
 

package/src/interfaces/icon-interfaces.tsx

@@ -1,5 +1,8 @@
+import { ESizes } from "./layout-interfaces";
+
 export const DEFAULT_ICON_ELEMENT_NAME = "ion-icon";
 export const DEFAULT_SMALL_ICON_BOX_SIZE = 1 / 1.25;
+export const DEFAULT_ICON_SIZE = ESizes.VerySmall;
 export enum EIconTypes {
   OUTLINED = "-outline",
   SHARP = "-sharp",

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,3 +35,19 @@ 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 {
+    PROFILE_BOX: `${_}profile`,
+    SEARCH_BOX: `${_}root-search`,
+    FAVORITE_BOX: `${_}favorite-menu`,
+    CARD_BOX: `${_}cart-menu`,
+    THEME_BOX: `${_}switch-theme`,
+    MEGA_BOX: `${_}mega-menu`,
+    SIGN_IN_BUTTON: `${_}sign-in`,
+    SIGN_OUT_BUTTON: `${_}sign-out`,
+  };
+};

package/src/interfaces/storage-interfaces.tsx

@@ -1,4 +1,5 @@
 export const LOCAL_STORAGE_KEYS = {
   ACTIVE_THEME: "nexus-themes",
+  CURRENT_USER: "nexus-current-user",
   FORM_BUTTON_POSITION: "nexus-form-button-position",
 };

package/src/interfaces/theme-interfaces.tsx

@@ -1,4 +1,5 @@
 import { EIcons } from "./icon-interfaces";
+import { UN } from "./type-interfaces";
 
 export const DEFAULT_THEME_NAME = "light";
 
@@ -43,25 +44,57 @@ export enum EBackgrounds {
   ThemeColor800 = "bg800",
   ThemeColor950 = "bg950",
 }
-/** Color divided into 4 parts: background, hover, focus, text */
-export interface IThemeColors {
-  /* Background Color 1 */
+export enum ETextColors {
+  TextColor1 = "var(--T1)",
+  TextColor2 = "var(--T2)",
+  TextColor3 = "var(--T3)",
+  TextColor10 = "var(--T10)",
+  TextColor11 = "var(--T11)",
+  TextColor12 = "var(--T12)",
+  TextColor13 = "var(--T13)",
+  TextColor20 = "var(--T20)",
+  TextColor30 = "var(--T30)",
+  TextColor41 = "var(--T41)",
+  TextColor51 = "var(--T51)",
+  TextColor52 = "var(--T52)",
+  TextColor100 = "var(--T100)",
+  TextColor200 = "var(--T200)",
+  TextColor400 = "var(--T400)",
+  TextColor600 = "var(--T600)",
+  TextColor800 = "var(--T800)",
+  TextColor950 = "var(--T950)",
+}
+export enum EColorTypes {
+  Background = "--B",
+  Hover = "--H",
+  Focus = "--F",
+  Text = "--T",
+}
+
+export interface IThemeInformation {
+  displayName: string;
+  systemName: string;
+  displayOrder: number;
+  iconName: EIcons;
+  id?: string | UN;
+
+  /** Background Color 1 */
   C1: string;
-  /* Background Color 2 */
+  /** Background Color 2 */
   C2: string;
-  /* Background Color 3 */
+  /** Background Color 3 */
   C3: string;
 
-  /* Success Color */
+  /** Success Color */
   C10: string;
-  /* Warning/Reset/Clear Color */
+  /** Warning/Reset/Clear Color */
   C11: string;
-  /* Info Color */
+  /** Info Color */
   C12: string;
-  /* Error/Delete/Remove Color */
+  /** Error/Delete/Remove Color */
   C13: string;
 
-  /* Primary/Submit/Link Button Color */
+  /** Primary/Submit/Link Button Color */
   C20: string;
 
   /** Border Color 1 */
@@ -88,122 +121,3 @@ export interface IThemeColors {
   /** Theme Color 950 */
   C950: string;
 }
-export interface IThemeInformation {
-  displayName: string;
-  systemName: string;
-  displayOrder: number;
-  icon: EIcons;
-  themeColors: IThemeColors;
-  isSystemTheme: boolean;
-}
-
-export const DEFAULT_THEME_INFORMATIONS: IThemeInformation[] = [
-  {
-    displayName: "Light",
-    systemName: DEFAULT_THEME_NAME,
-    displayOrder: 0,
-    icon: EIcons.SUNNY,
-    themeColors: {
-      C1: "rgb(255, 255, 255)|rgb(240, 240, 240)|rgb(225, 225, 225)|rgb(0, 0, 0)",
-      C2: "rgb(245, 245, 245)|rgb(230, 230, 230)|rgb(215, 215, 215)|rgb(0, 0, 0)",
-      C3: "rgb(230, 230, 230)|rgb(200, 200, 200)|rgb(185, 185, 185)|rgb(0, 0, 0)",
-      C10: "rgb(34, 187, 51)|rgb(0, 150, 80)|rgb(20, 120, 40)|rgb(255, 255, 255)",
-      C11: "rgb(240, 173, 78)|rgb(210, 140, 50)|rgb(180, 110, 20)|rgb(255, 255, 255)",
-      C12: "rgb(76, 185, 255)|rgb(100, 180, 255)|rgb(80, 160, 220)|rgb(255, 255, 255)",
-      C13: "rgb(255, 102, 102)|rgb(220, 80, 80)|rgb(190, 60, 60)|rgb(255, 255, 255)",
-      C20: "rgb(47, 81, 255)|rgb(30, 60, 220)|rgb(20, 40, 180)|rgb(255, 255, 255)",
-      C30: "rgb(200, 200, 200)|rgb(180, 180, 180)|rgb(160, 160, 160)|rgb(0, 0, 0)",
-      C41: "rgba(0, 0, 0, 0.4)|rgb(150, 150, 150)|rgb(120, 120, 120)|rgb(0, 0, 0)",
-      C51: "rgba(0, 0, 0, 0.6)|rgb(0, 0, 0, 0.8)|rgb(0, 0, 0, 0.9)|rgb(255, 255, 255)",
-      C52: "rgb(60, 60, 60)|rgb(85, 85, 85)|rgb(35, 35, 35)|rgb(255, 255, 255)",
-      C100: "rgb(213, 228, 255)|rgb(200, 210, 255)|rgb(185, 200, 220)|rgb(0, 0, 0)",
-      C200: "rgb(179, 205, 255)|rgb(160, 180, 255)|rgb(140, 160, 220)|rgb(0, 0, 0)",
-      C400: "rgb(86, 126, 255)|rgb(60, 90, 220)|rgb(40, 60, 180)|rgb(255, 255, 255)",
-      C600: "rgb(12, 33, 255)|rgb(10, 20, 220)|rgb(8, 15, 180)|rgb(255, 255, 255)",
-      C800: "rgb(6, 22, 205)|rgb(4, 15, 180)|rgb(2, 10, 120)|rgb(255, 255, 255)",
-      C950: "rgb(10, 17, 92)|rgb(8, 12, 70)|rgb(6, 9, 40)|rgb(255, 255, 255)",
-    },
-    isSystemTheme: true,
-  },
-  {
-    displayName: "Dark",
-    displayOrder: 1,
-    icon: EIcons.MOON,
-    systemName: "dark",
-    themeColors: {
-      C1: "rgb(50, 50, 50)|rgb(40, 40, 40)|rgb(30, 30, 30)|rgb(220, 220, 220)",
-      C2: "rgb(65, 65, 65)|rgb(55, 55, 55)|rgb(45, 45, 45)|rgb(220, 220, 220)",
-      C3: "rgb(70, 70, 70)|rgb(60, 60, 60)|rgb(50, 50, 50)|rgb(220, 220, 220)",
-      C10: "rgb(34, 187, 51)|rgb(0, 150, 80)|rgb(20, 120, 40)|rgb(255, 255, 255)",
-      C11: "rgb(240, 173, 78)|rgb(210, 140, 50)|rgb(180, 110, 20)|rgb(255, 255, 255)",
-      C12: "rgb(76, 185, 255)|rgb(100, 180, 255)|rgb(80, 160, 220)|rgb(255, 255, 255)",
-      C13: "rgb(255, 102, 102)|rgb(220, 80, 80)|rgb(190, 60, 60)|rgb(255, 255, 255)",
-      C20: "rgb(47, 81, 255)|rgb(30, 60, 220)|rgb(20, 40, 180)|rgb(255, 255, 255)",
-      C30: "rgb(100, 100, 100)|rgb(90, 90, 90)|rgb(80, 80, 80)|rgb(220, 220, 220)",
-      C41: "rgb(100, 100, 100)|rgb(255, 255, 255)|rgb(120, 120, 120)|rgb(0, 0, 0)",
-      C51: "rgba(0, 0, 0, 0.6)|rgb(0, 0, 0, 0.8)|rgb(0, 0, 0, 0.9)|rgb(255, 255, 255)",
-      C52: "rgb(60, 60, 60)|rgb(85, 85, 85)|rgb(35, 35, 35)|rgb(255, 255, 255)",
-      C100: "rgb(213, 228, 255)|rgb(200, 210, 255)|rgb(185, 200, 220)|rgb(0, 0, 0)",
-      C200: "rgb(179, 205, 255)|rgb(160, 180, 255)|rgb(140, 160, 220)|rgb(0, 0, 0)",
-      C400: "rgb(86, 126, 255)|rgb(60, 90, 220)|rgb(40, 60, 180)|rgb(255, 255, 255)",
-      C600: "rgb(12, 33, 255)|rgb(10, 20, 220)|rgb(8, 15, 180)|rgb(255, 255, 255)",
-      C800: "rgb(6, 22, 205)|rgb(4, 15, 180)|rgb(2, 10, 120)|rgb(255, 255, 255)",
-      C950: "rgb(10, 17, 92)|rgb(8, 12, 70)|rgb(6, 9, 40)|rgb(255, 255, 255)",
-    },
-    isSystemTheme: true,
-  },
-  {
-    displayName: "Light2",
-    systemName: "light2",
-    displayOrder: 0,
-    icon: EIcons.SUNNY,
-    themeColors: {
-      C1: "rgb(255, 255, 255)|rgb(240, 240, 240)|rgb(225, 225, 225)|rgb(0, 0, 0)",
-      C2: "rgb(245, 245, 245)|rgb(230, 230, 230)|rgb(215, 215, 215)|rgb(0, 0, 0)",
-      C3: "rgb(230, 230, 230)|rgb(200, 200, 200)|rgb(185, 185, 185)|rgb(0, 0, 0)",
-      C10: "rgb(34, 187, 51)|rgb(0, 150, 80)|rgb(20, 120, 40)|rgb(255, 255, 255)",
-      C11: "rgb(240, 173, 78)|rgb(210, 140, 50)|rgb(180, 110, 20)|rgb(255, 255, 255)",
-      C12: "rgb(76, 185, 255)|rgb(100, 180, 255)|rgb(80, 160, 220)|rgb(255, 255, 255)",
-      C13: "rgb(255, 102, 102)|rgb(220, 80, 80)|rgb(190, 60, 60)|rgb(255, 255, 255)",
-      C20: "rgb(47, 81, 255)|rgb(30, 60, 220)|rgb(20, 40, 180)|rgb(255, 255, 255)",
-      C30: "rgb(200, 200, 200)|rgb(180, 180, 180)|rgb(160, 160, 160)|rgb(0, 0, 0)",
-      C41: "rgba(0, 0, 0, 0.4)|rgb(150, 150, 150)|rgb(120, 120, 120)|rgb(0, 0, 0)",
-      C51: "rgba(0, 0, 0, 0.6)|rgb(0, 0, 0, 0.8)|rgb(0, 0, 0, 0.9)|rgb(255, 255, 255)",
-      C52: "rgb(60, 60, 60)|rgb(85, 85, 85)|rgb(35, 35, 35)|rgb(255, 255, 255)",
-      C100: "rgb(213, 228, 255)|rgb(200, 210, 255)|rgb(185, 200, 220)|rgb(0, 0, 0)",
-      C200: "rgb(179, 205, 255)|rgb(160, 180, 255)|rgb(140, 160, 220)|rgb(0, 0, 0)",
-      C400: "rgb(86, 126, 255)|rgb(60, 90, 220)|rgb(40, 60, 180)|rgb(255, 255, 255)",
-      C600: "rgb(12, 33, 255)|rgb(10, 20, 220)|rgb(8, 15, 180)|rgb(255, 255, 255)",
-      C800: "rgb(6, 22, 205)|rgb(4, 15, 180)|rgb(2, 10, 120)|rgb(255, 255, 255)",
-      C950: "rgb(10, 17, 92)|rgb(8, 12, 70)|rgb(6, 9, 40)|rgb(255, 255, 255)",
-    },
-    isSystemTheme: true,
-  },
-  {
-    displayName: "Dark2",
-    displayOrder: 1,
-    icon: EIcons.MOON,
-    systemName: "dark2",
-    themeColors: {
-      C1: "rgb(50, 50, 50)|rgb(40, 40, 40)|rgb(30, 30, 30)|rgb(220, 220, 220)",
-      C2: "rgb(65, 65, 65)|rgb(55, 55, 55)|rgb(45, 45, 45)|rgb(220, 220, 220)",
-      C3: "rgb(70, 70, 70)|rgb(60, 60, 60)|rgb(50, 50, 50)|rgb(220, 220, 220)",
-      C10: "rgb(34, 187, 51)|rgb(0, 150, 80)|rgb(20, 120, 40)|rgb(255, 255, 255)",
-      C11: "rgb(240, 173, 78)|rgb(210, 140, 50)|rgb(180, 110, 20)|rgb(255, 255, 255)",
-      C12: "rgb(76, 185, 255)|rgb(100, 180, 255)|rgb(80, 160, 220)|rgb(255, 255, 255)",
-      C13: "rgb(255, 102, 102)|rgb(220, 80, 80)|rgb(190, 60, 60)|rgb(255, 255, 255)",
-      C20: "rgb(47, 81, 255)|rgb(30, 60, 220)|rgb(20, 40, 180)|rgb(255, 255, 255)",
-      C30: "rgb(100, 100, 100)|rgb(90, 90, 90)|rgb(80, 80, 80)|rgb(220, 220, 220)",
-      C41: "rgb(100, 100, 100)|rgb(255, 255, 255)|rgb(120, 120, 120)|rgb(0, 0, 0)",
-      C51: "rgba(0, 0, 0, 0.6)|rgb(0, 0, 0, 0.8)|rgb(0, 0, 0, 0.9)|rgb(255, 255, 255)",
-      C52: "rgb(60, 60, 60)|rgb(85, 85, 85)|rgb(35, 35, 35)|rgb(255, 255, 255)",
-      C100: "rgb(213, 228, 255)|rgb(200, 210, 255)|rgb(185, 200, 220)|rgb(0, 0, 0)",
-      C200: "rgb(179, 205, 255)|rgb(160, 180, 255)|rgb(140, 160, 220)|rgb(0, 0, 0)",
-      C400: "rgb(86, 126, 255)|rgb(60, 90, 220)|rgb(40, 60, 180)|rgb(255, 255, 255)",
-      C600: "rgb(12, 33, 255)|rgb(10, 20, 220)|rgb(8, 15, 180)|rgb(255, 255, 255)",
-      C800: "rgb(6, 22, 205)|rgb(4, 15, 180)|rgb(2, 10, 120)|rgb(255, 255, 255)",
-      C950: "rgb(10, 17, 92)|rgb(8, 12, 70)|rgb(6, 9, 40)|rgb(255, 255, 255)",
-    },
-    isSystemTheme: true,
-  },
-];