@wasto/cms-components 1.5.10

package/src/contexts/ThemeContext.tsx

@@ -0,0 +1,37 @@
+import {
+    createContext,
+    PropsWithChildren,
+    useContext,
+    useMemo,
+    type ReactElement,
+} from "react";
+import { resolveTheme } from "../helpers/themeStyles";
+import type { ResolvedTheme, Theme } from "../types/Theme";
+
+export type ThemeContextType = {
+    theme: ResolvedTheme;
+};
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export type ThemePoviderProps = PropsWithChildren & {
+    theme: Theme;
+};
+
+export function ThemeProvider(props: ThemePoviderProps): ReactElement {
+    const theme = useMemo(() => resolveTheme(props.theme), [props.theme]);
+
+    return <ThemeContext
+        value={{ theme }}
+    >
+        {props.children}
+    </ThemeContext>
+}
+
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider.");
+    }
+    return context;
+}

package/src/contexts/WastoContext.tsx

@@ -0,0 +1,127 @@
+import {
+    createContext,
+    PropsWithChildren,
+    useContext,
+    useEffect,
+    useMemo,
+    type ReactNode,
+} from "react";
+import type { WastoRequestErrorContext } from "@wasto/sdk";
+import { Theme } from "../types/Theme";
+import { ThemeProvider } from "./ThemeContext";
+import { LocalProvider } from "./LocalContext";
+import { ChallengesProvider } from "./ChallengesContext";
+import { AnnouncementsProvider } from "./AnnouncementsContext";
+import SelectStreetModal from "../components/select-street-modal/SelectStreetModal";
+import { AnnouncementModal } from "../components/announcement-modal/AnnouncementModal";
+import { OptionalSafeAreaProvider } from "../components/safe-area/OptionalSafeAreaProvider";
+import {
+    initWastoSentry,
+    reportError as sentryReportError,
+    type WastoErrorContext,
+    type WastoSentryConfig,
+} from "../sentry/initSentry";
+
+export type WastoContextType = {
+    apiUrl: string;
+    appId: string;
+    cityGroupId: string | null;
+    /**
+     * Studio / iframe preview — no anonymous device registration or challenge writes.
+     */
+    previewMode: boolean;
+    reportError: (error: unknown, context?: WastoErrorContext) => void;
+    onRequestError?: (error: Error, context: WastoRequestErrorContext) => void;
+};
+
+export const WastoContext = createContext<WastoContextType | undefined>(undefined);
+
+export type WastoProviderProps = PropsWithChildren & {
+    apiUrl: string;
+    appId: string;
+    theme: Theme;
+    /** City group scoping street search / multi-city apps. */
+    cityGroupId?: string | null;
+    /** GitLab Error Tracking / Sentry config (DSN from env). */
+    sentry?: WastoSentryConfig;
+    /**
+     * When true (Studio preview): LocalContext skips analytics.track / device id.
+     */
+    previewMode?: boolean;
+};
+
+export function WastoProvider(props: WastoProviderProps): ReactNode {
+    const apiUrl = useMemo(() => props.apiUrl, [props.apiUrl]);
+    const appId = useMemo(() => props.appId, [props.appId]);
+    const cityGroupId = useMemo(
+        () => props.cityGroupId?.trim() || null,
+        [props.cityGroupId],
+    );
+    const previewMode = Boolean(props.previewMode);
+    const sentryConfig = props.sentry;
+
+    useEffect(() => {
+        if (!sentryConfig) return;
+        initWastoSentry({
+            ...sentryConfig,
+            appId: sentryConfig.appId ?? appId,
+        });
+    }, [appId, sentryConfig]);
+
+    const reportError = useMemo(
+        () => (error: unknown, context?: WastoErrorContext) => {
+            sentryReportError(error, context);
+        },
+        [],
+    );
+
+    const onRequestError = useMemo(
+        () => (error: Error, ctx: WastoRequestErrorContext) => {
+            reportError(error, {
+                source: "api",
+                method: ctx.method,
+                path: ctx.path,
+                status: ctx.status,
+            });
+        },
+        [reportError],
+    );
+
+    const value = useMemo<WastoContextType>(
+        () => ({
+            apiUrl,
+            appId,
+            cityGroupId,
+            previewMode,
+            reportError,
+            onRequestError,
+        }),
+        [apiUrl, appId, cityGroupId, previewMode, reportError, onRequestError],
+    );
+
+    return (
+        <WastoContext value={value}>
+            <OptionalSafeAreaProvider>
+                <LocalProvider previewMode={previewMode}>
+                    <ChallengesProvider>
+                        <AnnouncementsProvider apiUrl={apiUrl}>
+                            <ThemeProvider theme={props.theme}>
+                                {props.children}
+                                <SelectStreetModal />
+                                <AnnouncementModal />
+                            </ThemeProvider>
+                        </AnnouncementsProvider>
+                    </ChallengesProvider>
+                </LocalProvider>
+            </OptionalSafeAreaProvider>
+        </WastoContext>
+    );
+}
+
+export function useWasto() {
+    const context = useContext(WastoContext);
+    if (!context) {
+        throw new Error("useContext must be used within a WastoProvider.");
+    }
+    return context;
+}

