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

package/src/MobilitySearch/MobilitySearch.tsx

@@ -1,35 +0,0 @@
-import { memo } from "preact/compat";
-
-import I18n from "../I18n";
-import StopsSearch from "../StopsSearch/StopsSearch";
-
-import MobilitySearchAttributes from "./MobilitySearchAttributes";
-
-// @ts-expect-error tailwind must be added for the search web component
-import tailwind from "../style.css";
-
-import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
-
-export type MobilitySearchProps = StopsSearchProps;
-
-function MobilitySearch(props: MobilitySearchProps) {
-  const { lang } = props;
-  return (
-    <I18n lang={lang}>
-      <style>{tailwind}</style>
-      <StopsSearch {...props} />
-    </I18n>
-  );
-}
-
-// We creates a wrapper to inject the default props values from MobilityMapAttributes.
-const defaultProps = {};
-Object.entries(MobilitySearchAttributes).forEach(([key]) => {
-  defaultProps[key] = MobilitySearchAttributes[key].defaultValue || null;
-});
-
-function MobilitySearchWithDefaultProps(props: MobilitySearchProps) {
-  return <MobilitySearch {...defaultProps} {...props} />;
-}
-
-export default memo(MobilitySearchWithDefaultProps);

package/src/MobilitySearch/MobilitySearchAttributes.test.ts

@@ -1,21 +0,0 @@
-import attributes from "./MobilitySearchAttributes";
-
-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");
-      });
-    }
-  });
-});

package/src/MobilitySearch/MobilitySearchAttributes.ts

@@ -1,87 +0,0 @@
-import type { WebComponentAttributeDoc } from "../MobilityMap/MobilityMapAttributes";
-
-const geopsApiLink = `<a href="https://developer.geops.io/">geOps API key</a>`;
-const geopsStopsApiLink = `<a href="https://developer.geops.io/apis/stops">geOps Stops API</a>`;
-
-export type MobilitySearchAttributeName =
-  | "apikey"
-  | "bbox"
-  | "countrycode"
-  | "event"
-  | "field"
-  | "lang"
-  | "limit"
-  | "mots"
-  | "onselect"
-  | "params"
-  | "prefagencies"
-  | "reflocation"
-  | "url";
-
-export type MobilitySearchAttributes = Record<
-  MobilitySearchAttributeName,
-  WebComponentAttributeDoc
->;
-
-const attrs: MobilitySearchAttributes = {
-  apikey: {
-    description: `Your ${geopsApiLink}`,
-    public: true,
-  },
-  bbox: {
-    description: `The extent where to search the stops (minx,miny,maxx,maxy). See the ${geopsStopsApiLink} documentation.`,
-    public: true,
-  },
-  countrycode: {
-    description: "The country code to filter the results (IT, DE, CH ...)",
-    public: true,
-  },
-  event: {
-    defaultValue: "mwc:stopssearchselect",
-    description: "The event's name to listen to when a stop is selected.",
-    public: true,
-  },
-  field: {
-    description: `Which field to look up, default all of them, Possible values:id, name, coords. See the ${geopsStopsApiLink} documentation.`,
-    public: true,
-  },
-  lang: {
-    defaultValue: "en",
-    description:
-      "The language to use for the search input texts. Supported languages are : de, en, fr, it.",
-    public: true,
-  },
-  limit: {
-    defaultValue: "5",
-    description: `The number of suggestions to show. See the ${geopsStopsApiLink} documentation.`,
-    public: true,
-  },
-  mots: {
-    description: `Commas separated list of mots used to filter the results (rail, bus, coach, foot, tram, subway, gondola, funicular, ferry, car). See the ${geopsStopsApiLink} documentation.`,
-    public: true,
-  },
-  onselect: {
-    description: null, //`Function called when a stop is selected. The function receives the selected stop as parameter.`,
-    public: false,
-  },
-  params: {
-    description: `JSON string with additional parameters to pass to the request to the API. Ex: {"{ 'key': 'value' }"}. See the ${geopsStopsApiLink} documentation.`,
-    public: true,
-  },
-  prefagencies: {
-    description: `comma seperated list, order chooses which agency will be preferred as
-        ident_source (for id and code fields). Possible values: sbb, db. See the ${geopsStopsApiLink} documentation.`,
-    public: true,
-  },
-  reflocation: {
-    description: `Coordinates in WGS84 (in lat,lon order) used to rank stops close to this position higher. See the ${geopsStopsApiLink} documentation.`,
-    public: true,
-  },
-  url: {
-    defaultValue: "https://api.geops.io/stops/v1/",
-    description: `The URL to the ${geopsStopsApiLink}.`,
-    public: true,
-  },
-};
-
-export default attrs;

package/src/MobilitySearch/MobilitySearchEvents.ts

