@geops/rvf-mobility-web-component 0.1.83 → 0.1.85

package/src/RouteScheduleHeader/RouteScheduleHeader.tsx

@@ -6,8 +6,14 @@ import RouteInfos from "../RouteInfos";
 import IconButton from "../ui/IconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
-function RouteScheduleHeader() {
-  const { isFollowing, setIsFollowing, stopSequence } = useMapContext();
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
+
+function RouteScheduleHeader({
+  stopSequence,
+}: {
+  stopSequence: RealtimeStopSequence;
+}) {
+  const { isFollowing, setIsFollowing } = useMapContext();
   return (
     <div className="flex items-center gap-x-4 bg-slate-100 p-4 py-2">
       <RouteIcon stopSequence={stopSequence} />

package/src/RouteStop/RouteStop.tsx

@@ -8,10 +8,14 @@ import RouteStopStation from "../RouteStopStation";
 import RouteStopTime from "../RouteStopTime";
 import getStopStatus from "../utils/getStopStatus";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRealtimeStation from "../utils/hooks/useRealtimeStation";
 import { RouteStopContext } from "../utils/hooks/useRouteStop";
 
-import type { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
+import type {
+  RealtimeStop,
+  RealtimeStopSequence,
+} from "mobility-toolbox-js/types";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
 export type RouteScheduleStopProps = {
   classNameGreyOut?: string;
@@ -20,7 +24,8 @@ export type RouteScheduleStopProps = {
   stop?: {
     platform?: string;
   } & RealtimeStop;
-} & JSX.HTMLAttributes<HTMLButtonElement> &
+  stopSequence: RealtimeStopSequence;
+} & HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
 function RouteStop({
@@ -29,15 +34,13 @@ function RouteStop({
   index,
   invertColor = false,
   stop,
+  stopSequence,
   ...props
 }: RouteScheduleStopProps) {
-  const { map, realtimeLayer, stopSequence } = useMapContext();
-  const {
-    // @ts-expect-error bad type definition
-    stopUID,
-  } = stop;
-  const [station, setStation] = useState<RealtimeStation>();
+  const { map } = useMapContext();
+  const { stopUID } = stop;
   const [status, setStatus] = useState(getStopStatus(stopSequence, index));
+  const station = useRealtimeStation(stopUID);
 
   useEffect(() => {
     let interval = null;
@@ -54,27 +57,9 @@ function RouteStop({
     };
   }, [index, status.isInBetween, stopSequence]);
 
-  useEffect(() => {
-    if (!stopUID || !realtimeLayer?.api) {
-      return;
-    }
-    realtimeLayer?.api?.subscribe(`station ${stopUID}`, ({ content }) => {
-      if (content) {
-        setStation(content);
-      }
-    });
-
-    return () => {
-      setStation(null);
-      if (stopUID) {
-        realtimeLayer?.api?.unsubscribe(`station ${stopUID}`);
-      }
-    };
-  }, [stopUID, realtimeLayer?.api]);
-
   const routeStopState = useMemo(() => {
-    return { index, invertColor, station, status, stop };
-  }, [stop, status, index, invertColor, station]);
+    return { index, invertColor, station, status, stop, stopSequence };
+  }, [stop, status, index, invertColor, station, stopSequence]);
 
   let colorScheme = status.isPassed || status.isLeft ? classNameGreyOut : "";
 

package/src/RouteStopPlatform/RouteStopPlatform.tsx

@@ -1,7 +1,6 @@
 import { memo } from "preact/compat";
 
 import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
 import type { JSX, PreactDOMAttributes } from "preact";
@@ -10,8 +9,7 @@ export type RouteStopPlatformProps = JSX.HTMLAttributes<HTMLSpanElement> &
   PreactDOMAttributes;
 
 function RouteStopPlatform({ ...props }: RouteStopPlatformProps) {
-  const { stop } = useRouteStop();
-  const { stopSequence } = useMapContext();
+  const { stop, stopSequence } = useRouteStop();
   const { type } = stopSequence;
   const { t } = useI18n();
   const { platform } = stop || {};

package/src/RouteStopProgress/RouteStopProgress.tsx

@@ -1,40 +1,33 @@
 import { memo } from "preact/compat";
 
 import getMainColorForVehicle from "../utils/getMainColorForVehicle";
-import useMapContext from "../utils/hooks/useMapContext";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
 export type RouteStopProgressProps = {
-  lineColor?: string;
-  svgProps?: JSX.HTMLAttributes<SVGElement> & PreactDOMAttributes;
-} & JSX.HTMLAttributes<HTMLDivElement> &
+  svgProps?: HTMLAttributes<SVGElement> & PreactDOMAttributes;
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-function RouteStopProgress({
-  lineColor,
-  svgProps,
-  ...props
-}: RouteStopProgressProps) {
-  const { stopSequence } = useMapContext();
-  const { invertColor, status } = useRouteStop();
+function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
+  const { invertColor, status, stopSequence } = useRouteStop();
   const { isBoarding, isFirst, isLast, isLeft, isPassed, progress } = status;
   const y1 = isFirst ? "50%" : "-100%";
   const y2 = isLast ? "50%" : "100%";
   const yDone = `${progress}%`;
 
   const greyColor = "rgb(156, 163, 175)";
-  const lineColorr = lineColor || getMainColorForVehicle(stopSequence);
+  const lineColor = getMainColorForVehicle(stopSequence);
 
-  let colorScheme = isPassed ? greyColor : lineColorr;
-  let invertColorScheme = isPassed ? lineColorr : greyColor;
+  let colorScheme = isPassed ? greyColor : lineColor;
+  let invertColorScheme = isPassed ? lineColor : greyColor;
   let progressDoneColor = greyColor;
 
   if (invertColor) {
-    colorScheme = isPassed ? lineColorr : greyColor;
-    invertColorScheme = isPassed ? greyColor : lineColorr;
-    progressDoneColor = lineColorr;
+    colorScheme = isPassed ? lineColor : greyColor;
+    invertColorScheme = isPassed ? greyColor : lineColor;
+    progressDoneColor = lineColor;
   }
 
   const circleColor =

package/src/RouteStopStation/RouteStopStation.tsx

@@ -15,7 +15,7 @@ export type RouteStopStationProps = {
 
 function RouteStopStation({
   children,
-  className = "flex items-center gap-2",
+  className = "flex items-center gap-2 w-full",
   classNameCancelled = "text-red-600 line-through",
   ...props
 }: RouteStopStationProps) {
@@ -29,8 +29,8 @@ function RouteStopStation({
         status.isCancelled ? classNameCancelled : "",
       )}
     >
-      <RouteStopName />
-      <RouteStopServices className="flex flex-wrap gap-1" />
+      <RouteStopName className={"grow"} />
+      <RouteStopServices className="flex shrink-0 flex-wrap gap-1" />
       {children}
     </div>
   );

package/src/RvfRealtimeLayer/RvfRealtimeLayer.tsx

@@ -8,6 +8,7 @@ import getTextColor from "../utils/getTextColor";
 import realtimeRVFStyle from "../utils/realtimeRVFStyle";
 
 import type { RealtimeLayerOptions } from "mobility-toolbox-js/ol";
+import type { RealtimeTrajectory, ViewState } from "mobility-toolbox-js/types";
 
 const PRIORITY_FROM_TYPE = {
   bus: 25,
@@ -46,15 +47,27 @@ const defaultProps: Partial<RealtimeLayerOptions> = {
   },
   style: realtimeRVFStyle,
   styleOptions: {
-    getBgColor: getBgColor,
+    getColor: (trajectory?: RealtimeTrajectory): string => {
+      return getBgColor(
+        trajectory?.properties?.type,
+        trajectory?.properties?.line,
+      );
+    },
     getMaxRadiusForStrokeAndDelay: () => {
       return 4;
     },
     getMaxRadiusForText: () => {
       return 8;
     },
-    getRadius: getRadius,
-    getTextColor: getTextColor,
+    getRadius: (
+      trajectory?: RealtimeTrajectory,
+      viewState?: ViewState,
+    ): number => {
+      return getRadius(trajectory?.properties?.type, viewState?.zoom);
+    },
+    getTextColor: (trajectory?: RealtimeTrajectory): string => {
+      return getTextColor(trajectory?.properties?.type);
+    },
   },
 };
 function RvfRealtimeLayer(props: Partial<RealtimeLayerOptions>) {

package/src/RvfSearch/RvfSearch.tsx

@@ -2,20 +2,21 @@ import { memo } from "preact/compat";
 import { useCallback } from "preact/hooks";
 
 import StopsSearch from "../StopsSearch";
-import centerOnStation from "../utils/centerOnStation";
 import { RVF_EXTENT_4326 } from "../utils/constants";
+import useFit from "../utils/hooks/useFit";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
 
 function RvfSearch(props: Partial<StopsSearchProps>) {
-  const { apikey, map, stopsurl } = useMapContext();
+  const { apikey, stopsurl } = useMapContext();
+  const fit = useFit();
 
   const onSelect = useCallback(
     (selected) => {
-      return centerOnStation(selected, map);
+      return fit.current(selected);
     },
-    [map],
+    [fit],
   );
 
   return (

package/src/Search/Search.tsx

@@ -1,29 +1,50 @@
 import { memo } from "preact/compat";
-import { useCallback } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
-import StopsSearch from "../StopsSearch";
-import centerOnStation from "../utils/centerOnStation";
-import useMapContext from "../utils/hooks/useMapContext";
+import { SearchHeadless } from ".";
 
-import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
-
-function Search(props: Partial<StopsSearchProps>) {
-  const { apikey, map, stopsurl } = useMapContext();
-
-  const onSelect = useCallback(
-    (selected) => {
-      return centerOnStation(selected, map);
-    },
-    [map],
-  );
+import type { SearchProps } from "./SearchHeadless";
 
+/**
+ * This compoennt only define defult classNames for the Search component.
+ *
+ * Since the Search component could be used in different places (with or without toolbar),
+ * but the logic behind stays the same, we separate the logic and the styles in 2 components.
+ */
+function Search({
+  childrenContainerClassName,
+  className,
+  inputContainerClassName,
+  resultClassName,
+  resultsContainerClassName,
+  withResultsClassName,
+  ...props
+}: SearchProps) {
   return (
-    <StopsSearch
-      apikey={apikey}
-      onselect={onSelect}
-      url={stopsurl}
+    <SearchHeadless
+      childrenContainerClassName={twMerge(
+        "max-h-[300px] rounded-b-2xl bg-white shadow overflow-hidden",
+        childrenContainerClassName,
+      )}
+      className={twMerge(
+        "border-grey @container m-0 h-[48px] gap-2 rounded-2xl border p-2 text-base",
+        className,
+      )}
+      inputContainerClassName={twMerge("border-none", inputContainerClassName)}
+      resultClassName={twMerge(
+        "text-base  **:hover:cursor-pointer p-2",
+        resultClassName,
+      )}
+      resultsContainerClassName={twMerge(
+        "min-h-[100px] max-h-[200px] border border-t-0",
+        resultsContainerClassName,
+      )}
+      withResultsClassName={twMerge(
+        "text-base !rounded-b-none",
+        withResultsClassName,
+      )}
       {...props}
-    />
+    ></SearchHeadless>
   );
 }
 export default memo(Search);

package/src/Search/SearchBase.tsx

@@ -0,0 +1,169 @@
+import { memo } from "preact/compat";
+import { useCallback, useMemo, useRef, useState } from "preact/hooks";
+
+import InputSearch from "../ui/InputSearch";
+import useI18n from "../utils/hooks/useI18n";
+
+import type { TargetedInputEvent } from "preact";
+import type { ReactElement } from "preact/compat";
+
+import type { IconButtonProps } from "../ui/IconButton/IconButton";
+import type { InputProps } from "../ui/Input/Input";
+import type { InputSearchProps } from "../ui/InputSearch/InputSearch";
+
+export type SearchBaseProps = {
+  cancelButtonProps?: IconButtonProps;
+  childrenContainerClassName?: string;
+  inputProps?: InputProps;
+  withResultsClassName?: string;
+} & InputSearchProps &
+  Pick<
+    Partial<SearchResultsProps<unknown>>,
+    "resultClassName" | "resultsClassName" | "resultsContainerClassName"
+  >;
+
+import { cloneElement, createContext, toChildArray } from "preact";
+import { twMerge } from "tailwind-merge";
+
+import type { SearchResultsProps } from "../SearchResults/SearchResults";
+
+export interface SearchContextType {
+  open: boolean;
+  query: string;
+  selectedQuery: string;
+  setOpen: (open: boolean) => void;
+  setQuery: (query: string) => void;
+  setResults: (id: string, results: unknown[]) => void;
+  setSelectedQuery: (query: string) => void;
+}
+
+export const SearchContext = createContext<null | SearchContextType>({
+  open: false,
+  query: "",
+  selectedQuery: "",
+  setOpen: () => {},
+  setQuery: () => {},
+  setResults: () => {},
+  setSelectedQuery: () => {},
+});
+
+function SearchBase({
+  cancelButtonProps,
+  children,
+  childrenContainerClassName,
+  inputProps,
+  resultClassName,
+  resultsClassName,
+  resultsContainerClassName,
+  withResultsClassName,
+  ...props
+}: SearchBaseProps) {
+  const { t } = useI18n();
+  // We use a selectedQuery state to avoid making a new request when we select a result.
+  const [selectedQuery, setSelectedQuery] = useState("");
+  const [query, setQuery] = useState("");
+  const [showResults, setShowResults] = useState(false);
+  const [open, setOpen] = useState(false);
+  const resultsBySearchRef = useRef<Record<string, unknown[]>>({});
+
+  const setResults = useCallback(
+    (id: string, results: unknown[]) => {
+      resultsBySearchRef.current[id] = results;
+      setShowResults(
+        open &&
+          Object.values(resultsBySearchRef.current).some((r) => {
+            return r.length > 0;
+          }),
+      );
+    },
+    [open],
+  );
+
+  const value = useMemo(() => {
+    return {
+      open,
+      query,
+      selectedQuery,
+      setOpen,
+      setQuery,
+      setResults: setResults,
+      setSelectedQuery,
+    };
+  }, [open, query, selectedQuery, setResults]);
+
+  const inputPropss: InputProps = useMemo(() => {
+    return {
+      placeholder: t("search_placeholder"),
+      ...(inputProps || {}),
+      onChange: (evt: TargetedInputEvent<HTMLInputElement>) => {
+        setQuery((evt.target as HTMLInputElement).value);
+        setSelectedQuery("");
+        setOpen(true);
+      },
+      onFocus: () => {
+        setOpen(true);
+      },
+      value: selectedQuery || query,
+    };
+  }, [query, selectedQuery, t, inputProps]);
+
+  const cancelButtonPropss: IconButtonProps = useMemo(() => {
+    return {
+      ...(cancelButtonProps || {}),
+      onClick: () => {
+        setSelectedQuery("");
+        setQuery("");
+        setOpen(false);
+      },
+    };
+  }, [cancelButtonProps]);
+
+  return (
+    <SearchContext.Provider value={value}>
+      <InputSearch
+        {...props}
+        cancelButtonProps={cancelButtonPropss}
+        inputProps={inputPropss}
+        withResultsClassName={showResults ? withResultsClassName : ""}
+      >
+        <div className={twMerge("flex flex-col", childrenContainerClassName)}>
+          {toChildArray(children)?.map((child: ReactElement) => {
+            return cloneElement(child, {
+              resultClassName,
+              resultsClassName,
+              resultsContainerClassName,
+            });
+          })}
+          {/*}          {showTrajectoriesResults && (
+            <>
+              <SearchResultsHeader>
+                {t("search_trajectories_results")}
+              </SearchResultsHeader>
+              <SearchResults
+                className={resultsContainerClassName}
+                resultsClassName={resultsClassName}
+                resultsContainerClassName={"grow"}
+                searchResponse={trajectories}
+              >
+                {trajectories.results.map((trajectory: RealtimeTrajectory) => {
+                  return (
+                    <SearchResult
+                      className={resultClassName}
+                      key={trajectory.properties.route_identifier}
+                    >
+                      <SearchTrajectoriesResult
+                        onSelect={onSelectTrajectory}
+                        trajectory={trajectory}
+                      />
+                    </SearchResult>
+                  );
+                })}
+              </SearchResults>
+            </>
+          )} */}
+        </div>
+      </InputSearch>
+    </SearchContext.Provider>
+  );
+}
+export default memo(SearchBase);

package/src/Search/SearchHeadless.tsx

@@ -0,0 +1,79 @@
+import { memo, useCallback } from "preact/compat";
+
+import SearchLinesResult from "../SearchLinesResult";
+import SearchLinesResults from "../SearchLinesResults";
+import SearchStopsResult from "../SearchStopsResult";
+import SearchStopsResults from "../SearchStopsResults";
+import SearchTrainsResult from "../SearchTrainsResult";
+import SearchTrainsResults from "../SearchTrainsResults";
+import useFit from "../utils/hooks/useFit";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import { SearchBase } from ".";
+
+import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
+
+import type { IconButtonProps } from "../ui/IconButton/IconButton";
+import type { InputProps } from "../ui/Input/Input";
+import type { LnpLineInfo } from "../utils/hooks/useLnp";
+import type { StopsFeature } from "../utils/hooks/useSearchStops";
+
+import type { SearchBaseProps } from "./SearchBase";
+
+export type SearchProps = {
+  cancelButtonProps?: IconButtonProps;
+  childrenContainerClassName?: string;
+  inputProps?: InputProps;
+  resultClassName?: string;
+  resultsClassName?: string;
+  resultsContainerClassName?: string;
+  withResultsClassName?: string;
+} & SearchBaseProps;
+
+/**
+ * The search logic. To modifiy default classNames look the Search class.
+ */
+function SearchHeadless({ ...props }: SearchProps) {
+  const { setLinesIds, setStationId, setTrainId, tenant } = useMapContext();
+  const fit = useFit();
+
+  const onSelectStop = useCallback(
+    (stop: StopsFeature) => {
+      setStationId(stop.properties.uid);
+      // It means that the station wil have informations
+      fit.current(stop, !!tenant);
+    },
+    [fit, setStationId, tenant],
+  );
+
+  const onSelectLine = useCallback(
+    (line: LnpLineInfo) => {
+      setLinesIds([line.external_id]);
+      fit.current(line, true);
+    },
+    [fit, setLinesIds],
+  );
+
+  const onSelectTrain = useCallback(
+    (match: RealtimeRouteIdentifierMatch) => {
+      setTrainId(match.trains[0].train_id);
+      fit.current(match, true);
+    },
+    [fit, setTrainId],
+  );
+
+  return (
+    <SearchBase {...props}>
+      <SearchStopsResults>
+        <SearchStopsResult onSelectItem={onSelectStop} />
+      </SearchStopsResults>
+      <SearchLinesResults>
+        <SearchLinesResult onSelectItem={onSelectLine} />
+      </SearchLinesResults>
+      <SearchTrainsResults>
+        <SearchTrainsResult onSelectItem={onSelectTrain} />
+      </SearchTrainsResults>
+    </SearchBase>
+  );
+}
+export default memo(SearchHeadless);

package/src/Search/index.tsx

@@ -1 +1,3 @@
 export { default } from "../RvfSearch";
+export { default as SearchBase } from "./SearchBase";
+export { default as SearchHeadless } from "./SearchHeadless";

package/src/SearchLinesResult/SearchLinesResult.tsx

@@ -0,0 +1,43 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import RouteIcon from "../RouteIcon";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
+
+import type { LnpLineInfo } from "../utils/hooks/useLnp";
+
+export type SearchLinesResultProps = {
+  className?: string;
+  item?: LnpLineInfo;
+  onSelectItem?: (line: LnpLineInfo) => void;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function SearchLinesResult({
+  className,
+  item,
+  onSelectItem,
+  ...props
+}: SearchLinesResultProps) {
+  const { linesNetworkPlanLayer } = useMapContext();
+  return (
+    <button
+      {...props}
+      className={twMerge(
+        "flex w-full cursor-pointer items-center gap-3 text-left",
+        className,
+      )}
+      onClick={() => {
+        linesNetworkPlanLayer?.setVisible(true);
+        onSelectItem?.(item);
+      }}
+    >
+      <RouteIcon lineInfo={item}></RouteIcon>
+      <div className="grow">{item?.long_name || item?.short_name}</div>
+    </button>
+  );
+}
+
+export default memo(SearchLinesResult);

package/src/SearchLinesResult/index.tsx

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