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

package/src/ui/Button/Button.tsx

@@ -1,64 +0,0 @@
-import { memo, useMemo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  PreactDOMAttributes,
-} from "preact";
-
-export type ButtonProps = {
-  className?: string;
-  selected?: boolean;
-  theme?: "primary" | "secondary";
-} & AnchorHTMLAttributes &
-  ButtonHTMLAttributes &
-  PreactDOMAttributes;
-
-const baseClasses =
-  "flex gap-2 items-center px-4 py-2 rounded-2xl border hover:border-black hover:not-disabled:cursor-pointer";
-
-export const themes = {
-  primary: {
-    classes: "",
-    selectedClasses: "",
-  },
-  secondary: {
-    classes: "",
-    selectedClasses: "",
-  },
-};
-
-function Button({
-  children,
-  className,
-  href,
-  selected = false,
-  theme = "secondary",
-  ...props
-}: ButtonProps) {
-  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(Button);

package/src/ui/Button/index.tsx

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

package/src/ui/Checkbox/Checkbox.tsx

@@ -1,32 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import ok from "../../icons/Ok/ok-grey.svg";
-
-import type { InputHTMLAttributes } from "preact";
-
-export type CheckboxProps = {
-  checkedIconUrl?: string;
-  className?: string;
-} & InputHTMLAttributes;
-
-function Checkbox({ className, ...props }: CheckboxProps) {
-  const checkedIconUrl = props.checkedIconUrl || ok;
-  return (
-    <input
-      checked={props.checked}
-      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(Checkbox);

package/src/ui/Checkbox/index.tsx

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

package/src/ui/IconButton/IconButton.tsx

@@ -1,64 +0,0 @@
-import { memo, useMemo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  PreactDOMAttributes,
-} from "preact";
-
-export type IconButtonProps = {
-  className?: string;
-  selected?: boolean;
-  theme?: "primary" | "secondary";
-} & AnchorHTMLAttributes &
-  ButtonHTMLAttributes &
-  PreactDOMAttributes;
-
-const baseClasses =
-  "flex size-9 items-center justify-center rounded-full bg-white p-1.5 shadow-lg hover:not-disabled:cursor-pointer";
-
-export const themes = {
-  primary: {
-    classes: "",
-    selectedClasses: "",
-  },
-  secondary: {
-    classes: "",
-    selectedClasses: "",
-  },
-};
-
-function IconButton({
-  children,
-  className,
-  href,
-  selected = false,
-  theme = "secondary",
-  ...props
-}: IconButtonProps) {
-  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(IconButton);

package/src/ui/IconButton/index.tsx

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

package/src/ui/Input/Input.tsx

@@ -1,24 +0,0 @@
-import { forwardRef } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import type { InputHTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type InputProps = {
-  className?: string;
-  focusOnFirstRender?: boolean;
-} & InputHTMLAttributes &
-  PreactDOMAttributes;
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <input
-        ref={ref}
-        {...props}
-        className={twMerge("p-2 text-sm read-only:text-gray-400", className)}
-      />
-    );
-  },
-);
-
-export default Input;

package/src/ui/Input/index.tsx

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

package/src/ui/InputCopy/InputCopy.tsx

@@ -1,97 +0,0 @@
-import { useId, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import Copy from "../../icons/Copy";
-import useI18n from "../../utils/hooks/useI18n";
-import IconButton from "../IconButton";
-import Input from "../Input";
-
-import type {
-  HTMLAttributes,
-  InputHTMLAttributes,
-  PreactDOMAttributes,
-} from "preact";
-
-export type InputCopyProps = {
-  containerProps?: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes;
-  tooltipProps?: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes;
-} & InputHTMLAttributes &
-  PreactDOMAttributes;
-
-const emptyProps = {}; // avoid re-rendering
-
-function InputCopy({
-  containerProps = emptyProps,
-  tooltipProps = emptyProps,
-  ...props
-}: InputCopyProps) {
-  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
-      ref={(elt) => {
-        setNode(elt);
-      }}
-      {...containerProps}
-      className={twMerge(
-        "relative flex h-7 items-center",
-        containerProps?.className as string,
-      )}
-    >
-      <Input
-        id={inputId}
-        onFocus={handleInputFocus}
-        readOnly
-        type="text"
-        {...props}
-        className={twMerge(
-          "h-7 flex-1 border border-r-0",
-          props?.className as string,
-        )}
-      />
-      <IconButton
-        className="size-7 rounded-none border p-2 shadow-none"
-        onClick={handleCopyClick}
-      >
-        <Copy size={20} />
-      </IconButton>
-      <div
-        {...tooltipProps}
-        className={twMerge(
-          `fixed hidden rounded bg-gray-600 p-1 text-sm text-white`,
-          isTooptipShowed && "block",
-          tooltipProps?.className as string,
-        )}
-        style={{
-          left: positionTooltip?.left - 30,
-          top: positionTooltip?.top - 30,
-        }}
-      >
-        {t("input_copy_success")}!
-      </div>
-    </div>
-  );
-}
-
-export default InputCopy;

package/src/ui/InputCopy/index.tsx

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

package/src/ui/InputSearch/InputSearch.tsx

@@ -1,106 +0,0 @@
-import { memo } from "preact/compat";
-import { useRef } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import Cancel from "../../icons/Cancel";
-import Search from "../../icons/Search";
-import useI18n from "../../utils/hooks/useI18n";
-import IconButton from "../IconButton";
-import Input from "../Input";
-
-import type { PreactDOMAttributes } from "preact";
-import type { HTMLAttributes, ReactNode } from "preact/compat";
-
-import type { IconButtonProps } from "../IconButton/IconButton";
-import type { InputProps } from "../Input/Input";
-
-export type InputSearchProps = {
-  cancelButtonClassName?: string;
-  cancelButtonProps?: IconButtonProps;
-  cancelIcon?: ReactNode;
-  className?: string;
-  inputClassName?: string;
-  inputContainerClassName?: string;
-  inputProps?: InputProps;
-  resultClassName?: string;
-  resultsClassName?: string;
-  resultsContainerClassName?: string;
-  searchIcon?: ReactNode;
-  searchIconContainerClassName?: string;
-  withResultsClassName?: string;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-/**
- * Rich search input component.
- */
-function InputSearch({
-  cancelButtonClassName,
-  cancelButtonProps,
-  cancelIcon,
-  children,
-  className,
-  inputClassName,
-  inputContainerClassName,
-  inputProps,
-  searchIcon,
-  searchIconContainerClassName,
-  withResultsClassName,
-}: InputSearchProps) {
-  const { t } = useI18n();
-  const myRef = useRef<HTMLDivElement>();
-
-  return (
-    <>
-      <div
-        className={twMerge(
-          "flex h-12 items-center gap-1 rounded-md bg-white p-3 shadow",
-          className,
-          withResultsClassName,
-        )}
-        ref={myRef}
-      >
-        <div
-          className={twMerge(
-            "text-grey flex items-center",
-            searchIconContainerClassName,
-          )}
-        >
-          {searchIcon || <Search />}
-        </div>
-        <div
-          className={twMerge(
-            "@container/inputsearch relative flex grow items-center gap-2 border-b-2 border-solid",
-            inputContainerClassName,
-          )}
-        >
-          <Input
-            autoComplete="off"
-            className={twMerge(
-              "h-8 w-1 grow overflow-hidden text-ellipsis placeholder:text-zinc-400",
-              inputClassName,
-              inputProps?.value ? "pr-4" : "",
-            )}
-            type="text"
-            {...(inputProps || {})}
-          />
-          {!!inputProps.value && (
-            <IconButton
-              className={twMerge(
-                "absolute right-0 flex h-full w-6 items-center rounded-none border-none bg-transparent p-0 px-1 shadow-none",
-                cancelButtonClassName,
-              )}
-              title={t("search_input_cancel")}
-              {...(cancelButtonProps || {})}
-            >
-              {cancelIcon || <Cancel />}
-            </IconButton>
-          )}
-        </div>
-      </div>
-      {children}
-    </>
-  );
-}
-
-export default memo(InputSearch);

package/src/ui/InputSearch/index.tsx

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

package/src/ui/Link/Link.tsx

@@ -1,49 +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 LinkProps = {
-  className?: string;
-  theme?: "primary" | "secondary";
-} & AnchorHTMLAttributes<HTMLAnchorElement> &
-  PreactDOMAttributes;
-
-const baseClasses =
-  "leading-[1.1] underline text-[14px] @sm/main:text-[16px] @md/main:text-[18px] font-semibold";
-
-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 Link({
-  children,
-  className,
-  theme = "secondary",
-  ...props
-}: LinkProps) {
-  const classes = useMemo(() => {
-    return twMerge(
-      `${baseClasses} ${themes[theme].classes}  ${className || ""}`,
-    );
-  }, [className, theme]);
-
-  return (
-    <a className={classes} rel="noreferrer" target="_blank" {...props}>
-      <span>{children}</span>
-      <ArrowUpRight className="inline shrink-0" />
-    </a>
-  );
-}
-
-export default memo(Link);

package/src/ui/Link/index.tsx

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

package/src/ui/Select/Select.tsx

@@ -1,24 +0,0 @@
-import ArrowDown from "../../icons/ArrowDown";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type SelectProps = {
-  className?: string;
-} & HTMLAttributes<HTMLSelectElement> &
-  PreactDOMAttributes;
-
-function Select({ children, className, onChange }: SelectProps) {
-  return (
-    <div className="text-grey relative flex items-center">
-      <select
-        className={`h-[32px] cursor-pointer appearance-none rounded-[12px] border border-current bg-white px-[13px] text-[16px] leading-[22px] disabled:cursor-default @sm/main:h-[36px] @md/main:h-[40px] ${className}`}
-        onChange={onChange}
-      >
-        {children}
-      </select>
-      <ArrowDown className="pointer-events-none absolute right-[8px]" />
-    </div>
-  );
-}
-
-export default Select;

package/src/ui/Select/index.tsx

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

package/src/utils/MobilityEvent.ts

@@ -1,22 +0,0 @@
-export type MobilityEventType =
-  | "mwc:attribute"
-  | "mwc:permalink"
-  | "mwc:selectedfeature"
-  | "mwc:stopssearchselect"
-  | string;
-
-class MobilityEvent<T> extends Event {
-  data: T;
-
-  constructor(name: MobilityEventType, data: T, options: EventInit = {}) {
-    super(name, { ...options, composed: true });
-    this.data = data;
-  }
-
-  logImportantData() {
-    // eslint-disable-next-line no-console
-    console.log(this.data);
-  }
-}
-
-export default MobilityEvent;

package/src/utils/applyInitialLayerVisibility.ts

@@ -1,48 +0,0 @@
-import type { Group } from "ol/layer";
-import type BaseLayer from "ol/layer/Base";
-
-const applyInitialLayerVisibility = (
-  layersAttrValue: string,
-  layer: BaseLayer,
-) => {
-  const isPermalinkable = !!layer.get("name");
-  const hasLayersAttribute =
-    isPermalinkable &&
-    !!(layersAttrValue !== null && layersAttrValue !== undefined);
-
-  if (hasLayersAttribute) {
-    const names = layersAttrValue?.split(",") || [];
-    const name = layer.get("name");
-    const shouldBeVisible = names.includes(name);
-    if (layer.getVisible() !== shouldBeVisible) {
-      // If the layer is a group we apply the visibility to its sublayers,
-      // not the group itself. Group should not appear in permalink layers param
-      if ((layer as Group).getLayers) {
-        (layer as Group)
-          .getLayers()
-          .getArray()
-          .forEach((subLayer) => {
-            applyInitialLayerVisibility(layersAttrValue, subLayer);
-          });
-      } else {
-        layer.setVisible(shouldBeVisible);
-      }
-    }
-  }
-
-  // if the layer is a group we set it to false if all its sublayers are false
-  if ((layer as Group).getLayers) {
-    if (
-      layer.getVisible() &&
-      !(layer as Group)
-        .getLayers()
-        ?.getArray()
-        .find((l) => {
-          return l.getVisible();
-        })
-    ) {
-      layer.setVisible(false);
-    }
-  }
-};
-export default applyInitialLayerVisibility;

package/src/utils/centerOnVehicle.ts

@@ -1,58 +0,0 @@
-import { getVehiclePosition } from "mobility-toolbox-js/ol";
-import { linear } from "ol/easing";
-
-import type { RealtimeTrajectory } from "mobility-toolbox-js/types";
-import type { Map } from "ol";
-
-const centerOnVehicle = async (
-  vehicle: RealtimeTrajectory,
-  map: Map,
-  targetZoom = 0,
-  isOverlayOpen = true,
-) => {
-  if (!vehicle) {
-    return Promise.reject(new Error("No vehicle provided"));
-  }
-
-  const {
-    geometry,
-    properties: { coordinate },
-  } = vehicle;
-  const view = map.getView();
-  const zoom = targetZoom || view.getZoom();
-  const resolution = zoom > 0 ? view.getResolutionForZoom(zoom) : undefined;
-
-  let center = coordinate ? [...coordinate] : null;
-  if (!center && geometry) {
-    const { coord } = getVehiclePosition(Date.now(), vehicle, true);
-    center = coord ? [...coord] : null;
-  }
-  if (!center) {
-    return Promise.reject(new Error("No center found"));
-  }
-  if (isOverlayOpen) {
-    // Adjust center to take in account the opened overlay.
-    center[0] -= (320 / 2) * resolution; // shift right by 400px
-    // console.log(center);
-  }
-
-  // Shift of 150px to the left and 50px to the top.
-  view.cancelAnimations();
-
-  const promise = new Promise((resolve) => {
-    view.animate(
-      {
-        center,
-        duration: 1000,
-        easing: linear,
-        resolution,
-      },
-      (success) => {
-        resolve(success);
-      },
-    );
-  });
-  return promise;
-};
-
-export default centerOnVehicle;