@wasto/cms-components 1.5.10 → 1.5.11

package/src/helpers/themeStyles.ts

@@ -1,114 +1,114 @@
-import { ViewStyle } from "react-native";
-import type { ResolvedTheme, Theme, ThemeShadowStyle } from "../types/Theme";
-
-function withAlpha(hex: string, alphaHex: string): string {
-    const h = hex.replace("#", "").trim();
-    if (h.length === 3) {
-        const r = h[0];
-        const g = h[1];
-        const b = h[2];
-        return `#${r}${r}${g}${g}${b}${b}${alphaHex}`;
-    }
-    if (h.length === 6) return `#${h}${alphaHex}`;
-    if (h.length === 8) return `#${h.slice(0, 6)}${alphaHex}`;
-    return `${hex}`;
-}
-
-const DEFAULT_SHADOW_COLOR = "#0F172A";
-
-/** Console-like shadow-sm defaults. */
-function defaultCardShadow(): ThemeShadowStyle {
-    return {
-        shadowColor: DEFAULT_SHADOW_COLOR,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.06,
-        shadowRadius: 3,
-        elevation: 1,
-    };
-}
-
-function defaultSoftShadow(): ThemeShadowStyle {
-    return {
-        shadowColor: DEFAULT_SHADOW_COLOR,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.04,
-        shadowRadius: 2,
-        elevation: 1,
-    };
-}
-
-/** Fill optional theme fields with sensible defaults (retrocompat / maquette-like). */
-export function resolveTheme(theme: Theme): ResolvedTheme {
-    // Maquette default principal radius when omitted (cards ~20).
-    const radius = theme.radius ?? 20;
-    const primary = theme.colors.primary;
-
-    return {
-        ...theme,
-        colors: {
-            ...theme.colors,
-            primarySoft: theme.colors.primarySoft ?? withAlpha(primary, "22"),
-            surfaceElevated: theme.colors.surfaceElevated ?? theme.colors.surface,
-            muted: theme.colors.muted ?? withAlpha(theme.colors.onSurface, "99"),
-        },
-        radii: theme.radii ?? {
-            sm: Math.max(12, Math.round(radius * 0.6)),
-            md: Math.max(14, Math.round(radius * 0.8)),
-            lg: Math.max(radius, Math.round(radius * 1.2)),
-            pill: 999,
-        },
-        shadow: {
-            card: theme.shadow?.card ?? defaultCardShadow(),
-            soft: theme.shadow?.soft ?? defaultSoftShadow(),
-        },
-    };
-}
-
-/**
- * Soft elevation tinted with a brand / category color.
- * Prefer border + category fill for cards; use sparingly (e.g. active chips).
- */
-export function coloredShadow(hex: string, opacity = 0.12): ThemeShadowStyle {
-    return {
-        shadowColor: hex,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: opacity,
-        shadowRadius: 4,
-        elevation: 2,
-    };
-}
-
-/** Shared card: surface + border + light shadow (console / shadcn). */
-export function cardStyle(theme: Theme, opts?: { elevated?: boolean }): ViewStyle {
-    const t = resolveTheme(theme);
-    return {
-        backgroundColor: opts?.elevated ? t.colors.surfaceElevated : t.colors.surface,
-        borderRadius: t.radii.lg,
-        borderWidth: 1,
-        borderColor: t.colors.border,
-        ...t.shadow.card,
-    };
-}
-
-export function softCardStyle(theme: Theme): ViewStyle {
-    const t = resolveTheme(theme);
-    return {
-        backgroundColor: t.colors.surface,
-        borderRadius: t.radii.md,
-        borderWidth: 1,
-        borderColor: t.colors.border,
-        ...t.shadow.soft,
-    };
-}
-
-/** Inset grouped list section: one surface, rows separated by internal hairlines. */
-export function groupedSectionStyle(theme: Theme): ViewStyle {
-    const t = resolveTheme(theme);
-    return {
-        backgroundColor: t.colors.surface,
-        borderRadius: t.radii.lg,
-        borderWidth: 1,
-        borderColor: t.colors.border,
-        overflow: "hidden",
-    };
-}
+import { ViewStyle } from "react-native";
+import type { ResolvedTheme, Theme, ThemeShadowStyle } from "../types/Theme";
+
+function withAlpha(hex: string, alphaHex: string): string {
+    const h = hex.replace("#", "").trim();
+    if (h.length === 3) {
+        const r = h[0];
+        const g = h[1];
+        const b = h[2];
+        return `#${r}${r}${g}${g}${b}${b}${alphaHex}`;
+    }
+    if (h.length === 6) return `#${h}${alphaHex}`;
+    if (h.length === 8) return `#${h.slice(0, 6)}${alphaHex}`;
+    return `${hex}`;
+}
+
+const DEFAULT_SHADOW_COLOR = "#0F172A";
+
+/** Console-like shadow-sm defaults. */
+function defaultCardShadow(): ThemeShadowStyle {
+    return {
+        shadowColor: DEFAULT_SHADOW_COLOR,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.06,
+        shadowRadius: 3,
+        elevation: 1,
+    };
+}
+
+function defaultSoftShadow(): ThemeShadowStyle {
+    return {
+        shadowColor: DEFAULT_SHADOW_COLOR,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2,
+        elevation: 1,
+    };
+}
+
+/** Fill optional theme fields with sensible defaults (retrocompat / maquette-like). */
+export function resolveTheme(theme: Theme): ResolvedTheme {
+    // Maquette default principal radius when omitted (cards ~20).
+    const radius = theme.radius ?? 20;
+    const primary = theme.colors.primary;
+
+    return {
+        ...theme,
+        colors: {
+            ...theme.colors,
+            primarySoft: theme.colors.primarySoft ?? withAlpha(primary, "22"),
+            surfaceElevated: theme.colors.surfaceElevated ?? theme.colors.surface,
+            muted: theme.colors.muted ?? withAlpha(theme.colors.onSurface, "99"),
+        },
+        radii: theme.radii ?? {
+            sm: Math.max(12, Math.round(radius * 0.6)),
+            md: Math.max(14, Math.round(radius * 0.8)),
+            lg: Math.max(radius, Math.round(radius * 1.2)),
+            pill: 999,
+        },
+        shadow: {
+            card: theme.shadow?.card ?? defaultCardShadow(),
+            soft: theme.shadow?.soft ?? defaultSoftShadow(),
+        },
+    };
+}
+
+/**
+ * Soft elevation tinted with a brand / category color.
+ * Prefer border + category fill for cards; use sparingly (e.g. active chips).
+ */
+export function coloredShadow(hex: string, opacity = 0.12): ThemeShadowStyle {
+    return {
+        shadowColor: hex,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: opacity,
+        shadowRadius: 4,
+        elevation: 2,
+    };
+}
+
+/** Shared card: surface + border + light shadow (console / shadcn). */
+export function cardStyle(theme: Theme, opts?: { elevated?: boolean }): ViewStyle {
+    const t = resolveTheme(theme);
+    return {
+        backgroundColor: opts?.elevated ? t.colors.surfaceElevated : t.colors.surface,
+        borderRadius: t.radii.lg,
+        borderWidth: 1,
+        borderColor: t.colors.border,
+        ...t.shadow.card,
+    };
+}
+
+export function softCardStyle(theme: Theme): ViewStyle {
+    const t = resolveTheme(theme);
+    return {
+        backgroundColor: t.colors.surface,
+        borderRadius: t.radii.md,
+        borderWidth: 1,
+        borderColor: t.colors.border,
+        ...t.shadow.soft,
+    };
+}
+
+/** Inset grouped list section: one surface, rows separated by internal hairlines. */
+export function groupedSectionStyle(theme: Theme): ViewStyle {
+    const t = resolveTheme(theme);
+    return {
+        backgroundColor: t.colors.surface,
+        borderRadius: t.radii.lg,
+        borderWidth: 1,
+        borderColor: t.colors.border,
+        overflow: "hidden",
+    };
+}

