@navigoo/map-components 1.0.2 → 1.0.4

package/src/components/DetourRouteSearch.tsx

@@ -1,15 +1,36 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, ReactNode } from 'react';
 import { Place, Route } from '../lib/type';
 import { ApiClient } from '../lib/api';
-import styles from './styles.module.css';
 
 interface DetourRouteSearchProps {
   apiClient: ApiClient;
   setRoutes: (routes: Route[]) => void;
   setSelectedRouteIndex: (index: number) => void;
+  className?: string;
+  searchGroupClassName?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  resultsClassName?: string;
+  resultItemClassName?: string;
+  errorClassName?: string;
+  buttonClassName?: string;
+  disabledButtonClassName?: string;
 }
 
-const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRoutes, setSelectedRouteIndex }) => {
+const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({
+  apiClient,
+  setRoutes,
+  setSelectedRouteIndex,
+  className,
+  searchGroupClassName,
+  labelClassName,
+  inputClassName,
+  resultsClassName,
+  resultItemClassName,
+  errorClassName,
+  buttonClassName,
+  disabledButtonClassName,
+}) => {
   const [startQuery, setStartQuery] = useState('');
   const [detourQuery, setDetourQuery] = useState('');
   const [endQuery, setEndQuery] = useState('');
@@ -120,9 +141,9 @@ const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRou
   };
 
   return (
-    <div className={styles.routeSearchSection}>
-      <div className={styles.searchGroup}>
-        <label htmlFor="start" className={styles.label}>Départ</label>
+    <div className={className}>
+      <div className={searchGroupClassName}>
+        <label htmlFor="start" className={labelClassName}>Départ</label>
         <input
           id="start"
           type="text"
@@ -132,15 +153,15 @@ const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRou
             handleSearch(e.target.value, setStartResults);
           }}
           placeholder="Point de départ"
