chore(react): use BEM & @emotion/css

.changeset/five-geese-retire.md

@@ -0,0 +1,6 @@
+---
+'@asgardeo/react': patch
+---
+
+- Fix import path for useAsgardeo in SignedOut component
+- Rename `AsgardeoLoading` -> `Loading`

.changeset/public-donkeys-tickle.md

@@ -0,0 +1,8 @@
+---
+'@asgardeo/javascript': patch
+'@asgardeo/nextjs': patch
+'@asgardeo/node': patch
+'@asgardeo/react': patch
+---
+
+Fix `getAccessToken` imperative usage

packages/javascript/src/api/updateMeProfile.ts

@@ -147,10 +147,11 @@ const updateMeProfile = async ({
     }
 
     throw new AsgardeoAPIError(
-      `Network or parsing error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      error?.response?.data?.detail ||
+        'An error occurred while updating the user profile. Please try again.',
       'updateMeProfile-NetworkError-001',
       'javascript',
-      0,
+      error?.data?.status,
       'Network Error',
     );
   }

packages/javascript/src/errors/AsgardeoError.ts

@@ -55,12 +55,7 @@ export default class AsgardeoError extends Error {
 
   constructor(message: string, code: string, origin: string) {
     const _origin: string = AsgardeoError.resolveOrigin(origin);
-    const prefix: string = `🛡️ Asgardeo - ${_origin}:`;
-    const regex: RegExp = new RegExp(`🛡️\\s*Asgardeo\\s*-\\s*${_origin}:`, 'i');
-    const sanitized: string = message.replace(regex, '');
-    const _message: string = `${prefix} ${sanitized.trim()}\n\n(code="${code}")\n`;
-
-    super(_message);
+    super(message);
 
     this.name = new.target.name;
     this.code = code;
@@ -72,6 +67,7 @@ export default class AsgardeoError extends Error {
   }
 
   public override toString(): string {
-    return `[${this.name}]\nMessage: ${this.message}`;
+    const prefix: string = `🛡️ Asgardeo - ${this.origin}:`;
+    return `[${this.name}]\n${prefix} ${this.message}\n(code=\"${this.code}\")`;
   }
 }

packages/javascript/src/i18n/en-US.ts

@@ -78,6 +78,13 @@ const translations: I18nTranslations = {
   'username.password.title': 'Sign In',
   'username.password.subtitle': 'Enter your username and password to continue.',
 
+  /* |---------------------------------------------------------------| */
+  /* |                          User Profile                         | */
+  /* |---------------------------------------------------------------| */
+
+  'user.profile.title': 'Profile',
+  'user.profile.update.generic.error': 'An error occurred while updating your profile. Please try again.',
+
   /* |---------------------------------------------------------------| */
   /* |                     Organization Switcher                     | */
   /* |---------------------------------------------------------------| */

packages/javascript/src/index.ts

@@ -112,6 +112,8 @@ export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 export {default as createTheme} from './theme/createTheme';
 export {ThemeColors, ThemeConfig, Theme, ThemeMode, ThemeDetection} from './theme/types';
 
+export {default as bem} from './utils/bem';
+export {default as formatDate} from './utils/formatDate';
 export {default as processUsername} from './utils/processUsername';
 export {default as deepMerge} from './utils/deepMerge';
 export {default as deriveOrganizationHandleFromBaseUrl} from './utils/deriveOrganizationHandleFromBaseUrl';

packages/javascript/src/models/i18n.ts

@@ -76,6 +76,13 @@ export interface I18nTranslations {
   'username.password.title': string;
   'username.password.subtitle': string;
 
+  /* |---------------------------------------------------------------| */
+  /* |                          User Profile                         | */
+  /* |---------------------------------------------------------------| */
+
+  'user.profile.title': string;
+  'user.profile.update.generic.error': string;
+
   /* |---------------------------------------------------------------| */
   /* |                     Organization Switcher                     | */
   /* |---------------------------------------------------------------| */

packages/javascript/src/theme/createTheme.ts

@@ -54,33 +54,46 @@ const lightTheme: ThemeConfig = {
     primary: {
       main: '#1a73e8',
       contrastText: '#ffffff',
+      dark: '#174ea6',
     },
     secondary: {
       main: '#424242',
       contrastText: '#ffffff',
+      dark: '#212121',
     },
     background: {
       surface: '#ffffff',
       disabled: '#f0f0f0',
+      dark: '#212121',
       body: {
         main: '#1a1a1a',
+        dark: '#212121',
       },
     },
     error: {
       main: '#d32f2f',
-      contrastText: '#ffffff',
+      contrastText: '#d52828',
+      dark: '#b71c1c',
+    },
+    info: {
+      main: '#bbebff',
+      contrastText: '#43aeda',
+      dark: '#01579b',
     },
     success: {
       main: '#4caf50',
-      contrastText: '#ffffff',
+      contrastText: '#00a807',
+      dark: '#388e3c',
     },
     warning: {
       main: '#ff9800',
-      contrastText: '#ffffff',
+      contrastText: '#be7100',
+      dark: '#f57c00',
     },
     text: {
       primary: '#1a1a1a',
       secondary: '#666666',
+      dark: '#212121',
     },
     border: '#e0e0e0',
   },
@@ -144,33 +157,46 @@ const darkTheme: ThemeConfig = {
     primary: {
       main: '#1a73e8',
       contrastText: '#ffffff',
+      dark: '#174ea6',
     },
     secondary: {
       main: '#424242',
       contrastText: '#ffffff',
+      dark: '#212121',
     },
     background: {
       surface: '#121212',
       disabled: '#1f1f1f',
+      dark: '#212121',
       body: {
         main: '#ffffff',
+        dark: '#212121',
       },
     },
     error: {
       main: '#d32f2f',
-      contrastText: '#ffffff',
+      contrastText: '#d52828',
+      dark: '#b71c1c',
+    },
+    info: {
+      main: '#bbebff',
+      contrastText: '#43aeda',
+      dark: '#01579b',
     },
     success: {
       main: '#4caf50',
-      contrastText: '#ffffff',
+      contrastText: '#00a807',
+      dark: '#388e3c',
     },
     warning: {
       main: '#ff9800',
-      contrastText: '#ffffff',
+      contrastText: '#be7100',
+      dark: '#f57c00',
     },
     text: {
       primary: '#ffffff',
       secondary: '#b3b3b3',
+      dark: '#212121',
     },
     border: '#404040',
   },
@@ -306,6 +332,14 @@ const toCssVariables = (theme: ThemeConfig): Record<string, string> => {
     cssVars[`--${prefix}-color-warning-contrastText`] = theme.colors.warning.contrastText;
   }
 
+  // Colors - Info
+  if (theme.colors?.info?.main) {
+    cssVars[`--${prefix}-color-info-main`] = theme.colors.info.main;
+  }
+  if (theme.colors?.info?.contrastText) {
+    cssVars[`--${prefix}-color-info-contrastText`] = theme.colors.info.contrastText;
+  }
+
   // Colors - Text
   if (theme.colors?.text?.primary) {
     cssVars[`--${prefix}-color-text-primary`] = theme.colors.text.primary;
@@ -455,6 +489,10 @@ const toThemeVars = (theme: ThemeConfig): ThemeVars => {
         main: `var(--${prefix}-color-error-main)`,
         contrastText: `var(--${prefix}-color-error-contrastText)`,
       },
+      info: {
+        contrastText: `var(--${prefix}-color-info-contrastText)`,
+        main: `var(--${prefix}-color-info-main)`,
+      },
       success: {
         main: `var(--${prefix}-color-success-main)`,
         contrastText: `var(--${prefix}-color-success-contrastText)`,

packages/javascript/src/theme/types.ts

@@ -57,34 +57,47 @@ export interface ThemeColors {
   background: {
     body: {
       main: string;
+      dark?: string;
     };
     disabled: string;
     surface: string;
+    dark?: string;
   };
   border: string;
   error: {
     contrastText: string;
     main: string;
+    dark?: string;
+  };
+  info: {
+    contrastText: string;
+    main: string;
+    dark?: string;
   };
   primary: {
     contrastText: string;
     main: string;
+    dark?: string;
   };
   secondary: {
     contrastText: string;
     main: string;
+    dark?: string;
   };
   success: {
     contrastText: string;
     main: string;
+    dark?: string;
   };
   text: {
     primary: string;
     secondary: string;
+    dark?: string;
   };
   warning: {
     contrastText: string;
     main: string;
+    dark?: string;
   };
 }
 
@@ -155,33 +168,46 @@ export interface ThemeVars {
     primary: {
       main: string;
       contrastText: string;
+      dark?: string;
     };
     secondary: {
       main: string;
       contrastText: string;
+      dark?: string;
     };
     background: {
       surface: string;
       disabled: string;
+      dark?: string;
       body: {
         main: string;
+        dark?: string;
       };
     };
     error: {
       main: string;
       contrastText: string;
+      dark?: string;
+    };
+    info: {
+      contrastText: string;
+      main: string;
+      dark?: string;
     };
     success: {
       main: string;
       contrastText: string;
+      dark?: string;
     };
     warning: {
       main: string;
       contrastText: string;
+      dark?: string;
     };
     text: {
       primary: string;
       secondary: string;
+      dark?: string;
     };
     border: string;
   };

packages/javascript/src/utils/bem.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Creates a BEM-style class name by combining a base class with element and/or modifier
+ *
+ * @param baseClass - The base CSS class string (usually from emotion's css function)
+ * @param element - The BEM element name (optional)
+ * @param modifier - The BEM modifier name (optional)
+ * @returns The combined class name string
+ *
+ * @example
+ * ```tsx
+ * const baseClass = css`
+ *   display: flex;
+ *   &__element {
+ *     color: red;
+ *   }
+ *   &--modifier {
+ *     background: blue;
+ *   }
+ * `;
+ *
+ * import bem from './utils/bem';
+ *
+ * const elementClass = bem(baseClass, 'element');
+ * const modifierClass = bem(baseClass, null, 'modifier');
+ * const elementWithModifierClass = bem(baseClass, 'element', 'modifier');
+ * ```
+ */
+const bem = (baseClass: string, element?: string | null, modifier?: string | null): string => {
+  let className = baseClass;
+
+  if (element) {
+    className += `__${element}`;
+  }
+
+  if (modifier) {
+    className += `--${modifier}`;
+  }
+
+  return className;
+};
+
+export default bem;