Update assets dev dependencies

* Removes outdated precommit scripts
* Updates eslint, prettier, stylelint and their configurations: turns on plugins that were installed but off
* Fixes stylelint errors
* Applies prettier to css files
* Fixes new eslint errors
* Updates lint script to include both stylelint and eslint

.pre-commit-config.yaml

@@ -1,33 +1,6 @@
 # See https://pre-commit.com for more information
 # See https://pre-commit.com/hooks.html for more hooks
 repos:
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v2.4.1"
-    hooks:
-      - id: prettier
-        files: "assets/js|assets/css"
-        args: [--config, assets/.prettierrc.json]
-
-  - repo: https://github.com/awebdeveloper/pre-commit-stylelint
-    rev: '0.0.2'
-    hooks:
-    -   id: stylelint
-        additional_dependencies:
-          - stylelint@13.2.1
-          - stylelint-config-standard@20.0.0
-
-  - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: 'v8.3.0'
-    hooks:
-      - id: eslint
-        files: "assets/js|tracker/test"
-        additional_dependencies:
-          - eslint@7.30.0
-          - eslint-plugin-import@2.22.1
-          - eslint-plugin-jsx-a11y@6.4.1
-          - eslint-plugin-react@7.21.5
-          - eslint-plugin-react-hooks@4.2.0
-
   - repo: https://gitlab.com/jvenom/elixir-pre-commit-hooks
     rev: v1.0.0
     hooks:

assets/.eslintrc.json

