@navigoo/map-components 1.0.0

package/dist/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentPosition = exports.ApiClient = exports.TripType = exports.TransportOptions = exports.Dashboard = exports.MapView = exports.DetourRouteSearch = exports.RouteSearch = exports.SearchBar = void 0;
+var SearchBar_1 = require("./components/SearchBar");
+Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return __importDefault(SearchBar_1).default; } });
+var RouteSearch_1 = require("./components/RouteSearch");
+Object.defineProperty(exports, "RouteSearch", { enumerable: true, get: function () { return __importDefault(RouteSearch_1).default; } });
+var DetourRouteSearch_1 = require("./components/DetourRouteSearch");
+Object.defineProperty(exports, "DetourRouteSearch", { enumerable: true, get: function () { return __importDefault(DetourRouteSearch_1).default; } });
+var MapView_1 = require("./components/MapView");
+Object.defineProperty(exports, "MapView", { enumerable: true, get: function () { return __importDefault(MapView_1).default; } });
+var Dashboard_1 = require("./components/Dashboard");
+Object.defineProperty(exports, "Dashboard", { enumerable: true, get: function () { return __importDefault(Dashboard_1).default; } });
+var TransportOptions_1 = require("./components/TransportOptions");
+Object.defineProperty(exports, "TransportOptions", { enumerable: true, get: function () { return __importDefault(TransportOptions_1).default; } });
+var TripType_1 = require("./components/TripType");
+Object.defineProperty(exports, "TripType", { enumerable: true, get: function () { return __importDefault(TripType_1).default; } });
+var api_1 = require("./lib/api");
+Object.defineProperty(exports, "ApiClient", { enumerable: true, get: function () { return api_1.ApiClient; } });
+var geolocalisation_1 = require("./lib/geolocalisation");
+Object.defineProperty(exports, "getCurrentPosition", { enumerable: true, get: function () { return geolocalisation_1.getCurrentPosition; } });
+__exportStar(require("./lib/type"), exports);

package/dist/lib/api.d.ts

@@ -0,0 +1,21 @@
+import { Place, Route } from './type';
+export declare class ApiClient {
+    private baseUrl;
+    constructor(baseUrl: string);
+    searchPlaces(name: string): Promise<Place[]>;
+    findClosestPlace(lat: number, lng: number): Promise<Place | null>;
+    calculateRoute(points: {
+        lat: number;
+        lng: number;
+    }[], mode: 'driving' | 'walking' | 'cycling', startPlaceName: string, endPlaceName: string): Promise<Route[]>;
+    calculateRouteWithDetour(start: {
+        lat: number;
+        lng: number;
+    }, detour: {
+        lat: number;
+        lng: number;
+    }, end: {
+        lat: number;
+        lng: number;
+    }, mode: string, startPlaceName: string, detourPlaceName: string, endPlaceName: string): Promise<Route[]>;
+}

package/dist/lib/api.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiClient = void 0;
+class ApiClient {
+    baseUrl;
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
+    }
+    async searchPlaces(name) {
+        const response = await fetch(`${this.baseUrl}/api/places?name=${encodeURIComponent(name)}`);
+        const data = await response.json();
+        if (response.ok && data.success) {
+            return data.data.filter((place) => place.coordinates !== null);
+        }
+        throw new Error(data.error || 'Failed to search places');
+    }
+    async findClosestPlace(lat, lng) {
+        const response = await fetch(`${this.baseUrl}/api/places/closest?lat=${lat}&lng=${lng}`);
+        const data = await response.json();
+        if (response.ok && data.success) {
+            return data.data;
+        }
+        return null;
+    }
+    async calculateRoute(points, mode, startPlaceName, endPlaceName) {
+        const response = await fetch(`${this.baseUrl}/api/routes`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ points, mode, startPlaceName, endPlaceName }),
+        });
+        const data = await response.json();
+        if (response.ok && data.routes) {
+            return data.routes;
+        }
+        throw new Error(data.error || 'Failed to calculate route');
+    }
+    async calculateRouteWithDetour(start, detour, end, mode, startPlaceName, detourPlaceName, endPlaceName) {
+        const response = await fetch(`${this.baseUrl}/api/routes/with-detour`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                start,
+                detour,
+                end,
+                transportMode: mode,
+                startPlaceName,
+                detourPlaceName,
+                endPlaceName,
+            }),
+        });
+        const data = await response.json();
+        if (response.ok && data.routes) {
+            return data.routes;
+        }
+        throw new Error(data.error || 'Failed to calculate route with detour');
+    }
+}
+exports.ApiClient = ApiClient;

package/dist/lib/geolocalisation.d.ts

@@ -0,0 +1,9 @@
+export interface GeolocationResult {
+    latitude: number;
+    longitude: number;
+}
+export interface GeolocationError {
+    code: number;
+    message: string;
+}
+export declare const getCurrentPosition: () => Promise<GeolocationResult>;

