@sanctum-key/react-native-sdk 1.0.0

package/src/components/example/SelfieCaptureEx.tsx

@@ -0,0 +1,358 @@
+import { StyleSheet, View, Dimensions, Text, Animated, Image } from "react-native"
+import { EnhancedCameraView } from "../EnhancedCameraView"
+import Svg, {  Rect, Path, Mask, Defs, LinearGradient, Stop } from 'react-native-svg';
+import React, { useEffect, useRef, useState } from 'react';
+
+const SelfieCaptureEx = () => {
+    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
+
+    const bbox = [20, 140, 370, 340]; // [xMin, yMin, xMax, yMax]
+    const [xMin, yMin, xMax, yMax] = bbox;
+    const boxWidth = xMax - xMin;
+    const boxHeight = yMax - yMin;
+
+    // Animations
+    // const instructionAnimation = useRef(new Animated.Value(0)).current;
+
+    const [cornerOpacity, setCornerOpacity] = useState(0.8);
+    const [scanLineX, setScanLineX] = useState<{
+        val: number,
+        direction: 'up' | 'down'
+    }>({
+        val: yMin - (40 + 280),
+        direction: 'down'
+    });
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+    const scanY = useRef(new Animated.Value(yMin)).current;
+
+
+    useEffect(() => {
+        // Animation boucle : descend puis remonte
+        Animated.loop(
+            Animated.sequence([
+                Animated.timing(scanY, {
+                    toValue: yMax,
+                    duration: 2000,
+                    useNativeDriver: false,
+                }),
+                Animated.timing(scanY, {
+                    toValue: yMin,
+                    duration: 2000,
+                    useNativeDriver: false,
+                }),
+            ])
+        ).start();
+    }, [scanY, yMin, yMax]);
+
+    useEffect(() => {
+       
+        // Animation des coins avec setState
+        const cornerInterval = setInterval(() => {
+            setCornerOpacity(prev => prev === 0.8 ? 1 : 0.8);
+        }, 800);
+
+
+        const scanLineInterval = setInterval(() => {
+            setScanLineX(prev => {
+
+                const newX = prev.val + (prev.direction === 'up' ? -1 : 1) * Math.round(Math.random() * 2); // Vitesse de déplacement horizontal 
+                if (prev.direction === "down") {
+                    if (newX > yMax - (280 - 40)) {
+                        return { val: yMax + (40), direction: 'up' }
+                    } else {
+                        return { val: newX, direction: 'down' }
+                    }
+                } else {
+                    if (newX < yMin - (40)) {
+                        return { val: yMin - (40 + 280), direction: 'down' }
+                    } else {
+                        return { val: newX, direction: 'up' }
+                    }
+                }
+
+            });
+        }, 2); // Fréquence de mise à jour
+
+        // Démarrer les animations
+
+        return () => {
+            clearInterval(cornerInterval);
+            clearInterval(scanLineInterval);
+        };
+    }, [yMin, yMax]);
+
+    if (imageUrl) {
+        return (
+            <View style={
+                {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center', 
+                }
+            }>
+
+               <View style={
+                { 
+                    
+                    justifyContent: 'center',
+                    alignItems: 'center', 
+                }
+               }>
+               <Image
+                    source={{ uri: imageUrl }}
+                    style={[styles.image,
+                    {
+                        width: boxWidth,
+                        height: boxHeight,
+                        marginLeft: -xMin,
+                        marginTop: -yMin,
+                        
+                    },
+                    ]} />
+               </View>
+
+            </View>
+        )
+    }
+
+    return (
+        <EnhancedCameraView
+            showCamera={true}
+            showSwitchCamera={false}
+            bbox={{
+              xMin: 150,
+              yMin: 210,
+              xMax: 350,
+              yMax: 410,
+              borderColor: "#2DBD60",
+              borderWidth: 3,
+              cornerRadius: 8
+            }}
+            onCapture={(image) => {
+                setImageUrl(image.path ?? null);
+            }}
+            overlayComponent={
+                <View style={StyleSheet.absoluteFill}>
+                    {/* <Animated.View
+                        style={[
+                            styles.topIntruction,
+
+                        ]}
+                    >
+                        <Text style={styles.topIntructionText}>
+                            💡 Alignez le code QR avec la zone de capture • déplacez la caméra pour ajuster la zone de capture • mesurez 100cm de hauteur.
+                        </Text>
+                    </Animated.View> */}
+
+                    <Svg
+                        height={screenHeight}
+                        width={screenWidth}
+                        style={styles.svg}
+                    >
+                        <Defs>
+                            <Mask id="cameraMask">
+                                {/* Fond blanc - zone visible */}
+                                <Rect
+                                    x="0"
+                                    y="0"
+                                    width={screenWidth}
+                                    height={screenHeight}
+                                    fill="white"
+                                />
+                                {/* Zone noire - zone masquée (transparente) */}
+                                <Rect
+                                    x={xMin}
+                                    y={yMin}
+                                    width={boxWidth}
+                                    height={boxHeight}
+                                    fill="black"
+                                />
+                            </Mask>
+                        </Defs>
+
+                        {/* Overlay semi-transparent avec masque */}
+                        <Rect
+                            x="0"
+                            y="0"
+                            width={screenWidth}
+                            height={screenHeight}
+                            fill="rgba(0, 0, 0, 0.5)"
+                            mask="url(#cameraMask)"
+                        />
+
+                        {/* Coins de la zone de capture - arrondis avec animation */}
+                        <Path
+                            d={`M ${xMin + 15} ${yMin} Q ${xMin} ${yMin} ${xMin} ${yMin + 15} L ${xMin} ${yMin + 20}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            fill="none"
+                            opacity={cornerOpacity}
+                        />
+                        <Path
+                            d={`M ${xMin + 20} ${yMin} L ${xMin + 15} ${yMin}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            opacity={cornerOpacity}
+                        />
+
+                        <Path
+                            d={`M ${xMax - 15} ${yMin} Q ${xMax} ${yMin} ${xMax} ${yMin + 15} L ${xMax} ${yMin + 20}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            fill="none"
+                            opacity={cornerOpacity}
+                        />
+                        <Path
+                            d={`M ${xMax - 20} ${yMin} L ${xMax - 15} ${yMin}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            opacity={cornerOpacity}
+                        />
+
+                        <Path
+                            d={`M ${xMin + 15} ${yMax} Q ${xMin} ${yMax} ${xMin} ${yMax - 15} L ${xMin} ${yMax - 20}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            fill="none"
+                            opacity={cornerOpacity}
+                        />
+                        <Path
+                            d={`M ${xMin + 20} ${yMax} L ${xMin + 15} ${yMax}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            opacity={cornerOpacity}
+                        />
+
+                        <Path
+                            d={`M ${xMax - 15} ${yMax} Q ${xMax} ${yMax} ${xMax} ${yMax - 15} L ${xMax} ${yMax - 20}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            fill="none"
+                            opacity={cornerOpacity}
+                        />
+                        <Path
+                            d={`M ${xMax - 20} ${yMax} L ${xMax - 15} ${yMax}`}
+                            stroke="#4CAF50"
+                            strokeWidth="8"
+                            opacity={cornerOpacity}
+                        />
+
+                        <Defs>
+                            <LinearGradient id="grad-rect" x1="0%"
+                                y1={scanLineX.direction === 'up' ? "100%" : "0%"} x2="0%"
+                                y2={scanLineX.direction === 'up' ? "0%" : "100%"}>
+                                <Stop offset="70%" stopColor="#2DBD60" stopOpacity="0" />
+                                <Stop offset="85%" stopColor="#2DBD60" stopOpacity="0.1" />
+                                <Stop offset="88%" stopColor="#2DBD60" stopOpacity="0.15" />
+                                <Stop offset="90%" stopColor="#2DBD60" stopOpacity="0.2" />
+                                <Stop offset="100%" stopColor="#2DBD60" stopOpacity="1" />
+                            </LinearGradient>
+                        </Defs>
+
+
+                        <Rect x="0"
+                            y={scanLineX.val}
+                            width={screenWidth}
+                            height="280"
+                            rx="0"
+                            ry="0"
+                            fill="url(#grad-rect)"
+
+                        />
+                    </Svg>
+
+                    <View style={styles.bottomIntruction}>
+                        <Text style={styles.bottomTitle}>
+                            Mesurez 100cm de hauteur.
+                        </Text>
+                        <Text style={styles.bottomSubtitle}>
+                            Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture.
+                        </Text>
+                    </View>
+                </View>
+            }
+        />
+    )
+}
+
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '50%',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    svg: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+    },
+    topIntruction: {
+        zIndex: 1000,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 20,
+        paddingHorizontal: 10,
+        marginHorizontal: 20,
+        marginTop: 10,
+        backgroundColor: "#FDE04730",
+        borderColor: "#FDE047",
+        borderWidth: 1,
+        borderRadius: 10,
+        gap: 10,
+    },
+    topIntructionText: {
+        color: '#FDE047',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntruction: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: '35%',
+        paddingHorizontal: 20,
+    },
+    bottomIntructionTextBold: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntructionText: {
+        color: 'white',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomTitle: {
+        color: 'white',
+        fontSize: 25,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomSubtitle: {
+        color: 'white',
+        marginTop: 15,
+        fontSize: 14,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+
+     
+    image: {
+        position: 'absolute',
+        borderRadius: 10,
+    },
+})
+
+export default SelfieCaptureEx

package/src/components/ui/Button.tsx

@@ -0,0 +1,328 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle, ActivityIndicator } from 'react-native';
+
+// Types pour les props du bouton
+interface ButtonProps {
+  // Contenu
+  title: string;
+  onPress: () => void;
+  
+  // Variantes
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning' | 'info' | "neutral";
+  size?: 'small' | 'medium' | 'large';
+  
+  // Icône
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+  
+  // État
+  disabled?: boolean;
+  loading?: boolean;
+  
+  // Style personnalisé
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  
+  // Autres props
+  fullWidth?: boolean;
+  rounded?: boolean;
+}
+
+// Configuration des variantes
+const buttonVariants = {
+  primary: {
+    backgroundColor: '#2DBD60',
+    borderColor: '#2DBD60',
+    textColor: '#FFFFFF',
+    disabledBackground: '#E5E5E5',
+    disabledText: '#999999',
+  },
+  secondary: {
+    backgroundColor: '#F8F9FA',
+    borderColor: '#E9ECEF',
+    textColor: '#495057',
+    disabledBackground: '#F8F9FA',
+    disabledText: '#ADB5BD',
+  },
+  outline: {
+    backgroundColor: '#F8F9FA',
+    borderColor: '#2DBD60',
+    textColor: '#2DBD60',
+    disabledBackground: 'transparent',
+    disabledText: '#ADB5BD',
+  },
+  ghost: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    textColor: '#2DBD60',
+    disabledBackground: 'transparent',
+    disabledText: '#ADB5BD',
+  },
+  danger: {
+    backgroundColor: '#DC3545',
+    borderColor: '#DC3545',
+    textColor: '#FFFFFF',
+    disabledBackground: '#E5E5E5',
+    disabledText: '#999999',
+  },
+  success: {
+    backgroundColor: '#28A745',
+    borderColor: '#28A745',
+    textColor: '#FFFFFF',
+    disabledBackground: '#E5E5E5',
+    disabledText: '#999999',
+  },
+  info: {
+    backgroundColor: '#17A2B8',
+    borderColor: '#17A2B8',
+    textColor: '#FFFFFF',
+    disabledBackground: '#E5E5E5',
+    disabledText: '#999999',
+  },
+  warning: {
+    backgroundColor: '#FFC107',
+    borderColor: '#FFC107',
+    textColor: '#212529',
+    disabledBackground: '#E5E5E5',
+    disabledText: '#999999',
+  },
+  neutral: {
+    backgroundColor: '#6c757d',
+    borderColor: '#6c757d',
+    textColor: '#FFFFFF',
+    disabledBackground: '#E5E5E5',
+    disabledText: '#999999',
+  },
+};
+
+// Configuration des tailles
+const buttonSizes = {
+  small: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    fontSize: 14,
+    borderRadius: 6,
+    iconSize: 16,
+  },
+  medium: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    fontSize: 16,
+    borderRadius: 8,
+    iconSize: 20,
+  },
+  large: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    fontSize: 18,
+    borderRadius: 12,
+    iconSize: 24,
+  },
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  size = 'medium',
+  icon,
+  iconPosition = 'left',
+  disabled = false,
+  loading = false,
+  style,
+  textStyle,
+  fullWidth = false,
+  rounded = false,
+}) => {
+  // Obtenir la configuration de la variante
+  const variantConfig = buttonVariants[variant];
+  const sizeConfig = buttonSizes[size];
+  
+  // Déterminer les styles dynamiques
+  const dynamicStyles: ViewStyle = {
+    backgroundColor: disabled ? variantConfig.disabledBackground : variantConfig.backgroundColor,
+    borderColor: variantConfig.borderColor,
+    paddingVertical: sizeConfig.paddingVertical,
+    paddingHorizontal: sizeConfig.paddingHorizontal,
+    borderRadius: rounded ? 50 : sizeConfig.borderRadius,
+    width: fullWidth ? '100%' : 'auto',
+    borderWidth: variant === 'outline' ? 2 : 0,
+  };
+
+  const dynamicTextStyles: TextStyle = {
+    color: disabled ? variantConfig.disabledText : variantConfig.textColor,
+    fontSize: sizeConfig.fontSize,
+    fontWeight: '600',
+  };
+
+  // Rendu de l'icône
+  const renderIcon = () => {
+    if (!icon || loading) return null;
+    
+    return (
+      <Text style={[styles.icon, { fontSize: sizeConfig.iconSize }]}>
+        {icon}
+      </Text>
+    );
+  };
+
+  // Rendu du contenu
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <>
+          <ActivityIndicator 
+            size="small" 
+            color={variantConfig.textColor} 
+            style={styles.loadingSpinner}
+          />
+          <Text style={[styles.text, dynamicTextStyles, textStyle]}>
+            Chargement...
+          </Text>
+        </>
+      );
+    }
+
+    if (iconPosition === 'right') {
+      return (
+        <>
+          <Text style={[styles.text, dynamicTextStyles, textStyle]}>
+            {title}
+          </Text>
+          {renderIcon()}
+        </>
+      );
+    }
+
+    return (
+      <>
+        {renderIcon()}
+        <Text style={[styles.text, dynamicTextStyles, textStyle]}>
+          {title}
+        </Text>
+      </>
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, dynamicStyles, style]}
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+    >
+      {renderContent()}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  text: {
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  icon: {
+    marginHorizontal: 8,
+  },
+  loadingSpinner: {
+    marginRight: 8,
+  },
+});
+
+// Composants prédéfinis pour des cas d'usage courants
+export const PrimaryButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
+  <Button variant="primary" {...props} />
+);
+
+export const SecondaryButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
+  <Button variant="secondary" {...props} />
+);
+
+export const OutlineButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
+  <Button variant="outline" {...props} />
+);
+
+export const GhostButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
+  <Button variant="ghost" {...props} />
+);
+
+export const DangerButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
+  <Button variant="danger" {...props} />
+);
+
+export const SuccessButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
+  <Button variant="success" {...props} />
+);
+
+export const WarningButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
+  <Button variant="warning" {...props} />
+);
+
+// Composants de taille prédéfinie
+export const SmallButton: React.FC<Omit<ButtonProps, 'size'>> = (props) => (
+  <Button size="small" {...props} />
+);
+
+export const LargeButton: React.FC<Omit<ButtonProps, 'size'>> = (props) => (
+  <Button size="large" {...props} />
+);
+
+// Composants avec icônes prédéfinies
+export const IconButton: React.FC<ButtonProps & { iconName: string }> = ({ iconName, ...props }) => (
+  <Button icon={iconName} {...props} />
+);
+
+export const BackButton: React.FC<Omit<ButtonProps, 'icon' | 'iconPosition' | 'onPress'> & { onBack: () => void }> = ({ onBack, ...props }) => (
+  <Button 
+    icon="←" 
+    iconPosition="left" 
+    onPress={onBack} 
+    variant="ghost"
+    size="medium"
+    {...props} 
+  />
+);
+
+export const NextButton: React.FC<Omit<ButtonProps, 'icon' | 'iconPosition'>> = (props) => (
+  <Button 
+    icon="→" 
+    iconPosition="right" 
+    variant="primary"
+    size="medium"
+    {...props} 
+  />
+);
+
+export const SubmitButton: React.FC<Omit<ButtonProps, 'variant' | 'icon' | 'iconPosition'>> = (props) => (
+  <Button 
+    variant="primary"
+    size="large"
+    fullWidth
+    {...props} 
+  />
+);
+
+export const CancelButton: React.FC<Omit<ButtonProps, 'variant' | 'icon' | 'iconPosition'>> = (props) => (
+  <Button 
+    variant="secondary"
+    size="medium"
+    {...props} 
+  />
+);
+
+// Export des icônes depuis ButtonStyles
+export { buttonIcons } from './ButtonStyles';