@wasto/cms-components 1.5.10

package/src/components/article/ArticleMarkdown.tsx

@@ -0,0 +1,170 @@
+import { useMemo, type ReactNode } from "react";
+import { Linking, ScrollView, StyleSheet, Text, View } from "react-native";
+import Markdown, { MarkdownIt } from "react-native-markdown-display";
+import { useTheme } from "../../contexts/ThemeContext";
+import { htmlContentToMarkdown } from "../../helpers/htmlContentToMarkdown";
+import { markdownUnderlinePlugin } from "../../helpers/markdownUnderlinePlugin";
+
+export type ArticleMarkdownProps = {
+    children: string;
+};
+
+const markdownIt = MarkdownIt({ typographer: true }).use(markdownUnderlinePlugin);
+
+export function ArticleMarkdown({ children }: ArticleMarkdownProps): ReactNode {
+    const { theme } = useTheme();
+    const border = theme.colors.border;
+    const headerBg = theme.colors.primarySoft ?? `${theme.colors.primary}22`;
+
+    const markdownStyles = useMemo(
+        () =>
+            StyleSheet.create({
+                body: {
+                    color: theme.colors.onBackground,
+                    fontSize: 15,
+                    lineHeight: 22,
+                },
+                heading1: {
+                    color: theme.colors.onBackground,
+                    fontSize: 22,
+                    fontWeight: "700",
+                    marginTop: 12,
+                    marginBottom: 8,
+                },
+                heading2: {
+                    color: theme.colors.onBackground,
+                    fontSize: 19,
+                    fontWeight: "700",
+                    marginTop: 10,
+                    marginBottom: 6,
+                },
+                heading3: {
+                    color: theme.colors.onBackground,
+                    fontSize: 17,
+                    fontWeight: "600",
+                    marginTop: 8,
+                    marginBottom: 4,
+                },
+                paragraph: {
+                    marginTop: 0,
+                    marginBottom: 10,
+                },
+                link: {
+                    color: theme.colors.primary,
+                    textDecorationLine: "underline",
+                },
+                blockquote: {
+                    borderLeftWidth: 3,
+                    borderLeftColor: border,
+                    paddingLeft: 10,
+                    marginVertical: 8,
+                    opacity: 0.9,
+                },
+                code_inline: {
+                    backgroundColor: headerBg,
+                    color: theme.colors.onBackground,
+                    paddingHorizontal: 4,
+                    borderRadius: Math.max(4, Math.round(theme.radius / 2)),
+                    fontSize: 14,
+                },
+                fence: {
+                    backgroundColor: theme.colors.surface,
+                    color: theme.colors.onSurface,
+                    padding: 10,
+                    borderRadius: theme.radius,
+                    marginVertical: 8,
+                    fontSize: 13,
+                },
+                bullet_list: {
+                    marginVertical: 4,
+                },
+                ordered_list: {
+                    marginVertical: 4,
+                },
+                list_item: {
+                    marginVertical: 2,
+                },
+                hr: {
+                    backgroundColor: border,
+                    height: StyleSheet.hairlineWidth,
+                    marginVertical: 12,
+                },
+                table: {
+                    borderWidth: StyleSheet.hairlineWidth,
+                    borderColor: border,
+                    borderRadius: theme.radius,
+                    overflow: "hidden",
+                    minWidth: "100%",
+                },
+                thead: {
+                    backgroundColor: headerBg,
+                },
+                tbody: {},
+                tr: {
+                    flexDirection: "row",
+                    borderBottomWidth: StyleSheet.hairlineWidth,
+                    borderColor: border,
+                },
+                th: {
+                    flex: 1,
+                    minWidth: 88,
+                    paddingVertical: 8,
+                    paddingHorizontal: 10,
+                    fontWeight: "700",
+                    color: theme.colors.onBackground,
+                },
+                td: {
+                    flex: 1,
+                    minWidth: 88,
+                    paddingVertical: 8,
+                    paddingHorizontal: 10,
+                },
+                ins: {
+                    textDecorationLine: "underline",
+                    color: theme.colors.onBackground,
+                },
+            }),
+        [theme, border, headerBg],
+    );
+
+    const source = useMemo(
+        () => htmlContentToMarkdown((children ?? "").trim()),
+        [children],
+    );
+
+    if (!source) return null;
+
+    return (
+        <Markdown
+            markdownit={markdownIt}
+            style={markdownStyles}
+            rules={{
+                table: (node, children, _parent, styles) => (
+                    <ScrollView
+                        key={node.key}
+                        horizontal
+                        nestedScrollEnabled
+                        bounces={false}
+                        showsHorizontalScrollIndicator
+                    >
+                        <View style={styles._VIEW_SAFE_table}>{children}</View>
+                    </ScrollView>
+                ),
+                ins: (node, children, _parent, styles) => (
+                    <Text key={node.key} style={styles.ins}>
+                        {children}
+                    </Text>
+                ),
+            }}
+            onLinkPress={(url: string) => {
+                const trimmed = url.trim();
+                if (trimmed) {
+                    void Linking.openURL(trimmed);
+                }
+                return false;
+            }}
+        >
+            {source}
+        </Markdown>
+    );
+}

