@wasto/cms-components 1.5.10

package/src/components/locations-map/LocationSheet.tsx

@@ -0,0 +1,417 @@
+import { Linking, Platform, Pressable, ScrollView, Share, StyleSheet, Text, View } from "react-native";
+import {
+    ChevronUp,
+    Clock,
+    Copy,
+    MapPin,
+    Phone,
+    X,
+} from "lucide-react-native";
+import { useEffect, useState, type ReactNode } from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+    Easing,
+    interpolate,
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from "react-native-reanimated";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { Button } from "../button/Button";
+import {
+    LOCATION_CATEGORY_META,
+    type MapLocation,
+} from "../../hooks/useLocations";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type LocationSheetProps = {
+    location: MapLocation;
+    onClose: () => void;
+};
+
+const ENTER = { duration: 280, easing: Easing.out(Easing.cubic) };
+const HOURS_ANIM = { duration: 240, easing: Easing.out(Easing.cubic) };
+const DISMISS_Y = 96;
+const DISMISS_V = 900;
+
+async function copyText(value: string) {
+    try {
+        const webNav = (
+            globalThis as {
+                navigator?: { clipboard?: { writeText: (v: string) => Promise<void> } };
+            }
+        ).navigator;
+        if (Platform.OS === "web" && webNav?.clipboard?.writeText) {
+            await webNav.clipboard.writeText(value);
+            return;
+        }
+        await Share.share({ message: value });
+    } catch {
+        // ignore copy failures
+    }
+}
+
+export function LocationSheet({
+    location,
+    onClose,
+}: LocationSheetProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const meta = LOCATION_CATEGORY_META[location.category];
+    const [hoursOpen, setHoursOpen] = useState(false);
+    const translateY = useSharedValue(48);
+    const opacity = useSharedValue(0);
+    const hoursProgress = useSharedValue(0);
+    const hoursHeight = useSharedValue(0);
+
+    useEffect(() => {
+        setHoursOpen(false);
+        hoursProgress.value = 0;
+        translateY.value = 48;
+        opacity.value = 0;
+        translateY.value = withTiming(0, ENTER);
+        opacity.value = withTiming(1, { duration: 220, easing: Easing.out(Easing.cubic) });
+    }, [hoursProgress, location.id, opacity, translateY]);
+
+    const closeSheet = () => {
+        onClose();
+    };
+
+    const dismiss = () => {
+        opacity.value = withTiming(0, { duration: 180, easing: Easing.out(Easing.cubic) });
+        translateY.value = withTiming(420, { duration: 220, easing: Easing.in(Easing.cubic) }, (finished) => {
+            if (finished) runOnJS(closeSheet)();
+        });
+    };
+
+    const pan = Gesture.Pan()
+        .activeOffsetY(16)
+        .failOffsetX([-24, 24])
+        .onUpdate((event) => {
+            translateY.value = Math.max(0, event.translationY);
+        })
+        .onEnd((event) => {
+            if (event.translationY > DISMISS_Y || event.velocityY > DISMISS_V) {
+                runOnJS(dismiss)();
+                return;
+            }
+            translateY.value = withTiming(0, ENTER);
+        });
+
+    const sheetStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+        opacity: opacity.value,
+    }), []);
+
+    const chevronStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${interpolate(hoursProgress.value, [0, 1], [180, 0])}deg` }],
+    }), []);
+
+    const hoursBodyStyle = useAnimatedStyle(() => ({
+        height: hoursHeight.value * hoursProgress.value,
+        opacity: hoursProgress.value,
+        overflow: "hidden" as const,
+    }), []);
+
+    const toggleHours = () => {
+        const next = !hoursOpen;
+        setHoursOpen(next);
+        hoursProgress.value = withTiming(next ? 1 : 0, HOURS_ANIM);
+    };
+
+    const openDirections = () => {
+        const q = encodeURIComponent(
+            location.address || `${location.lat},${location.lon}`,
+        );
+        void Linking.openURL(`https://maps.google.com/?q=${q}`);
+    };
+
+    const callPhone = () => {
+        if (!location.phone) return;
+        void Linking.openURL(`tel:${location.phone}`);
+    };
+
+    const hoursRows = location.hoursRows ?? [];
+    const hasHours = hoursRows.length > 0 || Boolean(location.hoursDisplay);
+    const status = location.hoursStatus;
+
+    return (
+        <GestureDetector gesture={pan}>
+            <Animated.View style={[sheetStyle, styles.sheetAnim]}>
+                <View
+                    style={[
+                        styles.sheet,
+                        cardStyle(theme),
+                        {
+                            borderTopLeftRadius: t.radii.lg,
+                            borderTopRightRadius: t.radii.lg,
+                            borderBottomLeftRadius: 0,
+                            borderBottomRightRadius: 0,
+                        },
+                    ]}
+                >
+                    <View style={[styles.handle, { backgroundColor: theme.colors.border }]} />
+
+                    <View style={styles.head}>
+                        <View style={styles.headText}>
+                            <Text style={[styles.name, { color: theme.colors.onSurface }]}>
+                                {location.name}
+                            </Text>
+                            <Text style={themedStyles.meta}>{meta.label.toUpperCase()}</Text>
+                        </View>
+                        <Pressable
+                            onPress={dismiss}
+                            hitSlop={8}
+                            accessibilityLabel="Fermer"
+                            style={[
+                                styles.closeBtn,
+                                {
+                                    backgroundColor: theme.colors.background,
+                                    borderRadius: t.radii.pill,
+                                },
+                            ]}
+                        >
+                            <X size={16} color={theme.colors.onSurface} />
+                        </Pressable>
+                    </View>
+
+                    <ScrollView
+                        style={styles.bodyScroll}
+                        contentContainerStyle={styles.bodyContent}
+                        showsVerticalScrollIndicator={false}
+                    >
+                        {location.address ? (
+                            <View style={styles.row}>
+                                <MapPin size={16} color={t.colors.muted} />
+                                <Text style={themedStyles.address}>{location.address}</Text>
+                                <Pressable
+                                    onPress={() => void copyText(location.address!)}
+                                    hitSlop={8}
+                                    accessibilityLabel="Copier l’adresse"
+                                >
+                                    <Copy size={16} color={theme.colors.primary} />
+                                </Pressable>
+                            </View>
+                        ) : null}
+
+                        {location.phone ? (
+                            <View style={styles.row}>
+                                <Phone size={16} color={t.colors.muted} />
+                                <Text style={themedStyles.address}>{location.phone}</Text>
+                                <Pressable
+                                    onPress={callPhone}
+                                    hitSlop={8}
+                                    accessibilityLabel="Appeler"
+                                >
+                                    <Phone size={16} color={theme.colors.primary} />
+                                </Pressable>
+                                <Pressable
+                                    onPress={() => void copyText(location.phone!)}
+                                    hitSlop={8}
+                                    accessibilityLabel="Copier le numéro"
+                                >
+                                    <Copy size={16} color={theme.colors.primary} />
+                                </Pressable>
+                            </View>
+                        ) : null}
+
+                        {hasHours ? (
+                            <View
+                                style={[
+                                    styles.hoursBox,
+                                    {
+                                        backgroundColor: theme.colors.background,
+                                        borderRadius: t.radii.md,
+                                    },
+                                ]}
+                            >
+                                <Pressable onPress={toggleHours} style={styles.hoursHeader}>
+                                    <Clock size={16} color={t.colors.muted} />
+                                    <Text style={[styles.hoursStatus, { color: t.colors.muted }]}>
+                                        {status ? (
+                                            <>
+                                                <Text
+                                                    style={{
+                                                        color: status.open
+                                                            ? theme.colors.primary
+                                                            : theme.colors.error,
+                                                        fontWeight: "700",
+                                                    }}
+                                                >
+                                                    {status.open ? "Ouvert" : "Fermé"}
+                                                </Text>
+                                                {status.text.includes(" - ")
+                                                    ? ` - ${status.text.split(" - ").slice(1).join(" - ")}`
+                                                    : ""}
+                                            </>
+                                        ) : (
+                                            location.hoursDisplay ?? "Horaires"
+                                        )}
+                                    </Text>
+                                    <Animated.View style={chevronStyle}>
+                                        <ChevronUp size={16} color={theme.colors.primary} />
+                                    </Animated.View>
+                                </Pressable>
+                                <Animated.View style={hoursBodyStyle}>
+                                    <View
+                                        style={styles.hoursMeasure}
+                                        onLayout={(event) => {
+                                            hoursHeight.value = event.nativeEvent.layout.height;
+                                        }}
+                                    >
+                                        {hoursRows.length > 0 ? (
+                                            <View style={styles.hoursList}>
+                                                {hoursRows.map((row) => (
+                                                    <View key={row.label} style={styles.hoursRow}>
+                                                        <Text style={[styles.hoursDay, { color: t.colors.muted }]}>
+                                                            {row.label}
+                                                        </Text>
+                                                        <Text style={[styles.hoursValue, { color: t.colors.muted }]}>
+                                                            {row.hours}
+                                                        </Text>
+                                                    </View>
+                                                ))}
+                                            </View>
+                                        ) : location.hoursDisplay ? (
+                                            <Text style={[styles.hoursFallback, { color: t.colors.muted }]}>
+                                                {location.hoursDisplay}
+                                            </Text>
+                                        ) : null}
+                                    </View>
+                                </Animated.View>
+                            </View>
+                        ) : null}
+                    </ScrollView>
+
+                    <Button
+                        onPress={openDirections}
+                        rightIcon={MapPin}
+                        style={[styles.cta, { borderRadius: t.radii.md }]}
+                    >
+                        Afficher Itinéraire
+                    </Button>
+                </View>
+            </Animated.View>
+        </GestureDetector>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        meta: {
+            color: theme.colors.muted ?? theme.colors.onSurface,
+            fontSize: 12,
+            fontWeight: "700",
+            letterSpacing: 0.4,
+            marginTop: 4,
+        },
+        address: {
+            color: theme.colors.onSurface,
+            flex: 1,
+            fontSize: 14,
+        },
+    });
+
+const styles = StyleSheet.create({
+    sheetAnim: {
+        maxHeight: "82%",
+    },
+    sheet: {
+        paddingHorizontal: SPACE.pageX,
+        paddingTop: 14,
+        paddingBottom: SPACE.pageX,
+        gap: 24,
+        maxHeight: "100%",
+    },
+    handle: {
+        alignSelf: "center",
+        width: 40,
+        height: 4,
+        borderRadius: 2,
+        marginBottom: 2,
+    },
+    head: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 10,
+    },
+    headText: {
+        flex: 1,
+    },
+    closeBtn: {
+        width: 28,
+        height: 28,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    name: {
+        fontSize: 18,
+        fontWeight: "800",
+    },
+    bodyScroll: {
+        flexGrow: 0,
+        flexShrink: 1,
+        minHeight: 132,
+    },
+    bodyContent: {
+        gap: 22,
+        paddingBottom: 10,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+    },
+    hoursBox: {
+        padding: 12,
+        paddingBottom: 4,
+    },
+    hoursHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        paddingBottom: 8,
+    },
+    hoursStatus: {
+        flex: 1,
+        fontSize: 14,
+    },
+    hoursList: {
+        gap: 6,
+        paddingLeft: 24,
+        paddingBottom: 8,
+    },
+    hoursMeasure: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+    },
+    hoursRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 12,
+    },
+    hoursDay: {
+        fontSize: 13,
+    },
+    hoursValue: {
+        fontSize: 13,
+        textAlign: "right",
+        flex: 1,
+    },
+    hoursFallback: {
+        fontSize: 13,
+        lineHeight: 18,
+        paddingLeft: 24,
+        paddingBottom: 8,
+    },
+    cta: {
+        height: SPACE.buttonH,
+        marginTop: 12,
+    },
+});

