@geops/rvf-mobility-web-component 0.1.127-beta.0 → 0.1.127-beta.2

package/src/MapLayout/MapLayout.tsx

@@ -1,172 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Copyright from "../Copyright";
-import EmbedNavigation from "../EmbedNavigation";
-import ExportMenuButton from "../ExportMenuButton";
-import GeolocationButton from "../GeolocationButton";
-import LayerTreeButton from "../LayerTreeButton";
-import Map from "../Map";
-import Overlay from "../Overlay";
-import OverlayContent from "../OverlayContent";
-import ScaleLine from "../ScaleLine";
-import Search from "../Search";
-import SearchButton from "../SearchButton";
-import ShareMenuButton from "../ShareMenuButton";
-import useMapContext from "../utils/hooks/useMapContext";
-import ZoomButtons from "../ZoomButtons";
-
-import type { HTMLAttributes } from "preact";
-
-const scrollableHandlerProps = {
-  style: { width: "calc(100% - 60px)" },
-};
-
-function MapLayout({
-  className,
-  ...props
-}: { className?: string } & HTMLAttributes<HTMLDivElement>) {
-  const {
-    hasDetails,
-    hasGeolocation,
-    hasLayerTree,
-    hasPrint,
-    hasRealtime,
-    hasSearch,
-    hasShare,
-    hasToolbar,
-    isEmbed,
-    isOverlayOpen,
-    isSearchOpen,
-  } = useMapContext();
-
-  return (
-    <div
-      className={twMerge(
-        "relative flex size-full flex-col @lg/main:flex-row-reverse",
-        className,
-      )}
-      {...props}
-    >
-      <Map className="relative flex-1 overflow-visible">
-        {isEmbed && <EmbedNavigation />}
-
-        <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
-          <ScaleLine className="bg-slate-50/70" />
-          <Copyright className="bg-slate-50/70" />
-        </div>
-
-        <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
-          <ZoomButtons />
-        </div>
-
-        {hasGeolocation && (
-          <div className="absolute top-2 right-2 z-10 flex flex-col gap-2">
-            <GeolocationButton />
-          </div>
-        )}
-
-        {!hasToolbar && hasSearch && (
-          <div
-            className={twMerge(
-              "absolute top-2 right-2 left-2 z-10 max-w-96",
-              isOverlayOpen && "@lg:left-84",
-            )}
-          >
-            <Search />
-          </div>
-        )}
-      </Map>
-
-      <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2">
-        {hasToolbar && (
-          <div
-            className={
-              "pointer-events-none relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm *:pointer-events-auto"
-            }
-          >
-            <div
-              className={twMerge(
-                "border-grey relative z-10 flex h-[48px] gap-[1px] overflow-hidden rounded-2xl border",
-                "*:size-[46px] *:rounded-none *:border-none",
-                "*:first:!rounded-l-2xl",
-                "*:last:!rounded-r-2xl",
-                isSearchOpen
-                  ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
-                  : "",
-              )}
-            >
-              {hasLayerTree && <LayerTreeButton />}
-              {hasPrint && <ExportMenuButton />}
-              {hasShare && <ShareMenuButton />}
-              {hasSearch && <SearchButton />}
-            </div>
-
-            {hasSearch && isSearchOpen && (
-              <div
-                className={twMerge(
-                  "absolute top-14 left-0 z-5 w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-47px)]",
-                  isSearchOpen ? "w-64 opacity-100" : "",
-                )}
-              >
-                <Search
-                  autofocus
-                  className={
-                    "@container @sm/main:gap-4 @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
-                  }
-                />
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Desktop (>= lg) */}
-        {isOverlayOpen && (
-          <div
-            className={twMerge(
-              "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-[320px]",
-            )}
-            style={{ containerType: "normal" }}
-          >
-            <Overlay
-              className={
-                "border-grey @container/overlay pointer-events-auto relative hidden flex-col overflow-hidden rounded-2xl border bg-white text-base shadow-lg @lg:flex"
-              }
-              ScrollableHandlerProps={scrollableHandlerProps}
-            >
-              <OverlayContent
-                hasDetails={hasDetails}
-                hasLayerTree={hasLayerTree}
-                hasPrint={hasPrint}
-                hasRealtime={hasRealtime}
-                hasSearch={false}
-                hasShare={hasShare}
-              />
-            </Overlay>
-          </div>
-        )}
-      </div>
-
-      {/* Mobile (< lg) */}
-      {isOverlayOpen && (
-        <Overlay
-          className={
-            "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
-          }
-          ScrollableHandlerProps={scrollableHandlerProps}
-        >
-          <OverlayContent
-            hasDetails={hasDetails}
-            hasLayerTree={hasLayerTree}
-            hasPrint={hasPrint}
-            hasRealtime={hasRealtime}
-            hasSearch={false}
-            hasShare={hasShare}
-          />
-        </Overlay>
-      )}
-    </div>
-  );
-}
-
-export default memo(MapLayout);

package/src/MapLayout/index.tsx

@@ -1 +0,0 @@
-export { default } from "../RvfMapLayout";

package/src/MapsetLayer/MapsetLayer.tsx

@@ -1,111 +0,0 @@
-import { MapsetLayer as MtbMapsetLayer } from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { LAYER_NAME_MAPSET } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { MapsetLayerOptions } from "mobility-toolbox-js/ol";
-import type { Feature } from "ol";
-import type { EventTypes } from "ol/Observable";
-
-export const isFeatureOutsideZoomLimit = (feature, map) => {
-  const zoom = map?.getView()?.getZoom();
-  const minZoom = feature.get("minZoom");
-  const maxZoom = feature.get("maxZoom");
-  return minZoom > zoom || zoom > maxZoom;
-};
-
-function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
-  const {
-    apikey,
-    baseLayer,
-    map,
-    mapsetplanid,
-    mapsettags,
-    mapsettenants,
-    mapsettimestamp,
-    mapseturl,
-    setMapsetLayer,
-  } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!baseLayer || !map) {
-      return null;
-    }
-
-    return new MtbMapsetLayer({
-      apiKey: apikey,
-      name: LAYER_NAME_MAPSET,
-      planId: mapsetplanid ?? undefined,
-      tags: mapsettags?.split(",").map((t) => {
-        return t.trim();
-      }),
-      tenants: mapsettenants?.split(",").map((t) => {
-        return t.trim();
-      }),
-      timestamp: mapsettimestamp, // Load only standard plan
-      url: mapseturl,
-      ...(props || {}),
-    });
-  }, [
-    baseLayer,
-    map,
-    apikey,
-    mapseturl,
-    mapsetplanid,
-    mapsettags,
-    mapsettenants,
-    mapsettimestamp,
-    props,
-  ]);
-
-  useEffect(() => {
-    setMapsetLayer?.(layer);
-  }, [layer, setMapsetLayer, map]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-    map.addLayer(layer);
-
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  // Apply feature's minzoom and maxzoom to its style
-  // TODO should be done by the mapset layer itself
-  useEffect(() => {
-    let key = null;
-    if (layer) {
-      key = layer.on("updatefeatures" as EventTypes, () => {
-        const features = layer.getSource()?.getFeatures();
-        if (!features?.length) {
-          return;
-        }
-        features.forEach((feature) => {
-          const styleFunction = feature.getStyleFunction();
-          if (styleFunction) {
-            (feature as Feature).setStyle((feat, resolution) => {
-              if (isFeatureOutsideZoomLimit(feat, layer.getMapInternal())) {
-                return null;
-              }
-              return styleFunction(feature, resolution);
-            });
-          }
-        });
-      });
-    }
-
-    return () => {
-      unByKey(key);
-    };
-  }, [layer]);
-
-  return null;
-}
-
-export default memo(MapsetLayer);

