@wasto/cms-components 1.5.10 → 1.5.11

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

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

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