package/src/helpers/ttlCache.ts

@@ -0,0 +1,41 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export const APP_DATA_CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+
+type CacheEnvelope<T> = {
+    savedAt: number;
+    data: T;
+};
+
+export async function readTtlCache<T>(
+    key: string,
+    ttlMs: number = APP_DATA_CACHE_TTL_MS,
+): Promise<T | null> {
+    try {
+        const raw = await AsyncStorage.getItem(key);
+        if (!raw) return null;
+        const parsed = JSON.parse(raw) as CacheEnvelope<T>;
+        if (
+            !parsed ||
+            typeof parsed.savedAt !== "number" ||
+            parsed.data === undefined
+        ) {
+            return null;
+        }
+        if (Date.now() - parsed.savedAt > ttlMs) {
+            return null;
+        }
+        return parsed.data;
+    } catch {
+        return null;
+    }
+}
+
+export async function writeTtlCache<T>(key: string, data: T): Promise<void> {
+    const envelope: CacheEnvelope<T> = { savedAt: Date.now(), data };
+    await AsyncStorage.setItem(key, JSON.stringify(envelope));
+}
+
+export async function clearTtlCache(key: string): Promise<void> {
+    await AsyncStorage.removeItem(key);
+}

package/src/helpers/useSafeAreaPadding.ts

