@wasto/cms-components 1.5.10 → 1.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wasto/cms-components",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "description": "Wast'O CMS React Native components",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -77,7 +77,7 @@
     "react-native-reanimated": "~4.1.1",
     "tsup": "^8.5.1",
     "typescript": "^6.0.2",
-    "@wasto/sdk": "1.0.3"
+    "@wasto/sdk": "1.0.4"
   },
   "keywords": [],
   "author": "",

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

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

@@ -1,22 +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}/>
-    }
+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

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