@pi-spi/app 2.0.0 → 2.2.0

package/src/shared/widgets/notification_dialog.tsx

@@ -1,6 +1,5 @@
 import { Image } from 'expo-image';
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../core/assets';
 import { scaleDownSize } from '../utils/scale_down';
@@ -8,6 +7,7 @@ import { AppRouter, useAppRouter } from '../../core/router';
 import { useTheme } from '../../core/theme';
 import { ElevatedButton } from '../material/buttons';
 import { PopScope } from '../material/overlays';
+import { SelectionSheet } from './selection';
 
 /** Affichage des dialogues de notifications de succes ou erreur */
 export enum NotificationType {
@@ -40,11 +40,13 @@ export type NotificationDialogProps = {
   animatedImage?: number;
   btnAction?: () => void;
   btns?: NotificationBtn[];
+  /** `true` : la feuille se ferme aussi par le bouton retour */
+  canPop?: boolean;
 };
 
 /**
- * Contenu de feuille du bas affichant un succès / une erreur / une info,
- * avec son animation, ses textes et ses boutons. Le bouton retour est
+ * Feuille du bas affichant un succès / une erreur / une info : animation
+ * selon le [type], textes centrés puis bouton(s) sur toute la largeur. Le bouton retour est
  * bloqué : seuls les boutons ferment la feuille.
  */
 export function NotificationDialog({
@@ -58,76 +60,74 @@ export function NotificationDialog({
   animatedImage,
   btnAction,
   btns,
+  canPop = false,
 }: NotificationDialogProps) {
   const theme = useTheme();
   const router = useAppRouter();
-  const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
   const image = animatedImage ?? imageFor(type);
   const close = () => AppRouter.pop(router);
 
   return (
-    <PopScope canPop={false}>
-      <View
-        style={[
-          styles.box,
-          { maxHeight: height * 0.7, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom },
-        ]}
-      >
-        <ScrollView contentContainerStyle={styles.content} bounces={false}>
-          {image != null && (
-            <>
-              <Image source={image} style={[scaleDownSize(image, 100), styles.image]} contentFit="contain" />
-              <View style={styles.gap32} />
-            </>
-          )}
-          {/* Text message */}
-          {message != null && (
-            <>
-              <Text style={[theme.textTheme.headlineSmall, styles.center]}>{message}</Text>
-              <View style={styles.gap20} />
-            </>
-          )}
-          {/* Title message */}
-          {title != null && (
-            <>
-              <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
-              <View style={styles.gap15} />
-            </>
-          )}
-          {/* Subtitle message */}
-          {subtitle != null && (
-            <>
-              <Text style={[theme.textTheme.titleSmall, styles.center]}>{subtitle}</Text>
-              <View style={styles.gap15} />
-            </>
-          )}
-          {/* Description */}
-          {description != null && (
-            <>
-              <Text style={[theme.textTheme.displaySmall, styles.center]}>{description}</Text>
-              <View style={styles.gap24} />
-            </>
-          )}
-          {/* Continue btn */}
-          {btnText != null && (
-            <ElevatedButton onPress={btnAction ?? close} style={btnColor ? { backgroundColor: btnColor } : undefined}>
-              {btnText}
-            </ElevatedButton>
-          )}
-          {/* Btns d'action */}
-          {btns?.map((btn, i) => (
-            <View key={i} style={styles.btn}>
-              <ElevatedButton
-                onPress={btn.btnAction ?? close}
-                style={btn.btnColor ? { backgroundColor: btn.btnColor } : undefined}
-              >
-                {btn.btnText}
+    <PopScope canPop={canPop}>
+      <SelectionSheet
+        hauteurMax={0.8}
+        contenu={
+          <ScrollView contentContainerStyle={styles.content} bounces={false}>
+            {image != null && (
+              <>
+                <Image source={image} style={[scaleDownSize(image, 96), styles.image]} contentFit="contain" />
+                <View style={styles.gap24} />
+              </>
+            )}
+            {/* Text message */}
+            {message != null && (
+              <>
+                <Text style={[theme.textTheme.headlineSmall, styles.center]}>{message}</Text>
+                <View style={styles.gap16} />
+              </>
+            )}
+            {/* Title message */}
+            {title != null && (
+              <>
+                <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
+                <View style={styles.gap12} />
+              </>
+            )}
+            {/* Subtitle message */}
+            {subtitle != null && (
+              <>
+                <Text style={[theme.textTheme.titleSmall, styles.center]}>{subtitle}</Text>
+                <View style={styles.gap12} />
+              </>
+            )}
+            {/* Description */}
+            {description != null && (
+              <>
+                <Text style={[theme.textTheme.displaySmall, styles.center]}>{description}</Text>
+                <View style={styles.gap16} />
+              </>
+            )}
+            <View style={styles.gap8} />
+            {/* Continue btn */}
+            {btnText != null && (
+              <ElevatedButton onPress={btnAction ?? close} style={btnColor ? { backgroundColor: btnColor } : undefined}>
+                {btnText}
               </ElevatedButton>
-            </View>
-          ))}
-        </ScrollView>
-      </View>
+            )}
+            {/* Btns d'action */}
+            {btns?.map((btn, i) => (
+              <View key={i} style={styles.btn}>
+                <ElevatedButton
+                  onPress={btn.btnAction ?? close}
+                  style={btn.btnColor ? { backgroundColor: btn.btnColor } : undefined}
+                >
+                  {btn.btnText}
+                </ElevatedButton>
+              </View>
+            ))}
+          </ScrollView>
+        }
+      />
     </PopScope>
   );
 }
@@ -146,13 +146,12 @@ function imageFor(type: NotificationType): number | undefined {
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, width: '100%', overflow: 'hidden' },
-  content: { paddingHorizontal: 40, paddingVertical: 10, alignItems: 'stretch' },
+  content: { paddingHorizontal: 28, paddingTop: 8, paddingBottom: 16, alignItems: 'stretch' },
   image: { alignSelf: 'center' },
   center: { textAlign: 'center' },
-  gap15: { height: 15 },
-  gap20: { height: 20 },
+  gap8: { height: 8 },
+  gap12: { height: 12 },
+  gap16: { height: 16 },
   gap24: { height: 24 },
-  gap32: { height: 32 },
   btn: { paddingVertical: 5 },
 });

package/src/shared/widgets/pin_entete.tsx

@@ -0,0 +1,74 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ComponentProps } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Themer, useTheme } from '../../core/theme';
+import { withAlpha } from '../utils/color';
+
+/** En-tête des pages de création et de modification du code PIN : pastille avec [icone], [titre] (facultatif) et [sousTitre] centrés. */
+export function PinEntete({
+  icone,
+  titre,
+  sousTitre,
+  compact = false,
+}: {
+  icone: ComponentProps<typeof MaterialIcons>['name'];
+  titre?: string;
+  sousTitre: string;
+  compact?: boolean;
+}) {
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  const taille = compact ? 56 : 72;
+  return (
+    <View style={pageStyles.entete}>
+      <View style={[pageStyles.pastille, { width: taille, height: taille, borderRadius: taille / 2, backgroundColor: withAlpha(primaire, 0.12) }]}>
+        <MaterialIcons name={icone} size={taille * 0.45} color={primaire} />
+      </View>
+      <View style={{ height: compact ? 10 : 14 }} />
+      {titre != null && (
+        <>
+          <Text style={[theme.textTheme.headlineSmall, pageStyles.centre, pageStyles.gras]}>{titre}</Text>
+          <View style={pageStyles.gap6} />
+        </>
+      )}
+      <Text style={[theme.textTheme.displayMedium, pageStyles.centre, { color: Themer.neural03Color }]}>{sousTitre}</Text>
+    </View>
+  );
+}
+
+/** Bandeau d'erreur (ou de succès, avec [succes]) sous les points du code PIN ; rien si [message] est vide. */
+export function PinMessage({ message, succes = false }: { message?: string | null; succes?: boolean }) {
+  const theme = useTheme();
+  if (message == null || message.length === 0) return null;
+  const couleur = succes ? Themer.successColor : theme.colorScheme.error;
+  return (
+    <View
+      accessibilityLiveRegion="polite"
+      style={[pageStyles.message, { backgroundColor: withAlpha(couleur, 0.08), borderColor: withAlpha(couleur, 0.25) }]}
+    >
+      <MaterialIcons name={succes ? 'check-circle-outline' : 'error-outline'} size={20} color={couleur} />
+      <Text style={[theme.textTheme.bodyMedium, pageStyles.messageTexte, { color: couleur }]}>{message}</Text>
+    </View>
+  );
+}
+
+const pageStyles = StyleSheet.create({
+  gap6: { height: 6 },
+  entete: { alignItems: 'center' },
+  pastille: { alignItems: 'center', justifyContent: 'center' },
+  centre: { textAlign: 'center' },
+  gras: { fontWeight: '600' },
+  message: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    marginTop: 15,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+  },
+  messageTexte: { marginLeft: 10, fontWeight: '500', flexShrink: 1, textAlign: 'center' },
+});

