JS maj majeures (#2698)

* update js, patch versions only * upgrade babel (minor version) * update deck.gl (minor) * upgrade core-js (minor) * upgrade eslint-plugin-import (minor) * update leaflet (minor) * upgrade mini-css-extract-plugin (minor) * upgrade sass (minor) * upgrade webpack webpack-cli (minor) * upgrade copy-webpack-plugin (major) * upgrade css-minimizer-webpack-plugin (major) * upgrade eslint (major) * upgrade eslint-config-standard (major) * upgrade eslint-plugin-promise (major) * upgrade sass-loader (major) * upgrade style-loader (major) * upgrade stylelint and stylelint-scss (major) * upgrade @fortawesome/fontawesome-free (major) * update css-loader (major) * add !optional as suggested in logs * file-loader is deprecated fixes icons and image issues webpack-contrib/css-loader#1354 (comment) * update leaflet image path * add eslint-plugin-n package * use object shorthand notation * remove console.log * install stylelint-config-standard-scss * use stylelint-config-standard-scss * update rules and scss code * correct some linting problems * add some exceptions * use only single quotes in scss * upgrade eslint (minor)
etalab · Oct 10, 2022 · 72883c6 · 72883c6
1 parent 9c80989
commit 72883c6
Show file tree

Hide file tree

Showing 27 changed files with 2,460 additions and 2,422 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,14 +1,11 @@
 {
-  "plugins": [
-    "stylelint-scss"
-  ],
+  "extends": "stylelint-config-standard-scss",
   "rules": {
       "scss/at-import-no-partial-leading-underscore": true,
       "scss/dollar-variable-colon-space-after": "at-least-one-space",
       "scss/dollar-variable-default": true,
 
       "color-no-invalid-hex": true,
-      "function-calc-no-invalid": true,
       "function-calc-no-unspaced-operator": true,
       "unit-no-unknown": true,
       "property-no-unknown": true,
@@ -30,6 +27,24 @@
       "block-opening-brace-newline-after": "always-multi-line",
       "max-empty-lines": 1,
       "no-empty-first-line": true,
-      "indentation": 2
+      "indentation": 2,
+      "string-quotes": "single",
+      "rule-empty-line-before": null,
+      "selector-class-pattern": null,
+      "hue-degree-notation": null,
+      "color-function-notation": null,
+      "scss/dollar-variable-empty-line-before": null,
+      "alpha-value-notation": null,
+      "number-leading-zero": null,
+      "at-rule-empty-line-before": null,
+      "value-keyword-case": null,
+      "no-missing-end-of-source-newline": null,
+      "comment-empty-line-before": null,
+      "font-family-no-missing-generic-family-keyword": null,
+      "declaration-colon-newline-after": null,
+      "scss/at-extend-no-missing-placeholder": null,
+      "selector-id-pattern": null,
+      "declaration-block-no-redundant-longhand-properties": null,
+      "scss/double-slash-comment-empty-line-before": null
   }
 }
diff --git a/apps/transport/client/javascripts/explore.js b/apps/transport/client/javascripts/explore.js
@@ -58,7 +58,7 @@ const deckGLLayer = new LeafletLayer({
         })
     ],
     layers: [],
-    getTooltip: getTooltip
+    getTooltip
 })
 map.addLayer(deckGLLayer)
 

