@geops/rvf-mobility-web-component 0.1.46 → 0.1.47

package/src/utils/getDelayColorForVehicle.test.ts

@@ -5,6 +5,7 @@ describe("getDelayColorForVehicle", () => {
     expect(getDelayColorForVehicle(0, true, true)).toBe("#dc2626");
     expect(getDelayColorForVehicle(0, true, false)).toBe("#a0a0a0");
   });
+
   it("returns null delay (no realtime train) color", () => {
     expect(getDelayColorForVehicle(null)).toBe("transparent");
   });
@@ -27,6 +28,7 @@ describe("getDelayColorForVehicle", () => {
     expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ea580c");
     expect(getDelayColorForVehicle(5 * 60 * 1000)).toBe("#ea580c");
   });
+
   it("returns red", () => {
     expect(getDelayColorForVehicle(9.49 * 60 * 1000 - 1)).toBe("#dc2626");
     expect(getDelayColorForVehicle(10 * 60 * 1000)).toBe("#dc2626");

package/src/utils/getDelayString.test.ts

@@ -5,15 +5,18 @@ describe("getDelayString", () => {
     expect(getDelayString(7200000)).toBe("2h");
     expect(getDelayString(7255555)).toBe("2h1m");
   });
+
   it("returns minutes (round)", () => {
     expect(getDelayString(120000)).toBe("2m");
     expect(getDelayString(151000)).toBe("3m");
   });
+
   it("doesn't display seconds", () => {
     expect(getDelayString(1000)).toBe("0");
     expect(getDelayString(30000)).toBe("1m");
     expect(getDelayString(7255555)).toBe("2h1m");
   });
+
   it("returns defsult 0 value", () => {
     expect(getDelayString(0)).toBe("0");
     expect(getDelayString(null)).toBe("0");

package/src/utils/getDelayTextForVehicle.test.ts

@@ -6,19 +6,23 @@ describe("getDelayTextForVehicle", () => {
       String.fromCodePoint(0x00d7),
     );
   });
+
   it("returns hours (floor)", () => {
     expect(getDelayTextForVehicle(7200000)).toBe("+2h");
     expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
   });
+
   it("returns minutes (round)", () => {
     expect(getDelayTextForVehicle(120000)).toBe("+2m");
     expect(getDelayTextForVehicle(151000)).toBe("+3m");
   });
+
   it("doesn't display seconds", () => {
     expect(getDelayTextForVehicle(1000)).toBe("");
     expect(getDelayTextForVehicle(30000)).toBe("+1m");
     expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
   });
+
   it("returns empty value", () => {
     expect(getDelayTextForVehicle(1000)).toBe("");
     expect(getDelayTextForVehicle(null)).toBe("");

package/src/utils/getFullTrajectoryAndFit.ts

@@ -1,9 +1,10 @@
-import { RealtimeLayer } from "mobility-toolbox-js/ol";
-import { RealtimeTrainId } from "mobility-toolbox-js/types";
-import { Map } from "ol";
 import { GeoJSON } from "ol/format";
 import { Vector } from "ol/source";
 
+import type { RealtimeLayer } from "mobility-toolbox-js/ol";
+import type { RealtimeTrainId } from "mobility-toolbox-js/types";
+import type { Map } from "ol";
+
 const getFullTrajectoryAndFit = async (
   map: Map,
   realtimeLayer: RealtimeLayer,

package/src/utils/getHoursAndMinutes.test.ts

@@ -5,6 +5,7 @@ describe("getHoursAndMinutes", () => {
     expect(getHoursAndMinutes(7200000)).toBe("02:00");
     expect(getHoursAndMinutes(72999999)).toBe("20:16");
   });
+
   it("returns empty string", () => {
     expect(getHoursAndMinutes(null)).toBe("");
     expect(getHoursAndMinutes(undefined)).toBe("");

package/src/utils/getLayersAsFlatArray.ts

@@ -1,5 +1,5 @@
-import { Group } from "ol/layer";
-import BaseLayer from "ol/layer/Base";
+import type { Group } from "ol/layer";
+import type BaseLayer from "ol/layer/Base";
 
 const getLayersAsFlatArray = (
   layersOrLayer: BaseLayer | BaseLayer[],

package/src/utils/getLinkByDevice.ts

@@ -1,4 +1,4 @@
-import { Feature } from "ol";
+import type { Feature } from "ol";
 
 function getLinkByDevice(feature: Feature): string {
   const iosLink = feature?.get("rental_uris_ios");

package/src/utils/getMainColorForVehicle.ts

@@ -1,4 +1,6 @@
-import {
+import getBgColor from "./getBgColor";
+
+import type {
   RealtimeDeparture,
   RealtimeLine,
   RealtimeMot,
@@ -6,8 +8,6 @@ import {
   RealtimeTrajectory,
 } from "mobility-toolbox-js/types";
 
-import getBgColor from "./getBgColor";
-
 // This function returns the main color of a line using a line, trajectory, stopsequence or departure object.
 const getMainColorForVehicle = (object: unknown = null): string => {
   const line =

package/src/utils/getPermalinkParameters.ts

@@ -1,6 +1,6 @@
-import { Map } from "ol";
+import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 
-import getLayersAsFlatArray from "./getLayersAsFlatArray";
+import type { Map } from "ol";
 
 // This function return URL parameters representing a map.
 const getPermalinkParameters = (

package/src/utils/getStopStatus.test.ts

@@ -75,7 +75,8 @@ describe("getStopStatus", () => {
       expect(isNextStop).toBe(true);
     });
   });
-  describe("when it's the first station", () => {
+
+  describe("when it's the first station and not a stop", () => {
     it("returns a correct status", () => {
       const stopSequence = {
         stations: [{}],

package/src/utils/getStopStatus.ts

@@ -1,4 +1,4 @@
-import { RealtimeStopSequence } from "mobility-toolbox-js/types";
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
 
 export interface StopStatus {
   isBoarding?: boolean;

package/src/utils/getTextForVehicle.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   RealtimeLine,
   RealtimeStopSequence,
   RealtimeTrajectory,

package/src/utils/hooks/useDeparture.tsx

@@ -1,15 +1,16 @@
-import { RealtimeDeparture } from "mobility-toolbox-js/types";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-export type DepartureContextType = {
-  index?: number;
+import type { RealtimeDeparture } from "mobility-toolbox-js/types";
+
+export interface DepartureContextType {
   departure?: RealtimeDeparture;
-};
+  index?: number;
+}
 
 export const DepartureContext = createContext({
-  index: null,
   departure: null,
+  index: null,
 } as DepartureContextType);
 
 const useDeparture = (): DepartureContextType => {

package/src/utils/hooks/useI18n.tsx

@@ -1,12 +1,14 @@
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-export type I18NContextType = {
-  t: (id: string, templateValues?: { [key: string]: string }) => string;
-};
+export interface I18NContextType {
+  t: (id: string, templateValues?: Record<string, string>) => string;
+}
 
 export const I18nContext = createContext({
-  t: (id, templateValues) => `${id} ${JSON.stringify(templateValues)}`,
+  t: (id, templateValues) => {
+    return `${id} ${JSON.stringify(templateValues)}`;
+  },
 } as I18NContextType);
 
 const useI18n = (): I18NContextType => {

package/src/utils/hooks/useInitialLayersVisiblity.tsx

@@ -1,10 +1,11 @@
-import { Map } from "ol";
 import { unByKey } from "ol/Observable";
 import { useEffect } from "preact/hooks";
 
 import applyInitialLayerVisibility from "../applyInitialLayerVisibility";
 import getLayersAsFlatArray from "../getLayersAsFlatArray";
 
+import type { Map } from "ol";
+
 const useInitialLayersVisiblity = (map: Map, layers: string) => {
   // Apply initial visibility of layers from layers attribute
   useEffect(() => {

package/src/utils/hooks/useLayerConfig.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "preact/hooks";
+
+import { RVF_LAYERS_TITLES } from "../constants";
+
+import useMapContext from "./useMapContext";
+
+export interface LayerConfig {
+  link?: {
+    href?: string;
+    show?: boolean;
+    text?: string;
+  };
+  title?: string;
+}
+export type LayersConfig = Record<string, LayerConfig>;
+
+function useLayerConfig(layerName) {
+  const { layersconfig } = useMapContext();
+  const [layersConfig, setLayersConfig] = useState<LayersConfig>({});
+
+  useEffect(() => {
+    try {
+      const config = JSON.parse(layersconfig || "{}");
+      setLayersConfig(config);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error parsing layersconfig:", error);
+    }
+  }, [layersconfig]);
+
+  // Set defaultstyle if not present in layersconfig
+  const layerConfig = layersConfig[layerName] || ({} as LayerConfig);
+  if (!layerConfig.title) {
+    layerConfig.title = RVF_LAYERS_TITLES[layerName];
+  }
+
+  return layerConfig;
+}
+
+export default useLayerConfig;

package/src/utils/hooks/useMapContext.tsx

@@ -1,37 +1,47 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import {
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+import type {
   MaplibreLayer,
   MaplibreStyleLayer,
   RealtimeLayer,
 } from "mobility-toolbox-js/ol";
-import {
-  MocoNotification,
+import type {
   RealtimeStation,
   RealtimeStationId,
   RealtimeStopSequence,
   RealtimeTrainId,
+  SituationType,
 } from "mobility-toolbox-js/types";
-import { Map } from "ol";
-import { createContext } from "preact";
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useContext } from "preact/hooks";
+import type { Feature, Map } from "ol";
 
 import type { MobilityMapProps } from "../../MobilityMap/MobilityMap";
 
 export type MapContextType = {
   baseLayer: MaplibreLayer;
+  isEmbed: boolean;
   isFollowing: boolean;
   isTracking: boolean;
   layers: string;
   map: Map;
-  previewNotification?: MocoNotification;
+  permalinkUrlSearchParams: URLSearchParams;
+  previewNotifications?: SituationType[];
+  queryablelayers: string;
   realtimeLayer: RealtimeLayer;
+  selectedFeature: Feature;
+  selectedFeatures: Feature[];
   setBaseLayer: (baseLayer: MaplibreLayer) => void;
   setIsFollowing: (isFollowing: boolean) => void;
   setIsTracking: (isTracking: boolean) => void;
   setMap: (map?: Map) => void;
-  setPreviewNotification: (previewNotification?: MocoNotification) => void;
+  setPermalinkUrlSearchParams: (
+    permalinkUrlSearchParams: URLSearchParams,
+  ) => void;
+  setPreviewNotifications: (setPreviewNotifications?: SituationType[]) => void;
   setRealtimeLayer: (realtimeLayer?: RealtimeLayer) => void;
+  setSelectedFeature: (feature: Feature) => void;
+  setSelectedFeatures: (features: Feature[]) => void;
   setStation: (station?: RealtimeStation) => void;
   setStationId: (stationId?: RealtimeStationId) => void;
   setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => void;
@@ -45,29 +55,31 @@ export type MapContextType = {
 } & MobilityMapProps;
 
 export const MapContext = createContext<MapContextType>({
-  baseLayer: null,
+  isEmbed: false,
   isFollowing: false,
   isTracking: false,
   layers: null,
   map: null,
-  previewNotification: null,
+  previewNotifications: null,
+  queryablelayers: null,
   realtimeLayer: null,
+  selectedFeatures: [],
   setBaseLayer: (baseLayer?: MaplibreLayer) => {},
   setIsFollowing: (isFollowing: boolean) => {},
   setIsTracking: (isTracking: boolean) => {},
   setMap: (map?: Map) => {},
-  setPreviewNotification: (previewNotification?: MocoNotification) => {},
+  setPermalinkUrlSearchParams: (
+    permalinkUrlSearchParams: URLSearchParams,
+  ) => {},
+  setPreviewNotifications: (previewNotifications?: SituationType[]) => {},
   setRealtimeLayer: (realtimeLayer?: RealtimeLayer) => {},
+  setSelectedFeature: (feature: Feature) => {},
+  setSelectedFeatures: (features: Feature[]) => {},
   setStation: (station?: RealtimeStation) => {},
   setStationId: (stationId?: RealtimeStationId) => {},
   setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => {},
   setStopSequence: (stopSequence?: RealtimeStopSequence) => {},
   setTrainId: (trainId?: RealtimeTrainId) => {},
-  station: null,
-  stationId: null,
-  stationsLayer: null,
-  stopSequence: null,
-  trainId: null,
 } as MapContextType);
 
 const useMapContext = (): MapContextType => {

package/src/utils/hooks/useRouteStop.tsx

@@ -1,8 +1,9 @@
-import { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-import { StopStatus } from "../getStopStatus";
+import type { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
+
+import type { StopStatus } from "../getStopStatus";
 
 export interface RouteStopContextType {
   index?: number;

package/src/utils/hooks/useRvfContext.tsx

@@ -1,12 +1,15 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { Feature } from "ol";
-import { Group } from "ol/layer";
+/* eslint-disable no-console */
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
+import type { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import type { Feature } from "ol";
+import type { Group } from "ol/layer";
+
 export interface RvfContextType {
   isExportMenuOpen: boolean;
   isLayerTreeOpen: boolean;
+  isSearchOpen: boolean;
   isShareMenuOpen: boolean;
   lineNetworkPlanLayer: MaplibreStyleLayer;
   poisLayer: MaplibreStyleLayer;
@@ -15,6 +18,7 @@ export interface RvfContextType {
   sellingPointsLayer: MaplibreStyleLayer;
   setIsExportMenuOpen: (isOpen: boolean) => void;
   setIsLayerTreeOpen: (isOpen: boolean) => void;
+  setIsSearchOpen: (isOpen: boolean) => void;
   setIsShareMenuOpen: (isOpen: boolean) => void;
   setLineNetworkPlanLayer: (layer: MaplibreStyleLayer) => void;
   setPoisLayer: (layer: MaplibreStyleLayer) => void;
@@ -30,6 +34,7 @@ export interface RvfContextType {
 export const RvfContext = createContext<RvfContextType>({
   isExportMenuOpen: false,
   isLayerTreeOpen: false,
+  isSearchOpen: false,
   isShareMenuOpen: false,
   lineNetworkPlanLayer: null,
   poisLayer: null,
@@ -42,6 +47,9 @@ export const RvfContext = createContext<RvfContextType>({
   setIsLayerTreeOpen: () => {
     console.warn("setIsLayerTreeOpen is not implemented");
   },
+  setIsSearchOpen: () => {
+    console.warn("setIsSearchOpen is not implemented");
+  },
   setIsShareMenuOpen: () => {
     console.warn("setIsShareMenuOpen is not implemented");
   },

package/src/utils/hooks/useStation.tsx

@@ -1,7 +1,8 @@
-import { RealtimeStation } from "mobility-toolbox-js/types";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
+import type { RealtimeStation } from "mobility-toolbox-js/types";
+
 export interface StationContextType {
   station?: RealtimeStation;
 }

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -1,18 +1,38 @@
 import debounce from "lodash.debounce";
-import { Map } from "ol";
-import { EventsKey } from "ol/events";
+import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
-import { MutableRef, useEffect } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
 import { LAYER_PROP_IS_EXPORTING } from "../constants";
-import getLayersAsFlatArray from "../getLayersAsFlatArray";
 import getPermalinkParameters from "../getPermalinkParameters";
 import MobilityEvent from "../MobilityEvent";
 
+import type { Map } from "ol";
+import type { EventsKey } from "ol/events";
+import type { MutableRef } from "preact/hooks";
+
+const updatePermalink = (
+  map: Map,
+  eventNodeRef: MutableRef<HTMLDivElement>,
+) => {
+  // No update when exporting
+  if (map.get(LAYER_PROP_IS_EXPORTING)) {
+    return;
+  }
+  const currentUrlParams = new URLSearchParams(window.location.search);
+  const urlParams = getPermalinkParameters(map, currentUrlParams);
+  urlParams.set("permalink", "true");
+  window.history.replaceState(null, null, `?${urlParams.toString()}`);
+  eventNodeRef?.current?.dispatchEvent(
+    new MobilityEvent<string>("mwc:permalink", window.location.href),
+  );
+};
+
+const updatePermalinkDebounced = debounce(updatePermalink, 1000);
+
 /**
  * This hook only update parameters in the url, it does not apply the url parameters.
  */
-
 const useUpdatePermalink = (
   map: Map,
   permalink: boolean,
@@ -53,23 +73,4 @@ const useUpdatePermalink = (
   return null;
 };
 
-const updatePermalink = (
-  map: Map,
-  eventNodeRef: MutableRef<HTMLDivElement>,
-) => {
-  // No update when exporting
-  if (map.get(LAYER_PROP_IS_EXPORTING)) {
-    return;
-  }
-  const currentUrlParams = new URLSearchParams(window.location.search);
-  const urlParams = getPermalinkParameters(map, currentUrlParams);
-  urlParams.set("permalink", "true");
-  window.history.replaceState(null, null, `?${urlParams.toString()}`);
-  eventNodeRef?.current?.dispatchEvent(
-    new MobilityEvent<string>("mwc:permalink", window.location.href),
-  );
-};
-
-const updatePermalinkDebounced = debounce(updatePermalink, 1000);
-
 export default useUpdatePermalink;

package/src/utils/hooks/useZoom.tsx

@@ -24,12 +24,12 @@ const useZoom = () => {
     let zoomListener = view.on("change:resolution", onZoomChange);
 
     const key = map.on("change:view", () => {
-      const view = map.getView();
+      const vieww = map.getView();
       unByKey(zoomListener);
-      if (view) {
-        setZoom(view.getZoom());
+      if (vieww) {
+        setZoom(vieww.getZoom());
       }
-      zoomListener = view.on("change:resolution", onZoomChange);
+      zoomListener = vieww.on("change:resolution", onZoomChange);
     });
 
     return () => {

package/src/utils/realtimeRVFStyle.ts

@@ -1,5 +1,9 @@
 import { createCanvas } from "mobility-toolbox-js/ol";
-import {
+
+// @ts-expect-error - svg loaded as dataurl
+import noRealtime from "../icons/NoRealtime/norealtime.svg";
+
+import type {
   AnyCanvasContext,
   RealtimeStyleFunction,
   RealtimeStyleOptions,
@@ -7,9 +11,6 @@ import {
   StyleCache,
   ViewState,
 } from "mobility-toolbox-js/types";
-
-// @ts-expect-error - svg loaded as dataurl
-import noRealtime from "../icons/NoRealtime/norealtime.svg";
 const cacheNoRealtime: StyleCache = {};
 
 const image = new Image(42, 42); // Using optional size for image

package/src/utils/sharingGraphqlUtils.ts

@@ -1,9 +1,10 @@
-import { FeatureCollection, Point } from "geojson";
 import { gql, GraphQLClient } from "graphql-request";
-import { Extent } from "ol/extent";
 
 import { RVF_EXTENT_4326 } from "./constants";
 
+import type { FeatureCollection, Point } from "geojson";
+import type { Extent } from "ol/extent";
+
 const GQL_URL = "https://api.mobidata-bw.de/sharing/graphql";
 
 export interface SharingStation {

package/src/utils/sharingStylesUtils.ts

@@ -4,7 +4,7 @@ export const getSharingStyleLayers = (
 ) => {
   return [
     {
-      id: sourceId + "_circle",
+      id: `${sourceId}_circle`,
       maxZoom: 16,
       minzoom: 14,
       paint: {
@@ -17,7 +17,7 @@ export const getSharingStyleLayers = (
       type: "circle",
     },
     {
-      id: sourceId + "_image_text",
+      id: `${sourceId}_image_text`,
       layout: {
         "icon-image": image,
         "icon-size": 1,
@@ -51,7 +51,7 @@ export const getSharingStyleLayers = (
     },
     {
       filter: ["==", "is_free_float", false],
-      id: sourceId + "_availability",
+      id: `${sourceId}_availability`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",
@@ -86,7 +86,7 @@ export const getSharingStyleLayers = (
     // freefloat style
     {
       filter: ["==", "is_free_float", true],
-      id: sourceId + "_availability_freefloat",
+      id: `${sourceId}_availability_freefloat`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",
@@ -122,7 +122,7 @@ export const getSharingClusterStyleLayers = (
 ) => {
   return [
     {
-      id: sourceId + "_image_text",
+      id: `${sourceId}_image_text`,
       layout: {
         "icon-allow-overlap": true,
         "icon-ignore-placement": true,
@@ -161,7 +161,7 @@ export const getSharingClusterStyleLayers = (
     // cluster style
     {
       filter: ["has", "point_count"],
-      id: sourceId + "_availability2",
+      id: `${sourceId}_availability2`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",
@@ -191,7 +191,7 @@ export const getSharingClusterStyleLayers = (
     // non cluster style
     {
       filter: ["!", ["has", "point_count"]],
-      id: sourceId + "_availability3",
+      id: `${sourceId}_availability3`,
       layout: {
         "icon-allow-overlap": true,
         "icon-anchor": "center",

package/src/utils/sharingWFSUtils.ts

@@ -1,8 +1,8 @@
-import { Feature, FeatureCollection, Point } from "geojson";
-import { Extent } from "ol/extent";
-
 import { PROVIDER_BY_FEED_ID, RVF_EXTENT_4326 } from "./constants";
 
+import type { Feature, FeatureCollection, Point } from "geojson";
+import type { Extent } from "ol/extent";
+
 // This info are added on each request
 export interface SharingDynamicInfo {
   display_num_vehicles_available: boolean; // added dynamically, used to avoid display this info when printing
@@ -51,18 +51,12 @@ export const getSharingWFSUrl = (
   extent4326: Extent = RVF_EXTENT_4326,
 ) => {
   return (
-    "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
-    wfsTypeName +
-    "/ows" +
-    "?service=WFS&" +
-    "version=1.1.0&request=GetFeature&typename=" +
-    "MobiData-BW:" +
-    wfsTypeName +
-    "&" +
-    "outputFormat=application/json&" +
-    "bbox=" +
-    extent4326.toString() +
-    ",EPSG:4326"
+    `https://api.mobidata-bw.de/geoserver/MobiData-BW/${wfsTypeName}/ows` +
+    `?service=WFS&` +
+    `version=1.1.0&request=GetFeature&typename=` +
+    `MobiData-BW:${wfsTypeName}&` +
+    `outputFormat=application/json&` +
+    `bbox=${extent4326.toString()},EPSG:4326`
   );
 };
 

package/tailwind.config.mjs

@@ -62,6 +62,7 @@ export default {
         ultralightgrey: "#F5F5F5", // ultralight grey
       },
       rounded: {
+        "2xl": "16px",
         xl: "12px",
       },
       width: {

package/tsconfig.json

@@ -6,7 +6,7 @@
     "resolveJsonModule": true,
     "downlevelIteration": true,
     "lib": ["ES2015"],
-  },
+  },  
   "exclude": ["node_modules", "**/*.png"],
   "types": ["esbuild-style-plugin"]
 }