Update packages, migrate latest eslint.

.prettierrc.cjs → .prettierrc.mjs

@@ -1,12 +1,14 @@
-module.exports = {
+const config = {
   semi: true,
   tabWidth: 2,
+  useTabs: false,
+  printWidth: 100,
+  endOfLine: 'auto',
   singleQuote: true,
   trailingComma: 'es5',
   arrowParens: 'always',
   bracketSpacing: true,
   jsxSingleQuote: true,
-  useTabs: false,
-  printWidth: 100,
-  endOfLine: 'auto',
 };
+
+export default config;

eslint.config.mjs

@@ -0,0 +1,47 @@
+import reactPlugin from 'eslint-plugin-react';
+import importPlugin from 'eslint-plugin-import';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import prettierPlugin from 'eslint-plugin-prettier';
+import typescriptParser from '@typescript-eslint/parser';
+import typescriptPlugin from '@typescript-eslint/eslint-plugin';
+
+export default [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parser: typescriptParser,
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      import: importPlugin,
+      prettier: prettierPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+      'react-hooks': hooksPlugin,
+      '@typescript-eslint': typescriptPlugin,
+    },
+    rules: {
+      ...hooksPlugin.configs.recommended.rules,
+      ...jsxA11yPlugin.configs.recommended.rules,
+      'no-console': 'warn',
+      'react/prop-types': 'off',
+      'prettier/prettier': 'error',
+      'react/react-in-jsx-scope': 'off',
+      'react/require-default-props': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'no-unused-vars': ['error', { args: 'none' }],
+      'jsx-a11y/label-has-associated-control': 'off',
+      'react/function-component-definition': [2, { namedComponents: 'arrow-function' }],
+    },
+  },
+];

package.json

@@ -3,14 +3,14 @@
   "version": "0.1.10",
   "private": true,
   "dependencies": {
-    "apexcharts": "^3.54.0",
+    "apexcharts": "^4.0.0",
     "react": "^18.3.1",
-    "react-apexcharts": "^1.4.1",
+    "react-apexcharts": "^1.6.0",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^7.0.1",
     "react-scripts": "^5.0.1",
     "react-sparklines": "^1.7.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.6.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,23 +37,22 @@
     ]
   },
   "devDependencies": {
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.9.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-sparklines": "^1.7.5",
-    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "prettier": "^3.3.3",
-    "typescript-eslint": "^8.12.2"
+    "typescript-eslint": "^8.15.0"
   }
 }

src/App.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
 import Navigation from './navigation/Navigation';
 
-const App = (): React.JSX.Element => <Navigation />;
+const App = (): JSX.Element => <Navigation />;
 
 export default App;

src/components/Common/Box.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   children: React.ReactNode;
 }
 
-const Box = ({ children }: IProps): React.JSX.Element => <div className='box'>{children}</div>;
+const Box = ({ children }: IProps): JSX.Element => <div className='box'>{children}</div>;
 
 export default Box;

src/components/Forms/FormButton.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   type: string;
   text: string;
   onClick: (e: React.FormEvent) => void;
 }
 
