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

package/src/RouteScheduleHeader/index.tsx

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

package/src/RouteStop/RouteStop.tsx

@@ -1,108 +0,0 @@
-import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import DebugStop from "../DebugStop/DebugStop";
-import RouteStopDelay from "../RouteStopDelay";
-import RouteStopProgress from "../RouteStopProgress";
-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 {
-  RealtimeStop,
-  RealtimeStopSequence,
-} from "mobility-toolbox-js/types";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type RouteScheduleStopProps = {
-  classNameGreyOut?: string;
-  index?: number;
-  invertColor?: boolean;
-  stop?: {
-    platform?: string;
-  } & RealtimeStop;
-  stopSequence: RealtimeStopSequence;
-} & HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
-
-function RouteStop({
-  children,
-  className,
-  classNameGreyOut = "text-gray-600",
-  index,
-  invertColor = false,
-  stop,
-  stopSequence,
-  ...props
-}: RouteScheduleStopProps) {
-  const { map } = useMapContext();
-  const { stopUID } = stop;
-  const [status, setStatus] = useState(getStopStatus(stopSequence, index));
-  const station = useRealtimeStation(stopUID);
-
-  useEffect(() => {
-    let interval = null;
-    setStatus(getStopStatus(stopSequence, index));
-
-    // To see the progress bar we have to update the status of the  vehicle until we get the new stopSeqeunce.
-    if (status.isInBetween) {
-      interval = setInterval(() => {
-        setStatus(getStopStatus(stopSequence, index));
-      }, 1000);
-    }
-    return () => {
-      clearInterval(interval);
-    };
-  }, [index, status.isInBetween, stopSequence]);
-
-  const routeStopState = useMemo(() => {
-    return { index, invertColor, station, status, stop, stopSequence };
-  }, [stop, status, index, invertColor, station, stopSequence]);
-
-  let colorScheme = status.isPassed || status.isLeft ? classNameGreyOut : "";
-
-  if (invertColor) {
-    colorScheme =
-      status.isPassed || status.isLeft || status.isBoarding
-        ? ""
-        : classNameGreyOut;
-  }
-
-  return (
-    <RouteStopContext.Provider value={routeStopState}>
-      <button
-        // max-h-[58px] because the svg showing the progress is 58px height.
-        className={twMerge(
-          `flex max-h-[58px] w-full scroll-mt-[50px] items-stretch rounded text-left hover:bg-slate-100 ${colorScheme}`,
-          className,
-        )}
-        data-station-passed={status.isPassed} // Use for auto scroll
-        onClick={() => {
-          if (stop.coordinate) {
-            map.getView().animate({
-              center: [stop.coordinate[0], stop.coordinate[1]],
-              zoom: map.getView().getZoom(),
-            });
-          }
-        }}
-        type="button"
-        {...props}
-      >
-        {children || (
-          <>
-            <RouteStopTime className="ml-4 flex w-10 shrink-0 flex-col justify-center text-xs" />
-            <RouteStopDelay className="flex w-8 shrink-0 flex-col justify-center text-[0.6rem]" />
-            <RouteStopProgress className="relative flex w-8 shrink-0 items-center" />
-            <RouteStopStation className="flex grow items-center justify-center pr-2 text-sm font-medium" />
-          </>
-        )}
-      </button>
-      <DebugStop />
-    </RouteStopContext.Provider>
-  );
-}
-export default memo(RouteStop);

package/src/RouteStop/index.tsx

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

package/src/RouteStopDelay/RouteStopDelay.tsx

@@ -1,37 +0,0 @@
-import { memo } from "preact/compat";
-
-import getDelayColor from "../utils/getDelayColor";
-import getDelayString from "../utils/getDelayString";
-import useRouteStop from "../utils/hooks/useRouteStop";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteStopDelayProps = JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RouteStopDelay(props: RouteStopDelayProps) {
-  const { status, stop } = useRouteStop();
-  const { arrivalDelay, departureDelay } = stop;
-
-  const hideDelay =
-    status.isNotRealtime ||
-    status.isCancelled ||
-    status.isNotStop ||
-    status.isPassed;
-
-  return (
-    <div {...props}>
-      {hideDelay || arrivalDelay === null || status.isFirst ? null : (
-        <span style={{ color: getDelayColor(arrivalDelay) }}>
-          {`+${getDelayString(arrivalDelay)}`}
-        </span>
-      )}
-      {hideDelay || departureDelay === null || status.isLast ? null : (
-        <span style={{ color: getDelayColor(arrivalDelay) }}>
-          {`+${getDelayString(departureDelay)}`}
-        </span>
-      )}
-    </div>
-  );
-}
-export default memo(RouteStopDelay);

