@wasto/cms-components 1.5.10

package/src/components/locations-map/LocationsMapView.web.tsx

@@ -0,0 +1,331 @@
+import {
+    createElement,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import { StyleSheet, Text, View } from "react-native";
+import type { Map as MapLibreMap, Marker } from "maplibre-gl";
+import {
+    LOCATION_CATEGORY_META,
+    REUNION_CENTER,
+    isValidLatLon,
+    type LocationCategory,
+} from "../../hooks/useLocations";
+import { getContrastColor } from "../../helpers/getContrastColor";
+import type { LocationsMapViewProps } from "./LocationsMapView";
+
+import "maplibre-gl/dist/maplibre-gl.css";
+
+/** Vector style (parity with native). Raster fallback if OpenFreeMap fails (CSP/iframe). */
+const OPENFREEMAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+const OSM_RASTER_STYLE = {
+    version: 8 as const,
+    sources: {
+        osm: {
+            type: "raster" as const,
+            tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+            tileSize: 256,
+            attribution: "© OpenStreetMap contributors",
+        },
+    },
+    layers: [{ id: "osm", type: "raster" as const, source: "osm" }],
+};
+const MAX_MARKERS = 80;
+
+/** maplibre-gl@4 dynamic import may be `{ default: ns }` under Metro/webpack. */
+type MapLibreGL = {
+    Map: new (options: {
+        container: HTMLElement;
+        style: string | typeof OSM_RASTER_STYLE;
+        center: [number, number];
+        zoom: number;
+    }) => MapLibreMap;
+    Marker: new (options?: { element?: HTMLElement; anchor?: string }) => Marker;
+    LngLatBounds: new (
+        sw: [number, number],
+        ne: [number, number],
+    ) => { extend: (coord: [number, number]) => unknown };
+};
+
+async function loadMapLibre(): Promise<MapLibreGL> {
+    const mod = await import("maplibre-gl");
+    return ((mod as { default?: MapLibreGL }).default ?? mod) as MapLibreGL;
+}
+
+function buildMarkerElement(category: LocationCategory, selected: boolean) {
+    const color =
+        LOCATION_CATEGORY_META[category]?.color ??
+        LOCATION_CATEGORY_META.recycling.color;
+    const iconColor = getContrastColor(color);
+    const el = document.createElement("button");
+    el.type = "button";
+    el.setAttribute("aria-label", LOCATION_CATEGORY_META[category]?.label ?? "Lieu");
+    el.style.cssText = [
+        "display:flex",
+        "align-items:center",
+        "justify-content:center",
+        "width:32px",
+        "height:32px",
+        "padding:0",
+        "border:none",
+        "background:transparent",
+        "cursor:pointer",
+    ].join(";");
+    el.innerHTML = `
+    <span style="
+      display:flex;align-items:center;justify-content:center;
+      width:32px;height:32px;border-radius:9999px;
+      background:${color};
+      border:3px solid ${selected ? "#111827" : "#ffffff"};
+      box-shadow:0 1px 3px rgba(0,0,0,0.25);
+      transform:scale(${selected ? 1.12 : 1});
+    ">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+        stroke="${iconColor}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
+        <circle cx="12" cy="10" r="3"/>
+      </svg>
+    </span>
+  `;
+    return el;
+}
+
+/**
+ * Web MapLibre GL JS canvas (Metro resolves `.web.tsx` over the pin fallback).
+ * Same OpenFreeMap style as native + Studio PWA preview.
+ */
+export function LocationsMapView({
+    locations,
+    center,
+    selectedId,
+    onSelect,
+}: LocationsMapViewProps) {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const mapRef = useRef<MapLibreMap | null>(null);
+    const maplibreRef = useRef<MapLibreGL | null>(null);
+    const markersRef = useRef<Array<{ id: string; marker: Marker }>>([]);
+    const onSelectRef = useRef(onSelect);
+    const [mapReady, setMapReady] = useState(false);
+    const [mapError, setMapError] = useState<string | null>(null);
+
+    const safeCenter = useMemo(() => {
+        if (isValidLatLon(center.lat, center.lon)) return center;
+        return REUNION_CENTER;
+    }, [center]);
+
+    const validLocations = useMemo(
+        () => locations.filter((loc) => isValidLatLon(loc.lat, loc.lon)),
+        [locations],
+    );
+
+    useEffect(() => {
+        onSelectRef.current = onSelect;
+    }, [onSelect]);
+
+    useEffect(() => {
+        let cancelled = false;
+        let resizeObserver: ResizeObserver | null = null;
+
+        async function init() {
+            if (!containerRef.current || mapRef.current) return;
+            try {
+                const maplibregl = await loadMapLibre();
+                if (cancelled || !containerRef.current) return;
+                maplibreRef.current = maplibregl;
+
+                const map = new maplibregl.Map({
+                    container: containerRef.current,
+                    style: OPENFREEMAP_STYLE,
+                    center: [safeCenter.lon, safeCenter.lat],
+                    zoom: 10,
+                });
+                mapRef.current = map;
+
+                let usedRasterFallback = false;
+                const doResize = () => {
+                    try {
+                        map.resize();
+                    } catch {
+                        /* ignore */
+                    }
+                };
+
+                map.on("load", () => {
+                    doResize();
+                    requestAnimationFrame(doResize);
+                    if (!cancelled) {
+                        setMapError(null);
+                        setMapReady(true);
+                    }
+                });
+
+                map.on("error", (e: { error?: { message?: string } }) => {
+                    const msg =
+                        typeof e?.error?.message === "string"
+                            ? e.error.message
+                            : "Erreur chargement carte";
+                    // OpenFreeMap / vector tiles often blocked in iframe → OSM raster
+                    if (!usedRasterFallback && !cancelled) {
+                        usedRasterFallback = true;
+                        try {
+                            map.setStyle(OSM_RASTER_STYLE as never);
+                            return;
+                        } catch {
+                            /* fall through */
+                        }
+                    }
+                    if (!cancelled) setMapError(msg);
+                });
+
+                if (typeof ResizeObserver !== "undefined" && containerRef.current) {
+                    resizeObserver = new ResizeObserver(() => doResize());
+                    resizeObserver.observe(containerRef.current);
+                }
+
+                requestAnimationFrame(() => {
+                    doResize();
+                    setTimeout(doResize, 50);
+                    setTimeout(doResize, 200);
+                });
+            } catch (err) {
+                if (!cancelled) {
+                    setMapError(
+                        err instanceof Error
+                            ? err.message
+                            : "Impossible de charger MapLibre",
+                    );
+                }
+            }
+        }
+
+        void init();
+
+        return () => {
+            cancelled = true;
+            resizeObserver?.disconnect();
+            for (const m of markersRef.current) m.marker.remove();
+            markersRef.current = [];
+            mapRef.current?.remove();
+            mapRef.current = null;
+            maplibreRef.current = null;
+            setMapReady(false);
+        };
+        // Init once; center used only as initial camera
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        if (!mapReady) return;
+        const map = mapRef.current;
+        const maplibregl = maplibreRef.current;
+        if (!map || !maplibregl) return;
+
+        for (const m of markersRef.current) m.marker.remove();
+        markersRef.current = [];
+
+        const visible = validLocations.slice(0, MAX_MARKERS);
+        for (const loc of visible) {
+            const el = buildMarkerElement(
+                loc.category as LocationCategory,
+                selectedId === loc.id,
+            );
+            el.addEventListener("click", (e) => {
+                e.stopPropagation();
+                onSelectRef.current(loc);
+            });
+            const marker = new maplibregl.Marker({ element: el, anchor: "center" })
+                .setLngLat([loc.lon, loc.lat])
+                .addTo(map);
+            markersRef.current.push({ id: loc.id, marker });
+        }
+    }, [validLocations, selectedId, mapReady]);
+
+    const locationsKey = useMemo(
+        () => validLocations.map((l) => l.id).join("|"),
+        [validLocations],
+    );
+
+    useEffect(() => {
+        if (!mapReady) return;
+        const map = mapRef.current;
+        const maplibregl = maplibreRef.current;
+        if (!map || !maplibregl) return;
+
+        const visible = validLocations.slice(0, MAX_MARKERS);
+        if (visible.length === 0) return;
+
+        if (visible.length === 1) {
+            map.easeTo({
+                center: [visible[0]!.lon, visible[0]!.lat],
+                zoom: 13,
+                duration: 350,
+            });
+            return;
+        }
+
+        const bounds = new maplibregl.LngLatBounds(
+            [visible[0]!.lon, visible[0]!.lat],
+            [visible[0]!.lon, visible[0]!.lat],
+        );
+        for (const loc of visible) bounds.extend([loc.lon, loc.lat]);
+        map.fitBounds(bounds, { padding: 56, maxZoom: 13, duration: 350 });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- locationsKey captures set
+    }, [locationsKey, mapReady]);
+
+    useEffect(() => {
+        if (!mapReady) return;
+        const map = mapRef.current;
+        if (!map || !selectedId) return;
+        const loc = validLocations.find((l) => l.id === selectedId);
+        if (!loc) return;
+        map.easeTo({
+            center: [loc.lon, loc.lat],
+            zoom: Math.max(map.getZoom(), 13),
+            duration: 350,
+        });
+    }, [selectedId, validLocations, mapReady]);
+
+    return (
+        <View style={styles.wrap}>
+            {createElement("div", {
+                ref: containerRef,
+                className: "wasto-locations-map",
+                style: {
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    minHeight: 220,
+                },
+            })}
+            {mapError ? (
+                <View style={styles.errorOverlay} pointerEvents="none">
+                    <Text style={styles.errorText}>Carte indisponible : {mapError}</Text>
+                </View>
+            ) : null}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrap: {
+        flex: 1,
+        minHeight: 220,
+        position: "relative",
+        overflow: "hidden",
+    },
+    errorOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(245,245,245,0.92)",
+        paddingHorizontal: 16,
+    },
+    errorText: {
+        fontSize: 12,
+        textAlign: "center",
+        opacity: 0.7,
+    },
+});

package/src/components/nav-button/NavButton.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { LucideIcon } from "lucide-react-native";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type NavButtonVariant = "default" | "close";
+
+export type NavButtonProps = Omit<PressableProps, "children" | "style"> & {
+    icon: LucideIcon;
+    style?: StyleProp<ViewStyle>;
+    variant?: NavButtonVariant;
+};
+
+export function NavButton({
+    style,
+    icon: Icon,
+    variant = "default",
+    ...props
+}: NavButtonProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const isClose = variant === "close";
+
+    return (
+        <Pressable
+            style={({ pressed }) => [
+                styles.button,
+                {
+                    borderRadius: t.radii.pill,
+                    backgroundColor: isClose ? t.colors.surface : theme.colors.primary,
+                    borderWidth: isClose ? 1 : 0,
+                    borderColor: t.colors.border,
+                },
+                pressed && styles.pressed,
+                style,
+            ]}
+            {...props}
+        >
+            <Icon
+                size={SPACE.iconGlyph}
+                color={isClose ? t.colors.onSurface : theme.colors.onPrimary}
+            />
+        </Pressable>
+    );
+}
+
+const styles = StyleSheet.create({
+    button: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    pressed: {
+        opacity: 0.85,
+    },
+});