@wasto/cms-components 1.5.10 → 1.5.12

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

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

@@ -1,33 +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%",
-    },
-});
+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%",
+    },
+});