build: add eslint

.eslintignore

@@ -0,0 +1 @@
+build/*

.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+  env: {
+    "cypress/globals": true,
+    node: true,
+    browser: true,
+    es6: true,
+    jest: true,
+  },
+  parser: "@typescript-eslint/parser",
+  extends: ["airbnb", "airbnb/hooks", "airbnb-typescript", "prettier"],
+  plugins: ["@typescript-eslint", "cypress", "prettier"],
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+  rules: {
+    "arrow-body-style": "off",
+    "react/prop-types": "off",
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        extensions: [".js", ".jsx", ".tsx"],
+      },
+    ],
+    "prettier/prettier": "error",
+  },
+};

package.json

@@ -19,21 +19,35 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/geojson": "^7946.0.11",
     "@types/preact-custom-element": "^4.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "concurrently": "^8.2.2",
     "esbuild": "^0.19.5",
     "esbuild-sass-plugin": "^2.16.0",
+    "eslint": "^8.52.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "17.1.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-prettier": "5.0.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "fixpack": "^4.0.0",
     "husky": "^8.0.3",
     "prettier": "^3.0.3",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.2.2"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js",
     "build:css": "yarn tailwind:component && yarn tailwind:website",
     "build:js": "node scripts/build.mjs",
     "dev": "node scripts/dev.mjs",
-    "format": "prettier --write 'src/**/*.(tsx|ts|js)'",
+    "format": "prettier --write 'src/**/*.(tsx|ts|js)' && eslint src/**/*.tsx --fix ",
+    "lint": "eslint src/**/*.tsx",
     "prepare": "husky install",
     "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog && yarn run build && HUSKY=0 yarn publish --access public --tag beta && git push origin HEAD && git push --tags ",
     "publish:beta:dryrun": "yarn release -- --prerelease beta --dry-run --skip.changelog",

src/BaseLayer/index.tsx

@@ -1,15 +1,15 @@
 import { MaplibreLayer } from "mobility-toolbox-js/ol";
-import useMapContext from "../utils/hooks/useMapContext";
 import { useEffect } from "preact/hooks";
 import { memo } from "preact/compat";
