feat: upgrade linting capabilities (#90)

eslint.config.mjs

@@ -1,20 +1,68 @@
 // @ts-check
 
+import { readdirSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
 import eslint from '@eslint/js';
+import perfectionist from 'eslint-plugin-perfectionist';
 import tseslint from 'typescript-eslint';
 
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+const baseDir = join(_dirname, 'src');
+const internalDirectories = readdirSync(baseDir, {
+  withFileTypes: true,
+}).flatMap((dirent) => (dirent.isDirectory() ? dirent.name : []));
+
 export default tseslint.config(
   eslint.configs.recommended,
-  tseslint.configs.strict,
-  tseslint.configs.stylistic,
-  { ignores: ['build', 'deprecated'] },
+  tseslint.configs.strictTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  perfectionist.configs['recommended-natural'],
+  { ignores: ['build', 'coverage', 'deprecated'] },
   {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: _dirname,
+      },
+    },
     rules: {
       eqeqeq: 'error',
-      '@typescript-eslint/no-empty-function': [
+      '@typescript-eslint/no-unnecessary-condition': 'off',
+      'perfectionist/sort-imports': [
         'error',
-        { allow: ['arrowFunctions'] },
+        {
+          customGroups: {
+            value: {
+              react: ['^react$', '^react-.+'],
+            },
+          },
+          groups: [
+            'react',
+            'type',
+            'builtin',
+            'external',
+            'internal-type',
+            'internal',
+            ['parent-type', 'sibling-type', 'index-type'],
+            ['parent', 'sibling', 'index'],
+            'object',
+            'unknown',
+          ],
+          internalPattern: [`^(${internalDirectories.join('|')})(/|$)`],
+          sortSideEffects: true,
+        },
       ],
+      'perfectionist/sort-interfaces': 'off',
+      'perfectionist/sort-jsx-props': 'off',
+      'perfectionist/sort-modules': 'off',
+      'perfectionist/sort-objects': 'off',
     },
   },
+  {
+    files: ['**/*.mjs'],
+    extends: [tseslint.configs.disableTypeChecked],
+  },
 );

package.json

@@ -29,6 +29,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "eslint": "^9.16.0",
+    "eslint-plugin-perfectionist": "^4.2.0",
     "husky": "^9.1.7",
     "jest-canvas-mock": "^2.5.2",
     "lint-staged": "^15.2.10",

src/App/App.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
 
+import { Buttons, Content, Footer, Particles, Toggle } from 'components';
+
 import './App.scss';
 import { AppProvider } from './AppContext';
-import { Buttons, Content, Footer, Particles, Toggle } from 'components';
 import { config } from './config';
 
 export const App = () => {
@@ -11,9 +12,9 @@ export const App = () => {
 
   const init = () => {
     if (
-      window.matchMedia(
+      matchMedia(
         '(max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2)',
-      )?.matches
+      ).matches
     ) {
       setIsMobile(true);
     }

src/App/AppContext.tsx

@@ -16,7 +16,7 @@ interface AppContextInterface extends AppProviderInterface {
 const actions = { SET_THEME: 'SET_THEME' } as const;
 
 interface AppAction {
-  type: 'SET_THEME';
+  type: typeof actions.SET_THEME;
   value: string;
 }
 
@@ -26,7 +26,7 @@ const initialState: AppState = {
   config: {} as Config,
   isMobile: false,
   theme: themes.dark,
-  setTheme: () => {},
+  setTheme: () => undefined,
 };
 
 export const reducer = (state: AppState, action: AppAction): AppState => {
@@ -58,7 +58,9 @@ export const AppProvider = ({
     config: state.config,
     isMobile: state.isMobile,
     theme: state.theme,
-    setTheme: (value) => dispatch({ type: actions.SET_THEME, value }),
+    setTheme: (value) => {
+      dispatch({ type: actions.SET_THEME, value });
+    },
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

src/App/config.tsx

@@ -1,5 +1,5 @@
-import { Config } from 'types';
 import { Email, GitHub, LinkedIn, Resume } from 'icons';
+import { Config } from 'types';
 
 export const config: Config = {
   name: {

src/Index.test.tsx

@@ -1,11 +1,12 @@
-import { configure, fireEvent, render, screen } from '@testing-library/react';
 import { act } from 'react';
 
+import { configure, fireEvent, render, screen } from '@testing-library/react';
+
 import '__mocks__/matchMedia';
 import { App } from 'App/App';
 import { AppProvider, reducer } from 'App/AppContext';
-import { Footer } from 'components';
 import { themes } from 'appearance';
+import { Footer } from 'components';
 
 configure({ testIdAttribute: 'data-v2' });
 
@@ -25,12 +26,12 @@ const mockState = {
   },
   isMobile: false,
   theme: themes.dark,
-  setTheme: () => {},
+  setTheme: () => undefined,
 };
 
 describe('application tests', () => {
   beforeEach(async () => {
-    await act(async () => render(<App />));
+    await act(() => render(<App />));
   });
 
   /**
@@ -166,7 +167,7 @@ describe('application tests', () => {
 
 describe('app context tests', () => {
   it('should render partial footer on mobile', async () => {
-    await act(async () =>
+    await act(() =>
       render(
         <AppProvider
           config={mockState.config}
@@ -206,7 +207,7 @@ describe('local storage tests', () => {
   it("should show the dark theme when 'theme' is set to 'true' in local storage", async () => {
     // set local storage item and render the app
     localStorage.setItem('theme', 'true');
-    await act(async () => render(<App />));
+    await act(() => render(<App />));
 
     // check that the local storage item has been updated correctly
     expect(localStorage.getItem('theme')).toEqual('dark');
@@ -217,7 +218,7 @@ describe('local storage tests', () => {
   it("should show the light theme when 'theme' is set to 'false' in local storage", async () => {
     // set local storage item and render the app
     localStorage.setItem('theme', 'false');
-    await act(async () => render(<App />));
+    await act(() => render(<App />));
 
     // check that the local storage item has been updated correctly
     expect(localStorage.getItem('theme')).toEqual('light');
@@ -228,13 +229,15 @@ describe('local storage tests', () => {
 
   // https://testing-library.com/docs/react-testing-library/api/#rerender
   it('should persist the light theme through an app re-render', async () => {
-    const { rerender } = render(<App />);
+    const { rerender } = await act(() => render(<App />));
 
     expect(localStorage.getItem('theme')).toBeNull();
     localStorage.setItem('theme', 'light');
 
     // re-render the app and check the theme
-    await act(async () => rerender(<App />));
+    act(() => {
+      rerender(<App />);
+    });
     const particles = screen.getByTestId('particles');
 
     expect(localStorage.getItem('theme')).toEqual('light');
@@ -244,7 +247,7 @@ describe('local storage tests', () => {
   it('should change local storage value when toggle is clicked', async () => {
     // set local storage item and render the app
     localStorage.setItem('theme', 'light');
-    await act(async () => render(<App />));
+    await act(() => render(<App />));
 
     // click the toggle
     const toggle = screen.getByTestId('toggle');

src/__mocks__/matchMedia.ts

@@ -1,6 +1,6 @@
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query) => ({
+  value: (query: string) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -9,5 +9,5 @@ Object.defineProperty(window, 'matchMedia', {
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
     dispatchEvent: jest.fn(),
-  })),
+  }),
 });

src/components/Buttons.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';

src/components/Content.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import styled, { css } from 'styled-components';
 
 import { AppContext } from 'App/AppContext';

src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';

src/components/Particles.tsx

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
-import styled from 'styled-components';
 import ReactParticles from 'react-tsparticles';
 
+import styled from 'styled-components';
+
 import { AppContext } from 'App/AppContext';
 import { options } from 'appearance';
 import { Theme } from 'types';

src/components/Toggle.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';

src/index.tsx

@@ -1,5 +1,5 @@
-import { createRoot } from 'react-dom/client';
 import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 
 import { App } from 'App/App';
 

src/setupTests.ts

@@ -5,6 +5,6 @@
 import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
 
-console.error = (message) => {
+console.error = (message: string) => {
   throw new Error(`Console error: ${message}`);
 };

src/types/config.interface.ts

@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 export interface Content {
   display: string;
 }