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

package/src/Search/Search.tsx

@@ -1,50 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import { SearchHeadless } from ".";
-
-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 (
-    <SearchHeadless
-      childrenContainerClassName={twMerge(
-        "max-h-[400px] rounded-b-2xl bg-white shadow overflow-hidden",
-        childrenContainerClassName,
-      )}
-      className={twMerge(
-        "border-grey @container m-0 h-[48px] rounded-2xl border text-base",
-        className,
-      )}
-      inputContainerClassName={twMerge("border-none", inputContainerClassName)}
-      resultClassName={twMerge(
-        "text-base  **:hover:cursor-pointer p-2",
-        resultClassName,
-      )}
-      resultsContainerClassName={twMerge(
-        "min-h-[50px] 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

@@ -1,187 +0,0 @@
-import { memo } from "preact/compat";
-import {
-  useCallback,
-  useEffect,
-  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 = {
-  autofocus?: boolean;
-  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({
-  autofocus,
-  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[]>>({});
-
-  // Autofocus the input
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (autofocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [autofocus]);
-
-  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"),
-      ref: inputRef,
-      ...(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

@@ -1,79 +0,0 @@
-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.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,3 +0,0 @@
-export { default } from "../RvfSearch";
-export { default as SearchBase } from "./SearchBase";
-export { default as SearchHeadless } from "./SearchHeadless";

package/src/SearchButton/SearchButton.tsx

@@ -1,33 +0,0 @@
-import { memo } from "preact/compat";
-import { useCallback } from "preact/hooks";
-
-import Search from "../icons/Search";
-import IconButton from "../ui/IconButton";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { IconButtonProps } from "../ui/IconButton/IconButton";
-
-export type SearchButtonProps = IconButtonProps;
-
-function SearchButton({ ...props }: SearchButtonProps) {
-  const { isSearchOpen, setIsSearchOpen } = useMapContext();
-  const { t } = useI18n();
-
-  const onClick = useCallback(() => {
-    setIsSearchOpen(!isSearchOpen);
-  }, [isSearchOpen, setIsSearchOpen]);
-
-  return (
-    <IconButton
-      title={t("search_menu_title")}
-      {...props}
-      onClick={onClick}
-      selected={isSearchOpen}
-    >
-      <Search />
-    </IconButton>
-  );
-}
-
-export default memo(SearchButton);

package/src/SearchButton/index.tsx

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

package/src/SearchLinesResult/SearchLinesResult.tsx

@@ -1,43 +0,0 @@
-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

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

package/src/SearchLinesResults/SearchLinesResults.tsx

@@ -1,106 +0,0 @@
-import { cloneElement, toChildArray } from "preact";
-import { memo } from "preact/compat";
-import { useCallback, useContext, useMemo } from "preact/hooks";
-
-import { SearchContext } from "../Search/SearchBase";
-import SearchResult from "../SearchResult";
-import SearchResults from "../SearchResults";
-import SearchResultsHeader from "../SearchResultsHeader";
-import useI18n from "../utils/hooks/useI18n";
-import useSearchLines from "../utils/hooks/useSearchLines";
-
-import type { ReactElement } from "preact/compat";
-
-import type {
-  SearchResultsChildProps,
-  SearchResultsProps,
-} from "../SearchResults/SearchResults";
-import type { LnpLineInfo } from "../utils/hooks/useLnp";
-
-const defaultSort = (a: LnpLineInfo, b: LnpLineInfo) => {
-  if (a.long_name === b.long_name) {
-    return a.long_name < b.long_name ? 1 : -1;
-  }
-  return a.short_name < b.short_name ? 1 : -1;
-};
-
-function SearchLinesResults({
-  children,
-  filter,
-  resultClassName,
-  resultsClassName,
-  resultsContainerClassName,
-  sort = defaultSort,
-}: SearchResultsProps<LnpLineInfo>) {
-  const { open, query, setOpen, setSelectedQuery } = useContext(SearchContext);
-  const searchResponse = useSearchLines(query);
-
-  const { t } = useI18n();
-
-  const onSelectResult = useCallback(
-    (item: LnpLineInfo) => {
-      setSelectedQuery(item.short_name || item.long_name);
-      setOpen(false);
-    },
-    [setOpen, setSelectedQuery],
-  );
-
-  const results = useMemo(() => {
-    let rs = [...(searchResponse?.results || [])];
-
-    if (filter) {
-      rs = rs.filter(filter);
-    }
-
-    if (sort) {
-      rs = rs.sort(sort);
-    }
-    return rs;
-  }, [searchResponse, filter, sort]);
-
-  const searchResponseFiltered = useMemo(() => {
-    return {
-      ...searchResponse,
-      results,
-    };
-  }, [results, searchResponse]);
-
-  const showResults = useMemo(() => {
-    return open && !!results?.length;
-  }, [open, results]);
-
-  if (!showResults) {
-    return null;
-  }
-
-  return (
-    <>
-      <SearchResultsHeader>{t("search_lines_results")}</SearchResultsHeader>
-      <SearchResults
-        className={resultsContainerClassName}
-        resultsClassName={resultsClassName}
-        searchResponse={searchResponseFiltered}
-      >
-        {results.map((item: LnpLineInfo) => {
-          return (
-            <SearchResult className={resultClassName} key={item.short_name}>
-              {toChildArray(children).map(
-                (child: ReactElement<SearchResultsChildProps<LnpLineInfo>>) => {
-                  const onSelectItem = (itemm: LnpLineInfo, evt: Event) => {
-                    onSelectResult(itemm);
-                    child.props?.onSelectItem?.(itemm, evt);
-                  };
-                  return cloneElement(child, {
-                    item: item,
-                    onSelectItem,
-                  });
-                },
-              )}
-            </SearchResult>
-          );
-        })}
-      </SearchResults>
-    </>
-  );
-}
-export default memo(SearchLinesResults);

package/src/SearchLinesResults/index.tsx

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

package/src/SearchLnpStopsResult/SearchLnpStopsResult.tsx

@@ -1,42 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
-
-import type { LnpStopInfo } from "../utils/hooks/useLnp";
-
-export type SearchLinesResultProps = {
-  className?: string;
-  item?: LnpStopInfo;
-  onSelectItem?: (line: LnpStopInfo) => void;
-} & ButtonHTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
-
-function SearchLnpStopsResult({
-  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);
-      }}
-    >
-      <div className="size-6"></div>
-      <div className="grow">{item?.long_name || item?.short_name}</div>
-    </button>
-  );
-}
-
-export default memo(SearchLnpStopsResult);

package/src/SearchLnpStopsResult/index.tsx

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

package/src/SearchLnpStopsResults/SearchLnpStopsResults.tsx

@@ -1,106 +0,0 @@
-import { cloneElement, toChildArray } from "preact";
-import { memo } from "preact/compat";
-import { useCallback, useContext, useMemo } from "preact/hooks";
-
-import { SearchContext } from "../Search/SearchBase";
-import SearchResult from "../SearchResult";
-import SearchResults from "../SearchResults";
-import SearchResultsHeader from "../SearchResultsHeader";
-import useI18n from "../utils/hooks/useI18n";
-import useSearchLnpStops from "../utils/hooks/useSearchLnpStops";
-
-import type { ReactElement } from "preact/compat";
-
-import type {
-  SearchResultsChildProps,
-  SearchResultsProps,
-} from "../SearchResults/SearchResults";
-import type { LnpStopInfo } from "../utils/hooks/useLnp";
-
-const defaultSort = (a: LnpStopInfo, b: LnpStopInfo) => {
-  if (a.long_name === b.long_name) {
-    return a.long_name < b.long_name ? 1 : -1;
-  }
-  return a.short_name < b.short_name ? 1 : -1;
-};
-
-function SearchLnpStopsResults({
-  children,
-  filter,
-  resultClassName,
-  resultsClassName,
-  resultsContainerClassName,
-  sort = defaultSort,
-}: SearchResultsProps<LnpStopInfo>) {
-  const { open, query, setOpen, setSelectedQuery } = useContext(SearchContext);
-  const searchResponse = useSearchLnpStops(query);
-
-  const { t } = useI18n();
-
-  const onSelectResult = useCallback(
-    (item: LnpStopInfo) => {
-      setSelectedQuery(item.short_name || item.long_name);
-      setOpen(false);
-    },
-    [setOpen, setSelectedQuery],
-  );
-
-  const results = useMemo(() => {
-    let rs = [...(searchResponse?.results || [])];
-
-    if (filter) {
-      rs = rs.filter(filter);
-    }
-
-    if (sort) {
-      rs = rs.sort(sort);
-    }
-    return rs;
-  }, [searchResponse, filter, sort]);
-
-  const searchResponseFiltered = useMemo(() => {
-    return {
-      ...searchResponse,
-      results,
-    };
-  }, [results, searchResponse]);
-
-  const showResults = useMemo(() => {
-    return open && !!results?.length;
-  }, [open, results]);
-
-  if (!showResults) {
-    return null;
-  }
-
-  return (
-    <>
-      <SearchResultsHeader>{t("search_stops_results")}</SearchResultsHeader>
-      <SearchResults
-        className={resultsContainerClassName}
-        resultsClassName={resultsClassName}
-        searchResponse={searchResponseFiltered}
-      >
-        {results.map((item: LnpStopInfo) => {
-          return (
-            <SearchResult className={resultClassName} key={item.short_name}>
-              {toChildArray(children).map(
-                (child: ReactElement<SearchResultsChildProps<LnpStopInfo>>) => {
-                  const onSelectItem = (itemm: LnpStopInfo, evt: Event) => {
-                    onSelectResult(itemm);
-                    child.props?.onSelectItem?.(itemm, evt);
-                  };
-                  return cloneElement(child, {
-                    item: item,
-                    onSelectItem,
-                  });
-                },
-              )}
-            </SearchResult>
-          );
-        })}
-      </SearchResults>
-    </>
-  );
-}
-export default memo(SearchLnpStopsResults);

package/src/SearchLnpStopsResults/index.tsx

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

package/src/SearchResult/SearchResult.tsx

@@ -1,25 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type SearchResultProps = {
-  className?: string;
-} & HTMLAttributes<HTMLLIElement> &
-  PreactDOMAttributes;
-
-function SearchResult({ children, className, ...props }: SearchResultProps) {
-  return (
-    <li
-      {...props}
-      className={twMerge(
-        "border-b border-dashed border-slate-300 p-3 last:border-0",
-        className,
-      )}
-    >
-      {children}
-    </li>
-  );
-}
-
-export default memo(SearchResult);