@wasto/cms-components 1.5.10

package/src/components/recycling-info/RecyclingInfo.tsx

@@ -0,0 +1,189 @@
+import { StyleSheet, Text, View } from "react-native";
+import { Image } from "expo-image";
+import { useRecyclingInfo } from "../../hooks/useRecyclingInfo";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Title } from "../title/Title";
+import { Paragraph } from "../parapraph/Paragraph";
+import { getContrastColor } from "../../helpers/getContrastColor";
+import { Button } from "../button/Button";
+import { useState, type ReactNode } from "react";
+import { ConsignesModal } from "../consignes-modal/ConsignesModal";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
+import { useWasto } from "../../contexts/WastoContext";
+
+export type RecyclingInfoProps = {};
+
+export function RecyclingInfo({ }: RecyclingInfoProps): ReactNode {
+    const { recyclingInfos } = useRecyclingInfo();
+    const { theme } = useTheme();
+    const { apiUrl } = useWasto();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const [selectedWasteTypeId, setSelectedWasteTypeId] = useState<string | null>(null);
+
+    const handleOnWasteTypeSelected = (wasteTypeId: string) => {
+        return () => {
+            setSelectedWasteTypeId(wasteTypeId);
+        }
+    }
+
+    return <>
+        <View style={styles.container}>
+            {recyclingInfos.map((recyclingInfo) => {
+                const color = recyclingInfo.color ?? theme.colors.primary;
+                const illustration =
+                    resolveApiAssetUrl(apiUrl, recyclingInfo.imageUrl) ||
+                    (recyclingInfo.icon?.trim().startsWith("http") ? recyclingInfo.icon.trim() : null);
+                return (
+                    <View
+                        key={recyclingInfo.id}
+                        style={[
+                            styles.recyclingInfo,
+                            cardStyle(theme),
+                        ]}
+                    >
+                        <View
+                            style={[
+                                styles.header,
+                                { backgroundColor: color },
+                            ]}
+                        >
+                            {illustration ? (
+                                <Image
+                                    source={illustration}
+                                    style={styles.headerImage}
+                                    contentFit="contain"
+                                />
+                            ) : null}
+                            <Title
+                                text={recyclingInfo.name}
+                                level="3"
+                                style={{ color: getContrastColor(color), flex: 1 }}
+                            />
+                        </View>
+                        <View style={styles.body}>
+                            {recyclingInfo.description && (
+                                <Paragraph text={recyclingInfo.description} style={themedStyles.cardText} />
+                            )}
+                            <View
+                                style={[
+                                    styles.details,
+                                    {
+                                        backgroundColor: recyclingInfo.colorLight ?? theme.colors.primarySoft,
+                                        borderRadius: t.radii.md,
+                                    },
+                                ]}
+                            >
+                                {recyclingInfo.details?.map((detail) => {
+                                    const detailImageUrl = resolveApiAssetUrl(
+                                        apiUrl,
+                                        detail.imageUrl,
+                                    );
+                                    return (
+                                    <View
+                                        key={detail.id}
+                                        style={[
+                                            styles.detail,
+                                            {
+                                                backgroundColor: "#ffffff55",
+                                                borderRadius: t.radii.sm,
+                                            },
+                                        ]}
+                                    >
+                                        {detailImageUrl ? (
+                                            <Image
+                                                source={detailImageUrl}
+                                                style={styles.detailImage}
+                                                contentFit="contain"
+                                            />
+                                        ) : null}
+                                        <View style={styles.detailText}>
+                                            <Text
+                                                style={[
+                                                    styles.detailMaterial,
+                                                    { color: getContrastColor(recyclingInfo.colorLight ?? "#FFFFFF") }
+                                                ]}
+                                            >
+                                                {detail.material}
+                                            </Text>
+                                            <Text
+                                                style={{ color: getContrastColor(recyclingInfo.colorLight ?? "#FFFFFF") }}
+                                            >
+                                                {detail.description}
+                                            </Text>
+                                        </View>
+                                    </View>
+                                    );
+                                })}
+                            </View>
+                            <Button
+                                style={{ backgroundColor: color }}
+                                textStyle={{ color: getContrastColor(color) }}
+                                onPress={handleOnWasteTypeSelected(recyclingInfo.wasteTypeId)}
+                            >
+                                Voir les details
+                            </Button>
+                        </View>
+                    </View>
+                );
+            })}
+        </View>
+        <ConsignesModal
+            visible={!!selectedWasteTypeId}
+            wasteTypeId={selectedWasteTypeId!}
+            onClose={() => setSelectedWasteTypeId(null)}
+        />
+    </>
+}
+
+const createThemedStyles = (theme: Theme) => StyleSheet.create({
+    cardText: {
+        color: theme.colors.onSurface,
+    },
+});
+
+const styles = StyleSheet.create({
+    container: {
+        gap: 16,
+    },
+    recyclingInfo: {
+        overflow: "hidden",
+    },
+    header: {
+        padding: 16,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+    },
+    headerImage: {
+        width: 56,
+        height: 56,
+    },
+    body: {
+        padding: 16,
+        gap: 16,
+    },
+    details: {
+        padding: 12,
+        gap: 10,
+    },
+    detail: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        padding: 12,
+    },
+    detailImage: {
+        width: 48,
+        height: 48,
+    },
+    detailText: {
+        flex: 1,
+        gap: 4,
+    },
+    detailMaterial: {
+        fontWeight: "700"
+    },
+});

