@geops/rvf-mobility-web-component 0.1.56 → 0.1.58

package/package.json

@@ -2,17 +2,17 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "graphql": "^16.10.0",
     "graphql-request": "^7.1.2",
-    "jspdf": "^2.5.2",
+    "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
-    "maplibre-gl": "^5.7.2",
-    "mobility-toolbox-js": "3.3.4-beta.31",
+    "maplibre-gl": "^5.8.0",
+    "mobility-toolbox-js": "3.4.0",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",
@@ -20,43 +20,42 @@
     "react-dom": "npm:@preact/compat@^18.3.1",
     "react-icons": "^5.5.0",
     "react-spatial": "^2.0.0",
-    "rosetta": "^1.1.0",
-    "showdown": "^2.1.0"
+    "rosetta": "^1.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.35.0",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@eslint/js": "^9.36.0",
     "@geops/eslint-config-react": "^1.5.0",
     "@tailwindcss/cli": "^4.1.13",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
     "@types/geojson": "^7946.0.16",
     "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.20",
     "@types/preact-custom-element": "^4.0.4",
     "concurrently": "^9.2.1",
     "esbuild": "^0.25.10",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.35.0",
+    "eslint": "^9.36.0",
     "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
     "husky": "^9.1.7",
-    "jest": "^30.1.3",
+    "jest": "^30.2.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^30.1.2",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-preset-preact": "^4.1.1",
-    "lint-staged": "^16.2.0",
     "next": "15.5.2",
-    "preact-render-to-string": "^6.6.1",
+    "preact-render-to-string": "^6.6.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "standard-version": "^9.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
-    "ts-jest": "^29.4.3",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.0"
+    "ts-jest": "^29.4.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.45.0"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js && cp index*.js* doc/public/",

package/src/{RvfExportMenu/RvfExportMenu.tsx → ExportMenu/ExportMenu.tsx}

@@ -1,23 +1,23 @@
 import { memo, useId, useState } from "preact/compat";
 
-import RvfCheckbox from "../RvfCheckbox";
-import RvfSelect from "../RvfSelect";
 import Button from "../ui/Button";
-import { LAYER_PROP_IS_EXPORTING, RVF_EXTENT_3857 } from "../utils/constants";
+import Checkbox from "../ui/Checkbox";
+import Select from "../ui/Select";
+import { LAYER_PROP_IS_EXPORTING, MAX_EXTENT } from "../utils/constants";
 import exportPdf from "../utils/exportPdf";
 import getAllLayers from "../utils/getAllLayers";
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
+export type ExportMenuButtonProps = HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
 const formats = ["A4", "A3", "A1", "A0"];
 
 let prevRealtimeLayerVisibility = false;
 
