@navigoo/map-components 1.0.0

package/dist/components/Dashboard.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { GeolocationResult, Place, Route } from '../lib/type';
+import { ApiClient } from '../lib/api';
+interface DashboardProps {
+    apiClient: ApiClient;
+    setUserLocation: (location: GeolocationResult | null) => void;
+    setSearchedPlace: (place: Place | null) => void;
+    setIsTracking: (tracking: boolean) => void;
+    setRoutes: (routes: Route[]) => void;
+    setSelectedRouteIndex: (index: number) => void;
+    isTracking: boolean;
+}
+declare const Dashboard: React.FC<DashboardProps>;
+export default Dashboard;

package/dist/components/Dashboard.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const geolocalisation_1 = require("../lib/geolocalisation");
+const SearchBar_1 = __importDefault(require("./SearchBar"));
+const RouteSearch_1 = __importDefault(require("./RouteSearch"));
+const DetourRouteSearch_1 = __importDefault(require("./DetourRouteSearch"));
+const TransportOptions_1 = __importDefault(require("./TransportOptions"));
+const TripType_1 = __importDefault(require("./TripType"));
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+const lucide_react_1 = require("lucide-react");
+const Dashboard = ({ apiClient, setUserLocation, setSearchedPlace, setIsTracking, setRoutes, setSelectedRouteIndex, isTracking, }) => {
+    const [activeSection, setActiveSection] = (0, react_1.useState)(null);
+    const [geoLoading, setGeoLoading] = (0, react_1.useState)(false);
+    const [geoError, setGeoError] = (0, react_1.useState)(null);
+    const toggleSection = (section) => {
+        setActiveSection(activeSection === section ? null : section);
+    };
+    const handleToggleTracking = () => {
+        setIsTracking(!isTracking);
+        if (isTracking) {
+            setUserLocation(null);
+            setRoutes([]);
+            setSelectedRouteIndex(0);
+        }
+    };
+    const handleGeolocation = (0, react_1.useCallback)(async () => {
+        if (geoLoading || isTracking)
+            return;
+        setGeoLoading(true);
+        setGeoError(null);
+        try {
+            const position = await (0, geolocalisation_1.getCurrentPosition)();
+            setUserLocation(position);
+            setGeoError(null);
+            setRoutes([]);
+            setSelectedRouteIndex(0);
+        }
+        catch {
+            setGeoError('Impossible d\'obtenir votre position');
+        }
+        finally {
+            setGeoLoading(false);
+        }
+    }, [geoLoading, isTracking, setUserLocation, setRoutes, setSelectedRouteIndex]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.header, children: (0, jsx_runtime_1.jsxs)("h1", { className: styles_module_css_1.default.headerTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.titleAccent, children: "Navi" }), "goo"] }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.mainContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.sidebar, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => toggleSection('geolocation'), className: `${styles_module_css_1.default.sidebarButton} ${activeSection === 'geolocation' ? styles_module_css_1.default.active : ''}`, title: "G\u00E9olocalisation et suivi", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Footprints, { size: 24, color: "#000" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => toggleSection('search'), className: `${styles_module_css_1.default.sidebarButton} ${activeSection === 'search' ? styles_module_css_1.default.active : ''}`, title: "Recherche de lieu", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 24, color: "#000" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => toggleSection('route'), className: `${styles_module_css_1.default.sidebarButton} ${activeSection === 'route' ? styles_module_css_1.default.active : ''}`, title: "Trac\u00E9 d'itin\u00E9raire", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 24, color: "#000" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => toggleSection('routeWithDetour'), className: `${styles_module_css_1.default.sidebarButton} ${activeSection === 'routeWithDetour' ? styles_module_css_1.default.active : ''}`, title: "Trac\u00E9 d'itin\u00E9raire avec d\u00E9tour", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { size: 24, color: "#000" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${styles_module_css_1.default.contentPanel} ${activeSection ? styles_module_css_1.default.open : ''}`, children: [activeSection === 'geolocation' && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.sectionContainer, children: [(0, jsx_runtime_1.jsxs)("h2", { className: styles_module_css_1.default.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.titleAccent, children: "G\u00E9o" }), "localisation"] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.toggleContainer, children: [(0, jsx_runtime_1.jsxs)("label", { className: styles_module_css_1.default.switch, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isTracking, onChange: handleToggleTracking }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.slider })] }), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.toggleLabel, children: ["Suivi: ", isTracking ? 'Activé' : 'Désactivé'] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleGeolocation, className: styles_module_css_1.default.locationButton, disabled: geoLoading || isTracking, children: geoLoading ? ('Chargement...') : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MapPin, { size: 18, color: "#000", style: { marginRight: '8px' } }), "Ma position"] })) }), geoError && (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.error, children: geoError })] })), activeSection === 'search' && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.sectionContainer, children: [(0, jsx_runtime_1.jsxs)("h2", { className: styles_module_css_1.default.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.titleAccent, children: "Re" }), "cherche"] }), (0, jsx_runtime_1.jsx)(SearchBar_1.default, { apiClient: apiClient, setUserLocation: setUserLocation, setSearchedPlace: setSearchedPlace })] })), activeSection === 'route' && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.sectionContainer, children: [(0, jsx_runtime_1.jsxs)("h2", { className: styles_module_css_1.default.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.titleAccent, children: "Itin\u00E9" }), "raire"] }), (0, jsx_runtime_1.jsx)(RouteSearch_1.default, { apiClient: apiClient, setRoutes: setRoutes, setSelectedRouteIndex: setSelectedRouteIndex }), (0, jsx_runtime_1.jsx)(TransportOptions_1.default, {}), (0, jsx_runtime_1.jsx)(TripType_1.default, {})] })), activeSection === 'routeWithDetour' && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.sectionContainer, children: [(0, jsx_runtime_1.jsxs)("h2", { className: styles_module_css_1.default.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.titleAccent, children: "Itin\u00E9" }), "raire avec d\u00E9tour"] }), (0, jsx_runtime_1.jsx)(DetourRouteSearch_1.default, { apiClient: apiClient, setRoutes: setRoutes, setSelectedRouteIndex: setSelectedRouteIndex }), (0, jsx_runtime_1.jsx)(TransportOptions_1.default, {}), (0, jsx_runtime_1.jsx)(TripType_1.default, {})] }))] })] })] }));
+};
+exports.default = Dashboard;

package/dist/components/DetourRouteSearch.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Route } from '../lib/type';
+import { ApiClient } from '../lib/api';
+interface DetourRouteSearchProps {
+    apiClient: ApiClient;
+    setRoutes: (routes: Route[]) => void;
+    setSelectedRouteIndex: (index: number) => void;
+}
+declare const DetourRouteSearch: React.FC<DetourRouteSearchProps>;
+export default DetourRouteSearch;

package/dist/components/DetourRouteSearch.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+const DetourRouteSearch = ({ apiClient, setRoutes, setSelectedRouteIndex }) => {
+    const [startQuery, setStartQuery] = (0, react_1.useState)('');
+    const [detourQuery, setDetourQuery] = (0, react_1.useState)('');
+    const [endQuery, setEndQuery] = (0, react_1.useState)('');
+    const [startResults, setStartResults] = (0, react_1.useState)([]);
+    const [detourResults, setDetourResults] = (0, react_1.useState)([]);
+    const [endResults, setEndResults] = (0, react_1.useState)([]);
+    const [selectedStart, setSelectedStart] = (0, react_1.useState)(null);
+    const [selectedDetour, setSelectedDetour] = (0, react_1.useState)(null);
+    const [selectedEnd, setSelectedEnd] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [transportMode, setTransportMode] = (0, react_1.useState)('driving');
+    (0, react_1.useEffect)(() => {
+        const handleTransportChange = (e) => {
+            const customEvent = e;
+            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, setResults) => {
+        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) => {
+        setStartQuery(place.name);
+        setSelectedStart(place);
+        setStartResults([]);
+        setRoutes([]);
+        setSelectedRouteIndex(0);
+    };
+    const handleSelectDetour = (place) => {
+        setDetourQuery(place.name);
+        setSelectedDetour(place);
+        setDetourResults([]);
+        setRoutes([]);
+        setSelectedRouteIndex(0);
+    };
+    const handleSelectEnd = (place) => {
+        setEndQuery(place.name);
+        setSelectedEnd(place);
+        setEndResults([]);
+        setRoutes([]);
+        setSelectedRouteIndex(0);
+    };
+    const handleCalculateRoute = async () => {
+        if (!selectedStart ||
+            !selectedDetour ||
+            !selectedEnd ||
+            !selectedStart.coordinates ||
+            !selectedDetour.coordinates ||
+            !selectedEnd.coordinates) {
+            setError('Veuillez sélectionner un départ, un détour et une destination');
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const routes = await apiClient.calculateRouteWithDetour({
+                lat: selectedStart.coordinates.lat,
+                lng: selectedStart.coordinates.lng,
+            }, {
+                lat: selectedDetour.coordinates.lat,
+                lng: selectedDetour.coordinates.lng,
+            }, {
+                lat: selectedEnd.coordinates.lat,
+                lng: selectedEnd.coordinates.lng,
+            }, transportMode, selectedStart.name, selectedDetour.name, selectedEnd.name);
+            setRoutes(routes);
+            setSelectedRouteIndex(0);
+        }
+        catch (err) {
+            setError('Erreur lors du calcul de l\'itinéraire');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.routeSearchSection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.searchGroup, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "start", className: styles_module_css_1.default.label, children: "D\u00E9part" }), (0, jsx_runtime_1.jsx)("input", { id: "start", type: "text", value: startQuery, onChange: (e) => {
+                            setStartQuery(e.target.value);
+                            handleSearch(e.target.value, setStartResults);
+                        }, placeholder: "Point de d\u00E9part", className: styles_module_css_1.default.searchInput }), startResults.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: styles_module_css_1.default.searchResults, children: startResults.map((place) => ((0, jsx_runtime_1.jsx)("li", { onClick: () => handleSelectStart(place), className: styles_module_css_1.default.searchResultItem, children: place.name }, place.id))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.searchGroup, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "detour", className: styles_module_css_1.default.label, children: "D\u00E9tour" }), (0, jsx_runtime_1.jsx)("input", { id: "detour", type: "text", value: detourQuery, onChange: (e) => {
+                            setDetourQuery(e.target.value);
+                            handleSearch(e.target.value, setDetourResults);
+                        }, placeholder: "Point de d\u00E9tour", className: styles_module_css_1.default.searchInput }), detourResults.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: styles_module_css_1.default.searchResults, children: detourResults.map((place) => ((0, jsx_runtime_1.jsx)("li", { onClick: () => handleSelectDetour(place), className: styles_module_css_1.default.searchResultItem, children: place.name }, place.id))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.searchGroup, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "end", className: styles_module_css_1.default.label, children: "Destination" }), (0, jsx_runtime_1.jsx)("input", { id: "end", type: "text", value: endQuery, onChange: (e) => {
+                            setEndQuery(e.target.value);
+                            handleSearch(e.target.value, setEndResults);
+                        }, placeholder: "Point d'arriv\u00E9e", className: styles_module_css_1.default.searchInput }), endResults.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: styles_module_css_1.default.searchResults, children: endResults.map((place) => ((0, jsx_runtime_1.jsx)("li", { onClick: () => handleSelectEnd(place), className: styles_module_css_1.default.searchResultItem, children: place.name }, place.id))) }))] }), error && (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.error, children: error }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCalculateRoute, disabled: loading || !selectedStart || !selectedDetour || !selectedEnd, className: `${styles_module_css_1.default.searchButton} ${loading || !selectedStart || !selectedDetour || !selectedEnd ? styles_module_css_1.default.disabled : ''}`, children: loading ? 'Calcul...' : 'Calculer l\'itinéraire' })] }));
+};
+exports.default = DetourRouteSearch;

package/dist/components/MapView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import 'leaflet/dist/leaflet.css';
+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;
+}
+declare const MapView: React.FC<MapViewProps>;
+export default MapView;

package/dist/components/MapView.js

@@ -0,0 +1,179 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const leaflet_1 = __importDefault(require("leaflet"));
+require("leaflet/dist/leaflet.css");
+const wellknown_1 = require("wellknown");
+const MapView = ({ apiClient, userLocation, searchedPlace, routes, selectedRouteIndex, setSelectedRouteIndex, }) => {
+    const mapRef = (0, react_1.useRef)(null);
+    const mapContainerRef = (0, react_1.useRef)(null);
+    const markerRef = (0, react_1.useRef)(null);
+    const routeLayerRef = (0, react_1.useRef)(null);
+    const clickMarkerRef = (0, react_1.useRef)(null);
+    const routePolylinesRef = (0, react_1.useRef)([]);
+    const parseWKTLineString = (wkt) => {
+        try {
+            const geo = (0, wellknown_1.parse)(wkt);
+            if (geo && geo.type === 'LineString' && Array.isArray(geo.coordinates)) {
+                return geo.coordinates.map(([lng, lat]) => [lat, lng]);
+            }
+        }
+        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];
+            });
+        }
+        return [];
+    };
+    (0, react_1.useEffect)(() => {
+        if (mapContainerRef.current && !mapRef.current) {
+            mapRef.current = leaflet_1.default.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,
+            });
+            leaflet_1.default.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);
+            leaflet_1.default.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 = leaflet_1.default.layerGroup().addTo(mapRef.current);
+            mapRef.current.on('click', async (e) => {
+                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 = leaflet_1.default.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]);
+    (0, react_1.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, lng, placeName, zoom = 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 = leaflet_1.default.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 = [];
+            routes.forEach((route, index) => {
+                const coordinates = [];
+                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 = leaflet_1.default.polyline(coordinates, { color, weight, opacity })
+                        .addTo(routeLayerRef.current)
+                        .on('click', (e) => {
+                        leaflet_1.default.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();
+                        leaflet_1.default.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;
+                            }
+                            leaflet_1.default.marker(startPoint).addTo(routeLayerRef.current).bindPopup(`
+                <b>${startPlaceName}</b><br>Lat: ${startPoint[0].toFixed(6)}<br>Lng: ${startPoint[1].toFixed(6)}
+              `);
+                            leaflet_1.default.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(leaflet_1.default.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 (0, jsx_runtime_1.jsx)("div", { className: "w-full h-screen", ref: mapContainerRef });
+};
+exports.default = MapView;

package/dist/components/RouteSearch.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Route } from '../lib/type';
+import { ApiClient } from '../lib/api';
+interface RouteSearchProps {
+    apiClient: ApiClient;
+    setRoutes: (routes: Route[]) => void;
+    setSelectedRouteIndex: (index: number) => void;
+}
+declare const RouteSearch: React.FC<RouteSearchProps>;
+export default RouteSearch;

package/dist/components/RouteSearch.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+const RouteSearch = ({ apiClient, setRoutes, setSelectedRouteIndex }) => {
+    const [startQuery, setStartQuery] = (0, react_1.useState)('');
+    const [endQuery, setEndQuery] = (0, react_1.useState)('');
+    const [startResults, setStartResults] = (0, react_1.useState)([]);
+    const [endResults, setEndResults] = (0, react_1.useState)([]);
+    const [selectedStart, setSelectedStart] = (0, react_1.useState)(null);
+    const [selectedEnd, setSelectedEnd] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [transportMode, setTransportMode] = (0, react_1.useState)('driving');
+    (0, react_1.useEffect)(() => {
+        const handleTransportChange = (e) => {
+            const customEvent = e;
+            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, setResults) => {
+        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) => {
+        setStartQuery(place.name);
+        setSelectedStart(place);
+        setStartResults([]);
+        setRoutes([]);
+        setSelectedRouteIndex(0);
+    };
+    const handleSelectEnd = (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 ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.routeSearchSection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.searchGroup, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "start", className: styles_module_css_1.default.label, children: "D\u00E9part" }), (0, jsx_runtime_1.jsx)("input", { id: "start", type: "text", value: startQuery, onChange: (e) => {
+                            setStartQuery(e.target.value);
+                            handleSearch(e.target.value, setStartResults);
+                        }, placeholder: "Point de d\u00E9part", className: styles_module_css_1.default.searchInput }), startResults.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: styles_module_css_1.default.searchResults, children: startResults.map((place) => ((0, jsx_runtime_1.jsx)("li", { onClick: () => handleSelectStart(place), className: styles_module_css_1.default.searchResultItem, children: place.name }, place.id))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.searchGroup, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "end", className: styles_module_css_1.default.label, children: "Destination" }), (0, jsx_runtime_1.jsx)("input", { id: "end", type: "text", value: endQuery, onChange: (e) => {
+                            setEndQuery(e.target.value);
+                            handleSearch(e.target.value, setEndResults);
+                        }, placeholder: "Point d'arriv\u00E9e", className: styles_module_css_1.default.searchInput }), endResults.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: styles_module_css_1.default.searchResults, children: endResults.map((place) => ((0, jsx_runtime_1.jsx)("li", { onClick: () => handleSelectEnd(place), className: styles_module_css_1.default.searchResultItem, children: place.name }, place.id))) }))] }), error && (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.error, children: error }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCalculateRoute, disabled: loading || !selectedStart || !selectedEnd, className: `${styles_module_css_1.default.searchButton} ${loading || !selectedStart || !selectedEnd ? styles_module_css_1.default.disabled : ''}`, children: loading ? 'Calcul...' : 'Calculer l\'itinéraire' })] }));
+};
+exports.default = RouteSearch;

package/dist/components/SearchBar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Place, GeolocationResult } from '../lib/type';
+import { ApiClient } from '../lib/api';
+interface SearchBarProps {
+    apiClient: ApiClient;
+    setUserLocation: (location: GeolocationResult | null) => void;
+    setSearchedPlace: (place: Place | null) => void;
+}
+declare const SearchBar: React.FC<SearchBarProps>;
+export default SearchBar;

package/dist/components/SearchBar.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+const SearchBar = ({ apiClient, setUserLocation, setSearchedPlace }) => {
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [results, setResults] = (0, react_1.useState)([]);
+    const [error, setError] = (0, react_1.useState)(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) => {
+        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 ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.searchSection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.searchGroup, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "search", className: styles_module_css_1.default.label, children: "Nom du lieu" }), (0, jsx_runtime_1.jsx)("input", { id: "search", type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Rechercher un lieu", className: styles_module_css_1.default.searchInput })] }), error && (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.error, children: error }), results.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: styles_module_css_1.default.searchResults, children: results.map((place) => ((0, jsx_runtime_1.jsx)("li", { onClick: () => handleSelect(place), className: styles_module_css_1.default.searchResultItem, children: place.name }, place.id))) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleSearch, disabled: loading || !query, className: `${styles_module_css_1.default.searchButton} ${loading || !query ? styles_module_css_1.default.disabled : ''}`, children: loading ? 'Recherche...' : 'Rechercher' })] }));
+};
+exports.default = SearchBar;

package/dist/components/TransportOptions.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TransportOptions: React.FC;
+export default TransportOptions;

package/dist/components/TransportOptions.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+const TransportOptions = () => {
+    const [showOptions, setShowOptions] = (0, react_1.useState)(false);
+    const [selectedTransport, setSelectedTransport] = (0, react_1.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' },
+    ];
+    (0, react_1.useEffect)(() => {
+        window.dispatchEvent(new CustomEvent('transportChange', { detail: selectedTransport }));
+    }, [selectedTransport]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.optionsSection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.optionsHeader, children: [(0, jsx_runtime_1.jsx)("h3", { className: styles_module_css_1.default.optionsTitle, children: "Moyen de transport" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowOptions(!showOptions), className: styles_module_css_1.default.toggleButton, children: showOptions ? 'Réduire' : 'Options' })] }), showOptions && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.transportOptions, children: transportOptions.map((option) => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setSelectedTransport(option.id), className: `${styles_module_css_1.default.transportOption} ${selectedTransport === option.id ? styles_module_css_1.default.selected : ''}`, style: {
+                        backgroundColor: selectedTransport === option.id ? option.color : undefined,
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.transportIcon, children: option.icon }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.transportName, children: option.name })] }, option.id))) }))] }));
+};
+exports.default = TransportOptions;

package/dist/components/TripType.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TripType: React.FC;
+export default TripType;

package/dist/components/TripType.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+const TripType = () => {
+    const [showOptions, setShowOptions] = (0, react_1.useState)(false);
+    const [selectedTripType, setSelectedTripType] = (0, react_1.useState)('individuel');
+    const tripTypeOptions = [
+        { id: 'individuel', name: 'Individuel', icon: '👤', color: '#3498db' },
+        { id: 'ramassage', name: 'Ramassage', icon: '👥', color: '#9b59b6' },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.optionsSection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.optionsHeader, children: [(0, jsx_runtime_1.jsx)("h3", { className: styles_module_css_1.default.optionsTitle, children: "Type de trajet" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowOptions(!showOptions), className: styles_module_css_1.default.toggleButton, children: showOptions ? 'Réduire' : 'Options' })] }), showOptions && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.transportOptions, children: tripTypeOptions.map((option) => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setSelectedTripType(option.id), className: `${styles_module_css_1.default.transportOption} ${selectedTripType === option.id ? styles_module_css_1.default.selected : ''}`, style: {
+                        backgroundColor: selectedTripType === option.id ? option.color : undefined,
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.transportIcon, children: option.icon }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.transportName, children: option.name })] }, option.id))) }))] }));
+};
+exports.default = TripType;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { default as SearchBar } from './components/SearchBar';
+export { default as RouteSearch } from './components/RouteSearch';
+export { default as DetourRouteSearch } from './components/DetourRouteSearch';
+export { default as MapView } from './components/MapView';
+export { default as Dashboard } from './components/Dashboard';
+export { default as TransportOptions } from './components/TransportOptions';
+export { default as TripType } from './components/TripType';
+export { ApiClient } from './lib/api';
+export { getCurrentPosition } from './lib/geolocalisation';
+export * from './lib/type';