From 84796966825f13c8ac4d1abe6d3c73b331ac453e Mon Sep 17 00:00:00 2001 From: clfreville2 Date: Fri, 3 Mar 2023 20:13:51 +0100 Subject: [PATCH] Replace React scripts with ViteJS [CI SKIP] --- .eslintrc.js | 17 +++++++++ README.md | 12 +++++++ index.html | 12 +++++++ package.json | 40 +++++---------------- {src => public}/img/Visualiseur.png | Bin {src => public}/img/background-login.jpg | Bin {src => public}/img/logo2.png | Bin public/index.html | 43 ----------------------- public/main.html | 12 +++---- src/components/login/Login.js | 2 +- src/components/main/Main.js | 29 ++++++++------- src/css/index.css | 2 +- src/css/login.css | 4 +-- vite.config.js | 37 +++++++++++++++++++ 14 files changed, 114 insertions(+), 96 deletions(-) create mode 100644 .eslintrc.js create mode 100644 index.html rename {src => public}/img/Visualiseur.png (100%) rename {src => public}/img/background-login.jpg (100%) rename {src => public}/img/logo2.png (100%) delete mode 100644 public/index.html create mode 100644 vite.config.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..d42b0bc --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,17 @@ +module.exports = { + plugins: [ + 'react', + 'react-hooks' + ], + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended' + ], + settings: { + react: { + version: 'detect' + } + } +}; diff --git a/README.md b/README.md index 4b02518..a3565bf 100644 --- a/README.md +++ b/README.md @@ -5,5 +5,17 @@ * Les administrateurs (coachs) d'une equipe peuvent diffuser leurs tactiques à leurs élèves. * Les élèves peuvent aussi proposer leurs propres tactiques que les coachs peuvent à leurs tour approuver. +## Construire l'application + +Ce projet utilise NPM comme gestionnaire de paquets, mais vous pouvez remplacer NPM par Yarn ou PNPM. + +Une fois le dépôt cloné : + +```bash +npm install # Installe les dépendances +npm run build # Construit l'application +npm run dev # Démarre le serveur de développement +``` + ## Contribuer Dans le code ou dans la documentation, merci d'ecrire en anglais si possible diff --git a/index.html b/index.html new file mode 100644 index 0000000..8087193 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + Tactique basket + + + +
+ + + diff --git a/package.json b/package.json index 58b8bad..72850ce 100644 --- a/package.json +++ b/package.json @@ -10,44 +10,22 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "@vitejs/plugin-react": "^3.1.0", + "eslint": "^8.35.0", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", "ionicons": "^6.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-native-ionicons": "^4.6.5", "react-router-dom": "^6.8.1", - "react-scripts": "^5.0.1", + "vite": "^4.1.4", + "vitest": "^0.29.2", "web-vitals": "^2.1.4" }, "scripts": { - "start": "react-scripts start --openssl-legacy-provider", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", - "dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron\"", - "electron": "wait-on tcp:3000 && electron ." - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "concurrently": "^7.6.0", - "electron": "^23.0.0", - "electron-is-dev": "^2.0.0", - "wait-on": "^7.0.1" + "build": "vite build", + "test": "vitest", + "dev": "vite" } } diff --git a/src/img/Visualiseur.png b/public/img/Visualiseur.png similarity index 100% rename from src/img/Visualiseur.png rename to public/img/Visualiseur.png diff --git a/src/img/background-login.jpg b/public/img/background-login.jpg similarity index 100% rename from src/img/background-login.jpg rename to public/img/background-login.jpg diff --git a/src/img/logo2.png b/public/img/logo2.png similarity index 100% rename from src/img/logo2.png rename to public/img/logo2.png diff --git a/public/index.html b/public/index.html deleted file mode 100644 index be522ba..0000000 --- a/public/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - React App - - - -
- - - diff --git a/public/main.html b/public/main.html index 3edf841..83f6f63 100644 --- a/public/main.html +++ b/public/main.html @@ -29,27 +29,27 @@
- +

Equipe 1

- +

Equipe 2

- +

Equipe 3

- +

Equipe 3

- +

Equipe 3

- +

Equipe 3

diff --git a/src/components/login/Login.js b/src/components/login/Login.js index 20c159c..99a47ad 100644 --- a/src/components/login/Login.js +++ b/src/components/login/Login.js @@ -39,7 +39,7 @@ export default function Login() {
- J'ai oublier mon mot de passe + J'ai oublier mon mot de passe Je n'ai pas encore de compte
diff --git a/src/components/main/Main.js b/src/components/main/Main.js index 0ae286e..182891a 100644 --- a/src/components/main/Main.js +++ b/src/components/main/Main.js @@ -1,11 +1,16 @@ -import React from 'react' +import React, {useEffect, useState} from 'react' import '../../css/main.css' export function MainPage() { + let n = 5; + useEffect(() => { + n++; + }, []); + return (<>
- +

Bienvenue, Prénom Nom

@@ -21,27 +26,27 @@ export function MainPage() {
{/*afficher la liste des équipes*/}
- +

Equipe 1

- +

Equipe 2

- +

Equipe 3

- +

Equipe 3

- +

Equipe 3

- +

Equipe 3

@@ -53,19 +58,19 @@ export function MainPage() {
{/*afficher la liste des Schémas*/}
- +

Schéma 1

- +

Schéma 2

- +

Schéma 3

- +

Schéma 3

diff --git a/src/css/index.css b/src/css/index.css index ecea7e8..12b5b53 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -39,7 +39,7 @@ body { /* Portrait layout (default) */ .app { - background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */ + background:url(../../public/img/logo.png) no-repeat center top; /* 170px x 200px */ position:absolute; /* position in the center of the screen */ left:50%; top:50%; diff --git a/src/css/login.css b/src/css/login.css index f7b33e3..f75e00a 100644 --- a/src/css/login.css +++ b/src/css/login.css @@ -13,7 +13,7 @@ a{ justify-content: center; align-items: center; min-height: 100vh; - background-image: url("../img/background-login.jpg"); + background-image: url("/img/background-login.jpg"); -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */ backdrop-filter: blur(35px); background-color: rgba(182, 182, 182, 0.2); @@ -123,4 +123,4 @@ label input{ a:nth-of-type(1) { display: block; -} \ No newline at end of file +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..1d0cbaf --- /dev/null +++ b/vite.config.js @@ -0,0 +1,37 @@ +import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vitest/config'; +import fs from 'fs/promises'; + +// https://vitejs.dev/config/ +export default defineConfig({ + esbuild: { + loader: "jsx", + include: /src\/.*\.jsx?$/, + exclude: [], + }, + build: { + target: 'es2021', + }, + test: { + globals: true, + environment: 'jsdom', + }, + plugins: [react({ + loader: { '.js': 'jsx' }, + })], + optimizeDeps: { + esbuildOptions: { + plugins: [ + { + name: "load-js-files-as-jsx", + setup(build) { + build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({ + loader: "jsx", + contents: await fs.readFile(args.path, "utf8"), + })); + }, + }, + ], + }, + }, +});