@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/vision/VisionActionCard.tsx

@@ -1,117 +1,117 @@
-import { StyleSheet, Text, View } from "react-native";
-import { Button } from "../button/Button";
-import { useTheme } from "../../contexts/ThemeContext";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-
-export type VisionSuggestion = {
-    kind: string;
-    rank: number;
-    title: string;
-    body: string;
-    payload?: Record<string, unknown>;
-};
-
-export type VisionActionCardProps = {
-    suggestions: VisionSuggestion[];
-    primaryLabel: string | null;
-    confidence: number | null;
-    requireConfirm: boolean;
-    onConfirm: () => void;
-    onRetake: () => void;
-    onWrong: () => void;
-    busy?: boolean;
-};
-
-export function VisionActionCard({
-    suggestions,
-    primaryLabel,
-    confidence,
-    requireConfirm,
-    onConfirm,
-    onRetake,
-    onWrong,
-    busy,
-}: VisionActionCardProps) {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const primary =
-        suggestions.find((s) => s.kind === "SORT_BIN") ||
-        suggestions.find((s) => s.kind === "UNSURE") ||
-        suggestions[0];
-    const pedagogy = suggestions.find((s) => s.kind === "PEDAGOGY");
-    const isUnsure = primary?.kind === "UNSURE";
-
-    return (
-        <View style={styles.root}>
-            <Text style={[styles.kicker, { color: t.colors.muted }]}>
-                Résultat du scan
-                {primaryLabel ? ` · ${primaryLabel}` : ""}
-                {confidence != null ? ` · ${Math.round(confidence * 100)} %` : ""}
-            </Text>
-
-            {primary ? (
-                <View
-                    style={[
-                        cardStyle(theme),
-                        styles.cardPad,
-                        {
-                            borderColor: isUnsure ? t.colors.error : t.colors.primary,
-                            borderWidth: 1.5,
-                        },
-                    ]}
-                >
-                    <Text style={[styles.title, { color: t.colors.onSurface }]}>
-                        {primary.title}
-                    </Text>
-                    <Text style={[styles.body, { color: t.colors.muted }]}>{primary.body}</Text>
-                </View>
-            ) : null}
-
-            {pedagogy ? (
-                <View style={styles.pedagogy}>
-                    <Text style={[styles.title, { color: t.colors.onSurface }]}>
-                        {pedagogy.title}
-                    </Text>
-                    <Text style={[styles.body, { color: t.colors.muted }]}>{pedagogy.body}</Text>
-                </View>
-            ) : null}
-
-            <View style={styles.row}>
-                <Button variant="outline" onPress={onRetake} disabled={busy} style={styles.flexBtn}>
-                    Reprendre
-                </Button>
-                <Button
-                    variant="outline"
-                    onPress={onWrong}
-                    disabled={busy}
-                    style={styles.flexBtn}
-                    textStyle={{ color: t.colors.error }}
-                >
-                    Ce n’est pas ça
-                </Button>
-                {!isUnsure && requireConfirm ? (
-                    <Button
-                        onPress={onConfirm}
-                        disabled={busy}
-                        loading={busy}
-                        style={styles.flexBtn}
-                    >
-                        Confirmer
-                    </Button>
-                ) : null}
-            </View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    root: { gap: 14 },
-    kicker: { fontSize: 13 },
-    cardPad: { padding: SPACE.cardPad, gap: 6 },
-    pedagogy: { gap: 4 },
-    title: { fontSize: 18, fontWeight: "700" },
-    body: { fontSize: 15, lineHeight: 22 },
-    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
-    flexBtn: { flexGrow: 1, minWidth: 100 },
-});
+import { StyleSheet, Text, View } from "react-native";
+import { Button } from "../button/Button";
+import { useTheme } from "../../contexts/ThemeContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type VisionSuggestion = {
+    kind: string;
+    rank: number;
+    title: string;
+    body: string;
+    payload?: Record<string, unknown>;
+};
+
+export type VisionActionCardProps = {
+    suggestions: VisionSuggestion[];
+    primaryLabel: string | null;
+    confidence: number | null;
+    requireConfirm: boolean;
+    onConfirm: () => void;
+    onRetake: () => void;
+    onWrong: () => void;
+    busy?: boolean;
+};
+
+export function VisionActionCard({
+    suggestions,
+    primaryLabel,
+    confidence,
+    requireConfirm,
+    onConfirm,
+    onRetake,
+    onWrong,
+    busy,
+}: VisionActionCardProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const primary =
+        suggestions.find((s) => s.kind === "SORT_BIN") ||
+        suggestions.find((s) => s.kind === "UNSURE") ||
+        suggestions[0];
+    const pedagogy = suggestions.find((s) => s.kind === "PEDAGOGY");
+    const isUnsure = primary?.kind === "UNSURE";
+
+    return (
+        <View style={styles.root}>
+            <Text style={[styles.kicker, { color: t.colors.muted }]}>
+                Résultat du scan
+                {primaryLabel ? ` · ${primaryLabel}` : ""}
+                {confidence != null ? ` · ${Math.round(confidence * 100)} %` : ""}
+            </Text>
+
+            {primary ? (
+                <View
+                    style={[
+                        cardStyle(theme),
+                        styles.cardPad,
+                        {
+                            borderColor: isUnsure ? t.colors.error : t.colors.primary,
+                            borderWidth: 1.5,
+                        },
+                    ]}
+                >
+                    <Text style={[styles.title, { color: t.colors.onSurface }]}>
+                        {primary.title}
+                    </Text>
+                    <Text style={[styles.body, { color: t.colors.muted }]}>{primary.body}</Text>
+                </View>
+            ) : null}
+
+            {pedagogy ? (
+                <View style={styles.pedagogy}>
+                    <Text style={[styles.title, { color: t.colors.onSurface }]}>
+                        {pedagogy.title}
+                    </Text>
+                    <Text style={[styles.body, { color: t.colors.muted }]}>{pedagogy.body}</Text>
+                </View>
+            ) : null}
+
+            <View style={styles.row}>
+                <Button variant="outline" onPress={onRetake} disabled={busy} style={styles.flexBtn}>
+                    Reprendre
+                </Button>
+                <Button
+                    variant="outline"
+                    onPress={onWrong}
+                    disabled={busy}
+                    style={styles.flexBtn}
+                    textStyle={{ color: t.colors.error }}
+                >
+                    Ce n’est pas ça
+                </Button>
+                {!isUnsure && requireConfirm ? (
+                    <Button
+                        onPress={onConfirm}
+                        disabled={busy}
+                        loading={busy}
+                        style={styles.flexBtn}
+                    >
+                        Confirmer
+                    </Button>
+                ) : null}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: { gap: 14 },
+    kicker: { fontSize: 13 },
+    cardPad: { padding: SPACE.cardPad, gap: 6 },
+    pedagogy: { gap: 4 },
+    title: { fontSize: 18, fontWeight: "700" },
+    body: { fontSize: 15, lineHeight: 22 },
+    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+    flexBtn: { flexGrow: 1, minWidth: 100 },
+});

