@wasto/cms-components 1.5.10

package/src/components/header/Header.tsx

@@ -0,0 +1,391 @@
+import { Bell, ChevronLeftIcon, User } from "lucide-react-native";
+import {
+    Image,
+    Pressable,
+    StyleSheet,
+    View,
+    type ImageStyle,
+} from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { Title } from "../title/Title";
+import { Theme } from "../../types/Theme";
+import { useMemo, type ReactNode } from "react";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { useAnnouncements } from "../../contexts/AnnouncementsContext";
+import { hapticSelection } from "../../helpers/haptics";
+import { SPACE } from "../../helpers/layout";
+import { SYSTEM_ROUTES } from "../../helpers/systemRoutes";
+import { useAppNavigation } from "../../navigation/NavigationContext";
+import { publicMediaUrl } from "../../helpers/publicMediaUrl";
+
+export type AppHeaderSlot = "left" | "center" | "right";
+
+export type AppHeaderLogoElement = {
+    id: string;
+    type: "logo";
+    slot: AppHeaderSlot;
+    sourceType: "url" | "media";
+    url?: string;
+    mediaId?: string;
+};
+
+export type AppHeaderTitleElement = {
+    id: string;
+    type: "title";
+    slot: AppHeaderSlot;
+    useScreenTitle?: boolean;
+    text?: string;
+};
+
+export type AppHeaderActionElement = {
+    id: string;
+    type: "action";
+    slot: AppHeaderSlot;
+    icon: string;
+    label?: string;
+    action: "navigate" | "back";
+    href?: string;
+};
+
+export type AppHeaderElement =
+    | AppHeaderLogoElement
+    | AppHeaderTitleElement
+    | AppHeaderActionElement;
+
+export type AppHeaderConfig = {
+    elements: AppHeaderElement[];
+};
+
+export type HeaderProps = {
+    readonly options: { title?: string; headerBackVisible?: boolean };
+    readonly route: { name: string };
+    readonly navigation: {
+        canGoBack: () => boolean;
+        goBack: () => void;
+    };
+    /** Flotte au-dessus du contenu (ex. carte) : fond transparent. */
+    readonly overlay?: boolean;
+    /** Config layout (`header.elements`) — logo / titre / actions. */
+    readonly headerConfig?: AppHeaderConfig | null;
+};
+
+function resolveLogoUri(
+    apiUrl: string,
+    el: AppHeaderLogoElement,
+): string | null {
+    if (el.sourceType === "media") {
+        return publicMediaUrl(apiUrl, el.mediaId);
+    }
+    const url = (el.url || "").trim();
+    return url || null;
+}
+
+function HeaderLogo({
+    element,
+}: {
+    readonly element: AppHeaderLogoElement;
+}): ReactNode {
+    const { apiUrl } = useWasto();
+    const uri = resolveLogoUri(apiUrl, element);
+    if (!uri) return null;
+    return (
+        <Image
+            source={{ uri }}
+            style={styles.logo as ImageStyle}
+            resizeMode="contain"
+            accessibilityLabel="Logo"
+        />
+    );
+}
+
+function HeaderActionButton({
+    onPress,
+    accessibilityLabel,
+    children,
+    themedStyles,
+    borderRadius,
+}: {
+    readonly onPress: () => void;
+    readonly accessibilityLabel: string;
+    readonly children: ReactNode;
+    readonly themedStyles: ReturnType<typeof createThemedStyles>;
+    readonly borderRadius: number;
+}): ReactNode {
+    return (
+        <Pressable
+            onPress={onPress}
+            style={[styles.iconBtn, themedStyles.iconBtn, { borderRadius }]}
+            accessibilityLabel={accessibilityLabel}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+export function Header({
+    options,
+    route,
+    navigation,
+    overlay = false,
+    headerConfig,
+}: HeaderProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const { hasUnread } = useAnnouncements();
+    const { push } = useAppNavigation();
+
+    const screenTitle = useMemo(
+        () => options.title ?? route.name,
+        [options.title, route.name],
+    );
+
+    const elements = headerConfig?.elements ?? [];
+    const hasCustom = elements.length > 0;
+    const hasCustomActions = elements.some((el) => el.type === "action");
+
+    const bySlot = useMemo(() => {
+        const left: AppHeaderElement[] = [];
+        const center: AppHeaderElement[] = [];
+        const right: AppHeaderElement[] = [];
+        for (const el of elements) {
+            if (el.slot === "center") center.push(el);
+            else if (el.slot === "right") right.push(el);
+            else left.push(el);
+        }
+        return { left, center, right };
+    }, [elements]);
+
+    const onBell = async () => {
+        await hapticSelection();
+        push(SYSTEM_ROUTES.notifications);
+    };
+
+    const onProfile = async () => {
+        await hapticSelection();
+        push(SYSTEM_ROUTES.profile);
+    };
+
+    const renderElement = (el: AppHeaderElement): ReactNode => {
+        if (el.type === "logo") {
+            return <HeaderLogo key={el.id} element={el} />;
+        }
+        if (el.type === "title") {
+            const text =
+                el.useScreenTitle !== false
+                    ? screenTitle
+                    : (el.text || "").trim() || screenTitle;
+            return <Title key={el.id} text={text} level="1" />;
+        }
+        // action
+        const onPress = async () => {
+            await hapticSelection();
+            if (el.action === "back") {
+                if (navigation.canGoBack()) navigation.goBack();
+                return;
+            }
+            const href = (el.href || "").trim();
+            if (href) push(href);
+        };
+        const label = el.label?.trim() || el.icon || "Action";
+        // Icônes système connues (bell / person) — le reste tombe sur Bell.
+        const Icon =
+            el.icon === "person" || el.icon === "users"
+                ? User
+                : Bell;
+        return (
+            <HeaderActionButton
+                key={el.id}
+                onPress={onPress}
+                accessibilityLabel={label}
+                themedStyles={themedStyles}
+                borderRadius={t.radii.pill}
+            >
+                <Icon size={SPACE.iconGlyph} color={theme.colors.primary} />
+                {el.icon === "bell" && hasUnread ? (
+                    <View
+                        style={[
+                            styles.badge,
+                            { backgroundColor: theme.colors.error },
+                        ]}
+                    />
+                ) : null}
+            </HeaderActionButton>
+        );
+    };
+
+    const showBack =
+        navigation.canGoBack() && options.headerBackVisible !== false;
+
+    const defaultActions = (
+        <>
+            <HeaderActionButton
+                onPress={onBell}
+                accessibilityLabel="Notifications"
+                themedStyles={themedStyles}
+                borderRadius={t.radii.pill}
+            >
+                <Bell size={SPACE.iconGlyph} color={theme.colors.primary} />
+                {hasUnread ? (
+                    <View
+                        style={[
+                            styles.badge,
+                            { backgroundColor: theme.colors.error },
+                        ]}
+                    />
+                ) : null}
+            </HeaderActionButton>
+            <HeaderActionButton
+                onPress={onProfile}
+                accessibilityLabel="Profil"
+                themedStyles={themedStyles}
+                borderRadius={t.radii.pill}
+            >
+                <User size={SPACE.iconGlyph} color={theme.colors.primary} />
+            </HeaderActionButton>
+        </>
+    );
+
+    return (
+        <View
+            style={[
+                styles.headerWrap,
+                overlay ? undefined : themedStyles.headerWrap,
+                topInset,
+            ]}
+            pointerEvents="box-none"
+        >
+            <View style={styles.header} pointerEvents="box-none">
+                {hasCustom ? (
+                    <>
+                        <View style={styles.slotLeft} pointerEvents="box-none">
+                            {showBack ? (
+                                <HeaderActionButton
+                                    onPress={() => navigation.goBack()}
+                                    accessibilityLabel="Retour"
+                                    themedStyles={themedStyles}
+                                    borderRadius={t.radii.pill}
+                                >
+                                    <ChevronLeftIcon
+                                        size={SPACE.iconGlyph}
+                                        color={theme.colors.onSurface}
+                                    />
+                                </HeaderActionButton>
+                            ) : null}
+                            {bySlot.left.map(renderElement)}
+                        </View>
+                        <View
+                            style={styles.slotCenter}
+                            pointerEvents="box-none"
+                        >
+                            {bySlot.center.map(renderElement)}
+                        </View>
+                        <View style={styles.slotRight} pointerEvents="box-none">
+                            {bySlot.right.map(renderElement)}
+                            {!hasCustomActions ? defaultActions : null}
+                        </View>
+                    </>
+                ) : (
+                    <>
+                        <View style={styles.left} pointerEvents="box-none">
+                            {showBack ? (
+                                <HeaderActionButton
+                                    onPress={() => navigation.goBack()}
+                                    accessibilityLabel="Retour"
+                                    themedStyles={themedStyles}
+                                    borderRadius={t.radii.pill}
+                                >
+                                    <ChevronLeftIcon
+                                        size={SPACE.iconGlyph}
+                                        color={theme.colors.onSurface}
+                                    />
+                                </HeaderActionButton>
+                            ) : null}
+                            <Title text={screenTitle} level="1" />
+                        </View>
+                        <View style={styles.actions}>{defaultActions}</View>
+                    </>
+                )}
+            </View>
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        headerWrap: {
+            backgroundColor: theme.colors.background,
+        },
+        iconBtn: {
+            backgroundColor: theme.colors.surface,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+        },
+    });
+
+const styles = StyleSheet.create({
+    headerWrap: {},
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: SPACE.pageX,
+        paddingVertical: 12,
+        gap: 10,
+        minHeight: 56,
+    },
+    left: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        flex: 1,
+    },
+    slotLeft: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    slotCenter: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        minWidth: 0,
+    },
+    slotRight: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        flexShrink: 0,
+    },
+    actions: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    iconBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    badge: {
+        position: "absolute",
+        top: 4,
+        right: 4,
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+    },
+    logo: {
+        height: 32,
+        width: 120,
+        maxWidth: 160,
+    },
+});

