Merge branch 'main' into jz/resurrect-triptych-react-app

.github/workflows/ci.yml

@@ -84,6 +84,15 @@ jobs:
       - working-directory: ./assets
         run: npm run format:check
 
+  js-lint:
+    name: Frontend Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - working-directory: ./assets
+        run: npm run lint:errors
+
   js-types:
     name: Frontend Types
     runs-on: ubuntu-latest

.tool-versions

@@ -1,3 +1,3 @@
 elixir 1.15.7-otp-26
 erlang 26.2
-nodejs 16.20.2
+nodejs 18.20.2

Dockerfile

@@ -14,7 +14,7 @@ RUN mix do local.hex --force, local.rebar --force
 RUN mix do deps.get --only prod
 
 # next, build the frontend assets within a Node.JS container
-FROM node:16 as assets-builder
+FROM node:18 as assets-builder
 
 WORKDIR /root
 ADD . .

assets/css/bus_shelter_v2.scss

@@ -41,6 +41,7 @@
 @import "v2/multi_screen_page";
 
 @import "v2/simulation_common";
+@import "v2/lcd_common/simulation";
 @import "v2/bus_shelter/simulation";
 
 body {

assets/css/busway_v2.scss

@@ -24,6 +24,9 @@
 @import "v2/busway/departures_no_data";
 @import "v2/lcd_common/departures_no_data";
 
+@import "v2/simulation_common";
+@import "v2/lcd_common/simulation";
+
 body {
   margin: 0px;
 }

assets/css/v2/bus_shelter/simulation.scss

@@ -1,40 +1,4 @@
 .simulation-screen-scrolling-container {
-  scrollbar-color: #607180 #2e3f4d;
-
-  &::-webkit-scrollbar {
-    width: 12px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #607180;
-    border-radius: 12px;
-    border: 2px solid #2e3f4d;
-  }
-  &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    border-radius: 12px;
-    background-color: #2e3f4d;
-  }
-}
-
-.simulation-screen-scrolling-container {
-  display: flex;
-  overflow-y: hidden;
-  overflow-x: auto;
-  padding-bottom: 20px;
-
-  .simulation__full-page {
-    height: 344px;
-    width: 193.5px;
-    margin-right: 24px;
-    z-index: 999;
-    box-shadow: 0px 0px 32px 0px #00000040;
-
-    & > * {
-      transform-origin: top left;
-      transform: scale(17.92%);
-    }
-  }
-
   .simulation__flex-zone {
     background: #2e3f4d;
     display: flex;

assets/css/v2/lcd_common/simulation.scss

@@ -0,0 +1,36 @@
+.simulation-screen-scrolling-container {
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: auto;
+  padding-bottom: 20px;
+  scrollbar-color: #607180 #2e3f4d;
+
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #607180;
+    border-radius: 12px;
+    border: 2px solid #2e3f4d;
+  }
+
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    background-color: #2e3f4d;
+  }
+
+  .simulation__full-page {
+    height: 344px;
+    width: 193.5px;
+    margin-right: 24px;
+    z-index: 999;
+    box-shadow: 0px 0px 32px 0px #00000040;
+
+    & > * {
+      transform-origin: top left;
+      transform: scale(17.92%);
+    }
+  }
+}

assets/eslint.config.mjs

@@ -0,0 +1,35 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import eslintConfigPrettier from "eslint-config-prettier";
+
+export default [
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReactConfig,
+  eslintConfigPrettier,
+  {
+    settings: { react: { version: "detect" } },
+    rules: {
+      "no-empty": ["error", { allowEmptyCatch: true }],
+      "react/display-name": "warn",
+      "react/prop-types": "warn",
+      "@typescript-eslint/ban-ts-comment": "warn",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        // https://typescript-eslint.io/rules/no-unused-vars/
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
+    },
+  },
+];