@wasto/cms-components 1.5.10

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@wasto/cms-components",
+  "version": "1.5.10",
+  "description": "Wast'O CMS React Native components",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@maplibre/maplibre-react-native": "*",
+    "@react-native-async-storage/async-storage": "*",
+    "@react-navigation/bottom-tabs": "*",
+    "@sentry/react-native": "*",
+    "@wasto/sdk": "*",
+    "expo-haptics": "*",
+    "expo-image": "*",
+    "expo-image-picker": "*",
+    "expo-linear-gradient": "*",
+    "expo-router": "*",
+    "lucide-react-native": "*",
+    "maplibre-gl": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-markdown-display": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "peerDependenciesMeta": {
+    "@maplibre/maplibre-react-native": {
+      "optional": true
+    },
+    "@sentry/react-native": {
+      "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
+    "expo-linear-gradient": {
+      "optional": true
+    },
+    "expo-router": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@maplibre/maplibre-react-native": "11.3.6",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@sentry/react-native": "~6.22.0",
+    "@types/react": "~19.2.2",
+    "expo-haptics": "~15.0.7",
+    "expo-linear-gradient": "~15.0.8",
+    "maplibre-gl": "^4.7.0",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-markdown-display": "^7.0.2",
+    "react-native-reanimated": "~4.1.1",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2",
+    "@wasto/sdk": "1.0.3"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/announcement-modal/AnnouncementModal.tsx

@@ -0,0 +1,183 @@
+import type { ReactNode } from "react";
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { X } from "lucide-react-native";
+import { useAnnouncements } from "../../contexts/AnnouncementsContext";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { getContrastColor } from "../../helpers/getContrastColor";
+import { Button } from "../button/Button";
+import { hapticLight } from "../../helpers/haptics";
+import { SPACE } from "../../helpers/layout";
+
+/** Oversized circle (relative to sheet width) → gentle convex arc. */
+const CIRCLE_WIDTH_PCT = "500%";
+const CIRCLE_LEFT_PCT = "-200%";
+/** White sheet overlaps the green header just below the title. */
+const CIRCLE_OVERLAP = 28;
+
+export function AnnouncementModal(): ReactNode {
+    const { announcement, forceVisible, dismiss } = useAnnouncements();
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const bottomInset = useSafeAreaPadding(["bottom"]);
+
+    const visible = forceVisible && !!announcement;
+    const contrast = getContrastColor(theme.colors.primary);
+    const sheetColor = theme.colors.surface;
+
+    const handleDismiss = async () => {
+        await hapticLight();
+        await dismiss();
+    };
+
+    return (
+        <Modal visible={visible} animationType="slide" onRequestClose={handleDismiss}>
+            <View style={[styles.root, { backgroundColor: theme.colors.primary }]}>
+                <View
+                    style={[
+                        styles.header,
+                        {
+                            paddingTop:
+                                (typeof topInset.paddingTop === "number"
+                                    ? topInset.paddingTop
+                                    : 0) + SPACE.sectionY,
+                        },
+                    ]}
+                >
+                    <View style={styles.headerTop}>
+                        <Text style={[styles.eyebrow, { color: contrast }]}>Annonce</Text>
+                        <Pressable
+                            onPress={handleDismiss}
+                            style={[styles.closeBtn, { backgroundColor: sheetColor }]}
+                            hitSlop={12}
+                            accessibilityRole="button"
+                            accessibilityLabel="Fermer"
+                        >
+                            <X size={18} color={theme.colors.primary} />
+                        </Pressable>
+                    </View>
+                    <Text style={[styles.title, { color: contrast }]}>
+                        {announcement?.title}
+                    </Text>
+                </View>
+
+                <View style={styles.sheet}>
+                    <View
+                        pointerEvents="none"
+                        style={[
+                            styles.circle,
+                            {
+                                backgroundColor: sheetColor,
+                                top: -CIRCLE_OVERLAP,
+                            },
+                        ]}
+                    />
+                    <View
+                        style={[
+                            styles.body,
+                            {
+                                paddingBottom: Math.max(
+                                    SPACE.sectionY,
+                                    typeof bottomInset.paddingBottom === "number"
+                                        ? bottomInset.paddingBottom + SPACE.pageX
+                                        : SPACE.sectionY,
+                                ),
+                            },
+                        ]}
+                    >
+                        <ScrollView
+                            style={styles.bodyScroll}
+                            contentContainerStyle={styles.bodyScrollContent}
+                            bounces={false}
+                            showsVerticalScrollIndicator={false}
+                        >
+                            <Text style={[styles.bodyText, { color: t.colors.muted }]}>
+                                {announcement?.body}
+                            </Text>
+                        </ScrollView>
+                        <Button
+                            onPress={handleDismiss}
+                            style={[styles.cta, { borderRadius: t.radii.pill }]}
+                        >
+                            C'est compris !
+                        </Button>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        height: "100%",
+        overflow: "hidden",
+    },
+    header: {
+        paddingHorizontal: SPACE.pageX + 16,
+        paddingBottom: SPACE.sectionY,
+        gap: SPACE.stack,
+    },
+    headerTop: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingVertical: 4,
+    },
+    eyebrow: {
+        fontSize: 16,
+        fontWeight: "700",
+        paddingVertical: 4,
+    },
+    closeBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        borderRadius: SPACE.iconHit / 2,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: "800",
+        lineHeight: 34,
+        paddingRight: SPACE.iconHit + SPACE.stack,
+        paddingBottom: SPACE.stack,
+    },
+    sheet: {
+        flex: 1,
+        position: "relative",
+    },
+    circle: {
+        position: "absolute",
+        left: CIRCLE_LEFT_PCT,
+        width: CIRCLE_WIDTH_PCT,
+        aspectRatio: 1,
+        borderRadius: 9999,
+    },
+    body: {
+        flex: 1,
+        paddingHorizontal: SPACE.pageX + 16,
+        paddingTop: CIRCLE_OVERLAP + SPACE.sectionY,
+        justifyContent: "space-between",
+        gap: 24,
+        zIndex: 1,
+    },
+    bodyScroll: {
+        flexGrow: 0,
+        flexShrink: 1,
+    },
+    bodyScrollContent: {
+        paddingBottom: 8,
+    },
+    bodyText: {
+        fontSize: 16,
+        lineHeight: 24,
+    },
+    cta: {
+        height: 52,
+        alignSelf: "stretch",
+    },
+});