-          className={styles.searchInput}
+          className={inputClassName}
         />
         {startResults.length > 0 && (
-          <ul className={styles.searchResults}>
+          <ul className={resultsClassName}>
             {startResults.map((place) => (
               <li
                 key={place.id}
                 onClick={() => handleSelectStart(place)}
-                className={styles.searchResultItem}
+                className={resultItemClassName}
               >
                 {place.name}
               </li>
@@ -148,8 +169,8 @@ const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRou
           </ul>
         )}
       </div>
-      <div className={styles.searchGroup}>
-        <label htmlFor="detour" className={styles.label}>Détour</label>
+      <div className={searchGroupClassName}>
+        <label htmlFor="detour" className={labelClassName}>Détour</label>
         <input
           id="detour"
           type="text"
@@ -159,15 +180,15 @@ const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRou
             handleSearch(e.target.value, setDetourResults);
           }}
           placeholder="Point de détour"
-          className={styles.searchInput}
+          className={inputClassName}
         />
         {detourResults.length > 0 && (
-          <ul className={styles.searchResults}>
+          <ul className={resultsClassName}>
             {detourResults.map((place) => (
               <li
                 key={place.id}
                 onClick={() => handleSelectDetour(place)}
-                className={styles.searchResultItem}
+                className={resultItemClassName}
               >
                 {place.name}
               </li>
@@ -175,8 +196,8 @@ const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRou
           </ul>
         )}
       </div>
-      <div className={styles.searchGroup}>
-        <label htmlFor="end" className={styles.label}>Destination</label>
+      <div className={searchGroupClassName}>
+        <label htmlFor="end" className={labelClassName}>Destination</label>
         <input
           id="end"
           type="text"
@@ -186,15 +207,15 @@ const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRou
             handleSearch(e.target.value, setEndResults);
           }}
           placeholder="Point d'arrivée"
-          className={styles.searchInput}
+          className={inputClassName}
         />
         {endResults.length > 0 && (
-          <ul className={styles.searchResults}>
+          <ul className={resultsClassName}>
             {endResults.map((place) => (
               <li
                 key={place.id}
                 onClick={() => handleSelectEnd(place)}
-                className={styles.searchResultItem}
+                className={resultItemClassName}
               >
                 {place.name}
               </li>
@@ -202,11 +223,11 @@ const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRou
           </ul>
         )}
       </div>
-      {error && <div className={styles.error}>{error}</div>}
+      {error && <div className={errorClassName}>{error}</div>}
       <button
         onClick={handleCalculateRoute}
         disabled={loading || !selectedStart || !selectedDetour || !selectedEnd}
-        className={`${styles.searchButton} ${loading || !selectedStart || !selectedDetour || !selectedEnd ? styles.disabled : ''}`}
+        className={loading || !selectedStart || !selectedDetour || !selectedEnd ? disabledButtonClassName : buttonClassName}
       >
         {loading ? 'Calcul...' : 'Calculer l\'itinéraire'}
       </button>

package/src/components/MapView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { parse } from 'wellknown';
@@ -28,6 +28,77 @@ const MapView: React.FC<MapViewProps> = ({
   const routeLayerRef = useRef<L.LayerGroup | null>(null);
   const clickMarkerRef = useRef<L.Marker | null>(null);
   const routePolylinesRef = useRef<L.Polyline[]>([]);
+  const [ipLocation, setIpLocation] = useState<{ lat: number; lng: number } | null>(null);
+
+  // Fonction pour obtenir la localisation par IP
+  const getLocationByIP = async (): Promise<{ lat: number; lng: number } | null> => {
+    try {
+      const response = await fetch('https://ipapi.co/json/');
+      const data = await response.json();
+      
+      if (data.latitude && data.longitude) {
+        return {
+          lat: data.latitude,
+          lng: data.longitude
+        };
+      }
+      return null;
+    } catch (error) {
+      console.error('Erreur de géolocalisation par IP:', error);
+      return null;
+    }
+  };
+
+  // Fonction pour obtenir la localisation par le navigateur
+  const getBrowserLocation = (): Promise<{ lat: number; lng: number }> => {
+    return new Promise((resolve, reject) => {
+      if (!navigator.geolocation) {
+        reject(new Error('Géolocalisation non supportée'));
+        return;
+      }
+
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          resolve({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          });
+        },
+        (error) => {
+          reject(error);
+        },
+        {
+          enableHighAccuracy: true,
+          timeout: 10000,
+          maximumAge: 60000
+        }
+      );
+    });
+  };
+
+  // Effet pour la géolocalisation au démarrage
+  useEffect(() => {
+    const initializeLocation = async () => {
+      try {
+        // Essayer d'abord la géolocalisation du navigateur
+        const browserLocation = await getBrowserLocation();
+        setIpLocation(browserLocation);
+      } catch (browserError) {
+        console.log('Géolocalisation navigateur échouée, tentative par IP...', browserError);
+        
+        // Fallback sur la géolocalisation par IP
+        const ipLocation = await getLocationByIP();
+        if (ipLocation) {
+          setIpLocation(ipLocation);
+        } else {
+          // Fallback final sur une position par défaut (centre du monde)
+          setIpLocation({ lat: 20, lng: 0 });
+        }
+      }
+    };
+
+    initializeLocation();
+  }, []);
 
   const parseWKTLineString = (wkt: string): [number, number][] => {
     try {
@@ -52,18 +123,20 @@ const MapView: React.FC<MapViewProps> = ({
 
   useEffect(() => {
     if (mapContainerRef.current && !mapRef.current) {
+      // Position par défaut centrée sur le monde, sera mise à jour par la géolocalisation
+      const defaultCenter = ipLocation || { lat: 20, lng: 0 };
+      
       mapRef.current = L.map(mapContainerRef.current, {
-        center: [3.8480, 11.5021], // Centre par défaut : Yaoundé
+        center: [defaultCenter.lat, defaultCenter.lng],
         zoom: 12,
-        minZoom: 11,
-        maxZoom: 16,
-        maxBounds: [[3.7, 11.4], [4.0, 11.6]],
-        maxBoundsViscosity: 1.0,
+        minZoom: 2, // Zoom minimal réduit pour voir le monde entier
+        maxZoom: 18, // Zoom maximal augmenté pour plus de détails
+        // Suppression des limites de la carte
       });
 
       L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-        maxZoom: 16,
+        maxZoom: 18,
       }).addTo(mapRef.current);
 
       L.Icon.Default.mergeOptions({
@@ -91,13 +164,26 @@ const MapView: React.FC<MapViewProps> = ({
       });
     }
 
+    // Mettre à jour le centre de la carte quand la localisation par IP est disponible
+    if (mapRef.current && ipLocation && !userLocation && !searchedPlace && !routes) {
+      mapRef.current.setView([ipLocation.lat, ipLocation.lng], 12, { animate: true });
+      
+      // Ajouter un marqueur pour la position détectée
+      if (!markerRef.current) {
+        markerRef.current = L.marker([ipLocation.lat, ipLocation.lng])
+          .addTo(mapRef.current)
+          .bindPopup(`<b>Votre position approximative</b><br>Détectée par IP<br>Lat: ${ipLocation.lat.toFixed(6)}<br>Lng: ${ipLocation.lng.toFixed(6)}`)
+          .openPopup();
+      }
+    }
+
     return () => {
       if (mapRef.current) {
         mapRef.current.remove();
         mapRef.current = null;
       }
     };
-  }, [apiClient]);
+  }, [apiClient, ipLocation]);
 
   useEffect(() => {
     if (!mapRef.current) return;
@@ -190,10 +276,14 @@ const MapView: React.FC<MapViewProps> = ({
       centerOnPoint(searchedPlace.coordinates.lat, searchedPlace.coordinates.lng, searchedPlace.name);
     } else if (userLocation) {
       centerOnPoint(userLocation.latitude, userLocation.longitude, 'Votre position');
+    } else if (ipLocation) {
+      // Centrer sur la position IP si aucune autre position n'est disponible
+      centerOnPoint(ipLocation.lat, ipLocation.lng, 'Votre position approximative', 12);
     } else {
-      mapRef.current!.setView([3.8480, 11.5021], 12, { animate: true });
+      // Position de fallback centrée sur le monde
+      mapRef.current!.setView([20, 0], 2, { animate: true });
     }
-  }, [apiClient, userLocation, searchedPlace, routes, selectedRouteIndex, setSelectedRouteIndex]);
+  }, [apiClient, userLocation, searchedPlace, routes, selectedRouteIndex, setSelectedRouteIndex, ipLocation]);
 
   return <div className="w-full h-screen" ref={mapContainerRef} />;
 };

package/src/components/RouteSearch.tsx

@@ -1,15 +1,36 @@
 import React, { useState, useEffect } from 'react';
-import { Place, Route, GeolocationResult } from '../lib/type';
+import { Place, Route } from '../lib/type';
 import { ApiClient } from '../lib/api';
-import styles from './styles.module.css';
 
 interface RouteSearchProps {
   apiClient: ApiClient;
   setRoutes: (routes: Route[]) => void;
   setSelectedRouteIndex: (index: number) => void;
+  className?: string;
+  searchGroupClassName?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  resultsClassName?: string;
+  resultItemClassName?: string;
+  errorClassName?: string;
+  buttonClassName?: string;
+  disabledButtonClassName?: string;
 }
 
-const RouteSearch: React.FC<RouteSearchProps> = ({ apiClient, setRoutes, setSelectedRouteIndex }) => {
+const RouteSearch: React.FC<RouteSearchProps> = ({
+  apiClient,
+  setRoutes,
+  setSelectedRouteIndex,
+  className,
+  searchGroupClassName,
+  labelClassName,
+  inputClassName,
+  resultsClassName,
+  resultItemClassName,
+  errorClassName,
+  buttonClassName,
+  disabledButtonClassName,
+}) => {
   const [startQuery, setStartQuery] = useState('');
   const [endQuery, setEndQuery] = useState('');
   const [startResults, setStartResults] = useState<Place[]>([]);
@@ -93,9 +114,9 @@ const RouteSearch: React.FC<RouteSearchProps> = ({ apiClient, setRoutes, setSele
   };
 
   return (
-    <div className={styles.routeSearchSection}>
-      <div className={styles.searchGroup}>
-        <label htmlFor="start" className={styles.label}>Départ</label>
+    <div className={className}>
+      <div className={searchGroupClassName}>
+        <label htmlFor="start" className={labelClassName}>Départ</label>
         <input
           id="start"
           type="text"
@@ -105,15 +126,15 @@ const RouteSearch: React.FC<RouteSearchProps> = ({ apiClient, setRoutes, setSele
             handleSearch(e.target.value, setStartResults);
           }}
           placeholder="Point de départ"
-          className={styles.searchInput}
+          className={inputClassName}
         />
         {startResults.length > 0 && (
-          <ul className={styles.searchResults}>
+          <ul className={resultsClassName}>
             {startResults.map((place) => (
               <li
                 key={place.id}
                 onClick={() => handleSelectStart(place)}
-                className={styles.searchResultItem}
+                className={resultItemClassName}
               >
                 {place.name}
               </li>
@@ -121,8 +142,8 @@ const RouteSearch: React.FC<RouteSearchProps> = ({ apiClient, setRoutes, setSele
           </ul>
         )}
       </div>
-      <div className={styles.searchGroup}>
-        <label htmlFor="end" className={styles.label}>Destination</label>
+      <div className={searchGroupClassName}>
+        <label htmlFor="end" className={labelClassName}>Destination</label>
         <input
           id="end"
           type="text"
@@ -132,15 +153,15 @@ const RouteSearch: React.FC<RouteSearchProps> = ({ apiClient, setRoutes, setSele
             handleSearch(e.target.value, setEndResults);
           }}
           placeholder="Point d'arrivée"
-          className={styles.searchInput}
+          className={inputClassName}
         />
         {endResults.length > 0 && (
-          <ul className={styles.searchResults}>
+          <ul className={resultsClassName}>
             {endResults.map((place) => (
               <li
                 key={place.id}
                 onClick={() => handleSelectEnd(place)}
-                className={styles.searchResultItem}
+                className={resultItemClassName}
               >
                 {place.name}
               </li>
@@ -148,11 +169,11 @@ const RouteSearch: React.FC<RouteSearchProps> = ({ apiClient, setRoutes, setSele
           </ul>
         )}
       </div>
-      {error && <div className={styles.error}>{error}</div>}
+      {error && <div className={errorClassName}>{error}</div>}
       <button
         onClick={handleCalculateRoute}
         disabled={loading || !selectedStart || !selectedEnd}
-        className={`${styles.searchButton} ${loading || !selectedStart || !selectedEnd ? styles.disabled : ''}`}
+        className={loading || !selectedStart || !selectedEnd ? disabledButtonClassName : buttonClassName}
       >
         {loading ? 'Calcul...' : 'Calculer l\'itinéraire'}
       </button>

package/src/components/SearchBar.tsx

@@ -1,15 +1,30 @@
 import React, { useState } from 'react';
 import { Place, GeolocationResult } from '../lib/type';
 import { ApiClient } from '../lib/api';
-import styles from './styles.module.css';
 
 interface SearchBarProps {
   apiClient: ApiClient;
   setUserLocation: (location: GeolocationResult | null) => void;
   setSearchedPlace: (place: Place | null) => void;
+  className?: string;
+  inputClassName?: string;
+  buttonClassName?: string;
+  errorClassName?: string;
+  resultsClassName?: string;
+  resultItemClassName?: string;
 }
 
-const SearchBar: React.FC<SearchBarProps> = ({ apiClient, setUserLocation, setSearchedPlace }) => {
+const SearchBar: React.FC<SearchBarProps> = ({
+  apiClient,
+  setUserLocation,
+  setSearchedPlace,
+  className,
+  inputClassName,
+  buttonClassName,
+  errorClassName,
+  resultsClassName,
+  resultItemClassName,
+}) => {
   const [query, setQuery] = useState('');
   const [loading, setLoading] = useState(false);
   const [results, setResults] = useState<Place[]>([]);
@@ -47,26 +62,26 @@ const SearchBar: React.FC<SearchBarProps> = ({ apiClient, setUserLocation, setSe
   };
 
   return (
-    <div className={styles.searchSection}>
-      <div className={styles.searchGroup}>
-        <label htmlFor="search" className={styles.label}>Nom du lieu</label>
+    <div className={className}>
+      <div>
+        <label htmlFor="search">Nom du lieu</label>
         <input
           id="search"
           type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder="Rechercher un lieu"
-          className={styles.searchInput}
+          className={inputClassName}
         />
       </div>
-      {error && <div className={styles.error}>{error}</div>}
+      {error && <div className={errorClassName}>{error}</div>}
       {results.length > 0 && (
-        <ul className={styles.searchResults}>
+        <ul className={resultsClassName}>
           {results.map((place) => (
             <li
               key={place.id}
               onClick={() => handleSelect(place)}
-              className={styles.searchResultItem}
+              className={resultItemClassName}
             >
               {place.name}
             </li>
@@ -76,7 +91,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ apiClient, setUserLocation, setSe
       <button
         onClick={handleSearch}
         disabled={loading || !query}
-        className={`${styles.searchButton} ${loading || !query ? styles.disabled : ''}`}
+        className={buttonClassName}
       >
         {loading ? 'Recherche...' : 'Rechercher'}
       </button>

package/src/components/TransportOptions.tsx

@@ -1,7 +1,28 @@
 import React, { useState, useEffect } from 'react';
-import styles from './styles.module.css';
 
-const TransportOptions: React.FC = () => {
+interface TransportOptionsProps {
+  className?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  toggleButtonClassName?: string;
+  optionsClassName?: string;
+  optionClassName?: string;
+  selectedOptionClassName?: string;
+  iconClassName?: string;
+  nameClassName?: string;
+}
+
+const TransportOptions: React.FC<TransportOptionsProps> = ({
+  className,
+  headerClassName,
+  titleClassName,
+  toggleButtonClassName,
+  optionsClassName,
+  optionClassName,
+  selectedOptionClassName,
+  iconClassName,
+  nameClassName,
+}) => {
   const [showOptions, setShowOptions] = useState(false);
   const [selectedTransport, setSelectedTransport] = useState('taxi');
 
@@ -16,37 +37,34 @@ const TransportOptions: React.FC = () => {
   }, [selectedTransport]);
 
   return (
-    <div className={styles.optionsSection}>
-      <div className={styles.optionsHeader}>
-        <h3 className={styles.optionsTitle}>Moyen de transport</h3>
+    <div className={className}>
+      <div className={headerClassName}>
+        <h3 className={titleClassName}>Moyen de transport</h3>
         <button
           onClick={() => setShowOptions(!showOptions)}
-          className={styles.toggleButton}
+          className={toggleButtonClassName}
         >
           {showOptions ? 'Réduire' : 'Options'}
         </button>
       </div>
       {showOptions && (
-        <div className={styles.transportOptions}>
+        <div className={optionsClassName}>
           {transportOptions.map((option) => (
             <button
               key={option.id}
               onClick={() => setSelectedTransport(option.id)}
-              className={`${styles.transportOption} ${
-                selectedTransport === option.id ? styles.selected : ''
-              }`}
+              className={`${optionClassName} ${selectedTransport === option.id ? selectedOptionClassName : ''}`}
               style={{
                 backgroundColor: selectedTransport === option.id ? option.color : undefined,
               }}
             >
-              <span className={styles.transportIcon}>{option.icon}</span>
-              <span className={styles.transportName}>{option.name}</span>
+              <span className={iconClassName}>{option.icon}</span>
+              <span className={nameClassName}>{option.name}</span>
             </button>
           ))}
         </div>
       )}
     </div>
-    
   );
 };
 

package/src/components/TripType.tsx

@@ -1,7 +1,28 @@
 import React, { useState } from 'react';
-import styles from './styles.module.css';
 
-const TripType: React.FC = () => {
+interface TripTypeProps {
+  className?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  toggleButtonClassName?: string;
+  optionsClassName?: string;
+  optionClassName?: string;
+  selectedOptionClassName?: string;
+  iconClassName?: string;
+  nameClassName?: string;
+}
+
+const TripType: React.FC<TripTypeProps> = ({
+  className,
+  headerClassName,
+  titleClassName,
+  toggleButtonClassName,
+  optionsClassName,
+  optionClassName,
+  selectedOptionClassName,
+  iconClassName,
+  nameClassName,
+}) => {
   const [showOptions, setShowOptions] = useState(false);
   const [selectedTripType, setSelectedTripType] = useState('individuel');
 
@@ -11,31 +32,29 @@ const TripType: React.FC = () => {
   ];
 
   return (
-    <div className={styles.optionsSection}>
-      <div className={styles.optionsHeader}>
-        <h3 className={styles.optionsTitle}>Type de trajet</h3>
+    <div className={className}>
+      <div className={headerClassName}>
+        <h3 className={titleClassName}>Type de trajet</h3>
         <button
           onClick={() => setShowOptions(!showOptions)}
-          className={styles.toggleButton}
+          className={toggleButtonClassName}
         >
           {showOptions ? 'Réduire' : 'Options'}
         </button>
       </div>
       {showOptions && (
-        <div className={styles.transportOptions}>
+        <div className={optionsClassName}>
           {tripTypeOptions.map((option) => (
             <button
               key={option.id}
               onClick={() => setSelectedTripType(option.id)}
-              className={`${styles.transportOption} ${
-                selectedTripType === option.id ? styles.selected : ''
-              }`}
+              className={`${optionClassName} ${selectedTripType === option.id ? selectedOptionClassName : ''}`}
               style={{
                 backgroundColor: selectedTripType === option.id ? option.color : undefined,
               }}
             >
-              <span className={styles.transportIcon}>{option.icon}</span>
-              <span className={styles.transportName}>{option.name}</span>
+              <span className={iconClassName}>{option.icon}</span>
+              <span className={nameClassName}>{option.name}</span>
             </button>
           ))}
         </div>