package/src/shared/widgets/select_date_widget.tsx

@@ -1,6 +1,6 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { useState, type ReactNode } from 'react';
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { AppRouter, useAppRouter, type SdkRouter } from '../../core/router';
 import { Themer, useTheme } from '../../core/theme';
@@ -8,28 +8,57 @@ import type { AppLocalizations } from '../../l10n/app_localizations';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { ElevatedButton } from '../material/buttons';
 import { showModalBottomSheet } from '../material/overlays';
+import { withAlpha } from '../utils/color';
 import { DateFormat } from '../utils/date_format';
 import { CalendarDatePicker } from './calendar_date_picker';
+import { SelectionBoutons, SelectionSheet } from './selection';
 
-/** Feuille avec un calendrier : titre, calendrier, plage choisie, « Valider ». */
-function DateSheet({ title, subTitle, children, footer }: { title: string; subTitle?: string; children: ReactNode; footer?: ReactNode }) {
+/**
+ * Feuille avec un calendrier : poignée, titre, sous-titre, calendrier, date
+ * ou plage choisie ([resume]) puis « Valider » fixé en bas.
+ */
+function DateSheet({ title, subTitle, children, resume }: { title: string; subTitle?: string; children: ReactNode; resume?: string | null }) {
   const theme = useTheme();
   const router = useAppRouter();
   const traductions = useAppLocalizations();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   return (
-    <View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.65, paddingBottom: insets.bottom }]}>
-      <View style={styles.title}>
-        <Text style={theme.textTheme.headlineMedium}>{title}</Text>
-        <View style={styles.gap12} />
-        {subTitle != null && <Text style={theme.textTheme.displayMedium}>{subTitle}</Text>}
-      </View>
-      <ScrollView style={styles.flexShrink}>{children}</ScrollView>
-      {footer}
-      <View style={styles.button}>
-        <ElevatedButton onPress={() => AppRouter.pop(router)}>{traductions.popupSelectDateBtnValider}</ElevatedButton>
-      </View>
+    <SelectionSheet
+      titre={title}
+      hauteurMax={0.85}
+      entete={
+        subTitle != null ? <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{subTitle}</Text> : undefined
+      }
+      contenu={
+        <>
+          <ScrollView bounces={false} style={styles.flexShrink} contentContainerStyle={styles.content}>
+            {children}
+            {resume != null && <SelectDateResume texte={resume} />}
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              <ElevatedButton key="valider" onPress={() => AppRouter.pop(router)}>
+                {traductions.popupSelectDateBtnValider}
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
+  );
+}
+
+/** Date ou plage choisie, mise en évidence sous le calendrier. */
+export function SelectDateResume({ texte }: { texte: string }) {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.resume,
+        { backgroundColor: withAlpha(Themer.successColor, 0.08), borderColor: withAlpha(Themer.successColor, 0.25) },
+      ]}
+    >
+      <MaterialIcons name="event-available" size={20} color={Themer.successColor} />
+      <Text style={[theme.textTheme.displayLarge, styles.resumeTexte, { color: Themer.successColor }]}>{texte}</Text>
     </View>
   );
 }