package/src/components/article/Article.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { ArticleExcerpts, ArticlePropsExcerpts } from "./ArticleExcerpts";
+import { ArticleList, ArticlePropsList } from "./ArticleList";
+import { ArticlePropsSingle, ArticleSingle } from "./ArticleSingle";
+
+export type ArticleDisplayMode = "single" | "list" | "excerpts";
+
+export type ArticleProps =
+    | ArticlePropsSingle
+    | ArticlePropsList
+    | ArticlePropsExcerpts
+
+export function Article(props: ArticleProps): ReactNode {
+    switch(props.displayMode) {
+    case "single":
+        return <ArticleSingle {...props}/>
+    case "list":
+        return <ArticleList {...props}/>
+    case "excerpts":
+        return <ArticleExcerpts {...props}/>
+    }
+}

package/src/components/article/ArticleCard.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Image } from "expo-image";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { Title } from "../title/Title";
+import { Button } from "../button/Button";
+import { formatArticleDate, stripToExcerpt, type BlogPost } from "../../helpers/blogPost";
+import { publicMediaUrl } from "../../helpers/publicMediaUrl";
+import { useWasto } from "../../contexts/WastoContext";
+import { cardStyle } from "../../helpers/themeStyles";
+
+export type ArticleCardProps = {
+    post: BlogPost;
+    excerptLength?: number;
+    onRead: () => void;
+};
+
+export function ArticleCard({
+    post,
+    excerptLength = 140,
+    onRead,
+}: ArticleCardProps): ReactNode {
+    const { theme } = useTheme();
+    const { apiUrl } = useWasto();
+    const themedStyles = createThemedStyles(theme);
+    const cover = publicMediaUrl(apiUrl, post.coverMediaId);
+    const date = formatArticleDate(post.publishedAt || post.createdAt);
+    const excerpt = stripToExcerpt(post.content, excerptLength);
+
+    return (
+        <View style={[styles.card, cardStyle(theme)]}>
+            {cover ? (
+                <Image source={cover} style={styles.cover} contentFit="cover" />
+            ) : (
+                <View style={[styles.accentBar, { backgroundColor: theme.colors.primary }]} />
+            )}
+            <View style={styles.body}>
+                <Title text={post.title} level="3" />
+                {date ? <Text style={themedStyles.meta}>{date}</Text> : null}
+                {excerpt ? <Text style={themedStyles.excerpt}>{excerpt}</Text> : null}
+                <Button variant="outline" onPress={onRead}>
+                    Lire l'article
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        meta: {
+            color: theme.colors.muted ?? theme.colors.onSurface,
+            fontSize: 12,
+            fontWeight: "500",
+        },
+        excerpt: {
+            color: theme.colors.onSurface,
+            opacity: 0.85,
+            fontSize: 13,
+            lineHeight: 18,
+        },
+    });
+
+const styles = StyleSheet.create({
+    card: {
+        overflow: "hidden",
+    },
+    accentBar: {
+        height: 5,
+        width: "100%",
+    },
+    cover: {
+        width: "100%",
+        height: 160,
+    },
+    body: {
+        padding: 16,
+        gap: 10,
+    },
+});

