feat : Switch

2026-09-10 11:40:54 +02:00
parent 845a9509b7
commit cf59438c25
5 changed files with 279 additions and 0 deletions
--- a/src/app/switch-demo.tsx
+++ b/src/app/switch-demo.tsx
@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { FormField, Switch } from '@/components/form';
+import { Screen } from '@/components/ui/Screen';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function SwitchDemoScreen() {
+  const [pushEnabled, setPushEnabled] = useState(true);
+  const [weeklyDigestEnabled, setWeeklyDigestEnabled] = useState(false);
+
+  return (
+    <Screen contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.kicker}>DESIGN SYSTEM · SWITCH</Text>
+        <Text style={styles.title}>Demos du composant Switch</Text>
+      </View>
+
+      <FormField
+        label="Notifications push"
+        helper="Switch custom basé sur Expo/React Native"
+      >
+        <View style={styles.switchRow}>
+          <View style={styles.switchLabelWrap}>
+            <Text style={styles.switchLabel}>Activer les alertes de nouveaux événements</Text>
+            <Text style={styles.switchHint}>
+              {pushEnabled ? 'Activé' : 'Désactivé'}
+            </Text>
+          </View>
+          <Switch
+            accessibilityLabel="Activer les notifications push"
+            value={pushEnabled}
+            onValueChange={setPushEnabled}
+          />
+        </View>
+      </FormField>
+
+      <FormField
+        label="Digest hebdo"
+        helper="Exemple de taille large"
+      >
+        <View style={styles.switchRow}>
+          <View style={styles.switchLabelWrap}>
+            <Text style={styles.switchLabel}>Recevoir un recap chaque lundi</Text>
+            <Text style={styles.switchHint}>
+              {weeklyDigestEnabled ? 'Activé' : 'Désactivé'}
+            </Text>
+          </View>
+          <Switch
+            accessibilityLabel="Activer le digest hebdomadaire"
+            value={weeklyDigestEnabled}
+            onValueChange={setWeeklyDigestEnabled}
+            size="lg"
+          />
+        </View>
+      </FormField>
+
+      <FormField label="Etat desactive" helper="Le switch est non interactif">
+        <View style={styles.switchRow}>
+          <View style={styles.switchLabelWrap}>
+            <Text style={styles.switchLabel}>Mode maintenance</Text>
+            <Text style={styles.switchHint}>Indisponible</Text>
+          </View>
+          <Switch
+            accessibilityLabel="Switch desactive"
+            value
+            disabled
+          />
+        </View>
+      </FormField>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    gap: spacing[16],
+    paddingTop: spacing[24],
+  },
+  header: {
+    gap: spacing[8],
+    marginBottom: spacing[8],
+  },
+  kicker: {
+    ...typography.sectionLabel,
+    color: colors.textSecondary,
+  },
+  title: {
+    ...typography.body,
+    color: colors.textPrimary,
+  },
+  switchRow: {
+    minHeight: 56,
+    borderWidth: 1,
+    borderColor: colors.inputBorder,
+    borderRadius: 14,
+    backgroundColor: colors.inputBackground,
+    paddingHorizontal: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing[12],
+  },
+  switchLabelWrap: {
+    flex: 1,
+    gap: 2,
+  },
+  switchLabel: {
+    ...typography.body,
+    color: colors.textPrimary,
+  },
+  switchHint: {
+    ...typography.caption,
+    color: colors.textSecondary,
+  },
+});