-function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
+function ExportMenu({ ...props }: ExportMenuButtonProps) {
   const { map, realtimeLayer } = useMapContext();
   const [useMaxExtent, setUseMaxExtent] = useState(false);
   const [format, setFormat] = useState<string>(formats[0]);
@@ -30,7 +30,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
       {/* <!-- Content --> */}
       <div className="flex flex-1 flex-col gap-4">
         <div className={"flex flex-wrap items-center gap-2"}>
-          <RvfCheckbox
+          <Checkbox
             checked={useMaxExtent}
             id={checkboxId}
             onChange={() => {
@@ -41,7 +41,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
         </div>
         <div className={"flex flex-wrap items-center gap-2"}>
           <label htmlFor={selectId}>Format:</label>
-          <RvfSelect
+          <Select
             className={"w-24"}
             id={selectId}
             onChange={(evt) => {
@@ -51,7 +51,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
             {formats.map((formatt) => {
               return <option key={formatt}>{formatt}</option>;
             })}
-          </RvfSelect>
+          </Select>
         </div>
       </div>
       {/* <!-- Footer --> */}
@@ -66,7 +66,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
               map,
               { format },
               {
-                maxExtent: useMaxExtent ? RVF_EXTENT_3857 : undefined,
+                maxExtent: useMaxExtent ? MAX_EXTENT : undefined,
 
                 onAfter: (mapp, layers) => {
                   if (
@@ -112,4 +112,4 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
   );
 }
 
-export default memo(RvfExportMenu);
+export default memo(ExportMenu);

package/src/ExportMenu/index.tsx

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

package/src/{RvfExportMenuButton/RvfExportMenuButton.tsx → ExportMenuButton/ExportMenuButton.tsx}

@@ -3,14 +3,14 @@ import { useCallback } from "preact/hooks";
 
 import Download from "../icons/Download";
 import IconButton from "../ui/IconButton";
-import useRvfContext from "../utils/hooks/useRvfContext";
+import useMapContext from "../utils/hooks/useMapContext";
 
 import type { IconButtonProps } from "../ui/IconButton/IconButton";
 
-export type RvfExportMenuButtonProps = IconButtonProps;
+export type ExportMenuButtonProps = IconButtonProps;
 
-function RvfExportMenuButton({ ...props }: RvfExportMenuButtonProps) {
-  const { isExportMenuOpen, setIsExportMenuOpen } = useRvfContext();
+function ExportMenuButton({ ...props }: ExportMenuButtonProps) {
+  const { isExportMenuOpen, setIsExportMenuOpen } = useMapContext();
 
   const onClick = useCallback(() => {
     setIsExportMenuOpen(!isExportMenuOpen);
@@ -23,4 +23,4 @@ function RvfExportMenuButton({ ...props }: RvfExportMenuButtonProps) {
   );
 }
 
-export default memo(RvfExportMenuButton);
+export default memo(ExportMenuButton);

package/src/ExportMenuButton/index.tsx

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

package/src/FeatureDetails/FeatureDetails.tsx

@@ -0,0 +1,57 @@
+import { memo } from "preact/compat";
+
+import LinesNetworkPlanDetails from "../LinesNetworkPlanDetails";
+import NotificationDetails from "../NotificationDetails";
+import RouteSchedule from "../RouteSchedule";
+import Station from "../Station";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { FeatureInfo } from "mobility-toolbox-js/common/typedefs";
+import type { Feature } from "ol";
+import type BaseLayer from "ol/layer/Base";
+
+const contentClassName = ""; //`h-full overflow-x-hidden text-base bg-white`;
+
+export interface FeatureDetailsProps {
+  feature?: Feature;
+  featuresInfo?: FeatureInfo;
+  layer?: BaseLayer;
+}
+
+/**
+ * This component is repsonsible to display the details of a feature passed as prop.
+ */
+function FeatureDetails({ feature, featuresInfo, layer }: FeatureDetailsProps) {
+  const {
+    linesNetworkPlanLayer,
+    notificationsLayer,
+    realtimeLayer,
+    stationId,
+    stationsLayer,
+    tenant,
+    trainId,
+  } = useMapContext();
+
+  if (!feature) {
+    return null;
+  }
+
+  return (
+    <>
+      {feature && layer === realtimeLayer && trainId && <RouteSchedule />}
+      {feature && layer === stationsLayer && tenant && stationId && <Station />}
+      {feature &&
+        layer === linesNetworkPlanLayer &&
+        featuresInfo?.features?.length && (
+          <LinesNetworkPlanDetails
+            className={contentClassName}
+            features={featuresInfo?.features || []}
+          />
+        )}
+      {feature && layer === notificationsLayer && (
+        <NotificationDetails className={contentClassName} feature={feature} />
+      )}
+    </>
+  );
+}
+export default memo(FeatureDetails);

package/src/FeatureDetails/index.ts

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

package/src/FeaturesInfosListener/FeaturesInfosListener.tsx

@@ -0,0 +1,73 @@
+import { useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+/**
+ * This component defines the behavior when user select or hover a queryable feature
+ */
+function FeaturesInfosListener() {
+  const {
+    featuresInfos,
+    featuresInfosHovered,
+    realtimeLayer,
+    setSelectedFeature,
+    setSelectedFeatures,
+    setStationId,
+    setTrainId,
+    stationsLayer,
+    tenant,
+  } = useMapContext();
+
+  useEffect(() => {
+    const [realtimeFeature] =
+      featuresInfosHovered?.find((info) => {
+        return info.layer === realtimeLayer;
+      })?.features || [];
+    realtimeLayer?.highlight(realtimeFeature);
+  }, [featuresInfosHovered, realtimeLayer]);
+
+  useEffect(() => {
+    const [realtimeFeature] =
+      featuresInfos?.find((info) => {
+        return info.layer === realtimeLayer;
+      })?.features || [];
+
+    const stationsFeatures =
+      featuresInfos?.find((info) => {
+        return info.layer === stationsLayer;
+      })?.features || [];
+
+    const [stationFeature] = stationsFeatures.filter((feat) => {
+      return feat.get("tralis_network")?.includes(tenant);
+    });
+
+    const features =
+      featuresInfos?.flatMap((info) => {
+        return info.features;
+      }) || [];
+
+    if (realtimeFeature || stationFeature || !features.length) {
+      setSelectedFeature(realtimeFeature || stationFeature || null);
+      setSelectedFeatures(
+        realtimeFeature || stationFeature
+          ? [realtimeFeature || stationFeature]
+          : [],
+      );
+    } else {
+      setSelectedFeatures(features);
+      setSelectedFeature(realtimeFeature || stationFeature || features[0]);
+    }
+  }, [
+    featuresInfos,
+    realtimeLayer,
+    setSelectedFeature,
+    setSelectedFeatures,
+    setStationId,
+    setTrainId,
+    stationsLayer,
+    tenant,
+  ]);
+
+  return null;
+}
+export default FeaturesInfosListener;

package/src/FeaturesInfosListener/index.tsx

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

package/src/GeolocationButton/GeolocationButton.tsx

@@ -59,7 +59,6 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
 
   return (
     <IconButton
-      // @ts-expect-error - onClick exists
       onClick={() => {
         return setIsTracking(!isTracking);
       }}

package/src/LayerTree/LayerTree.tsx

@@ -0,0 +1,58 @@
+import { memo } from "preact/compat";
+import { useEffect, useReducer } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
+
+import {
+  LayersTreeContext,
+  LayersTreeDispatchContext,
+} from "./layersTreeContext";
+import layersTreeReducer from "./layersTreeReducer";
+import TreeItem from "./TreeItem";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+import type { TreeItemProps } from "./TreeItem";
+
+export type LayerTreeProps = {
+  className?: string;
+  layers: TreeItemProps[];
+  treeItemProps?: Partial<TreeItemProps>;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function LayerTree({
+  className,
+  layers,
+  treeItemProps,
+  ...props
+}: LayerTreeProps) {
+  const [tree, dispatch] = useReducer(layersTreeReducer, layers);
+
+  useEffect(() => {
+    dispatch({ payload: layers, type: "INIT" });
+  }, [layers]);
+
+  return (
+    <LayersTreeContext.Provider value={tree}>
+      <LayersTreeDispatchContext.Provider value={dispatch}>
+        <div
+          className={twMerge("relative flex flex-col", className)}
+          {...props}
+        >
+          {layers.map((item) => {
+            return (
+              <TreeItem
+                {...(treeItemProps || {})}
+                className={twMerge("w-full", treeItemProps?.className)}
+                key={item.id}
+                {...item}
+              />
+            );
+          })}
+        </div>
+      </LayersTreeDispatchContext.Provider>
+    </LayersTreeContext.Provider>
+  );
+}
+
+export default memo(LayerTree);

package/src/LayerTree/TreeItem/TreeItem.tsx

@@ -0,0 +1,151 @@
+import { useContext, useEffect, useId, useState } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import ArrowDown from "../../icons/ArrowDown";
+import ArrowUp from "../../icons/ArrowUp";
+import minusGrey from "../../icons/Minus/minus.svg";
+import Checkbox from "../../ui/Checkbox";
+// import RvfRadioButton from "../../RvfRadioButton";
+import { LayersTreeDispatchContext } from "../layersTreeContext";
+
+import type BaseLayer from "ol/layer/Base";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+import type { SVGProps } from "preact/compat";
+
+export enum SelectionType {
+  CHECKBOX = "checkbox",
+  RADIO = "radio",
+}
+
+export type TreeItemProps = {
+  childContainerClassName?: string;
+  childItems: TreeItemProps[];
+  className?: string;
+  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
+  id: string;
+  isCollapsedOnControlClick?: boolean;
+  isControlChecked?: boolean;
+  layer?: BaseLayer;
+  onIconClick?: () => void;
+  selectionType: SelectionType;
+  title: string;
+} & HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function TreeItem({
+  childContainerClassName,
+  childItems,
+  className,
+  isCollapsedOnControlClick,
+  isControlChecked,
+  layer,
+  selectionType,
+  title,
+}: TreeItemProps) {
+  const [isContainerVisible, setIsContainerVisible] = useState(true);
+  const dispatch = useContext(LayersTreeDispatchContext);
+  const inputId = useId();
+  const buttonId = useId();
+
+  useEffect(() => {
+    if (isCollapsedOnControlClick) {
+      setIsContainerVisible(isControlChecked);
+    }
+  }, [isControlChecked, isCollapsedOnControlClick, layer]);
+
+  const handleItemClick = () => {
+    setIsContainerVisible(!isContainerVisible);
+
+    if (isCollapsedOnControlClick && !isContainerVisible) {
+      dispatch({
+        payload: {
+          ...this.props,
+          isControlChecked: true,
+        },
+        type: "SELECT_ITEM",
+      });
+    }
+  };
+
+  const handleSelectionChange = (event) => {
+    dispatch({
+      payload: {
+        ...this.props,
+        isControlChecked: event.target.checked,
+      },
+      type: "SELECT_ITEM",
+    });
+  };
+
+  const renderedLayers = childItems
+    .filter(({ title: titlee }) => {
+      return !!titlee;
+    })
+    .map((item, idx) => {
+      return <TreeItem key={idx} {...item} />;
+    });
+
+  if (!title) {
+    return null;
+  }
+
+  const isMiddleState = () => {
+    if (childItems.length > 0) {
+      const checkedItems = childItems.filter((item) => {
+        return item.isControlChecked;
+      });
+      if (checkedItems.length === childItems.length) {
+        return false;
+      }
+
+      return childItems.some((item) => {
+        return item.isControlChecked;
+      });
+    }
+
+    return false;
+  };
+
+  return (
+    <>
+      <div className={twMerge("flex items-center gap-2 py-2", className)}>
+        {selectionType === SelectionType.RADIO ? null : (
+          // <RvfRadioButton
+          //   checked={isControlChecked}
+          //   id={inputId}
+          //   onChange={handleSelectionChange}
+          // />
+          <Checkbox
+            checked={isControlChecked}
+            checkedIconUrl={isMiddleState() ? minusGrey : null}
+            className={isMiddleState() ? "bg-[length:18px]" : ""}
+            id={inputId}
+            onChange={handleSelectionChange}
+          />
+        )}
+        <label
+          className={`flex-1 cursor-pointer`}
+          htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
+        >
+          {title}
+        </label>
+        {renderedLayers.length > 0 && (
+          <button
+            className={`flex cursor-pointer items-center gap-2`}
+            id={buttonId}
+            onClick={handleItemClick}
+          >
+            {isContainerVisible ? <ArrowUp /> : <ArrowDown />}
+          </button>
+        )}
+      </div>
+      {isContainerVisible && renderedLayers.length > 0 && (
+        <div className={twMerge("pl-6", childContainerClassName)}>
+          {renderedLayers}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default TreeItem;

package/src/LayerTree/TreeItem/index.tsx

@@ -0,0 +1 @@
+export { default, SelectionType, TreeItemProps } from "./TreeItem";

package/src/LayerTree/index.tsx

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

package/src/LayerTree/layersTreeContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from "preact";
+
+export const LayersTreeContext = createContext(null);
+export const LayersTreeDispatchContext = createContext(null);