@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/challenge/ChallengeVignette.tsx

@@ -1,249 +1,249 @@
-import { useState, type ReactNode } from "react";
-import { ActivityIndicator, Modal, Pressable, StyleSheet, Text, View } from "react-native";
-import { Play, Trophy } from "lucide-react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useChallenges } from "../../hooks/useChallenges";
-import type { ChallengeWithProgress } from "../../hooks/useChallenges";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-import { ChallengesModal } from "./ChallengesModal";
-import { ChallengeModal } from "./ChallengeModal";
-
-export type ChallengeVignetteProps = {};
-
-function isChallengeComplete(c: ChallengeWithProgress) {
-    return !!c.progression?.badge;
-}
-
-function progressLabel(c: ChallengeWithProgress) {
-    const series = c.series ?? [];
-    if (series.length === 0) return isChallengeComplete(c) ? "1/1" : "0/1";
-    const done = series.filter((s) => s.progression).length;
-    return `${done}/${series.length}`;
-}
-
-function progressRatio(c: ChallengeWithProgress) {
-    const series = c.series ?? [];
-    if (series.length === 0) return isChallengeComplete(c) ? 1 : 0;
-    return series.filter((s) => s.progression).length / series.length;
-}
-
-export function ChallengeVignette({}: ChallengeVignetteProps): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const { challenges, isLoading, error } = useChallenges();
-    const [displayAll, setDisplayAll] = useState(false);
-    const [active, setActive] = useState<ChallengeWithProgress | null>(null);
-
-    const preview = challenges.slice(0, 3);
-
-    if (isLoading && !challenges.length) {
-        return (
-            <View style={styles.stateBox}>
-                <ActivityIndicator size="small" color={theme.colors.primary} />
-            </View>
-        );
-    }
-
-    if (error) {
-        return (
-            <View style={styles.stateBox}>
-                <Text style={{ color: theme.colors.error }}>{error}</Text>
-            </View>
-        );
-    }
-
-    return (
-        <>
-            <View style={styles.section}>
-                <View style={styles.sectionHeader}>
-                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
-                        DERNIERS DÉFIS
-                    </Text>
-                    <Pressable onPress={() => setDisplayAll(true)}>
-                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
-                            Tous les défis ›
-                        </Text>
-                    </Pressable>
-                </View>
-
-                <View style={[styles.card, cardStyle(theme), { borderRadius: t.radii.lg }]}>
-                    {preview.length === 0 ? (
-                        <Text style={[styles.empty, { color: t.colors.muted }]}>
-                            Aucun défi disponible
-                        </Text>
-                    ) : (
-                        preview.map((c, index) => {
-                            const done = isChallengeComplete(c);
-                            const ratio = progressRatio(c);
-                            return (
-                                <Pressable
-                                    key={c.id}
-                                    onPress={() => setActive(c)}
-                                    style={[
-                                        styles.row,
-                                        index < preview.length - 1 && {
-                                            borderBottomWidth: StyleSheet.hairlineWidth,
-                                            borderBottomColor: theme.colors.border,
-                                        },
-                                    ]}
-                                >
-                                    <View style={styles.main}>
-                                        <Text
-                                            style={[
-                                                styles.title,
-                                                { color: theme.colors.onSurface },
-                                            ]}
-                                            numberOfLines={2}
-                                        >
-                                            {c.name}
-                                        </Text>
-                                        <View
-                                            style={[
-                                                styles.track,
-                                                {
-                                                    backgroundColor: theme.colors.border,
-                                                    borderRadius: t.radii.pill,
-                                                },
-                                            ]}
-                                        >
-                                            <View
-                                                style={[
-                                                    styles.fill,
-                                                    {
-                                                        width: `${Math.round(ratio * 100)}%`,
-                                                        backgroundColor: done
-                                                            ? theme.colors.success
-                                                            : theme.colors.primary,
-                                                        borderRadius: t.radii.pill,
-                                                    },
-                                                ]}
-                                            >
-                                                <Text
-                                                    style={[
-                                                        styles.fillLabel,
-                                                        {
-                                                            color: done
-                                                                ? theme.colors.onSuccess
-                                                                : theme.colors.onPrimary,
-                                                        },
-                                                    ]}
-                                                >
-                                                    {progressLabel(c)}
-                                                </Text>
-                                            </View>
-                                        </View>
-                                    </View>
-                                    <View
-                                        style={[
-                                            styles.action,
-                                            {
-                                                backgroundColor: done
-                                                    ? theme.colors.success
-                                                    : theme.colors.primary,
-                                                borderRadius: t.radii.pill,
-                                            },
-                                        ]}
-                                    >
-                                        {done ? (
-                                            <Trophy size={16} color={theme.colors.onSuccess} />
-                                        ) : (
-                                            <Play
-                                                size={16}
-                                                color={theme.colors.onPrimary}
-                                                fill={theme.colors.onPrimary}
-                                            />
-                                        )}
-                                    </View>
-                                </Pressable>
-                            );
-                        })
-                    )}
-                </View>
-            </View>
-
-            <ChallengesModal
-                visible={displayAll}
-                challenges={challenges}
-                onClose={() => setDisplayAll(false)}
-            />
-            <Modal
-                visible={!!active}
-                animationType="slide"
-                onRequestClose={() => setActive(null)}
-            >
-                {active ? (
-                    <ChallengeModal
-                        challenge={active}
-                        onClose={() => setActive(null)}
-                    />
-                ) : null}
-            </Modal>
-        </>
-    );
-}
-
-const styles = StyleSheet.create({
-    section: {
-        gap: 10,
-    },
-    sectionHeader: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    sectionLabel: {
-        fontSize: 12,
-        fontWeight: "700",
-        letterSpacing: 0.6,
-    },
-    card: {
-        paddingHorizontal: SPACE.cardPad,
-        overflow: "hidden",
-    },
-    stateBox: {
-        minHeight: 80,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    empty: {
-        padding: 20,
-        textAlign: "center",
-    },
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 12,
-        paddingVertical: 14,
-    },
-    main: {
-        flex: 1,
-        gap: 8,
-    },
-    title: {
-        fontSize: 15,
-        fontWeight: "700",
-    },
-    track: {
-        height: 16,
-        overflow: "hidden",
-        justifyContent: "center",
-    },
-    fill: {
-        height: "100%",
-        minWidth: 40,
-        justifyContent: "center",
-        paddingHorizontal: 8,
-    },
-    fillLabel: {
-        fontSize: 11,
-        fontWeight: "700",
-        textAlign: "center",
-    },
-    action: {
-        width: SPACE.iconHit,
-        height: SPACE.iconHit,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});
+import { useState, type ReactNode } from "react";
+import { ActivityIndicator, Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { Play, Trophy } from "lucide-react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useChallenges } from "../../hooks/useChallenges";
+import type { ChallengeWithProgress } from "../../hooks/useChallenges";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import { ChallengesModal } from "./ChallengesModal";
+import { ChallengeModal } from "./ChallengeModal";
+
+export type ChallengeVignetteProps = {};
+
+function isChallengeComplete(c: ChallengeWithProgress) {
+    return !!c.progression?.badge;
+}
+
+function progressLabel(c: ChallengeWithProgress) {
+    const series = c.series ?? [];
+    if (series.length === 0) return isChallengeComplete(c) ? "1/1" : "0/1";
+    const done = series.filter((s) => s.progression).length;
+    return `${done}/${series.length}`;
+}
+
+function progressRatio(c: ChallengeWithProgress) {
+    const series = c.series ?? [];
+    if (series.length === 0) return isChallengeComplete(c) ? 1 : 0;
+    return series.filter((s) => s.progression).length / series.length;
+}
+
+export function ChallengeVignette({}: ChallengeVignetteProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const { challenges, isLoading, error } = useChallenges();
+    const [displayAll, setDisplayAll] = useState(false);
+    const [active, setActive] = useState<ChallengeWithProgress | null>(null);
+
+    const preview = challenges.slice(0, 3);
+
+    if (isLoading && !challenges.length) {
+        return (
+            <View style={styles.stateBox}>
+                <ActivityIndicator size="small" color={theme.colors.primary} />
+            </View>
+        );
+    }
+
+    if (error) {
+        return (
+            <View style={styles.stateBox}>
+                <Text style={{ color: theme.colors.error }}>{error}</Text>
+            </View>
+        );
+    }
+
+    return (
+        <>
+            <View style={styles.section}>
+                <View style={styles.sectionHeader}>
+                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
+                        DERNIERS DÉFIS
+                    </Text>
+                    <Pressable onPress={() => setDisplayAll(true)}>
+                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
+                            Tous les défis ›
+                        </Text>
+                    </Pressable>
+                </View>
+
+                <View style={[styles.card, cardStyle(theme), { borderRadius: t.radii.lg }]}>
+                    {preview.length === 0 ? (
+                        <Text style={[styles.empty, { color: t.colors.muted }]}>
+                            Aucun défi disponible
+                        </Text>
+                    ) : (
+                        preview.map((c, index) => {
+                            const done = isChallengeComplete(c);
+                            const ratio = progressRatio(c);
+                            return (
+                                <Pressable
+                                    key={c.id}
+                                    onPress={() => setActive(c)}
+                                    style={[
+                                        styles.row,
+                                        index < preview.length - 1 && {
+                                            borderBottomWidth: StyleSheet.hairlineWidth,
+                                            borderBottomColor: theme.colors.border,
+                                        },
+                                    ]}
+                                >
+                                    <View style={styles.main}>
+                                        <Text
+                                            style={[
+                                                styles.title,
+                                                { color: theme.colors.onSurface },
+                                            ]}
+                                            numberOfLines={2}
+                                        >
+                                            {c.name}
+                                        </Text>
+                                        <View
+                                            style={[
+                                                styles.track,
+                                                {
+                                                    backgroundColor: theme.colors.border,
+                                                    borderRadius: t.radii.pill,
+                                                },
+                                            ]}
+                                        >
+                                            <View
+                                                style={[
+                                                    styles.fill,
+                                                    {
+                                                        width: `${Math.round(ratio * 100)}%`,
+                                                        backgroundColor: done
+                                                            ? theme.colors.success
+                                                            : theme.colors.primary,
+                                                        borderRadius: t.radii.pill,
+                                                    },
+                                                ]}
+                                            >
+                                                <Text
+                                                    style={[
+                                                        styles.fillLabel,
+                                                        {
+                                                            color: done
+                                                                ? theme.colors.onSuccess
+                                                                : theme.colors.onPrimary,
+                                                        },
+                                                    ]}
+                                                >
+                                                    {progressLabel(c)}
+                                                </Text>
+                                            </View>
+                                        </View>
+                                    </View>
+                                    <View
+                                        style={[
+                                            styles.action,
+                                            {
+                                                backgroundColor: done
+                                                    ? theme.colors.success
+                                                    : theme.colors.primary,
+                                                borderRadius: t.radii.pill,
+                                            },
+                                        ]}
+                                    >
+                                        {done ? (
+                                            <Trophy size={16} color={theme.colors.onSuccess} />
+                                        ) : (
+                                            <Play
+                                                size={16}
+                                                color={theme.colors.onPrimary}
+                                                fill={theme.colors.onPrimary}
+                                            />
+                                        )}
+                                    </View>
+                                </Pressable>
+                            );
+                        })
+                    )}
+                </View>
+            </View>
+
+            <ChallengesModal
+                visible={displayAll}
+                challenges={challenges}
+                onClose={() => setDisplayAll(false)}
+            />
+            <Modal
+                visible={!!active}
+                animationType="slide"
+                onRequestClose={() => setActive(null)}
+            >
+                {active ? (
+                    <ChallengeModal
+                        challenge={active}
+                        onClose={() => setActive(null)}
+                    />
+                ) : null}
+            </Modal>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    section: {
+        gap: 10,
+    },
+    sectionHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    sectionLabel: {
+        fontSize: 12,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    card: {
+        paddingHorizontal: SPACE.cardPad,
+        overflow: "hidden",
+    },
+    stateBox: {
+        minHeight: 80,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    empty: {
+        padding: 20,
+        textAlign: "center",
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        paddingVertical: 14,
+    },
+    main: {
+        flex: 1,
+        gap: 8,
+    },
+    title: {
+        fontSize: 15,
+        fontWeight: "700",
+    },
+    track: {
+        height: 16,
+        overflow: "hidden",
+        justifyContent: "center",
+    },
+    fill: {
+        height: "100%",
+        minWidth: 40,
+        justifyContent: "center",
+        paddingHorizontal: 8,
+    },
+    fillLabel: {
+        fontSize: 11,
+        fontWeight: "700",
+        textAlign: "center",
+    },
+    action: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});