-import { MobilityMapProps } from "../MobilityMap";
+import useMapContext from "../utils/hooks/useMapContext";
+import type { MobilityMapProps } from "../MobilityMap";
 
 function BaseLayer({ baselayer = "travic_v2", apikey }: MobilityMapProps) {
   const mapContext = useMapContext();
   const { map, setBaseLayer } = mapContext;
   useEffect(() => {
     if (!map || !baselayer || !apikey) {
-      return;
+      return () => {};
     }
     const layer = new MaplibreLayer({
       apiKey: apikey,
@@ -21,7 +21,7 @@ function BaseLayer({ baselayer = "travic_v2", apikey }: MobilityMapProps) {
     return () => {
       layer.detachFromMap();
     };
-  }, [map, baselayer, apikey]);
+  }, [map, baselayer, apikey, setBaseLayer]);
 
   return null;
 }

src/Copyright/index.tsx

@@ -24,16 +24,15 @@ function Copyright({ options, ...props }: CopyrightProps) {
     div.className = "flex flex-wrap-reverse justify-end";
 
     return new CopyrightControl({
-      target: target,
+      target,
       element: div,
       ...options,
     });
   }, [options, target]);
 
   useEffect(() => {
-    let keys = [];
     if (!map || !control) {
-      return;
+      return () => {};
     }
     control.attachToMap(map);
 

src/GeolocationButton/index.tsx

@@ -1,4 +1,4 @@
-import { Geolocation, Map } from "ol";
+import { Geolocation } from "ol";
 import { unByKey } from "ol/Observable";
 import { fromLonLat } from "ol/proj";
 import { useEffect, useMemo } from "preact/hooks";
@@ -21,7 +21,7 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
   useEffect(() => {
     let keys = [];
     if (!map || !geolocation) {
-      return;
+      return () => {};
     }
     keys = [
       // First time we zoom and center on the position
@@ -52,6 +52,7 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
 
   return (
     <button
+      type="button"
       className="bg-white shadow-lg rounded-full p-1"
       onClick={() => {
         setIsTracking(!isTracking);
@@ -62,14 +63,14 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
         className={isTracking ? "animate-pulse" : ""}
         stroke="currentColor"
         fill="currentColor"
-        stroke-width="0"
+        strokeWidth="0"
         viewBox="0 0 512 512"
         focusable="false"
         height="1.5em"
         width="1.5em"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"></path>
+        <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z" />
       </svg>
     </button>
   );

src/I18NContext/index.tsx

@@ -0,0 +1,8 @@
+import { createContext } from "preact";
+
+export type UseI18NContextType = {
+  t: (id: string) => string;
+};
+
+const I18nContext = createContext({ t: () => {} });
+export default I18nContext;

src/Map/index.tsx

@@ -1,22 +1,19 @@
 import { Map as OlMap } from "ol";
 import { useEffect, useRef } from "preact/hooks";
-import useMapContext from "../utils/hooks/useMapContext";
 import { memo } from "preact/compat";
-import type { MobilityMapProps } from "../MobilityMap";
 import { PreactDOMAttributes, JSX } from "preact";
 
 // @ts-ignore
 import olStyle from "ol/ol.css";
+import type { MobilityMapProps } from "../MobilityMap";
+import useMapContext from "../utils/hooks/useMapContext";
 
 export type RealtimeMapProps = PreactDOMAttributes &
   JSX.HTMLAttributes<HTMLDivElement> &
   MobilityMapProps;
 
-const TRACKING_ZOOM = 16;
-
 function Map({
   apikey,
-  baselayer = "travic_v2",
   center = "831634,5933959",
   zoom = "13",
   minzoom,
@@ -30,16 +27,17 @@ function Map({
   const { map, setMap } = useMapContext();
 
   useEffect(() => {
+    let newMap: OlMap;
     if (mapRef.current) {
-      const newMap = new OlMap({ target: mapRef.current, controls: [] });
+      newMap = new OlMap({ target: mapRef.current, controls: [] });
       setMap(newMap);
     }
 
     return () => {
-      map.setTarget();
+      newMap?.setTarget();
       setMap();
     };
-  }, []);
+  }, [setMap]);
 
   useEffect(() => {
     if (!map) {

src/MobilityMap/index.tsx

@@ -1,26 +1,26 @@
-import { createContext } from "preact";
 import { memo } from "preact/compat";
+import { useMemo, useState } from "preact/hooks";
+import { Map as OlMap } from "ol";
+import {
+  MaplibreLayer,
+  RealtimeLayer as MbtRealtimeLayer,
+} from "mobility-toolbox-js/ol";
 import rosetta from "rosetta";
 // @ts-ignore
 import tailwind from "../style.css";
 // @ts-ignore
 import style from "./index.css";
 import Map from "../Map";
-import { useState } from "preact/hooks";
 import NotificationLayer from "../NotificationLayer";
 import RouteSchedule from "../RouteSchedule";
 import GeolocationButton from "../GeolocationButton";
 import BaseLayer from "../BaseLayer";
 import { MapContext } from "../utils/hooks/useMapContext";
 import RealtimeLayer from "../RealtimeLayer";
 import Overlay from "../Overlay";
-import { Map as OlMap } from "ol";
-import {
-  MaplibreLayer,
-  RealtimeLayer as MbtRealtimeLayer,
-} from "mobility-toolbox-js/ol";
 import ScaleLine from "../ScaleLine";
 import Copyright from "../Copyright";
+import I18nContext from "../I18NContext";
 
 const i18n = rosetta({
   de: {
@@ -52,8 +52,6 @@ i18n.locale(
     ?.split("-")[0] || "en",
 );
 
-export const I18nContext = createContext(i18n);
-
 export type MobilityMapProps = {
   apikey: string;
   baselayer?: string;
@@ -84,26 +82,28 @@ function MobilityMap({
   const [realtimeLayer, setRealtimeLayer] = useState<MbtRealtimeLayer>();
   const [map, setMap] = useState<OlMap>();
 
+  const mapContextValue = useMemo(() => {
+    return {
+      baseLayer,
+      isFollowing,
+      isTracking,
+      lineInfos,
+      map,
+      realtimeLayer,
+      setBaseLayer,
+      setIsFollowing,
+      setIsTracking,
+      setLineInfos,
+      setMap,
+      setRealtimeLayer,
+    };
+  }, [baseLayer, isFollowing, isTracking, lineInfos, map, realtimeLayer]);
+
   return (
     <I18nContext.Provider value={i18n}>
       <style>{tailwind}</style>
       <style>{style}</style>
-      <MapContext.Provider
-        value={{
-          baseLayer,
-          isFollowing,
-          isTracking,
-          lineInfos,
-          map,
-          realtimeLayer,
-          setBaseLayer,
-          setIsFollowing,
-          setIsTracking,
-          setLineInfos,
-          setMap,
-          setRealtimeLayer,
-        }}
-      >
+      <MapContext.Provider value={mapContextValue}>
         <div className="@container/main w-full h-full relative border">
           <div className="w-full h-full relative flex flex-col @lg/main:flex-row-reverse">
             <Map className="flex-1 relative overflow-hidden " {...props}>
@@ -114,12 +114,8 @@ function MobilityMap({
                 <GeolocationButton />
               </div>
               <div className="z-10 absolute left-2 right-2 text-[10px] bottom-2 flex justify-between items-end gap-2">
-                <ScaleLine
-                  className={"bg-slate-50 bg-opacity-70"}
-                ></ScaleLine>
-                <Copyright
-                  className={"bg-slate-50 bg-opacity-70"}
-                ></Copyright>
+                <ScaleLine className="bg-slate-50 bg-opacity-70" />
+                <Copyright className="bg-slate-50 bg-opacity-70" />
               </div>
             </Map>
             <Overlay

src/NotificationLayer/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "preact/hooks";
 import useMapContext from "../utils/hooks/useMapContext";
-import { MobilityMapProps } from "../MobilityMap";
+import type { MobilityMapProps } from "../MobilityMap";
 import useZoom from "../utils/hooks/useZoom";
 import {
   addNotificationsLayers,
@@ -45,7 +45,7 @@ const useNotifications = ({
     } else {
       setStyleMetadata(baseLayer.mbMap?.getStyle()?.metadata);
     }
-  }, [baseLayer]);
+  }, [baseLayer, baselayer]);
 
   const now = useMemo(() => {
     return notificationat ? new Date(notificationat) : new Date();
@@ -143,6 +143,7 @@ const useNotifications = ({
     styleMetadata,
     zoom,
     graphMapping,
+    baseLayer,
   ]);
 
   return notifications;

src/Overlay/index.tsx

@@ -1,7 +1,6 @@
 import { PreactDOMAttributes, JSX } from "preact";
-import ScrollableHandler, {
-  ScrollableHandlerProps,
-} from "../ScrollableHandler";
+import ScrollableHandler from "../ScrollableHandler";
+import type { ScrollableHandlerProps } from "../ScrollableHandler";
 
 export type OverlayProps = PreactDOMAttributes &
   JSX.HTMLAttributes<HTMLDivElement> & {
@@ -31,7 +30,7 @@ function Overlay({ children, ScrollableHandlerProps = {} }: OverlayProps) {
                 height: 4,
                 borderRadius: 2,
               }}
-            ></div>
+            />
           </ScrollableHandler>
           {children}
         </>