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 é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
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
type: docker
name: Apache

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

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

26561
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -2,52 +2,31 @@
"name": "tbasket",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.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",
"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",
"web-vitals": "^2.1.4"
"react-router-dom": "^6.8.2",
"web-vitals": "^3.1.1"
},
"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"
]
"build": "vite build",
"test": "vitest",
"dev": "vite",
"lint": "eslint src/**/*.{js,jsx}"
},
"devDependencies": {
"concurrently": "^7.6.0",
"electron": "^23.0.0",
"electron-is-dev": "^2.0.0",
"wait-on": "^7.0.1"
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@vitejs/plugin-react": "^3.1.0",
"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">
<!-- afficher la liste des équipes -->
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="/img/logo2.png">
<p class="team-name">Equipe 1</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 2</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</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 {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
@ -39,7 +38,7 @@ export default function Login() {
</div>
</div>
<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>
</div>

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

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

@ -39,7 +39,7 @@ body {
/* Portrait layout (default) */
.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 */
left:50%;
top:50%;

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

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