@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/challenge/ChallengeModal.tsx

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