@wasto/cms-components 1.5.10

package/src/components/next-collection/NextCollection.tsx

@@ -0,0 +1,621 @@
+import {
+    Dimensions,
+    Platform,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
+} from "react-native";
+import { Image } from "expo-image";
+import Animated, {
+    Extrapolation,
+    FadeInRight,
+    FadeOutLeft,
+    interpolate,
+    interpolateColor,
+    runOnJS,
+    type SharedValue,
+    useAnimatedReaction,
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useSharedValue,
+} from "react-native-reanimated";
+import { useNextCollection } from "../../hooks/useNextCollection";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react-native";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { ConsignesModal } from "../consignes-modal/ConsignesModal";
+import { NavButton } from "../nav-button/NavButton";
+import { Button } from "../button/Button";
+import { ContentInset } from "../content-inset/ContentInset";
+import { useTheme } from "../../contexts/ThemeContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { hapticSelection } from "../../helpers/haptics";
+import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
+import { useWasto } from "../../contexts/WastoContext";
+import { SPACE } from "../../helpers/layout";
+import type { Theme } from "../../types/Theme";
+import { useAppNavigation } from "../../navigation/NavigationContext";
+
+export type NextCollectionProps = {
+    /** Route / screen name for the calendar CTA. Defaults to trying common tab paths. */
+    calendarHref?: string;
+    /** Show calendar CTA under the slider (home mockup). Default true. */
+    showCalendarCta?: boolean;
+    /**
+     * Initial day offset relative to today (0 = today, 1 = tomorrow, -1 = yesterday).
+     * User can still navigate with prev/next.
+     */
+    dayOffset?: number;
+};
+
+/** Maquette: side cards ≈ 174/196 of active height */
+const SIDE_SCALE = 174 / 196;
+const CARD_GAP = 12;
+/** Side inset so current card is centered with a peek of the next (~maquette). */
+const SIDE_INSET = 20;
+const CARD_ASPECT = 196 / 286;
+/** White contour around the light-grey panel (screenshot). */
+const FRAME_PAD = 10;
+/**
+ * Figma Ellipse 4 on card 286×196 — only the top of a huge circle is visible
+ * (~52px), as a white bump on the bottom border.
+ */
+const BUMP = {
+    w: 813 / 286,
+    /** Visible bump height / card height (196 − 144) / 196 */
+    visible: 52 / 196,
+} as const;
+
+type CollectionItem = {
+    id: string;
+    name: string;
+    color?: string | null;
+    imageUrl?: string | null;
+    icon?: string;
+};
+
+function CollectionSlide({
+    item,
+    index,
+    scrollX,
+    cardWidth,
+    cardHeight,
+    snapInterval,
+    theme,
+    imageUri,
+    onPress,
+    isLast,
+}: {
+    item: CollectionItem;
+    index: number;
+    scrollX: SharedValue<number>;
+    cardWidth: number;
+    cardHeight: number;
+    snapInterval: number;
+    theme: Theme;
+    imageUri: string | null;
+    onPress: () => void;
+    isLast: boolean;
+}) {
+    const t = resolveTheme(theme);
+    const accent = item.color ?? theme.colors.primary;
+    const imageSize = Math.round(cardHeight * 0.55);
+    const panelW = cardWidth - FRAME_PAD * 2;
+    // True circle (square + radius/2). A non-square + borderRadius 9999
+    // renders as a rounded rectangle / pill on RN web.
+    const bumpSize = cardWidth * BUMP.w;
+    const bumpVisible = cardHeight * BUMP.visible;
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const center = index * snapInterval;
+        const scale = interpolate(
+            scrollX.value,
+            [center - snapInterval, center, center + snapInterval],
+            [SIDE_SCALE, 1, SIDE_SCALE],
+            Extrapolation.CLAMP,
+        );
+        return {
+            transform: [{ scale }],
+        };
+    }, [index, snapInterval]);
+
+    return (
+        <Animated.View
+            style={[
+                styles.slide,
+                {
+                    width: cardWidth,
+                    height: cardHeight,
+                    marginRight: isLast ? 0 : CARD_GAP,
+                    ...(Platform.OS === "web"
+                        ? ({ scrollSnapAlign: "center", scrollSnapStop: "always" } as object)
+                        : null),
+                },
+                animatedStyle,
+            ]}
+        >
+            <Pressable
+                onPress={onPress}
+                style={[
+                    styles.cardFrame,
+                    {
+                        borderRadius: t.radii.lg,
+                        backgroundColor: "#FFFFFF",
+                        borderWidth: 1,
+                        borderColor: theme.colors.border,
+                        padding: FRAME_PAD,
+                        ...t.shadow.card,
+                    },
+                ]}
+            >
+                {/* Light-grey interior — white bump is the frame swelling up */}
+                <View
+                    style={[
+                        styles.cardPanel,
+                        {
+                            backgroundColor: "#F0F0F0",
+                            borderRadius: Math.max(10, t.radii.lg - 6),
+                        },
+                    ]}
+                >
+                    <View
+                        pointerEvents="none"
+                        style={{
+                            position: "absolute",
+                            width: bumpSize,
+                            height: bumpSize,
+                            borderRadius: bumpSize / 2,
+                            left: (panelW - bumpSize) / 2,
+                            bottom: -(bumpSize - bumpVisible),
+                            backgroundColor: "#FFFFFF",
+                        }}
+                    />
+
+                    <View style={styles.cardContent}>
+                        <Text
+                            style={[styles.wasteName, { color: theme.colors.onSurface }]}
+                            numberOfLines={2}
+                        >
+                            {item.name}
+                        </Text>
+                        {imageUri ? (
+                            <Image
+                                source={imageUri}
+                                style={{ width: imageSize, height: imageSize }}
+                                contentFit="contain"
+                            />
+                        ) : (
+                            <View
+                                style={{
+                                    width: imageSize,
+                                    height: imageSize,
+                                    backgroundColor: `${accent}22`,
+                                    borderRadius: t.radii.md,
+                                }}
+                            />
+                        )}
+                    </View>
+                </View>
+            </Pressable>
+        </Animated.View>
+    );
+}
+
+/** Animated dots driven by scrollX. Maquette: pill 16×6 / dot 6×6. */
+function CollectionPagination({
+    count,
+    scrollX,
+    snapInterval,
+    activeColor,
+    inactiveColor,
+    pageLabelColor,
+}: {
+    count: number;
+    scrollX: SharedValue<number>;
+    snapInterval: number;
+    activeColor: string;
+    inactiveColor: string;
+    pageLabelColor: string;
+}) {
+    const [pageIndex, setPageIndex] = useState(0);
+
+    useAnimatedReaction(
+        () => Math.round(scrollX.value / Math.max(snapInterval, 1)),
+        (current, previous) => {
+            if (current !== previous) {
+                const clamped = Math.max(0, Math.min(current, count - 1));
+                runOnJS(setPageIndex)(clamped);
+            }
+        },
+        [snapInterval, count],
+    );
+
+    return (
+        <View style={styles.pagination}>
+            {Array.from({ length: count }, (_, idx) => (
+                <PaginationDot
+                    key={idx}
+                    index={idx}
+                    scrollX={scrollX}
+                    snapInterval={snapInterval}
+                    activeColor={activeColor}
+                    inactiveColor={inactiveColor}
+                />
+            ))}
+            <Text style={[styles.pageCount, { color: pageLabelColor }]}>
+                {pageIndex + 1}/{count}
+            </Text>
+        </View>
+    );
+}
+
+function PaginationDot({
+    index,
+    scrollX,
+    snapInterval,
+    activeColor,
+    inactiveColor,
+}: {
+    index: number;
+    scrollX: SharedValue<number>;
+    snapInterval: number;
+    activeColor: string;
+    inactiveColor: string;
+}) {
+    const animatedStyle = useAnimatedStyle(() => {
+        const inputRange = [
+            (index - 1) * snapInterval,
+            index * snapInterval,
+            (index + 1) * snapInterval,
+        ];
+        return {
+            width: interpolate(
+                scrollX.value,
+                inputRange,
+                [6, 16, 6],
+                Extrapolation.CLAMP,
+            ),
+            opacity: interpolate(
+                scrollX.value,
+                inputRange,
+                [0.4, 1, 0.4],
+                Extrapolation.CLAMP,
+            ),
+            backgroundColor: interpolateColor(scrollX.value, inputRange, [
+                inactiveColor,
+                activeColor,
+                inactiveColor,
+            ]),
+        };
+    }, [index, snapInterval, activeColor, inactiveColor]);
+
+    return <Animated.View style={[styles.dotBase, animatedStyle]} />;
+}
+
+export function NextCollection({
+    calendarHref,
+    showCalendarCta = true,
+    dayOffset = 0,
+}: NextCollectionProps): ReactNode {
+    const { theme } = useTheme();
+    const { apiUrl } = useWasto();
+    const { push } = useAppNavigation();
+    const t = resolveTheme(theme);
+    const [offset, setOffset] = useState(() => Math.trunc(dayOffset));
+    const { collectionsForDay, dateLabel } = useNextCollection({
+        dateOffset: offset,
+    });
+
+    useEffect(() => {
+        setOffset(Math.trunc(dayOffset));
+    }, [dayOffset]);
+
+    const [selectedWasteTypeId, setSelectedWasteTypeId] = useState<string | null>(null);
+    const listRef = useRef<Animated.FlatList<CollectionItem>>(null);
+    const scrollX = useSharedValue(0);
+    const lastSnappedIndex = useRef(0);
+
+    const screenWidth = Dimensions.get("window").width;
+    // Near full-bleed with SIDE_INSET peek — matches maquette presence (286 on 402 ≈ side 16–58)
+    const cardWidth = Math.round(screenWidth - SIDE_INSET * 2);
+    const cardHeight = Math.round(cardWidth * CARD_ASPECT);
+    const sidePad = SIDE_INSET;
+    const snapInterval = cardWidth + CARD_GAP;
+
+    const snapOffsets = useMemo(
+        () => collectionsForDay.map((_, i) => i * snapInterval),
+        [collectionsForDay, snapInterval],
+    );
+
+    const imageSource = (item: CollectionItem) => {
+        const fromUrl = resolveApiAssetUrl(apiUrl, item.imageUrl);
+        if (fromUrl) return fromUrl;
+        if (
+            typeof item.icon === "string" &&
+            item.icon.trim() &&
+            /^https?:\/\//i.test(item.icon)
+        ) {
+            return item.icon.trim();
+        }
+        return null;
+    };
+
+    const scrollHandler = useAnimatedScrollHandler(
+        {
+            onScroll: (e) => {
+                scrollX.value = e.contentOffset.x;
+            },
+        },
+        [],
+    );
+
+    const snapToNearest = useCallback(
+        (x: number) => {
+            if (collectionsForDay.length === 0) return;
+            const index = Math.round(x / snapInterval);
+            const clamped = Math.max(0, Math.min(index, collectionsForDay.length - 1));
+            const target = clamped * snapInterval;
+            if (clamped !== lastSnappedIndex.current) {
+                lastSnappedIndex.current = clamped;
+                void hapticSelection();
+            }
+            if (Math.abs(x - target) > 1) {
+                listRef.current?.scrollToOffset({ offset: target, animated: true });
+            }
+            scrollX.value = target;
+        },
+        [collectionsForDay.length, snapInterval, scrollX],
+    );
+
+    const onScrollSettle = useCallback(
+        (
+            e:
+                | NativeSyntheticEvent<NativeScrollEvent>
+                | { nativeEvent: { contentOffset: { x: number } } },
+        ) => {
+            snapToNearest(e.nativeEvent.contentOffset.x);
+        },
+        [snapToNearest],
+    );
+
+    const changeDate = async (delta: number) => {
+        await hapticSelection();
+        setOffset((o) => o + delta);
+        lastSnappedIndex.current = 0;
+        scrollX.value = 0;
+        requestAnimationFrame(() => {
+            listRef.current?.scrollToOffset({ offset: 0, animated: true });
+        });
+    };
+
+    const openCalendar = () => {
+        const normalizeHref = (href: string) =>
+            href.startsWith("/") ? href : `/${href}`;
+        const candidates = [
+            calendarHref,
+            "/(tabs)/calendrier",
+            "/(tabs)/calendar",
+            "/calendrier",
+            "/calendar",
+        ]
+            .filter(Boolean)
+            .map((href) => normalizeHref(href as string));
+
+        for (const href of candidates) {
+            try {
+                push(href);
+                return;
+            } catch {
+                // try next
+            }
+        }
+    };
+
+    return (
+        <>
+            <View style={styles.section}>
+                <ContentInset>
+                    <View style={styles.header}>
+                        <Animated.Text
+                            key={dateLabel}
+                            entering={FadeInRight.duration(220)}
+                            exiting={FadeOutLeft.duration(160)}
+                            style={[styles.sectionLabel, { color: t.colors.muted }]}
+                        >
+                            {dateLabel.toUpperCase()}
+                        </Animated.Text>
+                        <View style={styles.navRow}>
+                            <NavButton
+                                icon={ChevronLeftIcon}
+                                onPress={() => changeDate(-1)}
+                                style={styles.navCircle}
+                            />
+                            <NavButton
+                                icon={ChevronRightIcon}
+                                onPress={() => changeDate(1)}
+                                style={styles.navCircle}
+                            />
+                        </View>
+                    </View>
+                </ContentInset>
+
+                {collectionsForDay.length === 0 ? (
+                    <ContentInset>
+                        <View
+                            style={[
+                                styles.emptyCard,
+                                cardStyle(theme),
+                                {
+                                    borderRadius: t.radii.lg,
+                                    minHeight: cardHeight,
+                                },
+                            ]}
+                        >
+                            <Text style={[styles.emptyText, { color: t.colors.muted }]}>
+                                Rien pour aujourd'hui
+                            </Text>
+                        </View>
+                    </ContentInset>
+                ) : (
+                    <View key={offset}>
+                        <Animated.FlatList
+                            ref={listRef}
+                            data={collectionsForDay as CollectionItem[]}
+                            keyExtractor={(item) => item.id}
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                            decelerationRate="fast"
+                            snapToInterval={Platform.OS === "web" ? undefined : snapInterval}
+                            snapToOffsets={Platform.OS === "web" ? undefined : snapOffsets}
+                            snapToAlignment="center"
+                            disableIntervalMomentum
+                            bounces={false}
+                            scrollEventThrottle={16}
+                            onScroll={scrollHandler}
+                            onScrollEndDrag={onScrollSettle}
+                            onMomentumScrollEnd={onScrollSettle}
+                            contentContainerStyle={{
+                                paddingHorizontal: sidePad,
+                                alignItems: "center",
+                            }}
+                            style={[
+                                { height: cardHeight },
+                                Platform.OS === "web"
+                                    ? ({
+                                          scrollSnapType: "x mandatory",
+                                          WebkitOverflowScrolling: "touch",
+                                      } as object)
+                                    : null,
+                            ]}
+                            renderItem={({ item, index }) => (
+                                <CollectionSlide
+                                    item={item}
+                                    index={index}
+                                    scrollX={scrollX}
+                                    cardWidth={cardWidth}
+                                    cardHeight={cardHeight}
+                                    snapInterval={snapInterval}
+                                    theme={theme}
+                                    imageUri={imageSource(item)}
+                                    isLast={index === collectionsForDay.length - 1}
+                                    onPress={() => setSelectedWasteTypeId(item.id)}
+                                />
+                            )}
+                        />
+
+                        <CollectionPagination
+                            count={collectionsForDay.length}
+                            scrollX={scrollX}
+                            snapInterval={snapInterval}
+                            activeColor={theme.colors.primary}
+                            inactiveColor={theme.colors.border}
+                            pageLabelColor={t.colors.muted}
+                        />
+                    </View>
+                )}
+
+                {showCalendarCta ? (
+                    <ContentInset>
+                        <Button
+                            onPress={openCalendar}
+                            style={[styles.cta, { borderRadius: t.radii.md }]}
+                        >
+                            Afficher le calendrier
+                        </Button>
+                    </ContentInset>
+                ) : null}
+            </View>
+
+            <ConsignesModal
+                visible={!!selectedWasteTypeId}
+                wasteTypeId={selectedWasteTypeId!}
+                onClose={() => setSelectedWasteTypeId(null)}
+            />
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    section: {
+        gap: 14,
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    sectionLabel: {
+        fontSize: 13,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    navRow: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    navCircle: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+    },
+    slide: {
+        justifyContent: "center",
+    },
+    cardFrame: {
+        flex: 1,
+        overflow: "hidden",
+    },
+    cardPanel: {
+        flex: 1,
+        overflow: "hidden",
+        position: "relative",
+    },
+    cardContent: {
+        flex: 1,
+        zIndex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        paddingLeft: 14,
+        paddingRight: 12,
+        paddingVertical: 14,
+    },
+    wasteName: {
+        flex: 1,
+        fontSize: 22,
+        fontWeight: "800",
+        lineHeight: 28,
+    },
+    pagination: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        gap: 6,
+        marginTop: 10,
+        paddingHorizontal: SPACE.pageX,
+    },
+    dotBase: {
+        height: 6,
+        borderRadius: 3,
+    },
+    pageCount: {
+        marginLeft: 4,
+        fontSize: 12,
+        fontWeight: "600",
+    },
+    emptyCard: {
+        padding: 24,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    emptyText: {
+        fontSize: 14,
+        fontWeight: "600",
+    },
+    cta: {
+        height: SPACE.buttonH,
+    },
+});