package/src/RouteStopDelay/index.tsx

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

package/src/RouteStopName/RouteStopName.tsx

@@ -1,24 +0,0 @@
-import { memo } from "preact/compat";
-
-import RouteStopPlatform from "../RouteStopPlatform";
-import useRouteStop from "../utils/hooks/useRouteStop";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteStopNameProps = JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RouteStopName({ children, ...props }: RouteStopNameProps) {
-  const { stop } = useRouteStop();
-  const { stationName } = stop || {};
-  return (
-    <div {...props}>
-      {stationName}
-      <br />
-      <RouteStopPlatform className="rounded-sm bg-slate-100 px-0.5 py-px text-xs group-hover:bg-slate-50" />
-      {children}
-    </div>
-  );
-}
-
-export default memo(RouteStopName);

package/src/RouteStopName/index.tsx

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

package/src/RouteStopPlatform/RouteStopPlatform.tsx

@@ -1,27 +0,0 @@
-import { memo } from "preact/compat";
-
-import useI18n from "../utils/hooks/useI18n";
-import useRouteStop from "../utils/hooks/useRouteStop";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteStopPlatformProps = JSX.HTMLAttributes<HTMLSpanElement> &
-  PreactDOMAttributes;
-
-function RouteStopPlatform({ ...props }: RouteStopPlatformProps) {
-  const { stop, stopSequence } = useRouteStop();
-  const { type } = stopSequence;
-  const { t } = useI18n();
-  const { platform } = stop || {};
-  if (!platform) {
-    return null;
-  }
-  const translated = t(`platform_${type || "rail"}`);
-  return (
-    <span {...props}>
-      {translated || t(`platform_rail`)} {platform}
-    </span>
-  );
-}
-
-export default memo(RouteStopPlatform);

package/src/RouteStopPlatform/index.tsx

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

package/src/RouteStopProgress/RouteStopProgress.tsx

@@ -1,100 +0,0 @@
-import { memo } from "preact/compat";
-
-import getMainColorForVehicle from "../utils/getMainColorForVehicle";
-import useRouteStop from "../utils/hooks/useRouteStop";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type RouteStopProgressProps = {
-  svgProps?: HTMLAttributes<SVGElement> & PreactDOMAttributes;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-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 lineColor = getMainColorForVehicle(stopSequence);
-
-  let colorScheme = isPassed ? greyColor : lineColor;
-  let invertColorScheme = isPassed ? lineColor : greyColor;
-  let progressDoneColor = greyColor;
-
-  if (invertColor) {
-    colorScheme = isPassed ? lineColor : greyColor;
-    invertColorScheme = isPassed ? greyColor : lineColor;
-    progressDoneColor = lineColor;
-  }
-
-  const circleColor =
-    !isPassed && (isLeft || isBoarding) ? invertColorScheme : colorScheme;
-
-  return (
-    <div {...props}>
-      <svg
-        fill="none"
-        height="100%"
-        stroke={colorScheme}
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-        {...svgProps}
-      >
-        {/* Circle used to display a black border */}
-        <circle cx="50%" cy="50%" r="5" stroke="black" strokeWidth="6" />
-
-        {/* Black line used to display a black border */}
-        <line
-          stroke="black"
-          strokeWidth="6"
-          x1="50%"
-          x2="50%"
-          y1={y1}
-          y2={y2}
-        />
-
-        {/* Colored line (grey or color) */}
-        <line
-          stroke={progressDoneColor}
-          strokeWidth="4"
-          x1="50%"
-          x2="50%"
-          y1={y1}
-          y2={yDone}
-        />
-        <line
-          strokeWidth="4"
-          x1="50%"
-          x2="50%"
-          y1={`${progress - 2}%`} // we use -2 because sometimes it could be a small gap between the previousline and this one
-          y2={y2}
-        />
-
-        {/* Colored circle (grey or color) */}
-        <circle cx="50%" cy="50%" r="5" strokeWidth="4" />
-        <circle
-          className={isBoarding ? "animate-pulse" : ""}
-          cx="50%"
-          cy="50%"
-          r="5"
-          stroke={circleColor}
-          strokeWidth="4"
-        />
-
-        {/* white circle with black border */}
-        <circle
-          cx="50%"
-          cy="50%"
-          fill="white"
-          r="3"
-          stroke="black"
-          strokeWidth="1"
-        />
-      </svg>
-    </div>
-  );
-}
-export default memo(RouteStopProgress);

