@geops/rvf-mobility-web-component 0.1.45 → 0.1.47-beta.0

package/src/StopsSearch/StopsSearch.tsx

@@ -1,7 +1,5 @@
 import debounce from "lodash.debounce";
 import { StopsAPI } from "mobility-toolbox-js/api";
-import { StopsResponse } from "mobility-toolbox-js/types";
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 import {
   useCallback,
@@ -10,34 +8,42 @@ import {
   useRef,
   useState,
 } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
 import Cancel from "../icons/Cancel";
 import Search from "../icons/Search";
-// @ts-expect-error tailwind must be added for the search web component
-import tailwind from "../style.css";
-import i18n from "../utils/i18n";
+import useI18n from "../utils/hooks/useI18n";
 import MobilityEvent from "../utils/MobilityEvent";
 
-export type MobilityStopsSearchProps = {
+import type { StopsParameters, StopsResponse } from "mobility-toolbox-js/types";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type StopsFeature = StopsResponse["features"];
+
+export type StopsSearchProps = {
   apikey: string;
   bbox?: string;
+  className?: string;
   countrycode?: string;
   event?: string;
   field?: string;
+  inputClassName?: string;
   limit?: number;
   mots?: string;
-  onselect?: (arg: StationFeature) => void;
+  onselect?: (arg: StopsFeature) => void;
   params?: string; // JSONstring
   prefagencies?: string;
   reflocation?: string;
+  resultClassName?: string;
+  resultsClassName?: string;
+  resultsContainerClassName?: string;
   url: string;
-} & JSX.HTMLAttributes<HTMLDivElement> &
+  withResultsClassName?: string;
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-export type StationFeature = StopsResponse["features"][0];
-
-const getQueryForSelectedStation = (selectedStation: StationFeature) => {
-  return selectedStation.properties.name;
+const getQueryForSelectedStation = (selectedStation?: StopsFeature): string => {
+  return selectedStation?.properties?.name || "";
 };
 
 /**
@@ -48,26 +54,32 @@ const getQueryForSelectedStation = (selectedStation: StationFeature) => {
 function StopsSearch({
   apikey,
   bbox,
+  className,
   countrycode,
   event,
   field,
+  inputClassName,
   limit,
   mots,
   onselect,
   params,
   prefagencies,
   reflocation,
+  resultClassName,
+  resultsClassName,
+  resultsContainerClassName,
   url = "https://api.geops.io/stops/v1/",
-}: MobilityStopsSearchProps) {
-  const { t } = i18n;
+  withResultsClassName,
+}: StopsSearchProps) {
+  const { t } = useI18n();
   const [query, setQuery] = useState("");
-  const [selectedStation, setSelectedStation] = useState<StationFeature>();
-  const [results, setResults] = useState<StopsResponse["features"]>(undefined);
+  const [selectedStation, setSelectedStation] = useState<StopsFeature>();
+  const [results, setResults] = useState<StopsFeature[] | undefined>();
   const myRef = useRef<HTMLDivElement>();
 
   useEffect(() => {
     myRef.current?.dispatchEvent(
-      new MobilityEvent<MobilityStopsSearchProps>("mwc:attribute", {
+      new MobilityEvent<StopsSearchProps>("mwc:attribute", {
         apikey,
         bbox,
         countrycode,
@@ -102,8 +114,8 @@ function StopsSearch({
   }, [apikey, url]);
 
   const dispatchEvent = useCallback(
-    (station?: StationFeature) => {
-      const customEvt = new MobilityEvent<StationFeature>(
+    (station?: StopsFeature) => {
+      const customEvt = new MobilityEvent<StopsFeature>(
         event || "mwc:stopssearchselect",
         station,
         {
@@ -121,24 +133,25 @@ function StopsSearch({
   );
 
   const debouncedSearch = useMemo(() => {
-    let abortCtrl: AbortController;
-    return debounce(async (q) => {
+    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(
-          {
-            bbox,
-            field,
-            limit,
-            mots,
-            prefagencies,
-            q,
-            ref_location: reflocation,
-            ...JSON.parse(params || "{}"),
-          },
-          { signal: abortCtrl.signal },
-        )
+        .search(reqParams, { signal: abortCtrl.signal })
         .then((res: StopsResponse) => {
           setResults(
             res.features.filter((f) => {
@@ -149,6 +162,7 @@ function StopsSearch({
         .catch((e) => {
           // AbortError is expected
           if (e.code !== 20) {
+            // eslint-disable-next-line no-console
             console.error("Failed to fetch stations", e);
             return;
           }
@@ -195,28 +209,31 @@ function StopsSearch({
 
   return (
     <>
-      <style>{tailwind}</style>
-      {/* <div className="relative z-0 rounded-md bg-white" > */}
       <div
-        className={
-          "flex h-16 items-center gap-4 rounded-md bg-white p-4 pt-3.5 shadow"
-        }
+        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={"flex items-center text-grey"}>
+        <div className={"text-grey flex items-center"}>
           <Search className="size-4" />
         </div>
         <div className={"flex grow overflow-hidden border-b-2 border-solid"}>
           <input
             autoComplete="off"
-            className="h-8 flex-1 outline-0  placeholder:text-zinc-400"
+            className={twMerge(
+              "h-8 flex-1 outline-0 placeholder:text-zinc-400",
+              inputClassName,
+            )}
             id="searchfield"
-            onChange={(event) => {
+            onChange={(evt) => {
               // @ts-expect-error target is missing
-              setQuery(event.target.value);
+              setQuery(evt.target.value);
             }}
-            onKeyUp={(event: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
-              if (event.key === "Enter") {
+            onKeyUp={(evt: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
+              if (evt.key === "Enter") {
                 if (results?.length > 0) {
                   setSelectedStation(results[0]);
                 }
@@ -224,7 +241,7 @@ function StopsSearch({
             }}
             placeholder={t("stops_search_placeholder")}
             type="text"
-            value={query}
+            value={query || ""}
           />
           {query.length > 0 && (
             <button
@@ -234,50 +251,64 @@ function StopsSearch({
                 setResults(undefined);
               }}
             >
-              <Cancel className="size-4 text-grey" />
+              <Cancel className="text-grey size-4" />
             </button>
           )}
         </div>
       </div>
 
-      <div className="flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
-        {results && results.length === 0 && (
-          <div
-            className={
-              "flex grow gap-3 border border-solid p-3 pt-2 text-zinc-400"
-            }
-            style={{ border: 1 }}
-          >
-            <div className="size-6"></div>
-            <div>{t("no_stops_found")}</div>
-          </div>
-        )}
-        {results && results.length > 0 && (
-          <ul
-            className="grow rounded-md rounded-t-none border border-solid bg-white p-0 "
-            style={{ border: 1 }} // without this th ul is displayed 1 px on the right
-          >
-            {results?.map((station) => {
-              return (
-                <li
-                  className="border-b border-dashed border-slate-300 p-3 last:border-0"
-                  key={station.properties.uid}
-                >
-                  <button
-                    className="flex w-full items-center gap-3 text-left"
-                    onClick={() => {
-                      setSelectedStation(station);
-                    }}
+      {results && (
+        <div
+          className={twMerge(
+            "flex grow overflow-auto rounded-md rounded-t-none bg-white shadow",
+            resultsContainerClassName,
+          )}
+        >
+          {results && results.length === 0 && (
+            <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 && results.length > 0 && (
+            <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}
                   >
-                    <div className="size-6"></div>
-                    <div className="grow">{station.properties.name}</div>
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </div>
+                    <button
+                      className="flex w-full items-center gap-3 text-left"
+                      onClick={() => {
+                        setSelectedStation(station);
+                      }}
+                    >
+                      <div className="size-6"></div>
+                      <div className="grow">{station.properties.name}</div>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      )}
       {/* </div> */}
     </>
   );

package/src/WindowMessageListener/WindowMessageListener.tsx

@@ -0,0 +1,67 @@
+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;
+      }
+      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

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

package/src/icons/Airport/Airport.tsx

@@ -1,12 +1,12 @@
 function Airport({ ...props }) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      width="24"
-      height="24"
       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" />

package/src/icons/ArrowDown/ArrowDown.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function ArrowDown(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/ArrowUp/ArrowUp.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function ArrowUp(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/ArrowUpRight/ArrowUpRight.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function ArrowUpRight(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/BarAndRestaurants/BarAndRestaurants.tsx

@@ -2,10 +2,10 @@ function BarAndRestaurants({ ...props }) {
   return (
     <svg
       fill="currentColor"
-      width="24px"
       height="24px"
-      viewBox="0 -3.84 122.88 122.88"
       version="1.1"
+      viewBox="0 -3.84 122.88 122.88"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/Bathroom/Bathroom.tsx

@@ -3,9 +3,9 @@ function Bathroom({ ...props }) {
     <svg
       fill="currentColor"
       height="24px"
-      width="24px"
       version="1.1"
       viewBox="0 0 512 512"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/Copy/Copy.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Copy({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (

package/src/icons/Doc/Doc.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Doc(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Email/Email.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Email(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/FilePdf/FilePdf.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function FilePdf(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Geolocation/Geolocation.tsx

@@ -1,15 +1,13 @@
-import { SVGProps } from "preact/compat";
-
-function Geolocation(props: SVGProps<SVGSVGElement>) {
+function Geolocation({ ...props }) {
   return (
     <svg
       fill="currentColor"
       focusable="false"
-      height="1.5em"
+      height="24"
       stroke="currentColor"
       strokeWidth="0"
       viewBox="0 0 512 512"
-      width="1.5em"
+      width="24"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/Image/Image.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Image({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (

package/src/icons/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Menu(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Minus/Minus.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Minus(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/NoRealtime/NoRealtime.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function NoRealtime(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Plus/Plus.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Plus(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Police/Police.tsx

@@ -2,16 +2,16 @@ function Police({ ...props }) {
   return (
     <svg
       fill="currentColor"
-      width="24px"
       height="24px"
-      viewBox="0 0 15 15"
       version="1.1"
+      viewBox="0 0 15 15"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        id="rect4718"
         d="M5.5,1L6,2h5l0.5-1H5.5z M6,2.5v1.25c0,0,0,2.75,2.5,2.75S11,3.75,11,3.75V2.5H6z M1.9844,3.9863&#xA;&#x9;C1.4329,3.9949,0.9924,4.4485,1,5v4c-0.0001,0.6398,0.5922,1.1152,1.2168,0.9766L5,9.3574V14l5.8789-6.9297&#xA;&#x9;C10.7391,7.0294,10.5947,7,10.4414,7H6.5L3,7.7539V5C3.0077,4.4362,2.5481,3.9775,1.9844,3.9863z M11.748,7.7109L6.4121,14H12&#xA;&#x9;V8.5586C12,8.2451,11.9061,7.9548,11.748,7.7109z"
+        id="rect4718"
       />
     </svg>
   );

package/src/icons/Share/Share.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Share({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (

package/src/icons/Stack/Stack.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Stack({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (

package/src/icons/Tracking/Tracking.tsx

@@ -0,0 +1,29 @@
+function Tracking({ ...props }) {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      part="svg"
+      viewBox="0 0 14 14"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M7 0.333344C7.375 0.333344 7.66667 0.62501 7.66667 0.97921V2.35414C9.7292 2.66668 11.3333 4.27081 11.625 6.33334H13C13.375 6.33334 13.6667 6.62501 13.6667 7.00001C13.6667 7.37501 13.375 7.66668 13 7.66668H11.625C11.3333 9.70834 9.70833 11.3333 7.66667 11.625V13C7.66667 13.375 7.375 13.6667 7 13.6667C6.64587 13.6667 6.33333 13.375 6.33333 13V11.625C4.29167 11.3333 2.68747 9.70834 2.39587 7.66668H1C0.625 7.66668 0.333333 7.37501 0.333333 7.00001C0.333333 6.62501 0.625 6.33334 1 6.33334H2.39587C2.68747 4.27081 4.29167 2.66668 6.33333 2.35414V0.97921C6.33333 0.62501 6.64587 0.333344 7 0.333344ZM7 3.66668C5.16667 3.66668 3.66667 5.16668 3.66667 7.00001C3.66667 8.79168 5.08333 10.3125 7 10.3125C8.89587 10.3125 10.3333 8.81254 10.3333 7.00001C10.3333 5.16668 8.83333 3.66668 7 3.66668Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M5.66667 7.00001C5.66667 6.27081 6.2708 5.66668 7 5.66668C7.7292 5.66668 8.33333 6.27081 8.33333 7.00001C8.33333 7.72921 7.7292 8.33334 7 8.33334C6.2708 8.33334 5.66667 7.72921 5.66667 7.00001Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        part="circle"
+      />
+    </svg>
+  );
+}
+
+export default Tracking;

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

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg 
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 14 14"
+   id="svg2">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <rect
+     width="14"
+     height="14"
+     x="0"
+     y="0"
+     id="canvas"
+     style="fill:none;stroke:none;visibility:hidden" />
+  <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"
+     id="airport"
+     style="fill:#000000;fill-opacity:1;stroke:none" />
+</svg>

package/src/icons/Tracking/index.tsx

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

package/src/icons/WaitingAreas/WaitingAreas.tsx

@@ -2,9 +2,9 @@ function WaitingAreas({ ...props }) {
   return (
     <svg
       fill="currentColor"
-      width="24px"
       height="24px"
       viewBox="0 0 15 15"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/WheelChair/WheelChair.tsx

@@ -2,9 +2,9 @@ function WheelChair({ ...props }) {
   return (
     <svg
       fill="currentColor"
-      width="24px"
       height="24px"
       viewBox="0 0 24 24"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >