@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/search/Search.tsx

@@ -1,320 +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,
-    },
-});
+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,
+    },
+});