@sanctum-key/react-native-sdk 1.0.0

package/build/components/ConfigurableKYCFlow.js

@@ -0,0 +1,257 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import { useKYCFlow } from '../hooks/useKYCFlow';
+import { KYCElementRenderer } from './KYCElementRenderer';
+export const ConfigurableKYCFlow = ({ config, onComplete, onError, onClose, }) => {
+    const { state, actions, currentElement, progress, canGoNext, canGoPrevious, isComplete, } = useKYCFlow();
+    const isInitialized = useRef(false);
+    useEffect(() => {
+        if (!isInitialized.current) {
+            actions.initializeFlow(config);
+            isInitialized.current = true;
+        }
+    }, [config.id]); // Seulement quand l'ID de la config change
+    const handleValueChange = (value) => {
+        if (currentElement) {
+            actions.updateElementData(currentElement.id, value);
+        }
+    };
+    const handleNext = () => {
+        console.log('handleNext called');
+        console.log('currentElement:', currentElement);
+        console.log('canGoNext:', canGoNext);
+        console.log('state.elementData:', state.elementData);
+        if (currentElement) {
+            console.log('Validating element:', currentElement.id);
+            const isValid = actions?.validateElement?.(currentElement.id);
+            console.log('Validation result:', isValid);
+            if (isValid) {
+                console.log('Moving to next element');
+                actions.nextElement();
+            }
+            else {
+                console.log('Validation failed');
+            }
+        }
+    };
+    const handlePrevious = () => {
+        actions.previousElement();
+    };
+    const handleComplete = () => {
+        if (onComplete) {
+            onComplete(state.elementData);
+        }
+    };
+    const handleRestart = () => {
+        actions.resetFlow();
+    };
+    const handleClose = () => {
+        if (onClose) {
+            onClose();
+        }
+    };
+    const handleVerificationComplete = () => {
+        actions.nextElement();
+    };
+    if (!currentElement) {
+        return (<View style={styles.container}>
+        <Text style={styles.loadingText}>Chargement...</Text>
+      </View>);
+    }
+    return (<View style={[styles.container, { backgroundColor: config.styling.backgroundColor }]}>
+      {/* Header avec progression */}
+      {config.settings.showProgressBar && (<View style={styles.header}>
+          <View style={styles.progressContainer}>
+            <View style={[
+                styles.progressBar,
+                {
+                    width: `${progress}%`,
+                    backgroundColor: config.styling.primaryColor,
+                    borderRadius: config.styling.borderRadius,
+                }
+            ]}/>
+          </View>
+          {config.settings.showStepNumbers && (<Text style={[styles.stepCounter, { color: config.styling.textColor }]}>
+              Étape {state.currentElementIndex + 1} sur {config.elements.length}
+            </Text>)}
+          <Text style={[styles.headerTitle, { color: config.styling.textColor }]}>
+            {currentElement.title}
+          </Text>
+          <Text style={[styles.headerDescription, { color: config.styling.textColor }]}>
+            {currentElement.description}
+          </Text>
+        </View>)}
+
+      {/* Contenu principal */}
+      <ScrollView style={styles.scrollView}>
+        {state.errors.submit && (<View style={styles.errorContainer}>
+            <Text style={styles.errorText}>
+              Erreur: {state.errors.submit}
+            </Text>
+          </View>)}
+
+        <KYCElementRenderer element={currentElement} value={state.elementData[currentElement.id]} onValueChange={handleValueChange} error={state.errors[currentElement.id]} onComplete={handleVerificationComplete} onRestart={handleRestart} onClose={handleClose}/>
+      </ScrollView>
+
+      {/* Footer avec navigation */}
+      {config.settings.allowBackNavigation && (<View style={styles.footer}>
+          {canGoPrevious && (<TouchableOpacity style={[
+                    styles.secondaryButton,
+                    {
+                        backgroundColor: config.styling.secondaryColor,
+                        borderRadius: config.styling.borderRadius,
+                    }
+                ]} onPress={handlePrevious} disabled={state.isProcessing}>
+              <Text style={styles.secondaryButtonText}>
+                Précédent
+              </Text>
+            </TouchableOpacity>)}
+
+          <TouchableOpacity style={[
+                styles.primaryButton,
+                {
+                    backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',
+                    borderRadius: config.styling.borderRadius,
+                }
+            ]} onPress={handleNext} disabled={state.isProcessing || !canGoNext}>
+            <Text style={styles.primaryButtonText}>
+              Suivant
+            </Text>
+          </TouchableOpacity>
+        </View>)}
+
+      {/* Bouton suivant seul si pas de navigation retour */}
+      {!config.settings.allowBackNavigation && (<View style={styles.footer}>
+          <TouchableOpacity style={[
+                styles.fullWidthButton,
+                {
+                    backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',
+                    borderRadius: config.styling.borderRadius,
+                }
+            ]} onPress={handleNext} disabled={state.isProcessing || !canGoNext}>
+            <Text style={styles.primaryButtonText}>
+              {state.isProcessing ? 'Traitement...' : 'Continuer'}
+            </Text>
+          </TouchableOpacity>
+        </View>)}
+
+      {/* Bouton de finalisation */}
+      {isComplete && (<View style={styles.footer}>
+          <TouchableOpacity style={[
+                styles.fullWidthButton,
+                {
+                    backgroundColor: config.styling.primaryColor,
+                    borderRadius: config.styling.borderRadius,
+                }
+            ]} onPress={handleComplete}>
+            <Text style={styles.primaryButtonText}>
+              Terminer
+            </Text>
+          </TouchableOpacity>
+        </View>)}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    loadingText: {
+        fontSize: 18,
+        textAlign: 'center',
+        marginTop: 50,
+        color: '#666',
+    },
+    header: {
+        backgroundColor: 'white',
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e5e5e5',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    progressContainer: {
+        width: '100%',
+        height: 8,
+        backgroundColor: '#e5e5e5',
+        borderRadius: 4,
+        overflow: 'hidden',
+        marginBottom: 8,
+    },
+    progressBar: {
+        height: '100%',
+        borderRadius: 4,
+    },
+    stepCounter: {
+        fontSize: 14,
+        fontWeight: '500',
+        marginBottom: 8,
+    },
+    headerTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        marginTop: 8,
+    },
+    headerDescription: {
+        fontSize: 14,
+        opacity: 0.7,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    errorContainer: {
+        backgroundColor: '#fef2f2',
+        borderWidth: 1,
+        borderColor: '#fecaca',
+        margin: 16,
+        padding: 16,
+        borderRadius: 8,
+    },
+    errorText: {
+        color: '#dc2626',
+        fontWeight: '500',
+    },
+    footer: {
+        backgroundColor: 'white',
+        borderTopWidth: 1,
+        borderTopColor: '#e5e5e5',
+        padding: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    primaryButton: {
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        flex: 1,
+        marginLeft: 8,
+    },
+    primaryButtonText: {
+        color: 'white',
+        fontWeight: '600',
+        fontSize: 16,
+        textAlign: 'center',
+    },
+    secondaryButton: {
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        flex: 1,
+        marginRight: 8,
+    },
+    secondaryButtonText: {
+        color: 'white',
+        fontWeight: '500',
+        fontSize: 16,
+        textAlign: 'center',
+    },
+    fullWidthButton: {
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        width: '100%',
+    },
+});
+//# sourceMappingURL=ConfigurableKYCFlow.js.map

package/build/components/ConfigurableKYCFlow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableKYCFlow.js","sourceRoot":"","sources":["../../src/components/ConfigurableKYCFlow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';\nimport { useKYCFlow } from '../hooks/useKYCFlow';\nimport { KYCElementRenderer } from './KYCElementRenderer';\nimport { KYCFlowConfig } from '../types/KYC.types';\n\ninterface ConfigurableKYCFlowProps {\n  config: KYCFlowConfig;\n  onComplete?: (data: any) => void;\n  onError?: (error: any) => void;\n  onClose?: () => void;\n}\n\nexport const ConfigurableKYCFlow: React.FC<ConfigurableKYCFlowProps> = ({\n  config,\n  onComplete,\n  onError,\n  onClose,\n}) => {\n  const {\n    state,\n    actions,\n    currentElement,\n    progress,\n    canGoNext,\n    canGoPrevious,\n    isComplete,\n  } = useKYCFlow();\n\n  const isInitialized = useRef(false);\n\n  useEffect(() => {\n    if (!isInitialized.current) {\n      actions.initializeFlow(config);\n      isInitialized.current = true;\n    }\n  }, [config.id]); // Seulement quand l'ID de la config change\n\n  const handleValueChange = (value: any) => {\n    if (currentElement) {\n      actions.updateElementData(currentElement.id, value);\n    }\n  };\n\n  const handleNext = () => {\n    console.log('handleNext called');\n    console.log('currentElement:', currentElement);\n    console.log('canGoNext:', canGoNext);\n    console.log('state.elementData:', state.elementData);\n    \n    if (currentElement) {\n      console.log('Validating element:', currentElement.id);\n      const isValid = actions?.validateElement?.(currentElement.id);\n      console.log('Validation result:', isValid);\n      \n      if (isValid) {\n        console.log('Moving to next element');\n        actions.nextElement();\n      } else {\n        console.log('Validation failed');\n      }\n    }\n  };\n\n  const handlePrevious = () => {\n    actions.previousElement();\n  };\n\n  const handleComplete = () => {\n    if (onComplete) {\n      onComplete(state.elementData);\n    }\n  };\n\n  const handleRestart = () => {\n    actions.resetFlow();\n  };\n\n  const handleClose = () => {\n    if (onClose) {\n      onClose();\n    }\n  };\n\n  const handleVerificationComplete = () => {\n    actions.nextElement();\n  };\n\n  if (!currentElement) {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.loadingText}>Chargement...</Text>\n      </View>\n    );\n  }\n\n  return (\n    <View style={[styles.container, { backgroundColor: config.styling.backgroundColor }]}>\n      {/* Header avec progression */}\n      {config.settings.showProgressBar && (\n        <View style={styles.header}>\n          <View style={styles.progressContainer}>\n            <View \n              style={[\n                styles.progressBar, \n                { \n                  width: `${progress}%`,\n                  backgroundColor: config.styling.primaryColor,\n                  borderRadius: config.styling.borderRadius,\n                }\n              ]}\n            />\n          </View>\n          {config.settings.showStepNumbers && (\n            <Text style={[styles.stepCounter, { color: config.styling.textColor }]}>\n              Étape {state.currentElementIndex + 1} sur {config.elements.length}\n            </Text>\n          )}\n          <Text style={[styles.headerTitle, { color: config.styling.textColor }]}>\n            {currentElement.title}\n          </Text>\n          <Text style={[styles.headerDescription, { color: config.styling.textColor }]}>\n            {currentElement.description}\n          </Text>\n        </View>\n      )}\n\n      {/* Contenu principal */}\n      <ScrollView style={styles.scrollView}>\n        {state.errors.submit && (\n          <View style={styles.errorContainer}>\n            <Text style={styles.errorText}>\n              Erreur: {state.errors.submit}\n            </Text>\n          </View>\n        )}\n\n        <KYCElementRenderer\n          element={currentElement}\n          value={state.elementData[currentElement.id]}\n          onValueChange={handleValueChange}\n          error={state.errors[currentElement.id]}\n          onComplete={handleVerificationComplete}\n          onRestart={handleRestart}\n          onClose={handleClose}\n        />\n      </ScrollView>\n\n      {/* Footer avec navigation */}\n      {config.settings.allowBackNavigation && (\n        <View style={styles.footer}>\n          {canGoPrevious && (\n            <TouchableOpacity \n              style={[\n                styles.secondaryButton,\n                { \n                  backgroundColor: config.styling.secondaryColor,\n                  borderRadius: config.styling.borderRadius,\n                }\n              ]}\n              onPress={handlePrevious}\n              disabled={state.isProcessing}\n            >\n              <Text style={styles.secondaryButtonText}>\n                Précédent\n              </Text>\n            </TouchableOpacity>\n          )}\n\n          <TouchableOpacity \n            style={[\n              styles.primaryButton,\n              { \n                backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',\n                borderRadius: config.styling.borderRadius,\n              }\n            ]}\n            onPress={handleNext}\n            disabled={state.isProcessing || !canGoNext}\n          >\n            <Text style={styles.primaryButtonText}>\n              Suivant\n            </Text>\n          </TouchableOpacity>\n        </View>\n      )}\n\n      {/* Bouton suivant seul si pas de navigation retour */}\n      {!config.settings.allowBackNavigation && (\n        <View style={styles.footer}>\n          <TouchableOpacity \n            style={[\n              styles.fullWidthButton,\n              { \n                backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',\n                borderRadius: config.styling.borderRadius,\n              }\n            ]}\n            onPress={handleNext}\n            disabled={state.isProcessing || !canGoNext}\n          >\n            <Text style={styles.primaryButtonText}>\n              {state.isProcessing ? 'Traitement...' : 'Continuer'}\n            </Text>\n          </TouchableOpacity>\n        </View>\n      )}\n\n      {/* Bouton de finalisation */}\n      {isComplete && (\n        <View style={styles.footer}>\n          <TouchableOpacity \n            style={[\n              styles.fullWidthButton,\n              { \n                backgroundColor: config.styling.primaryColor,\n                borderRadius: config.styling.borderRadius,\n              }\n            ]}\n            onPress={handleComplete}\n          >\n            <Text style={styles.primaryButtonText}>\n              Terminer\n            </Text>\n          </TouchableOpacity>\n        </View>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  loadingText: {\n    fontSize: 18,\n    textAlign: 'center',\n    marginTop: 50,\n    color: '#666',\n  },\n  header: {\n    backgroundColor: 'white',\n    padding: 16,\n    borderBottomWidth: 1,\n    borderBottomColor: '#e5e5e5',\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.1,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  progressContainer: {\n    width: '100%',\n    height: 8,\n    backgroundColor: '#e5e5e5',\n    borderRadius: 4,\n    overflow: 'hidden',\n    marginBottom: 8,\n  },\n  progressBar: {\n    height: '100%',\n    borderRadius: 4,\n  },\n  stepCounter: {\n    fontSize: 14,\n    fontWeight: '500',\n    marginBottom: 8,\n  },\n  headerTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginTop: 8,\n  },\n  headerDescription: {\n    fontSize: 14,\n    opacity: 0.7,\n  },\n  scrollView: {\n    flex: 1,\n  },\n  errorContainer: {\n    backgroundColor: '#fef2f2',\n    borderWidth: 1,\n    borderColor: '#fecaca',\n    margin: 16,\n    padding: 16,\n    borderRadius: 8,\n  },\n  errorText: {\n    color: '#dc2626',\n    fontWeight: '500',\n  },\n  footer: {\n    backgroundColor: 'white',\n    borderTopWidth: 1,\n    borderTopColor: '#e5e5e5',\n    padding: 16,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  primaryButton: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    flex: 1,\n    marginLeft: 8,\n  },\n  primaryButtonText: {\n    color: 'white',\n    fontWeight: '600',\n    fontSize: 16,\n    textAlign: 'center',\n  },\n  secondaryButton: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    flex: 1,\n    marginRight: 8,\n  },\n  secondaryButtonText: {\n    color: 'white',\n    fontWeight: '500',\n    fontSize: 16,\n    textAlign: 'center',\n  },\n  fullWidthButton: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    width: '100%',\n  },\n}); "]}