package/dist/lib/geolocalisation.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentPosition = void 0;
+const getCurrentPosition = () => {
+    return new Promise((resolve, reject) => {
+        if (!navigator.geolocation) {
+            reject({
+                code: -1,
+                message: 'Geolocation is not supported by this browser.',
+            });
+            return;
+        }
+        navigator.geolocation.getCurrentPosition((position) => {
+            resolve({
+                latitude: position.coords.latitude,
+                longitude: position.coords.longitude,
+            });
+        }, (error) => {
+            reject({
+                code: error.code,
+                message: error.message,
+            });
+        }, {
+            enableHighAccuracy: true,
+            timeout: 10000,
+            maximumAge: 0,
+        });
+    });
+};
+exports.getCurrentPosition = getCurrentPosition;

package/dist/lib/type.d.ts

@@ -0,0 +1,32 @@
+export interface Coordinates {
+    lat: number;
+    lng: number;
+}
+export interface Place {
+    id: string | number;
+    name: string;
+    coordinates: Coordinates | null;
+}
+export interface RouteStep {
+    geometry: string;
+    source: string;
+    target: string;
+    distance: number;
+    duration: number;
+}
+export interface Route {
+    distance: number;
+    duration: number;
+    steps: RouteStep[];
+    startPlaceName?: string;
+    endPlaceName?: string;
+    geometry: string;
+}
+export interface GeolocationResult {
+    latitude: number;
+    longitude: number;
+}
+export interface GeolocationError {
+    code: number;
+    message: string;
+}

