chore(eslint): enable strict rule set form @typescript-eslint

- fix linter errors
- remove no-type-assertion plugin

.eslintrc.js

@@ -9,6 +9,8 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:@typescript-eslint/strict',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:import/recommended',
@@ -31,6 +33,10 @@ module.exports = {
     },
   ],
   parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
   plugins: [
     '@typescript-eslint',
     'jsx-a11y',
@@ -39,11 +45,18 @@ module.exports = {
     'sonarjs',
     'sort-keys-fix',
     'typescript-sort-keys',
-    'no-type-assertion',
     // HINT: prettier must be the last plugin to work
     'prettier',
   ],
   rules: {
+    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+    '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: false,
+      },
+    ],
     '@typescript-eslint/no-unused-vars': [
       'warn',
       {
@@ -90,7 +103,6 @@ module.exports = {
     ],
     'import/prefer-default-export': 'off',
     'no-console': ['warn', { allow: ['warn', 'error'] }],
-    'no-type-assertion/no-type-assertion': 'error',
     'prettier/prettier': 'error',
     'react/jsx-sort-default-props': 'error',
     'react/jsx-sort-props': [

.lintstagedrc.js

@@ -1,8 +1,13 @@
 module.exports = {
   '*.css': ['stylelint --fix', 'git add --force'],
-  '*.{js,jsx,ts,tsx}': [
-    // Extend rule levels based on .eslintrc.js
-    "eslint --fix --rule '@typescript-eslint/no-unused-vars: error' --rule 'no-console: error'",
+  '*.{js,jsx}': [
+    // Extend rule set of .eslintrc.js with 'no-console' and 'no-unused-vars'
+    "eslint --fix --rule 'no-console: [error, { allow: [warn, error] }]' --rule 'no-unused-vars: error'",
+    'git add --force',
+  ],
+  '*.{ts,tsx}': [
+    // Extend rule set of .eslintrc.js with 'no-console' and '@typescript-eslint/no-unused-vars'
+    "eslint --fix --rule 'no-console: [error, { allow: [warn, error] }]' --rule '@typescript-eslint/no-unused-vars: [error, { argsIgnorePattern: ^_, caughtErrorsIgnorePattern: ^_, varsIgnorePattern: ^_, }]'",
     'git add --force',
   ],
   '*.json': ['prettier --write', 'git add --force'],

src/auth.ts

@@ -1,8 +1,8 @@
 import {
-  AuthenticationResult,
+  type AuthenticationResult,
   BrowserAuthError,
   type Configuration,
-  EventMessage,
+  type EventMessage,
   EventType,
   InteractionRequiredAuthError,
   PublicClientApplication,
@@ -44,15 +44,14 @@ msalInstance.enableAccountStorageEvents();
 
 msalInstance.addEventCallback((event: EventMessage) => {
   if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
-    // eslint-disable-next-line no-type-assertion/no-type-assertion
     const payload = event.payload as AuthenticationResult;
     const account = payload.account;
     msalInstance.setActiveAccount(account);
   }
 });
 
 export const aquireTokenMsal = async () => {
-  const account = msalInstance.getActiveAccount() || undefined;
+  const account = msalInstance.getActiveAccount() ?? undefined;
 
   return msalInstance
     .acquireTokenSilent({
@@ -70,8 +69,8 @@ export const aquireTokenMsal = async () => {
           account,
           scopes: ['User.Read'],
         })
-        .catch((errorSsoSilent: Error) => {
-          msalInstance.acquireTokenRedirect({
+        .catch(async (errorSsoSilent: Error) => {
+          await msalInstance.acquireTokenRedirect({
             account,
             prompt: 'select_account',
             scopes: ['User.Read'],

src/components/Avatar/Avatar.test.tsx

@@ -11,7 +11,7 @@ import { Avatar } from './Avatar';
 const { mail } = MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME;
 
 test.beforeEach(async ({ page }) => {
-  page.route(`**/v1.0/users/${mail}/photos/64x64/$value`, async (route) => {
+  await page.route(`**/v1.0/users/${mail}/photos/64x64/$value`, async (route) => {
     return route.fulfill({
       body: Buffer.from(MOCK_RESPONST_MICROSOFT_GRAPH_GET_USERS_PHOTOS_64_VALUE, 'base64'),
       contentType: 'image/jpeg',

src/components/Avatar/Avatar.tsx

@@ -18,7 +18,7 @@ export const Avatar = ({ id, expand, ...rest }: AvatarProps) => {
 
   return (
     <IonAvatar className={expand ? styles.expand : ''} {...rest}>
-      <img alt={`avatar-${id}`} src={data} />
+      <img alt={`avatar-${id ?? 'default'}`} src={data} />
     </IonAvatar>
   );
 };

src/components/ButtonLogIn/ButtonLogIn.tsx

@@ -19,10 +19,10 @@ export const ButtonLogIn = ({ prompt }: TProps) => {
    * see: https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-prompt-behavior
    */
   const { searchParams } = useSearchParams();
-  const promptBehavior = useMemo(() => (searchParams?.prompt || prompt) ?? undefined, [prompt, searchParams]);
+  const promptBehavior = useMemo(() => (searchParams.prompt || prompt) ?? undefined, [prompt, searchParams]);
 
-  const handleClickLoginRedirect = useCallback(() => {
-    instance.loginRedirect({
+  const handleClickLoginRedirect = useCallback(async () => {
+    await instance.loginRedirect({
       ...REDIRECT_REQUEST,
       prompt: promptBehavior,
     });

src/components/ButtonLogOut/ItemLogOut.tsx

@@ -9,8 +9,8 @@ export const ItemLogOut = () => {
 
   const isDisabled = useMemo(() => inProgress === InteractionStatus.Logout, [inProgress]);
 
-  const handleClickLoginRedirect = useCallback(() => {
-    instance.logoutRedirect();
+  const handleClickLoginRedirect = useCallback(async () => {
+    await instance.logoutRedirect();
   }, [instance]);
 
   return (

src/components/ButtonReset/ItemResetUserState.tsx

@@ -3,8 +3,8 @@ import { IonItem, IonLabel } from '@ionic/react';
 import { persistor } from '../../store';
 
 export const ItemResetUserState = ({ label = 'Reset', labelColor = 'danger', ...rest }: TProps) => {
-  const handleClick = useCallback(() => {
-    persistor.purge();
+  const handleClick = useCallback(async () => {
+    await persistor.purge();
   }, []);
 
   return (

src/components/Greeter/Greeter.test.tsx

@@ -5,8 +5,8 @@ import { MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME } from '../../utils/test/api.me.mo
 import { MsalMock } from '../../utils/test/MsalMock';
 import { Greeter } from './Greeter';
 
-test.beforeEach(({ page }) => {
-  page.route('**/v1.0/me/', (route) => {
+test.beforeEach(async ({ page }) => {
+  await page.route('**/v1.0/me/', (route) => {
     return route.fulfill({
       body: JSON.stringify(MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME),
       contentType: 'application/json',

src/components/Message/MessageAccessInformation.test.tsx

@@ -4,7 +4,7 @@ import { MessageAccessInformation } from './MessageAccessInformation';
 test.describe('MessageAccessInformation', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(<MessageAccessInformation />);
-    await expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   test('shows text', async ({ mount }) => {
@@ -27,7 +27,7 @@ test.describe('MessageAccessInformation', () => {
       component.getByRole('link', { name: 'Microsoft Docs' }).click(), // Opens a new tab
     ]);
     await newPage.waitForLoadState();
-    await expect(await newPage.title()).toBeTruthy();
+    expect(await newPage.title()).toBeTruthy();
   });
 
   test('click on link to navigate to microsoft docs about app roles', async ({ context, mount }) => {
@@ -41,6 +41,6 @@ test.describe('MessageAccessInformation', () => {
       component.getByRole('link', { name: 'How to add app roles in Azure AD apps' }).click(), // Opens a new tab
     ]);
     await newPage.waitForLoadState();
-    await expect(await newPage.title()).toBeTruthy();
+    expect(await newPage.title()).toBeTruthy();
   });
 });

src/components/Message/MessageAccessRestricted.test.tsx

@@ -4,7 +4,7 @@ import { MessageAccessRestricted } from './MessageAccessRestricted';
 test.describe('MessageAccessRestricted', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(<MessageAccessRestricted />);
-    await expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   test('shows text', async ({ mount }) => {

src/components/Message/MessageAccessSuccess.test.tsx

@@ -4,7 +4,7 @@ import { MessageAccessSuccess } from './MessageAccessSuccess';
 test.describe('MessageAccessSuccess', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(<MessageAccessSuccess />);
-    await expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   test('shows text', async ({ mount }) => {

src/components/Message/MessagePermissionsInformation.test.tsx

@@ -4,7 +4,7 @@ import { MessagePermissionsInformation } from './MessagePermissionsInformation';
 test.describe('MessagePermissionsInformation', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(<MessagePermissionsInformation />);
-    await expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   test('shows text', async ({ mount }) => {
@@ -27,7 +27,7 @@ test.describe('MessagePermissionsInformation', () => {
       component.getByRole('link', { name: 'Microsoft Docs' }).click(), // Opens a new tab
     ]);
     await newPage.waitForLoadState();
-    await expect(await newPage.title()).toBeTruthy();
+    expect(await newPage.title()).toBeTruthy();
   });
 
   test('click on link to navigate to microsoft docs about microsoft graph', async ({ context, mount }) => {
@@ -41,7 +41,7 @@ test.describe('MessagePermissionsInformation', () => {
       component.getByRole('link', { name: 'Microsoft Graph' }).click(), // Opens a new tab
     ]);
     await newPage.waitForLoadState();
-    await expect(await newPage.title()).toBeTruthy();
+    expect(await newPage.title()).toBeTruthy();
   });
 
   test('click on link to navigate to microsoft docs about permissions and consent', async ({ context, mount }) => {
@@ -55,6 +55,6 @@ test.describe('MessagePermissionsInformation', () => {
       component.getByRole('link', { name: 'Permissions and consent in the Microsoft identity platform' }).click(), // Opens a new tab
     ]);
     await newPage.waitForLoadState();
-    await expect(await newPage.title()).toBeTruthy();
+    expect(await newPage.title()).toBeTruthy();
   });
 });

src/components/Message/MessagePermissionsRequiredItem.test.tsx

@@ -4,7 +4,7 @@ import { MessagePermissionsRequiredItem } from './MessagePermissionsRequiredItem
 test.describe('MessagePermissionsRequiredItem', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(<MessagePermissionsRequiredItem />);
-    await expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   test('shows text', async ({ mount }) => {

src/components/Theme/useTheme.ts

@@ -15,12 +15,10 @@ export const useTheme = () => {
     [dispatch]
   );
 
-  const theme = useMemo(() => getThemeById(userThemeId) || THEME_DEFAULT, [userThemeId]);
+  const theme = useMemo(() => getThemeById(userThemeId) ?? THEME_DEFAULT, [userThemeId]);
 
   useEffect(() => {
-    // eslint-disable-next-line no-type-assertion/no-type-assertion
     document.body.classList.remove(...(getThemeClasses() as string[]));
-    // eslint-disable-next-line no-type-assertion/no-type-assertion
     document.body.classList.add(theme.className as string);
   }, [theme]);
 

src/components/UserProfile/UserContactItem.tsx

@@ -6,10 +6,10 @@ import styles from './UserContactItem.module.css';
 export const UserContactItem = ({ lines = 'none', data, ...rest }: TProps) => {
   return (
     <IonItem lines={lines} {...rest}>
-      <Avatar id={data?.id} slot="start" />
+      <Avatar id={data.id} slot="start" />
       <IonLabel className="ion-text-wrap">
-        <IonText className={data?.mail ? styles.bold : ''}>{data?.displayName}</IonText>
-        <p>{data?.mail}</p>
+        <IonText className={data.mail ? styles.bold : ''}>{data.displayName}</IonText>
+        <p>{data.mail}</p>
       </IonLabel>
     </IonItem>
   );

src/components/UserProfile/UserProfile.tsx

@@ -14,8 +14,8 @@ export const UserProfile = () => {
   return (
     <>
       <UserInformations id={data.id} />
-      <UserManager id={data?.id} />
-      <UserPeoples id={data?.id} />
+      <UserManager id={data.id} />
+      <UserPeoples id={data.id} />
     </>
   );
 };

src/config.ts

@@ -7,14 +7,13 @@ const processEnv = {
   VITE_VERSION: import.meta.env.VITE_VERSION || packageJson.version || '1.0.0',
 };
 
-const injectedEnv = window.injectedEnv || {};
-
-export const env: typeof processEnv = {
+export const env = {
   ...processEnv,
-  ...injectedEnv,
+  ...window.injectedEnv,
 };
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface Window {
     injectedEnv: Partial<typeof processEnv>;
   }

src/index.tsx

@@ -6,7 +6,7 @@ import reportWebVitals from './report-web-vitals';
 import * as serviceWorkerRegistration from './service-worker-registration';
 
 const container = document.getElementById('root');
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion, no-type-assertion/no-type-assertion
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(container!);
 
 root.render(

src/pages/Layout/RootPageLayout.tsx

@@ -12,7 +12,7 @@ export const RootPageLayout = ({ children, className, color, title }: TProps) =>
         <IonToolbar color={color}>
           <IonTitle>{title}</IonTitle>
           <IonButtons slot="end">
-            <AvatarButtonDialog expand="full" id={data?.mail || undefined}>
+            <AvatarButtonDialog expand="full" id={data?.mail ?? undefined}>
               <UserMenuPopover userData={data} />
             </AvatarButtonDialog>
           </IonButtons>

src/pages/Login/LoginPage.tsx

@@ -2,7 +2,7 @@ import { IonImg, IonPage } from '@ionic/react';
 import { ButtonLogIn } from '../../components/ButtonLogIn/ButtonLogIn';
 import styles from './LoginPage.module.css';
 
-export function LoginPage() {
+export const LoginPage = () => {
   return (
     <IonPage>
       <div className="ion-padding ion-text-center">
@@ -16,4 +16,4 @@ export function LoginPage() {
       </div>
     </IonPage>
   );
-}
+};

src/pages/Logout/LogoutPage.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { LoaderPage } from '../Loading/LoaderPage';
 
-export function LogoutPage() {
+export const LogoutPage = () => {
   useEffect(() => {
-    const logout = async () => {
+    const logout = () => {
       // Add your logout logic here, e.g. clean cache, etc
 
       // Navigate to root page
@@ -16,4 +16,4 @@ export function LogoutPage() {
   }, []);
 
   return <LoaderPage />;
-}
+};

src/report-web-vitals.ts

@@ -1,13 +1,13 @@
-import { ReportHandler } from 'web-vitals';
+import { type ReportCallback } from 'web-vitals';
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+const reportWebVitals = (onPerfEntry?: ReportCallback) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
+    void import('web-vitals').then(({ onCLS, onFID, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry);
+      onFID(onPerfEntry);
+      onFCP(onPerfEntry);
+      onLCP(onPerfEntry);
+      onTTFB(onPerfEntry);
     });
   }
 };