@@ -1,18 +1,21 @@
 {
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
   "env": {
     "browser": true,
     "es6": true
   },
-  "extends": ["eslint:recommended",
+  "extends": [
+    "eslint:recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "prettier"
   ],
-  "parser": "babel-eslint",
-  "plugins": ["prettier"],
   "rules": {
-    "max-len": [0, {"code": 120}],
-    "prettier/prettier": [2],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/destructuring-assignment": [0],
     "react/prop-types": [0],

assets/.stylelintrc.json

@@ -1,22 +1,13 @@
 {
-  "extends": [
+  "extends": ["stylelint-config-standard"],
-    "stylelint-config-standard",
+  "ignoreFiles": ["./node_modules/**/*.*"],
-    "stylelint-config-prettier"
-  ],
   "rules": {
-    "at-rule-no-unknown": [
+    "import-notation": "string",
-      true,
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["apply", "screen"] }],
-      {
+    "at-rule-empty-line-before": [
-        "ignoreAtRules": [
+      "always",
-          "tailwind",
+      { "except": ["blockless-after-same-name-blockless"], "ignoreAtRules": ["apply"] }
-          "apply",
-          "variants",
-          "responsive",
-          "screen"
-        ]
-      }
     ],
-    "declaration-block-trailing-semicolon": null,
     "no-descending-specificity": null
   }
 }

assets/css/app.css

@@ -1,13 +1,18 @@
-@import "tailwindcss/base";
+/* @format */
-@import "flatpickr/dist/flatpickr.min.css";
-@import "./modal.css";
-@import "./loader.css";
-@import "./tooltip.css";
-@import "./flatpickr.css";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
 
-[x-cloak] { display: none; }
+@import 'tailwindcss/base';
+@import 'flatpickr/dist/flatpickr.min.css';
+@import './modal.css';
+@import './loader.css';
+@import './tooltip.css';
+@import './flatpickr.css';
+@import './chartjs.css';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+[x-cloak] {
+  display: none;
+}
 
 @media print {
   canvas {
@@ -47,7 +52,7 @@ html {
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  width:100vw;  /* Prevents content from jumping when scrollbar is added/removed due to vertical overflow */
+  width: 100vw; /* Prevents content from jumping when scrollbar is added/removed due to vertical overflow */
   overflow-x: hidden;
 }
 
@@ -71,13 +76,12 @@ blockquote {
   }
 }
 
-
 .light-text {
-  color: #F0F4F8;
+  color: #f0f4f8;
 }
 
 .transition {
-  transition: all .1s ease-in;
+  transition: all 0.1s ease-in;
 }
 
 .pulsating-circle {
@@ -111,42 +115,45 @@ blockquote {
   height: 100%;
   background-color: white;
   border-radius: 15px;
-  animation: pulse-dot 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
+  animation: pulse-dot 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
   @apply bg-green-500;
 }
 
-
 @keyframes pulse-ring {
   0% {
-    transform: scale(.33);
+    transform: scale(0.33);
   }
 
   50% {
     transform: scale(1);
   }
 
-  40%, 100% {
+  40%,
+  100% {
     opacity: 0;
   }
 }
 
 @keyframes pulse-dot {
   0% {
-    transform: scale(.8);
+    transform: scale(0.8);
   }
 
   25% {
     transform: scale(1);
   }
 
-  50%, 100% {
+  50%,
-    transform: scale(.8);
+  100% {
+    transform: scale(0.8);
   }
 }
 
-.just-text h1, .just-text h2, .just-text h3 {
+.just-text h1,
+.just-text h2,
+.just-text h3 {
   margin-top: 1em;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 .just-text p {
@@ -159,14 +166,15 @@ blockquote {
   right: 8px;
   left: auto;
   border: 8px solid transparent;
-    border-bottom-color: rgba(27,31,35,0.15);
+  border-bottom-color: rgba(27 31 35 15%);
 }
 
-.dropdown-content::before, .dropdown-content::after {
+.dropdown-content::before,
+.dropdown-content::after {
   position: absolute;
   display: inline-block;
-    content: "";
+  content: '';
-  }
+}
 
 .dropdown-content::after {
   top: -14px;
@@ -195,11 +203,11 @@ blockquote {
 }
 
 .dark .table-striped tbody tr:nth-child(odd) {
-  background-color: rgb(37, 47, 63);
+  background-color: rgb(37 47 63);
 }
 
 .dark .table-striped tbody tr:nth-child(even) {
-  background-color: rgb(26, 32, 44);
+  background-color: rgb(26 32 44);
 }
 
 .stats-item {
@@ -249,21 +257,21 @@ blockquote {
 
 /* Only because the map handler doesn't expose an easier way to change the shadow color */
 .dark .hoverinfo {
-  box-shadow: 1px 1px 5px rgb(26, 32, 44);
+  box-shadow: 1px 1px 5px rgb(26 32 44);
 }
 
 .fullwidth-shadow::before {
   @apply absolute top-0 w-screen h-full bg-gray-50 dark:bg-gray-850;
 
-  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 2px -2px rgba(0 0 0 6%);
-  content: "";
+  content: '';
   z-index: -1;
   left: calc(-1 * calc(50vw - 50%));
   background-color: inherit;
 }
 
 .dark .fullwidth-shadow::before {
-  box-shadow: 0 4px 2px -2px rgba(200, 200, 200, 0.1);
+  box-shadow: 0 4px 2px -2px rgba(200 200 200 10%);
 }
 
 iframe[hidden] {
@@ -274,16 +282,8 @@ iframe[hidden] {
   @apply cursor-default bg-gray-100 dark:bg-gray-300 pointer-events-none;
 }
 
-@media (max-width: 768px) {
-  .flatpickr-wrapper {
-    position: absolute !important;
-    right: 0 !important;
-    left: 0 !important;
-  }
-}
-
 #chartjs-tooltip {
-  background-color: rgba(25, 30, 56);
+  background-color: rgba(25 30 56);
   position: absolute;
   font-size: 14px;
   font-style: normal;
@@ -296,24 +296,24 @@ iframe[hidden] {
 .active-prop-heading {
   /* Properties related to text-decoration are all here in one place. TailwindCSS does support underline but that's about it. */
   text-decoration-line: underline;
-  text-decoration-color: #4338CA; /* tailwind's indigo-700 */
+  text-decoration-color: #4338ca; /* tailwind's indigo-700 */
   text-decoration-thickness: 2px;
 }
 
 @media (prefers-color-scheme: dark) {
   .active-prop-heading {
-    text-decoration-color: #6366F1; /* tailwind's indigo-500 */
+    text-decoration-color: #6366f1; /* tailwind's indigo-500 */
   }
-
 }
 
 /* This class is used for styling embedded dashboards. Do not remove. */
 /* stylelint-disable */
+/* prettier-ignore */
 .date-option-group { }
-
+/* stylelint-enable */
 
 .popper-tooltip {
-  background-color: rgba(25, 30, 56);
+  background-color: rgba(25 30 56);
 }
 
 .tooltip-arrow,

assets/css/chartjs.css

@@ -0,0 +1,11 @@
+/* @format */
+#chartjs-tooltip {
+  background-color: rgb(25 30 56);
+  position: absolute;
+  font-size: 14px;
+  font-style: normal;
+  padding: 10px 12px;
+  pointer-events: none;
+  border-radius: 5px;
+  z-index: 100;
+}

assets/css/flatpickr.css

@@ -1,4 +1,8 @@
-.flatpickr-calendar:before,.flatpickr-calendar:after {
+/* @format */
+/* stylelint-disable media-feature-range-notation */
+/* stylelint-disable selector-class-pattern */
+.flatpickr-calendar::before,
+.flatpickr-calendar::after {
   right: 22px !important;
 }
 
@@ -12,6 +16,14 @@
   }
 }
 
+@media (max-width: 768px) {
+  .flatpickr-wrapper {
+    position: absolute !important;
+    right: 0 !important;
+    left: 0 !important;
+  }
+}
+
 /* Because Flatpickr offers zero support for dynamic theming on its own (outside of third-party plugins) */
 .dark .flatpickr-calendar {
   background-color: #1f2937;
@@ -50,68 +62,65 @@
 }
 
 .dark .flatpickr-day.prevMonthDay {
-  color: #94a3af;
+  color: #9ca3af;
 }
 
 .dark .flatpickr-day {
-  color: #E5E7EB;
+  color: #e5e7eb;
-}
-
-.dark .flatpickr-day.prevMonthDay {
-  color: #9CA3AF;
 }
 
 .dark .flatpickr-day.nextMonthDay {
-  color: #9CA3AF;
+  color: #9ca3af;
 }
 
 .dark .flatpickr-day:hover {
   background-color: #374151;
 }
 
+/* stylelint-disable-next-line selector-not-notation */
 .dark :not(.startRange):not(.endRange).flatpickr-day.nextMonthDay:hover {
   background-color: #374151;
 }
 
+/* stylelint-disable-next-line selector-not-notation */
 .dark :not(.startRange):not(.endRange).flatpickr-day.prevMonthDay:hover {
   background-color: #374151;
 }
 
-.dark .flatpickr-next-month {
-  fill: #f3f4f6;
-}
-
 .dark .flatpickr-day.flatpickr-disabled {
-  color: #4B5563;
+  color: #4b5563;
 }
 
 .dark .flatpickr-day.flatpickr-disabled:hover {
-  color: #4B5563;
+  color: #4b5563;
 }
 
 .dark .flatpickr-day.today {
-  background-color: rgba(167, 243, 208, 0.5);
+  background-color: rgba(167 243 208 50%);
-}
+  border-color: #34d399;
-
-.dark .flatpickr-day.today {
-  border-color: #34D399;
 }
 
 .dark .flatpickr-day.inRange {
   background-color: #374151;
-  box-shadow: -5px 0 0 #374151,5px 0 0 #374151;
+  box-shadow:
+    -5px 0 0 #374151,
+    5px 0 0 #374151;
   border-color: #374151;
 }
 
 .dark .flatpickr-day.prevMonthDay.inRange {
   background-color: #374151;
-  box-shadow: -5px 0 0 #374151,5px 0 0 #374151;
+  box-shadow:
+    -5px 0 0 #374151,
+    5px 0 0 #374151;
   border-color: #374151;
 }
 
 .dark .flatpickr-day.nextMonthDay.inRange {
   background-color: #374151;
-  box-shadow: -5px 0 0 #374151,5px 0 0 #374151;
+  box-shadow:
+    -5px 0 0 #374151,
+    5px 0 0 #374151;
   border-color: #374151;
 }
 
@@ -125,12 +134,14 @@
   border-color: #6574cd !important;
 }
 
-.dark .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+.dark .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
-	-webkit-box-shadow: -10px 0 0 #4556c3 !important;
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
   box-shadow: -10px 0 0 #4556c3 !important;
 }
 
-.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
-	-webkit-box-shadow: -10px 0 0 #4556c3 !important;
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
   box-shadow: -10px 0 0 #4556c3 !important;
 }

assets/css/loader.css

@@ -1,7 +1,8 @@
+/* @format */
 .loading {
   width: 50px;
   height: 50px;
-  animation: loaderFadein .2s ease-in;
+  animation: loader-fade-in 0.2s ease-in;
 }
 
 .loading.sm {
@@ -17,7 +18,6 @@
   border-radius: 50%;
   border-top-color: #606f7b;
   animation: spin 1s ease-in-out infinite;
-  -webkit-animation: spin 1s ease-in-out infinite;
 }
 
 .dark .loading div {
@@ -30,16 +30,22 @@
   height: 25px;
 }
 
-
 @keyframes spin {
-  to { -webkit-transform: rotate(360deg); }
+  to {
-}
+    transform: rotate(360deg);
-@-webkit-keyframes spin {
+  }
-  to { -webkit-transform: rotate(360deg); }
 }
 
-@keyframes loaderFadein {
+@keyframes loader-fade-in {
-    0%   { opacity: 0; }
+  0% {
-    50%  { opacity: 0; }
+    opacity: 0;
-    100% { opacity: 1; }
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }

assets/css/modal.css

@@ -1,3 +1,5 @@
+/* @format */
+/* stylelint-disable selector-class-pattern */
 .modal {
   display: none;
 }
@@ -6,12 +8,12 @@
   display: block;
 }
 
-.modal[aria-hidden="false"] .modal__overlay {
+.modal[aria-hidden='false'] .modal__overlay {
-  animation: mmfadeIn .2s ease-in;
+  animation: mm-fade-in 0.2s ease-in;
 }
 
-.modal[aria-hidden="true"] .modal__overlay {
+.modal[aria-hidden='true'] .modal__overlay {
-  animation: mmfadeOut .2s ease-in;
+  animation: mm-fade-out 0.2s ease-in;
 }
 
 .modal-enter {
@@ -25,14 +27,10 @@
 
 .modal__overlay {
   position: fixed;
-  top: 0;
+  inset: 0;
-  left: 0;
+  background: rgba(0 0 0 60%);
-  right: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.6);
   z-index: 99;
-  overflow-x: auto;
+  overflow: auto;
-  overflow-y: auto;
 }
 
 .modal__container {
@@ -54,18 +52,30 @@
   right: 24px;
 }
 
-.modal__close:before { content: "\2715"; }
+.modal__close::before {
+  content: '\2715';
+}
 
 .modal__content {
   margin-bottom: 2rem;
 }
 
-@keyframes mmfadeIn {
+@keyframes mm-fade-in {
-    from { opacity: 0; }
+  from {
-      to { opacity: 1; }
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
-@keyframes mmfadeOut {
+@keyframes mm-fade-out {
-    from { opacity: 1; }
+  from {
-      to { opacity: 0; }
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
 }

assets/css/tooltip.css

@@ -1,43 +1,45 @@
-[tooltip]{
+/* @format */
-  position:relative;
+[tooltip] {
-  display:inline-block;
+  position: relative;
+  display: inline-block;
 }
 
 [tooltip]::before {
-  transition: .3s;
+  transition: 0.3s;
-  content: "";
+  content: '';
   position: absolute;
-  top:-6px;
+  top: -6px;
-  left:50%;
+  left: 50%;
   transform: translateX(-50%);
-  border-width: 4px 6px 0 6px;
+  border-width: 4px 6px 0;
   border-style: solid;
-  border-color: rgba(25, 30, 56) transparent transparent transparent;
+  border-color: rgba(25 30 56) transparent transparent;
   z-index: 99;
-  opacity:0;
+  opacity: 0;
 }
 
 [tooltip]::after {
-  transition: .3s;
+  transition: 0.3s;
   white-space: nowrap;
   content: attr(tooltip);
   position: absolute;
-  left:50%;
+  left: 50%;
-  top:-6px;
+  top: -6px;
   transform: translateX(-50%) translateY(-100%);
-  background: rgba(25, 30, 56);
+  background: rgba(25 30 56);
   text-align: center;
   color: #fff;
-  font-size: .875rem;
+  font-size: 0.875rem;
   min-width: 80px;
   max-width: 420px;
   border-radius: 3px;
   pointer-events: none;
   padding: 4px 8px;
-  z-index:99;
+  z-index: 99;
-  opacity:0;
+  opacity: 0;
 }
 
-[tooltip]:hover::after,[tooltip]:hover::before {
+[tooltip]:hover::after,
-   opacity:1
+[tooltip]:hover::before {
+  opacity: 1;
 }

assets/js/dashboard/components/combobox.js

@@ -11,6 +11,7 @@ function Option({isHighlighted, onClick, onMouseEnter, text, id}) {
   })
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <li
       className={className}
       id={id}

assets/js/dashboard/components/filter-operator-selector.js

@@ -1,9 +1,8 @@
 import React, { Fragment } from "react";
 
-import { FILTER_OPERATIONS, FILTER_OPERATIONS_DISPLAY_NAMES } from "../util/filters";
+import { FILTER_OPERATIONS, FILTER_OPERATIONS_DISPLAY_NAMES, isFreeChoiceFilter, supportsIsNot } from "../util/filters";
 import { Menu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { isFreeChoiceFilter, supportsIsNot } from "../util/filters";
 import classNames from "classnames";
 
 export default function FilterOperatorSelector(props) {

assets/js/dashboard/index.js

@@ -6,7 +6,7 @@ import { useIsRealtimeDashboard } from './util/filters'
 
 export const statsBoxClass = "stats-item relative w-full mt-6 p-4 flex flex-col bg-white dark:bg-gray-825 shadow-xl rounded"
 
-export function Dashboard() {
+function Dashboard() {
   const isRealTimeDashboard = useIsRealtimeDashboard();
   const [importedDataInView, setImportedDataInView] = useState(false)
 

assets/js/dashboard/query.js

@@ -4,11 +4,10 @@ import { AppNavigationLink, useAppNavigate } from './navigation/use-app-navigate
 import { nowForSite } from './util/date'
 import * as storage from './util/storage'
 import { COMPARISON_DISABLED_PERIODS, getStoredComparisonMode, isComparisonEnabled, getStoredMatchDayOfWeek } from './comparison-input'
-import { getFiltersByKeyPrefix } from './util/filters'
+import { getFiltersByKeyPrefix, parseLegacyFilter, parseLegacyPropsFilter } from './util/filters'
 
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { parseLegacyFilter, parseLegacyPropsFilter } from './util/filters'
 import { useQueryContext } from './query-context'
 
 dayjs.extend(utc)

assets/js/dashboard/site-switcher.js

@@ -8,6 +8,7 @@ import { Cog8ToothIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
 function Favicon({ domain, className }) {
   return (
     <img
+      alt=""
       src={`/favicon/sources/${encodeURIComponent(domain)}`}
       onError={(e) => {
         e.target.onerror = null

assets/js/dashboard/stats/behaviours/index.js

@@ -4,10 +4,9 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import classNames from 'classnames'
 import * as storage from '../../util/storage'
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning'
-import GoalConversions, { specialTitleWhenGoalFilter } from './goal-conversions'
+import GoalConversions, { specialTitleWhenGoalFilter, SPECIAL_GOALS } from './goal-conversions'
 import Properties from './props'
 import { FeatureSetupNotice } from '../../components/notice'
-import { SPECIAL_GOALS } from './goal-conversions'
 import { hasGoalFilter } from '../../util/filters'
 import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'

assets/js/dashboard/stats/devices/index.js

@@ -43,6 +43,7 @@ export function browserIconFor(browser) {
 
   return (
     <img
+      alt=""
       src={`/images/icon/browser/${filename}`}
       className="w-4 h-4 mr-2"
     />
@@ -155,6 +156,7 @@ export function osIconFor(os) {
 
   return (
     <img
+      alt=""
       src={`/images/icon/os/${filename}`}
       className="w-4 h-4 mr-2"
     />

assets/js/dashboard/stats/locations/index.js

@@ -7,8 +7,7 @@ import * as api from '../../api';
 import { apiPath } from '../../util/url';
 import ListReport from '../reports/list';
 import * as metrics from '../reports/metrics';
-import { hasGoalFilter } from "../../util/filters";
+import { hasGoalFilter, getFiltersByKeyPrefix } from '../../util/filters';
-import { getFiltersByKeyPrefix } from '../../util/filters';
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
 import { citiesRoute, countriesRoute, regionsRoute } from '../../router';
 

assets/js/dashboard/stats/modals/filter-modal-group.js

@@ -49,6 +49,7 @@ export default function FilterModalGroup({
       </div>
       {showAddRow && (
         <div className="mt-2">
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a className="underline text-indigo-500 text-sm cursor-pointer" onClick={() => onAddRow(filterGroup)}>
             + Add another
           </a>

assets/js/dashboard/stats/modals/filter-modal-props-row.js

@@ -58,6 +58,7 @@ export default function FilterModalPropsRow({
           className="mr-2"
           fetchOptions={fetchPropKeyOptions}
           singleOption
+          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
           values={propKey ? [{ value: propKey, label: propKey }] : []}
           onSelect={onPropKeySelect}
@@ -85,6 +86,7 @@ export default function FilterModalPropsRow({
       </div>
       {showDelete && (
         <div className="col-span-1 flex flex-col justify-center">
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a className="ml-2 text-red-600 h-5 w-5 cursor-pointer" onClick={onDelete}>
             <TrashIcon />
           </a>

assets/js/dashboard/stats/modals/filter-modal-row.js

@@ -3,9 +3,8 @@ import React, { useMemo } from "react"
 import FilterOperatorSelector from "../../components/filter-operator-selector"
 import Combobox from '../../components/combobox'
 
-import { FILTER_OPERATIONS, fetchSuggestions, isFreeChoiceFilter } from "../../util/filters"
+import { FILTER_OPERATIONS, fetchSuggestions, isFreeChoiceFilter, getLabel, formattedFilters } from "../../util/filters"
 import { apiPath } from '../../util/url'
-import { getLabel, formattedFilters } from '../../util/filters'
 import { useQueryContext } from "../../query-context"
 import { useSiteContext } from "../../site-context"
 

assets/js/dashboard/stats/modals/filter-modal.js

@@ -2,10 +2,9 @@ import React from 'react'
 import { useParams } from 'react-router-dom';
 
 import Modal from './modal';
-import { EVENT_PROPS_PREFIX, FILTER_GROUP_TO_MODAL_TYPE, formatFilterGroup, FILTER_OPERATIONS, getFilterGroup, FILTER_MODAL_TO_FILTER_GROUP } from '../../util/filters';
+import { EVENT_PROPS_PREFIX, FILTER_GROUP_TO_MODAL_TYPE, formatFilterGroup, FILTER_OPERATIONS, getFilterGroup, FILTER_MODAL_TO_FILTER_GROUP, cleanLabels } from '../../util/filters';
 import { useQueryContext } from '../../query-context';
 import { shouldIgnoreKeypress } from '../../keybinding';
-import { cleanLabels } from "../../util/filters";
 import FilterModalGroup from "./filter-modal-group";
 import { rootRoute } from '../../router';
 import { useAppNavigate } from '../../navigation/use-app-navigate';

assets/js/dashboard/stats/modals/props.js

@@ -2,13 +2,12 @@ import React, { useCallback } from "react";
 import { useParams } from "react-router-dom";
 
 import Modal from './modal'
-import { addFilter } from '../../query'
+import { addFilter, revenueAvailable } from '../../query'
 import { specialTitleWhenGoalFilter } from "../behaviours/goal-conversions";
 import { EVENT_PROPS_PREFIX, hasGoalFilter } from "../../util/filters"
 import BreakdownModal from "./breakdown-modal";
 import * as metrics from "../reports/metrics";
 import * as url from "../../util/url";
-import { revenueAvailable } from "../../query";
 import { useQueryContext } from "../../query-context";
 import { useSiteContext } from "../../site-context";
 

assets/js/dashboard/stats/modals/referrer-drilldown.js

@@ -58,6 +58,7 @@ function ReferrerDrilldownModal() {
   const renderIcon = useCallback((listItem) => {
     return (
       <img
+        alt=""
         src={`/favicon/sources/${encodeURIComponent(listItem.name)}`}
         className="h-4 w-4 mr-2 align-middle inline"
       />

assets/js/dashboard/stats/modals/sources.js

@@ -14,6 +14,7 @@ const VIEWS = {
     renderIcon: (listItem) => {
       return (
         <img
+          alt=""
           src={`/favicon/sources/${encodeURIComponent(listItem.name)}`}
           className="h-4 w-4 mr-2 align-middle inline"
         />

assets/js/dashboard/stats/sources/referrer-list.js

@@ -43,6 +43,7 @@ export default function Referrers({ source }) {
   function renderIcon(listItem) {
     return (
       <img
+        alt=""
         src={`/favicon/sources/${encodeURIComponent(listItem.name)}`}
         referrerPolicy="no-referrer"
         className="inline w-4 h-4 mr-2 -mt-px align-middle"

assets/js/dashboard/stats/sources/source-list.js

@@ -39,6 +39,7 @@ function AllSources({ afterFetchData }) {
   function renderIcon(listItem) {
     return (
       <img
+        alt=""
         src={`/favicon/sources/${encodeURIComponent(listItem.name)}`}
         className="w-4 h-4 mr-2"
       />

assets/package.json

@@ -5,8 +5,9 @@
   "scripts": {
     "format": "prettier --write {css,js}/**",
     "check-format": "prettier --check {css,js}/**",
-    "lint": "eslint js/**",
+    "eslint": "eslint js/**",
-    "bundlemon": "bundlemon"
+    "stylelint": "stylelint css/**",
+    "lint": "npm run eslint && npm run stylelint"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.10",
@@ -40,17 +41,15 @@
     "url-search-params-polyfill": "^8.2.5"
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
+    "eslint": "^8.57.0",
-    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react": "^7.21.5",
+    "prettier": "^3.3.3",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "stylelint": "^16.8.1",
-    "stylelint": "^14.1.0",
+    "stylelint-config-standard": "^36.0.1"
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^24.0.0"
   },
   "name": "assets"
 }