@@ -1,14 +1,14 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export type SafeAreaEdge = "top" | "bottom" | "left" | "right";
-
-/** Padding on a regular RN `View` — avoids Fabric `SafeAreaView` / codegen in bundled libs. */
-export function useSafeAreaPadding(edges: readonly SafeAreaEdge[]) {
-    const insets = useSafeAreaInsets();
-    return {
-        ...(edges.includes("top") ? { paddingTop: insets.top } : null),
-        ...(edges.includes("bottom") ? { paddingBottom: insets.bottom } : null),
-        ...(edges.includes("left") ? { paddingLeft: insets.left } : null),
-        ...(edges.includes("right") ? { paddingRight: insets.right } : null),
-    };
-}
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export type SafeAreaEdge = "top" | "bottom" | "left" | "right";
+
+/** Padding on a regular RN `View` — avoids Fabric `SafeAreaView` / codegen in bundled libs. */
+export function useSafeAreaPadding(edges: readonly SafeAreaEdge[]) {
+    const insets = useSafeAreaInsets();
+    return {
+        ...(edges.includes("top") ? { paddingTop: insets.top } : null),
+        ...(edges.includes("bottom") ? { paddingBottom: insets.bottom } : null),
+        ...(edges.includes("left") ? { paddingLeft: insets.left } : null),
+        ...(edges.includes("right") ? { paddingRight: insets.right } : null),
+    };
+}

package/src/hooks/useBadges.ts