package/src/components/article/ArticleReaderModal.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+import { Modal, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Image } from "expo-image";
+import { XIcon } from "lucide-react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { Title } from "../title/Title";
+import { NavButton } from "../nav-button/NavButton";
+import { formatArticleDate, type BlogPost } from "../../helpers/blogPost";
+import { publicMediaUrl } from "../../helpers/publicMediaUrl";
+import { useWasto } from "../../contexts/WastoContext";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { ArticleMarkdown } from "./ArticleMarkdown";
+
+export type ArticleReaderModalProps = {
+    visible: boolean;
+    post: BlogPost | null;
+    onClose: () => void;
+};
+
+export function ArticleReaderModal({
+    visible,
+    post,
+    onClose,
+}: ArticleReaderModalProps): ReactNode {
+    const { theme } = useTheme();
+    const { apiUrl } = useWasto();
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const cover = publicMediaUrl(apiUrl, post?.coverMediaId);
+    const date = formatArticleDate(post?.publishedAt || post?.createdAt);
+
+    return (
+        <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
+            <View style={[styles.modal, themedStyles.modal]}>
+                <View style={topInset}>
+                    <View style={styles.header}>
+                        <Title text={post?.title ?? "Article"} level="2" numberOfLines={2} />
+                        <NavButton icon={XIcon} onPress={onClose} />
+                    </View>
+                </View>
+                <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                    {cover ? (
+                        <Image
+                            source={cover}
+                            style={[styles.cover, themedStyles.cover]}
+                            contentFit="cover"
+                        />
+                    ) : null}
+                    {date ? <Text style={themedStyles.meta}>{date}</Text> : null}
+                    <ArticleMarkdown>{post?.content ?? ""}</ArticleMarkdown>
+                </ScrollView>
+            </View>
+        </Modal>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        modal: {
+            backgroundColor: theme.colors.background,
+        },
+        cover: {
+            borderRadius: theme.radius,
+        },
+        meta: {
+            color: theme.colors.onBackground,
+            opacity: 0.6,
+            fontSize: 13,
+        },
+    });
+
+const styles = StyleSheet.create({
+    modal: {
+        flex: 1,
+    },
+    header: {
+        padding: 20,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 12,
+    },
+    body: {
+        padding: 20,
+        gap: 16,
+        paddingBottom: 40,
+    },
+    cover: {
+        width: "100%",
+        height: 200,
+    },
+});

package/src/components/article/ArticleSingle.tsx

@@ -0,0 +1,57 @@
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { useState, type ReactNode } from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useBlogPost } from "../../hooks/useBlogPosts";
+import { ArticleReaderModal } from "./ArticleReaderModal";
+import { ArticleCard } from "./ArticleCard";
+
+export type ArticlePropsSingle = {
+    displayMode: "single";
+    articleId: string;
+};
+
+export function ArticleSingle({
+    articleId,
+}: ArticlePropsSingle): ReactNode {
+    const { theme } = useTheme();
+    const { post, isLoading, error } = useBlogPost(articleId);
+    const [open, setOpen] = useState(false);
+
+    if (isLoading) {
+        return (
+            <View style={styles.state}>
+                <ActivityIndicator color={theme.colors.primary} />
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Chargement de l'article…
+                </Text>
+            </View>
+        );
+    }
+
+    if (error || !post) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.error, textAlign: "center" }}>
+                    {error || "Article introuvable"}
+                </Text>
+            </View>
+        );
+    }
+
+    return (
+        <>
+            <ArticleCard post={post} onRead={() => setOpen(true)} />
+            <ArticleReaderModal visible={open} post={post} onClose={() => setOpen(false)} />
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    state: {
+        minHeight: 80,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 16,
+    },
+});