Merge pull request 'Cleanup dependencies and build logic' (#2) from clement.freville2/Application:dep/cleanup into dev
continuous-integration/drone/push Build is passing Details

Reviewed-on: Tactique-basket/Application#2
dev
Maxime BATISTA 2 years ago
commit 89780605e1

@ -0,0 +1,27 @@
module.exports = {
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module'
},
env: {
browser: true,
},
plugins: [
'react',
'react-hooks'
],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended'
],
rules: {
'react/no-unescaped-entities': 0
},
settings: {
react: {
version: 'detect'
}
}
};

@ -5,5 +5,18 @@
* 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
npm run test # Lance les tests
```
## 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

@ -1,42 +1,3 @@
kind: pipeline
type: docker
name: Android
steps:
- name: Deliver
image: override6/tbasket-frontend:latest
workspace:
path: /src/android
environment:
SSH_PRIVATE_KEY:
from_secret: SSH_PRIVATE
SSH_PUBLIC_KEY:
from_secret: SSH_PUBLIC
commands:
- bash drone/deliver.sh android
- bash drone/android-sign.sh
---
kind: pipeline
type: docker
name: Electron
steps:
- name: Deliver
image: override6/tbasket-frontend:latest
workspace:
path: /src/electron
environment:
SSH_PRIVATE_KEY:
from_secret: SSH_PRIVATE
SSH_PUBLIC_KEY:
from_secret: SSH_PUBLIC
commands:
- bash drone/deliver.sh electron
---
kind: pipeline kind: pipeline
type: docker type: docker
name: Apache name: Apache

@ -33,6 +33,8 @@ case "$TYPE" in
;; ;;
"browser") "browser")
OUT_DIR="platforms/browser/www/" OUT_DIR="platforms/browser/www/"
mkdir -p "$OUT_DIR"
npm install && npm run build -- --outDir "$OUT_DIR"
if [ "$DRONE_BRANCH" = "production" ]; then if [ "$DRONE_BRANCH" = "production" ]; then
SERV_DIR="public_html/basket" SERV_DIR="public_html/basket"
else SERV_DIR="/server/apache/TBasket/" else SERV_DIR="/server/apache/TBasket/"
@ -46,16 +48,8 @@ case "$TYPE" in
;; ;;
esac esac
#install cordova
cordova platform add "$TYPE" || exit 1
cordova build "$TYPE" $OPTIONS || exit 1
echo "delivering outputs on server" echo "delivering outputs on server"
echo "making delivery onto '$USER@$IP:$SERV_DIR'" echo "making delivery onto '$USER@$IP:$SERV_DIR'"
rsync -avz -I \ rsync -avz -I \
--rsync-path="mkdir -p \"$SERV_DIR\" && rsync" \ --rsync-path="mkdir -p \"$SERV_DIR\" && rsync" \

@ -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>

26779
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -2,52 +2,31 @@
"name": "tbasket", "name": "tbasket",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"main": "public/electron.js",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0", "@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0", "@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.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-router-dom": "^6.8.2",
"react-router-dom": "^6.8.1", "web-vitals": "^3.1.1"
"react-scripts": "^5.0.1",
"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", "lint": "eslint src/**/*.{js,jsx}"
"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": { "devDependencies": {
"concurrently": "^7.6.0", "@testing-library/jest-dom": "^5.16.5",
"electron": "^23.0.0", "@testing-library/react": "^14.0.0",
"electron-is-dev": "^2.0.0", "@vitejs/plugin-react": "^3.1.0",
"wait-on": "^7.0.1" "eslint": "^8.35.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"jsdom": "^21.1.0",
"vite": "^4.1.4",
"vitest": "^0.29.2"
} }
} }

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>

@ -1,8 +0,0 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

@ -1,4 +1,3 @@
import React from 'react'
import '../../css/login.css' import '../../css/login.css'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
@ -39,7 +38,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,10 @@
import React from 'react'
import '../../css/main.css' import '../../css/main.css'
export function MainPage() { export function MainPage() {
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 +20,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 +52,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>

@ -1,4 +1,3 @@
import React from 'react'
import '../../css/login.css' import '../../css/login.css'
import { library } from '@fortawesome/fontawesome-svg-core'; import { library } from '@fortawesome/fontawesome-svg-core';

@ -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(/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);

@ -0,0 +1,12 @@
import { render } from '@testing-library/react';
import { describe, test, expect } from 'vitest';
const App = () => <div>learn react</div>
describe('Application', function () {
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
});

@ -0,0 +1 @@
import '@testing-library/jest-dom'

@ -0,0 +1,36 @@
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|test)\/.*\.jsx?$/,
exclude: [],
},
build: {
target: 'es2021',
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: './test/setupTests.js'
},
plugins: [react()],
optimizeDeps: {
esbuildOptions: {
plugins: [
{
name: 'load-js-files-as-jsx',
setup(build) {
build.onLoad({ filter: /(src|test)\/.*\.js$/ }, async (args) => ({
loader: 'jsx',
contents: await fs.readFile(args.path, 'utf8'),
}));
},
},
],
},
},
});