@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/article/ArticleMarkdown.tsx

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

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

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