@wasto/cms-components 1.5.10

package/src/components/challenge/ChallengeModal.tsx

@@ -0,0 +1,231 @@
+import { Dimensions, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { ChallengeSeriesWithProgress, ChallengeWithProgress } from "../../hooks/useChallenges";
+import { Title } from "../title/Title";
+import { NavButton } from "../nav-button/NavButton";
+import { Play, Trophy, XIcon } from "lucide-react-native";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { useState, type ReactNode } from "react";
+import { QuizModal } from "./QuizModal";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type ChallengeModalProps = {
+    challenge: ChallengeWithProgress;
+    onClose: () => void;
+};
+
+function isSerieComplete(serie: ChallengeSeriesWithProgress) {
+    return !!serie.progression;
+}
+
+function serieProgressRatio(serie: ChallengeSeriesWithProgress) {
+    return Math.min(1, Math.max(0, (serie.progression?.score ?? 0) / 100));
+}
+
+function serieProgressLabel(serie: ChallengeSeriesWithProgress) {
+    return `${Math.round(serie.progression?.score ?? 0)}%`;
+}
+
+export function ChallengeModal({
+    challenge,
+    onClose,
+}: ChallengeModalProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const bottomInset = useSafeAreaPadding(["bottom"]);
+    const [selectedSerieId, setSelectedSerieId] = useState<string | null>(null);
+    const series = challenge.series ?? [];
+    const selectedSerie =
+        selectedSerieId != null
+            ? (series.find((s) => s.id === selectedSerieId) ?? null)
+            : null;
+
+    const handleSerieSelected = (serie: ChallengeSeriesWithProgress) => () => {
+        setSelectedSerieId(serie.id);
+    };
+
+    return (
+        <>
+            {!selectedSerie ? (
+                <View style={[styles.modal, themedStyles.modal]}>
+                    <View style={topInset}>
+                        <View style={styles.header}>
+                            <Title text={challenge.name} level="2" numberOfLines={1} />
+                            <NavButton icon={XIcon} onPress={onClose} />
+                        </View>
+                    </View>
+                    <View style={[styles.listWrap, bottomInset]}>
+                        <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                            {series.length === 0 ? (
+                                <Text style={styles.empty}>Aucune série pour ce challenge.</Text>
+                            ) : (
+                                series.map((serie) => {
+                                    const done = isSerieComplete(serie);
+                                    const ratio = serieProgressRatio(serie);
+                                    return (
+                                        <Pressable
+                                            key={serie.id}
+                                            style={themedStyles.serie}
+                                            onPress={handleSerieSelected(serie)}
+                                        >
+                                            <View style={styles.serieRow}>
+                                                <View style={styles.serieMain}>
+                                                    <Title text={serie.name} level="3" />
+                                                    {serie.description ? (
+                                                        <Text numberOfLines={1}>
+                                                            {serie.description}
+                                                        </Text>
+                                                    ) : null}
+                                                    <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,
+                                                                    },
+                                                                ]}
+                                                            >
+                                                                {serieProgressLabel(serie)}
+                                                            </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>
+                                            </View>
+                                        </Pressable>
+                                    );
+                                })
+                            )}
+                        </ScrollView>
+                    </View>
+                </View>
+            ) : (
+                <QuizModal
+                    serie={selectedSerie}
+                    challengeId={challenge.id}
+                    onClose={() => setSelectedSerieId(null)}
+                />
+            )}
+        </>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        modal: {
+            backgroundColor: theme.colors.background,
+        },
+        serie: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radii?.lg ?? theme.radius,
+            ...(theme.shadow?.soft ?? {}),
+            paddingHorizontal: SPACE.cardPad,
+        },
+    });
+
+const styles = StyleSheet.create({
+    modal: {
+        height: Dimensions.get("screen").height,
+    },
+    header: {
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 12,
+    },
+    listWrap: {
+        flex: 1,
+    },
+    body: {
+        padding: 16,
+        gap: 12,
+        flexGrow: 1,
+    },
+    empty: {
+        opacity: 0.7,
+    },
+    serieRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 16,
+        paddingVertical: 14,
+    },
+    serieMain: {
+        flex: 1,
+        gap: 12,
+    },
+    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",
+    },
+});

package/src/components/challenge/ChallengeVignette.tsx

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