@wasto/cms-components 1.5.10

package/src/components/notifications/NotificationsScreen.tsx

@@ -0,0 +1,247 @@
+import { useCallback, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    FlatList,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme, cardStyle } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import {
+    useCityAnnouncements,
+    type CityAnnouncementItem,
+} from "../../hooks/useCityAnnouncements";
+import { Button } from "../button/Button";
+
+function formatSentAt(value?: string | null) {
+    if (!value) return null;
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) return null;
+    return d.toLocaleDateString("fr-FR", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+    });
+}
+
+function excerpt(body: string, max = 120) {
+    const t = body.trim().replace(/\s+/g, " ");
+    if (t.length <= max) return t;
+    return `${t.slice(0, max).trim()}…`;
+}
+
+/** Inbox list — detail uses the shared AnnouncementModal (WastoProvider). */
+export function NotificationsScreen(): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const {
+        items,
+        loading,
+        error,
+        hasMore,
+        loadMore,
+        reload,
+        openItem,
+        hasPlaceSelected,
+        totalCount,
+    } = useCityAnnouncements();
+
+    const renderItem = useCallback(
+        ({ item }: { item: CityAnnouncementItem }) => {
+            const dateLabel = formatSentAt(item.sentAt);
+            return (
+                <Pressable
+                    onPress={() => void openItem(item)}
+                    style={[
+                        styles.row,
+                        cardStyle(theme),
+                        { borderRadius: t.radii.md },
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel={item.title}
+                >
+                    <View style={styles.rowHeader}>
+                        <Text
+                            style={[styles.rowTitle, { color: theme.colors.onSurface }]}
+                            numberOfLines={2}
+                        >
+                            {item.title}
+                        </Text>
+                        {item.unread ? (
+                            <View
+                                style={[
+                                    styles.unreadDot,
+                                    { backgroundColor: theme.colors.primary },
+                                ]}
+                            />
+                        ) : null}
+                    </View>
+                    {dateLabel ? (
+                        <Text style={[styles.rowMeta, { color: t.colors.muted }]}>
+                            {dateLabel}
+                        </Text>
+                    ) : null}
+                    <Text
+                        style={[styles.rowBody, { color: t.colors.muted }]}
+                        numberOfLines={3}
+                    >
+                        {excerpt(item.body)}
+                    </Text>
+                </Pressable>
+            );
+        },
+        [openItem, t.colors.muted, t.radii.md, theme],
+    );
+
+    if (!hasPlaceSelected) {
+        return (
+            <View style={styles.center}>
+                <Text style={[styles.emptyTitle, { color: theme.colors.onSurface }]}>
+                    Aucun secteur sélectionné
+                </Text>
+                <Text style={[styles.emptyText, { color: t.colors.muted }]}>
+                    Choisissez votre rue pour voir les notifications de votre ville.
+                </Text>
+            </View>
+        );
+    }
+
+    if (loading && items.length === 0) {
+        return (
+            <View style={styles.center}>
+                <ActivityIndicator color={theme.colors.primary} />
+            </View>
+        );
+    }
+
+    if (error && items.length === 0) {
+        return (
+            <View style={styles.center}>
+                <Text style={[styles.emptyTitle, { color: theme.colors.error }]}>
+                    {error}
+                </Text>
+                <Button variant="secondary" onPress={() => void reload()} style={styles.retry}>
+                    Réessayer
+                </Button>
+            </View>
+        );
+    }
+
+    return (
+        <View style={styles.screen}>
+            <FlatList
+                data={items}
+                keyExtractor={(item) => item.id}
+                renderItem={renderItem}
+                contentContainerStyle={styles.list}
+                onEndReached={() => {
+                    if (hasMore) loadMore();
+                }}
+                onEndReachedThreshold={0.4}
+                ListEmptyComponent={
+                    <View style={styles.centerInline}>
+                        <Text style={[styles.emptyTitle, { color: theme.colors.onSurface }]}>
+                            Aucune notification
+                        </Text>
+                        <Text style={[styles.emptyText, { color: t.colors.muted }]}>
+                            Les annonces de votre ville apparaîtront ici.
+                        </Text>
+                    </View>
+                }
+                ListFooterComponent={
+                    hasMore ? (
+                        <Button
+                            variant="ghost"
+                            onPress={loadMore}
+                            style={styles.loadMore}
+                        >
+                            {`Voir plus (${items.length}/${totalCount})`}
+                        </Button>
+                    ) : items.length > 0 ? (
+                        <Text style={[styles.footerHint, { color: t.colors.muted }]}>
+                            {totalCount} notification{totalCount > 1 ? "s" : ""}
+                        </Text>
+                    ) : null
+                }
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+    },
+    list: {
+        paddingHorizontal: SPACE.pageX,
+        paddingVertical: SPACE.sectionY,
+        gap: SPACE.stack,
+        flexGrow: 1,
+    },
+    row: {
+        padding: SPACE.cardPad,
+        gap: 6,
+    },
+    rowHeader: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+    },
+    rowTitle: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    unreadDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        marginTop: 5,
+    },
+    rowMeta: {
+        fontSize: 12,
+        fontWeight: "600",
+    },
+    rowBody: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    center: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: SPACE.pageX,
+        gap: 8,
+    },
+    centerInline: {
+        paddingVertical: 48,
+        alignItems: "center",
+        gap: 8,
+    },
+    emptyTitle: {
+        fontSize: 17,
+        fontWeight: "700",
+        textAlign: "center",
+    },
+    emptyText: {
+        fontSize: 14,
+        textAlign: "center",
+        lineHeight: 20,
+    },
+    retry: {
+        marginTop: 12,
+        alignSelf: "stretch",
+    },
+    loadMore: {
+        marginTop: 8,
+    },
+    footerHint: {
+        textAlign: "center",
+        fontSize: 12,
+        marginTop: 8,
+        marginBottom: 16,
+    },
+});

package/src/components/page/Page.tsx

@@ -0,0 +1,64 @@
+import { PropsWithChildren, type ReactNode } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { SPACE } from "../../helpers/layout";
+import { Theme } from "../../types/Theme";
+
+export type PageProps = PropsWithChildren & {
+    /** When false, content fills the screen without scrolling (e.g. fullScreen map). Default true. */
+    scroll?: boolean;
+};
+
+/**
+ * Page shell: top safe area + optional vertical scroll.
+ * No global horizontal padding — each block uses ContentInset or is full-bleed
+ * (map, calendar grid). Bottom inset is handled by BottomTab when using tabs.
+ */
+export function Page({ children, scroll = true }: PageProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+
+    return (
+        <View style={[styles.root, themedStyles.root, topInset]}>
+            {scroll ? (
+                <ScrollView
+                    style={styles.scroll}
+                    contentContainerStyle={styles.scrollContent}
+                    keyboardShouldPersistTaps="handled"
+                    showsVerticalScrollIndicator={false}
+                >
+                    {children}
+                </ScrollView>
+            ) : (
+                <View style={styles.fill}>{children}</View>
+            )}
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        root: {
+            backgroundColor: theme.colors.background,
+        },
+    });
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+    },
+    scroll: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+        gap: SPACE.sectionY,
+        paddingBottom: 28,
+    },
+    fill: {
+        flex: 1,
+        gap: SPACE.sectionY,
+    },
+});

package/src/components/parapraph/Paragraph.tsx

@@ -0,0 +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%",
+    },
+});

package/src/components/profile/ProfileScreen.tsx

@@ -0,0 +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,
+    },
+});