@geops/rvf-mobility-web-component 0.1.127 → 0.1.129

package/src/StationServices/StationServices.tsx

@@ -1,80 +0,0 @@
-import { memo } from "preact/compat";
-
-import Airport from "../icons/Airport";
-import BarAndRestaurants from "../icons/BarAndRestaurants";
-import Bathroom from "../icons/Bathroom";
-import BikeStorage from "../icons/BikeStorage";
-import Elevator from "../icons/Elevator";
-import Police from "../icons/Police";
-import WaitingAreas from "../icons/WaitingAreas";
-import WheelChair from "../icons/WheelChair";
-
-import type { RealtimeStation } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type StationServicesProps = {
-  accessibility?: boolean;
-  airport?: boolean;
-  barAndRestaurants?: boolean;
-  bathroom?: boolean;
-  bikeStorage?: boolean;
-  elevator?: boolean;
-  iconProps?: JSX.HTMLAttributes<SVGElement> & PreactDOMAttributes;
-  police?: boolean;
-  station: RealtimeStation;
-  waitingAreas?: boolean;
-} & JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function StationServices({
-  accessibility = false,
-  airport = false,
-  barAndRestaurants = false,
-  bathroom = false,
-  bikeStorage = false,
-  elevator = false,
-  iconProps = {},
-  police = false,
-  station,
-  waitingAreas = false,
-  ...props
-}: StationServicesProps) {
-  if (!station) {
-    return null;
-  }
-
-  const {
-    hasAccessibility,
-    hasAirport,
-    // @ts-expect-error bad type definition
-    hasBarAndRestaurants,
-    // @ts-expect-error bad type definition
-    hasBathroom,
-    // @ts-expect-error bad type definition
-    hasBikeStorage,
-    hasElevator,
-    // @ts-expect-error bad type definition
-    hasPolice,
-    // @ts-expect-error bad type definition
-    hasWaitingAreas,
-    // hasZOB,
-    // isRailReplacement,
-  } = station.properties;
-
-  return (
-    <div {...props}>
-      {accessibility && hasAccessibility && <WheelChair {...iconProps} />}
-      {airport && hasAirport && <Airport {...iconProps} />}
-      {barAndRestaurants && hasBarAndRestaurants && (
-        <BarAndRestaurants {...iconProps} />
-      )}
-      {bathroom && hasBathroom && <Bathroom {...iconProps} />}
-      {bikeStorage && hasBikeStorage && <BikeStorage {...iconProps} />}
-      {elevator && hasElevator && <Elevator {...iconProps} />}
-      {police && hasPolice && <Police {...iconProps} />}
-      {waitingAreas && hasWaitingAreas && <WaitingAreas {...iconProps} />}
-    </div>
-  );
-}
-
-export default memo(StationServices);

package/src/StationServices/index.tsx

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

package/src/StationsLayer/StationsLayer.tsx

@@ -1,53 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { LAYER_NAME_STATIONS } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol";
-
-function StationsLayer(props: Partial<MaplibreStyleLayerOptions>) {
-  const { baseLayer, map, setStationsLayer } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return (
-          metadata?.["tralis.variable"] === "station" ||
-          metadata?.["general.filter"] === "stations" ||
-          metadata?.["geops.filter"] === "netzplan_stops"
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYER_NAME_STATIONS,
-      // queryRenderedLayersFilter: ({ metadata }) => {
-      //   return (
-      //     metadata?.["tralis.variable"] === "station" ||
-      //     metadata?.["general.filter"] === "stations" ||
-      //     metadata?.["geops.filter"] === "netzplan_stops" // we include lnp stations only on click
-      //   );
-      // },
-      ...(props || {}),
-    });
-  }, [baseLayer, props]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-    map.addLayer(layer);
-    setStationsLayer(layer);
-
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, setStationsLayer, layer]);
-
-  return null; // <RegisterForSelectFeaturesOnClick />;
-}
-
-export default memo(StationsLayer);

