@transfergratis/react-native-sdk 0.1.2

package/src/components/ui/ButtonExample.tsx

@@ -0,0 +1,318 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { 
+  Button, 
+  buttonIcons 
+} from './Button';
+
+const ButtonExample: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+
+  const handlePress = () => {
+    console.log('Button pressed!');
+  };
+
+  const handleLoadingPress = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <Text style={styles.title}>Composant Button</Text>
+      
+      {/* Variantes de base */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Variantes</Text>
+        
+        <Button title="Primary" onPress={handlePress} variant="primary" />
+        <Button title="Secondary" onPress={handlePress} variant="secondary" />
+        <Button title="Outline" onPress={handlePress} variant="outline" />
+        <Button title="Ghost" onPress={handlePress} variant="ghost" />
+        <Button title="Danger" onPress={handlePress} variant="danger" />
+        <Button title="Success" onPress={handlePress} variant="success" />
+        <Button title="Warning" onPress={handlePress} variant="warning" />
+      </View>
+
+      {/* Tailles */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Tailles</Text>
+        
+        <Button title="Small" onPress={handlePress} size="small" />
+        <Button title="Medium (default)" onPress={handlePress} />
+        <Button title="Large" onPress={handlePress} size="large" />
+      </View>
+
+      {/* Icônes */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Icônes</Text>
+        
+        <Button 
+          title="Avec icône gauche" 
+          icon={buttonIcons.camera}
+          onPress={handlePress} 
+        />
+        <Button 
+          title="Avec icône droite" 
+          icon="→"
+          iconPosition="right"
+          onPress={handlePress} 
+        />
+        <Button 
+          title="Icône seulement" 
+          icon={buttonIcons.plus}
+          style={styles.iconOnlyButton}
+          onPress={handlePress} 
+        />
+      </View>
+
+      {/* États */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>États</Text>
+        
+        <Button title="Normal" onPress={handlePress} />
+        <Button title="Désactivé" onPress={handlePress} disabled />
+        <Button title="Chargement" onPress={handleLoadingPress} loading={loading} />
+      </View>
+
+      {/* Styles spéciaux */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Styles spéciaux</Text>
+        
+        <Button title="Pleine largeur" onPress={handlePress} fullWidth />
+        <Button title="Arrondi" onPress={handlePress} rounded />
+        <Button 
+          title="Style personnalisé" 
+          onPress={handlePress} 
+          style={styles.customButton}
+          textStyle={styles.customText}
+        />
+      </View>
+
+      {/* Composants prédéfinis */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Composants prédéfinis</Text>
+        
+        <View style={styles.row}>
+          <Button title="Retour" icon="←" variant="ghost" onPress={handlePress} />
+          <Button title="Suivant" icon="→" variant="primary" onPress={handlePress} />
+        </View>
+        
+        <View style={styles.row}>
+          <Button title="Soumettre" variant="primary" size="large" fullWidth onPress={handlePress} />
+          <Button title="Annuler" variant="secondary" onPress={handlePress} />
+        </View>
+      </View>
+
+      {/* Boutons d'action */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Boutons d'action</Text>
+        
+        <View style={styles.row}>
+          <Button 
+            title="Éditer" 
+            icon={buttonIcons.edit}
+            variant="warning"
+            onPress={handlePress} 
+          />
+          <Button 
+            title="Supprimer" 
+            icon={buttonIcons.delete}
+            variant="danger"
+            onPress={handlePress} 
+          />
+        </View>
+        
+        <View style={styles.row}>
+          <Button 
+            title="Partager" 
+            icon={buttonIcons.share}
+            variant="info"
+            onPress={handlePress} 
+          />
+          <Button 
+            title="Télécharger" 
+            icon={buttonIcons.download}
+            variant="success"
+            onPress={handlePress} 
+          />
+        </View>
+      </View>
+
+      {/* Boutons de navigation */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Navigation</Text>
+        
+        <View style={styles.row}>
+          <Button 
+            title="Accueil" 
+            icon={buttonIcons.home}
+            variant="ghost"
+            onPress={handlePress} 
+          />
+          <Button 
+            title="Paramètres" 
+            icon={buttonIcons.settings}
+            variant="ghost"
+            onPress={handlePress} 
+          />
+        </View>
+        
+        <View style={styles.row}>
+          <Button 
+            title="Rechercher" 
+            icon={buttonIcons.search}
+            variant="primary"
+            onPress={handlePress} 
+          />
+          <Button 
+            title="Filtrer" 
+            icon={buttonIcons.filter}
+            variant="secondary"
+            onPress={handlePress} 
+          />
+        </View>
+      </View>
+
+      {/* Boutons de formulaire */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Formulaire</Text>
+        
+        <Button 
+          title="Se connecter" 
+          icon={buttonIcons.user}
+          variant="primary"
+          size="large"
+          fullWidth
+          onPress={handlePress} 
+        />
+        
+        <View style={styles.row}>
+          <Button 
+            title="S'inscrire" 
+            variant="outline"
+            onPress={handlePress} 
+          />
+          <Button 
+            title="Mot de passe oublié" 
+            variant="ghost"
+            onPress={handlePress} 
+          />
+        </View>
+      </View>
+
+      {/* Boutons de statut */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Statuts</Text>
+        
+        <View style={styles.row}>
+          <Button 
+            title="En cours" 
+            icon={buttonIcons.clock}
+            variant="warning"
+            size="small"
+            onPress={handlePress} 
+          />
+          <Button 
+            title="Terminé" 
+            icon={buttonIcons.check}
+            variant="success"
+            size="small"
+            onPress={handlePress} 
+          />
+          <Button 
+            title="Erreur" 
+            icon={buttonIcons.error}
+            variant="danger"
+            size="small"
+            onPress={handlePress} 
+          />
+        </View>
+      </View>
+
+      {/* Boutons flottants */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Boutons flottants</Text>
+        
+        <View style={styles.floatingContainer}>
+          <Button 
+            title="" 
+            icon={buttonIcons.plus}
+            variant="primary"
+            rounded
+            style={styles.floatingButton}
+            onPress={handlePress} 
+          />
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  section: {
+    marginBottom: 30,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 15,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  iconOnlyButton: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    paddingHorizontal: 0,
+    alignSelf: 'center',
+  },
+  customButton: {
+    backgroundColor: '#8B5CF6',
+    borderColor: '#8B5CF6',
+    borderRadius: 20,
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+  },
+  customText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  floatingContainer: {
+    height: 100,
+    position: 'relative',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  floatingButton: {
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    paddingHorizontal: 0,
+  },
+});
+
+export default ButtonExample;