package/src/components/vision/VisionCapture.tsx

@@ -1,30 +1,30 @@
-import { StyleSheet, Text, View } from "react-native";
-import { Button } from "../button/Button";
-import { useTheme } from "../../contexts/ThemeContext";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-
-export type VisionCaptureProps = {
-    tips: string;
-    onCapture: () => void;
-    busy?: boolean;
-};
-
-export function VisionCapture({ tips, onCapture, busy }: VisionCaptureProps) {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-
-    return (
-        <View style={styles.root}>
-            <Text style={[styles.tips, { color: t.colors.muted }]}>{tips}</Text>
-            <Button onPress={onCapture} disabled={busy} loading={busy}>
-                {busy ? "Ouverture…" : "Prendre une photo"}
-            </Button>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    root: { gap: SPACE.stack },
-    tips: { fontSize: 14, lineHeight: 20 },
-});
+import { StyleSheet, Text, View } from "react-native";
+import { Button } from "../button/Button";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type VisionCaptureProps = {
+    tips: string;
+    onCapture: () => void;
+    busy?: boolean;
+};
+
+export function VisionCapture({ tips, onCapture, busy }: VisionCaptureProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+
+    return (
+        <View style={styles.root}>
+            <Text style={[styles.tips, { color: t.colors.muted }]}>{tips}</Text>
+            <Button onPress={onCapture} disabled={busy} loading={busy}>
+                {busy ? "Ouverture…" : "Prendre une photo"}
+            </Button>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: { gap: SPACE.stack },
+    tips: { fontSize: 14, lineHeight: 20 },
+});

package/src/components/vision/VisionTapOverlay.tsx

