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

package/src/RvfFeatureDetails/index.tsx

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

package/src/RvfIconButton/RvfIconButton.tsx

@@ -1,49 +0,0 @@
-import { memo, useMemo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import { themes } from "../RvfButton/RvfButton";
-
-import type { SVGProps } from "preact/compat";
-
-import type { RvfButtonProps } from "../RvfButton/RvfButton";
-
-export type RvfIconButtonProps = {
-  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
-} & RvfButtonProps;
-
-const baseClasses =
-  "flex  size-[32px] @sm/main:size-[36px] @md/main:size-[40px] p-[7px] items-center justify-center rounded-full border cursor-pointer disabled:cursor-default";
-
-function RvfIconButton({
-  children,
-  className,
-  href,
-  Icon,
-  selected = false,
-  theme = "secondary",
-  ...props
-}: RvfIconButtonProps) {
-  const classes = useMemo(() => {
-    return twMerge(
-      baseClasses,
-      themes[theme].classes,
-      selected ? themes[theme].selectedClasses : "",
-      className,
-    );
-  }, [className, selected, theme]);
-
-  if (href) {
-    return (
-      <a className={classes} href={href} {...props}>
-        {children || <Icon height={"100%"} width={"100%"} />}
-      </a>
-    );
-  }
-  return (
-    <button className={classes} {...props}>
-      {children || <Icon height={"100%"} width={"100%"} />}
-    </button>
-  );
-}
-
-export default memo(RvfIconButton);

package/src/RvfIconButton/index.tsx

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

package/src/RvfInputCopy/RvfInputCopy.tsx

@@ -1,67 +0,0 @@
-import { useId, useState } from "preact/hooks";
-
-import Copy from "../icons/Copy";
-import IconButton from "../ui/IconButton";
-import useI18n from "../utils/hooks/useI18n";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
-  const { t } = useI18n();
-  const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
-  const [isTooptipShowed, setIsTooltipShowed] = useState(false);
-  const inputId = useId();
-  const [node, setNode] = useState<HTMLDivElement | null>(null);
-
-  const handleCopyClick = (event) => {
-    setPositionTooltip(event.currentTarget.getBoundingClientRect());
-    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
-    void navigator.clipboard.writeText(input?.value).then(() => {
-      setIsTooltipShowed(true);
-      setTimeout(() => {
-        setIsTooltipShowed(false);
-      }, 1000);
-    });
-    input?.select();
-  };
-
-  const handleInputFocus = () => {
-    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
-    input?.select();
-  };
-
-  return (
-    <div
-      className="text-grey flex items-center"
-      ref={(elt) => {
-        setNode(elt);
-      }}
-    >
-      <input
-        className="h-7 w-full rounded-sm rounded-r-none border border-r-0 border-current p-1 leading-4 outline-none"
-        id={inputId}
-        onFocus={handleInputFocus}
-        readOnly
-        type="text"
-        {...props}
-      />
-      <IconButton
-        className="!size-7 rounded-l-none rounded-r-sm border-current"
-        onClick={handleCopyClick}
-      >
-        <Copy />
-      </IconButton>
-      <div
-        className={`bg-grey fixed rounded-md p-1 text-sm text-white ${isTooptipShowed ? "block" : "hidden"}`}
-        style={{
-          left: positionTooltip?.left - 30,
-          top: positionTooltip?.top - 40,
-        }}
-      >
-        {t("input_copy_success")}
-      </div>
-    </div>
-  );
-}
-
-export default RvfInputCopy;

package/src/RvfInputCopy/index.tsx

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

package/src/RvfLink/RvfLink.tsx

