@pi-spi/app 0.0.0-stage → 1.2.0

package/src/pi_spi_sdk_entry.tsx

@@ -0,0 +1,315 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import {
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
+  NavigationIndependentTree,
+  type Theme as NavigationTheme,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Image } from 'expo-image';
+import { Component, useEffect, useMemo, useRef, useState, type ErrorInfo, type ReactNode } from 'react';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import { Images } from './core/assets';
+import { useBlocBuilder, BlocProvider } from './core/bloc_react';
+import { Di } from './core/di';
+import { AppLogger } from './core/logger';
+import type { PiSpiSdkConfig } from './core/pi_spi_sdk_config';
+import { AppRouter, RouteScreen, SdkRouterContext, type SdkRouter } from './core/router';
+import { appRoutes } from './core/routes';
+import { ThemeContext, Themer, type ThemeData } from './core/theme';
+import { AppLocalizationsProvider } from './l10n/localizations';
+import { lookupAppLocalizations } from './l10n/app_localizations';
+import { AliasBloc } from './modules/alias/presentation/bloc/alias_bloc';
+import { CategorieBloc } from './modules/categorie/presentation/bloc/categorie_bloc';
+import { ContactBloc } from './modules/contacts/presentation/bloc/contact_bloc';
+import { TransactionSendBloc } from './modules/transactions/presentation/bloc/transaction_send/transaction_send_bloc';
+import { CategorieListEvent } from './modules/categorie/presentation/bloc/categorie_event';
+import { ConfigBloc } from './modules/config/adapters/ui/bloc/config_bloc';
+import { ConfigLoadedState } from './modules/config/adapters/ui/bloc/config_state';
+import { ConfigKey } from './modules/config/domain/models/config_keys';
+import { ParametreHideAmountBloc } from './modules/profile/presentation/bloc/hide_amount/hide_amount_bloc';
+import { OverlayHost } from './shared/material/overlays';
+import { scaleDownSize } from './shared/utils/scale_down';
+import { SubscriptionListBloc } from './modules/subscription/presentation/bloc/subscription_list/subscription_list_bloc';
+import { InAppNotificationHost } from './modules/notification/presentation/pages/notification_in_app_overlay';
+import { SnackBarHost } from './shared/widgets/custom_snack_bar';
+
+const Stack = createNativeStackNavigator();
+
+type Booted = {
+  router: SdkRouter;
+  configBloc: ConfigBloc;
+  aliasBloc: AliasBloc;
+  hideAmountBloc: ParametreHideAmountBloc;
+  categorieBloc: CategorieBloc;
+  contactBloc: ContactBloc;
+  transactionSendBloc: TransactionSendBloc;
+  subscriptionListBloc: SubscriptionListBloc;
+};
+
+/**
+ * Point d'entrée du SDK PI-SPI.
+ *
+ * L'application hôte l'affiche comme un écran normal (via sa propre
+ * navigation, un `Modal`, ...) une fois l'utilisateur authentifié :
+ *
+ * ```tsx
+ * <Modal visible={open} animationType="slide" onRequestClose={() => setOpen(false)}>
+ *   <PiSpiSdkEntry config={myConfig} />
+ * </Modal>
+ * ```
+ *
+ * Le SDK héberge sa propre navigation interne (un `NavigationContainer`
+ * indépendant, qui ne perturbe pas celui de l'hôte s'il utilise lui aussi
+ * React Navigation), son propre thème et ses propres traductions : l'hôte
+ * n'a rien d'autre à déclarer.
+ */
+export function PiSpiSdkEntry({ config }: { config: PiSpiSdkConfig }) {
+  const [booted, setBooted] = useState<Booted | null>(null);
+  const [bootstrapError, setBootstrapError] = useState<unknown>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    let created: Booted | null = null;
+    (async () => {
+      try {
+        await Di.init(config);
+
+        // Comme dans l'app de référence : introduction puis demande de
+        // permission contacts, mais uniquement au tout premier lancement
+        // (tant que ConfigKey.introductionPassed n'a jamais été écrit).
+        const configInputPort = Di.getConfigInputPort();
+        const introductionPassed = configInputPort.recuperer().params[ConfigKey.introductionPassed] != null;
+        // Une fois l'introduction déjà passée (sessions suivantes), on
+        // saute directement à la sélection de compte si le client en a
+        // plusieurs, sinon à l'accueil.
+        const router = AppRouter.routes(
+          introductionPassed ? AppRouter.postOnboardingRoute() : AppRouter.introduction,
+          appRoutes(),
+        );
+        const configBloc = new ConfigBloc(configInputPort);
+        const aliasBloc = new AliasBloc(Di.getAliasInputPort());
+        const hideAmountBloc = new ParametreHideAmountBloc(configBloc);
+        const categorieBloc = new CategorieBloc(Di.getCategorieInputPort());
+        categorieBloc.add(new CategorieListEvent());
+        const contactBloc = new ContactBloc();
+        const transactionSendBloc = new TransactionSendBloc(
+          Di.getTransactionInputPort(),
+          Di.getCompteInputPort(),
+          Di.getParticipantInputPort(),
+          Di.getPermissionInputPort(),
+        );
+        const subscriptionListBloc = new SubscriptionListBloc(Di.getSubscriptionInputPort());
+        created = { router, configBloc, aliasBloc, hideAmountBloc, categorieBloc, contactBloc, transactionSendBloc, subscriptionListBloc };
+
+        // Les redirects (ex. vérification de l'alias avant /home) lisent
+        // les blocs globaux du SDK, comme `context.read` en Flutter.
+        const blocs = new Map<Function, unknown>([
+          [ConfigBloc, configBloc],
+          [AliasBloc, aliasBloc],
+        ]);
+        router.redirectContext = {
+          read: (type) => {
+            const bloc = blocs.get(type);
+            if (!bloc) throw new Error(`Aucun ${type.name} global dans le SDK.`);
+            return bloc as never;
+          },
+        };
+        // Comme le loader affiché derrière le Router en Flutter : on attend
+        // que la route initiale (et ses éventuels redirects, qui peuvent
+        // faire une vraie requête réseau) soit résolue avant d'afficher le
+        // navigateur.
+        await router.resolveInitial();
+
+        if (mounted) setBooted(created);
+      } catch (error) {
+        // Sans ce catch, une erreur ici (préférences, stockage sécurisé,
+        // ...) resterait silencieuse : l'écran de chargement s'afficherait
+        // indéfiniment sans jamais indiquer pourquoi.
+        console.error('PiSpiSdkEntry bootstrap failed', error);
+        AppLogger.report(error);
+        if (mounted) setBootstrapError(error);
+      }
+    })();
+    return () => {
+      mounted = false;
+      // Effet rejoué (StrictMode, rechargement à chaud) ou nouvelle config :
+      // on repasse sur le loader avant de fermer les blocs de cette
+      // instance, pour qu'aucun écran ne s'en serve une fois fermés.
+      const closing = created;
+      setBooted((current) => (current === closing ? null : current));
+      setBootstrapError(null);
+      closing?.configBloc.close();
+      closing?.aliasBloc.close();
+      closing?.hideAmountBloc.close();
+      closing?.categorieBloc.close();
+      closing?.contactBloc.close();
+      closing?.transactionSendBloc.close();
+      closing?.subscriptionListBloc.close();
+    };
+  }, [config]);
+
+  let content: ReactNode;
+  if (bootstrapError != null) {
+    content = (
+      // Fond blanc fixe : tant que le SDK n'est pas initialisé, son thème
+      // n'est pas encore chargé.
+      <View style={[styles.center, { backgroundColor: Themer.whiteColor }]}>
+        <MaterialIcons name="error-outline" size={48} color="red" />
+        <Text style={styles.errorTitle}>Impossible d'initialiser le SDK PI-SPI</Text>
+        <Text style={styles.errorDetail}>{String(bootstrapError)}</Text>
+      </View>
+    );
+  } else if (booted == null) {
+    content = <LoadingLogo backgroundColor={Themer.whiteColor} />;
+  } else {
+    content = <SdkShell config={config} booted={booted} />;
+  }
+  return <SafeAreaProvider>{content}</SafeAreaProvider>;
+}
+
+function SdkShell({ config, booted }: { config: PiSpiSdkConfig; booted: Booted }) {
+  const { router, configBloc, aliasBloc, hideAmountBloc, categorieBloc, contactBloc, transactionSendBloc, subscriptionListBloc } = booted;
+  const systemScheme = useColorScheme();
+
+  // Le thème ne change qu'à la modification de la préférence de thème,
+  // comme le `buildWhen` du BlocBuilder<ConfigBloc> de Flutter.
+  const configState = useBlocBuilder(
+    configBloc,
+    (_previous, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.preferedTheme,
+  );
+  const theme = Themer.get(configState.configParams.params[ConfigKey.preferedTheme], systemScheme);
+  const navigationTheme = useMemo(() => toNavigationTheme(theme), [theme]);
+
+  return (
+    <SdkErrorBoundary locale={config.appConfig.defaultLocale} theme={theme}>
+      <BlocProvider blocs={[configBloc, aliasBloc, hideAmountBloc, categorieBloc, contactBloc, transactionSendBloc, subscriptionListBloc]}>
+        <ThemeContext.Provider value={theme}>
+          {/* La langue du SDK est imposée par l'hôte (defaultLocale) : le
+              SDK n'a pas son propre sélecteur de langue. */}
+          <AppLocalizationsProvider locale={config.appConfig.defaultLocale}>
+            <SdkRouterContext.Provider value={router}>
+              <View style={styles.flex}>
+                <SdkNavigator router={router} theme={theme} navigationTheme={navigationTheme} />
+                {/* Feuilles du bas et dialogues, par-dessus tous les écrans */}
+                <OverlayHost />
+                <SnackBarHost />
+                {/* Notifications reçues pendant que le SDK est ouvert */}
+                <InAppNotificationHost />
+              </View>
+            </SdkRouterContext.Provider>
+          </AppLocalizationsProvider>
+        </ThemeContext.Provider>
+      </BlocProvider>
+    </SdkErrorBoundary>
+  );
+}
+
+function SdkNavigator({
+  router,
+  theme,
+  navigationTheme,
+}: {
+  router: SdkRouter;
+  theme: ThemeData;
+  navigationTheme: NavigationTheme;
+}) {
+  // L'état initial n'est lu qu'au premier rendu (comme `initialLocation`).
+  const initialState = useRef(
+    router.initialState ? { index: 0, routes: [{ name: router.initialState.name, params: router.initialState.params }] } : undefined,
+  ).current;
+
+  return (
+    <NavigationIndependentTree>
+      <NavigationContainer ref={router.navigationRef} theme={navigationTheme} initialState={initialState}>
+        <Stack.Navigator
+          screenOptions={{
+            headerShown: false,
+            animation: 'slide_from_right',
+            contentStyle: { backgroundColor: theme.scaffoldBackgroundColor },
+          }}
+        >
+          {router.screens.map((def) => (
+            <Stack.Screen
+              key={def.path}
+              name={def.path}
+              component={RouteScreen}
+              options={
+                def.kind === 'dialog'
+                  ? { presentation: 'transparentModal', animation: 'slide_from_right', contentStyle: styles.transparent }
+                  : undefined
+              }
+            />
+          ))}
+        </Stack.Navigator>
+      </NavigationContainer>
+    </NavigationIndependentTree>
+  );
+}
+
+function toNavigationTheme(theme: ThemeData): NavigationTheme {
+  const base = theme.brightness === 'dark' ? DarkTheme : DefaultTheme;
+  return {
+    ...base,
+    colors: {
+      ...base.colors,
+      primary: theme.colorScheme.primary,
+      background: theme.scaffoldBackgroundColor,
+      card: theme.appBarTheme.backgroundColor,
+      text: theme.appBarTheme.foregroundColor,
+    },
+  };
+}
+
+function LoadingLogo({ backgroundColor }: { backgroundColor: string }) {
+  return (
+    <View style={[styles.center, { backgroundColor }]}>
+      {/* 100 × 100 sans agrandissement, comme Image.asset en Flutter (GIF de 64 px) */}
+      <Image source={Images.gifLogoLoading} style={scaleDownSize(Images.gifLogoLoading, 100)} contentFit="contain" />
+    </View>
+  );
+}
+
+/**
+ * Transmet à l'hôte (`PiSpiLogConfig.onError`) toute erreur de rendu d'un
+ * écran du SDK, sans jamais faire planter l'application hôte (équivalent
+ * de `onFlutterError`).
+ */
+class SdkErrorBoundary extends Component<
+  { children: ReactNode; locale: string; theme: ThemeData },
+  { error: unknown }
+> {
+  state = { error: null as unknown };
+
+  static getDerivedStateFromError(error: unknown) {
+    return { error };
+  }
+
+  componentDidCatch(error: unknown, info: ErrorInfo) {
+    console.error('PI-SPI SDK render error', error, info.componentStack);
+    AppLogger.report(error);
+  }
+
+  render() {
+    if (this.state.error == null) return this.props.children;
+    const { theme, locale } = this.props;
+    const t = lookupAppLocalizations(locale);
+    return (
+      <View style={[styles.center, { backgroundColor: theme.scaffoldBackgroundColor }]}>
+        <MaterialIcons name="error-outline" size={48} color={theme.colorScheme.error} />
+        <Text style={[theme.textTheme.bodyLarge, styles.errorTitle]}>{t.erreurInattendue}</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+  errorTitle: { marginTop: 16, textAlign: 'center' },
+  errorDetail: { marginTop: 8, textAlign: 'center', fontSize: 12 },
+  transparent: { backgroundColor: 'transparent' },
+});

package/src/shared/material/buttons.tsx

@@ -0,0 +1,153 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+/**
+ * Équivalents de `ElevatedButton` et `TextButton` (Material), stylés comme
+ * `elevatedButtonTheme` / `textButtonTheme` des thèmes du SDK Flutter.
+ * Un bouton sans `onPress` est désactivé, comme en Flutter.
+ */
+
+type ButtonProps = {
+  onPress?: () => void;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+};
+
+export function ElevatedButton({ onPress, children, style, textStyle, accessibilityLabel }: ButtonProps) {
+  const t = useTheme().elevatedButtonTheme;
+  const disabled = onPress == null;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.elevated,
+        {
+          minHeight: t.minHeight,
+          borderRadius: t.borderRadius,
+          backgroundColor: disabled ? t.disabledBackgroundColor : pressed ? t.pressedBackgroundColor : t.backgroundColor,
+        },
+        style,
+      ]}
+    >
+      {typeof children === 'string' ? (
+        <Text style={[t.textStyle, { color: disabled ? t.disabledForegroundColor : t.foregroundColor }, textStyle]}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+export function TextButton({ onPress, children, style, textStyle, accessibilityLabel }: ButtonProps) {
+  const t = useTheme().textButtonTheme;
+  const disabled = onPress == null;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.text,
+        { minWidth: t.minWidth, minHeight: t.minHeight },
+        pressed ? { backgroundColor: t.overlayColor, opacity: 0.85 } : null,
+        style,
+      ]}
+    >
+      {typeof children === 'string' ? (
+        <Text style={[t.textStyle, disabled ? styles.disabledText : null, textStyle]}>{children}</Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+/**
+ * Équivalent de `FilledButton.tonal` (Material 3) : fond secondaire du
+ * thème, texte au style de `filledButtonTheme`.
+ */
+export function FilledTonalButton({ onPress, children, style, textStyle, accessibilityLabel }: ButtonProps) {
+  const theme = useTheme();
+  const t = theme.filledButtonTheme;
+  const disabled = onPress == null;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.elevated,
+        {
+          minHeight: t.minHeight,
+          borderRadius: t.borderRadius,
+          backgroundColor: theme.colorScheme.secondary,
+          opacity: disabled ? 0.38 : pressed ? 0.8 : 1,
+        },
+        style,
+      ]}
+    >
+      {typeof children === 'string' ? (
+        <Text style={[t.textStyle, { color: disabled ? t.disabledForegroundColor : t.foregroundColor }, textStyle]}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+/**
+ * Équivalent de `TextButton.icon` : icône puis libellé, à la couleur du
+ * bouton texte (grisés si [onPress] est absent).
+ */
+export function TextButtonIcon({
+  onPress,
+  icon,
+  label,
+  style,
+  textStyle,
+}: {
+  onPress?: () => void;
+  icon: ReactNode;
+  label: string;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}) {
+  const t = useTheme().textButtonTheme;
+  const disabled = onPress == null;
+  return (
+    <TextButton onPress={onPress} style={[styles.textIcon, style]}>
+      <View style={styles.row}>
+        {icon}
+        <View style={styles.gap8} />
+        <Text numberOfLines={1} style={[t.textStyle, disabled ? styles.disabledText : null, textStyle]}>
+          {label}
+        </Text>
+      </View>
+    </TextButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  textIcon: { paddingHorizontal: 12 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  gap8: { width: 8 },
+  elevated: { alignSelf: 'stretch', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16 },
+  text: { alignItems: 'center', justifyContent: 'center', borderRadius: 8 },
+  disabledText: { opacity: 0.38 },
+});

package/src/shared/material/card.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+/** Équivalent de `Card` (Material), stylé comme `cardTheme` des thèmes du SDK. */
+export function Card({ children, style }: { children?: ReactNode; style?: StyleProp<ViewStyle> }) {
+  const card = useTheme().cardTheme;
+  return (
+    <View style={[styles.card, { backgroundColor: card.color, borderRadius: card.borderRadius }, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { margin: 4, overflow: 'hidden' },
+});

package/src/shared/material/divider.tsx

@@ -0,0 +1,19 @@
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+/** Équivalent de `Divider` (Material) : trait fin de 16 px de hauteur totale. */
+export function Divider({ height = 16, color }: { height?: number; color?: string }) {
+  const theme = useTheme();
+  const lineColor = color ?? (theme.brightness === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.12)');
+  return (
+    <View style={[styles.box, { height }]}>
+      <View style={[styles.line, { backgroundColor: lineColor }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { justifyContent: 'center', alignSelf: 'stretch' },
+  line: { height: StyleSheet.hairlineWidth * 2 },
+});

package/src/shared/material/dropdown.tsx

@@ -0,0 +1,78 @@
+import { Pressable, ScrollView, StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+
+import { useAppRouter } from '../../core/router';
+import { useTheme } from '../../core/theme';
+import { showDialog } from './overlays';
+
+export type DropdownItem<T> = { value: T; label: string };
+
+/**
+ * Équivalent minimal de `DropdownButton` (Material) : affiche la valeur
+ * courante ; un tap ouvre la liste des choix dans un dialogue.
+ */
+export function DropdownButton<T>({
+  value,
+  items,
+  onChanged,
+  style,
+  textStyle,
+}: {
+  value: T | undefined;
+  items: DropdownItem<T>[];
+  onChanged: (value: T) => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}) {
+  const router = useAppRouter();
+  const theme = useTheme();
+  const current = items.find((item) => item.value === value);
+
+  const open = async () => {
+    const selected = await showDialog<DropdownItem<T>>(router, {
+      builder: () => <DropdownMenu items={items} value={value} onSelect={(item) => router.pop(item)} />,
+    });
+    if (selected) onChanged(selected.value);
+  };
+
+  return (
+    <Pressable accessibilityRole="button" onPress={open} style={[styles.button, style]}>
+      <Text style={[theme.textTheme.bodyLarge, textStyle]}>{current?.label ?? ''}</Text>
+    </Pressable>
+  );
+}
+
+function DropdownMenu<T>({
+  items,
+  value,
+  onSelect,
+}: {
+  items: DropdownItem<T>[];
+  value: T | undefined;
+  onSelect: (item: DropdownItem<T>) => void;
+}) {
+  const theme = useTheme();
+  return (
+    <View style={[styles.menu, { backgroundColor: theme.colorScheme.surface }]}>
+      <ScrollView>
+        {items.map((item, i) => (
+          <Pressable
+            key={i}
+            onPress={() => onSelect(item)}
+            style={({ pressed }) => [
+              styles.item,
+              item.value === value || pressed ? { backgroundColor: theme.cardColor } : null,
+            ]}
+          >
+            <Text style={theme.textTheme.bodyLarge}>{item.label}</Text>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: { minWidth: 100, minHeight: 48, justifyContent: 'center' },
+  menu: { marginHorizontal: 55, borderRadius: 12, maxHeight: 420, overflow: 'hidden', paddingVertical: 8 },
+  item: { paddingHorizontal: 20, paddingVertical: 14 },
+});