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

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

@@ -1,39 +0,0 @@
-"use client";
-import { Suspense } from "react";
-
-import useIsFullScreen from "../hooks/useIsFullScreen";
-import GeopsMobility from "./GeopsMobility";
-import WebComponentDoc, { AttrConfig } from "./WebComponentDoc";
-
-let attrsConfig: Record<string, AttrConfig>;
-
-function GeopsMobilityDoc() {
-  const isFullScreen = useIsFullScreen();
-
-  if (typeof window !== undefined) {
-    // @ts-expect-error - MobilityMapAttributes is added via a script file.
-    attrsConfig = window.MobilityMapAttributes;
-  }
-
-  if (!attrsConfig) {
-    return null;
-  }
-
-  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

@@ -1,22 +0,0 @@
-import { forwardRef } from "react";
-
-declare module "react" {
-  namespace JSX {
-    interface IntrinsicElements {
-      "geops-mobility-search": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      > &
-        Record<string, unknown>;
-    }
-  }
-}
-
-const GeopsMobilitySearch = forwardRef<HTMLDivElement, Record<string, unknown>>(
-  (props, ref) => {
-    return <geops-mobility-search ref={ref} {...props}></geops-mobility-search>;
-  },
-);
-GeopsMobilitySearch.displayName = "GeopsMobilitySearch";
-
-export default GeopsMobilitySearch;

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

@@ -1,33 +0,0 @@
-"use client";
-import { Suspense } from "react";
-
-import GeopsMobilitySearch from "./GeopsMobilitySearch";
-import WebComponentDoc, { AttrConfig } from "./WebComponentDoc";
-
-let attrsConfig: Record<string, AttrConfig>;
-
-function GeopsMobilitySearchDoc() {
-  if (typeof window !== undefined) {
-    // @ts-expect-error - MobilitySearchAttributes is added via a script file.
-    attrsConfig = window.MobilitySearchAttributes;
-  }
-
-  if (!attrsConfig) {
-    return null;
-  }
-
-  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

@@ -1,10 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,284 +0,0 @@
-"use client";
-import {
-  Button,
-  Checkbox,
-  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?: "boolean";
-}
-
-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) => {
-          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-1/5 border px-4 py-2">Name</th>
-            <th className="w-4/5 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="w-1/5 border p-4">{key}</td>
-                  <td className="w-2/5 border p-4">
-                    <div className="flex flex-col gap-4 justify-start">
-                      {!type && (
-                        <div className="flex gap-2">
-                          <TextField
-                            defaultValue={attributes[key]}
-                            id={key}
-                            placeholder={defaultValue}
-                            variant="outlined"
-                            {...props}
-                          />
-                          <Button
-                            onClick={() => {
-                              onChange(
-                                key,
-                                (
-                                  document.getElementById(
-                                    key,
-                                  ) as HTMLInputElement
-                                )?.value,
-                              );
-                            }}
-                          >
-                            Apply
-                          </Button>
-                        </div>
-                      )}
-                      {type === "boolean" && (
-                        <Checkbox
-                          className="w-8"
-                          defaultChecked={
-                            (searchParams.get(key) || defaultValue) === "true"
-                          }
-                          onChange={(evt) => {
-                            onChange(
-                              key,
-                              evt.target.checked ? "true" : "false",
-                            );
-                          }}
-                        />
-                      )}
-                      <div>
-                        {typeof description !== "string" ? (
-                          description
-                        ) : (
-                          <Typography
-                            dangerouslySetInnerHTML={{ __html: description }}
-                          />
-                        )}{" "}
-                        {defaultValue && (
-                          <>
-                            <i>Default to &quot;{defaultValue}&quot;</i>
-                          </>
-                        )}
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              );
-            })}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-export default WebComponentDoc;

package/doc/src/app/geops-mobility/page.tsx

@@ -1,11 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-
-const DynamicComponentWithNoSSR = dynamic(
-  () => import("../components/GeopsMobilityDoc"),
-  { ssr: false },
-);
-
-export default function GeopsMobility() {
-  return <DynamicComponentWithNoSSR />;
-}

package/doc/src/app/geops-mobility-search/page.tsx

@@ -1,11 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-
-const DynamicComponentWithNoSSR = dynamic(
-  () => import("../components/GeopsMobilitySearchDoc"),
-  { ssr: false },
-);
-
-export default function GeopsMobilitySearch() {
-  return <DynamicComponentWithNoSSR />;
-}

package/doc/src/app/globals.css