@@ -1,100 +1,100 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useLocal } from "../contexts/LocalContext";
-import { useWastoClient } from "./useWastoClient";
-
-export type Badge = {
-    id: string;
-    name: string;
-    description?: string;
-    imageUrl?: string;
-    icon?: string;
-    challenge?: { id: string; name: string; order?: number };
-    [key: string]: unknown;
-};
-
-export type PaginationMeta = {
-    page: number;
-    pageSize: number;
-    total: number;
-    pageCount: number;
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    [key: string]: unknown;
-};
-
-export type UseBadgesOptions = {
-    /** Si omis, utilise `LocalContext.selectedCityId`. */
-    cityId?: string | null;
-    page?: number;
-    pageSize?: number;
-};
-
-export type UseBadgesResult = {
-    cityId: string | null;
-    badges: Badge[];
-    meta: PaginationMeta | null;
-    isLoading: boolean;
-    error: string | null;
-    refetch: () => Promise<void>;
-    getBadgeById: (id: string) => Badge | undefined;
-};
-
-export function useBadges(options: UseBadgesOptions = {}): UseBadgesResult {
-    const { selectedCityId } = useLocal();
-
-    const resolvedCityId = options.cityId ?? selectedCityId ?? null;
-    const page = options.page ?? 1;
-    const pageSize = options.pageSize ?? 100;
-
-    const client = useWastoClient();
-
-    const [badges, setBadges] = useState<Badge[]>([]);
-    const [meta, setMeta] = useState<PaginationMeta | null>(null);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const fetchBadges = useCallback(async () => {
-        if (!resolvedCityId) {
-            setBadges([]);
-            setMeta(null);
-            setIsLoading(false);
-            setError(null);
-            return;
-        }
-
-        try {
-            setIsLoading(true);
-            setError(null);
-            const res = await client.public.cities.getBadges(resolvedCityId, { page, pageSize });
-            const data = (res as { data?: unknown })?.data;
-            const meta = (res as { meta?: unknown })?.meta;
-            setBadges(Array.isArray(data) ? (data as Badge[]) : []);
-            setMeta(meta && typeof meta === "object" ? (meta as PaginationMeta) : null);
-        } catch (err) {
-            const message =
-                err instanceof Error ? err.message : typeof err === "string" ? err : "Impossible de charger les badges";
-            setError(message);
-            setBadges([]);
-            setMeta(null);
-        } finally {
-            setIsLoading(false);
-        }
-    }, [client.public.cities, page, pageSize, resolvedCityId]);
-
-    useEffect(() => {
-        void fetchBadges();
-    }, [fetchBadges]);
-
-    const getBadgeById = useCallback((id: string) => badges.find((b) => b.id === id), [badges]);
-
-    return {
-        cityId: resolvedCityId,
-        badges,
-        meta,
-        isLoading,
-        error,
-        refetch: fetchBadges,
-        getBadgeById,
-    };
-}
-
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocal } from "../contexts/LocalContext";
+import { useWastoClient } from "./useWastoClient";
+
+export type Badge = {
+    id: string;
+    name: string;
+    description?: string;
+    imageUrl?: string;
+    icon?: string;
+    challenge?: { id: string; name: string; order?: number };
+    [key: string]: unknown;
+};
+
+export type PaginationMeta = {
+    page: number;
+    pageSize: number;
+    total: number;
+    pageCount: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    [key: string]: unknown;
+};
+
+export type UseBadgesOptions = {
+    /** Si omis, utilise `LocalContext.selectedCityId`. */
+    cityId?: string | null;
+    page?: number;
+    pageSize?: number;
+};
+
+export type UseBadgesResult = {
+    cityId: string | null;
+    badges: Badge[];
+    meta: PaginationMeta | null;
+    isLoading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+    getBadgeById: (id: string) => Badge | undefined;
+};
+
+export function useBadges(options: UseBadgesOptions = {}): UseBadgesResult {
+    const { selectedCityId } = useLocal();
+
+    const resolvedCityId = options.cityId ?? selectedCityId ?? null;
+    const page = options.page ?? 1;
+    const pageSize = options.pageSize ?? 100;
+
+    const client = useWastoClient();
+
+    const [badges, setBadges] = useState<Badge[]>([]);
+    const [meta, setMeta] = useState<PaginationMeta | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchBadges = useCallback(async () => {
+        if (!resolvedCityId) {
+            setBadges([]);
+            setMeta(null);
+            setIsLoading(false);
+            setError(null);
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            setError(null);
+            const res = await client.public.cities.getBadges(resolvedCityId, { page, pageSize });
+            const data = (res as { data?: unknown })?.data;
+            const meta = (res as { meta?: unknown })?.meta;
+            setBadges(Array.isArray(data) ? (data as Badge[]) : []);
+            setMeta(meta && typeof meta === "object" ? (meta as PaginationMeta) : null);
+        } catch (err) {
+            const message =
+                err instanceof Error ? err.message : typeof err === "string" ? err : "Impossible de charger les badges";
+            setError(message);
+            setBadges([]);
+            setMeta(null);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client.public.cities, page, pageSize, resolvedCityId]);
+
+    useEffect(() => {
+        void fetchBadges();
+    }, [fetchBadges]);
+
+    const getBadgeById = useCallback((id: string) => badges.find((b) => b.id === id), [badges]);
+
+    return {
+        cityId: resolvedCityId,
+        badges,
+        meta,
+        isLoading,
+        error,
+        refetch: fetchBadges,
+        getBadgeById,
+    };
+}
+