-const FormButton = ({ type, text, onClick }: IProps): React.JSX.Element => (
+const FormButton = ({ type, text, onClick }: IProps): JSX.Element => (
   <button
     onClick={onClick}
     type={type === 'submit' ? 'submit' : 'button'}

src/components/Forms/FormCheckbox.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   name: string;
@@ -8,7 +6,7 @@ interface IProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const FormCheckbox = ({ name, text, onChange, checked }: IProps): React.JSX.Element => (
+const FormCheckbox = ({ name, text, onChange, checked }: IProps): JSX.Element => (
   <label className='checkbox-container'>
     {text}
     <input

src/components/Forms/FormInput.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   type: string;
@@ -9,7 +7,7 @@ interface IProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const FormInput = ({ type, name, value, placeholder, onChange }: IProps): React.JSX.Element => (
+const FormInput = ({ type, name, value, placeholder, onChange }: IProps): JSX.Element => (
   <input
     id={name}
     name={name}

src/components/Header/Header.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 // components
 import HeaderLeft from './HeaderLeft';
 import HeaderRight from './HeaderRight';
@@ -10,7 +8,7 @@ interface IProps {
   title: string;
 }
 
-const Header = ({ icon, title }: IProps): React.JSX.Element => (
+const Header = ({ icon, title }: IProps): JSX.Element => (
   <header className='flex flex-center flex-space-between'>
     <HeaderLeft icon={icon} title={title} />
     <HeaderRight />

src/components/Header/HeaderLeft.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   icon?: string;
   title: string;
 }
 
-const HeaderLeft = ({ icon, title }: IProps): React.JSX.Element => (
+const HeaderLeft = ({ icon, title }: IProps): JSX.Element => (
   <div className='header-left nowrap no-select'>
     {icon && (
       <button type='button' className='pointer'>

src/components/Header/HeaderRight.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import { Link, useLocation } from 'react-router-dom';
 
-const HeaderRight = (): React.JSX.Element => {
+const HeaderRight = (): JSX.Element => {
   const location = useLocation();
 
   return (

src/components/Navbar/Navbar.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import { Link } from 'react-router-dom';
 
 // components
 import NavbarButton from './NavbarButton';
 
-const Navbar = (): React.JSX.Element => (
+const Navbar = (): JSX.Element => (
   <nav className='navbar-inner no-select'>
     <div className='logo'>
       <Link to='/market'>

src/components/Navbar/NavbarButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Link, useLocation } from 'react-router-dom';
 
 // interfaces
@@ -9,7 +7,7 @@ interface IProps {
   title: string;
 }
 
-const NavbarButton = ({ url, icon, title }: IProps): React.JSX.Element => {
+const NavbarButton = ({ url, icon, title }: IProps): JSX.Element => {
   const location = useLocation();
 
   return (

src/components/Tables/Capital/CapitalRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 
 import { Sparklines, SparklinesLine } from 'react-sparklines';
 
@@ -8,11 +8,11 @@ interface IProps {
   index: number;
 }
 
-const CapitalRow = ({ item, index }: IProps): React.JSX.Element => {
-  const [color, setColor] = React.useState<string>('');
-  const [menuOpened, setMenuOpened] = React.useState<boolean>(false);
+const CapitalRow = ({ item, index }: IProps): JSX.Element => {
+  const [color, setColor] = useState<string>('');
+  const [menuOpened, setMenuOpened] = useState<boolean>(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (item.status === 1) {
       setColor('green');
     } else {

src/components/Tables/TopBar/TopBar.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   searchValue: string;
   searchSubmit: (e: React.FormEvent) => void;
   searchOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const TopBar = ({ searchValue, searchOnChange, searchSubmit }: IProps): React.JSX.Element => (
+const TopBar = ({ searchValue, searchOnChange, searchSubmit }: IProps): JSX.Element => (
   <div className='top-buttons flex flex-destroy flex-center flex-space-between'>
     <div>
       <div className='top-search no-select nowrap'>

src/components/Tables/Transactions/Amount.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   type: number;
   amount: string;
 }
 
-const Amount = ({ type, amount }: IProps): React.JSX.Element => {
+const Amount = ({ type, amount }: IProps): JSX.Element => {
   if (type === 1) {
     return <strong className='red'>{amount}</strong>;
   }

src/components/Tables/Transactions/Icon.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   type: number;
 }
 
-const Icon = ({ type }: IProps): React.JSX.Element => {
+const Icon = ({ type }: IProps): JSX.Element => {
   if (type === 1) {
     return (
       <div className='operation red'>

src/components/Tables/Transactions/Status.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 // interfaces
 interface IProps {
   status: number;
 }
 
-const Status = ({ status }: IProps): React.JSX.Element => {
+const Status = ({ status }: IProps): JSX.Element => {
   if (status === 1) {
     return <span className='status green'>BİTMİŞ</span>;
   }

src/components/Tables/Transactions/TransactionRow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 // components
 import Icon from './Icon';
 import Amount from './Amount';
@@ -10,7 +8,7 @@ interface IProps {
   item: any;
 }
 
-const TransactionRow = ({ item }: IProps): React.JSX.Element => (
+const TransactionRow = ({ item }: IProps): JSX.Element => (
   <tr>
     <td aria-label='type'>
       <Icon type={item.type} />

src/components/Widgets/BankProcess/BankProcess.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 
 // components
 import Box from '../../Common/Box';
@@ -37,12 +37,12 @@ const dataArray: IBankDetails[] = [
   },
 ];
 
-const BankProcess = (): React.JSX.Element => {
-  const [tab, setTab] = React.useState<number>(0);
-  const [bankDetails, setBankDetails] = React.useState<IBankDetails[]>([]);
-  const [selectedBank, setSelectedBank] = React.useState<IBankDetails | null>(null);
+const BankProcess = (): JSX.Element => {
+  const [tab, setTab] = useState<number>(0);
+  const [bankDetails, setBankDetails] = useState<IBankDetails[]>([]);
+  const [selectedBank, setSelectedBank] = useState<IBankDetails | null>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setBankDetails(dataArray);
 
     setSelectedBank(dataArray[0]);