package/src/components/image/Image.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { ImageMedia, ImageMediaProps } from "./ImageMedia";
+import { ImageUrl, ImageUrlProps } from "./ImageUrl";
+
+export type ImageProps =
+    | ImageUrlProps
+    | ImageMediaProps
+
+export function Image(props: ImageProps): ReactNode {
+    switch(props.sourceType) {
+    case "url":
+        return <ImageUrl {...props}/>
+    case "media":
+        return <ImageMedia {...props}/>
+    }
+}

package/src/components/image/ImageFrame.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Image as ExpoImage } from "expo-image";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+
+export type ImageFrameProps = {
+    uri: string | null;
+    alt?: string;
+    transparentBackground?: boolean;
+    showBorder?: boolean;
+};
+
+export function ImageFrame({
+    uri,
+    alt,
+    transparentBackground = false,
+    showBorder = true,
+}: ImageFrameProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const radius = transparentBackground && !showBorder ? 0 : theme.radius;
+
+    return (
+        <View
+            style={[
+                styles.frame,
+                {
+                    backgroundColor: transparentBackground ? "transparent" : theme.colors.surface,
+                    borderWidth: showBorder ? 1 : 0,
+                    borderColor: theme.colors.border,
+                    borderRadius: radius,
+                },
+            ]}
+        >
+            {uri ? (
+                <ExpoImage
+                    source={uri}
+                    style={[
+                        styles.image,
+                        { backgroundColor: transparentBackground ? "transparent" : undefined },
+                    ]}
+                    contentFit={transparentBackground ? "contain" : "cover"}
+                    accessibilityLabel={alt}
+                />
+            ) : (
+                <View style={styles.placeholder}>
+                    <Text style={themedStyles.placeholder}>Image indisponible</Text>
+                </View>
+            )}
+            {alt ? (
+                <Text
+                    style={[
+                        styles.caption,
+                        themedStyles.caption,
+                        transparentBackground && styles.captionBare,
+                    ]}
+                >
+                    {alt}
+                </Text>
+            ) : null}
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        caption: {
+            color: theme.colors.onSurface,
+        },
+        placeholder: {
+            color: theme.colors.onSurface,
+            opacity: 0.6,
+        },
+    });
+
+const styles = StyleSheet.create({
+    frame: {
+        width: "100%",
+        overflow: "hidden",
+    },
+    image: {
+        width: "100%",
+        height: 220,
+    },
+    placeholder: {
+        height: 160,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    caption: {
+        fontSize: 14,
+        opacity: 0.6,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    captionBare: {
+        paddingHorizontal: 4,
+        paddingTop: 8,
+        paddingBottom: 0,
+    },
+});

package/src/components/image/ImageMedia.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { useWasto } from "../../contexts/WastoContext";
+import { publicMediaUrl } from "../../helpers/publicMediaUrl";
+import { ImageFrame } from "./ImageFrame";
+
+export type ImageMediaProps = {
+    sourceType: "media";
+    mediaId: string;
+    alt?: string;
+    transparentBackground?: boolean;
+    showBorder?: boolean;
+};
+
+export function ImageMedia({
+    mediaId,
+    alt,
+    transparentBackground,
+    showBorder,
+}: ImageMediaProps): ReactNode {
+    const { apiUrl } = useWasto();
+    const uri = publicMediaUrl(apiUrl, mediaId);
+
+    return (
+        <ImageFrame
+            uri={uri}
+            alt={alt}
+            transparentBackground={transparentBackground}
+            showBorder={showBorder}
+        />
+    );
+}

package/src/components/image/ImageUrl.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { ImageFrame } from "./ImageFrame";
+
+export type ImageUrlProps = {
+    sourceType: "url";
+    url: string;
+    alt?: string;
+    transparentBackground?: boolean;
+    showBorder?: boolean;
+};
+
+export function ImageUrl({
+    url,
+    alt,
+    transparentBackground,
+    showBorder,
+}: ImageUrlProps): ReactNode {
+    const trimmed = (url ?? "").trim();
+    const uri =
+        trimmed && trimmed !== "https://" && trimmed !== "http://" ? trimmed : null;
+
+    return (
+        <ImageFrame
+            uri={uri}
+            alt={alt}
+            transparentBackground={transparentBackground}
+            showBorder={showBorder}
+        />
+    );
+}