@@ -1,54 +0,0 @@
-import { memo, useMemo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import ArrowUpRight from "../icons/ArrowUpRight";
-
-import type { AnchorHTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type RvfLinkProps = {
-  theme?: "primary" | "secondary";
-} & AnchorHTMLAttributes<HTMLAnchorElement> &
-  PreactDOMAttributes;
-
-const baseClasses =
-  "my-1 flex items-center leading-[1.1] underline text-base items-center justify-left font-semibold gap-1 whitespace-pre";
-
-export const themes = {
-  primary: {
-    classes:
-      "bg-red text-white disabled:bg-lightgrey  hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred ",
-    selectedClasses: "bg-darkred border-darkred",
-  },
-  secondary: {
-    classes: "bg-white text-black hover:text-red active:text-lightred",
-    selectedClasses: "text-red",
-  },
-};
-
-function RvfLink({
-  children,
-  className,
-  theme = "secondary",
-  ...props
-}: RvfLinkProps) {
-  const classes = useMemo(() => {
-    return twMerge(
-      // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
-      `${baseClasses} ${themes[theme].classes}  ${className || ""}`,
-    );
-  }, [className, theme]);
-
-  return (
-    <a className={classes} rel="noreferrer" target="_blank" {...props}>
-      {(!(props.href as string)?.includes(window.location.hostname) ||
-        !(props.href as string)?.startsWith("(https?|ftp)")) && (
-        <ArrowUpRight className={"shrink-0"} height="20" width="20" />
-      )}
-      <span className={"overflow-hidden text-ellipsis whitespace-pre"}>
-        {children}
-      </span>
-    </a>
-  );
-}
-
-export default memo(RvfLink);

package/src/RvfLink/index.tsx

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

package/src/RvfMainLinkButton/RvfMainLinkButton.tsx

@@ -1,62 +0,0 @@
-import { unByKey } from "ol/Observable";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { LiaMapSolid } from "react-icons/lia";
-import { twMerge } from "tailwind-merge";
-
-import IconButton from "../ui/IconButton";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { PreactDOMAttributes } from "preact";
-
-function RvfMainLinkButton({
-  className,
-  ...props
-}: { className?: string } & PreactDOMAttributes) {
-  const { mainlink, mainlinktitle, map } = useMapContext();
-  const [x, setX] = useState(0);
-  const [y, setY] = useState(0);
-  const [z, setZ] = useState(0);
-
-  useEffect(() => {
-    const update = (evt) => {
-      const center = evt.map?.getView()?.getCenter();
-      if (center) {
-        setX(center[0]);
-        setY(center[1]);
-      }
-      const zoom = evt.map?.getView()?.getZoom();
-      if (zoom) {
-        setZ(zoom);
-      }
-    };
-    update({ map });
-    const key = map?.on("moveend", update);
-    return () => {
-      unByKey(key);
-    };
-  }, [map]);
-
-  const href = useMemo(() => {
-    return mainlink
-      ? mainlink
-          .replace("{{x}}", x.toFixed(4))
-          .replace("{{y}}", y.toFixed(4))
-          .replace("{{z}}", z.toFixed(2))
-      : "#";
-  }, [mainlink, x, y, z]);
-
-  return (
-    <IconButton
-      className={twMerge("rounded-xl border-3 border-white", className)}
-      href={href}
-      target="_blank"
-      theme="primary"
-      title={mainlinktitle}
-      {...props}
-    >
-      <LiaMapSolid />
-    </IconButton>
-  );
-}
-
-export default RvfMainLinkButton;

package/src/RvfMainLinkButton/index.tsx

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

package/src/RvfMapLayout/RvfMapLayout.tsx

@@ -1,202 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Copyright from "../Copyright";
-import EmbedNavigation from "../EmbedNavigation";
-import ExportMenuButton from "../ExportMenuButton";
-import GeolocationButton from "../GeolocationButton";
-import LayerTreeButton from "../LayerTreeButton";
-import Map from "../Map";
-import Overlay from "../Overlay";
-import OverlayContent from "../OverlayContent";
-import RvfMainLinkButton from "../RvfMainLinkButton";
-import RvfOpenStrikeNotification from "../RvfOpenStrikeNotification";
-import RvfPoisLayer from "../RvfPoisLayer";
-import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
-import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
-import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
-import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
-import ScaleLine from "../ScaleLine";
-import Search from "../Search";
-import SearchButton from "../SearchButton";
-import ShareMenuButton from "../ShareMenuButton";
-import StationsLayer from "../StationsLayer";
-import useMapContext from "../utils/hooks/useMapContext";
-import ZoomButtons from "../ZoomButtons";
-
-import type { HTMLAttributes } from "preact";
-
-const scrollableHandlerProps = {
-  style: { width: "calc(100% - 60px)" },
-};
-
-const stationsLayerProps = () => {
-  return {
-    layersFilter: ({ metadata }) => {
-      return metadata?.["general.filter"] === "stations";
-    },
-  };
-};
-
-function RvfMapLayout({
-  className,
-  ...props
-}: { className?: string } & HTMLAttributes<HTMLDivElement>) {
-  const {
-    hasDetails,
-    hasGeolocation,
-    hasLayerTree,
-    hasPrint,
-    hasRealtime,
-    hasSearch,
-    hasShare,
-    hasToolbar,
-    isEmbed,
-    isOverlayOpen,
-    isSearchOpen,
-    mainlink,
-  } = useMapContext();
-
-  return (
-    <div
-      className={twMerge(
-        "relative flex size-full flex-col text-base @lg/main:flex-row-reverse",
-        className,
-      )}
-      {...props}
-    >
-      <RvfSelectedFeatureHighlightLayer />
-      <StationsLayer {...stationsLayerProps} />
-      <RvfTarifZonenLayer />
-      <RvfSellingPointsLayer />
-      <RvfPoisLayer />
-      <RvfSharedMobilityLayerGroup />
-      {/* Will open a notification if there is an ongoing strike notification */}
-      <RvfOpenStrikeNotification />
-
-      <Map className="relative flex-1 overflow-visible">
-        {isEmbed && <EmbedNavigation />}
-        {mainlink && (
-          <RvfMainLinkButton className="absolute inset-x-2 bottom-8 z-10" />
-        )}
-
-        <div className="pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
-          <ScaleLine className="bg-slate-50/70" />
-          <Copyright className="pointer-events-auto bg-slate-50/70" />
-        </div>
-        <div className="absolute top-2 right-2 z-10 flex">
-          {hasGeolocation && <GeolocationButton />}
-        </div>
-        <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
-          <ZoomButtons />
-        </div>
-
-        {!hasToolbar && hasSearch && (
-          <div
-            className={twMerge(
-              "absolute top-2 right-2 left-2 z-10 max-w-96",
-              isOverlayOpen && "@lg:left-68",
-            )}
-          >
-            <Search />
-          </div>
-        )}
-      </Map>
-
-      <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2">
-        {hasToolbar && (
-          <div
-            className={
-              "pointer-events-none relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm *:pointer-events-auto"
-            }
-            //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
-          >
-            {hasSearch && (
-              <div
-                className={twMerge(
-                  "absolute top-12 left-0 w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-43px)] @md:left-[calc(100%-47px)]",
-                  isSearchOpen ? "w-64 opacity-100" : "",
-                )}
-              >
-                <Search
-                  className={
-                    "border-grey @container m-0 h-[40px] rounded-2xl border p-2 px-4 text-base @sm/main:h-[44px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl @md/main:h-[48px]"
-                  }
-                  inputClassName="h-6 text-base"
-                  inputContainerClassName="border-none"
-                  resultClassName="text-base  **:hover:cursor-pointer hover:text-red-500 p-2"
-                  resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-grey border-t-0 "
-                  withResultsClassName="text-base !rounded-b-none"
-                />
-              </div>
-            )}
-
-            <div
-              className={twMerge(
-                "border-grey relative flex gap-[1px] overflow-hidden rounded-2xl border @sm/main:h-[44px] @md/main:h-[48px]",
-                "*:size-[38px] *:rounded-none *:border-none *:@sm/main:size-[42px] *:@md/main:!size-[46px]",
-                "*:first:!rounded-l-2xl",
-                "*:last:!rounded-r-2xl",
-                isSearchOpen
-                  ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
-                  : "",
-              )}
-            >
-              {hasLayerTree && <LayerTreeButton />}
-              {hasPrint && <ExportMenuButton />}
-              {hasShare && <ShareMenuButton />}
-              {hasSearch && <SearchButton />}
-            </div>
-          </div>
-        )}
-
-        {/* Desktop (>= lg) */}
-        {isOverlayOpen && (
-          <div
-            className={twMerge(
-              "pointer-events-none flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-[320px]",
-            )}
-            style={{ containerType: "normal" }}
-          >
-            <Overlay
-              className={
-                "border-grey @container/overlay pointer-events-auto relative hidden flex-col overflow-hidden rounded-2xl border bg-white text-base shadow-lg @lg:flex"
-              }
-              ScrollableHandlerProps={scrollableHandlerProps}
-            >
-              <OverlayContent
-                hasDetails={hasDetails}
-                hasLayerTree={hasLayerTree}
-                hasPrint={hasPrint}
-                hasRealtime={hasRealtime}
-                hasSearch={false}
-                hasShare={hasShare}
-              />
-            </Overlay>
-          </div>
-        )}
-      </div>
-
-      {/* Mobile (< lg) */}
-      {/* {isOverlayOpen && (
-        <Overlay
-          className={
-            "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
-          }
-          ScrollableHandlerProps={scrollableHandlerProps}
-        >
-          <OverlayContent
-            hasDetails={hasDetails}
-            hasLayerTree={hasLayerTree}
-            hasPrint={hasPrint}
-            hasRealtime={hasRealtime}
-            hasSearch={false} // The search could be in the overlay but we decide to put it in the toolbar for better UX
-            hasShare={hasShare}
-          />
-        </Overlay>
-      )} */}
-    </div>
-  );
-}
-
-export default memo(RvfMapLayout);

package/src/RvfMapLayout/index.tsx

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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -1,58 +0,0 @@
-import { type MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { memo } from "preact/compat";
-import { useMemo, useState } from "preact/hooks";
-
-import MobilityMap from "../MobilityMap/MobilityMap";
-import MobilityMapAttributes from "../MobilityMap/MobilityMapAttributes";
-import { RvfContext } from "../utils/hooks/useRvfContext";
-
-import type { Group } from "ol/layer";
-
-import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
-
-function RvfMobilityMap(props: MobilityMapProps) {
-  const [sellingPointsLayer, setSellingPointsLayer] =
-    useState<MaplibreStyleLayer>();
-  const [tarifZonenLayer, setTarifZonenLayer] = useState<MaplibreStyleLayer>();
-  const [poisLayer, setPoisLayer] = useState<MaplibreStyleLayer>();
-  const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
-    useState<Group>();
-
-  const rvfContextValue = useMemo(() => {
-    return {
-      poisLayer,
-      sellingPointsLayer,
-      setPoisLayer,
-      setSellingPointsLayer,
-      setSharedMobilityLayerGroup,
-      setTarifZonenLayer,
-      sharedMobilityLayerGroup,
-      tarifZonenLayer,
-    };
-  }, [
-    poisLayer,
-    sellingPointsLayer,
-    sharedMobilityLayerGroup,
-    tarifZonenLayer,
-  ]);
-
-  return (
-    <RvfContext.Provider value={rvfContextValue}>
-      <MobilityMap {...props} />
-    </RvfContext.Provider>
-  );
-}
-
-const MemoRvFMobilityMap = memo(RvfMobilityMap);
-
-// We creates a wrapper to inject the default props values from MobilityMapAttributes.
-const defaultProps: Partial<MobilityMapProps> = {};
-Object.entries(MobilityMapAttributes).forEach(([key]) => {
-  defaultProps[key] = MobilityMapAttributes[key].defaultValue || null;
-});
-
-function MobilityMapWithDefaultProps(props: MobilityMapProps) {
-  return <MemoRvFMobilityMap {...defaultProps} {...props} />;
-}
-
-export default memo(MobilityMapWithDefaultProps);

package/src/RvfMobilityMap/index.css

@@ -1,13 +0,0 @@
-
-.ol-drag-pan-warning {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: white;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 25px;
-  z-index: 100000;
-}

package/src/RvfMobilityMap/index.tsx

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

package/src/RvfModal/RvfModal.tsx

@@ -1,53 +0,0 @@
-import { memo } from "preact/compat";
-import { useEffect, useState } from "preact/hooks";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type ModalProps = {
-  onClose: () => void;
-} & JSX.HTMLAttributes<HTMLDialogElement> &
-  PreactDOMAttributes;
-
-function RvfModal({ children, onClose, ...props }: ModalProps) {
-  const [node, setNode] = useState<HTMLDialogElement>();
-  let hasChildren = !!children;
-  if (Array.isArray(children)) {
-    hasChildren =
-      children?.length &&
-      (children || []).find((c) => {
-        return !!c;
-      });
-  }
-
-  useEffect(() => {
-    node?.addEventListener("close", onClose);
-    return () => {
-      node?.removeEventListener("close", onClose);
-    };
-  }, [node, onClose]);
-
-  if (!hasChildren) {
-    return null;
-  }
-
-  return (
-    <dialog
-      className={
-        "absolute inset-0 z-50 flex size-full flex-col items-center justify-center bg-transparent"
-      }
-      ref={(n) => {
-        setNode(n);
-        n?.focus();
-      }}
-      {...props}
-    >
-      <button
-        className="absolute inset-0 z-0 size-full bg-black/60"
-        onClick={onClose}
-      ></button>
-      <div className="z-10 flex h-3/4 w-1/2 flex-col bg-white">{children}</div>
-    </dialog>
-  );
-}
-
-export default memo(RvfModal);

package/src/RvfModal/index.tsx

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