package/src/RouteStopProgress/index.tsx

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

package/src/RouteStopServices/RouteStopServices.tsx

@@ -1,26 +0,0 @@
-import { memo } from "preact/compat";
-
-import StationServices from "../StationServices";
-import useRouteStop from "../utils/hooks/useRouteStop";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteStopNameProps = JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RouteStopServices(props: RouteStopNameProps) {
-  const { station } = useRouteStop();
-  if (!station) {
-    return null;
-  }
-  return (
-    <StationServices
-      accessibility
-      station={station}
-      {...props}
-      iconProps={{ width: 20 }}
-    />
-  );
-}
-
-export default memo(RouteStopServices);

package/src/RouteStopServices/index.tsx

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

package/src/RouteStopStation/RouteStopStation.tsx

@@ -1,38 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import RouteStopName from "../RouteStopName";
-import RouteStopServices from "../RouteStopServices";
-import useRouteStop from "../utils/hooks/useRouteStop";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteStopStationProps = {
-  className?: string;
-  classNameCancelled?: string;
-} & JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RouteStopStation({
-  children,
-  className = "flex items-center gap-2 w-full",
-  classNameCancelled = "text-red-600 line-through",
-  ...props
-}: RouteStopStationProps) {
-  const { status } = useRouteStop();
-
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        status.isCancelled ? classNameCancelled : "",
-      )}
-    >
-      <RouteStopName className={"grow"} />
-      <RouteStopServices className="flex shrink-0 flex-wrap gap-1" />
-      {children}
-    </div>
-  );
-}
-export default memo(RouteStopStation);

package/src/RouteStopStation/index.tsx

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

package/src/RouteStopTime/RouteStopTime.tsx

@@ -1,35 +0,0 @@
-import { memo } from "preact/compat";
-
-import getHoursAndMinutes from "../utils/getHoursAndMinutes";
-import useRouteStop from "../utils/hooks/useRouteStop";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteStopTimeProps = JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RouteStopTime(props: RouteStopTimeProps) {
-  const { status, stop } = useRouteStop();
-  const { isCancelled, isFirst, isLast } = status;
-  const { aimedArrivalTime, aimedDepartureTime } = stop;
-
-  return (
-    <div {...props}>
-      <span
-        className={`${isCancelled ? "text-darkred line-through" : ""} ${
-          isFirst ? "hidden" : ""
-        }`}
-      >
-        {getHoursAndMinutes(aimedArrivalTime)}
-      </span>
-      <span
-        className={`${status.isCancelled ? "text-darkred line-through" : ""} ${
-          isLast ? "hidden" : ""
-        }`}
-      >
-        {getHoursAndMinutes(aimedDepartureTime)}
-      </span>
-    </div>
-  );
-}
-export default memo(RouteStopTime);

package/src/RouteStopTime/index.tsx

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

package/src/RvfButton/RvfButton.tsx

@@ -1,57 +0,0 @@
-import { memo, useMemo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import type { ButtonProps } from "../ui/Button/Button";
-
-export type RvfButtonProps = {
-  className?: string;
-  selected?: boolean;
-  theme?: "primary" | "secondary";
-} & ButtonProps;
-
-const baseClasses =
-  "flex  gap-2 text-[14px] @sm:text-[16px] @md:text-[18px] h-[32px] @sm:h-[36px] @md:h-[40px] px-[22px] @sm:px-[22.5px] @md:px-[27.5px] pt-[7px] pb-[5px] @sm:pt-[8px] @sm:pb-[6px] @md:pt-[8.5px] @md:pb-[6.5px]  items-center justify-left rounded-full border font-semibold text-button cursor-pointer disabled:cursor-default";
-
-export const themes = {
-  primary: {
-    classes:
-      "border-red bg-red text-white disabled:bg-lightgrey disabled:border-lightgrey hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred ",
-    selectedClasses: "bg-darkred border-darkred",
-  },
-  secondary: {
-    classes:
-      "border border-current bg-white text-grey hover:text-red disabled:text-lightgrey active:text-lightred",
-    selectedClasses: "text-red",
-  },
-};
-
-function RvfButton({
-  children,
-  className,
-  href,
-  selected = false,
-  theme = "secondary",
-  ...props
-}: RvfButtonProps) {
-  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}
-      </a>
-    );
-  }
-
-  return (
-    <button className={classes} {...props}>
-      {children}
-    </button>
-  );
-}
-
-export default memo(RvfButton);

