@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/challenge/Challenge.tsx

@@ -1,380 +1,380 @@
-import { useState, type ReactNode } from "react";
-import {
-    ActivityIndicator,
-    Modal,
-    Pressable,
-    StyleSheet,
-    Text,
-    View,
-} from "react-native";
-import { Award, Percent, Play, Trophy, Zap } from "lucide-react-native";
-import { useChallenges } from "../../hooks/useChallenges";
-import { useBadges } from "../../hooks/useBadges";
-import { useTheme } from "../../contexts/ThemeContext";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-import { Badges } from "./Badges";
-import { BadgesModal } from "./BadgesModal";
-import { ChallengesModal } from "./ChallengesModal";
-import { ChallengeModal } from "./ChallengeModal";
-import type { ChallengeWithProgress } from "../../hooks/useChallenges";
-
-export type ChallengeProps = {};
-
-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 Challenge({}: ChallengeProps): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const { challenges, acquiredBadges, isLoading, error } = useChallenges();
-    const { badges } = useBadges();
-    const [displayChallenges, setDisplayChallenges] = useState(false);
-    const [displayAllBadges, setDisplayAllBadges] = useState(false);
-    const [activeChallenge, setActiveChallenge] = useState<ChallengeWithProgress | null>(null);
-
-    const completedCount = challenges.filter(isChallengeComplete).length;
-    const totalChallenges = challenges.length;
-    const totalBadges = badges.length > 0 ? badges.length : acquiredBadges.length;
-    const challengeScores = challenges
-        .map((c) => c.progression?.score)
-        .filter((s): s is number => typeof s === "number");
-    const successPct =
-        challengeScores.length > 0
-            ? Math.round(
-                  challengeScores.reduce((sum, score) => sum + score, 0) /
-                      challengeScores.length,
-              )
-            : 0;
-
-    if (isLoading && !challenges.length) {
-        return (
-            <View style={styles.stateBox}>
-                <ActivityIndicator 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}>
-                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>STATISTIQUES</Text>
-                <View style={[styles.statsCard, cardStyle(theme), { borderRadius: t.radii.lg }]}>
-                    <StatCell
-                        icon={<Zap size={16} color="#fff" />}
-                        value={String(completedCount)}
-                        suffix={`/${totalChallenges}`}
-                        label="Défis terminés"
-                        color={theme.colors.primary}
-                    />
-                    <StatCell
-                        icon={<Award size={16} color="#fff" />}
-                        value={String(acquiredBadges.length)}
-                        suffix={`/${totalBadges}`}
-                        label="badge obtenue"
-                        color={theme.colors.primary}
-                    />
-                    <StatCell
-                        icon={<Percent size={16} color="#fff" />}
-                        value={String(successPct)}
-                        suffix="%"
-                        label="pourcent de réussite"
-                        color={theme.colors.primary}
-                    />
-                </View>
-            </View>
-
-            <View style={styles.section}>
-                <View style={styles.sectionHeader}>
-                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>LES BADGES</Text>
-                    <Pressable onPress={() => setDisplayAllBadges(true)}>
-                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
-                            Tous les badges ›
-                        </Text>
-                    </Pressable>
-                </View>
-                <Badges badges={acquiredBadges} />
-            </View>
-
-            <View style={styles.section}>
-                <View style={styles.sectionHeader}>
-                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
-                        TOUS LES DÉFIS
-                    </Text>
-                    <Pressable onPress={() => setDisplayChallenges(true)}>
-                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
-                            Voir tout ›
-                        </Text>
-                    </Pressable>
-                </View>
-                <View style={[styles.listCard, cardStyle(theme), { borderRadius: t.radii.lg }]}>
-                    {challenges.length === 0 ? (
-                        <Text style={[styles.empty, { color: t.colors.muted }]}>
-                            Aucun défi disponible
-                        </Text>
-                    ) : (
-                        challenges.map((c, index) => {
-                            const done = isChallengeComplete(c);
-                            const ratio = progressRatio(c);
-                            return (
-                                <Pressable
-                                    key={c.id}
-                                    onPress={() => setActiveChallenge(c)}
-                                    style={[
-                                        styles.challengeRow,
-                                        index < challenges.length - 1 && {
-                                            borderBottomWidth: StyleSheet.hairlineWidth,
-                                            borderBottomColor: theme.colors.border,
-                                        },
-                                    ]}
-                                >
-                                    <View style={styles.challengeMain}>
-                                        <Text
-                                            style={[
-                                                styles.challengeTitle,
-                                                { 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.actionBtn,
-                                            {
-                                                backgroundColor: done
-                                                    ? theme.colors.success
-                                                    : theme.colors.primary,
-                                                borderRadius: t.radii.pill,
-                                            },
-                                        ]}
-                                    >
-                                        {done ? (
-                                            <Trophy size={18} color={theme.colors.onSuccess} />
-                                        ) : (
-                                            <Play size={18} color={theme.colors.onPrimary} fill={theme.colors.onPrimary} />
-                                        )}
-                                    </View>
-                                </Pressable>
-                            );
-                        })
-                    )}
-                </View>
-            </View>
-
-            <ChallengesModal
-                visible={displayChallenges}
-                challenges={challenges}
-                onClose={() => setDisplayChallenges(false)}
-            />
-            <BadgesModal
-                visible={displayAllBadges}
-                acquiredBadges={acquiredBadges}
-                onClose={() => setDisplayAllBadges(false)}
-            />
-            <Modal
-                visible={!!activeChallenge}
-                animationType="slide"
-                onRequestClose={() => setActiveChallenge(null)}
-            >
-                {activeChallenge ? (
-                    <ChallengeModal
-                        challenge={activeChallenge}
-                        onClose={() => setActiveChallenge(null)}
-                    />
-                ) : null}
-            </Modal>
-        </>
-    );
-}
-
-function StatCell({
-    icon,
-    value,
-    suffix,
-    label,
-    color,
-}: {
-    icon: React.ReactNode;
-    value: string;
-    suffix?: string;
-    label: string;
-    color: string;
-}) {
-    return (
-        <View style={styles.statCell}>
-            <View style={[styles.statIcon, { backgroundColor: color }]}>{icon}</View>
-            <View style={styles.statValueRow}>
-                <Text style={styles.statValue}>{value}</Text>
-                {suffix ? <Text style={styles.statSuffix}>{suffix}</Text> : null}
-            </View>
-            <Text style={styles.statLabel}>{label}</Text>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    stateBox: {
-        minHeight: 120,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    section: {
-        gap: 10,
-        marginBottom: 20,
-    },
-    sectionHeader: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    sectionLabel: {
-        fontSize: 12,
-        fontWeight: "700",
-        letterSpacing: 0.6,
-    },
-    statsCard: {
-        flexDirection: "row",
-        padding: SPACE.stack,
-        gap: 8,
-    },
-    statCell: {
-        flex: 1,
-        alignItems: "center",
-        gap: 6,
-        padding: 8,
-    },
-    statIcon: {
-        width: SPACE.iconHit,
-        height: SPACE.iconHit,
-        borderRadius: SPACE.iconHit / 2,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    statValue: {
-        fontSize: 22,
-        fontWeight: "800",
-    },
-    statValueRow: {
-        flexDirection: "row",
-        alignItems: "baseline",
-        justifyContent: "center",
-        flexWrap: "wrap",
-    },
-    statSuffix: {
-        fontSize: 11,
-        fontWeight: "700",
-        opacity: 0.65,
-        marginLeft: 1,
-    },
-    statLabel: {
-        fontSize: 11,
-        textAlign: "center",
-        opacity: 0.65,
-    },
-    listCard: {
-        overflow: "hidden",
-        paddingHorizontal: SPACE.cardPad,
-        gap: 6,
-    },
-    empty: {
-        padding: 24,
-        textAlign: "center",
-    },
-    challengeRow: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 16,
-        paddingVertical: 14,
-    },
-    challengeMain: {
-        flex: 1,
-        gap: 12,
-    },
-    challengeTitle: {
-        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",
-    },
-    actionBtn: {
-        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 { Award, Percent, Play, Trophy, Zap } from "lucide-react-native";
+import { useChallenges } from "../../hooks/useChallenges";
+import { useBadges } from "../../hooks/useBadges";
+import { useTheme } from "../../contexts/ThemeContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import { Badges } from "./Badges";
+import { BadgesModal } from "./BadgesModal";
+import { ChallengesModal } from "./ChallengesModal";
+import { ChallengeModal } from "./ChallengeModal";
+import type { ChallengeWithProgress } from "../../hooks/useChallenges";
+
+export type ChallengeProps = {};
+
+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 Challenge({}: ChallengeProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const { challenges, acquiredBadges, isLoading, error } = useChallenges();
+    const { badges } = useBadges();
+    const [displayChallenges, setDisplayChallenges] = useState(false);
+    const [displayAllBadges, setDisplayAllBadges] = useState(false);
+    const [activeChallenge, setActiveChallenge] = useState<ChallengeWithProgress | null>(null);
+
+    const completedCount = challenges.filter(isChallengeComplete).length;
+    const totalChallenges = challenges.length;
+    const totalBadges = badges.length > 0 ? badges.length : acquiredBadges.length;
+    const challengeScores = challenges
+        .map((c) => c.progression?.score)
+        .filter((s): s is number => typeof s === "number");
+    const successPct =
+        challengeScores.length > 0
+            ? Math.round(
+                  challengeScores.reduce((sum, score) => sum + score, 0) /
+                      challengeScores.length,
+              )
+            : 0;
+
+    if (isLoading && !challenges.length) {
+        return (
+            <View style={styles.stateBox}>
+                <ActivityIndicator 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}>
+                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>STATISTIQUES</Text>
+                <View style={[styles.statsCard, cardStyle(theme), { borderRadius: t.radii.lg }]}>
+                    <StatCell
+                        icon={<Zap size={16} color="#fff" />}
+                        value={String(completedCount)}
+                        suffix={`/${totalChallenges}`}
+                        label="Défis terminés"
+                        color={theme.colors.primary}
+                    />
+                    <StatCell
+                        icon={<Award size={16} color="#fff" />}
+                        value={String(acquiredBadges.length)}
+                        suffix={`/${totalBadges}`}
+                        label="badge obtenue"
+                        color={theme.colors.primary}
+                    />
+                    <StatCell
+                        icon={<Percent size={16} color="#fff" />}
+                        value={String(successPct)}
+                        suffix="%"
+                        label="pourcent de réussite"
+                        color={theme.colors.primary}
+                    />
+                </View>
+            </View>
+
+            <View style={styles.section}>
+                <View style={styles.sectionHeader}>
+                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>LES BADGES</Text>
+                    <Pressable onPress={() => setDisplayAllBadges(true)}>
+                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
+                            Tous les badges ›
+                        </Text>
+                    </Pressable>
+                </View>
+                <Badges badges={acquiredBadges} />
+            </View>
+
+            <View style={styles.section}>
+                <View style={styles.sectionHeader}>
+                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
+                        TOUS LES DÉFIS
+                    </Text>
+                    <Pressable onPress={() => setDisplayChallenges(true)}>
+                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
+                            Voir tout ›
+                        </Text>
+                    </Pressable>
+                </View>
+                <View style={[styles.listCard, cardStyle(theme), { borderRadius: t.radii.lg }]}>
+                    {challenges.length === 0 ? (
+                        <Text style={[styles.empty, { color: t.colors.muted }]}>
+                            Aucun défi disponible
+                        </Text>
+                    ) : (
+                        challenges.map((c, index) => {
+                            const done = isChallengeComplete(c);
+                            const ratio = progressRatio(c);
+                            return (
+                                <Pressable
+                                    key={c.id}
+                                    onPress={() => setActiveChallenge(c)}
+                                    style={[
+                                        styles.challengeRow,
+                                        index < challenges.length - 1 && {
+                                            borderBottomWidth: StyleSheet.hairlineWidth,
+                                            borderBottomColor: theme.colors.border,
+                                        },
+                                    ]}
+                                >
+                                    <View style={styles.challengeMain}>
+                                        <Text
+                                            style={[
+                                                styles.challengeTitle,
+                                                { 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.actionBtn,
+                                            {
+                                                backgroundColor: done
+                                                    ? theme.colors.success
+                                                    : theme.colors.primary,
+                                                borderRadius: t.radii.pill,
+                                            },
+                                        ]}
+                                    >
+                                        {done ? (
+                                            <Trophy size={18} color={theme.colors.onSuccess} />
+                                        ) : (
+                                            <Play size={18} color={theme.colors.onPrimary} fill={theme.colors.onPrimary} />
+                                        )}
+                                    </View>
+                                </Pressable>
+                            );
+                        })
+                    )}
+                </View>
+            </View>
+
+            <ChallengesModal
+                visible={displayChallenges}
+                challenges={challenges}
+                onClose={() => setDisplayChallenges(false)}
+            />
+            <BadgesModal
+                visible={displayAllBadges}
+                acquiredBadges={acquiredBadges}
+                onClose={() => setDisplayAllBadges(false)}
+            />
+            <Modal
+                visible={!!activeChallenge}
+                animationType="slide"
+                onRequestClose={() => setActiveChallenge(null)}
+            >
+                {activeChallenge ? (
+                    <ChallengeModal
+                        challenge={activeChallenge}
+                        onClose={() => setActiveChallenge(null)}
+                    />
+                ) : null}
+            </Modal>
+        </>
+    );
+}
+
+function StatCell({
+    icon,
+    value,
+    suffix,
+    label,
+    color,
+}: {
+    icon: React.ReactNode;
+    value: string;
+    suffix?: string;
+    label: string;
+    color: string;
+}) {
+    return (
+        <View style={styles.statCell}>
+            <View style={[styles.statIcon, { backgroundColor: color }]}>{icon}</View>
+            <View style={styles.statValueRow}>
+                <Text style={styles.statValue}>{value}</Text>
+                {suffix ? <Text style={styles.statSuffix}>{suffix}</Text> : null}
+            </View>
+            <Text style={styles.statLabel}>{label}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    stateBox: {
+        minHeight: 120,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    section: {
+        gap: 10,
+        marginBottom: 20,
+    },
+    sectionHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    sectionLabel: {
+        fontSize: 12,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    statsCard: {
+        flexDirection: "row",
+        padding: SPACE.stack,
+        gap: 8,
+    },
+    statCell: {
+        flex: 1,
+        alignItems: "center",
+        gap: 6,
+        padding: 8,
+    },
+    statIcon: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        borderRadius: SPACE.iconHit / 2,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    statValue: {
+        fontSize: 22,
+        fontWeight: "800",
+    },
+    statValueRow: {
+        flexDirection: "row",
+        alignItems: "baseline",
+        justifyContent: "center",
+        flexWrap: "wrap",
+    },
+    statSuffix: {
+        fontSize: 11,
+        fontWeight: "700",
+        opacity: 0.65,
+        marginLeft: 1,
+    },
+    statLabel: {
+        fontSize: 11,
+        textAlign: "center",
+        opacity: 0.65,
+    },
+    listCard: {
+        overflow: "hidden",
+        paddingHorizontal: SPACE.cardPad,
+        gap: 6,
+    },
+    empty: {
+        padding: 24,
+        textAlign: "center",
+    },
+    challengeRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 16,
+        paddingVertical: 14,
+    },
+    challengeMain: {
+        flex: 1,
+        gap: 12,
+    },
+    challengeTitle: {
+        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",
+    },
+    actionBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});