package/src/helpers/blogPost.ts

@@ -0,0 +1,72 @@
+import { htmlContentToMarkdown } from "./htmlContentToMarkdown";
+
+export type BlogPost = {
+    id: string;
+    title: string;
+    content: string;
+    publishedAt?: string;
+    createdAt?: string;
+    coverMediaId?: string | null;
+};
+
+function asRecord(raw: unknown): Record<string, unknown> | null {
+    if (raw == null || typeof raw !== "object") return null;
+    const root = raw as Record<string, unknown>;
+    if (root.data != null && typeof root.data === "object") {
+        return root.data as Record<string, unknown>;
+    }
+    return root;
+}
+
+function pickStr(o: Record<string, unknown>, camel: string, snake?: string): string | undefined {
+    const v = o[camel] ?? (snake ? o[snake] : undefined);
+    return typeof v === "string" ? v : undefined;
+}
+
+export function normalizeBlogPost(raw: unknown): BlogPost | null {
+    const o = asRecord(raw);
+    if (!o) return null;
+
+    const idRaw = o.id;
+    const id = typeof idRaw === "string" ? idRaw : idRaw != null ? String(idRaw) : "";
+    if (!id) return null;
+
+    const coverFromRelation =
+        o.coverMedia != null && typeof o.coverMedia === "object"
+            ? (o.coverMedia as { id?: unknown }).id
+            : undefined;
+
+    return {
+        id,
+        title: pickStr(o, "title") || "Sans titre",
+        content: pickStr(o, "content") || "",
+        publishedAt: pickStr(o, "publishedAt", "published_at"),
+        createdAt: pickStr(o, "createdAt", "created_at"),
+        coverMediaId:
+            pickStr(o, "coverMediaId", "cover_media_id") ??
+            (typeof coverFromRelation === "string" ? coverFromRelation : null),
+    };
+}
+
+export function stripToExcerpt(content: string, maxLen = 180): string {
+    const fromHtml = htmlContentToMarkdown(content);
+    const plain = fromHtml
+        .replace(/```[\s\S]*?```/g, " ")
+        .replace(/`[^`]*`/g, " ")
+        .replace(/!\[[^\]]*]\([^)]*\)/g, " ")
+        .replace(/\[[^\]]*]\([^)]*\)/g, " ")
+        .replace(/\+\+([^+]+)\+\+/g, "$1")
+        .replace(/[#>*_~\-|]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+    if (plain.length <= maxLen) return plain;
+    return `${plain.slice(0, maxLen).trim()}…`;
+}
+
+export function formatArticleDate(value?: string): string | undefined {
+    if (!value) return undefined;
+    const slice = value.length >= 10 ? value.slice(0, 10) : value;
+    const date = new Date(slice);
+    if (Number.isNaN(date.getTime())) return slice;
+    return date.toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" });
+}

package/src/helpers/generateQuizQuestions.ts

@@ -0,0 +1,247 @@
+export type QuizQuestionKind = "waste_bin" | "ab_image" | "mcq";
+
+export type QuizAnswerOption = {
+    id: string;
+    text: string;
+    wasteTypeId?: string;
+    imageUrl?: string;
+    type: "correct" | "wrong";
+};
+
+export type GeneratedQuizQuestion = {
+    kind: QuizQuestionKind;
+    id: string;
+    question: string;
+    correctAnswer: string;
+    /** Identifiant de la bonne option (wasteTypeId ou choice id). */
+    correctOptionId: string;
+    /** @deprecated Alias de correctOptionId pour waste_bin. */
+    correctWasteTypeId: string;
+    answers: QuizAnswerOption[];
+    material?: string;
+    imageUrl?: string;
+    /** Explication affichée après validation de la réponse. */
+    explanation?: string;
+};
+
+type QuizQuestionSource = {
+    id: string;
+    question?: string;
+    correctWasteTypeId?: string | null;
+    order?: number;
+    material?: string;
+    imageUrl?: string | null;
+    kind?: string | null;
+    options?: unknown;
+    explanationText?: string | null;
+    explanationDetailId?: string | null;
+    explanationDetail?: {
+        material?: string | null;
+        description?: string | null;
+        instructions?: string | null;
+    } | null;
+};
+
+export function resolveQuizExplanation(source: {
+    explanationText?: string | null;
+    explanationDetail?: {
+        material?: string | null;
+        description?: string | null;
+        instructions?: string | null;
+    } | null;
+}): string | undefined {
+    const free = typeof source.explanationText === "string"
+        ? source.explanationText.trim()
+        : "";
+    if (free) return free;
+    const detail = source.explanationDetail;
+    if (!detail) return undefined;
+    const fromDetail = (detail.instructions || detail.description || "").trim();
+    if (!fromDetail) return undefined;
+    const material = detail.material?.trim();
+    return material ? `${material} : ${fromDetail}` : fromDetail;
+}
+
+function asAbImageOptions(options: unknown): {
+    choices: Array<{ id: string; imageUrl: string; label?: string }>;
+    correctChoiceId: string;
+} | null {
+    if (!options || typeof options !== "object") return null;
+    const raw = options as {
+        choices?: Array<{ id?: string; imageUrl?: string; label?: string }>;
+        correctChoiceId?: string;
+    };
+    const choices = Array.isArray(raw.choices)
+        ? raw.choices
+              .map((c, i) => ({
+                  id: String(c?.id ?? (i === 0 ? "a" : "b")),
+                  imageUrl: String(c?.imageUrl ?? "").trim(),
+                  label: c?.label ? String(c.label) : undefined,
+              }))
+              .filter((c) => c.imageUrl)
+        : [];
+    if (choices.length < 2) return null;
+    const correctChoiceId = String(raw.correctChoiceId ?? "").trim();
+    if (!choices.some((c) => c.id === correctChoiceId)) return null;
+    return { choices: choices.slice(0, 2), correctChoiceId };
+}
+
+function asMcqOptions(options: unknown): {
+    choices: Array<{ id: string; text: string }>;
+    correctChoiceId: string;
+} | null {
+    if (!options || typeof options !== "object") return null;
+    const raw = options as {
+        choices?: Array<{ id?: string; text?: string }>;
+        correctChoiceId?: string;
+    };
+    const choices = Array.isArray(raw.choices)
+        ? raw.choices
+              .map((c, i) => ({
+                  id: String(c?.id ?? `c${i}`),
+                  text: String(c?.text ?? "").trim(),
+              }))
+              .filter((c) => c.text)
+        : [];
+    if (choices.length < 2) return null;
+    const correctChoiceId = String(raw.correctChoiceId ?? "").trim();
+    if (!choices.some((c) => c.id === correctChoiceId)) return null;
+    return { choices, correctChoiceId };
+}
+
+export function generateQuizQuestions(
+    wasteTypes: Array<{ id: string; name?: string }>,
+    serie?: {
+        id: string;
+        quizQuestions?: QuizQuestionSource[];
+    } | null
+): GeneratedQuizQuestion[] {
+    const questionsToUse = [...(serie?.quizQuestions ?? [])].sort(
+        (a, b) => (a.order ?? 0) - (b.order ?? 0)
+    );
+
+    if (questionsToUse.length === 0) {
+        return [];
+    }
+
+    return questionsToUse
+        .map((quizItem): GeneratedQuizQuestion | null => {
+            const kind = (quizItem.kind as QuizQuestionKind) || "waste_bin";
+
+            if (kind === "ab_image") {
+                const opts = asAbImageOptions(quizItem.options);
+                if (!opts) return null;
+                const correct = opts.choices.find((c) => c.id === opts.correctChoiceId);
+                return {
+                    kind: "ab_image",
+                    id: quizItem.id,
+                    question: quizItem.question || "Quelle image est la bonne ?",
+                    correctAnswer: correct?.label || "Image correcte",
+                    correctOptionId: opts.correctChoiceId,
+                    correctWasteTypeId: opts.correctChoiceId,
+                    answers: opts.choices.map((choice) => ({
+                        id: choice.id,
+                        text: choice.label || (choice.id === "a" ? "A" : "B"),
+                        imageUrl: choice.imageUrl,
+                        type: choice.id === opts.correctChoiceId ? "correct" : "wrong",
+                    })),
+                    material: quizItem.material,
+                    explanation: resolveQuizExplanation(quizItem),
+                };
+            }
+
+            if (kind === "mcq") {
+                const opts = asMcqOptions(quizItem.options);
+                if (!opts) return null;
+                const correct = opts.choices.find((c) => c.id === opts.correctChoiceId);
+                const shuffled = [...opts.choices].sort(() => Math.random() - 0.5);
+                return {
+                    kind: "mcq",
+                    id: quizItem.id,
+                    question: quizItem.question || "Choisis la bonne réponse",
+                    correctAnswer: correct?.text || "Réponse correcte",
+                    correctOptionId: opts.correctChoiceId,
+                    correctWasteTypeId: opts.correctChoiceId,
+                    answers: shuffled.map((choice) => ({
+                        id: choice.id,
+                        text: choice.text,
+                        type: choice.id === opts.correctChoiceId ? "correct" : "wrong",
+                    })),
+                    material: quizItem.material,
+                    imageUrl:
+                        typeof quizItem.imageUrl === "string" && quizItem.imageUrl.trim()
+                            ? quizItem.imageUrl.trim()
+                            : undefined,
+                    explanation: resolveQuizExplanation(quizItem),
+                };
+            }
+
+            // waste_bin (legacy default)
+            if (wasteTypes.length === 0) return null;
+            const correctWasteType = wasteTypes.find(
+                (wt) => wt.id === quizItem.correctWasteTypeId
+            );
+            const otherWasteTypes = wasteTypes.filter(
+                (wt) => wt.id !== quizItem.correctWasteTypeId
+            );
+            const correctId = quizItem.correctWasteTypeId || "";
+
+            const answers: QuizAnswerOption[] = [
+                {
+                    id: correctId,
+                    text: correctWasteType?.name || "Poubelle incorrecte",
+                    wasteTypeId: correctId,
+                    type: "correct",
+                },
+                {
+                    id: otherWasteTypes[0]?.id || "wrong-0",
+                    text: otherWasteTypes[0]?.name || "Poubelle incorrecte",
+                    wasteTypeId: otherWasteTypes[0]?.id || "",
+                    type: "wrong",
+                },
+                {
+                    id: otherWasteTypes[1]?.id || "wrong-1",
+                    text: otherWasteTypes[1]?.name || "Poubelle incorrecte",
+                    wasteTypeId: otherWasteTypes[1]?.id || "",
+                    type: "wrong",
+                },
+            ];
+
+            const shuffledAnswers = [...answers].sort(() => Math.random() - 0.5);
+
+            return {
+                kind: "waste_bin",
+                id: quizItem.id,
+                question: quizItem.question || "Où jeter cet objet ?",
+                correctAnswer: correctWasteType?.name || "Poubelle",
+                correctOptionId: correctId,
+                correctWasteTypeId: correctId,
+                answers: shuffledAnswers,
+                material: quizItem.material,
+                imageUrl:
+                    typeof quizItem.imageUrl === "string" && quizItem.imageUrl.trim()
+                        ? quizItem.imageUrl.trim()
+                        : undefined,
+                explanation: resolveQuizExplanation(quizItem),
+            };
+        })
+        .filter((q): q is GeneratedQuizQuestion => q !== null);
+}
+
+export function quizStarCount(correct: number, total: number): number {
+    if (total === 0) return 0;
+    const percentage = (correct / total) * 100;
+    if (percentage === 100) return 5;
+    if (percentage >= 80) return 4;
+    if (percentage >= 60) return 3;
+    if (percentage >= 40) return 2;
+    return 1;
+}
+
+export function quizResultMessage(correct: number, total: number): string {
+    if (total === 0) return "Aucune question pour cette série.";
+    const percentage = (correct / total) * 100;
+    if (percentage >= 80) return "Excellent ! Tu es un vrai champion du tri !";
+    if (percentage >= 50) return "Super, encore un petit effort !";
+    return "Continue d'apprendre, tu vas y arriver !";
+}

package/src/helpers/getContrastColor.ts

@@ -0,0 +1,19 @@
+/**
+ * Détermine si le texte doit être noir ou blanc en fonction de la couleur de fond
+ * @param hex Color au format #RRGGBB ou #RGB
+ * @returns '#000000' ou '#FFFFFF'
+ */
+export function getContrastColor(hex: string): '#000000' | '#FFFFFF' {
+    let cleanHex = hex.replace('#', '');
+    if (cleanHex.length === 3) {
+        cleanHex = cleanHex.split('').map(char => char + char).join('');
+    }
+
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+
+    return yiq >= 128 ? '#000000' : '#FFFFFF';
+}

package/src/helpers/haptics.ts

@@ -0,0 +1,20 @@
+import * as Haptics from "expo-haptics";
+import { Platform } from "react-native";
+
+export async function hapticSelection() {
+    if (Platform.OS === "web") return;
+    try {
+        await Haptics.selectionAsync();
+    } catch {
+        // Haptics unavailable on simulator / unsupported devices
+    }
+}
+
+export async function hapticLight() {
+    if (Platform.OS === "web") return;
+    try {
+        await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    } catch {
+        // ignore
+    }
+}