package/src/StationsLayer/index.tsx

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

package/src/StopsSearch/StopsSearch.tsx

@@ -1,344 +0,0 @@
-import debounce from "lodash.debounce";
-import { StopsAPI } from "mobility-toolbox-js/api";
-import { memo } from "preact/compat";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import Cancel from "../icons/Cancel";
-import Search from "../icons/Search";
-import IconButton from "../ui/IconButton";
-import Input from "../ui/Input";
-import useI18n from "../utils/hooks/useI18n";
-import MobilityEvent from "../utils/MobilityEvent";
-
-import type { StopsParameters, StopsResponse } from "mobility-toolbox-js/types";
-import type {
-  HTMLAttributes,
-  PreactDOMAttributes,
-  TargetedKeyboardEvent,
-} from "preact";
-
-import type { StopsFeature } from "../utils/hooks/useSearchStops";
-
-export type StopsSearchProps = {
-  apikey: string;
-  bbox?: string;
-  cancelButtonClassName?: string;
-  className?: string;
-  countrycode?: string;
-  event?: string;
-  field?: string;
-  inputClassName?: string;
-  inputContainerClassName?: string;
-  lang?: string;
-  limit?: number;
-  mots?: string;
-  onselect?: (arg: StopsFeature) => void;
-  params?: string; // JSONstring
-  prefagencies?: string;
-  reflocation?: string;
-  resultClassName?: string;
-  resultsClassName?: string;
-  resultsContainerClassName?: string;
-  searchIconContainerClassName?: string;
-  url: string;
-  withResultsClassName?: string;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-const getQueryForSelectedStation = (selectedStation?: StopsFeature): string => {
-  return selectedStation?.properties?.name || "";
-};
-
-/**
- * Input field to search for stations
- *
- * @fires stationselect
- */
-function StopsSearch({
-  apikey,
-  bbox,
-  cancelButtonClassName,
-  className,
-  countrycode,
-  event,
-  field,
-  inputClassName,
-  inputContainerClassName,
-  lang,
-  limit,
-  mots,
-  onselect,
-  params,
-  prefagencies,
-  reflocation,
-  resultClassName,
-  resultsClassName,
-  resultsContainerClassName,
-  searchIconContainerClassName,
-  url = "https://api.geops.io/stops/v1/",
-  withResultsClassName,
-}: StopsSearchProps) {
-  const { t } = useI18n();
-  const [query, setQuery] = useState("");
-  const [selectedStation, setSelectedStation] = useState<StopsFeature>();
-  const [results, setResults] = useState<StopsFeature[] | undefined>();
-  const myRef = useRef<HTMLDivElement>();
-
-  useEffect(() => {
-    myRef.current?.dispatchEvent(
-      new MobilityEvent<StopsSearchProps>("mwc:attribute", {
-        apikey,
-        bbox,
-        countrycode,
-        event,
-        field,
-        lang,
-        limit,
-        mots,
-        onselect,
-        params,
-        prefagencies,
-        reflocation,
-        url,
-      }),
-    );
-  }, [
-    apikey,
-    bbox,
-    countrycode,
-    event,
-    field,
-    limit,
-    mots,
-    onselect,
-    params,
-    prefagencies,
-    reflocation,
-    url,
-    lang,
-  ]);
-
-  const api: StopsAPI = useMemo(() => {
-    return new StopsAPI({ apiKey: apikey, url: url });
-  }, [apikey, url]);
-
-  const dispatchEvent = useCallback(
-    (station?: StopsFeature) => {
-      const customEvt = new MobilityEvent<StopsFeature>(
-        event || "mwc:stopssearchselect",
-        station,
-        {
-          bubbles: true,
-        },
-      );
-
-      myRef.current?.dispatchEvent(customEvt);
-
-      if (onselect && typeof onselect === "function") {
-        onselect(station);
-      }
-    },
-    [event, onselect],
-  );
-
-  const debouncedSearch = useMemo(() => {
-    let abortCtrl: AbortController | undefined;
-
-    return debounce((q) => {
-      abortCtrl?.abort();
-      abortCtrl = new AbortController();
-
-      const reqParams = {
-        bbox,
-        field,
-        limit,
-        mots,
-        prefagencies,
-        q,
-        ref_location: reflocation,
-        ...JSON.parse(params || "{}"),
-      } as StopsParameters;
-
-      api
-        .search(reqParams, { signal: abortCtrl.signal })
-        .then((res: StopsResponse) => {
-          setResults(
-            res.features.filter((f) => {
-              return !countrycode || f.properties?.country_code === countrycode;
-            }),
-          );
-        })
-        .catch((e) => {
-          // AbortError is expected
-          if (e.code !== 20) {
-            // eslint-disable-next-line no-console
-            console.error("Failed to fetch stations", e);
-            return;
-          }
-        });
-    }, 150);
-  }, [
-    api,
-    bbox,
-    countrycode,
-    field,
-    limit,
-    mots,
-    params,
-    prefagencies,
-    reflocation,
-  ]);
-
-  useEffect(() => {
-    if (
-      selectedStation &&
-      query === getQueryForSelectedStation(selectedStation)
-    ) {
-      return;
-    }
-    if (!query) {
-      setSelectedStation(undefined);
-      return;
-    }
-    debouncedSearch(query);
-    return () => {
-      debouncedSearch.cancel();
-    };
-  }, [query, selectedStation, debouncedSearch]);
-
-  useEffect(() => {
-    setResults(undefined);
-    if (selectedStation) {
-      setQuery(getQueryForSelectedStation(selectedStation));
-    }
-
-    dispatchEvent(selectedStation);
-  }, [dispatchEvent, selectedStation]);
-
-  return (
-    <>
-      <div
-        className={twMerge(
-          "flex h-16 items-center gap-4 rounded-md bg-white p-4 pt-3.5 shadow",
-          className,
-          results ? withResultsClassName : "",
-        )}
-        ref={myRef}
-      >
-        <div
-          className={twMerge(
-            "text-grey flex items-center",
-            searchIconContainerClassName,
-          )}
-        >
-          <Search />
-        </div>
-        <div
-          className={twMerge(
-            "@container/inputsearch flex grow items-center border-b-2 border-solid",
-            inputContainerClassName,
-          )}
-        >
-          <Input
-            autoComplete="off"
-            className={twMerge(
-              "h-8 w-1 grow overflow-hidden text-ellipsis placeholder:text-zinc-400",
-              inputClassName,
-            )}
-            onChange={(evt) => {
-              // @ts-expect-error target is missing
-              setQuery(evt.target.value);
-            }}
-            onKeyUp={(evt: TargetedKeyboardEvent<HTMLInputElement>) => {
-              if (evt.key === "Enter") {
-                if (results?.length > 0) {
-                  setSelectedStation(results[0]);
-                }
-              }
-            }}
-            placeholder={t("stops_search_placeholder")}
-            type="text"
-            value={query || ""}
-          />
-          {query.length > 0 && (
-            <IconButton
-              className={twMerge(
-                "flex !size-[32px] items-center rounded-none border-none bg-transparent shadow-none",
-                cancelButtonClassName,
-              )}
-              onClick={() => {
-                setQuery("");
-                setResults(undefined);
-              }}
-            >
-              <Cancel />
-            </IconButton>
-          )}
-        </div>
-      </div>
-
-      {results && (
-        <div
-          className={twMerge(
-            "flex grow overflow-auto rounded-md rounded-t-none bg-white shadow",
-            resultsContainerClassName,
-          )}
-        >
-          {!results?.length && (
-            <div
-              className={twMerge(
-                "flex grow gap-3 border border-solid p-3 pt-2 text-zinc-400",
-                resultsClassName,
-              )}
-              style={{ border: 1 }}
-            >
-              <div className="size-6"></div>
-              <div>{t("no_stops_found")}</div>
-            </div>
-          )}
-          {!!results?.length && (
-            <ul
-              className={twMerge(
-                "grow rounded-md rounded-t-none border border-solid bg-white p-0",
-                resultsClassName,
-              )}
-              style={{ border: 1 }} // without this th ul is displayed 1 px on the right
-            >
-              {results?.map((station) => {
-                return (
-                  <li
-                    className={twMerge(
-                      "border-b border-dashed border-slate-300 p-3 last:border-0",
-                      resultClassName,
-                    )}
-                    key={station.properties.uid}
-                  >
-                    <button
-                      className="flex w-full items-center gap-3 text-left"
-                      onClick={() => {
-                        console.log("StopsSearch selected station", station);
-                        setSelectedStation(station);
-                      }}
-                    >
-                      <div className="size-6"></div>
-                      <div className="grow">{station.properties.name}</div>
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-        </div>
-      )}
-    </>
-  );
-}
-
-export default memo(StopsSearch);

package/src/StopsSearch/index.tsx

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

package/src/WindowMessageListener/WindowMessageListener.tsx

@@ -1,74 +0,0 @@
-import { memo } from "preact/compat";
-import { useEffect } from "preact/hooks";
-
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type MobilityEvent from "../utils/MobilityEvent";
-
-const evtTypes = [
-  "mwc:permalink",
-  "mwc:selectedfeature",
-  "mwc:singleclick",
-  "mwc:attribute",
-];
-
-/**
- * This component propagate the web-components events to the parent window using messages events,
- * and listen for messages from the parent window.
- * @param param0
- * @returns
- */
-function WindowMessageListener({ eventNode }: { eventNode: HTMLElement }) {
-  const { setPreviewNotifications } = useMapContext();
-
-  // Listen to parent window message events
-  useEffect(() => {
-    const onMessage = (event) => {
-      if (event.data.situations) {
-        setPreviewNotifications(event.data.situations);
-      }
-    };
-    window.addEventListener("message", onMessage);
-    return () => {
-      window.removeEventListener("message", onMessage);
-    };
-  }, [setPreviewNotifications]);
-
-  // Propagate wc events to the parent window
-  useEffect(() => {
-    if (!eventNode) {
-      return;
-    }
-
-    const postMessage = (evt: MobilityEvent<unknown>) => {
-      // Clean data before sending it to the parent
-      if (evt.type === "mwc:attribute") {
-        // @ts-expect-error children is the react property
-        delete evt.data.children;
-      }
-      if (evt.type === "mwc:selectedfeature") {
-        // @ts-expect-error children is the react property
-        if (evt.data?.properties?.olGeometry) {
-          // @ts-expect-error children is the react property
-          delete evt.data.properties.olGeometry;
-        }
-      }
-      window.parent?.postMessage({ data: evt.data, type: evt.type }, "*");
-    };
-    evtTypes.forEach((eventType) => {
-      eventNode.addEventListener(eventType, postMessage);
-    });
-
-    // warn the parent that the web component is listening
-    window.parent?.postMessage({ data: true, type: "mwc:messageready" }, "*");
-
-    return () => {
-      evtTypes.forEach((eventType) => {
-        eventNode.removeEventListener(eventType, postMessage);
-      });
-    };
-  }, [eventNode]);
-
-  return null;
-}
-export default memo(WindowMessageListener);

package/src/WindowMessageListener/index.tsx

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

package/src/ZoomButtons/ZoomButtons.tsx

@@ -1,80 +0,0 @@
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useCallback, useEffect, useState } from "preact/hooks";
-
-import Minus from "../icons/Minus";
-import Plus from "../icons/Plus";
-import IconButton from "../ui/IconButton";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-function ZoomButtons() {
-  const { map } = useMapContext();
-  const [isZoomInDisabled, setIsZoomInDisabled] = useState(false);
-  const [isZoomOutDisabled, setIsZoomOutDisabled] = useState(false);
-  const { t } = useI18n();
-
-  const handleZoomIn = useCallback(() => {
-    if (!map?.getView()) {
-      return;
-    }
-    const view = map.getView();
-    const zoom = view.getZoom();
-    view.setZoom(zoom + 1);
-  }, [map]);
-
-  const handleZoomOut = useCallback(() => {
-    if (!map?.getView()) {
-      return;
-    }
-    const view = map.getView();
-    const zoom = view.getZoom();
-    view.setZoom(zoom - 1);
-  }, [map]);
-
-  useEffect(() => {
-    const key = map?.on("moveend", () => {
-      const view = map.getView();
-      const zoom = view.getZoom();
-      const maxzoom = view.getMaxZoom();
-      const minzoom = view.getMinZoom();
-
-      if (maxzoom && zoom === Number(maxzoom)) {
-        setIsZoomInDisabled(true);
-      } else {
-        setIsZoomInDisabled(false);
-      }
-
-      if (minzoom && zoom === Number(minzoom)) {
-        setIsZoomOutDisabled(true);
-      } else {
-        setIsZoomOutDisabled(false);
-      }
-    });
-    return () => {
-      unByKey(key);
-    };
-  }, [map]);
-
-  return (
-    <>
-      <IconButton
-        disabled={isZoomInDisabled}
-        onClick={handleZoomIn}
-        title={t("zoomin")}
-      >
-        <Plus />
-      </IconButton>
-
-      <IconButton
-        disabled={isZoomOutDisabled}
-        onClick={handleZoomOut}
-        title={t("zoomout")}
-      >
-        <Minus />
-      </IconButton>
-    </>
-  );
-}
-
-export default memo(ZoomButtons);

package/src/ZoomButtons/index.tsx

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

package/src/icons/Airport/Airport.tsx

@@ -1,17 +0,0 @@
-function Airport({ ...props }) {
-  return (
-    <svg
-      fill="currentColor"
-      height="24"
-      version="1.1"
-      viewBox="0 0 14 14"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="m 14,8 0,1 -6,-1 0,3 2,2 0,1 L 7,13 4,14 4,13 6,11 6,8 0,9 0,8 6,5 6,2 C 6,1 6.22222,0 7,0 7.77777,0 8,1 8,2 l 0,3 z" />
-    </svg>
-  );
-}
-
-export default Airport;

package/src/icons/Airport/airport-14-svgrepo-com.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M14 8v1L8 8v3l2 2v1l-3-1-3 1v-1l2-2V8L0 9V8l6-3V2c0-1 .222-2 1-2s1 1 1 2v3z" style="fill:#000;fill-opacity:1;stroke:none"/></svg>

package/src/icons/Airport/index.tsx

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

package/src/icons/ArrowDown/ArrowDown.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from "preact/compat";
-
-function ArrowDown(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      fill="currentColor"
-      height="24px"
-      version="1.1"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M15.7389427,5.27697525 C16.129467,5.66749954 16.129467,6.30066452 15.7389427,6.69118881 L10.414,12.015082 L15.7389427,17.3406471 C16.0994267,17.7011311 16.1271562,18.2683621 15.8221313,18.6606533 L15.7389427,18.7548607 C15.3484184,19.145385 14.7152534,19.145385 14.3247292,18.7548607 L8.29289322,12.7230247 C7.90236893,12.3325005 7.90236893,11.6993355 8.29289322,11.3088112 L14.3247292,5.27697525 C14.7152534,4.88645096 15.3484184,4.88645096 15.7389427,5.27697525 Z"
-        transform="translate(12.0159, 12.0159) rotate(270) translate(-12.0159, -12.0159)"
-      ></path>
-    </svg>
-  );
-}
-
-export default ArrowDown;

package/src/icons/ArrowDown/down-open.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>iconfont/down-open</title><path d="M5.277 8.293a1 1 0 0 1 1.414 0l5.324 5.325 5.326-5.325a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414l-6.032 6.032a1 1 0 0 1-1.414 0L5.277 9.707a1 1 0 0 1 0-1.414"/></svg>