@@ -41,7 +70,6 @@ export async function showSelectDate(
 ): Promise<Date | null> {
   let date: Date | null = null;
   await showModalBottomSheet(router, {
-    themed: true,
     builder: () => <SelectDate {...options} onSelect={(d) => (date = d)} />,
   });
   return date;
@@ -62,9 +90,14 @@ function SelectDate({
   lastDate?: Date | null;
   onSelect: (date: Date) => void;
 }) {
-  const [value, setValue] = useState<Date | null>(null);
+  const traductions = useAppLocalizations();
+  const [value, setValue] = useState<Date | null>(selected ?? null);
   return (
-    <DateSheet title={title} subTitle={subTitle}>
+    <DateSheet
+      title={title}
+      subTitle={subTitle}
+      resume={value != null ? new DateFormat('EEEE d MMMM yyyy', traductions.localeName).format(value) : null}
+    >
       <CalendarDatePicker
         type="single"
         value={[value]}
@@ -95,7 +128,6 @@ export async function showSelectDateRange(
 ): Promise<Date[]> {
   let dates: Date[] = [];
   await showModalBottomSheet(router, {
-    themed: true,
     builder: () => <SelectDateRange {...options} onSelect={(d) => (dates = d)} />,
   });
   return dates;
@@ -119,14 +151,7 @@ function SelectDateRange({
   const [dateFin, setDateFin] = useState<Date | null>(initialFin ?? null);
   const formatter = new DateFormat('d MMMM yyyy', traductions.localeName);
   return (
-    <DateSheet
-      title={title}
-      footer={
-        dateDebut != null ? (
-          <Text style={[styles.plage, { color: Themer.successColor }]}>{plageText(traductions, formatter, dateDebut, dateFin)}</Text>
-        ) : null
-      }
-    >
+    <DateSheet title={title} resume={dateDebut != null ? plageText(traductions, formatter, dateDebut, dateFin) : null}>
       <CalendarDatePicker
         type="range"
         value={[dateDebut, dateFin]}
@@ -142,10 +167,17 @@ function SelectDateRange({
 }
 
 const styles = StyleSheet.create({
-  sheet: { borderRadius: 20, overflow: 'hidden' },
-  title: { paddingHorizontal: 20, paddingTop: 30, paddingBottom: 15 },
   flexShrink: { flexShrink: 1 },
-  gap12: { height: 12 },
-  plage: { textAlign: 'center', paddingHorizontal: 20 },
-  button: { paddingHorizontal: 20, paddingVertical: 10 },
+  content: { paddingHorizontal: 4, paddingBottom: 16 },
+  resume: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginTop: 4,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+  },
+  resumeTexte: { flex: 1, marginLeft: 10, fontWeight: '600' },
 });