@pi-spi/app 0.0.0-stage → 1.2.0

package/src/shared/widgets/cta_widget.tsx

@@ -0,0 +1,55 @@
+import { Image } from 'expo-image';
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { Themer, useTheme } from '../../core/theme';
+
+/**
+ * Action principale de l'accueil (Envoyer, Recevoir, Plus) : bouton rond
+ * de 56 px et libellé dessous, grisés si [action] est absent.
+ */
+export function CtaWidget({
+  label,
+  action,
+  icon,
+  image,
+}: {
+  label: string;
+  action?: (() => void) | null;
+  /** Icône à afficher (reçoit la couleur à utiliser). */
+  icon?: (color: string) => ReactNode;
+  image?: number;
+}) {
+  const theme = useTheme();
+  const disabled = action == null;
+  const color = disabled ? Themer.neural02Color : theme.colorScheme.onPrimary;
+  return (
+    <View style={styles.column}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ disabled }}
+        disabled={disabled}
+        onPress={action ?? undefined}
+        style={({ pressed }) => [
+          styles.fab,
+          { backgroundColor: disabled ? '#F5F5F1' : theme.colorScheme.primary, opacity: pressed ? 0.85 : 1 },
+        ]}
+      >
+        {icon ? icon(color) : null}
+        {!icon && image != null ? (
+          <Image source={image} style={styles.image} tintColor={color} contentFit="contain" />
+        ) : null}
+      </Pressable>
+      <View style={styles.gap6} />
+      <Text style={[theme.textTheme.bodySmall, disabled ? { color: Themer.neural02Color } : null]}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: { alignItems: 'center' },
+  fab: { width: 56, height: 56, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
+  image: { width: 30, height: 30 },
+  gap6: { height: 6 },
+});

package/src/shared/widgets/custom_alert_dialog.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { AppRouter, useAppRouter } from '../../core/router';
+import { Themer, useTheme } from '../../core/theme';
+import { TextButton } from '../material/buttons';
+import { Divider } from '../material/divider';
+
+/**
+ * Affichage d'une demande de confirmation quand l'utilisateur veut
+ * effectuer une action sensible (contenu d'un `showDialog`).
+ */
+export function CustomAlertDialog({
+  title,
+  description,
+  confirmBtnText,
+  confirmBtnAction,
+  cancelBtnText,
+  cancelBtnAction,
+}: {
+  title: string;
+  description: string;
+  confirmBtnText: string;
+  confirmBtnAction: () => void;
+  cancelBtnText?: string;
+  cancelBtnAction?: () => void;
+}) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  return (
+    // Boîte de `SimpleDialog` : fond surface, coins arrondis, 55 px de marge latérale
+    <View style={[styles.dialog, { backgroundColor: theme.colorScheme.surface }]}>
+    <View style={styles.content}>
+      {/* title */}
+      <Text style={[theme.textTheme.headlineSmall, styles.center]}>{title}</Text>
+      <View style={styles.gap15} />
+      {/* description */}
+      <Text style={[theme.textTheme.displaySmall, styles.center, { color: theme.colorScheme.onSurface }]}>{description}</Text>
+      <Divider />
+      {/* Confirm btn */}
+      <TextButton onPress={confirmBtnAction} style={styles.btn}>
+        <Text style={[theme.textTheme.headlineSmall, { color: Themer.systemErrorColor }]}>{confirmBtnText}</Text>
+      </TextButton>
+      {cancelBtnText != null && (
+        <>
+          <Divider />
+          {/* Cancel btn */}
+          <TextButton onPress={cancelBtnAction ?? (() => AppRouter.pop(router))} style={styles.btn}>
+            <Text style={[theme.textTheme.headlineSmall, { color: Themer.systemBlueColor }]}>{cancelBtnText}</Text>
+          </TextButton>
+        </>
+      )}
+    </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dialog: { marginHorizontal: 55, borderRadius: 20, overflow: 'hidden' },
+  content: { paddingTop: 20, paddingHorizontal: 20, paddingBottom: 15, alignItems: 'center' },
+  center: { textAlign: 'center' },
+  gap15: { height: 15 },
+  btn: { paddingHorizontal: 5, paddingVertical: 4 },
+});

package/src/shared/widgets/custom_progressbar.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { Themer } from '../../core/theme';
+
+/**
+ * Anneau de progression (≈ `CustomCircularProgressBar`) : cercle de fond
+ * et arc de progression partant du haut, centrés sur [child]. Comme le
+ * `CustomPaint` Flutter, le trait déborde de [size] de la moitié de son
+ * épaisseur.
+ */
+export function CustomCircularProgressBar({
+  progressValue,
+  progressColor,
+  backgroundColor,
+  size = 80,
+  strokeWidth = 7.5,
+  children,
+}: {
+  progressValue: number;
+  progressColor?: string;
+  backgroundColor?: string;
+  size?: number;
+  strokeWidth?: number;
+  children?: ReactNode;
+}) {
+  const radius = size / 2;
+  const box = size + strokeWidth;
+  const center = box / 2;
+  const circumference = 2 * Math.PI * radius;
+  return (
+    <View style={[styles.stack, { width: size, height: size }]}>
+      <Svg width={box} height={box} style={[styles.paint, { left: -strokeWidth / 2, top: -strokeWidth / 2 }]}>
+        <Circle cx={center} cy={center} r={radius} stroke={backgroundColor ?? 'rgba(158,158,158,0.3)'} strokeWidth={strokeWidth} fill="none" />
+        {progressValue > 0 && (
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke={progressColor ?? Themer.primary}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+            strokeDasharray={`${circumference * Math.min(1, progressValue)} ${circumference}`}
+            transform={`rotate(-90 ${center} ${center})`}
+          />
+        )}
+      </Svg>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  stack: { alignItems: 'center', justifyContent: 'center', overflow: 'visible' },
+  paint: { position: 'absolute' },
+});

package/src/shared/widgets/custom_snack_bar.tsx

@@ -0,0 +1,87 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useValueListenable, ValueNotifier } from '../../core/value_notifier';
+
+type SnackEntry = { id: number; message: string; durationMs: number; bgColor?: string };
+
+const snacks = new ValueNotifier<SnackEntry[]>([]);
+let sequence = 0;
+
+/** Bandeau de message en bas de l'écran (≈ `CustomSnackBar.show` du SDK Flutter). */
+export class CustomSnackBar {
+  static show(message: string, options: { durationMs?: number; bgColor?: string } = {}): void {
+    sequence += 1;
+    snacks.value = [...snacks.value, { id: sequence, message, durationMs: options.durationMs ?? 3000, bgColor: options.bgColor }];
+  }
+
+  static dismiss(id: number): void {
+    snacks.value = snacks.value.filter((s) => s.id !== id);
+  }
+}
+
+/** Affiche les bandeaux en cours, par-dessus les écrans du SDK (placé dans `PiSpiSdkEntry`). */
+export function SnackBarHost() {
+  const entries = useValueListenable(snacks);
+  return (
+    <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, styles.host]}>
+      {entries.map((entry) => (
+        <SnackView key={entry.id} entry={entry} />
+      ))}
+    </View>
+  );
+}
+
+function SnackView({ entry }: { entry: SnackEntry }) {
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, { toValue: 1, duration: 250, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+    const timer = setTimeout(() => hide(), entry.durationMs);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const hide = () => {
+    Animated.timing(progress, { toValue: 0, duration: 250, useNativeDriver: true }).start(() =>
+      CustomSnackBar.dismiss(entry.id),
+    );
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.snack,
+        { backgroundColor: entry.bgColor ?? '#212121', shadowColor: entry.bgColor ?? '#000' },
+        { opacity: progress, transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [80, 0] }) }] },
+      ]}
+    >
+      <Text style={styles.text} numberOfLines={2}>
+        {entry.message}
+      </Text>
+      <Pressable accessibilityRole="button" onPress={hide} hitSlop={10} style={styles.close}>
+        <MaterialIcons name="close" size={20} color="rgba(255,255,255,0.7)" />
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: { justifyContent: 'flex-end', paddingBottom: 20 },
+  snack: {
+    marginHorizontal: 16,
+    marginTop: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 12,
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowOpacity: 0.3,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 3 },
+    elevation: 6,
+  },
+  text: { flex: 1, color: 'white', fontSize: 14 },
+  close: { padding: 4 },
+});

package/src/shared/widgets/emoji_select_widget.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { EmojiKeyboard, en, fr, pt } from 'rn-emoji-keyboard';
+
+import { Themer, useTheme } from '../../core/theme';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { argbToCss } from '../../modules/categorie/domain/models/categorie_icons';
+
+const colors = [0xffedb37e, 0xffc08507, 0xff007aff, 0xfff9ebc2, 0xff8b887e, 0xffffd573, 0xfffa5a25, 0xff46a93d, 0xffa1a5ac, 0xff43474e];
+const imageRegex = /\.(jpeg|jpg|png|gif)$/i;
+
+/**
+ * Choix d'un emoji et d'une couleur de fond (icône de catégorie) : aperçu,
+ * palette de couleurs, puis clavier d'emoji par catégories.
+ */
+export function EmojiSelectWidget({
+  icon,
+  color,
+  onChanged,
+}: {
+  icon?: string;
+  color?: number;
+  onChanged: (value: { icon: string; color: number }) => void;
+}) {
+  const theme = useTheme();
+  const locale = useAppLocalizations().localeName;
+  const { height } = useWindowDimensions();
+  const [selectedColor, setSelectedColor] = useState(color ?? 0xfff9ebc2);
+  // Comme en Dart : l'emoji par défaut remplace aussi une icône non-image
+  const [selectedEmoji, setSelectedEmoji] = useState(icon == null || !imageRegex.test(icon) ? '🤩' : icon);
+
+  useEffect(() => {
+    onChanged({ icon: selectedEmoji, color: selectedColor });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedEmoji, selectedColor]);
+
+  return (
+    <View style={styles.column}>
+      {/* Emoji sélectionné (ou par défaut) */}
+      <View style={[styles.preview, { backgroundColor: argbToCss(selectedColor) }]}>
+        <Text style={styles.previewText}>{selectedEmoji}</Text>
+      </View>
+      {/* Couleur de fond */}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.colors}>
+        {colors.map((c) =>
+          c === selectedColor ? (
+            <View key={c} style={[styles.selectedColor, { borderColor: theme.colorScheme.primary }]}>
+              <View style={[styles.dot, { backgroundColor: argbToCss(c) }]} />
+            </View>
+          ) : (
+            <Pressable key={c} onPress={() => setSelectedColor(c)} style={[styles.dot, styles.dotSpacing, { backgroundColor: argbToCss(c) }]} />
+          ),
+        )}
+      </ScrollView>
+      {/* Clavier d'emoji */}
+      <View style={{ height: height * 0.4, alignSelf: 'stretch' }}>
+        <EmojiKeyboard
+          onEmojiSelected={(emoji) => setSelectedEmoji(emoji.emoji)}
+          translation={locale === 'fr' ? fr : locale === 'pt' ? pt : en}
+          categoryPosition="top"
+          disableSafeArea
+          theme={{
+            container: theme.colorScheme.surface,
+            category: {
+              icon: Themer.neural03Color,
+              iconActive: theme.primaryColor,
+              container: theme.cardColor,
+              containerActive: theme.colorScheme.secondary,
+            },
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: { alignItems: 'center' },
+  preview: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 8,
+  },
+  previewText: { fontSize: 48 },
+  colors: { alignItems: 'center', height: 72, paddingHorizontal: 4 },
+  dot: { width: 24, height: 24, borderRadius: 12 },
+  dotSpacing: { marginRight: 12 },
+  selectedColor: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 3,
+    padding: 1,
+    marginRight: 12,
+    backgroundColor: Themer.whiteColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/shared/widgets/error_page.tsx

@@ -0,0 +1,107 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../core/assets';
+import { useTheme } from '../../core/theme';
+import type { AppLocalizations } from '../../l10n/app_localizations';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { ElevatedButton } from '../material/buttons';
+
+export enum ErrorType {
+  internetError = 'internetError',
+  sessionError = 'sessionError',
+  serverError = 'serverError',
+  requestNotFound = 'requestNotFound',
+}
+
+function errorTitle(type: ErrorType, traductions: AppLocalizations): string {
+  switch (type) {
+    case ErrorType.internetError:
+    case ErrorType.sessionError:
+      return traductions.internetErrorTitle;
+    case ErrorType.serverError:
+    case ErrorType.requestNotFound:
+      return traductions.serverErrorTitle;
+  }
+}
+
+function errorMessage(type: ErrorType, traductions: AppLocalizations): string {
+  switch (type) {
+    case ErrorType.internetError:
+      return traductions.internetErrorSubtitle;
+    case ErrorType.sessionError:
+      return traductions.sessionErrorSubtitle;
+    case ErrorType.serverError:
+      return traductions.serverErrorSubtitle;
+    case ErrorType.requestNotFound:
+      return traductions.requestNotFoundErrorMessage;
+  }
+}
+
+/** Page affichage erreur de l'app : logo, image animée, titre, message et « Réessayer ». */
+export function ErrorPage({
+  bgColor,
+  type,
+  retry,
+  animatedImage = Images.gifError,
+}: {
+  bgColor?: string;
+  type: ErrorType;
+  retry?: () => void;
+  animatedImage?: number;
+}) {
+  const theme = useTheme();
+  const traductions = useAppLocalizations();
+  const color = theme.elevatedButtonTheme.textStyle.color as string | undefined;
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor ?? 'transparent' }]}>
+      {/* Logo pi */}
+      {type !== ErrorType.requestNotFound && (
+        <>
+          <Image
+            source={theme.brightness === 'dark' ? Images.logoSpiDark : Images.logoSpiLight}
+            style={styles.logo}
+            contentFit="fill"
+          />
+          <View style={styles.gap24} />
+        </>
+      )}
+      {/* Icon error */}
+      <Image source={animatedImage} style={styles.icon} />
+      <View style={styles.gap24} />
+      {/* Titre principal */}
+      <Text style={[theme.textTheme.headlineMedium, styles.center]}>{errorTitle(type, traductions)}</Text>
+      <View style={styles.gap12} />
+      {/* Message détaillé */}
+      <Text style={[theme.textTheme.bodyMedium, styles.center]}>{errorMessage(type, traductions)}</Text>
+      {retry != null && (
+        <View style={styles.retry}>
+          <ElevatedButton onPress={retry} style={styles.retryButton}>
+            <View style={styles.row}>
+              <MaterialIcons name="refresh" size={20} color={color} />
+              <View style={styles.gap8} />
+              <Text style={theme.elevatedButtonTheme.textStyle}>
+                {type === ErrorType.sessionError ? traductions.btnTextReconnecter : traductions.reessayer}
+              </Text>
+            </View>
+          </ElevatedButton>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  logo: { width: 200, height: 70 },
+  icon: { width: 50, height: 50 },
+  center: { textAlign: 'center' },
+  gap8: { width: 8 },
+  gap12: { height: 12 },
+  gap24: { height: 24 },
+  retry: { marginTop: 30, paddingHorizontal: 20 },
+  retryButton: { paddingHorizontal: 32, paddingVertical: 14, borderRadius: 12 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+});

package/src/shared/widgets/floating_label.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, type TextStyle } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+/** Délai de l'animation du label (comme `InputDecorator` de Flutter) */
+const DURATION = 200;
+
+/**
+ * Label flottant d'un champ (≈ `labelText` de `InputDecoration`) : au repos,
+ * il occupe la place du texte (`labelStyle`, 17) ; quand le champ a le
+ * focus ou une valeur, il remonte en petit (`floatingLabelStyle`, 13).
+ */
+export function FloatingLabel({ text, floating, restingTop }: { text: string; floating: boolean; restingTop: number }) {
+  const theme = useTheme();
+  const input = theme.inputDecorationTheme;
+  const progress = useRef(new Animated.Value(floating ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: floating ? 1 : 0,
+      duration: DURATION,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+  }, [floating, progress]);
+
+  const resting = input.labelStyle;
+  const floated = input.floatingLabelStyle;
+  return (
+    <Animated.Text
+      numberOfLines={1}
+      pointerEvents="none"
+      style={[
+        styles.label,
+        floated as TextStyle,
+        {
+          top: progress.interpolate({ inputRange: [0, 1], outputRange: [restingTop, FLOATING_TOP] }),
+          fontSize: progress.interpolate({ inputRange: [0, 1], outputRange: [resting.fontSize ?? 17, floated.fontSize ?? 13] }),
+          color: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [(resting.color as string) ?? '#8B887E', (floated.color as string) ?? '#615D52'],
+          }),
+        },
+      ]}
+    >
+      {text}
+    </Animated.Text>
+  );
+}
+
+/** Position du label remonté, depuis le haut du champ */
+export const FLOATING_TOP = 6;
+
+const styles = StyleSheet.create({
+  label: { position: 'absolute', left: 0, right: 0 },
+});

package/src/shared/widgets/frequence_input_widget.tsx

@@ -0,0 +1,80 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { useAppRouter } from '../../core/router';
+import { useTheme } from '../../core/theme';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { showModalBottomSheet } from '../material/overlays';
+import { Frequence, type FrequenceCommand } from '../models/frequence_command';
+import { FrequenceSelectWidget, frequenceText, periodiciteText } from './frequence_select_widget';
+import { CustomTextInput } from './input_text';
+
+const FREQUENCES = [Frequence.quotidienne, Frequence.hebdomadaire, Frequence.mensuelle, Frequence.annuelle];
+
+/** Champ fréquence d'une programmation ; ouvre le choix de la fréquence. */
+export function FrequenceInputWidget({
+  command,
+  onChange,
+  readOnly = false,
+  hideOnce = false,
+  hideCustom = false,
+}: {
+  command: FrequenceCommand;
+  onChange: (value: FrequenceCommand) => void;
+  readOnly?: boolean;
+  hideOnce?: boolean;
+  hideCustom?: boolean;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+
+  let text: string;
+  if (command.value != null && command.periodicite != null) {
+    text = traductions.transactionFormScheduleFrequenceSelected(
+      String(command.periodicite),
+      periodiciteText(traductions, command.value),
+    );
+  } else if (command.value != null) {
+    text = frequenceText(command.value, traductions);
+  } else {
+    // Pas de valeur : une seule fois
+    text = traductions.transactionFormScheduleFrequenceUnefois;
+  }
+
+  const select = () =>
+    void showModalBottomSheet(router, {
+      themed: true,
+      builder: () => (
+        <FrequenceSelectWidget
+          title={traductions.transactionFormScheduleFrequenceLabel}
+          command={command}
+          frequences={FREQUENCES}
+          onChange={onChange}
+          hideOnce={hideOnce}
+          hideCustom={hideCustom}
+        />
+      ),
+    });
+
+  // Sur-mesure choisi mais pas encore validé : rouvrir le choix de la périodicité
+  const pendingCustom = command.periodicite != null && !command.done;
+  useEffect(() => {
+    if (pendingCustom) select();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingCustom, command.periodicite]);
+
+  return (
+    <Pressable disabled={readOnly} onPress={select}>
+      <View pointerEvents="none">
+        <CustomTextInput
+          labelText={traductions.transactionFormScheduleFrequenceLabel}
+          value={text}
+          readOnly
+          suffixIcon={!readOnly ? <MaterialIcons name="keyboard-arrow-down" size={24} color={theme.colorScheme.onSurface} /> : null}
+        />
+      </View>
+    </Pressable>
+  );
+}