package/src/components/safe-area/OptionalSafeAreaProvider.tsx

@@ -0,0 +1,17 @@
+import { useContext, type PropsWithChildren } from "react";
+import {
+    SafeAreaInsetsContext,
+    SafeAreaProvider,
+} from "react-native-safe-area-context";
+
+/**
+ * Reuses a parent Expo Router / React Navigation `SafeAreaProvider`.
+ * Mounts one only when the host has none (standalone / no navigation).
+ */
+export function OptionalSafeAreaProvider({ children }: PropsWithChildren) {
+    const parentInsets = useContext(SafeAreaInsetsContext);
+    if (parentInsets != null) {
+        return children;
+    }
+    return <SafeAreaProvider>{children}</SafeAreaProvider>;
+}

package/src/components/search/Search.tsx

@@ -0,0 +1,320 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { ChevronRight, Search as SearchIcon } from "lucide-react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { useRecyclingInfo } from "../../hooks/useRecyclingInfo";
+import { useBlogPosts } from "../../hooks/useBlogPosts";
+import { useLocations, LOCATION_CATEGORY_META } from "../../hooks/useLocations";
+import { ConsignesModal } from "../consignes-modal/ConsignesModal";
+import { ArticleReaderModal } from "../article/ArticleReaderModal";
+import type { BlogPost } from "../../helpers/blogPost";
+import { groupedSectionStyle, resolveTheme } from "../../helpers/themeStyles";
+
+export type SearchType = "all" | "waste-type" | "collection-points" | "articles";
+
+export type SearchProps = {
+    searchType: SearchType;
+    placeholder?: string;
+};
+
+function matchesQuery(haystack: string | undefined, query: string): boolean {
+    if (!haystack) return false;
+    return haystack.toLowerCase().includes(query);
+}
+
+type ResultRowProps = {
+    title: string;
+    meta?: string;
+    accent: string;
+    onPress?: () => void;
+    showDivider: boolean;
+    dividerInset: number;
+};
+
+function ResultRow({
+    title,
+    meta,
+    accent,
+    onPress,
+    showDivider,
+    dividerInset,
+}: ResultRowProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const content = (
+        <>
+            <View style={styles.rowInner}>
+                <View style={[styles.dot, { backgroundColor: accent }]} />
+                <View style={styles.rowText}>
+                    <Text style={[styles.rowTitle, { color: theme.colors.onSurface }]}>
+                        {title}
+                    </Text>
+                    {meta ? (
+                        <Text style={[styles.rowMeta, { color: t.colors.muted }]} numberOfLines={2}>
+                            {meta}
+                        </Text>
+                    ) : null}
+                </View>
+                {onPress ? (
+                    <ChevronRight size={18} color={t.colors.muted} />
+                ) : null}
+            </View>
+            {showDivider ? (
+                <View
+                    style={[
+                        styles.rowDivider,
+                        {
+                            backgroundColor: theme.colors.border,
+                            marginLeft: dividerInset,
+                        },
+                    ]}
+                />
+            ) : null}
+        </>
+    );
+
+    if (onPress) {
+        return (
+            <Pressable onPress={onPress} style={({ pressed }) => pressed && styles.pressed}>
+                {content}
+            </Pressable>
+        );
+    }
+    return <View>{content}</View>;
+}
+
+function ResultSection({
+    label,
+    children,
+}: {
+    label?: string;
+    children: ReactNode;
+}) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    return (
+        <View style={styles.section}>
+            {label ? (
+                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>{label}</Text>
+            ) : null}
+            <View style={groupedSectionStyle(theme)}>{children}</View>
+        </View>
+    );
+}
+
+export function Search({
+    searchType,
+    placeholder,
+}: SearchProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const { recyclingInfos } = useRecyclingInfo();
+    const { posts } = useBlogPosts();
+    const { locations } = useLocations();
+
+    const [draft, setDraft] = useState("");
+    const [query, setQuery] = useState("");
+    const [wasteTypeId, setWasteTypeId] = useState<string | null>(null);
+    const [article, setArticle] = useState<BlogPost | null>(null);
+
+    useEffect(() => {
+        const handle = setTimeout(() => setQuery(draft.trim().toLowerCase()), 250);
+        return () => clearTimeout(handle);
+    }, [draft]);
+
+    const wasteResults = useMemo(() => {
+        if (!query || (searchType !== "all" && searchType !== "waste-type")) return [];
+        return recyclingInfos.filter(
+            (info) => matchesQuery(info.name, query) || matchesQuery(info.description, query)
+        );
+    }, [query, recyclingInfos, searchType]);
+
+    const locationResults = useMemo(() => {
+        if (!query || (searchType !== "all" && searchType !== "collection-points")) return [];
+        return locations.filter(
+            (loc) => matchesQuery(loc.name, query) || matchesQuery(loc.address, query)
+        );
+    }, [locations, query, searchType]);
+
+    const articleResults = useMemo(() => {
+        if (!query || (searchType !== "all" && searchType !== "articles")) return [];
+        return posts.filter(
+            (post) => matchesQuery(post.title, query) || matchesQuery(post.content, query)
+        );
+    }, [posts, query, searchType]);
+
+    const hasQuery = query.length > 0;
+    const empty =
+        hasQuery &&
+        wasteResults.length === 0 &&
+        locationResults.length === 0 &&
+        articleResults.length === 0;
+
+    const dividerInset = 14 + 10 + 12; // padding + dot + gap
+
+    return (
+        <View style={styles.wrap}>
+            <View
+                style={[
+                    styles.inputRow,
+                    {
+                        backgroundColor: theme.colors.surface,
+                        borderRadius: t.radii.md,
+                        borderWidth: 1,
+                        borderColor: theme.colors.border,
+                    },
+                ]}
+            >
+                <SearchIcon size={18} color={t.colors.muted} />
+                <TextInput
+                    value={draft}
+                    onChangeText={setDraft}
+                    placeholder={placeholder || "Rechercher…"}
+                    placeholderTextColor={t.colors.muted}
+                    style={[styles.input, themedStyles.input]}
+                    autoCorrect={false}
+                    autoCapitalize="none"
+                />
+            </View>
+
+            {empty ? (
+                <Text style={[styles.empty, { color: t.colors.muted }]}>Aucun résultat</Text>
+            ) : null}
+
+            {wasteResults.length > 0 ? (
+                <ResultSection label={searchType === "all" ? "Consignes" : undefined}>
+                    {wasteResults.map((info, index) => (
+                        <ResultRow
+                            key={info.id}
+                            title={info.name}
+                            meta={info.description}
+                            accent={info.color ?? theme.colors.primary}
+                            onPress={() => setWasteTypeId(info.wasteTypeId)}
+                            showDivider={index < wasteResults.length - 1}
+                            dividerInset={dividerInset}
+                        />
+                    ))}
+                </ResultSection>
+            ) : null}
+
+            {locationResults.length > 0 ? (
+                <ResultSection label={searchType === "all" ? "Points de collecte" : undefined}>
+                    {locationResults.map((loc, index) => (
+                        <ResultRow
+                            key={loc.id}
+                            title={loc.name}
+                            meta={[
+                                LOCATION_CATEGORY_META[loc.category].label,
+                                loc.address,
+                            ]
+                                .filter(Boolean)
+                                .join(" · ")}
+                            accent={LOCATION_CATEGORY_META[loc.category].color}
+                            showDivider={index < locationResults.length - 1}
+                            dividerInset={dividerInset}
+                        />
+                    ))}
+                </ResultSection>
+            ) : null}
+
+            {articleResults.length > 0 ? (
+                <ResultSection label={searchType === "all" ? "Articles" : undefined}>
+                    {articleResults.map((post, index) => (
+                        <ResultRow
+                            key={post.id}
+                            title={post.title}
+                            accent={theme.colors.primary}
+                            onPress={() => setArticle(post)}
+                            showDivider={index < articleResults.length - 1}
+                            dividerInset={dividerInset}
+                        />
+                    ))}
+                </ResultSection>
+            ) : null}
+
+            <ConsignesModal
+                visible={!!wasteTypeId}
+                wasteTypeId={wasteTypeId ?? ""}
+                onClose={() => setWasteTypeId(null)}
+            />
+            <ArticleReaderModal
+                visible={!!article}
+                post={article}
+                onClose={() => setArticle(null)}
+            />
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        input: {
+            color: theme.colors.onSurface,
+        },
+    });
+
+const styles = StyleSheet.create({
+    wrap: {
+        gap: 16,
+    },
+    inputRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        overflow: "hidden",
+    },
+    input: {
+        flex: 1,
+        fontSize: 16,
+        paddingVertical: 4,
+    },
+    empty: {
+        fontSize: 14,
+        textAlign: "center",
+        paddingVertical: 8,
+    },
+    section: {
+        gap: 8,
+    },
+    sectionLabel: {
+        fontSize: 12,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        letterSpacing: 0.6,
+        paddingHorizontal: 4,
+    },
+    rowInner: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+    },
+    dot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+    },
+    rowText: {
+        flex: 1,
+        gap: 2,
+    },
+    rowTitle: {
+        fontSize: 15,
+        fontWeight: "600",
+    },
+    rowMeta: {
+        fontSize: 13,
+        lineHeight: 18,
+    },
+    rowDivider: {
+        height: StyleSheet.hairlineWidth,
+    },
+    pressed: {
+        opacity: 0.85,
+    },
+});