@geops/rvf-mobility-web-component 0.1.8

package/doc/src/app/components/GeopsMobility.tsx

@@ -0,0 +1,9 @@
+"use client";
+import { forwardRef } from "react";
+
+// eslint-disable-next-line react/display-name
+const GeopsMobility = forwardRef((props: Record<string, unknown>, ref) => {
+  return <geops-mobility ref={ref} {...props}></geops-mobility>;
+});
+
+export default GeopsMobility;

package/doc/src/app/components/GeopsMobilityDoc.tsx

@@ -0,0 +1,231 @@
+import { Typography } from "@mui/material";
+import { Suspense } from "react";
+
+import useIsFullScreen from "../hooks/useIsFullScreen";
+import GeopsAPIKeyLink from "./GeopsAPIKeyLink";
+import GeopsMapsAPILink from "./GeopsMapsAPILink";
+import GeopsMobility from "./GeopsMobility";
+import GeopsRealtimeAPILink from "./GeopsRealtimeAPILink";
+import GeopsStopsAPILink from "./GeopsStopsAPILink";
+import Link from "./Link";
+import WebComponentDoc, { AttrConfig } from "./WebComponentDoc";
+
+const attrsConfig: Record<string, AttrConfig> = {
+  apikey: {
+    description: (
+      <Typography>
+        Your <GeopsAPIKeyLink />.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  baselayer: {
+    defaultValue: "travic_v2",
+    description: (
+      <Typography>
+        The style&apos;s name from the <GeopsMapsAPILink />
+        (base_dark_v2, base_bright_v2, ...).
+      </Typography>
+    ),
+    type: "select",
+  },
+  center: {
+    defaultValue: "831634,5933959",
+    description: (
+      <Typography>The center of the map in EPSG:3857 coordinates.</Typography>
+    ),
+    type: "textfield",
+  },
+  geolocation: {
+    defaultValue: "true",
+    description: (
+      <Typography>
+        Display the geolocation button or not (true or false).
+      </Typography>
+    ),
+    type: "checkbox",
+  },
+  mapsurl: {
+    defaultValue: "https://maps.geops.io",
+    description: (
+      <Typography>
+        The <GeopsMapsAPILink /> url to use.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  maxzoom: {
+    description: <Typography>Define the max zoom level of the map.</Typography>,
+    props: {
+      slotProps: {
+        input: {
+          max: 22,
+          min: 0,
+          step: 1,
+        },
+      },
+      type: "number",
+    },
+    type: "textfield",
+  },
+  minzoom: {
+    description: <Typography>Define the min zoom level of the map.</Typography>,
+    props: {
+      slotProps: {
+        input: {
+          max: 22,
+          min: 0,
+          step: 1,
+        },
+      },
+      type: "number",
+    },
+    type: "textfield",
+  },
+  mots: {
+    description: (
+      <Typography>
+        Commas separated list of mots to display on the Realtime layer (rail,
+        bus, coach, foot, tram, subway, gondola, funicular, ferry, car).
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  notification: {
+    defaultValue: "true",
+    description: (
+      <Typography>
+        Display the notification layer or not (true or false). This layer will
+        display informations about disruptions on the network. Data comes from
+        our{" "}
+        <Link href="https://geops.com/en/solution/disruption-information">
+          geOps MOCO tool
+        </Link>
+        . It works it combination with `notificationurl`.
+      </Typography>
+    ),
+    type: "checkbox",
+  },
+  notificationat: {
+    description: (
+      <Typography>
+        An ISO date string used to display active notification at this date in
+        the notification layer. If not defined the current date will be used.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  notificationbeforelayerid: {
+    description: (
+      <Typography>
+        The style layer&apos;s id before which the notification layer will be
+        added. By default the layer will be added on top.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  notificationurl: {
+    description: (
+      <Typography>
+        The{" "}
+        <Link href="https://geops.com/en/solution/disruption-information">
+          geOps MOCO API
+        </Link>{" "}
+        url to get the notifications from.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  // x,y,z are not applies on refresh
+  // permalink: {
+  //   defaultValue: "false",
+  //   description: (
+  //     <Typography>
+  //       Add automatically an `x`,`y` an `z` URL parameters to the URL to allow
+  //       to share the current mapview. Default to false.
+  //     </Typography>
+  //   ),
+  //   type: "checkbox",
+  // },
+  realtime: {
+    defaultValue: "true",
+    description: (
+      <Typography>
+        Display the realtime layer or not (true or false). This layer display
+        realtime vehicles on the map using the <GeopsRealtimeAPILink />.
+      </Typography>
+    ),
+    type: "checkbox",
+  },
+  realtimeurl: {
+    defaultValue: "wss://api.geops.io/tracker-ws/v1/ws",
+    description: (
+      <Typography>
+        The <GeopsRealtimeAPILink /> url to use.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  search: {
+    defaultValue: "true",
+    description: (
+      <Typography>
+        Display the search stops input or not (true or false).
+      </Typography>
+    ),
+    type: "checkbox",
+  },
+  stopsurl: {
+    defaultValue: "https://api.geops.io/stops/v1/",
+    description: (
+      <Typography>
+        The <GeopsStopsAPILink /> url to use.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  tenant: {
+    description: (
+      <Typography>
+        The tenant name to use to filter the Realtime vehicles available.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  zoom: {
+    defaultValue: "13",
+    description: <Typography>The initial zoom level of the map.</Typography>,
+    props: {
+      slotProps: {
+        input: {
+          max: 22,
+          min: 0,
+          step: 1,
+        },
+      },
+      type: "number",
+    },
+    type: "textfield",
+  },
+};
+function GeopsMobilityDoc() {
+  const isFullScreen = useIsFullScreen();
+
+  return (
+    <Suspense>
+      <WebComponentDoc
+        attrsConfig={attrsConfig}
+        // @ts-expect-error -  must find the correct type
+        Comp={GeopsMobility}
+        compProps={{
+          class: isFullScreen
+            ? "fixed inset-0 w-screen h-sccreen z-[9000] bg-white"
+            : "block h-96 max-w-full resize overflow-auto  bg-white",
+        }}
+        tagName="geops-mobility"
+      />
+    </Suspense>
+  );
+}
+
+export default GeopsMobilityDoc;

package/doc/src/app/components/GeopsMobilitySearch.tsx

@@ -0,0 +1,10 @@
+import { forwardRef } from "react";
+
+// eslint-disable-next-line react/display-name
+const GeopsMobilitySearch = forwardRef(
+  (props: Record<string, unknown>, ref) => {
+    return <geops-mobility-search ref={ref} {...props}></geops-mobility-search>;
+  },
+);
+
+export default GeopsMobilitySearch;

package/doc/src/app/components/GeopsMobilitySearchDoc.tsx

@@ -0,0 +1,129 @@
+import { Typography } from "@mui/material";
+import { Suspense } from "react";
+
+import GeopsAPIKeyLink from "./GeopsAPIKeyLink";
+import GeopsMobilitySearch from "./GeopsMobilitySearch";
+import GeopsStopsAPILink from "./GeopsStopsAPILink";
+import WebComponentDoc, { AttrConfig } from "./WebComponentDoc";
+
+const attrsConfig: Record<string, AttrConfig> = {
+  apikey: {
+    description: (
+      <Typography>
+        Your <GeopsAPIKeyLink />.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  bbox: {
+    description: (
+      <Typography>
+        The extent where to search the stops (minx,miny,maxx,maxy).
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  countrycode: {
+    description: (
+      <Typography>
+        The country code to filter the results (IT, DE, CH ...)
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  event: {
+    defaultValue: "mwc:stopssearchselect",
+    description: (
+      <Typography>
+        The event&pos;s name to listen to when a stop is selected.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  field: {
+    description: (
+      <Typography>
+        Which field to look up, default all of them, Possible values:id, name,
+        coords.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  limit: {
+    defaultValue: "5",
+    description: <Typography>The number of suggestions to show.</Typography>,
+    props: {
+      slotProps: {
+        input: {
+          max: 100,
+          min: 0,
+          step: 1,
+        },
+      },
+      type: "number",
+    },
+    type: "textfield",
+  },
+  mots: {
+    description: (
+      <Typography>
+        Commas separated list of mots used to filter the results (rail, bus,
+        coach, foot, tram, subway, gondola, funicular, ferry, car).
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  params: {
+    description: (
+      <Typography>
+        JSON string with additional parameters to pass to the request to the
+        API. Ex: {"{ 'key': 'value' }"}
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  prefagencies: {
+    description: (
+      <Typography>
+        Comma seperated list, order chooses which agency will be preferred as
+        ident_source (for id and code fields). Possible values: sbb, db.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  reflocation: {
+    description: (
+      <Typography>
+        Coordinates in WGS84 (in lat,lon order) used to rank stops close to this
+        position higher
+      </Typography>
+    ),
+    type: "textfield",
+  },
+  url: {
+    defaultValue: "https://api.geops.io/stops/v1/",
+    description: (
+      <Typography>
+        The <GeopsStopsAPILink /> url to use.
+      </Typography>
+    ),
+    type: "textfield",
+  },
+};
+
+function GeopsMobilitySearchDoc() {
+  return (
+    <Suspense>
+      <WebComponentDoc
+        attrsConfig={attrsConfig}
+        // @ts-expect-error -  must find the correct type
+        Comp={GeopsMobilitySearch}
+        compProps={{ class: "block w-full border" }}
+        events={["mwc:stopssearchselect"]}
+        tagName="geops-mobility-search"
+      />
+    </Suspense>
+  );
+}
+
+export default GeopsMobilitySearchDoc;

package/doc/src/app/components/GeopsRealtimeAPILink.tsx

@@ -0,0 +1,10 @@
+import Link from "./Link";
+
+function GeopsRealtimeAPILink() {
+  return (
+    <Link href="https://developer.geops.io/apis/realtime">
+      geOps Realtime API
+    </Link>
+  );
+}
+export default GeopsRealtimeAPILink;

package/doc/src/app/components/GeopsStopsAPILink.tsx

@@ -0,0 +1,8 @@
+import Link from "./Link";
+
+function GeopsStopsAPILink() {
+  return (
+    <Link href="https://developer.geops.io/apis/stops">geOps Stops API</Link>
+  );
+}
+export default GeopsStopsAPILink;

package/doc/src/app/components/Link.tsx

@@ -0,0 +1,9 @@
+function Link({ children, ...props }: React.JSX.IntrinsicElements["a"]) {
+  return (
+    <a rel="noreferrer" target="_blank" {...props}>
+      <b>{children}</b>
+    </a>
+  );
+}
+
+export default Link;

package/doc/src/app/components/WebComponentDoc.tsx

@@ -0,0 +1,296 @@
+"use client";
+import {
+  Button,
+  Checkbox,
+  MenuItem,
+  Select,
+  TextField,
+  TextFieldProps,
+  Typography,
+} from "@mui/material";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import {
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+
+import useAttrFromUrlParams from "../hooks/useAttrFromUrlParams";
+import usePublicKey from "../hooks/usePublicKey";
+
+export interface AttrConfig {
+  defaultValue?: string;
+  description: ReactNode;
+  props?: TextFieldProps;
+  type: "checkbox" | "date" | "select" | "textfield";
+}
+
+function WebComponentDoc({
+  attrsConfig,
+  Comp,
+  compProps,
+  events,
+  isFullScreen,
+  tagName,
+}: {
+  attrsConfig: Record<string, AttrConfig>;
+  Comp: (props: Record<string, string>) => ReactElement;
+  compProps: Record<string, string>;
+  events?: string[];
+  isFullScreen?: boolean;
+  tagName: string;
+}) {
+  const wcAttributes = Object.keys(attrsConfig);
+  const ref = useRef<HTMLElement>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+  const apiKey = usePublicKey();
+  const attributes = useAttrFromUrlParams(wcAttributes);
+  const searchParams = useSearchParams();
+
+  // Get a new searchParams string by merging the current
+  // searchParams with a provided key/value pair
+  const createQueryString = useCallback(
+    (name: string, value?: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value === undefined || value === "") {
+        params.delete(name);
+      } else {
+        params.set(name, value);
+      }
+
+      return params.toString();
+    },
+    [searchParams],
+  );
+
+  const code = useMemo(() => {
+    let str = `<script\n\ttype="module"\n\tsrc="https://www.unpkg.com/@geops/mobility-web-component">
+</script>
+<${tagName}`;
+
+    str = Object.keys({ apikey: "", ...attributes }).reduce((acc, key) => {
+      if (key === "apikey" && !attributes[key]) {
+        return `${acc}\n\tapikey="YOUR_GEOPS_API_KEY"`;
+      }
+      return `${acc}\n\t${key}="${attributes[key]}"`;
+    }, str);
+
+    str += `>\n</${tagName}>`;
+
+    return str;
+  }, [attributes, tagName]);
+
+  const onChange = useCallback(
+    (key: string, value: string) => {
+      const val = value === attrsConfig[key]?.defaultValue ? undefined : value;
+      router.replace(pathname + "?" + createQueryString(key, val), {
+        scroll: false,
+      });
+    },
+    [attrsConfig, createQueryString, pathname, router],
+  );
+
+  useEffect(() => {
+    const cb = (event: CustomEvent<{ data: object; type: string }>) => {
+      const eventLog = document.getElementById("textarea");
+      // @ts-expect-error - strange error
+      const data = event.data;
+      if (!eventLog) {
+        return;
+      }
+      if (!data) {
+        eventLog.innerText = "";
+      } else {
+        eventLog.innerText =
+          "Event " +
+          event.type +
+          " received :\n " +
+          JSON.stringify(data, undefined, " ");
+        // window.top.postMessage(data, "*");
+      }
+    };
+    if (ref.current) {
+      // Listen to element event
+      events?.forEach((event) => {
+        // @ts-expect-error - strange error
+        ref.current?.addEventListener(event, cb);
+      });
+    }
+    return () => {
+      events?.forEach((event) => {
+        // @ts-expect-error - strange error
+        ref.current?.removeEventListener(event, cb);
+      });
+    };
+  }, [events]);
+
+  const webComponent = useMemo(() => {
+    return (
+      <Comp
+        // @ts-expect-error - strange error
+        apikey={apiKey}
+        {...attributes}
+        // @ts-expect-error - strange error
+        ref={(node: HTMLElement) => {
+          // @ts-expect-error - strange error
+          ref.current = node;
+        }}
+        {...compProps}
+      />
+    );
+  }, [Comp, apiKey, attributes, compProps]);
+
+  if (isFullScreen) {
+    return webComponent;
+  }
+
+  return (
+    <div className="mb-48 scroll-mt-20">
+      <Typography variant="h1">{`<${tagName} />`}</Typography>
+      <br />
+      <Typography>
+        This is a demo of the &lt;{tagName} /&gt; Web Component.
+      </Typography>
+      <br />
+      {webComponent}
+      <br />
+      {events?.length && (
+        <>
+          <Typography className="my-8  overflow-auto" variant="h3">
+            Event received
+          </Typography>
+          <pre
+            className="h-40 w-full overflow-auto border p-2"
+            id="textarea"
+          ></pre>
+          <br />
+        </>
+      )}
+      <Typography className="my-8" variant="h2">
+        HTML code
+      </Typography>
+      <br />
+      <SyntaxHighlighter className="!m-0" language="xml">
+        {code}
+      </SyntaxHighlighter>
+      <br />
+      <Typography className="flex gap-4" variant="h2">
+        Attributes
+        <Button
+          onClick={() => {
+            router.push(pathname, {
+              scroll: false,
+            });
+          }}
+        >
+          Reset
+        </Button>
+      </Typography>
+      <br />
+
+      <table className="w-full">
+        <thead>
+          <tr>
+            <th className="w-[15%] border px-4 py-2">Name</th>
+            <th className="w-2/5 border px-4 py-2">Value</th>
+            <th className="w-[45%] border px-4 py-2">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {wcAttributes
+            .sort((a, b) => {
+              return a < b ? -1 : 1;
+            })
+            .filter((key) => {
+              return attrsConfig[key]?.description;
+            })
+            .map((key) => {
+              const {
+                defaultValue,
+                description,
+                props = {},
+                type,
+              } = attrsConfig[key] || {};
+              return (
+                <tr key={key}>
+                  <td className="border px-4 py-2">{key}</td>
+                  <td className="border px-4 py-2">
+                    {type === "textfield" && (
+                      <div>
+                        <TextField
+                          defaultValue={attributes[key]}
+                          fullWidth
+                          id={key}
+                          placeholder={defaultValue}
+                          variant="standard"
+                          {...props}
+                        />
+                        <div className="mt-2">
+                          <Button
+                            fullWidth
+                            onClick={() => {
+                              onChange(
+                                key,
+                                (
+                                  document.getElementById(
+                                    key,
+                                  ) as HTMLInputElement
+                                )?.value,
+                              );
+                            }}
+                          >
+                            Apply
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+
+                    {type === "checkbox" && (
+                      <Checkbox
+                        defaultChecked={
+                          (searchParams.get(key) || defaultValue) === "true"
+                        }
+                        onChange={(evt) => {
+                          onChange(key, evt.target.checked ? "true" : "false");
+                        }}
+                      />
+                    )}
+
+                    {type === "select" && (
+                      <Select
+                        defaultValue={searchParams.get(key) || defaultValue}
+                        fullWidth
+                        onChange={(evt) => {
+                          onChange(key, evt.target.value);
+                        }}
+                        variant="standard"
+                      >
+                        <MenuItem value="travic_v2">Travic v2</MenuItem>
+                        <MenuItem value="base_dark_v2">Dark v2</MenuItem>
+                      </Select>
+                    )}
+                  </td>
+                  <td className="border p-4">
+                    {description}{" "}
+                    {defaultValue && (
+                      <>
+                        <br />
+                        <i>Default to &quot;{defaultValue}&quot;</i>
+                      </>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default WebComponentDoc;