Skip to content

Commit 8155339

Browse files
brionmariobrionmario
authored
Merge pull request #96 from brionmario/next
chore(react): use `BEM` & `@emotion/css`
2 parents 65acbdd + a911a62 commit 8155339

File tree

88 files changed

+6030
-3458
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+6030
-3458
lines changed

‎.changeset/five-geese-retire.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@asgardeo/react': patch
3+
---
4+
5+
- Fix import path for useAsgardeo in SignedOut component
6+
- Rename `AsgardeoLoading` -> `Loading`

‎.changeset/public-donkeys-tickle.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@asgardeo/javascript': patch
3+
'@asgardeo/nextjs': patch
4+
'@asgardeo/node': patch
5+
'@asgardeo/react': patch
6+
---
7+
8+
Fix `getAccessToken` imperative usage

‎packages/javascript/src/api/updateMeProfile.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,10 +147,11 @@ const updateMeProfile = async ({
147147
}
148148

149149
throw new AsgardeoAPIError(
150-
`Network or parsing error: ${error instanceof Error ? error.message : 'Unknown error'}`,
150+
error?.response?.data?.detail ||
151+
'An error occurred while updating the user profile. Please try again.',
151152
'updateMeProfile-NetworkError-001',
152153
'javascript',
153-
0,
154+
error?.data?.status,
154155
'Network Error',
155156
);
156157
}

‎packages/javascript/src/errors/AsgardeoError.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,7 @@ export default class AsgardeoError extends Error {
5555

5656
constructor(message: string, code: string, origin: string) {
5757
const _origin: string = AsgardeoError.resolveOrigin(origin);
58-
const prefix: string = `🛡️ Asgardeo - ${_origin}:`;
59-
const regex: RegExp = new RegExp(`🛡️\\s*Asgardeo\\s*-\\s*${_origin}:`, 'i');
60-
const sanitized: string = message.replace(regex, '');
61-
const _message: string = `${prefix} ${sanitized.trim()}\n\n(code="${code}")\n`;
62-
63-
super(_message);
58+
super(message);
6459

6560
this.name = new.target.name;
6661
this.code = code;
@@ -72,6 +67,7 @@ export default class AsgardeoError extends Error {
7267
}
7368

7469
public override toString(): string {
75-
return `[${this.name}]\nMessage: ${this.message}`;
70+
const prefix: string = `🛡️ Asgardeo - ${this.origin}:`;
71+
return `[${this.name}]\n${prefix} ${this.message}\n(code=\"${this.code}\")`;
7672
}
7773
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,13 @@ const translations: I18nTranslations = {
7878
'username.password.title': 'Sign In',
7979
'username.password.subtitle': 'Enter your username and password to continue.',
8080

81+
/* |---------------------------------------------------------------| */
82+
/* | User Profile | */
83+
/* |---------------------------------------------------------------| */
84+
85+
'user.profile.title': 'Profile',
86+
'user.profile.update.generic.error': 'An error occurred while updating your profile. Please try again.',
87+
8188
/* |---------------------------------------------------------------| */
8289
/* | Organization Switcher | */
8390
/* |---------------------------------------------------------------| */

‎packages/javascript/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
112112
export {default as createTheme} from './theme/createTheme';
113113
export {ThemeColors, ThemeConfig, Theme, ThemeMode, ThemeDetection} from './theme/types';
114114

115+
export {default as bem} from './utils/bem';
116+
export {default as formatDate} from './utils/formatDate';
115117
export {default as processUsername} from './utils/processUsername';
116118
export {default as deepMerge} from './utils/deepMerge';
117119
export {default as deriveOrganizationHandleFromBaseUrl} from './utils/deriveOrganizationHandleFromBaseUrl';

‎packages/javascript/src/models/i18n.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,13 @@ export interface I18nTranslations {
7676
'username.password.title': string;
7777
'username.password.subtitle': string;
7878

79+
/* |---------------------------------------------------------------| */
80+
/* | User Profile | */
81+
/* |---------------------------------------------------------------| */
82+
83+
'user.profile.title': string;
84+
'user.profile.update.generic.error': string;
85+
7986
/* |---------------------------------------------------------------| */
8087
/* | Organization Switcher | */
8188
/* |---------------------------------------------------------------| */

‎packages/javascript/src/theme/createTheme.ts‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,33 +54,46 @@ const lightTheme: ThemeConfig = {
5454
primary: {
5555
main: '#1a73e8',
5656
contrastText: '#ffffff',
57+
dark: '#174ea6',
5758
},
5859
secondary: {
5960
main: '#424242',
6061
contrastText: '#ffffff',
62+
dark: '#212121',
6163
},
6264
background: {
6365
surface: '#ffffff',
6466
disabled: '#f0f0f0',
67+
dark: '#212121',
6568
body: {
6669
main: '#1a1a1a',
70+
dark: '#212121',
6771
},
6872
},
6973
error: {
7074
main: '#d32f2f',
71-
contrastText: '#ffffff',
75+
contrastText: '#d52828',
76+
dark: '#b71c1c',
77+
},
78+
info: {
79+
main: '#bbebff',
80+
contrastText: '#43aeda',
81+
dark: '#01579b',
7282
},
7383
success: {
7484
main: '#4caf50',
75-
contrastText: '#ffffff',
85+
contrastText: '#00a807',
86+
dark: '#388e3c',
7687
},
7788
warning: {
7889
main: '#ff9800',
79-
contrastText: '#ffffff',
90+
contrastText: '#be7100',
91+
dark: '#f57c00',
8092
},
8193
text: {
8294
primary: '#1a1a1a',
8395
secondary: '#666666',
96+
dark: '#212121',
8497
},
8598
border: '#e0e0e0',
8699
},
@@ -144,33 +157,46 @@ const darkTheme: ThemeConfig = {
144157
primary: {
145158
main: '#1a73e8',
146159
contrastText: '#ffffff',
160+
dark: '#174ea6',
147161
},
148162
secondary: {
149163
main: '#424242',
150164
contrastText: '#ffffff',
165+
dark: '#212121',
151166
},
152167
background: {
153168
surface: '#121212',
154169
disabled: '#1f1f1f',
170+
dark: '#212121',
155171
body: {
156172
main: '#ffffff',
173+
dark: '#212121',
157174
},
158175
},
159176
error: {
160177
main: '#d32f2f',
161-
contrastText: '#ffffff',
178+
contrastText: '#d52828',
179+
dark: '#b71c1c',
180+
},
181+
info: {
182+
main: '#bbebff',
183+
contrastText: '#43aeda',
184+
dark: '#01579b',
162185
},
163186
success: {
164187
main: '#4caf50',
165-
contrastText: '#ffffff',
188+
contrastText: '#00a807',
189+
dark: '#388e3c',
166190
},
167191
warning: {
168192
main: '#ff9800',
169-
contrastText: '#ffffff',
193+
contrastText: '#be7100',
194+
dark: '#f57c00',
170195
},
171196
text: {
172197
primary: '#ffffff',
173198
secondary: '#b3b3b3',
199+
dark: '#212121',
174200
},
175201
border: '#404040',
176202
},
@@ -306,6 +332,14 @@ const toCssVariables = (theme: ThemeConfig): Record<string, string> => {
306332
cssVars[`--${prefix}-color-warning-contrastText`] = theme.colors.warning.contrastText;
307333
}
308334

335+
// Colors - Info
336+
if (theme.colors?.info?.main) {
337+
cssVars[`--${prefix}-color-info-main`] = theme.colors.info.main;
338+
}
339+
if (theme.colors?.info?.contrastText) {
340+
cssVars[`--${prefix}-color-info-contrastText`] = theme.colors.info.contrastText;
341+
}
342+
309343
// Colors - Text
310344
if (theme.colors?.text?.primary) {
311345
cssVars[`--${prefix}-color-text-primary`] = theme.colors.text.primary;
@@ -455,6 +489,10 @@ const toThemeVars = (theme: ThemeConfig): ThemeVars => {
455489
main: `var(--${prefix}-color-error-main)`,
456490
contrastText: `var(--${prefix}-color-error-contrastText)`,
457491
},
492+
info: {
493+
contrastText: `var(--${prefix}-color-info-contrastText)`,
494+
main: `var(--${prefix}-color-info-main)`,
495+
},
458496
success: {
459497
main: `var(--${prefix}-color-success-main)`,
460498
contrastText: `var(--${prefix}-color-success-contrastText)`,

‎packages/javascript/src/theme/types.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,34 +57,47 @@ export interface ThemeColors {
5757
background: {
5858
body: {
5959
main: string;
60+
dark?: string;
6061
};
6162
disabled: string;
6263
surface: string;
64+
dark?: string;
6365
};
6466
border: string;
6567
error: {
6668
contrastText: string;
6769
main: string;
70+
dark?: string;
71+
};
72+
info: {
73+
contrastText: string;
74+
main: string;
75+
dark?: string;
6876
};
6977
primary: {
7078
contrastText: string;
7179
main: string;
80+
dark?: string;
7281
};
7382
secondary: {
7483
contrastText: string;
7584
main: string;
85+
dark?: string;
7686
};
7787
success: {
7888
contrastText: string;
7989
main: string;
90+
dark?: string;
8091
};
8192
text: {
8293
primary: string;
8394
secondary: string;
95+
dark?: string;
8496
};
8597
warning: {
8698
contrastText: string;
8799
main: string;
100+
dark?: string;
88101
};
89102
}
90103

@@ -155,33 +168,46 @@ export interface ThemeVars {
155168
primary: {
156169
main: string;
157170
contrastText: string;
171+
dark?: string;
158172
};
159173
secondary: {
160174
main: string;
161175
contrastText: string;
176+
dark?: string;
162177
};
163178
background: {
164179
surface: string;
165180
disabled: string;
181+
dark?: string;
166182
body: {
167183
main: string;
184+
dark?: string;
168185
};
169186
};
170187
error: {
171188
main: string;
172189
contrastText: string;
190+
dark?: string;
191+
};
192+
info: {
193+
contrastText: string;
194+
main: string;
195+
dark?: string;
173196
};
174197
success: {
175198
main: string;
176199
contrastText: string;
200+
dark?: string;
177201
};
178202
warning: {
179203
main: string;
180204
contrastText: string;
205+
dark?: string;
181206
};
182207
text: {
183208
primary: string;
184209
secondary: string;
210+
dark?: string;
185211
};
186212
border: string;
187213
};

‎packages/javascript/src/utils/bem.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
*/
18+
19+
/**
20+
* Creates a BEM-style class name by combining a base class with element and/or modifier
21+
*
22+
* @param baseClass - The base CSS class string (usually from emotion's css function)
23+
* @param element - The BEM element name (optional)
24+
* @param modifier - The BEM modifier name (optional)
25+
* @returns The combined class name string
26+
*
27+
* @example
28+
* ```tsx
29+
* const baseClass = css`
30+
* display: flex;
31+
* &__element {
32+
* color: red;
33+
* }
34+
* &--modifier {
35+
* background: blue;
36+
* }
37+
* `;
38+
*
39+
* import bem from './utils/bem';
40+
*
41+
* const elementClass = bem(baseClass, 'element');
42+
* const modifierClass = bem(baseClass, null, 'modifier');
43+
* const elementWithModifierClass = bem(baseClass, 'element', 'modifier');
44+
* ```
45+
*/
46+
const bem = (baseClass: string, element?: string | null, modifier?: string | null): string => {
47+
let className = baseClass;
48+
49+
if (element) {
50+
className += `__${element}`;
51+
}
52+
53+
if (modifier) {
54+
className += `--${modifier}`;
55+
}
56+
57+
return className;
58+
};
59+
60+
export default bem;

0 commit comments

Comments
 (0)