@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/challenge/ChallengesModal.tsx

@@ -1,243 +1,243 @@
-import { Dimensions, Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
-import { ChallengeWithProgress } from "../../hooks/useChallenges";
-import { Theme } from "../../types/Theme";
-import { useTheme } from "../../contexts/ThemeContext";
-import { Title } from "../title/Title";
-import { NavButton } from "../nav-button/NavButton";
-import { Play, Trophy, XIcon } from "lucide-react-native";
-import { useEffect, useState, type ReactNode } from "react";
-import { ChallengeModal } from "./ChallengeModal";
-import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-
-export type ChallengesModalProps = {
-    visible: boolean;
-    challenges: ChallengeWithProgress[];
-    onClose: () => void;
-};
-
-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 ChallengesModal({
-    visible,
-    challenges,
-    onClose,
-}: ChallengesModalProps): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const themedStyles = createThemedStyles(theme);
-    const topInset = useSafeAreaPadding(["top"]);
-    const bottomInset = useSafeAreaPadding(["bottom"]);
-    const [selectedChallengeId, setSelectedChallengeId] = useState<string | null>(null);
-
-    const selectedChallenge =
-        selectedChallengeId != null
-            ? (challenges.find((c) => c.id === selectedChallengeId) ?? null)
-            : null;
-
-    useEffect(() => {
-        if (!visible) setSelectedChallengeId(null);
-    }, [visible]);
-
-    const handleSelectChallenge = (challenge: ChallengeWithProgress) => () => {
-        setSelectedChallengeId(challenge.id);
-    };
-
-    return <>
-        <Modal
-            visible={visible}
-            animationType="slide"
-            onRequestClose={onClose}
-        >
-            {!selectedChallenge ? (
-
-                <View style={[styles.modal, themedStyles.modal]}>
-                    <View style={topInset}>
-                        <View style={styles.header}>
-                            <Title
-                                text="Challenges"
-                                level="2"
-                            />
-                            <NavButton
-                                icon={XIcon}
-                                onPress={onClose}
-                            />
-                        </View>
-                    </View>
-                    <View style={[styles.listWrap, bottomInset]}>
-                        <ScrollView bounces={false} contentContainerStyle={styles.body}>
-                            {challenges.map((challenge) => {
-                                const done = isChallengeComplete(challenge);
-                                const ratio = progressRatio(challenge);
-                                return (
-                                    <Pressable
-                                        key={challenge.id}
-                                        style={themedStyles.challenge}
-                                        onPress={handleSelectChallenge(challenge)}
-                                    >
-                                        <View style={styles.challengeRow}>
-                                            <View style={styles.challengeMain}>
-                                                <Title text={challenge.name} level="3" />
-                                                {challenge.description ? (
-                                                    <Text numberOfLines={1}>
-                                                        {challenge.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,
-                                                                },
-                                                            ]}
-                                                        >
-                                                            {progressLabel(challenge)}
-                                                        </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>
-            ) : (
-                <ChallengeModal
-                    challenge={selectedChallenge!}
-                    onClose={() => setSelectedChallengeId(null)}
-                />
-            )}
-        </Modal>
-    </>
-}
-
-const createThemedStyles = (theme: Theme) => StyleSheet.create({
-    modal: {
-        backgroundColor: theme.colors.background,
-    },
-    challenge: {
-        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",
-    },
-    listWrap: {
-        flex: 1,
-    },
-    body: {
-        padding: 16,
-        gap: 12,
-        flexGrow: 1,
-    },
-    challengeRow: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 16,
-        paddingVertical: 14,
-    },
-    challengeMain: {
-        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, Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { ChallengeWithProgress } from "../../hooks/useChallenges";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Title } from "../title/Title";
+import { NavButton } from "../nav-button/NavButton";
+import { Play, Trophy, XIcon } from "lucide-react-native";
+import { useEffect, useState, type ReactNode } from "react";
+import { ChallengeModal } from "./ChallengeModal";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type ChallengesModalProps = {
+    visible: boolean;
+    challenges: ChallengeWithProgress[];
+    onClose: () => void;
+};
+
+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 ChallengesModal({
+    visible,
+    challenges,
+    onClose,
+}: ChallengesModalProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const bottomInset = useSafeAreaPadding(["bottom"]);
+    const [selectedChallengeId, setSelectedChallengeId] = useState<string | null>(null);
+
+    const selectedChallenge =
+        selectedChallengeId != null
+            ? (challenges.find((c) => c.id === selectedChallengeId) ?? null)
+            : null;
+
+    useEffect(() => {
+        if (!visible) setSelectedChallengeId(null);
+    }, [visible]);
+
+    const handleSelectChallenge = (challenge: ChallengeWithProgress) => () => {
+        setSelectedChallengeId(challenge.id);
+    };
+
+    return <>
+        <Modal
+            visible={visible}
+            animationType="slide"
+            onRequestClose={onClose}
+        >
+            {!selectedChallenge ? (
+
+                <View style={[styles.modal, themedStyles.modal]}>
+                    <View style={topInset}>
+                        <View style={styles.header}>
+                            <Title
+                                text="Challenges"
+                                level="2"
+                            />
+                            <NavButton
+                                icon={XIcon}
+                                onPress={onClose}
+                            />
+                        </View>
+                    </View>
+                    <View style={[styles.listWrap, bottomInset]}>
+                        <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                            {challenges.map((challenge) => {
+                                const done = isChallengeComplete(challenge);
+                                const ratio = progressRatio(challenge);
+                                return (
+                                    <Pressable
+                                        key={challenge.id}
+                                        style={themedStyles.challenge}
+                                        onPress={handleSelectChallenge(challenge)}
+                                    >
+                                        <View style={styles.challengeRow}>
+                                            <View style={styles.challengeMain}>
+                                                <Title text={challenge.name} level="3" />
+                                                {challenge.description ? (
+                                                    <Text numberOfLines={1}>
+                                                        {challenge.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,
+                                                                },
+                                                            ]}
+                                                        >
+                                                            {progressLabel(challenge)}
+                                                        </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>
+            ) : (
+                <ChallengeModal
+                    challenge={selectedChallenge!}
+                    onClose={() => setSelectedChallengeId(null)}
+                />
+            )}
+        </Modal>
+    </>
+}
+
+const createThemedStyles = (theme: Theme) => StyleSheet.create({
+    modal: {
+        backgroundColor: theme.colors.background,
+    },
+    challenge: {
+        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",
+    },
+    listWrap: {
+        flex: 1,
+    },
+    body: {
+        padding: 16,
+        gap: 12,
+        flexGrow: 1,
+    },
+    challengeRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 16,
+        paddingVertical: 14,
+    },
+    challengeMain: {
+        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",
+    },
+});