@@ -1,58 +0,0 @@
-@import 'tailwindcss';
-
-@theme {
-  --font-sans: Lato, sans-serif;
-  --font-serif: Merriweather, serif;
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-@utility text-balance {
-  text-wrap: balance;
-}
-
-@layer utilities {
-  :root {
-    --background: #ffffff;
-    --foreground: #171717;
-  }
-
-  body {
-    color: var(--foreground);
-    background: var(--background);
-    font-family: Arial, Helvetica, sans-serif;
-    margin: 0;
-    font-family: Lato, Arial, sans-serif;
-    color: #353535;
-    position: relative;
-    min-height: 100%;
-    overflow-y: scroll;
-    font-size: 18px;
-  }
-
-  a {
-    text-decoration: none;
-    color: #76b833;
-  }
-
-  a:focus-visible {
-    outline: 2px solid black;
-    outline-offset: 2px;
-  }
-}

package/doc/src/app/hooks/useAttrFromUrlParams.ts

@@ -1,21 +0,0 @@
-import { useSearchParams } from "next/navigation";
-import { useMemo } from "react";
-
-const useAttrFromUrlParams = (attributes: string[]) => {
-  const searchParams = useSearchParams();
-
-  const attrs = useMemo(() => {
-    const values: Record<string, string> = {};
-    attributes.forEach((key) => {
-      const value = searchParams.get(key);
-      if (key && value !== undefined && value !== null) {
-        values[key] = value;
-      }
-    });
-    return values;
-  }, [attributes, searchParams]);
-
-  return attrs;
-};
-
-export default useAttrFromUrlParams;

package/doc/src/app/hooks/useIsFullScreen.ts

@@ -1,14 +0,0 @@
-import { useSearchParams } from "next/navigation";
-import { useMemo } from "react";
-
-const useIsFullScreen = () => {
-  const searchParams = useSearchParams();
-
-  const isFullScreen = useMemo(() => {
-    return searchParams.get("fullscreen") === "true";
-  }, [searchParams]);
-
-  return isFullScreen;
-};
-
-export default useIsFullScreen;

package/doc/src/app/hooks/usePublicKey.ts

@@ -1,19 +0,0 @@
-import { useEffect, useState } from "react";
-
-const usePublicKey = () => {
-  const [publicKey, setPublicKey] = useState<null | string>(null);
-
-  useEffect(() => {
-    const fetchPublicKey = async () => {
-      const response = await fetch("https://developer.geops.io/publickey");
-      const data = await response.json();
-      setPublicKey(data?.key);
-    };
-
-    fetchPublicKey();
-  }, []);
-
-  return publicKey;
-};
-
-export default usePublicKey;

package/doc/src/app/layout.tsx

@@ -1,53 +0,0 @@
-import { Container } from "@mui/material";
-import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
-import { ThemeProvider } from "@mui/material/styles";
-import Script from "next/script";
-import { Suspense } from "react";
-
-import { Footer, geopsTheme, Header } from "../geops-ui";
-
-import "./globals.css";
-
-import type { Metadata } from "next";
-
-const tabs = [
-  {
-    component: "a",
-    href: "/",
-    label: "Home",
-  },
-  {
-    component: "a",
-    href: "https://github.com/geops/mobility-web-component",
-    label: "Code",
-  },
-];
-
-export const metadata: Metadata = {
-  description: "A set of we component for geOps Mobility APIs",
-  title: "geOps Mobility Web Component",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`antialiased`}>
-        <AppRouterCacheProvider>
-          <ThemeProvider theme={geopsTheme}>
-            <Header tabs={tabs} title="mobility-web-component" />
-            <Container className="my-12" maxWidth="md">
-              <Suspense fallback={null}>{children}</Suspense>
-            </Container>
-            <Footer />
-          </ThemeProvider>
-        </AppRouterCacheProvider>
-        <Script src="index.js" />
-        <Script src="indexDoc.js" />
-      </body>
-    </html>
-  );
-}

package/doc/src/app/page.tsx

@@ -1,86 +0,0 @@
-"use client";
-import {
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Typography,
-} from "@mui/material";
-import Link from "next/link";
-
-import GeopsAPIsLink from "./components/GeopsAPIsLink";
-import GeopsMobility from "./components/GeopsMobility";
-import GeopsMobilitySearch from "./components/GeopsMobilitySearch";
-import GeopsStopsAPILink from "./components/GeopsStopsAPILink";
-import usePublicKey from "./hooks/usePublicKey";
-
-export default function Home() {
-  const apiKey = usePublicKey();
-  return (
-    <>
-      <Typography variant="h1">Mobility Web Component</Typography>
-      <br />
-      <p className="my-4">
-        This project contains a set of web components allowing to use easily the{" "}
-        <GeopsAPIsLink />:
-      </p>
-      <div className="my-8 flex flex-wrap gap-4">
-        <Card className="w-[345px] min-w-[320px] shrink-0">
-          <CardMedia sx={{ height: 160, padding: 0, pointerEvents: "none" }}>
-            <GeopsMobility
-              apikey={apiKey}
-              class="size-full"
-              geolocation="false"
-              search="false"
-            />
-          </CardMedia>
-          <CardContent>
-            <Link href={`/geops-mobility`}>
-              <Typography variant="h3">{"<geops-mobility />"}</Typography>
-            </Link>
-            <Typography>
-              A web component used to display a map using different{" "}
-              <GeopsAPIsLink />.
-            </Typography>
-          </CardContent>
-          <CardActions sx={{ display: "flex", justifyContent: "end" }}>
-            <Button
-              href={`/geops-mobility`}
-              sx={{ borderRadius: 0, borderTopLeftRadius: 4 }}
-            >
-              More
-            </Button>
-          </CardActions>
-        </Card>
-
-        <Card className="w-[345px] min-w-[320px] shrink-0">
-          <CardMedia sx={{ height: 160, padding: 2, pointerEvents: "none" }}>
-            <GeopsMobilitySearch
-              apikey={apiKey}
-              class="m-4 size-full border-0 border-b"
-            />
-          </CardMedia>
-          <CardContent>
-            <Link href={`/geops-mobility-search`}>
-              <Typography variant="h3">
-                {"<geops-mobility-search />"}
-              </Typography>
-            </Link>
-            <Typography>
-              A search input to search stops using the <GeopsStopsAPILink />.
-            </Typography>
-          </CardContent>
-          <CardActions sx={{ display: "flex", justifyContent: "end" }}>
-            <Button
-              href={`/geops-mobility-search`}
-              sx={{ borderRadius: 0, borderTopLeftRadius: 4 }}
-            >
-              More
-            </Button>
-          </CardActions>
-        </Card>
-      </div>
-    </>
-  );
-}