package/src/components/article/ArticleExcerpts.tsx

@@ -0,0 +1,80 @@
+import { useState, type ReactNode } from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useBlogPosts } from "../../hooks/useBlogPosts";
+import type { BlogPost } from "../../helpers/blogPost";
+import { ArticleCard } from "./ArticleCard";
+import { ArticleReaderModal } from "./ArticleReaderModal";
+
+export type ArticlePropsExcerpts = {
+    displayMode: "excerpts";
+    excerptLength: number;
+};
+
+export function ArticleExcerpts({
+    excerptLength,
+}: ArticlePropsExcerpts): ReactNode {
+    const { theme } = useTheme();
+    const { posts, isLoading, error } = useBlogPosts();
+    const [selected, setSelected] = useState<BlogPost | null>(null);
+
+    if (isLoading && posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <ActivityIndicator color={theme.colors.primary} />
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Chargement des articles…
+                </Text>
+            </View>
+        );
+    }
+
+    if (error) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.error, textAlign: "center" }}>{error}</Text>
+            </View>
+        );
+    }
+
+    if (posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Aucun article pour le moment.
+                </Text>
+            </View>
+        );
+    }
+
+    return (
+        <View style={styles.list}>
+            {posts.map((post) => (
+                <ArticleCard
+                    key={post.id}
+                    post={post}
+                    excerptLength={excerptLength || 120}
+                    onRead={() => setSelected(post)}
+                />
+            ))}
+            <ArticleReaderModal
+                visible={!!selected}
+                post={selected}
+                onClose={() => setSelected(null)}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    list: {
+        gap: 12,
+    },
+    state: {
+        minHeight: 80,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 16,
+    },
+});

package/src/components/article/ArticleList.tsx

@@ -0,0 +1,114 @@
+import { useState, type ReactNode } from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Button } from "../button/Button";
+import { useBlogPosts } from "../../hooks/useBlogPosts";
+import type { BlogPost } from "../../helpers/blogPost";
+import { ArticleCard } from "./ArticleCard";
+import { ArticleReaderModal } from "./ArticleReaderModal";
+
+export type ArticlePropsList = {
+    displayMode: "list";
+    itemsPerPage?: number;
+    showPagination?: boolean;
+};
+
+export function ArticleList({
+    itemsPerPage = 10,
+    showPagination = false,
+}: ArticlePropsList): ReactNode {
+    const { theme } = useTheme();
+    const { posts, isLoading, error } = useBlogPosts();
+    const [page, setPage] = useState(0);
+    const [selected, setSelected] = useState<BlogPost | null>(null);
+
+    const size = Math.max(1, itemsPerPage);
+    const pageCount = Math.max(1, Math.ceil(posts.length / size));
+    const safePage = Math.min(page, pageCount - 1);
+    const slice = showPagination
+        ? posts.slice(safePage * size, safePage * size + size)
+        : posts.slice(0, size);
+
+    if (isLoading && posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <ActivityIndicator color={theme.colors.primary} />
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Chargement des articles…
+                </Text>
+            </View>
+        );
+    }
+
+    if (error) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.error, textAlign: "center" }}>{error}</Text>
+            </View>
+        );
+    }
+
+    if (posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Aucun article pour le moment.
+                </Text>
+            </View>
+        );
+    }
+
+    return (
+        <View style={styles.list}>
+            {slice.map((post) => (
+                <ArticleCard key={post.id} post={post} onRead={() => setSelected(post)} />
+            ))}
+            {showPagination && pageCount > 1 ? (
+                <View style={styles.pagination}>
+                    <Button
+                        variant="ghost"
+                        disabled={safePage === 0}
+                        onPress={() => setPage((p) => Math.max(0, p - 1))}
+                    >
+                        Précédent
+                    </Button>
+                    <Text style={{ color: theme.colors.onBackground, opacity: 0.6 }}>
+                        Page {safePage + 1} / {pageCount}
+                    </Text>
+                    <Button
+                        variant="ghost"
+                        disabled={safePage >= pageCount - 1}
+                        onPress={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+                    >
+                        Suivant
+                    </Button>
+                </View>
+            ) : null}
+            <ArticleReaderModal
+                visible={!!selected}
+                post={selected}
+                onClose={() => setSelected(null)}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    list: {
+        gap: 12,
+    },
+    pagination: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        paddingTop: 4,
+    },
+    state: {
+        minHeight: 80,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 16,
+    },
+});