package/build/components/CustomCameraExample.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CustomCameraExampleProps {
+    onPhotoTaken?: (imagePath: string) => void;
+    customInstructions?: string;
+    overlayColor?: string;
+    showGrid?: boolean;
+}
+export declare const CustomCameraExample: React.FC<CustomCameraExampleProps>;
+export {};
+//# sourceMappingURL=CustomCameraExample.d.ts.map

package/build/components/CustomCameraExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomCameraExample.d.ts","sourceRoot":"","sources":["../../src/components/CustomCameraExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,UAAU,wBAAwB;IAChC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgGlE,CAAC"}

package/build/components/CustomCameraExample.js

@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { EnhancedCameraView } from './EnhancedCameraView';
+export const CustomCameraExample = ({ onPhotoTaken, customInstructions = "Centrez votre visage dans le cadre", overlayColor = "rgba(0, 0, 0, 0.5)", showGrid = true }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [capturedImage, setCapturedImage] = useState(null);
+    const handleCapture = (result) => {
+        console.log('Capture result:', result);
+        if (result.success && result.path) {
+            setCapturedImage(result.path);
+            setIsVisible(false);
+            onPhotoTaken?.(result.path);
+            Alert.alert('Succès', 'Photo capturée avec succès !');
+        }
+        else {
+            Alert.alert('Erreur', result.error || 'Échec de la capture');
+        }
+    };
+    const handleError = (event) => {
+        Alert.alert('Erreur', event.message || 'Une erreur est survenue');
+        setIsVisible(false);
+    };
+    if (!isVisible) {
+        return (<View style={styles.container}>
+        <Text style={styles.title}>Caméra Personnalisée</Text>
+        <Text style={styles.subtitle}>
+          Exemple d'intégration de la vue caméra native avec overlay personnalisé
+        </Text>
+        
+        <TouchableOpacity style={styles.openButton} onPress={() => setIsVisible(true)}>
+          <Text style={styles.openButtonText}>📸 Ouvrir la Caméra</Text>
+        </TouchableOpacity>
+
+        {capturedImage && (<View style={styles.resultContainer}>
+            <Text style={styles.resultText}>
+              Dernière photo : {capturedImage}
+            </Text>
+          </View>)}
+      </View>);
+    }
+    return (<View style={styles.cameraContainer}>
+      {/* Vue caméra Vision Camera */}
+      <EnhancedCameraView instructions={customInstructions} showCamera={true} cameraType="front" style={styles.camera} onCapture={handleCapture} onError={handleError} onClose={() => setIsVisible(false)} quality="high" showCaptureButton={true} showSwitchCamera={true} overlayComponent={<View style={[styles.overlay, { backgroundColor: overlayColor }]} pointerEvents="none">
+            {/* Grille d'aide (optionnelle) */}
+            {showGrid && (<View style={styles.grid}>
+                <View style={styles.gridLine}/>
+                <View style={[styles.gridLine, styles.gridLineVertical]}/>
+              </View>)}
+            
+            {/* Cadre de guidage pour le visage */}
+            <View style={styles.faceFrame}>
+              <View style={styles.corner}/>
+              <View style={[styles.corner, styles.cornerTopRight]}/>
+              <View style={[styles.corner, styles.cornerBottomLeft]}/>
+              <View style={[styles.corner, styles.cornerBottomRight]}/>
+            </View>
+            
+            {/* Instructions personnalisées en plus de celles de base */}
+            <View style={styles.instructionsContainer}>
+              <Text style={styles.hint}>
+                💡 Astuce: Assurez-vous d'être bien éclairé
+              </Text>
+            </View>
+          </View>}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        backgroundColor: '#f5f5f5',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 10,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 16,
+        color: '#666',
+        textAlign: 'center',
+        marginBottom: 30,
+        lineHeight: 22,
+    },
+    openButton: {
+        backgroundColor: '#4CAF50',
+        paddingHorizontal: 30,
+        paddingVertical: 15,
+        borderRadius: 10,
+        marginBottom: 20,
+    },
+    openButtonText: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    resultContainer: {
+        backgroundColor: 'white',
+        padding: 15,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#ddd',
+    },
+    resultText: {
+        fontSize: 14,
+        color: '#333',
+    },
+    cameraContainer: {
+        flex: 1,
+        position: 'relative',
+    },
+    camera: {
+        flex: 1,
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    grid: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    gridLine: {
+        position: 'absolute',
+        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+        width: '100%',
+        height: 1,
+        top: '33%',
+    },
+    gridLineVertical: {
+        width: 1,
+        height: '100%',
+        left: '33%',
+        top: 0,
+    },
+    faceFrame: {
+        width: 250,
+        height: 300,
+        borderWidth: 2,
+        borderColor: 'transparent',
+        borderRadius: 20,
+        position: 'relative',
+    },
+    corner: {
+        position: 'absolute',
+        width: 30,
+        height: 30,
+        borderColor: '#4CAF50',
+        borderWidth: 3,
+        top: -3,
+        left: -3,
+        borderBottomColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderRadius: 5,
+    },
+    cornerTopRight: {
+        top: -3,
+        right: -3,
+        left: 'auto',
+        borderLeftColor: 'transparent',
+        borderBottomColor: 'transparent',
+    },
+    cornerBottomLeft: {
+        bottom: -3,
+        left: -3,
+        top: 'auto',
+        borderTopColor: 'transparent',
+        borderRightColor: 'transparent',
+    },
+    cornerBottomRight: {
+        bottom: -3,
+        right: -3,
+        top: 'auto',
+        left: 'auto',
+        borderTopColor: 'transparent',
+        borderLeftColor: 'transparent',
+    },
+    instructionsContainer: {
+        position: 'absolute',
+        top: 80,
+        left: 20,
+        right: 20,
+        alignItems: 'center',
+    },
+    customInstructions: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: '600',
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        padding: 10,
+        borderRadius: 10,
+        marginBottom: 10,
+    },
+    hint: {
+        color: 'white',
+        fontSize: 14,
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        padding: 8,
+        borderRadius: 8,
+    },
+    closeButton: {
+        position: 'absolute',
+        top: 50,
+        right: 20,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeButtonText: {
+        color: 'white',
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+});
+//# sourceMappingURL=CustomCameraExample.js.map

package/build/components/CustomCameraExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomCameraExample.js","sourceRoot":"","sources":["../../src/components/CustomCameraExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';\nimport { EnhancedCameraView } from './EnhancedCameraView';\n\ninterface CustomCameraExampleProps {\n  onPhotoTaken?: (imagePath: string) => void;\n  customInstructions?: string;\n  overlayColor?: string;\n  showGrid?: boolean;\n}\n\nexport const CustomCameraExample: React.FC<CustomCameraExampleProps> = ({\n  onPhotoTaken,\n  customInstructions = \"Centrez votre visage dans le cadre\",\n  overlayColor = \"rgba(0, 0, 0, 0.5)\",\n  showGrid = true\n}) => {\n  const [isVisible, setIsVisible] = useState(false);\n  const [capturedImage, setCapturedImage] = useState<string | null>(null);\n\n  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {\n    console.log('Capture result:', result);\n    \n    if (result.success && result.path) {\n      setCapturedImage(result.path);\n      setIsVisible(false);\n      onPhotoTaken?.(result.path);\n      Alert.alert('Succès', 'Photo capturée avec succès !');\n    } else {\n      Alert.alert('Erreur', result.error || 'Échec de la capture');\n    }\n  };\n\n  const handleError = (event: { message: string }) => {\n    Alert.alert('Erreur', event.message || 'Une erreur est survenue');\n    setIsVisible(false);\n  };\n\n  if (!isVisible) {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.title}>Caméra Personnalisée</Text>\n        <Text style={styles.subtitle}>\n          Exemple d'intégration de la vue caméra native avec overlay personnalisé\n        </Text>\n        \n        <TouchableOpacity\n          style={styles.openButton}\n          onPress={() => setIsVisible(true)}\n        >\n          <Text style={styles.openButtonText}>📸 Ouvrir la Caméra</Text>\n        </TouchableOpacity>\n\n        {capturedImage && (\n          <View style={styles.resultContainer}>\n            <Text style={styles.resultText}>\n              Dernière photo : {capturedImage}\n            </Text>\n          </View>\n        )}\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.cameraContainer}>\n      {/* Vue caméra Vision Camera */}\n      <EnhancedCameraView\n        instructions={customInstructions}\n        showCamera={true}\n        cameraType=\"front\"\n        style={styles.camera}\n        onCapture={handleCapture}\n        onError={handleError}\n        onClose={() => setIsVisible(false)}\n        quality=\"high\"\n        showCaptureButton={true}\n        showSwitchCamera={true}\n        overlayComponent={\n          <View style={[styles.overlay, { backgroundColor: overlayColor }]} pointerEvents=\"none\">\n            {/* Grille d'aide (optionnelle) */}\n            {showGrid && (\n              <View style={styles.grid}>\n                <View style={styles.gridLine} />\n                <View style={[styles.gridLine, styles.gridLineVertical]} />\n              </View>\n            )}\n            \n            {/* Cadre de guidage pour le visage */}\n            <View style={styles.faceFrame}>\n              <View style={styles.corner} />\n              <View style={[styles.corner, styles.cornerTopRight]} />\n              <View style={[styles.corner, styles.cornerBottomLeft]} />\n              <View style={[styles.corner, styles.cornerBottomRight]} />\n            </View>\n            \n            {/* Instructions personnalisées en plus de celles de base */}\n            <View style={styles.instructionsContainer}>\n              <Text style={styles.hint}>\n                💡 Astuce: Assurez-vous d'être bien éclairé\n              </Text>\n            </View>\n          </View>\n        }\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    backgroundColor: '#f5f5f5',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 10,\n    textAlign: 'center',\n  },\n  subtitle: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n    marginBottom: 30,\n    lineHeight: 22,\n  },\n  openButton: {\n    backgroundColor: '#4CAF50',\n    paddingHorizontal: 30,\n    paddingVertical: 15,\n    borderRadius: 10,\n    marginBottom: 20,\n  },\n  openButtonText: {\n    color: 'white',\n    fontSize: 18,\n    fontWeight: '600',\n  },\n  resultContainer: {\n    backgroundColor: 'white',\n    padding: 15,\n    borderRadius: 10,\n    borderWidth: 1,\n    borderColor: '#ddd',\n  },\n  resultText: {\n    fontSize: 14,\n    color: '#333',\n  },\n  cameraContainer: {\n    flex: 1,\n    position: 'relative',\n  },\n  camera: {\n    flex: 1,\n  },\n  overlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  grid: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n  gridLine: {\n    position: 'absolute',\n    backgroundColor: 'rgba(255, 255, 255, 0.3)',\n    width: '100%',\n    height: 1,\n    top: '33%',\n  },\n  gridLineVertical: {\n    width: 1,\n    height: '100%',\n    left: '33%',\n    top: 0,\n  },\n  faceFrame: {\n    width: 250,\n    height: 300,\n    borderWidth: 2,\n    borderColor: 'transparent',\n    borderRadius: 20,\n    position: 'relative',\n  },\n  corner: {\n    position: 'absolute',\n    width: 30,\n    height: 30,\n    borderColor: '#4CAF50',\n    borderWidth: 3,\n    top: -3,\n    left: -3,\n    borderBottomColor: 'transparent',\n    borderRightColor: 'transparent',\n    borderRadius: 5,\n  },\n  cornerTopRight: {\n    top: -3,\n    right: -3,\n    left: 'auto',\n    borderLeftColor: 'transparent',\n    borderBottomColor: 'transparent',\n  },\n  cornerBottomLeft: {\n    bottom: -3,\n    left: -3,\n    top: 'auto',\n    borderTopColor: 'transparent',\n    borderRightColor: 'transparent',\n  },\n  cornerBottomRight: {\n    bottom: -3,\n    right: -3,\n    top: 'auto',\n    left: 'auto',\n    borderTopColor: 'transparent',\n    borderLeftColor: 'transparent',\n  },\n  instructionsContainer: {\n    position: 'absolute',\n    top: 80,\n    left: 20,\n    right: 20,\n    alignItems: 'center',\n  },\n  customInstructions: {\n    color: 'white',\n    fontSize: 18,\n    fontWeight: '600',\n    textAlign: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.7)',\n    padding: 10,\n    borderRadius: 10,\n    marginBottom: 10,\n  },\n  hint: {\n    color: 'white',\n    fontSize: 14,\n    textAlign: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n    padding: 8,\n    borderRadius: 8,\n  },\n  closeButton: {\n    position: 'absolute',\n    top: 50,\n    right: 20,\n    backgroundColor: 'rgba(0, 0, 0, 0.7)',\n    width: 40,\n    height: 40,\n    borderRadius: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  closeButtonText: {\n    color: 'white',\n    fontSize: 20,\n    fontWeight: 'bold',\n  },\n});"]}

package/build/components/EnhancedCameraView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EnhancedCameraViewProps } from './OverLay/type';
+export declare const EnhancedCameraView: React.FC<EnhancedCameraViewProps>;
+//# sourceMappingURL=EnhancedCameraView.d.ts.map

package/build/components/EnhancedCameraView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedCameraView.d.ts","sourceRoot":"","sources":["../../src/components/EnhancedCameraView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAMzD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqWhE,CAAC"}