package/src/components/locations-map/LocationsMap.native.tsx

@@ -0,0 +1,260 @@
+import {
+    Camera,
+    GeoJSONSource,
+    Layer,
+    Map,
+    type CameraRef,
+    type GeoJSONSourceRef,
+    type PressEventWithFeatures,
+} from "@maplibre/maplibre-react-native";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { StyleSheet, View, type NativeSyntheticEvent } from "react-native";
+import {
+    LOCATION_CATEGORY_META,
+    REUNION_CENTER,
+    isValidLatLon,
+    type LocationCategory,
+    type MapLocation,
+} from "../../hooks/useLocations";
+import type { LocationsMapViewProps } from "./LocationsMapView";
+import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
+
+export type { LocationsMapProps };
+
+const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+const CLUSTER_RADIUS = 56;
+const CLUSTER_MAX_ZOOM = 16;
+const ZOOM_MIN = 8;
+const ZOOM_MAX = 18;
+const FIT_PADDING = { top: 48, right: 48, bottom: 48, left: 48 };
+
+function toGeoJson(locations: MapLocation[]): GeoJSON.FeatureCollection {
+    return {
+        type: "FeatureCollection",
+        features: locations.map((loc) => ({
+            type: "Feature",
+            geometry: { type: "Point", coordinates: [loc.lon, loc.lat] },
+            properties: {
+                id: loc.id,
+                color: LOCATION_CATEGORY_META[loc.category as LocationCategory].color,
+            },
+        })),
+    };
+}
+
+function boundsFromLocations(locations: MapLocation[]): [number, number, number, number] | null {
+    if (locations.length === 0) return null;
+    let west = locations[0]!.lon;
+    let east = locations[0]!.lon;
+    let south = locations[0]!.lat;
+    let north = locations[0]!.lat;
+    for (const loc of locations) {
+        west = Math.min(west, loc.lon);
+        east = Math.max(east, loc.lon);
+        south = Math.min(south, loc.lat);
+        north = Math.max(north, loc.lat);
+    }
+    const pad = west === east && south === north ? 0.01 : 0;
+    return [west - pad, south - pad, east + pad, north + pad];
+}
+
+function isClusterFeature(feature: GeoJSON.Feature): boolean {
+    const props = feature.properties ?? {};
+    return props.cluster === true || typeof props.point_count === "number";
+}
+
+function NativeMapCanvas({
+    locations,
+    center,
+    selectedId,
+    onSelect,
+}: LocationsMapViewProps) {
+    const cameraRef = useRef<CameraRef>(null);
+    const sourceRef = useRef<GeoJSONSourceRef>(null);
+    const [mapReady, setMapReady] = useState(false);
+
+    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],
+    );
+
+    const geojson = useMemo(() => toGeoJson(validLocations), [validLocations]);
+
+    const locationById = useMemo(() => {
+        const byId: Record<string, MapLocation> = {};
+        for (const loc of validLocations) byId[loc.id] = loc;
+        return byId;
+    }, [validLocations]);
+
+    const fitToLocations = useCallback(() => {
+        const bounds = boundsFromLocations(validLocations);
+        if (!bounds) return;
+        cameraRef.current?.fitBounds(bounds, { duration: 400, padding: FIT_PADDING });
+    }, [validLocations]);
+
+    useEffect(() => {
+        if (!mapReady) return;
+        fitToLocations();
+    }, [mapReady, fitToLocations]);
+
+    const onMapLoaded = useCallback(() => {
+        setMapReady(true);
+    }, []);
+
+    const onSourcePress = useCallback(
+        async (event: NativeSyntheticEvent<PressEventWithFeatures>) => {
+            if (typeof event.stopPropagation === "function") {
+                event.stopPropagation();
+            }
+            const feature = event.nativeEvent.features[0];
+            if (!feature) return;
+
+            if (isClusterFeature(feature)) {
+                const clusterId = Number(feature.properties?.cluster_id);
+                const coords =
+                    feature.geometry.type === "Point"
+                        ? (feature.geometry.coordinates as [number, number])
+                        : event.nativeEvent.lngLat;
+                try {
+                    const expansion =
+                        Number.isFinite(clusterId)
+                            ? await sourceRef.current?.getClusterExpansionZoom(clusterId)
+                            : undefined;
+                    const zoom = Math.min(
+                        ZOOM_MAX,
+                        typeof expansion === "number" && Number.isFinite(expansion)
+                            ? expansion
+                            : 14,
+                    );
+                    cameraRef.current?.easeTo({
+                        center: coords,
+                        zoom,
+                        duration: 400,
+                        easing: "ease",
+                    });
+                } catch {
+                    /* ignore native cluster lookup errors */
+                }
+                return;
+            }
+
+            const id = feature.properties?.id;
+            const loc = typeof id === "string" ? locationById[id] : undefined;
+            if (loc) onSelect(loc);
+        },
+        [locationById, onSelect],
+    );
+
+    const selectedKey = selectedId ?? "";
+
+    return (
+        <View style={styles.container}>
+            <Map
+                style={styles.map}
+                mapStyle={MAP_STYLE}
+                onDidFinishLoadingMap={onMapLoaded}
+            >
+                <Camera
+                    ref={cameraRef}
+                    initialViewState={{
+                        zoom: 10,
+                        center: [safeCenter.lon, safeCenter.lat],
+                    }}
+                    minZoom={ZOOM_MIN}
+                    maxZoom={ZOOM_MAX}
+                />
+                {mapReady && validLocations.length > 0 ? (
+                    <GeoJSONSource
+                        id="locations"
+                        ref={sourceRef}
+                        data={geojson}
+                        cluster
+                        clusterRadius={CLUSTER_RADIUS}
+                        clusterMaxZoom={CLUSTER_MAX_ZOOM}
+                        onPress={onSourcePress}
+                    >
+                        <Layer
+                            id="locations-clusters"
+                            type="circle"
+                            filter={["has", "point_count"]}
+                            paint={{
+                                "circle-color": [
+                                    "step",
+                                    ["get", "point_count"],
+                                    "#34d399",
+                                    15,
+                                    "#10b981",
+                                    50,
+                                    "#059669",
+                                ],
+                                "circle-radius": [
+                                    "step",
+                                    ["get", "point_count"],
+                                    18,
+                                    15,
+                                    24,
+                                    50,
+                                    32,
+                                ],
+                                "circle-stroke-color": "#ffffff",
+                                "circle-stroke-width": 2,
+                            }}
+                        />
+                        <Layer
+                            id="locations-cluster-count"
+                            type="symbol"
+                            filter={["has", "point_count"]}
+                            layout={{
+                                "text-field": ["get", "point_count_abbreviated"],
+                                "text-font": ["Noto Sans Regular"],
+                                "text-size": 12,
+                                "text-allow-overlap": true,
+                            }}
+                            paint={{ "text-color": "#ffffff" }}
+                        />
+                        <Layer
+                            id="locations-points"
+                            type="circle"
+                            filter={["!", ["has", "point_count"]]}
+                            paint={{
+                                "circle-radius": [
+                                    "case",
+                                    ["==", ["get", "id"], selectedKey],
+                                    12,
+                                    8,
+                                ],
+                                "circle-color": ["get", "color"],
+                                "circle-stroke-color": [
+                                    "case",
+                                    ["==", ["get", "id"], selectedKey],
+                                    "#111827",
+                                    "#ffffff",
+                                ],
+                                "circle-stroke-width": 2,
+                            }}
+                        />
+                    </GeoJSONSource>
+                ) : null}
+            </Map>
+        </View>
+    );
+}
+
+export function LocationsMap(props: LocationsMapProps) {
+    return <LocationsMapShell {...props} MapCanvas={NativeMapCanvas} />;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        minHeight: 220,
+    },
+    map: {
+        flex: 1,
+    },
+});

package/src/components/locations-map/LocationsMap.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+/** Explicit `.web` — Metro platform extensions were not applied for this nested import. */
+import { LocationsMapView } from "./LocationsMapView.web";
+import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
+
+export type { LocationsMapProps };
+
+/**
+ * Web MapLibre canvas. Native uses `LocationsMap.native.tsx` instead of this file.
+ */
+export function LocationsMap(props: LocationsMapProps): ReactNode {
+    return <LocationsMapShell {...props} MapCanvas={LocationsMapView} />;
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { LocationsMapView } from "./LocationsMapView";
+import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
+
+export type { LocationsMapProps };
+
+/** Web entry: ensures MapLibre `.web` canvas (not the pin-only fallback). */
+export function LocationsMap(props: LocationsMapProps): ReactNode {
+    return <LocationsMapShell {...props} MapCanvas={LocationsMapView} />;
+}