package/src/RvfButton/index.tsx

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

package/src/RvfCheckbox/RvfCheckbox.tsx

@@ -1,31 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-// @ts-expect-error - required for htm to resolve the JSX pragma
-import ok from "../icons/Ok/ok-grey.svg";
-
-import type { InputHTMLAttributes } from "preact";
-
-export type RvfCheckboxProps = {
-  checkedIconUrl?: string;
-  className?: string;
-} & InputHTMLAttributes<HTMLInputElement>;
-
-function RvfCheckbox({ className, ...props }: RvfCheckboxProps) {
-  const checkedIconUrl = props.checkedIconUrl || ok;
-  return (
-    <input
-      className={twMerge(
-        `border-grey text-grey disabled:border-lightgrey box-border size-[20px] flex-none cursor-pointer appearance-none rounded border-2 bg-white bg-contain bg-center disabled:cursor-default ${className}`,
-      )}
-      style={{
-        backgroundImage:
-          props.checked && !props.disabled ? `url('${checkedIconUrl}')` : "",
-      }}
-      {...props}
-      type="checkbox"
-    />
-  );
-}
-
-export default memo(RvfCheckbox);

package/src/RvfCheckbox/index.tsx

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

package/src/RvfCopyright/RvfCopyright.tsx

@@ -1,36 +0,0 @@
-import Copyright from "../Copyright/Copyright";
-
-import type { CopyrightProps } from "../Copyright/Copyright";
-
-const format = (copyrights) => {
-  const newCopyrights = [];
-  let alreadyAGeopsLink = false;
-  copyrights.forEach((copyright) => {
-    if (/geops/i.test(copyright)) {
-      // Hack until all geOps tiles are the same
-      // Currently there is some geops.com or geops.ch links
-      if (!alreadyAGeopsLink) {
-        alreadyAGeopsLink = true;
-        newCopyrights.push(copyright);
-      }
-    } else if (!/(sbb|rvf)/i.test(copyright)) {
-      newCopyrights.push(copyright);
-    }
-  });
-
-  return newCopyrights
-    .sort((a, b) => {
-      return a < b ? -1 : 1;
-    })
-    .join("&nbsp;|&nbsp;");
-};
-
-const options = {
-  format,
-};
-
-function RvfCopyright(props: CopyrightProps) {
-  return <Copyright options={options} {...props} />;
-}
-
-export default RvfCopyright;

package/src/RvfCopyright/index.tsx

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

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -1,46 +0,0 @@
-import { memo } from "preact/compat";
-
-import FeatureDetails from "../FeatureDetails/FeatureDetails";
-
-import RvfSellingPointDetails from "./RvfSellingPointDetails";
-import RvfSharedMobilityDetails from "./RvfSharedMobilityDetail";
-
-import type { FeatureDetailsProps } from "../FeatureDetails/FeatureDetails";
-
-const getIsSharedMobility = (selectedFeature): boolean => {
-  if (
-    !!selectedFeature &&
-    (selectedFeature.get("station_id") ||
-      selectedFeature.get("vehicle_id") ||
-      selectedFeature.get("cluster_id"))
-  ) {
-    return true;
-  }
-};
-
-function RvfFeatureDetails({
-  feature,
-  featuresInfo,
-  layer,
-}: FeatureDetailsProps) {
-  const isSharedMobility = getIsSharedMobility(feature);
-  const isSellingPoint = !!feature?.get("tickets");
-
-  return (
-    <>
-      <FeatureDetails
-        feature={feature}
-        featuresInfo={featuresInfo}
-        layer={layer}
-      />
-      {(isSellingPoint || isSharedMobility) && (
-        <>
-          {isSellingPoint && <RvfSellingPointDetails feature={feature} />}
-          {isSharedMobility && <RvfSharedMobilityDetails feature={feature} />}
-        </>
-      )}
-    </>
-  );
-}
-
-export default memo(RvfFeatureDetails);