Replace React scripts with ViteJS [CI SKIP]

Clément FRÉVILLE 2 years ago
parent b8929fb765
commit 8479696682

@ -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'
}
}
};

@ -5,5 +5,17 @@
* Les administrateurs (coachs) d'une equipe peuvent diffuser leurs tactiques à leurs élèves. * 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. * 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 ## Contribuer
Dans le code ou dans la documentation, merci d'ecrire en anglais si possible Dans le code ou dans la documentation, merci d'ecrire en anglais si possible

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tactique basket</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.js"></script>
</body>
</html>

@ -10,44 +10,22 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.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", "ionicons": "^6.1.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-native-ionicons": "^4.6.5", "react-native-ionicons": "^4.6.5",
"react-router-dom": "^6.8.1", "react-router-dom": "^6.8.1",
"react-scripts": "^5.0.1", "vite": "^4.1.4",
"vitest": "^0.29.2",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start --openssl-legacy-provider", "build": "vite build",
"build": "react-scripts build", "test": "vitest",
"test": "react-scripts test", "dev": "vite"
"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"
} }
} }

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Before

Width:  |  Height:  |  Size: 568 KiB

After

Width:  |  Height:  |  Size: 568 KiB

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body style="display: block">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" style="width: 100%; height: 100%"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

@ -29,27 +29,27 @@
<div id="teams-list"> <div id="teams-list">
<!-- afficher la liste des équipes --> <!-- afficher la liste des équipes -->
<div class="team-item"> <div class="team-item">
<img src="../src/img/logo2.png"> <img src="/img/logo2.png">
<p class="team-name">Equipe 1</p> <p class="team-name">Equipe 1</p>
</div> </div>
<div class="team-item"> <div class="team-item">
<img src="../src/img/logo2.png"> <img src="img/logo2.png">
<p class="team-name">Equipe 2</p> <p class="team-name">Equipe 2</p>
</div> </div>
<div class="team-item"> <div class="team-item">
<img src="../src/img/logo2.png"> <img src="img/logo2.png">
<p class="team-name">Equipe 3</p> <p class="team-name">Equipe 3</p>
</div> </div>
<div class="team-item"> <div class="team-item">
<img src="../src/img/logo2.png"> <img src="img/logo2.png">
<p class="team-name">Equipe 3</p> <p class="team-name">Equipe 3</p>
</div> </div>
<div class="team-item"> <div class="team-item">
<img src="../src/img/logo2.png"> <img src="img/logo2.png">
<p class="team-name">Equipe 3</p> <p class="team-name">Equipe 3</p>
</div> </div>
<div class="team-item"> <div class="team-item">
<img src="../src/img/logo2.png"> <img src="img/logo2.png">
<p class="team-name">Equipe 3</p> <p class="team-name">Equipe 3</p>
</div> </div>
</div> </div>

@ -39,7 +39,7 @@ export default function Login() {
</div> </div>
</div> </div>
<div className={"Href"}> <div className={"Href"}>
<a href="src/components/login#">J'ai oublier mon mot de passe</a> <a href="/login">J'ai oublier mon mot de passe</a>
<a href="/register">Je n'ai pas encore de compte</a> <a href="/register">Je n'ai pas encore de compte</a>
</div> </div>

@ -1,11 +1,16 @@
import React from 'react' import React, {useEffect, useState} from 'react'
import '../../css/main.css' import '../../css/main.css'
export function MainPage() { export function MainPage() {
let n = 5;
useEffect(() => {
n++;
}, []);
return (<> return (<>
<header> <header>
<div className="header-left"> <div className="header-left">
<img src={require("../../img/logo2.png")}/> <img src="/img/logo2.png" alt="" />
</div> </div>
<div className="header-center"> <div className="header-center">
<h2>Bienvenue, Prénom Nom</h2> <h2>Bienvenue, Prénom Nom</h2>
@ -21,27 +26,27 @@ export function MainPage() {
<div id="teams-list"> <div id="teams-list">
{/*afficher la liste des équipes*/} {/*afficher la liste des équipes*/}
<div className="team-item"> <div className="team-item">
<img src={require("../../img/logo2.png")}/> <img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 1</p> <p className="team-name">Equipe 1</p>
</div> </div>
<div className="team-item"> <div className="team-item">
<img src={require("../../img/logo2.png")}/> <img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 2</p> <p className="team-name">Equipe 2</p>
</div> </div>
<div className="team-item"> <div className="team-item">
<img src={require("../../img/logo2.png")}/> <img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p> <p className="team-name">Equipe 3</p>
</div> </div>
<div className="team-item"> <div className="team-item">
<img src={require("../../img/logo2.png")}/> <img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p> <p className="team-name">Equipe 3</p>
</div> </div>
<div className="team-item"> <div className="team-item">
<img src={require("../../img/logo2.png")}/> <img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p> <p className="team-name">Equipe 3</p>
</div> </div>
<div className="team-item"> <div className="team-item">
<img src={require("../../img/logo2.png")}/> <img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p> <p className="team-name">Equipe 3</p>
</div> </div>
</div> </div>
@ -53,19 +58,19 @@ export function MainPage() {
<div id="schemas-list"> <div id="schemas-list">
{/*afficher la liste des Schémas*/} {/*afficher la liste des Schémas*/}
<div className="schemas-item"> <div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/> <img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 1</p> <p className="schemas-name">Schéma 1</p>
</div> </div>
<div className="schemas-item"> <div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/> <img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 2</p> <p className="schemas-name">Schéma 2</p>
</div> </div>
<div className="schemas-item"> <div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/> <img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 3</p> <p className="schemas-name">Schéma 3</p>
</div> </div>
<div className="schemas-item"> <div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/> <img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 3</p> <p className="schemas-name">Schéma 3</p>
</div> </div>
</div> </div>

@ -39,7 +39,7 @@ body {
/* Portrait layout (default) */ /* Portrait layout (default) */
.app { .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 */ position:absolute; /* position in the center of the screen */
left:50%; left:50%;
top:50%; top:50%;

@ -13,7 +13,7 @@ a{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; 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 */ -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
backdrop-filter: blur(35px); backdrop-filter: blur(35px);
background-color: rgba(182, 182, 182, 0.2); background-color: rgba(182, 182, 182, 0.2);
@ -123,4 +123,4 @@ label input{
a:nth-of-type(1) { a:nth-of-type(1) {
display: block; display: block;
} }

@ -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"),
}));
},
},
],
},
},
});
Loading…
Cancel
Save