package/src/MapsetLayer/index.tsx

@@ -1 +0,0 @@
-export { default } from "./MapsetLayer";

package/src/MobilityMap/MobilityMap.tsx

@@ -1,338 +0,0 @@
-import { memo } from "preact/compat";
-import { useMemo, useRef, useState } from "preact/hooks";
-
-import BaseLayer from "../BaseLayer";
-import FeaturesInfosListener from "../FeaturesInfosListener";
-import I18n from "../I18n";
-import LayoutState from "../LayoutState";
-import LinesNetworkPlanLayer from "../LinesNetworkPlanLayer";
-import LinesNetworkPlanLayerHighlight from "../LinesNetworkPlanLayerHighlight";
-import MapDispatchEvents from "../MapDispatchEvents";
-import MapLayout from "../MapLayout";
-import MapsetLayer from "../MapsetLayer";
-import NotificationsLayer from "../NotificationsLayer";
-import Permalink from "../Permalink";
-import RealtimeLayer from "../RealtimeLayer";
-import SingleClickListener from "../SingleClickListener";
-import StationsLayer from "../StationsLayer";
-import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
-import { MapContext } from "../utils/hooks/useMapContext";
-import WindowMessageListener from "../WindowMessageListener";
-
-import MobilityMapAttributes from "./MobilityMapAttributes";
-
-// @ts-expect-error bad type definition
-import tailwind from "../style.css";
-// @ts-expect-error bad type definition
-import style from "./index.css";
-
-import type { MapsetLayer as MtbMapsetLayer } from "mobility-toolbox-js/ol";
-import type {
-  MaplibreLayer,
-  MaplibreStyleLayer,
-  MocoLayer,
-  RealtimeLayer as MtbRealtimeLayer,
-} from "mobility-toolbox-js/ol";
-import type {
-  LayerGetFeatureInfoResponse,
-  RealtimeStation,
-  RealtimeStationId,
-  RealtimeTrainId,
-  SituationType,
-} from "mobility-toolbox-js/types";
-import type { Feature, Map as OlMap } from "ol";
-
-import type { MobilityMapAttributeName } from "./MobilityMapAttributes";
-
-export type MobilityMapProps = Record<
-  MobilityMapAttributeName,
-  null | string | undefined
->;
-
-function MobilityMap(props: MobilityMapProps) {
-  const eventNodeRef = useRef<HTMLDivElement>();
-  const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
-  const [isFollowing, setIsFollowing] = useState<boolean>(false);
-  const [isTracking, setIsTracking] = useState<boolean>(false);
-  const [isEmbed, setIsEmbed] = useState<boolean>(false);
-  const [hasGeolocation, setHasGeolocation] = useState<boolean>(false);
-  const [hasLnp, setHasLnp] = useState<boolean>(false);
-  const [hasDetails, setHasDetails] = useState<boolean>(false);
-  const [hasMapset, setHasMapset] = useState<boolean>(false);
-  const [hasNotification, setHasNotification] = useState<boolean>(false);
-  const [hasPermalink, setHasPermalink] = useState<boolean>(false);
-  const [hasPrint, setHasPrint] = useState<boolean>(false);
-  const [hasRealtime, setHasRealtime] = useState<boolean>(false);
-  const [hasSearch, setHasSearch] = useState<boolean>(false);
-  const [hasStations, setHasStations] = useState<boolean>(false);
-  const [hasToolbar, setHasToolbar] = useState<boolean>(false);
-  const [hasShare, setHasShare] = useState<boolean>(false);
-  const [hasLayerTree, setHasLayerTree] = useState<boolean>(false);
-  const [isOverlayOpen, setIsOverlayOpen] = useState<boolean>(false);
-  const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
-  const [isShareMenuOpen, setIsShareMenuOpen] = useState<boolean>(false);
-  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
-  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
-  const [stationsLayer, setStationsLayer] = useState<MaplibreStyleLayer>();
-  const [station, setStation] = useState<RealtimeStation>();
-  const [realtimeLayer, setRealtimeLayer] = useState<MtbRealtimeLayer>();
-  const [notificationsLayer, setNotificationsLayer] = useState<MocoLayer>();
-  const [mapsetLayer, setMapsetLayer] = useState<MtbMapsetLayer>();
-  const [linesNetworkPlanLayer, setLinesNetworkPlanLayer] =
-    useState<MaplibreStyleLayer>();
-  const [map, setMap] = useState<OlMap>();
-  const [stationId, setStationId] = useState<RealtimeStationId | string>();
-  const [trainId, setTrainId] = useState<RealtimeTrainId>();
-  const [linesIds, setLinesIds] = useState<string[]>();
-  const [notificationId, setNotificationId] = useState<string>();
-  const [notificationSupportedLanguages, setNotificationSupportedLanguages] =
-    useState<string[]>();
-
-  const [featuresInfos, setFeaturesInfos] = useState<
-    LayerGetFeatureInfoResponse[]
-  >([]);
-  const [featuresInfosHovered, setFeaturesInfosHovered] = useState<
-    LayerGetFeatureInfoResponse[]
-  >([]);
-  const [selectedFeature, setSelectedFeature] = useState<Feature>(null);
-  const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>([]);
-  const [permalinkUrlSearchParams, setPermalinkUrlSearchParams] =
-    useState<URLSearchParams>();
-
-  const [previewNotifications, setPreviewNotifications] =
-    useState<SituationType[]>();
-
-  const { lang, layers, permalinktemplate } = props;
-
-  // Apply initial visibility of layers
-  useInitialLayersVisiblity(map, layers, permalinktemplate);
-
-  // Object representing all the web-component attributes and the map context values.
-  const mapContextValue = useMemo(() => {
-    return {
-      // MobilityMapProps
-      ...props,
-      baseLayer,
-      featuresInfos,
-      featuresInfosHovered,
-      hasDetails,
-      hasGeolocation,
-      hasLayerTree,
-      hasLnp,
-      hasMapset,
-      hasNotification,
-      hasPermalink,
-      hasPrint,
-      hasRealtime,
-      hasSearch,
-      hasShare,
-      hasStations,
-      hasToolbar,
-      isEmbed,
-      isExportMenuOpen,
-      isFollowing,
-      isLayerTreeOpen,
-      isOverlayOpen,
-      isSearchOpen,
-      isShareMenuOpen,
-      isTracking,
-      linesIds,
-      linesNetworkPlanLayer,
-      map,
-      mapsetLayer,
-      notificationId,
-      notificationsLayer,
-      // MapContextProps
-      notificationSupportedLanguages,
-      permalinkUrlSearchParams,
-      previewNotifications,
-      realtimeLayer,
-      selectedFeature,
-      selectedFeatures,
-      setBaseLayer,
-      setFeaturesInfos,
-      setFeaturesInfosHovered,
-      setHasDetails,
-      setHasGeolocation,
-      setHasLayerTree,
-      setHasLnp,
-      setHasMapset,
-      setHasNotification,
-      setHasPermalink,
-      setHasPrint,
-      setHasRealtime,
-      setHasSearch,
-      setHasShare,
-      setHasStations,
-      setHasToolbar,
-      setIsEmbed,
-      setIsExportMenuOpen,
-      setIsFollowing,
-      setIsLayerTreeOpen,
-      setIsOverlayOpen,
-      setIsSearchOpen,
-      setIsShareMenuOpen,
-      setIsTracking,
-      setLinesIds,
-      setLinesNetworkPlanLayer,
-      setMap,
-      setMapsetLayer,
-      setNotificationId,
-      setNotificationsLayer,
-      setNotificationSupportedLanguages,
-      setPermalinkUrlSearchParams,
-      setPreviewNotifications,
-      setRealtimeLayer,
-      setSelectedFeature,
-      setSelectedFeatures,
-      setStation,
-      setStationId,
-      setStationsLayer,
-      setTrainId,
-      station,
-      stationId,
-      stationsLayer,
-      trainId,
-    };
-  }, [
-    props,
-    baseLayer,
-    featuresInfos,
-    featuresInfosHovered,
-    hasDetails,
-    hasGeolocation,
-    hasLayerTree,
-    hasLnp,
-    hasMapset,
-    hasNotification,
-    hasPermalink,
-    hasPrint,
-    hasRealtime,
-    hasSearch,
-    hasShare,
-    hasStations,
-    hasToolbar,
-    isEmbed,
-    isExportMenuOpen,
-    isFollowing,
-    isLayerTreeOpen,
-    isOverlayOpen,
-    isSearchOpen,
-    isShareMenuOpen,
-    isTracking,
-    linesIds,
-    linesNetworkPlanLayer,
-    map,
-    mapsetLayer,
-    notificationId,
-    notificationSupportedLanguages,
-    notificationsLayer,
-    permalinkUrlSearchParams,
-    previewNotifications,
-    realtimeLayer,
-    selectedFeature,
-    selectedFeatures,
-    station,
-    stationId,
-    stationsLayer,
-    trainId,
-  ]);
-
-  return (
-    <I18n locale={lang}>
-      {/* There is a bug in tailwindcss@4 , variables are not imported in the shadow dom
-      see  https://github.com/tailwindlabs/tailwindcss/issues/15005*/}
-      <style>
-        {`:host {
-            --tw-divide-y-reverse: 0;
-            --tw-border-style: solid;
-            --tw-font-weight: initial;
-            --tw-tracking: initial;
-            --tw-translate-x: 0;
-            --tw-translate-y: 0;
-            --tw-translate-z: 0;
-            --tw-rotate-x: rotateX(0);
-            --tw-rotate-y: rotateY(0);
-            --tw-rotate-z: rotateZ(0);
-            --tw-skew-x: skewX(0);
-            --tw-skew-y: skewY(0);
-            --tw-space-x-reverse: 0;
-            --tw-gradient-position: initial;
-            --tw-gradient-from: #0000;
-            --tw-gradient-via: #0000;
-            --tw-gradient-to: #0000;
-            --tw-gradient-stops: initial;
-            --tw-gradient-via-stops: initial;
-            --tw-gradient-from-position: 0%;
-            --tw-gradient-via-position: 50%;
-            --tw-gradient-to-position: 100%;
-            --tw-shadow: 0 0 #0000;
-            --tw-shadow-color: initial;
-            --tw-inset-shadow: 0 0 #0000;
-            --tw-inset-shadow-color: initial;
-            --tw-ring-color: initial;
-            --tw-ring-shadow: 0 0 #0000;
-            --tw-inset-ring-color: initial;
-            --tw-inset-ring-shadow: 0 0 #0000;
-            --tw-ring-inset: initial;
-            --tw-ring-offset-width: 0px;
-            --tw-ring-offset-color: #fff;
-            --tw-ring-offset-shadow: 0 0 #0000;
-            --tw-blur: initial;
-            --tw-brightness: initial;
-            --tw-contrast: initial;
-            --tw-grayscale: initial;
-            --tw-hue-rotate: initial;
-            --tw-invert: initial;
-            --tw-opacity: initial;
-            --tw-saturate: initial;
-            --tw-sepia: initial;
-            --tw-drop-shadow: initial;
-            --tw-duration: initial;
-            --tw-ease: initial;
-        }`}
-      </style>
-      <style>{tailwind}</style>
-      <style>{style}</style>
-      <MapContext.Provider value={mapContextValue}>
-        <LayoutState />
-        <Permalink replaceState={hasPermalink} />
-        <MapDispatchEvents node={eventNodeRef.current} wcAttributes={props} />
-        <WindowMessageListener eventNode={eventNodeRef.current} />
-        <SingleClickListener />
-        <FeaturesInfosListener />
-
-        {/* Layers */}
-        <BaseLayer />
-        {hasNotification && <NotificationsLayer />}
-        {hasRealtime && <RealtimeLayer />}
-        {hasStations && <StationsLayer />}
-        {hasLnp && <LinesNetworkPlanLayer />}
-        {hasLnp && <LinesNetworkPlanLayerHighlight />}
-        {hasMapset && <MapsetLayer />}
-
-        {/* Layout  */}
-        <div
-          className="@container/main relative size-full border font-sans"
-          ref={eventNodeRef}
-        >
-          <MapLayout />
-        </div>
-      </MapContext.Provider>
-    </I18n>
-  );
-}
-
-const MemoMobilityMap = memo(MobilityMap);
-
-// We creates a wrapper to inject the default props values from MobilityMapAttributes.
-const defaultProps: Partial<MobilityMapProps> = {};
-Object.entries(MobilityMapAttributes).forEach(([key]) => {
-  defaultProps[key] = MobilityMapAttributes[key].defaultValue || null;
-});
-
-function MobilityMapWithDefaultProps(props: MobilityMapProps) {
-  return <MemoMobilityMap {...defaultProps} {...props} />;
-}
-
-export default memo(MobilityMapWithDefaultProps);

