@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/parapraph/Paragraph.tsx

@@ -1,67 +1,67 @@
-import type { ReactNode } from "react";
-import { StyleProp, StyleSheet, Text, TextStyle, View } from "react-native";
-import { Theme } from "../../types/Theme";
-import { useTheme } from "../../contexts/ThemeContext";
-import type { TextAlignHorizontal, TextAlignVertical } from "../title/Title";
-
-export type PararaphProps = {
-    text: string;
-    style?: StyleProp<TextStyle>;
-    alignHorizontal?: TextAlignHorizontal;
-    alignVertical?: TextAlignVertical;
-};
-
-function justifyForVertical(align: TextAlignVertical | undefined): "flex-start" | "center" | "flex-end" {
-    if (align === "middle") return "center";
-    if (align === "bottom") return "flex-end";
-    return "flex-start";
-}
-
-function textAlignFor(align: TextAlignHorizontal | undefined): "left" | "center" | "right" {
-    if (align === "center" || align === "right") return align;
-    return "left";
-}
-
-export function Paragraph({
-    text,
-    style,
-    alignHorizontal,
-    alignVertical,
-}: PararaphProps): ReactNode {
-    const { theme } = useTheme();
-    const themedStyles = createThemedStyles(theme);
-    const textAlign = textAlignFor(alignHorizontal);
-
-    const content = (
-        <Text style={[styles.text, themedStyles.text, { textAlign }, style]}>
-            {text}
-        </Text>
-    );
-
-    if (!alignVertical || alignVertical === "top") {
-        return content;
-    }
-
-    return (
-        <View style={[styles.alignWrap, { justifyContent: justifyForVertical(alignVertical) }]}>
-            {content}
-        </View>
-    );
-}
-
-const createThemedStyles = (theme: Theme) => StyleSheet.create({
-    text: {
-        color: theme.colors.onSurface,
-    }
-});
-
-const styles = StyleSheet.create({
-    text: {
-        fontSize: 15,
-        lineHeight: 22,
-    },
-    alignWrap: {
-        minHeight: 22,
-        width: "100%",
-    },
-});
+import type { ReactNode } from "react";
+import { StyleProp, StyleSheet, Text, TextStyle, View } from "react-native";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import type { TextAlignHorizontal, TextAlignVertical } from "../title/Title";
+
+export type PararaphProps = {
+    text: string;
+    style?: StyleProp<TextStyle>;
+    alignHorizontal?: TextAlignHorizontal;
+    alignVertical?: TextAlignVertical;
+};
+
+function justifyForVertical(align: TextAlignVertical | undefined): "flex-start" | "center" | "flex-end" {
+    if (align === "middle") return "center";
+    if (align === "bottom") return "flex-end";
+    return "flex-start";
+}
+
+function textAlignFor(align: TextAlignHorizontal | undefined): "left" | "center" | "right" {
+    if (align === "center" || align === "right") return align;
+    return "left";
+}
+
+export function Paragraph({
+    text,
+    style,
+    alignHorizontal,
+    alignVertical,
+}: PararaphProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const textAlign = textAlignFor(alignHorizontal);
+
+    const content = (
+        <Text style={[styles.text, themedStyles.text, { textAlign }, style]}>
+            {text}
+        </Text>
+    );
+
+    if (!alignVertical || alignVertical === "top") {
+        return content;
+    }
+
+    return (
+        <View style={[styles.alignWrap, { justifyContent: justifyForVertical(alignVertical) }]}>
+            {content}
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) => StyleSheet.create({
+    text: {
+        color: theme.colors.onSurface,
+    }
+});
+
+const styles = StyleSheet.create({
+    text: {
+        fontSize: 15,
+        lineHeight: 22,
+    },
+    alignWrap: {
+        minHeight: 22,
+        width: "100%",
+    },
+});

package/src/components/profile/ProfileScreen.tsx

@@ -1,236 +1,236 @@
-import type { ReactNode } from "react";
-import { Alert, StyleSheet, Text, View } from "react-native";
-import { MapPin, Trash2 } from "lucide-react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useLocal } from "../../contexts/LocalContext";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-import { hapticSelection } from "../../helpers/haptics";
-import { Button } from "../button/Button";
-
-function RecapRow({
-    label,
-    value,
-    muted,
-    onSurface,
-}: {
-    label: string;
-    value: string;
-    muted: string;
-    onSurface: string;
-}) {
-    return (
-        <View style={styles.recapRow}>
-            <Text style={[styles.recapLabel, { color: muted }]}>{label}</Text>
-            <Text style={[styles.recapValue, { color: onSurface }]} numberOfLines={2}>
-                {value}
-            </Text>
-        </View>
-    );
-}
-
-/** Profil local : récap secteur + actions changer / supprimer. */
-export function ProfileScreen(): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const {
-        hasPlaceSelected,
-        placeMeta,
-        clearPlaceSelection,
-        clearLocalData,
-        isLoading,
-    } = useLocal();
-
-    const cityName = placeMeta?.cityName?.trim() || "—";
-    const streetName = placeMeta?.streetName?.trim() || "—";
-    const sectorName = placeMeta?.sectorName?.trim() || "—";
-
-    const onChangeSector = async () => {
-        await hapticSelection();
-        await clearPlaceSelection();
-    };
-
-    const onDeleteData = () => {
-        Alert.alert(
-            "Supprimer mes données",
-            "Cela efface votre secteur, l’identifiant de cet appareil et les préférences locales. Les quiz déjà enregistrés côté serveur ne sont pas retirés ici.",
-            [
-                { text: "Annuler", style: "cancel" },
-                {
-                    text: "Supprimer",
-                    style: "destructive",
-                    onPress: () => {
-                        void (async () => {
-                            await hapticSelection();
-                            await clearLocalData();
-                        })();
-                    },
-                },
-            ],
-        );
-    };
-
-    return (
-        <View style={styles.screen}>
-            <View style={styles.section}>
-                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
-                    MON SECTEUR
-                </Text>
-                <View
-                    style={[
-                        styles.recapCard,
-                        cardStyle(theme),
-                        { borderRadius: t.radii.lg },
-                    ]}
-                >
-                    <View style={styles.recapHead}>
-                        <View
-                            style={[
-                                styles.recapIcon,
-                                {
-                                    backgroundColor: theme.colors.primary,
-                                    borderRadius: t.radii.pill,
-                                },
-                            ]}
-                        >
-                            <MapPin size={18} color={theme.colors.onPrimary} />
-                        </View>
-                        <Text
-                            style={[styles.recapTitle, { color: theme.colors.onSurface }]}
-                        >
-                            {hasPlaceSelected ? "Zone de collecte" : "Aucune zone"}
-                        </Text>
-                    </View>
-
-                    {hasPlaceSelected ? (
-                        <View style={styles.recapList}>
-                            <RecapRow
-                                label="Ville"
-                                value={cityName}
-                                muted={t.colors.muted}
-                                onSurface={theme.colors.onSurface}
-                            />
-                            <View
-                                style={[
-                                    styles.divider,
-                                    { backgroundColor: theme.colors.border },
-                                ]}
-                            />
-                            <RecapRow
-                                label="Adresse"
-                                value={streetName}
-                                muted={t.colors.muted}
-                                onSurface={theme.colors.onSurface}
-                            />
-                            <View
-                                style={[
-                                    styles.divider,
-                                    { backgroundColor: theme.colors.border },
-                                ]}
-                            />
-                            <RecapRow
-                                label="Secteur"
-                                value={sectorName}
-                                muted={t.colors.muted}
-                                onSurface={theme.colors.onSurface}
-                            />
-                        </View>
-                    ) : (
-                        <Text style={[styles.emptyHint, { color: t.colors.muted }]}>
-                            Choisissez votre rue pour personnaliser les collectes et
-                            notifications.
-                        </Text>
-                    )}
-                </View>
-            </View>
-
-            <View style={styles.section}>
-                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
-                    ACTIONS
-                </Text>
-                <View style={styles.actions}>
-                    <Button
-                        variant="secondary"
-                        leftIcon={MapPin}
-                        loading={isLoading}
-                        onPress={() => void onChangeSector()}
-                    >
-                        Changer de secteur
-                    </Button>
-                    <Button
-                        variant="ghost"
-                        leftIcon={Trash2}
-                        loading={isLoading}
-                        onPress={onDeleteData}
-                        textStyle={{ color: theme.colors.error }}
-                    >
-                        Supprimer mes données
-                    </Button>
-                </View>
-            </View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    screen: {
-        flex: 1,
-        paddingHorizontal: SPACE.pageX,
-        paddingVertical: SPACE.sectionY,
-        gap: SPACE.sectionY,
-    },
-    section: {
-        gap: 10,
-    },
-    sectionLabel: {
-        fontSize: 12,
-        fontWeight: "700",
-        letterSpacing: 0.6,
-    },
-    recapCard: {
-        padding: SPACE.cardPad,
-        gap: 16,
-    },
-    recapHead: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 12,
-    },
-    recapIcon: {
-        width: SPACE.iconHit,
-        height: SPACE.iconHit,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    recapTitle: {
-        flex: 1,
-        fontSize: 17,
-        fontWeight: "700",
-    },
-    recapList: {
-        gap: 0,
-    },
-    recapRow: {
-        gap: 4,
-        paddingVertical: 10,
-    },
-    recapLabel: {
-        fontSize: 12,
-        fontWeight: "600",
-    },
-    recapValue: {
-        fontSize: 16,
-        fontWeight: "700",
-    },
-    divider: {
-        height: StyleSheet.hairlineWidth,
-        width: "100%",
-    },
-    emptyHint: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    actions: {
-        gap: SPACE.stack,
-    },
-});
+import type { ReactNode } from "react";
+import { Alert, StyleSheet, Text, View } from "react-native";
+import { MapPin, Trash2 } from "lucide-react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useLocal } from "../../contexts/LocalContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import { hapticSelection } from "../../helpers/haptics";
+import { Button } from "../button/Button";
+
+function RecapRow({
+    label,
+    value,
+    muted,
+    onSurface,
+}: {
+    label: string;
+    value: string;
+    muted: string;
+    onSurface: string;
+}) {
+    return (
+        <View style={styles.recapRow}>
+            <Text style={[styles.recapLabel, { color: muted }]}>{label}</Text>
+            <Text style={[styles.recapValue, { color: onSurface }]} numberOfLines={2}>
+                {value}
+            </Text>
+        </View>
+    );
+}
+
+/** Profil local : récap secteur + actions changer / supprimer. */
+export function ProfileScreen(): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const {
+        hasPlaceSelected,
+        placeMeta,
+        clearPlaceSelection,
+        clearLocalData,
+        isLoading,
+    } = useLocal();
+
+    const cityName = placeMeta?.cityName?.trim() || "—";
+    const streetName = placeMeta?.streetName?.trim() || "—";
+    const sectorName = placeMeta?.sectorName?.trim() || "—";
+
+    const onChangeSector = async () => {
+        await hapticSelection();
+        await clearPlaceSelection();
+    };
+
+    const onDeleteData = () => {
+        Alert.alert(
+            "Supprimer mes données",
+            "Cela efface votre secteur, l’identifiant de cet appareil et les préférences locales. Les quiz déjà enregistrés côté serveur ne sont pas retirés ici.",
+            [
+                { text: "Annuler", style: "cancel" },
+                {
+                    text: "Supprimer",
+                    style: "destructive",
+                    onPress: () => {
+                        void (async () => {
+                            await hapticSelection();
+                            await clearLocalData();
+                        })();
+                    },
+                },
+            ],
+        );
+    };
+
+    return (
+        <View style={styles.screen}>
+            <View style={styles.section}>
+                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
+                    MON SECTEUR
+                </Text>
+                <View
+                    style={[
+                        styles.recapCard,
+                        cardStyle(theme),
+                        { borderRadius: t.radii.lg },
+                    ]}
+                >
+                    <View style={styles.recapHead}>
+                        <View
+                            style={[
+                                styles.recapIcon,
+                                {
+                                    backgroundColor: theme.colors.primary,
+                                    borderRadius: t.radii.pill,
+                                },
+                            ]}
+                        >
+                            <MapPin size={18} color={theme.colors.onPrimary} />
+                        </View>
+                        <Text
+                            style={[styles.recapTitle, { color: theme.colors.onSurface }]}
+                        >
+                            {hasPlaceSelected ? "Zone de collecte" : "Aucune zone"}
+                        </Text>
+                    </View>
+
+                    {hasPlaceSelected ? (
+                        <View style={styles.recapList}>
+                            <RecapRow
+                                label="Ville"
+                                value={cityName}
+                                muted={t.colors.muted}
+                                onSurface={theme.colors.onSurface}
+                            />
+                            <View
+                                style={[
+                                    styles.divider,
+                                    { backgroundColor: theme.colors.border },
+                                ]}
+                            />
+                            <RecapRow
+                                label="Adresse"
+                                value={streetName}
+                                muted={t.colors.muted}
+                                onSurface={theme.colors.onSurface}
+                            />
+                            <View
+                                style={[
+                                    styles.divider,
+                                    { backgroundColor: theme.colors.border },
+                                ]}
+                            />
+                            <RecapRow
+                                label="Secteur"
+                                value={sectorName}
+                                muted={t.colors.muted}
+                                onSurface={theme.colors.onSurface}
+                            />
+                        </View>
+                    ) : (
+                        <Text style={[styles.emptyHint, { color: t.colors.muted }]}>
+                            Choisissez votre rue pour personnaliser les collectes et
+                            notifications.
+                        </Text>
+                    )}
+                </View>
+            </View>
+
+            <View style={styles.section}>
+                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
+                    ACTIONS
+                </Text>
+                <View style={styles.actions}>
+                    <Button
+                        variant="secondary"
+                        leftIcon={MapPin}
+                        loading={isLoading}
+                        onPress={() => void onChangeSector()}
+                    >
+                        Changer de secteur
+                    </Button>
+                    <Button
+                        variant="ghost"
+                        leftIcon={Trash2}
+                        loading={isLoading}
+                        onPress={onDeleteData}
+                        textStyle={{ color: theme.colors.error }}
+                    >
+                        Supprimer mes données
+                    </Button>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        paddingHorizontal: SPACE.pageX,
+        paddingVertical: SPACE.sectionY,
+        gap: SPACE.sectionY,
+    },
+    section: {
+        gap: 10,
+    },
+    sectionLabel: {
+        fontSize: 12,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    recapCard: {
+        padding: SPACE.cardPad,
+        gap: 16,
+    },
+    recapHead: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+    },
+    recapIcon: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    recapTitle: {
+        flex: 1,
+        fontSize: 17,
+        fontWeight: "700",
+    },
+    recapList: {
+        gap: 0,
+    },
+    recapRow: {
+        gap: 4,
+        paddingVertical: 10,
+    },
+    recapLabel: {
+        fontSize: 12,
+        fontWeight: "600",
+    },
+    recapValue: {
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    divider: {
+        height: StyleSheet.hairlineWidth,
+        width: "100%",
+    },
+    emptyHint: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    actions: {
+        gap: SPACE.stack,
+    },
+});