package/dist/lib/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@navigoo/map-components",
+  "version": "1.0.0",
+  "description": "Reusable React components for mapping and routing in Yaoundé",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublish": "npm run build"
+  },
+  "dependencies": {
+    "leaflet": "^1.9.4",
+    "wellknown": "^0.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "lucide-react": "^0.263.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/leaflet": "^1.9.4",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/Dashboard.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useCallback } from 'react';
+import { GeolocationResult, Place, Route } from '../lib/type';
+import { getCurrentPosition } from '../lib/geolocalisation';
+import SearchBar from './SearchBar';
+import RouteSearch from './RouteSearch';
+import DetourRouteSearch from './DetourRouteSearch';
+import TransportOptions from './TransportOptions';
+import TripType from './TripType';
+import styles from './styles.module.css';
+import { Footprints, Search, ArrowRight, RefreshCcw, MapPin } from 'lucide-react';
+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;
+}
+
+const Dashboard: React.FC<DashboardProps> = ({
+  apiClient,
+  setUserLocation,
+  setSearchedPlace,
+  setIsTracking,
+  setRoutes,
+  setSelectedRouteIndex,
+  isTracking,
+}) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const [geoLoading, setGeoLoading] = useState(false);
+  const [geoError, setGeoError] = useState<string | null>(null);
+
+  const toggleSection = (section: string) => {
+    setActiveSection(activeSection === section ? null : section);
+  };
+
+  const handleToggleTracking = () => {
+    setIsTracking(!isTracking);
+    if (isTracking) {
+      setUserLocation(null);
+      setRoutes([]);
+      setSelectedRouteIndex(0);
+    }
+  };
+
+  const handleGeolocation = useCallback(async () => {
+    if (geoLoading || isTracking) return;
+    setGeoLoading(true);
+    setGeoError(null);
+
+    try {
+      const position: GeolocationResult = await getCurrentPosition();
+      setUserLocation(position);
+      setGeoError(null);
+      setRoutes([]);
+      setSelectedRouteIndex(0);
+    } catch {
+      setGeoError('Impossible d\'obtenir votre position');
+    } finally {
+      setGeoLoading(false);
+    }
+  }, [geoLoading, isTracking, setUserLocation, setRoutes, setSelectedRouteIndex]);
+
+  return (
+    <div>
+      <div className={styles.header}>
+        <h1 className={styles.headerTitle}>
+          <span className={styles.titleAccent}>Navi</span>goo
+        </h1>
+      </div>
+      <div className={styles.mainContainer}>
+        <div className={styles.sidebar}>
+          <button
+            onClick={() => toggleSection('geolocation')}
+            className={`${styles.sidebarButton} ${activeSection === 'geolocation' ? styles.active : ''}`}
+            title="Géolocalisation et suivi"
+          >
+            <Footprints size={24} color="#000" />
+          </button>
+          <button
+            onClick={() => toggleSection('search')}
+            className={`${styles.sidebarButton} ${activeSection === 'search' ? styles.active : ''}`}
+            title="Recherche de lieu"
+          >
+            <Search size={24} color="#000" />
+          </button>
+          <button
+            onClick={() => toggleSection('route')}
+            className={`${styles.sidebarButton} ${activeSection === 'route' ? styles.active : ''}`}
+            title="Tracé d'itinéraire"
+          >
+            <ArrowRight size={24} color="#000" />
+          </button>
+          <button
+            onClick={() => toggleSection('routeWithDetour')}
+            className={`${styles.sidebarButton} ${activeSection === 'routeWithDetour' ? styles.active : ''}`}
+            title="Tracé d'itinéraire avec détour"
+          >
+            <RefreshCcw size={24} color="#000" />
+          </button>
+        </div>
+        <div className={`${styles.contentPanel} ${activeSection ? styles.open : ''}`}>
+          {activeSection === 'geolocation' && (
+            <div className={styles.sectionContainer}>
+              <h2 className={styles.sectionTitle}>
+                <span className={styles.titleAccent}>Géo</span>localisation
+              </h2>
+              <div className={styles.toggleContainer}>
+                <label className={styles.switch}>
+                  <input type="checkbox" checked={isTracking} onChange={handleToggleTracking} />
+                  <span className={styles.slider}></span>
+                </label>
+                <span className={styles.toggleLabel}>
+                  Suivi: {isTracking ? 'Activé' : 'Désactivé'}
+                </span>
+              </div>
+              <button
+                onClick={handleGeolocation}
+                className={styles.locationButton}
+                disabled={geoLoading || isTracking}
+              >
+                {geoLoading ? (
+                  'Chargement...'
+                ) : (
+                  <>
+                    <MapPin size={18} color="#000" style={{ marginRight: '8px' }} />
+                    Ma position
+                  </>
+                )}
+              </button>
+              {geoError && <div className={styles.error}>{geoError}</div>}
+            </div>
+          )}
+          {activeSection === 'search' && (
+            <div className={styles.sectionContainer}>
+              <h2 className={styles.sectionTitle}>
+                <span className={styles.titleAccent}>Re</span>cherche
+              </h2>
+              <SearchBar
+                apiClient={apiClient}
+                setUserLocation={setUserLocation}
+                setSearchedPlace={setSearchedPlace}
+              />
+            </div>
+          )}
+          {activeSection === 'route' && (
+            <div className={styles.sectionContainer}>
+              <h2 className={styles.sectionTitle}>
+                <span className={styles.titleAccent}>Itiné</span>raire
+              </h2>
+              <RouteSearch
+                apiClient={apiClient}
+                setRoutes={setRoutes}
+                setSelectedRouteIndex={setSelectedRouteIndex}
+              />
+              <TransportOptions />
+              <TripType />
+            </div>
+          )}
+          {activeSection === 'routeWithDetour' && (
+            <div className={styles.sectionContainer}>
+              <h2 className={styles.sectionTitle}>
+                <span className={styles.titleAccent}>Itiné</span>raire avec détour
+              </h2>
+              <DetourRouteSearch
+                apiClient={apiClient}
+                setRoutes={setRoutes}
+                setSelectedRouteIndex={setSelectedRouteIndex}
+              />
+              <TransportOptions />
+              <TripType />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

package/src/components/DetourRouteSearch.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useEffect } 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;
+}
+
+const DetourRouteSearch: React.FC<DetourRouteSearchProps> = ({ apiClient, setRoutes, setSelectedRouteIndex }) => {
+  const [startQuery, setStartQuery] = useState('');
+  const [detourQuery, setDetourQuery] = useState('');
+  const [endQuery, setEndQuery] = useState('');
+  const [startResults, setStartResults] = useState<Place[]>([]);
+  const [detourResults, setDetourResults] = useState<Place[]>([]);
+  const [endResults, setEndResults] = useState<Place[]>([]);
+  const [selectedStart, setSelectedStart] = useState<Place | null>(null);
+  const [selectedDetour, setSelectedDetour] = 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 handleSelectDetour = (place: Place) => {
+    setDetourQuery(place.name);
+    setSelectedDetour(place);
+    setDetourResults([]);
+    setRoutes([]);
+    setSelectedRouteIndex(0);
+  };
+
+  const handleSelectEnd = (place: 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 (
+    <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="detour" className={styles.label}>Détour</label>
+        <input
+          id="detour"
+          type="text"
+          value={detourQuery}
+          onChange={(e) => {
+            setDetourQuery(e.target.value);
+            handleSearch(e.target.value, setDetourResults);
+          }}
+          placeholder="Point de détour"
+          className={styles.searchInput}
+        />
+        {detourResults.length > 0 && (
+          <ul className={styles.searchResults}>
+            {detourResults.map((place) => (
+              <li
+                key={place.id}
+                onClick={() => handleSelectDetour(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 || !selectedDetour || !selectedEnd}
+        className={`${styles.searchButton} ${loading || !selectedStart || !selectedDetour || !selectedEnd ? styles.disabled : ''}`}
+      >
+        {loading ? 'Calcul...' : 'Calculer l\'itinéraire'}
+      </button>
+    </div>
+  );
+};
+
+export default DetourRouteSearch;