@wasto/cms-components 1.5.10

package/src/components/collection-calendar/CollectionCalendar.tsx

@@ -0,0 +1,274 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react-native";
+import { useCollectionCalendar, type WasteTypeInfoForDay } from "../../hooks/useCollectionCalendar";
+import { StyleSheet, Text, View } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { NavButton } from "../nav-button/NavButton";
+import { ContentInset } from "../content-inset/ContentInset";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { NextCollection } from "../next-collection/NextCollection";
+import { hapticSelection } from "../../helpers/haptics";
+import { SPACE } from "../../helpers/layout";
+import { useState, type ReactNode } from "react";
+
+export type CollectionCalendarProps = {};
+
+const PIN_H = 6;
+const CELL_INSET = 4;
+
+function colorAlpha(hex: string, alphaHex: string): string {
+    const h = hex.replace("#", "").trim();
+    if (h.length === 3) {
+        return `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}${alphaHex}`;
+    }
+    if (h.length === 6) return `#${h}${alphaHex}`;
+    if (h.length === 8) return `#${h.slice(0, 6)}${alphaHex}`;
+    return hex;
+}
+
+function WasteTypePins({ types }: { types: WasteTypeInfoForDay[] }) {
+    if (types.length === 0) return null;
+
+    return (
+        <View style={styles.wasteTypes}>
+            {types.map((wasteType) => (
+                <View
+                    key={wasteType.wasteTypeId}
+                    style={[styles.wasteType, { backgroundColor: wasteType.color }]}
+                />
+            ))}
+        </View>
+    );
+}
+
+export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
+    const {
+        weekDays,
+        weeks,
+        monthLabel,
+        goToNextMonth,
+        goToPrevMonth,
+    } = useCollectionCalendar();
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const [monthKey, setMonthKey] = useState(0);
+    const today = new Date();
+    const todayDay = today.getDate();
+    const todayMonth = today.getMonth();
+    const todayYear = today.getFullYear();
+    const exceptionFill = colorAlpha(theme.colors.error, "33");
+
+    const prev = async () => {
+        await hapticSelection();
+        goToPrevMonth();
+        setMonthKey((k) => k - 1);
+    };
+    const next = async () => {
+        await hapticSelection();
+        goToNextMonth();
+        setMonthKey((k) => k + 1);
+    };
+
+    return (
+        <View style={styles.collectionCalendar}>
+            <ContentInset>
+                <View style={styles.header}>
+                    <Text style={[styles.monthLabel, { color: t.colors.muted }]}>
+                        {monthLabel.toUpperCase()}
+                    </Text>
+                    <View style={styles.navRow}>
+                        <NavButton
+                            icon={ChevronLeftIcon}
+                            onPress={prev}
+                            style={styles.navCircle}
+                        />
+                        <NavButton
+                            icon={ChevronRightIcon}
+                            onPress={next}
+                            style={styles.navCircle}
+                        />
+                    </View>
+                </View>
+            </ContentInset>
+
+            <Animated.View
+                key={monthKey}
+                entering={FadeIn.duration(220)}
+                exiting={FadeOut.duration(160)}
+                style={styles.grid}
+            >
+                <View style={[styles.calendarHeader, { backgroundColor: theme.colors.background }]}>
+                    {weekDays.map((weekDay) => (
+                        <View key={weekDay} style={styles.calendarHeaderCell}>
+                            <Text style={themedStyles.mutedText}>{weekDay}</Text>
+                        </View>
+                    ))}
+                </View>
+                <View style={styles.calendarBody}>
+                    {weeks.map((week, index) => (
+                        <View
+                            key={index}
+                            style={[
+                                styles.calendarBodyRow,
+                                {
+                                    backgroundColor:
+                                        index % 2 === 0
+                                            ? theme.colors.surface
+                                            : theme.colors.background,
+                                },
+                            ]}
+                        >
+                            {week.map((day, cellIndex) => {
+                                const isToday =
+                                    day.inCurrentMonth &&
+                                    day.day === todayDay &&
+                                    day.month === todayMonth &&
+                                    day.year === todayYear;
+                                const isException = day.exceptions.length > 0;
+
+                                return (
+                                    <View
+                                        key={cellIndex}
+                                        style={[
+                                            styles.calendarBodyCell,
+                                            !day.inCurrentMonth && styles.notCurrentMonth,
+                                        ]}
+                                    >
+                                        {isToday || isException ? (
+                                            <View
+                                                pointerEvents="none"
+                                                style={[
+                                                    styles.dayHighlight,
+                                                    {
+                                                        backgroundColor: isToday
+                                                            ? theme.colors.primary
+                                                            : exceptionFill,
+                                                        borderRadius: t.radii.sm,
+                                                    },
+                                                ]}
+                                            />
+                                        ) : null}
+                                        <Text
+                                            style={[
+                                                styles.dayNumber,
+                                                isToday
+                                                    ? {
+                                                          color: theme.colors.onPrimary,
+                                                          fontWeight: "700",
+                                                      }
+                                                    : isException
+                                                      ? {
+                                                            color: theme.colors.error,
+                                                            fontWeight: "700",
+                                                        }
+                                                      : themedStyles.dayNumber,
+                                            ]}
+                                        >
+                                            {day.day}
+                                        </Text>
+                                        <WasteTypePins types={day.wasteTypesForDay} />
+                                    </View>
+                                );
+                            })}
+                        </View>
+                    ))}
+                </View>
+            </Animated.View>
+
+            <NextCollection showCalendarCta={false} />
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        dayNumber: {
+            color: theme.colors.muted ?? theme.colors.onSurface,
+        },
+        mutedText: {
+            color: theme.colors.muted ?? theme.colors.onSurface,
+            fontSize: 12,
+            fontWeight: "600",
+        },
+    });
+
+const styles = StyleSheet.create({
+    collectionCalendar: {
+        gap: SPACE.sectionY,
+        width: "100%",
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: 12,
+    },
+    monthLabel: {
+        fontSize: 13,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    navRow: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    navCircle: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+    },
+    grid: {
+        width: "100%",
+        overflow: "hidden",
+    },
+    calendarHeader: {
+        flexDirection: "row",
+    },
+    calendarHeaderCell: {
+        flex: 1,
+        paddingVertical: 10,
+        alignItems: "center",
+    },
+    calendarBody: {
+        width: "100%",
+    },
+    calendarBodyRow: {
+        flexDirection: "row",
+    },
+    calendarBodyCell: {
+        flex: 1,
+        aspectRatio: 1,
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    dayHighlight: {
+        ...StyleSheet.absoluteFillObject,
+        margin: CELL_INSET,
+        zIndex: 0,
+    },
+    dayNumber: {
+        fontSize: 14,
+        fontWeight: "600",
+        zIndex: 1,
+    },
+    notCurrentMonth: {
+        opacity: 0.32,
+    },
+    wasteTypes: {
+        position: "absolute",
+        left: CELL_INSET,
+        right: CELL_INSET,
+        bottom: CELL_INSET + 2,
+        height: PIN_H,
+        flexDirection: "row",
+        borderRadius: PIN_H / 2,
+        overflow: "hidden",
+        zIndex: 2,
+    },
+    wasteType: {
+        flex: 1,
+        height: PIN_H,
+    },
+});

package/src/components/columns/Columns.tsx

@@ -0,0 +1,34 @@
+import { Children, PropsWithChildren, type ReactNode } from "react"
+import { StyleSheet, View } from "react-native";
+
+export type ColumnsColumnCount = 2 | 3;
+
+export type ColumnsProps = PropsWithChildren & {
+    columnCount: ColumnsColumnCount
+}
+
+export function Columns({
+    columnCount,
+    children
+}: ColumnsProps): ReactNode {
+    if (Children.count(children) > columnCount) {
+        throw new Error(`Columns must have ${columnCount} (columnCount) children.`);
+    }
+
+    return <View style={styles.columns}>
+        {Children.map(children, (child) => (
+            <View style={styles.column}>{child}</View>
+        ))}
+    </View>
+}
+
+const styles = StyleSheet.create({
+    columns: {
+        flexDirection: "row",
+        width: "100%"
+    },
+    column: {
+        padding: 5,
+        flex: 1
+    },
+});

package/src/components/consignes-modal/ConsignesModal.tsx

@@ -0,0 +1,267 @@
+import type { ReactNode } from "react";
+import { Dimensions, Modal, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Image } from "expo-image";
+import { useConsignes } from "../../hooks/useConsignes";
+import { Title } from "../title/Title";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { XIcon } from "lucide-react-native";
+import { NavButton } from "../nav-button/NavButton";
+import { getContrastColor } from "../../helpers/getContrastColor";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { groupedSectionStyle, resolveTheme } from "../../helpers/themeStyles";
+import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
+import { useWasto } from "../../contexts/WastoContext";
+
+export type ConsignesModalProps = {
+    visible: boolean;
+    wasteTypeId: string;
+    onClose: () => void;
+};
+
+export function ConsignesModal({
+    visible,
+    wasteTypeId,
+    onClose
+}: ConsignesModalProps): ReactNode {
+    const {
+        wasteType,
+    } = useConsignes(wasteTypeId);
+    const { theme } = useTheme();
+    const { apiUrl } = useWasto();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const bottomInset = useSafeAreaPadding(["bottom"]);
+    const headerColor = wasteType?.color ?? theme.colors.primary;
+    const contrast = getContrastColor(headerColor);
+    const details = wasteType?.details ?? [];
+    const rules = wasteType?.rules ?? [];
+    const headerImageUrl = resolveApiAssetUrl(apiUrl, wasteType?.imageUrl);
+
+    return <Modal
+        visible={visible}
+        animationType="slide"
+        onRequestClose={onClose}
+    >
+        <View style={[styles.modal, themedStyles.modal]}>
+            <View
+                style={[
+                    themedStyles.headerSafeArea,
+                    { backgroundColor: headerColor, borderBottomLeftRadius: theme.radii.lg, borderBottomRightRadius: theme.radii.lg },
+                    topInset,
+                ]}
+            >
+                <View style={styles.header}>
+                    <View style={styles.headerTitleRow}>
+                        {headerImageUrl ? (
+                            <Image
+                                source={headerImageUrl}
+                                style={styles.headerImage}
+                                contentFit="contain"
+                            />
+                        ) : null}
+                        <Title
+                            text={wasteType?.name ?? ""}
+                            level="2"
+                            style={{ color: contrast, flex: 1 }}
+                            numberOfLines={2}
+                        />
+                    </View>
+                    <NavButton
+                        icon={XIcon}
+                        variant="close"
+                        onPress={onClose}
+                    />
+                </View>
+            </View>
+            <View style={[styles.bodyWrap, bottomInset]}>
+                <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                    {details.length > 0 ? (
+                        <View style={styles.section}>
+                            <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
+                                Matériaux
+                            </Text>
+                            <View style={groupedSectionStyle(theme)}>
+                                {details.map((detail, index) => {
+                                    const detailImageUrl = resolveApiAssetUrl(
+                                        apiUrl,
+                                        detail.imageUrl,
+                                    );
+                                    return (
+                                    <View key={detail.id}>
+                                        <View style={styles.detailRow}>
+                                            {detailImageUrl ? (
+                                                <Image
+                                                    source={detailImageUrl}
+                                                    style={styles.detailImage}
+                                                    contentFit="contain"
+                                                />
+                                            ) : (
+                                                <View
+                                                    style={[
+                                                        styles.detailDot,
+                                                        { backgroundColor: headerColor },
+                                                    ]}
+                                                />
+                                            )}
+                                            <View style={styles.detailText}>
+                                                {detail.material ? (
+                                                    <Text style={themedStyles.detailTitle}>
+                                                        {detail.material}
+                                                    </Text>
+                                                ) : null}
+                                                {detail.description ? (
+                                                    <Text style={themedStyles.detailBody}>
+                                                        {detail.description}
+                                                    </Text>
+                                                ) : null}
+                                            </View>
+                                        </View>
+                                        {index < details.length - 1 ? (
+                                            <View
+                                                style={[
+                                                    styles.rowDivider,
+                                                    {
+                                                        backgroundColor: theme.colors.border,
+                                                        marginLeft: detailImageUrl ? 64 : 42,
+                                                    },
+                                                ]}
+                                            />
+                                        ) : null}
+                                    </View>
+                                    );
+                                })}
+                            </View>
+                        </View>
+                    ) : null}
+
+                    {rules.length > 0 ? (
+                        <View style={styles.section}>
+                            <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
+                                Règles
+                            </Text>
+                            <View style={[groupedSectionStyle(theme), styles.rulesGroup]}>
+                                {rules.map((rule, index) => (
+                                    <View key={index} style={styles.ruleRow}>
+                                        <View
+                                            style={[
+                                                styles.ruleBullet,
+                                                { backgroundColor: headerColor },
+                                            ]}
+                                        />
+                                        <Text style={themedStyles.detailBody}>{rule}</Text>
+                                    </View>
+                                ))}
+                            </View>
+                        </View>
+                    ) : null}
+                </ScrollView>
+            </View>
+        </View>
+    </Modal>
+}
+
+const createThemedStyles = (theme: Theme) => StyleSheet.create({
+    modal: {
+        backgroundColor: theme.colors.background,
+    },
+    headerSafeArea: {},
+    detailTitle: {
+        color: theme.colors.onSurface,
+        fontSize: 15,
+        fontWeight: "600",
+    },
+    detailBody: {
+        color: theme.colors.onSurface,
+        fontSize: 14,
+        lineHeight: 20,
+        opacity: 0.85,
+        flex: 1,
+    },
+});
+
+const styles = StyleSheet.create({
+    modal: {
+        height: Dimensions.get("screen").height
+    },
+    header: {
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 12,
+    },
+    headerTitleRow: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+    },
+    headerImage: {
+        width: 56,
+        height: 56,
+    },
+    bodyWrap: {
+        flex: 1,
+    },
+    body: {
+        padding: 16,
+        flexGrow: 1,
+        gap: 20,
+        paddingBottom: 28,
+    },
+    section: {
+        gap: 8,
+    },
+    sectionLabel: {
+        fontSize: 12,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        letterSpacing: 0.6,
+        paddingHorizontal: 4,
+    },
+    detailRow: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 14,
+    },
+    detailImage: {
+        width: 40,
+        height: 40,
+    },
+    detailDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        marginTop: 5,
+    },
+    detailText: {
+        flex: 1,
+        gap: 4,
+    },
+    rowDivider: {
+        height: StyleSheet.hairlineWidth,
+    },
+    rulesGroup: {
+        paddingVertical: 8,
+        paddingHorizontal: 14,
+        gap: 10,
+    },
+    ruleRow: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 10,
+        paddingVertical: 4,
+    },
+    ruleBullet: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        marginTop: 7,
+    },
+});

package/src/components/content-inset/ContentInset.tsx

@@ -0,0 +1,33 @@
+import { PropsWithChildren, type ReactNode } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { SPACE } from "../../helpers/layout";
+
+export type ContentInsetProps = PropsWithChildren & {
+    /** Use 12px horizontal instead of 16px */
+    tight?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Horizontal page inset applied per block (not on Page).
+ * Full-bleed components (map canvas, calendar grid) skip this wrapper.
+ */
+export function ContentInset({ children, tight = false, style }: ContentInsetProps): ReactNode {
+    return (
+        <View
+            style={[
+                styles.base,
+                { paddingHorizontal: tight ? SPACE.pageXTight : SPACE.pageX },
+                style,
+            ]}
+        >
+            {children}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    base: {
+        width: "100%",
+    },
+});