package/src/components/push/PushTokenRegistrar.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { Platform } from "react-native";
+import { useLocal } from "../../contexts/LocalContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { registerExpoPushToken } from "../../push/registerExpoPushToken";
+
+/**
+ * Registers the Expo push token once a deviceId exists.
+ * Renders nothing — mount inside LocalProvider.
+ */
+export function PushTokenRegistrar(): ReactNode {
+    const { deviceId } = useLocal();
+    const { previewMode, reportError } = useWasto();
+    const client = useWastoClient();
+    const lastRegistered = useRef<string | null>(null);
+
+    useEffect(() => {
+        if (previewMode || Platform.OS === "web" || !deviceId) return;
+        if (lastRegistered.current === deviceId) return;
+
+        let cancelled = false;
+
+        void (async () => {
+            try {
+                const token = await registerExpoPushToken({
+                    deviceId,
+                    registerPushToken: (id: string, pushToken: string) =>
+                        client.public.devices.registerPushToken(id, { token: pushToken }),
+                });
+                if (!cancelled && token) {
+                    lastRegistered.current = deviceId;
+                }
+            } catch (error) {
+                if (!cancelled) {
+                    reportError(error, { source: "push", deviceId });
+                }
+            }
+        })();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [client.public.devices, deviceId, previewMode, reportError]);
+
+    return null;
+}