add eslint

.eslintrc.json

@@ -0,0 +1,48 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "react-hooks",
+        "tailwindcss"
+    ],
+    "rules": {
+        "react-hooks/rules-of-hooks": "error",
+        "react/react-in-jsx-scope": "off",
+        "react/button-has-type": "error",
+        "react/prop-types": "error",
+        "react/require-default-props": "off",
+        "react/no-array-index-key": "error",
+        "react/jsx-uses-react": "error",
+        "react/display-name": "error",
+        "react/no-danger-with-children": "error",
+        //        "react-hooks/exhaustive-deps": "warn",
+        //        "react/jsx-no-bind": "error",
+        "react/jsx-uses-vars": "error",
+        "no-restricted-syntax": ["warn", {
+            "selector": "CallExpression[callee.object.name='console'][callee.property.name!=/^(warn|info)$/]",
+            "message": "Unexpected property on console object was called"
+        }],
+        "semi": [2, "never"],
+        "tailwindcss/classnames-order": "warn",
+        "tailwindcss/enforces-negative-arbitrary-values": "warn",
+        "tailwindcss/enforces-shorthand": "warn",
+        "tailwindcss/migration-from-tailwind-2": "warn",
+        "tailwindcss/no-arbitrary-value": "off",
+        "tailwindcss/no-contradicting-classname": "error"
+    }
+}
+
+// https://dev.to/logrocket/12-essential-eslint-rules-for-react-5doc

package.json

@@ -3,7 +3,9 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "vite build"
+        "build": "vite build",
+        "lint": "./node_modules/.bin/eslint resources/js/ --ext .ts,.tsx",
+        "lint-fix": "eslint ./ --fix"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.6",
@@ -13,6 +15,10 @@
         "@vitejs/plugin-react": "^4.0.4",
         "autoprefixer": "^10.4.15",
         "axios": "^1.5.0",
+        "eslint": "^8.49.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-tailwindcss": "^3.13.0",
         "laravel-vite-plugin": "^0.8.0",
         "postcss": "^8.4.29",
         "react": "^18.2.0",

resources/js/app.tsx

@@ -1,9 +1,8 @@
 //import './bootstrap';
-import '../css/app.css';
+import '../css/app.css'
-import App from "./pages/App";
+import App from "./pages/App"
-
+import { createRoot } from 'react-dom/client'
-import { createRoot } from 'react-dom/client';
+import React from 'react'
-import React from 'react';
 import './customPrototypes'
 
 

resources/js/components/Header.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from "react"
-import {Link} from "react-router-dom";
+import {Link} from "react-router-dom"
-import useAuthUser from "../hooks/AuthUser";
+import useAuthUser from "../hooks/AuthUser"
 
 const Header = () => {
 
     const {authUser, logout} = useAuthUser()
 
-    return <header className="bg-blue-700 text-white py-3 px-5 text-xl flex justify-between">
+    return <header className="flex justify-between py-3 px-5 bg-blue-700 text-white text-xl">
         <div>
             <Link to="/">Bermite</Link>
         </div>

resources/js/pages/App.tsx

@@ -1,10 +1,10 @@
 import React from "react"
-import {AuthUserProvider} from "../hooks/AuthUser";
+import {AuthUserProvider} from "../hooks/AuthUser"
-import Router from "./Router";
+import Router from "./Router"
 
 const App = () => {
 
-    return <main className="dark:bg-gray-900 dark:text-white h-screen overflow-scroll">
+    return <main className="h-screen overflow-scroll dark:bg-gray-900 dark:text-white">
         <AuthUserProvider>
             <Router />
         </AuthUserProvider>

resources/js/pages/Auth/Profile.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React from "react"
-import useAuthUser from "../../hooks/AuthUser";
+import useAuthUser from "../../hooks/AuthUser"
-import PageLayout from "../../components/PageLayout";
+import PageLayout from "../../components/PageLayout"
 
 const Profile = () => {
 
@@ -8,9 +8,9 @@ const Profile = () => {
 
     return <PageLayout>
         <div className="flex justify-between">
-            <h1 className="text-lg font-bold mb-5">Profile de l'utilisateur</h1>
+            <h1 className="mb-5 text-lg font-bold">Profile de l&apos;utilisateur</h1>
             <div>
-                <button onClick={logout} className="btn-primary text-lg font-bold">Se déconnecter</button>
+                <button type="button" onClick={logout} className="btn-primary text-lg font-bold">Se déconnecter</button>
             </div>
         </div>
         <div>

resources/js/pages/Home.tsx

@@ -1,7 +1,6 @@
 import React from "react"
-import {Link} from "react-router-dom";
+import useAuthUser from "../hooks/AuthUser"
-import useAuthUser from "../hooks/AuthUser";
+import Rainfall from "./Rainfall"
-import Rainfall from "./Rainfall";
 
 const Home = () => {
 
@@ -10,7 +9,7 @@ const Home = () => {
     return <div>
         {authUser
             ? <Rainfall />
-            : <div className="pt-10 px-5">
+            : <div className="px-5 pt-10">
                 <h1 className="text-lg font-bold">Application pour enregistrer sa pluviométrie</h1>
                 <p className="mt-5">Un compte est nécessaire mais les inscriptions ne sont pas ouvertes.</p>
             </div>

resources/js/pages/Meteo.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import PageLayout from "../components/PageLayout";
+import PageLayout from "../components/PageLayout"
 
 const Meteo = () => {
 

resources/js/pages/Router.tsx

@@ -1,8 +1,8 @@
-import React, {lazy, Suspense} from "react";
+import React, {lazy, Suspense} from "react"
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes} from "react-router-dom"
-import useAuthUser from "../hooks/AuthUser";
+import useAuthUser from "../hooks/AuthUser"
-import Header from "../components/Header";
+import Header from "../components/Header"
-import Meteo from "./Meteo";
+import Meteo from "./Meteo"
 
 const ForgotPassword = lazy(() => import('./Auth/ForgotPassword'))
 const Home = lazy(() => import('./Home'))