@@ -1,122 +1,122 @@
-import { useCallback, useState } from "react";
-import {
-    LayoutChangeEvent,
-    Pressable,
-    StyleSheet,
-    Text,
-    View,
-} from "react-native";
-import { Image } from "expo-image";
-import { Button } from "../button/Button";
-import { useTheme } from "../../contexts/ThemeContext";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-
-export type VisionTapOverlayProps = {
-    imageUri: string;
-    tap: { x: number; y: number } | null;
-    onTap: (tap: { x: number; y: number }) => void;
-    onAnalyzeFull: () => void;
-    onConfirmTap: () => void;
-    onRetake: () => void;
-    busy?: boolean;
-};
-
-export function VisionTapOverlay({
-    imageUri,
-    tap,
-    onTap,
-    onAnalyzeFull,
-    onConfirmTap,
-    onRetake,
-    busy,
-}: VisionTapOverlayProps) {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const [size, setSize] = useState({ w: 1, h: 1 });
-
-    const onLayout = useCallback((e: LayoutChangeEvent) => {
-        const { width, height } = e.nativeEvent.layout;
-        setSize({ w: Math.max(width, 1), h: Math.max(height, 1) });
-    }, []);
-
-    return (
-        <View style={styles.root}>
-            <Text style={[styles.hint, { color: t.colors.muted }]}>
-                Touchez le déchet sur la photo, ou analysez toute l’image.
-            </Text>
-            <Pressable
-                onLayout={onLayout}
-                onPress={(ev) => {
-                    const { locationX, locationY } = ev.nativeEvent;
-                    onTap({
-                        x: Math.min(1, Math.max(0, locationX / size.w)),
-                        y: Math.min(1, Math.max(0, locationY / size.h)),
-                    });
-                }}
-                style={[
-                    styles.imageWrap,
-                    { borderRadius: t.radii.md, backgroundColor: t.colors.onSurface },
-                ]}
-            >
-                <Image source={{ uri: imageUri }} style={styles.image} contentFit="contain" />
-                {tap ? (
-                    <View
-                        pointerEvents="none"
-                        style={[
-                            styles.halo,
-                            {
-                                left: tap.x * size.w - 18,
-                                top: tap.y * size.h - 18,
-                                borderColor: t.colors.primary,
-                            },
-                        ]}
-                    />
-                ) : null}
-            </Pressable>
-
-            <View style={styles.row}>
-                <Button variant="outline" onPress={onRetake} disabled={busy} style={styles.flexBtn}>
-                    Reprendre
-                </Button>
-                <Button
-                    variant="secondary"
-                    onPress={onAnalyzeFull}
-                    disabled={busy}
-                    style={styles.flexBtn}
-                >
-                    Toute l’image
-                </Button>
-                <Button
-                    onPress={onConfirmTap}
-                    disabled={!tap || busy}
-                    loading={busy}
-                    style={styles.flexBtn}
-                >
-                    Analyser
-                </Button>
-            </View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    root: { gap: SPACE.stack, flex: 1 },
-    hint: { fontSize: 14, lineHeight: 20 },
-    imageWrap: {
-        flex: 1,
-        minHeight: 280,
-        overflow: "hidden",
-    },
-    image: { width: "100%", height: "100%" },
-    halo: {
-        position: "absolute",
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        borderWidth: 3,
-        backgroundColor: "rgba(255,255,255,0.25)",
-    },
-    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
-    flexBtn: { flexGrow: 1, minWidth: 100 },
-});
+import { useCallback, useState } from "react";
+import {
+    LayoutChangeEvent,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { Image } from "expo-image";
+import { Button } from "../button/Button";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type VisionTapOverlayProps = {
+    imageUri: string;
+    tap: { x: number; y: number } | null;
+    onTap: (tap: { x: number; y: number }) => void;
+    onAnalyzeFull: () => void;
+    onConfirmTap: () => void;
+    onRetake: () => void;
+    busy?: boolean;
+};
+
+export function VisionTapOverlay({
+    imageUri,
+    tap,
+    onTap,
+    onAnalyzeFull,
+    onConfirmTap,
+    onRetake,
+    busy,
+}: VisionTapOverlayProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const [size, setSize] = useState({ w: 1, h: 1 });
+
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
+        const { width, height } = e.nativeEvent.layout;
+        setSize({ w: Math.max(width, 1), h: Math.max(height, 1) });
+    }, []);
+
+    return (
+        <View style={styles.root}>
+            <Text style={[styles.hint, { color: t.colors.muted }]}>
+                Touchez le déchet sur la photo, ou analysez toute l’image.
+            </Text>
+            <Pressable
+                onLayout={onLayout}
+                onPress={(ev) => {
+                    const { locationX, locationY } = ev.nativeEvent;
+                    onTap({
+                        x: Math.min(1, Math.max(0, locationX / size.w)),
+                        y: Math.min(1, Math.max(0, locationY / size.h)),
+                    });
+                }}
+                style={[
+                    styles.imageWrap,
+                    { borderRadius: t.radii.md, backgroundColor: t.colors.onSurface },
+                ]}
+            >
+                <Image source={{ uri: imageUri }} style={styles.image} contentFit="contain" />
+                {tap ? (
+                    <View
+                        pointerEvents="none"
+                        style={[
+                            styles.halo,
+                            {
+                                left: tap.x * size.w - 18,
+                                top: tap.y * size.h - 18,
+                                borderColor: t.colors.primary,
+                            },
+                        ]}
+                    />
+                ) : null}
+            </Pressable>
+
+            <View style={styles.row}>
+                <Button variant="outline" onPress={onRetake} disabled={busy} style={styles.flexBtn}>
+                    Reprendre
+                </Button>
+                <Button
+                    variant="secondary"
+                    onPress={onAnalyzeFull}
+                    disabled={busy}
+                    style={styles.flexBtn}
+                >
+                    Toute l’image
+                </Button>
+                <Button
+                    onPress={onConfirmTap}
+                    disabled={!tap || busy}
+                    loading={busy}
+                    style={styles.flexBtn}
+                >
+                    Analyser
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: { gap: SPACE.stack, flex: 1 },
+    hint: { fontSize: 14, lineHeight: 20 },
+    imageWrap: {
+        flex: 1,
+        minHeight: 280,
+        overflow: "hidden",
+    },
+    image: { width: "100%", height: "100%" },
+    halo: {
+        position: "absolute",
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        borderWidth: 3,
+        backgroundColor: "rgba(255,255,255,0.25)",
+    },
+    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+    flexBtn: { flexGrow: 1, minWidth: 100 },
+});