@navigoo/map-components 1.0.0

package/src/components/MapView.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useRef } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { parse } from 'wellknown';
+import { Place, Route, GeolocationResult } from '../lib/type';
+import { ApiClient } from '../lib/api';
+
+interface MapViewProps {
+  apiClient: ApiClient;
+  userLocation?: GeolocationResult | null;
+  searchedPlace?: Place | null;
+  routes?: Route[];
+  selectedRouteIndex: number;
+  setSelectedRouteIndex: (index: number) => void;
+}
+
+const MapView: React.FC<MapViewProps> = ({
+  apiClient,
+  userLocation,
+  searchedPlace,
+  routes,
+  selectedRouteIndex,
+  setSelectedRouteIndex,
+}) => {
+  const mapRef = useRef<L.Map | null>(null);
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const markerRef = useRef<L.Marker | null>(null);
+  const routeLayerRef = useRef<L.LayerGroup | null>(null);
+  const clickMarkerRef = useRef<L.Marker | null>(null);
+  const routePolylinesRef = useRef<L.Polyline[]>([]);
+
+  const parseWKTLineString = (wkt: string): [number, number][] => {
+    try {
+      const geo = parse(wkt);
+      if (geo && geo.type === 'LineString' && Array.isArray(geo.coordinates)) {
+        return geo.coordinates.map(([lng, lat]: [number, number]) => [lat, lng] as [number, number]);
+      }
+    } catch (error) {
+      console.error('wellknown parsing failed:', error);
+    }
+    const match = wkt.match(/LINESTRING\s*\(([^)]+)\)/);
+    if (match) {
+      return match[1]
+        .split(',')
+        .map(coord => {
+          const [lng, lat] = coord.trim().split(' ').map(Number);
+          return [lat, lng] as [number, number];
+        });
+    }
+    return [];
+  };
+
+  useEffect(() => {
+    if (mapContainerRef.current && !mapRef.current) {
+      mapRef.current = L.map(mapContainerRef.current, {
+        center: [3.8480, 11.5021], // Centre par défaut : Yaoundé
+        zoom: 12,
+        minZoom: 11,
+        maxZoom: 16,
+        maxBounds: [[3.7, 11.4], [4.0, 11.6]],
+        maxBoundsViscosity: 1.0,
+      });
+
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        maxZoom: 16,
+      }).addTo(mapRef.current);
+
+      L.Icon.Default.mergeOptions({
+        iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+        iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+      });
+
+      routeLayerRef.current = L.layerGroup().addTo(mapRef.current);
+
+      mapRef.current.on('click', async (e: L.LeafletMouseEvent) => {
+        const { lat, lng } = e.latlng;
+        const closestPlace = await apiClient.findClosestPlace(lat, lng);
+        const placeName = closestPlace?.name || 'Position sélectionnée';
+
+        if (clickMarkerRef.current) {
+          mapRef.current?.removeLayer(clickMarkerRef.current);
+          clickMarkerRef.current = null;
+        } else {
+          clickMarkerRef.current = L.marker([lat, lng])
+            .addTo(mapRef.current!)
+            .bindPopup(`<b>${placeName}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`)
+            .openPopup();
+        }
+      });
+    }
+
+    return () => {
+      if (mapRef.current) {
+        mapRef.current.remove();
+        mapRef.current = null;
+      }
+    };
+  }, [apiClient]);
+
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    if (routeLayerRef.current) routeLayerRef.current.clearLayers();
+    if (markerRef.current) markerRef.current.remove();
+    if (clickMarkerRef.current) clickMarkerRef.current.remove();
+    routePolylinesRef.current = [];
+
+    const centerOnPoint = async (lat: number, lng: number, placeName: string, zoom: number = 16) => {
+      let displayName = placeName;
+      if (placeName === 'Votre position') {
+        const closestPlace = await apiClient.findClosestPlace(lat, lng);
+        displayName = closestPlace?.name || placeName;
+      }
+      mapRef.current!.setView([lat, lng], zoom, { animate: true });
+      markerRef.current = L.marker([lat, lng])
+        .addTo(mapRef.current!)
+        .bindPopup(`<b>${displayName}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`)
+        .openPopup();
+    };
+
+    if (routes && routes.length > 0) {
+      let allCoordinates: [number, number][] = [];
+      routes.forEach((route, index) => {
+        const coordinates: [number, number][] = [];
+        route.steps.forEach((step) => {
+          const latLngs = parseWKTLineString(step.geometry);
+          if (latLngs.length > 0) coordinates.push(...latLngs);
+        });
+
+        if (coordinates.length > 0) {
+          const color = index === selectedRouteIndex ? 'green' : 'black';
+          const weight = index === selectedRouteIndex ? 5 : 3;
+          const opacity = index === selectedRouteIndex ? 1.0 : 0.5;
+
+          const polyline = L.polyline(coordinates, { color, weight, opacity })
+            .addTo(routeLayerRef.current!)
+            .on('click', (e: L.LeafletMouseEvent) => {
+              L.DomEvent.stopPropagation(e);
+              setSelectedRouteIndex(index);
+              routePolylinesRef.current.forEach((pl, i) => {
+                pl.setStyle({
+                  color: i === index ? 'green' : 'black',
+                  weight: i === index ? 5 : 3,
+                  opacity: i === index ? 1.0 : 0.5,
+                });
+              });
+              const bounds = polyline.getBounds();
+              const center = bounds.getCenter();
+              L.popup()
+                .setLatLng(center)
+                .setContent(`
+                  <b>Route ${index + 1}</b><br>
+                  Distance: ${route.distance.toFixed(2)} m<br>
+                  Durée: ${(route.duration / 60).toFixed(2)} min<br>
+                  Départ: ${route.startPlaceName || 'Départ'}<br>
+                  Destination: ${route.endPlaceName || 'Destination'}
+                `)
+                .openOn(mapRef.current!);
+            });
+
+          routePolylinesRef.current.push(polyline);
+          allCoordinates = [...allCoordinates, ...coordinates];
+
+          if (index === selectedRouteIndex) {
+            const startPoint = coordinates[0];
+            const endPoint = coordinates[coordinates.length - 1];
+            (async () => {
+              let startPlaceName = route.startPlaceName || 'Départ';
+              if (route.startPlaceName === 'Votre position') {
+                const closestStartPlace = await apiClient.findClosestPlace(startPoint[1], startPoint[0]);
+                startPlaceName = closestStartPlace?.name || route.startPlaceName;
+              }
+              L.marker(startPoint).addTo(routeLayerRef.current!).bindPopup(`
+                <b>${startPlaceName}</b><br>Lat: ${startPoint[0].toFixed(6)}<br>Lng: ${startPoint[1].toFixed(6)}
+              `);
+              L.marker(endPoint).addTo(routeLayerRef.current!).bindPopup(`
+                <b>${route.endPlaceName || 'Destination'}</b><br>Lat: ${endPoint[0].toFixed(6)}<br>Lng: ${endPoint[1].toFixed(6)}
+              `);
+            })();
+          }
+        }
+      });
+
+      if (allCoordinates.length > 0) {
+        mapRef.current!.fitBounds(L.latLngBounds(allCoordinates));
+      }
+    } else if (searchedPlace && searchedPlace.coordinates) {
+      centerOnPoint(searchedPlace.coordinates.lat, searchedPlace.coordinates.lng, searchedPlace.name);
+    } else if (userLocation) {
+      centerOnPoint(userLocation.latitude, userLocation.longitude, 'Votre position');
+    } else {
+      mapRef.current!.setView([3.8480, 11.5021], 12, { animate: true });
+    }
+  }, [apiClient, userLocation, searchedPlace, routes, selectedRouteIndex, setSelectedRouteIndex]);
+
+  return <div className="w-full h-screen" ref={mapContainerRef} />;
+};
+
+export default MapView;