diff --git a/apps/transport/client/javascripts/map.js b/apps/transport/client/javascripts/map.js
@@ -70,8 +70,8 @@ function getAomsFG (featureFunction, style, filter = null) {
         .then(response => {
             const geoJSON = Leaflet.geoJSON(response, {
                 onEachFeature: featureFunction,
-                style: style,
-                filter: filter,
+                style,
+                filter,
                 pane: 'aoms'
             })
             aomsFeatureGroup.addLayer(geoJSON)
@@ -89,7 +89,8 @@ function getRegionsFG (featureFunction, style) {
         .then(response => {
             const geoJSON = Leaflet.geoJSON(response, {
                 onEachFeature: featureFunction,
-                style: style
+                style,
+                pointToLayer: (_point, _) => null
             })
             regionsFeatureGroup.addLayer(geoJSON)
         })
@@ -128,7 +129,7 @@ function displayQuality (featureFunction, style) {
         .then(response => {
             const geoJSON = Leaflet.geoJSON(response, {
                 onEachFeature: featureFunction,
-                style: style
+                style
             })
             qualityFeatureGroup.addLayer(geoJSON)
         })

diff --git a/apps/transport/client/javascripts/resource-viz.js b/apps/transport/client/javascripts/resource-viz.js
@@ -172,7 +172,7 @@ function setGBFSGeofencingStyle (feature, layer) {
     }
     layer
         .bindPopup(`<pre>${popupContent}</pre>`)
-        .setStyle({ fillColor: color, color: color, fillOpacity: opacity, stroke: false })
+        .setStyle({ fillColor: color, color, fillOpacity: opacity, stroke: false })
 }
 
 function fillStations (stationsGeojson, bikesAvailable, docksAvailable) {

diff --git a/apps/transport/client/package.json b/apps/transport/client/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@deck.gl/core": "^8.7.0",
     "@deck.gl/layers": "^8.7.0",
-    "@fortawesome/fontawesome-free": "^5.1.0",
+    "@fortawesome/fontawesome-free": "^6.2.0",
     "@tarekraafat/autocomplete.js": "^7.2.0",
     "clipboard": "^2.0.10",
     "core-js": "3",
@@ -31,23 +31,25 @@
     "@babel/core": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
     "babel-loader": "^8.0.5",
-    "copy-webpack-plugin": "^8.1.0",
-    "css-loader": "^5.2.7",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^7.22.0",
-    "eslint-config-standard": "^16.0.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.2.1",
+    "eslint": "^8.24.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-n": "^15.3.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-promise": "^6.0.1",
     "eslint-plugin-standard": "^5.0.0",
     "file-loader": "^6.2.0",
     "import-glob-loader": "^1.1.0",
     "mini-css-extract-plugin": "^2.5.3",
     "sass": "^1.32.8",
-    "sass-loader": "^11.0.1",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.3.1",
-    "stylelint-scss": "^3.16.1",
+    "sass-loader": "^13.1.0",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.13.0",
+    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-scss": "^4.3.0",
     "webpack": "^5.68.0",
     "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.8.0"

diff --git a/apps/transport/client/stylesheets/components/_aom_table.scss b/apps/transport/client/stylesheets/components/_aom_table.scss
@@ -16,7 +16,7 @@
       background-color: $light-grey;
     }
 
-    &:after {
+    &::after {
       content: '';
       height: 30px;
       width: 15px;
@@ -27,12 +27,12 @@
       background-size: cover;
     }
 
-    &.asc:after {
+    &.asc::after {
       background: url('/images/icons/sorted_asc.svg');
       background-size: cover;
     }
 
-    &.desc:after {
+    &.desc::after {
       background: url('/images/icons/sorted_desc.svg');
       background-size: cover;
     }

diff --git a/apps/transport/client/stylesheets/components/_autocomplete.scss b/apps/transport/client/stylesheets/components/_autocomplete.scss
@@ -73,7 +73,7 @@
       }
     }
     &:nth-of-type(2)::before {
-      content: "Ou rechercher par lieu :";
+      content: 'Ou rechercher par lieu :';
       flex: 0 0 90%;
       color: grey;
       padding-left: 12px;

diff --git a/apps/transport/client/stylesheets/components/_backoffice.scss b/apps/transport/client/stylesheets/components/_backoffice.scss
@@ -5,7 +5,7 @@
   padding-top: 48px;
   th,
   td {
-    padding: 0 3px 0 3px;
+    padding: 0 3px;
     text-align: center;
   }
   table,
@@ -19,13 +19,13 @@
 .backoffice-datasets {
   width: 100%;
   border-collapse: collapse;
-  border: 0px solid black;
+  border: 0 solid black;
   th {
     text-align: left;
-    border: 0px solid black;
+    border: 0 solid black;
   }
   td {
-    border: 0px solid black;
+    border: 0 solid black;
     padding: 2px;
   }
   tr {
@@ -44,10 +44,10 @@
   form > button,
   div > button {
     padding: 2px;
-    margin: 0px;
+    margin: 0;
     &:hover {
       padding: 2px;
-      margin: 0px;
+      margin: 0;
     }
   }
 }
@@ -68,7 +68,7 @@
   justify-content: center;
   align-items: flex-end;
   div {
-    padding: 0 12px 0 12px;
+    padding: 0 12px;
   }
 }
 
@@ -142,7 +142,7 @@
     background-color: red;
   }
   .some_failures {
-    background-color:orange;
+    background-color: orange;
   }
   .only_successes {
     background-color: rgb(0, 255, 0);

diff --git a/apps/transport/client/stylesheets/components/_blog.scss b/apps/transport/client/stylesheets/components/_blog.scss
@@ -1,5 +1,5 @@
 article.panel {
-  p{
+  p {
     img {
       display: block;
       margin-left: auto;
@@ -8,4 +8,4 @@ article.panel {
       max-height: 30em;
     }
   }
-}
+}
diff --git a/apps/transport/client/stylesheets/components/_dataset-details.scss b/apps/transport/client/stylesheets/components/_dataset-details.scss
@@ -40,8 +40,8 @@
   background-color: var(--theme-background-grey);
   flex-grow: 4;
   flex-basis: 700px;
-  padding: 0 12px 48px 12px;
-  min-width: 0px;
+  padding: 0 12px 48px;
+  min-width: 0;
 }
 
 .dataset-metas {
@@ -50,7 +50,7 @@
   min-width: 300px;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: 0 12px 48px 12px;
+  padding: 0 12px 48px;
   font-style: normal;
   .icon {
     margin-right: .2em;
@@ -67,10 +67,10 @@
 .dataset-title-div {
   background-color: white;
   margin: 0 auto;
-  padding: 96px 0 96px 0;
+  padding: 96px 0;
   text-align: center;
   @media (max-width: 1250px) {
-    padding: 48px 0 48px 0;
+    padding: 48px 0;
   }
 }
 
@@ -294,7 +294,8 @@
   width: 60%;
 }
 
-.mode, .version {
+.mode,
+.version {
   background-color: var(--lighter-blue);
 }
 
@@ -433,11 +434,11 @@
 
   .dataset {
     .section {
-      padding: 1em 0 1em 0;
+      padding: 1em 0;
     }
 
     .section-grey {
-      padding: 3em 0 3em 0;
+      padding: 3em 0;
     }
   }
 }
@@ -513,11 +514,11 @@
   height: 400px;
   margin: 0 auto;
   z-index: 0;
-  input[type="radio"] {
+  input[type='radio'] {
     width: 16px;
     height: 16px;
   }
-  input[type="radio"]::before {
+  input[type='radio']::before {
     top: 15%;
     left: 15%;
     width: 10px;

diff --git a/apps/transport/client/stylesheets/components/_discussions.scss b/apps/transport/client/stylesheets/components/_discussions.scss
@@ -19,7 +19,7 @@
   }
 
   .discussion-comment + .discussion-comment {
-    padding: 1vw 0 1vw 0;
+    padding: 1vw 0;
   }
 
   .discussion-comment__content p:last-child {

diff --git a/apps/transport/client/stylesheets/components/_download_availability.scss b/apps/transport/client/stylesheets/components/_download_availability.scss
@@ -22,44 +22,44 @@
         filter: brightness(110%);
       }
     }
-    .day~.day {
+    .day ~ .day {
       margin-left: 3px;
     }
   }
 
-  .download_availability_100{
+  .download_availability_100 {
     background-color: rgb(117, 206, 94);
   }
-  .download_availability_99{
+  .download_availability_99 {
     background-color: rgb(189, 206, 94);
   }
-  .download_availability_95{
+  .download_availability_95 {
     background-color: rgb(206, 185, 94);
   }
-  .download_availability_50{
+  .download_availability_50 {
     background-color: rgb(255, 118, 83);
   }
-  .download_availability_low{
+  .download_availability_low {
     background-color: rgb(199, 18, 18);
   }
 
-  .download_availability_100_text{
+  .download_availability_100_text {
     color: rgb(117, 206, 94);
     filter: brightness(70%);
   }
-  .download_availability_99_text{
+  .download_availability_99_text {
     color: rgb(189, 206, 94);
     filter: brightness(70%);
   }
-  .download_availability_95_text{
+  .download_availability_95_text {
     color: rgb(206, 185, 94);
     filter: brightness(70%);
   }
-  .download_availability_50_text{
+  .download_availability_50_text {
     color: rgb(255, 118, 83);
     filter: brightness(70%);
   }
-  .download_availability_low_text{
+  .download_availability_low_text {
     color: rgb(199, 18, 18);
     filter: brightness(70%);
   }

diff --git a/apps/transport/client/stylesheets/components/_error.scss b/apps/transport/client/stylesheets/components/_error.scss
@@ -10,7 +10,7 @@
 }
 
 .error__background {
-  background: url("../images/error-background-1920.jpg") no-repeat center center
+  background: url('../images/error-background-1920.jpg') no-repeat center center
     fixed;
   background-size: cover;
   width: 75vw;
@@ -31,7 +31,7 @@
 }
 
 .error__background.internal_error {
-  background: url("../images/train_wreck_at_Montparnasse_1895.jpg") no-repeat
+  background: url('../images/train_wreck_at_Montparnasse_1895.jpg') no-repeat
     center bottom;
   background-size: cover;
 }