package/src/MobilityMap/MobilityMapAttributes.test.ts

@@ -1,59 +0,0 @@
-import attributes from "./MobilityMapAttributes";
-
-describe("MobilityMapAttributes", () => {
-  Object.entries(attributes).forEach(([key, value]) => {
-    test(`${key} has a description`, () => {
-      expect(value.description).toBeDefined();
-    });
-
-    if (value.type === "boolean") {
-      test(`${key} has a defaultValue for boolean`, () => {
-        expect(value.defaultValue).toMatch(/^(true|false)$/);
-      });
-    }
-
-    if (value.defaultValue === "true" || value.defaultValue === "false") {
-      test(`${key} is boolean when defaultValue is true or false`, () => {
-        expect(value.type).toBe("boolean");
-      });
-    }
-  });
-
-  describe("default values are set correctly", () => {
-    test("apiKey attribute is properly set", () => {
-      expect(attributes.apikey.defaultValue).toBe(
-        "5cc87b12d7c5370001c1d655cb6b0a94dc1a4b859313dc211675efd6",
-      );
-    });
-
-    test("baselayer attribute is properly set", () => {
-      expect(attributes.baselayer.defaultValue).toBe("de.rvf_moco");
-    });
-
-    test("lang attribute is properly set", () => {
-      expect(attributes.lang.defaultValue).toBe("de");
-    });
-
-    test("notificationtenant attribute is properly set", () => {
-      expect(attributes.notificationtenant.defaultValue).toBe("rvf");
-    });
-
-    test("maxextent attribute is properly set", () => {
-      expect(attributes.maxextent.defaultValue).toBe(
-        "834896.1809495519,6057089.852937808,940649.6972031617,6173660.451962929",
-      );
-    });
-
-    test("permalinktemplate attribute is properly set", () => {
-      expect(attributes.permalinktemplate.defaultValue).toBe(
-        "#map/{{x}}/{{y}}/{{z}}",
-      );
-    });
-
-    test("realtimebboxparameters attribute is properly set", () => {
-      expect(attributes.realtimebboxparameters.defaultValue).toBe(
-        "line_tags=RVF",
-      );
-    });
-  });
-});