package/src/components/RouteSearch.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react';
+import { Place, Route, GeolocationResult } 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;
+}
+
+const RouteSearch: React.FC<RouteSearchProps> = ({ apiClient, setRoutes, setSelectedRouteIndex }) => {
+  const [startQuery, setStartQuery] = useState('');
+  const [endQuery, setEndQuery] = useState('');
+  const [startResults, setStartResults] = useState<Place[]>([]);
+  const [endResults, setEndResults] = useState<Place[]>([]);
+  const [selectedStart, setSelectedStart] = useState<Place | null>(null);
+  const [selectedEnd, setSelectedEnd] = useState<Place | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [transportMode, setTransportMode] = useState<'driving' | 'walking' | 'cycling'>('driving');
+
+  useEffect(() => {
+    const handleTransportChange = (e: Event) => {
+      const customEvent = e as CustomEvent;
+      if (customEvent.detail === 'taxi' || customEvent.detail === 'bus') {
+        setTransportMode('driving');
+      } else if (customEvent.detail === 'moto') {
+        setTransportMode('cycling');
+      }
+    };
+    window.addEventListener('transportChange', handleTransportChange);
+    return () => window.removeEventListener('transportChange', handleTransportChange);
+  }, []);
+
+  const handleSearch = async (query: string, setResults: (results: Place[]) => void) => {
+    if (!query) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const places = await apiClient.searchPlaces(query);
+      setResults(places);
+      if (places.length === 0) {
+        setError('Aucun lieu trouvé');
+      }
+    } catch (err) {
+      setError('Erreur lors de la recherche');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectStart = (place: Place) => {
+    setStartQuery(place.name);
+    setSelectedStart(place);
+    setStartResults([]);
+    setRoutes([]);
+    setSelectedRouteIndex(0);
+  };
+
+  const handleSelectEnd = (place: Place) => {
+    setEndQuery(place.name);
+    setSelectedEnd(place);
+    setEndResults([]);
+    setRoutes([]);
+    setSelectedRouteIndex(0);
+  };
+
+  const handleCalculateRoute = async () => {
+    if (!selectedStart || !selectedEnd || !selectedStart.coordinates || !selectedEnd.coordinates) {
+      setError('Veuillez sélectionner un point de départ et une destination');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const routes = await apiClient.calculateRoute(
+        [
+          { lat: selectedStart.coordinates.lat, lng: selectedStart.coordinates.lng },
+          { lat: selectedEnd.coordinates.lat, lng: selectedEnd.coordinates.lng },
+        ],
+        transportMode,
+        selectedStart.name,
+        selectedEnd.name
+      );
+      setRoutes(routes);
+      setSelectedRouteIndex(0);
+    } catch (err) {
+      setError('Erreur lors du calcul de l\'itinéraire');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.routeSearchSection}>
+      <div className={styles.searchGroup}>
+        <label htmlFor="start" className={styles.label}>Départ</label>
+        <input
+          id="start"
+          type="text"
+          value={startQuery}
+          onChange={(e) => {
+            setStartQuery(e.target.value);
+            handleSearch(e.target.value, setStartResults);
+          }}
+          placeholder="Point de départ"
+          className={styles.searchInput}
+        />
+        {startResults.length > 0 && (
+          <ul className={styles.searchResults}>
+            {startResults.map((place) => (
+              <li
+                key={place.id}
+                onClick={() => handleSelectStart(place)}
+                className={styles.searchResultItem}
+              >
+                {place.name}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <div className={styles.searchGroup}>
+        <label htmlFor="end" className={styles.label}>Destination</label>
+        <input
+          id="end"
+          type="text"
+          value={endQuery}
+          onChange={(e) => {
+            setEndQuery(e.target.value);
+            handleSearch(e.target.value, setEndResults);
+          }}
+          placeholder="Point d'arrivée"
+          className={styles.searchInput}
+        />
+        {endResults.length > 0 && (
+          <ul className={styles.searchResults}>
+            {endResults.map((place) => (
+              <li
+                key={place.id}
+                onClick={() => handleSelectEnd(place)}
+                className={styles.searchResultItem}
+              >
+                {place.name}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      {error && <div className={styles.error}>{error}</div>}
+      <button
+        onClick={handleCalculateRoute}
+        disabled={loading || !selectedStart || !selectedEnd}
+        className={`${styles.searchButton} ${loading || !selectedStart || !selectedEnd ? styles.disabled : ''}`}
+      >
+        {loading ? 'Calcul...' : 'Calculer l\'itinéraire'}
+      </button>
+    </div>
+  );
+};
+
+export default RouteSearch;

package/src/components/SearchBar.tsx

@@ -0,0 +1,87 @@
+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;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ apiClient, setUserLocation, setSearchedPlace }) => {
+  const [query, setQuery] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState<Place[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSearch = async () => {
+    if (!query || loading) return;
+    setLoading(true);
+    setError(null);
+    setResults([]);
+    setSearchedPlace(null);
+
+    try {
+      const places = await apiClient.searchPlaces(query);
+      setResults(places);
+      if (places.length === 0) {
+        setError('Aucun lieu trouvé');
+      }
+    } catch (err) {
+      setError('Erreur lors de la recherche');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelect = (place: Place) => {
+    setQuery(place.name);
+    if (place.coordinates) {
+      setUserLocation({ latitude: place.coordinates.lat, longitude: place.coordinates.lng });
+      setSearchedPlace(place);
+    } else {
+      setError('Lieu sans coordonnées valides');
+    }
+    setResults([]);
+  };
+
+  return (
+    <div className={styles.searchSection}>
+      <div className={styles.searchGroup}>
+        <label htmlFor="search" className={styles.label}>Nom du lieu</label>
+        <input
+          id="search"
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Rechercher un lieu"
+          className={styles.searchInput}
+        />
+      </div>
+      {error && <div className={styles.error}>{error}</div>}
+      {results.length > 0 && (
+        <ul className={styles.searchResults}>
+          {results.map((place) => (
+            <li
+              key={place.id}
+              onClick={() => handleSelect(place)}
+              className={styles.searchResultItem}
+            >
+              {place.name}
+            </li>
+          ))}
+        </ul>
+      )}
+      <button
+        onClick={handleSearch}
+        disabled={loading || !query}
+        className={`${styles.searchButton} ${loading || !query ? styles.disabled : ''}`}
+      >
+        {loading ? 'Recherche...' : 'Rechercher'}
+      </button>
+    </div>
+  );
+};
+
+export default SearchBar;

package/src/components/TransportOptions.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import styles from './styles.module.css';
+
+const TransportOptions: React.FC = () => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [selectedTransport, setSelectedTransport] = useState('taxi');
+
+  const transportOptions = [
+    { id: 'taxi', name: 'Taxi', icon: '🚕', color: '#3498db' },
+    { id: 'bus', name: 'Bus', icon: '🚌', color: '#2980b9' },
+    { id: 'moto', name: 'Moto', icon: '🏍️', color: '#1abc9c' },
+  ];
+
+  useEffect(() => {
+    window.dispatchEvent(new CustomEvent('transportChange', { detail: selectedTransport }));
+  }, [selectedTransport]);
+
+  return (
+    <div className={styles.optionsSection}>
+      <div className={styles.optionsHeader}>
+        <h3 className={styles.optionsTitle}>Moyen de transport</h3>
+        <button
+          onClick={() => setShowOptions(!showOptions)}
+          className={styles.toggleButton}
+        >
+          {showOptions ? 'Réduire' : 'Options'}
+        </button>
+      </div>
+      {showOptions && (
+        <div className={styles.transportOptions}>
+          {transportOptions.map((option) => (
+            <button
+              key={option.id}
+              onClick={() => setSelectedTransport(option.id)}
+              className={`${styles.transportOption} ${
+                selectedTransport === option.id ? styles.selected : ''
+              }`}
+              style={{
+                backgroundColor: selectedTransport === option.id ? option.color : undefined,
+              }}
+            >
+              <span className={styles.transportIcon}>{option.icon}</span>
+              <span className={styles.transportName}>{option.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+    
+  );
+};
+
+export default TransportOptions;

package/src/components/TripType.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+
+const TripType: React.FC = () => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [selectedTripType, setSelectedTripType] = useState('individuel');
+
+  const tripTypeOptions = [
+    { id: 'individuel', name: 'Individuel', icon: '👤', color: '#3498db' },
+    { id: 'ramassage', name: 'Ramassage', icon: '👥', color: '#9b59b6' },
+  ];
+
+  return (
+    <div className={styles.optionsSection}>
+      <div className={styles.optionsHeader}>
+        <h3 className={styles.optionsTitle}>Type de trajet</h3>
+        <button
+          onClick={() => setShowOptions(!showOptions)}
+          className={styles.toggleButton}
+        >
+          {showOptions ? 'Réduire' : 'Options'}
+        </button>
+      </div>
+      {showOptions && (
+        <div className={styles.transportOptions}>
+          {tripTypeOptions.map((option) => (
+            <button
+              key={option.id}
+              onClick={() => setSelectedTripType(option.id)}
+              className={`${styles.transportOption} ${
+                selectedTripType === option.id ? styles.selected : ''
+              }`}
+              style={{
+                backgroundColor: selectedTripType === option.id ? option.color : undefined,
+              }}
+            >
+              <span className={styles.transportIcon}>{option.icon}</span>
+              <span className={styles.transportName}>{option.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TripType;