@@ -1,21 +0,0 @@
-import MobilityMapEvents from "../MobilityMap/MobilityMapEvents";
-
-import type { WebComponentEventDoc } from "../MobilityMap/MobilityMapEvents";
-
-export type MobilitySearchEventName = "mwc:attribute" | "mwc:stopssearchselect";
-
-export type MobilitySearchAttributes = Record<
-  MobilitySearchEventName,
-  WebComponentEventDoc
->;
-
-const attrs: MobilitySearchAttributes = {
-  "mwc:attribute": MobilityMapEvents["mwc:attribute"],
-  "mwc:stopssearchselect": {
-    description:
-      "Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
-    public: true,
-  },
-};
-
-export default attrs;

package/src/MobilitySearch/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./MobilitySearch";
-export { default as MobilitySearchAttributes } from "./MobilitySearchAttributes";

package/src/NotificationDetails/NotificationDetails.tsx

@@ -1,309 +0,0 @@
-import {
-  type AffectedTimeIntervalType,
-  type PublicationType,
-  type TextualContentType,
-} from "mobility-toolbox-js/types";
-import { twMerge } from "tailwind-merge";
-
-import Warning from "../icons/Warning";
-import ShadowOverflow from "../ShadowOverflow";
-import Link from "../ui/Link";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-import useMocoSituation from "../utils/hooks/useMocoSituation";
-import mergePublications from "../utils/mergePublications";
-
-import type {
-  MultilingualTextualContentType,
-  RealtimeLine,
-  RealtimeMot,
-} from "mobility-toolbox-js/types";
-import type { Feature } from "ol";
-
-const toShortDate = (date: Date, showTime, showYear?: boolean) => {
-  const time = date.toLocaleTimeString(["de"], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-  const dateString = date.toLocaleDateString(["de"], {
-    day: "2-digit",
-    month: "short",
-    weekday: "short",
-    year: showYear ? "numeric" : undefined,
-  });
-
-  return `${dateString}${showTime && showTime !== time ? ` ${time}` : ""}`
-    .replace(",", "")
-    .replace(/\./, "")
-    .replace(/\.$/, "");
-};
-
-export type NotificationLine = {
-  mot?: RealtimeMot;
-  operator_name?: string;
-  short_name?: string;
-  tags?: string[];
-} & RealtimeLine;
-
-function NotificationDetails({
-  className,
-  ...props
-}: {
-  className?: string;
-  feature: Feature;
-}) {
-  const { locale, t } = useI18n();
-  const { notificationId, notificationSupportedLanguages } = useMapContext();
-  const situationParsed = useMocoSituation(notificationId);
-
-  // moco export v2
-  let textualContentMultilingual: Partial<MultilingualTextualContentType> = {};
-  let textualContent: Partial<TextualContentType> = {};
-  let timeIntervalsToDisplay = [];
-  let publicationsToDisplay: PublicationType[] = [];
-  let reasonsToDisplay: string[] = [];
-
-  // const situationParsed: SituationType = JSON.parse(situation) || {};
-  const publicationsArr: PublicationType[] =
-    situationParsed?.publications || [];
-
-  // Find the current publication(s) at the current date
-  publicationsToDisplay =
-    publicationsArr?.filter(({ publicationWindows }) => {
-      // In some cases publicationWindows can be undefined here but defined at the
-      // root of the object so we apply the root publicationWindows to all publications with empty one
-      if (
-        !publicationWindows?.length &&
-        situationParsed?.publicationWindows?.length
-      ) {
-        // @ts-expect-error we should not set this value directly
-        // eslint-disable-next-line no-param-reassign
-        publicationWindows = situationParsed.publicationWindows;
-      }
-
-      return publicationWindows.find(({ endTime, startTime }) => {
-        const now = new Date();
-        const startT = new Date(startTime);
-        const endT = new Date(endTime);
-        return startT <= now && now <= endT;
-      });
-    }) || [];
-
-  // Merge similar publications
-  publicationsToDisplay = mergePublications(publicationsToDisplay);
-
-  // Display the current and next affected time intervals not the one in the past
-  timeIntervalsToDisplay =
-    (situationParsed?.affectedTimeIntervals || []).filter(
-      ({ endTime, startTime }) => {
-        const now = new Date();
-        const startT = new Date(startTime);
-        const endT = new Date(endTime);
-        return (startT <= now && now <= endT) || now < startT;
-      },
-    ) || [];
-
-  // Display the reasons
-  reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => {
-    return name && t(name.replace(".", ""));
-  });
-
-  return (
-    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
-      <div>
-        {publicationsToDisplay?.map(
-          ({
-            id,
-            infoLinks,
-            publicationLines,
-            publicationStops,
-            textualContentLarge,
-            textualContentMedium,
-            textualContentSmall,
-          }) => {
-            let localeToUse = locale();
-
-            // We use a supported language by the notification.
-            if (
-              !!notificationSupportedLanguages?.length &&
-              !notificationSupportedLanguages.includes(localeToUse)
-            ) {
-              localeToUse = notificationSupportedLanguages[0];
-            }
-
-            // Get the textual content in German
-            textualContentMultilingual =
-              textualContentLarge ||
-              textualContentMedium ||
-              textualContentSmall;
-
-            textualContent = textualContentMultilingual?.[localeToUse];
-
-            if (!textualContent?.summary) {
-              // Try to find textualContent with a title using fallback languages
-              // If we do not find a fallback we stick to the current language.
-              for (const fallbackLang of notificationSupportedLanguages) {
-                const goodTextualContent =
-                  textualContentMultilingual?.[fallbackLang];
-                if (goodTextualContent?.summary) {
-                  localeToUse = fallbackLang;
-                  textualContent = goodTextualContent;
-                  break;
-                }
-              }
-            }
-
-            let pubLines =
-              publicationLines?.flatMap((publication) => {
-                return (
-                  publication.lines?.map(({ name }) => {
-                    return name;
-                  }) || []
-                );
-              }) || [];
-            pubLines = [...new Set(pubLines)]; // Remove duplicates
-
-            let stations = publicationStops.map((publication) => {
-              return publication?.name || "";
-            });
-
-            stations = [...new Set(stations)]; // Remove duplicates
-
-            return (
-              <div className={"text-base"} key={id}>
-                <div className="text-xs uppercase">{reasonsToDisplay}</div>
-                <h3 className="space-x-2 text-lg leading-[1.3] font-bold text-balance">
-                  <span className={"inline-block align-middle"}>
-                    <Warning />
-                  </span>
-                  <span
-                    className={"align-middle *:inline"}
-                    dangerouslySetInnerHTML={{
-                      __html: textualContent?.summary,
-                    }}
-                  ></span>
-                </h3>
-                <hr className="my-1" />
-
-                {timeIntervalsToDisplay?.map(
-                  ({
-                    dailyEndTime,
-                    dailyStartTime,
-                    endTime,
-                    startTime,
-                  }: AffectedTimeIntervalType) => {
-                    const hasDailyTime = dailyEndTime && dailyStartTime;
-                    const isStartCurrentYear =
-                      new Date().getFullYear() ===
-                      new Date(startTime).getFullYear();
-                    const isEndCurrentYear =
-                      new Date().getFullYear() ===
-                      new Date(endTime).getFullYear();
-                    const isEndInfinite = endTime.includes("2500");
-
-                    return (
-                      <div
-                        className="text-sm font-bold text-balance"
-                        key={startTime}
-                      >
-                        <span>
-                          {t("from_to", {
-                            from: toShortDate(
-                              new Date(startTime),
-                              !hasDailyTime,
-                              !isStartCurrentYear,
-                            ),
-                            to: !isEndInfinite
-                              ? toShortDate(
-                                  new Date(endTime),
-                                  !hasDailyTime,
-                                  !isEndCurrentYear,
-                                )
-                              : undefined,
-                          })}
-                        </span>
-                        {hasDailyTime && (
-                          <span>{` (${t("daily_from_to", {
-                            from: dailyStartTime,
-                            to: dailyEndTime,
-                          })})`}</span>
-                        )}
-                      </div>
-                    );
-                  },
-                )}
-                <div className={"my-4 flex flex-col gap-4"}>
-                  {textualContent?.description && (
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: textualContent?.description,
-                      }}
-                    />
-                  )}
-                  {!!infoLinks?.length && (
-                    <div className={"space-y-1"}>
-                      {infoLinks.map(({ label, uri }) => {
-                        const title = label?.[localeToUse] || uri || "";
-                        return (
-                          <Link
-                            className={"block"}
-                            href={uri}
-                            key={uri}
-                            title={title}
-                          >
-                            {title}
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  )}
-                  {!!pubLines?.length && (
-                    <div>
-                      <div className={"font-bold"}>{t("affected_lines")}:</div>
-                      <div className={"flex flex-wrap gap-1 text-sm"}>
-                        {pubLines?.map((name) => {
-                          return (
-                            <div
-                              // px-4px and py-2px are important for bermekt
-                              className={
-                                "rounded-md bg-black px-[4px] py-[2px] font-bold text-white"
-                              }
-                              key={name}
-                            >
-                              {name}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-                  {!!stations?.length && (
-                    <div>
-                      <div className={"font-bold"}>{t("affected_stops")}:</div>
-                      <div className={"flex flex-wrap gap-1 text-sm"}>
-                        {stations.map((name) => {
-                          return (
-                            <div
-                              className={
-                                "rounded-md bg-black px-2 py-1 font-bold text-white"
-                              }
-                              key={name}
-                            >
-                              {name}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            );
-          },
-        )}
-      </div>
-    </ShadowOverflow>
-  );
-}
-
-export default NotificationDetails;

package/src/NotificationDetails/index.ts

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

package/src/NotificationsLayer/NotificationsLayer.tsx

@@ -1,118 +0,0 @@
-import { MocoLayer, type MocoLayerOptions } from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import { LAYER_NAME_NOTIFICATIONS, MAX_EXTENT } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
-  const {
-    apikey,
-    baseLayer,
-    linesNetworkPlanLayer,
-    map,
-    notificationat,
-    notificationtenant,
-    notificationurl,
-    previewNotifications,
-    setNotificationsLayer,
-  } = useMapContext();
-  const [isLnpVisible, setIsLnpVisible] = useState(
-    !!linesNetworkPlanLayer?.getVisible(),
-  );
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    const mocoLayer = new MocoLayer({
-      apiKey: apikey,
-      apiParameters: {
-        bbox: MAX_EXTENT,
-        contentMedium: true,
-        hasGeoms: undefined,
-        // isEdited: true,
-        publicNow: true,
-      },
-      maplibreLayer: baseLayer,
-      name: LAYER_NAME_NOTIFICATIONS,
-      publicAt: notificationat ? new Date(notificationat) : undefined,
-      situations: previewNotifications,
-      tenant: notificationtenant,
-      url: notificationurl,
-      ...(props || {}),
-      loadAll: !previewNotifications,
-    });
-    if (!!previewNotifications && !mocoLayer.getVisible()) {
-      mocoLayer.setVisible(true);
-    }
-    return mocoLayer;
-  }, [
-    baseLayer,
-    apikey,
-    notificationat,
-    previewNotifications,
-    notificationtenant,
-    notificationurl,
-    props,
-  ]);
-
-  useEffect(() => {
-    setNotificationsLayer?.(layer);
-  }, [layer, setNotificationsLayer]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-    map.addLayer(layer);
-
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  // Watch lnp visibility
-  useEffect(() => {
-    const key = linesNetworkPlanLayer?.on("change:visible", () => {
-      const visible = linesNetworkPlanLayer.getVisible();
-      setIsLnpVisible(visible);
-    });
-    setIsLnpVisible(linesNetworkPlanLayer?.getVisible() || false);
-    return () => {
-      unByKey(key);
-    };
-  }, [linesNetworkPlanLayer]);
-
-  // Change the layersFilter based on lnp visibility
-  // Moco layers must de hidden by default otherwise, on load, everything is displayed
-  useEffect(() => {
-    if (!layer) {
-      return;
-    }
-    const visible = layer.getVisible();
-    if (visible) {
-      layer.setVisible(false);
-    }
-
-    if (isLnpVisible) {
-      layer.layersFilter = (layerSpec) => {
-        return layerSpec.metadata?.["general.filter"] === "moco.lnp";
-      };
-    } else {
-      layer.layersFilter = (layerSpec) => {
-        return layerSpec.metadata?.["general.filter"] === "moco";
-      };
-    }
-
-    layer.setVisible(visible);
-    return () => {
-      layer.applyLayoutVisibility();
-    };
-  }, [isLnpVisible, layer, linesNetworkPlanLayer]);
-
-  return null;
-}
-
-export default memo(NotificationsLayer);

package/src/NotificationsLayer/index.tsx

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

package/src/Overlay/Overlay.tsx

@@ -1,61 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-import ScrollableHandler from "../ScrollableHandler";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-import type { ScrollableHandlerProps } from "../ScrollableHandler";
-
-export type OverlayProps = {
-  className;
-  ScrollableHandlerProps?: ScrollableHandlerProps;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function Overlay({
-  children,
-  className,
-  ScrollableHandlerProps = {},
-}: OverlayProps) {
-  let hasChildren = !!children;
-  if (Array.isArray(children)) {
-    hasChildren =
-      children?.length &&
-      (children || []).find((c) => {
-        return !!c;
-      });
-  }
-
-  if (!hasChildren) {
-    return null;
-  }
-
-  return (
-    <div
-      className={
-        (twMerge(
-          `pointer-events-auto relative z-50 flex flex-col overflow-hidden bg-white transition-[min-height,max-height] @lg:transition-[width]`,
-        ),
-        className)
-      }
-    >
-      <ScrollableHandler
-        className="absolute inset-0 flex h-[65px] touch-none justify-center @lg/main:hidden"
-        style={{ width: "100%" }}
-        {...ScrollableHandlerProps}
-      >
-        <div
-          className="m-2 mr-[-60px] bg-gray-300"
-          style={{
-            borderRadius: 2,
-            height: 4,
-            width: 32,
-          }}
-        />
-      </ScrollableHandler>
-      {children}
-    </div>
-  );
-}
-
-export default Overlay;

package/src/Overlay/index.tsx

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