@pi-spi/app 0.0.0-stage → 1.2.1

package/src/core/theme.ts

@@ -0,0 +1,525 @@
+import { createContext, useContext } from 'react';
+import { Appearance, type ColorSchemeName, type TextStyle } from 'react-native';
+
+import type { AppLocalizations } from '../l10n/app_localizations';
+
+/** Thèmes du SDK. La valeur de chaque membre est sa codification (persistée dans les préférences). */
+export enum Themes {
+  system = 'System',
+  light = 'lightTheme',
+  dark = 'darkTheme',
+  yellow = 'yellowTheme',
+  green = 'greenTheme',
+  blue = 'blueTheme',
+  red = 'redTheme',
+  orange = 'orangeTheme',
+  purple = 'purpleTheme',
+  pink = 'pinkTheme',
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace Themes {
+  /** Thème correspondant à [code] (`Themes.light` si inconnu ou absent). */
+  export function fromCode(code: string | null | undefined): Themes {
+    if (code == null) return Themes.light;
+    return (list() as string[]).includes(code) ? (code as Themes) : Themes.light;
+  }
+
+  export function list(): Themes[] {
+    return [
+      Themes.system,
+      Themes.light,
+      Themes.dark,
+      Themes.yellow,
+      Themes.green,
+      Themes.blue,
+      Themes.red,
+      Themes.orange,
+      Themes.purple,
+      Themes.pink,
+    ];
+  }
+
+  /** Libellé traduit du thème. */
+  export function label(theme: Themes, traductions: AppLocalizations): string {
+    switch (theme) {
+      case Themes.light:
+        return traductions.appSettingPageMenuThemeLight;
+      case Themes.dark:
+        return traductions.appSettingPageMenuThemeDark;
+      case Themes.yellow:
+        return traductions.appSettingPageMenuThemeYellow;
+      case Themes.green:
+        return traductions.appSettingPageMenuThemeGreen;
+      case Themes.blue:
+        return traductions.appSettingPageMenuThemeBlue;
+      case Themes.red:
+        return traductions.appSettingPageMenuThemeRed;
+      case Themes.orange:
+        return traductions.appSettingPageMenuThemeOrange;
+      case Themes.purple:
+        return traductions.appSettingPageMenuThemePurple;
+      case Themes.pink:
+        return traductions.appSettingPageMenuThemePink;
+      default:
+        return traductions.appSettingPageMenuThemeDefault;
+    }
+  }
+}
+
+export type Brightness = 'light' | 'dark';
+
+export interface ColorScheme {
+  brightness: Brightness;
+  primary: string;
+  onPrimary: string;
+  secondary: string;
+  onSecondary: string;
+  tertiary: string;
+  onTertiary: string;
+  error: string;
+  onError: string;
+  surface: string;
+  onSurface: string;
+}
+
+/** Styles de texte, mêmes noms que le `TextTheme` Material des écrans Flutter. */
+export interface TextTheme {
+  /** Default / Regular / LargeTitle (Semi) */
+  titleLarge: TextStyle;
+  /** Default / Regular / LargeTitle */
+  titleMedium: TextStyle;
+  /** Default / Regular / Title1 (Semi) */
+  titleSmall: TextStyle;
+  headlineLarge: TextStyle;
+  headlineMedium: TextStyle;
+  /** Default / Regular / Body (Med) / Headline */
+  headlineSmall: TextStyle;
+  /** Default / Regular / Body */
+  bodyLarge: TextStyle;
+  bodyMedium: TextStyle;
+  /** Subheadline (med) */
+  bodySmall: TextStyle;
+  /** Subheadline */
+  displayLarge: TextStyle;
+  displayMedium: TextStyle;
+  /** Default / Regular / Footnote */
+  displaySmall: TextStyle;
+  labelLarge: TextStyle;
+  labelMedium: TextStyle;
+}
+
+/**
+ * Équivalent React Native du `ThemeData` Material des thèmes Flutter du
+ * SDK : uniquement les propriétés réellement utilisées par ses écrans.
+ * Accessible dans les composants via {@link useTheme} (≈ `Theme.of(context)`).
+ */
+export interface ThemeData {
+  brightness: Brightness;
+  primaryColor: string;
+  primaryColorDark: string;
+  secondaryHeaderColor: string;
+  cardColor: string;
+  scaffoldBackgroundColor: string;
+  dialogSurfaceTintColor: string;
+  colorScheme: ColorScheme;
+  appBarTheme: { backgroundColor: string; foregroundColor: string };
+  primaryIconColor: string;
+  textTheme: TextTheme;
+  cardTheme: { color: string; borderRadius: number };
+  bottomSheetTheme: { backgroundColor: string; borderTopRadius: number };
+  inputDecorationTheme: {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    fillColor: string;
+    borderRadius: number;
+    focusedBorderColor: string;
+    errorBorderColor: string;
+    floatingLabelStyle: TextStyle;
+    labelStyle: TextStyle;
+    hintStyle: TextStyle;
+    errorStyle: TextStyle;
+    errorMaxLines: number;
+    suffixIconColor: string;
+  };
+  elevatedButtonTheme: {
+    backgroundColor: string;
+    pressedBackgroundColor: string;
+    disabledBackgroundColor: string;
+    foregroundColor: string;
+    disabledForegroundColor: string;
+    minHeight: number;
+    borderRadius: number;
+    textStyle: TextStyle;
+  };
+  textButtonTheme: {
+    foregroundColor: string;
+    overlayColor: string;
+    textStyle: TextStyle;
+    minWidth: number;
+    minHeight: number;
+  };
+  switchTheme: { thumbColor: string; activeTrackColor: string; inactiveTrackColor: string };
+  filledButtonTheme: {
+    foregroundColor: string;
+    disabledForegroundColor: string;
+    minHeight: number;
+    borderRadius: number;
+    textStyle: TextStyle;
+  };
+  snackBarTheme: { backgroundColor: string; margin: number };
+  checkboxTheme: { borderRadius: number; checkColor: string; borderColor: string; borderWidth: number };
+  chipTheme: { borderRadius: number; labelStyle: TextStyle };
+}
+
+/** Valeurs qui varient d'un thème à l'autre (le reste est commun, comme dans theme.dart). */
+type ThemeSpec = {
+  dark: boolean;
+  primaryColor: string;
+  primaryColorDark: string;
+  secondaryHeaderColor: string;
+  schemePrimary: string;
+  schemeOnPrimary: string;
+  schemeSecondary: string;
+  schemeTertiary: string;
+  iconColor: string;
+  focusedBorderColor: string;
+  buttonPressed: string;
+  buttonBackground: string;
+  buttonForeground: string;
+  textButtonColor: string;
+  textButtonOverlay: string;
+  switchActiveTrack: string;
+};
+
+const fontSize = (size: number, weight: TextStyle['fontWeight'], height?: number): TextStyle => ({
+  fontSize: size,
+  fontWeight: weight,
+  ...(height != null ? { lineHeight: Math.round(size * height) } : {}),
+});
+
+export class Themer {
+  /** Constructeur privé : la classe n'est jamais instanciée. */
+  private constructor() {}
+
+  /** Couleur blanche */
+  static readonly whiteColor = '#FFFFFF';
+
+  /** Couleur noire */
+  static readonly blackColor = '#000000';
+
+  /** Couleur marron */
+  static readonly brownColor = '#542D00';
+
+  /** Couleur jaune */
+  static readonly amberColor = '#F2A900';
+
+  /** Couleur neural 01 */
+  static readonly neural01Color = '#E6E4E2';
+
+  /** Couleur neural 02 */
+  static readonly neural02Color = '#BDBDBB';
+
+  /** Couleur neural 03 */
+  static readonly neural03Color = '#8B887E';
+
+  /** Couleur neural 04 */
+  static readonly neural04Color = '#615D52';
+
+  /** Couleur neural 05 */
+  static readonly neural05Color = '#5C5451';
+
+  /** Primary */
+  static readonly primary = '#F2A900';
+
+  /** Primary Light */
+  static readonly primaryLight = '#F9EBC2';
+
+  /** Primary Dark */
+  static readonly primaryDark = '#C08507';
+
+  /** Couleur primaire bordure */
+  static readonly primaryStroke = '#FFD573';
+
+  /** System/error */
+  static readonly systemErrorColor = '#FA5A25';
+
+  /** System blue for cancel btn */
+  static readonly systemBlueColor = '#007AFF';
+
+  static readonly successColor = '#46A93D';
+
+  /** Gray */
+  static readonly gray = '#A1A5AC';
+
+  /** primary btn height */
+  static readonly btnNormalHeight = 56;
+  /** primary small btn height */
+  static readonly btnSmallHeight = 38;
+
+  private static build(spec: ThemeSpec): ThemeData {
+    const T = Themer;
+    const dark = spec.dark;
+    const textColor = dark ? T.whiteColor : T.blackColor;
+    const onColor = dark ? T.whiteColor : T.blackColor;
+    const surface = dark ? '#181612' : T.whiteColor;
+    const card = dark ? '#23211D' : '#FAF8F6';
+    const text = (style: TextStyle): TextStyle => ({ color: textColor, ...style });
+
+    return {
+      brightness: dark ? 'dark' : 'light',
+      primaryColor: spec.primaryColor,
+      primaryColorDark: spec.primaryColorDark,
+      secondaryHeaderColor: spec.secondaryHeaderColor,
+      cardColor: card,
+      scaffoldBackgroundColor: dark ? '#2E2B26' : T.whiteColor,
+      dialogSurfaceTintColor: dark ? '#2E2B26' : T.whiteColor,
+      colorScheme: {
+        brightness: dark ? 'dark' : 'light',
+        primary: spec.schemePrimary,
+        onPrimary: spec.schemeOnPrimary,
+        secondary: spec.schemeSecondary,
+        onSecondary: onColor,
+        tertiary: spec.schemeTertiary,
+        onTertiary: onColor,
+        error: T.systemErrorColor,
+        onError: onColor,
+        surface,
+        onSurface: onColor,
+      },
+      appBarTheme: {
+        backgroundColor: dark ? '#23211D' : T.whiteColor,
+        foregroundColor: textColor,
+      },
+      primaryIconColor: spec.iconColor,
+      textTheme: {
+        titleLarge: text(fontSize(32, '600')),
+        titleMedium: text(fontSize(32, '400')),
+        titleSmall: text(fontSize(28, '600')),
+        headlineLarge: text(fontSize(22, '600')),
+        headlineMedium: text(fontSize(20, '600')),
+        headlineSmall: text(fontSize(17, '500', 1.53)),
+        bodyLarge: text(fontSize(17, '400', 1.5)),
+        bodyMedium: text(fontSize(16, '400')),
+        bodySmall: text(fontSize(15, '500')),
+        displayLarge: text(fontSize(15, '400', 1.4)),
+        displayMedium: text(fontSize(13, '500')),
+        displaySmall: { ...text(fontSize(13, '400', 1.4)), color: T.neural04Color },
+        labelLarge: text(fontSize(12, '400')),
+        labelMedium: text(fontSize(11, '400')),
+      },
+      cardTheme: { color: card, borderRadius: 20 },
+      bottomSheetTheme: { backgroundColor: surface, borderTopRadius: 15 },
+      inputDecorationTheme: {
+        paddingHorizontal: 16,
+        paddingVertical: 5,
+        fillColor: dark ? '#333333' : '#FAF8F6',
+        borderRadius: 10,
+        focusedBorderColor: spec.focusedBorderColor,
+        errorBorderColor: T.systemErrorColor,
+        floatingLabelStyle: { color: dark ? '#9E9E9E' : T.neural04Color, fontSize: 13, fontWeight: '400' },
+        labelStyle: { color: dark ? '#9E9E9E' : T.neural03Color, fontSize: 17 },
+        hintStyle: { color: dark ? '#EEEEEE' : T.neural02Color, fontSize: 17 },
+        errorStyle: { color: T.systemErrorColor, fontSize: 12 },
+        errorMaxLines: 3,
+        suffixIconColor: dark ? '#B1ADA0' : '#8B887E',
+      },
+      elevatedButtonTheme: {
+        backgroundColor: spec.buttonBackground,
+        pressedBackgroundColor: spec.buttonPressed,
+        disabledBackgroundColor: dark ? '#2E2E2E' : '#F5F5F1',
+        foregroundColor: spec.buttonForeground,
+        disabledForegroundColor: dark ? '#B1ADA0' : T.neural03Color,
+        minHeight: T.btnNormalHeight,
+        borderRadius: 20,
+        textStyle: { color: spec.buttonForeground, fontSize: 17, fontWeight: '600' },
+      },
+      textButtonTheme: {
+        foregroundColor: spec.textButtonColor,
+        overlayColor: spec.textButtonOverlay,
+        textStyle: { color: spec.textButtonColor, fontSize: 17, fontWeight: '400' },
+        minWidth: 55,
+        minHeight: 26,
+      },
+      switchTheme: {
+        thumbColor: dark ? '#23211D' : T.whiteColor,
+        activeTrackColor: spec.switchActiveTrack,
+        inactiveTrackColor: dark ? T.neural04Color : T.neural01Color,
+      },
+      filledButtonTheme: {
+        foregroundColor: textColor,
+        disabledForegroundColor: dark ? '#B1ADA0' : T.neural03Color,
+        minHeight: T.btnNormalHeight,
+        borderRadius: 20,
+        textStyle: { color: textColor, fontSize: 17, fontWeight: '600' },
+      },
+      snackBarTheme: { backgroundColor: T.systemErrorColor, margin: 10 },
+      checkboxTheme: {
+        borderRadius: 6,
+        checkColor: dark ? '#181612' : T.whiteColor,
+        borderColor: T.neural02Color,
+        borderWidth: 2,
+      },
+      chipTheme: { borderRadius: 16, labelStyle: { color: textColor, fontSize: 14, fontWeight: '500' } },
+    };
+  }
+
+  /** Thème par défaut : jaune PI-SPI sur fond blanc */
+  private static readonly defaultSpec: ThemeSpec = {
+    dark: false,
+    primaryColor: Themer.primary,
+    primaryColorDark: Themer.primaryDark,
+    secondaryHeaderColor: Themer.primaryLight,
+    schemePrimary: Themer.primary,
+    schemeOnPrimary: Themer.blackColor,
+    schemeSecondary: Themer.primaryLight,
+    schemeTertiary: Themer.primaryStroke,
+    iconColor: Themer.primary,
+    focusedBorderColor: Themer.primary,
+    buttonPressed: '#E1A009',
+    buttonBackground: Themer.primary,
+    buttonForeground: Themer.blackColor,
+    textButtonColor: Themer.primaryDark,
+    textButtonOverlay: Themer.primaryLight,
+    switchActiveTrack: Themer.primary,
+  };
+
+  /** Variante claire monochrome (même structure pour jaune, bleu, vert, rouge, orange, violet). */
+  private static coloredSpec(
+    main: string,
+    secondary: string,
+    tertiary: string,
+    options: Partial<ThemeSpec> = {},
+  ): ThemeSpec {
+    return {
+      ...Themer.defaultSpec,
+      primaryColor: main,
+      primaryColorDark: main,
+      secondaryHeaderColor: secondary,
+      schemePrimary: main,
+      schemeSecondary: secondary,
+      schemeTertiary: tertiary,
+      iconColor: main,
+      focusedBorderColor: main,
+      buttonPressed: main,
+      buttonBackground: main,
+      textButtonColor: main,
+      textButtonOverlay: main,
+      switchActiveTrack: main,
+      ...options,
+    };
+  }
+
+  /** Light theme data */
+  static readonly lightTheme: ThemeData = Themer.build(Themer.defaultSpec);
+
+  /** Dark theme */
+  static readonly darkTheme: ThemeData = Themer.build({
+    ...Themer.defaultSpec,
+    dark: true,
+    secondaryHeaderColor: Themer.primaryStroke,
+    schemeOnPrimary: Themer.whiteColor,
+    schemeSecondary: Themer.primaryStroke,
+    buttonForeground: Themer.whiteColor,
+  });
+
+  /** Light Yellow theme data */
+  static readonly lightYellowTheme: ThemeData = Themer.build(
+    Themer.coloredSpec('#F3DC88', '#FAF0C8', '#F6E5A8', { textButtonOverlay: Themer.primaryLight }),
+  );
+
+  /** Light Blue theme data */
+  static readonly lightBlueTheme: ThemeData = Themer.build(
+    Themer.coloredSpec('#3B63DB', '#A5B9F7', '#7390E6', { schemeOnPrimary: Themer.whiteColor }),
+  );
+
+  /** Light Green theme data */
+  static readonly lightGreenTheme: ThemeData = Themer.build(
+    Themer.coloredSpec('#9FF796', '#D9FDD6', '#BAFAB6', {
+      primaryColor: '#7FC077',
+      primaryColorDark: '#7FC077',
+      buttonPressed: '#E1A009',
+      textButtonColor: '#7FC077',
+      textButtonOverlay: '#7FC077',
+    }),
+  );
+
+  /** Light Red theme data */
+  static readonly lightRedTheme: ThemeData = Themer.build(
+    Themer.coloredSpec('#C62828', '#F9CFCF', '#E57373', {
+      schemeOnPrimary: Themer.whiteColor,
+      buttonPressed: '#B71C1C',
+      buttonForeground: Themer.whiteColor,
+    }),
+  );
+
+  /** Light Orange theme data */
+  static readonly lightOrangeTheme: ThemeData = Themer.build(
+    Themer.coloredSpec('#EF6C00', '#FFE0B2', '#FFB74D', {
+      schemeOnPrimary: Themer.whiteColor,
+      buttonPressed: '#E65100',
+      buttonForeground: Themer.whiteColor,
+    }),
+  );
+
+  /** Light Purple theme data */
+  static readonly lightPurpleTheme: ThemeData = Themer.build(
+    Themer.coloredSpec('#6A1B9A', '#E1BEE7', '#BA68C8', {
+      schemeOnPrimary: Themer.whiteColor,
+      buttonPressed: '#4A148C',
+      buttonForeground: Themer.whiteColor,
+    }),
+  );
+
+  /** Light Pink theme data */
+  static readonly lightPinkTheme: ThemeData = Themer.build(
+    Themer.coloredSpec('#AD1457', '#F8BBD0', '#F06292', {
+      schemeOnPrimary: Themer.whiteColor,
+      buttonPressed: '#880E4F',
+      buttonForeground: Themer.whiteColor,
+    }),
+  );
+
+  /**
+   * Méthode qui retourne un thème demandé. Pour `Themes.system`,
+   * [systemScheme] (ex. `useColorScheme()`) prime sur la valeur lue
+   * ponctuellement via `Appearance`.
+   */
+  static get(code: string | null | undefined, systemScheme?: ColorSchemeName | null): ThemeData {
+    switch (code) {
+      case Themes.light:
+        return Themer.lightTheme;
+      case Themes.dark:
+        return Themer.darkTheme;
+      case Themes.yellow:
+        return Themer.lightYellowTheme;
+      case Themes.green:
+        return Themer.lightGreenTheme;
+      case Themes.blue:
+        return Themer.lightBlueTheme;
+      case Themes.red:
+        return Themer.lightRedTheme;
+      case Themes.orange:
+        return Themer.lightOrangeTheme;
+      case Themes.purple:
+        return Themer.lightPurpleTheme;
+      case Themes.pink:
+        return Themer.lightPinkTheme;
+      // Système
+      case Themes.system: {
+        const brightness = systemScheme === 'light' || systemScheme === 'dark' ? systemScheme : Appearance.getColorScheme();
+        return brightness === 'dark' ? Themer.darkTheme : Themer.lightTheme;
+      }
+      // Default theme
+      default:
+        return Themer.lightTheme;
+    }
+  }
+}
+
+export const ThemeContext = createContext<ThemeData>(Themer.lightTheme);
+
+/** Thème courant du SDK (≈ `Theme.of(context)`). */
+export function useTheme(): ThemeData {
+  return useContext(ThemeContext);
+}

package/src/core/value_notifier.ts

@@ -0,0 +1,39 @@
+import { useSyncExternalStore } from 'react';
+
+/** Équivalent de `ValueNotifier<T>` (Flutter) : une valeur observable. */
+export class ValueNotifier<T> {
+  private current: T;
+  private readonly listeners = new Set<() => void>();
+
+  constructor(value: T) {
+    this.current = value;
+  }
+
+  get value(): T {
+    return this.current;
+  }
+
+  set value(newValue: T) {
+    if (Object.is(newValue, this.current)) return;
+    this.current = newValue;
+    for (const listener of [...this.listeners]) listener();
+  }
+
+  addListener(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.removeListener(listener);
+  }
+
+  removeListener(listener: () => void): void {
+    this.listeners.delete(listener);
+  }
+}
+
+/** Valeur courante de [notifier], avec re-rendu à chaque changement (≈ `ValueListenableBuilder`). */
+export function useValueListenable<T>(notifier: ValueNotifier<T>): T {
+  return useSyncExternalStore(
+    (onChange) => notifier.addListener(onChange),
+    () => notifier.value,
+    () => notifier.value,
+  );
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+/**
+ * SDK React Native permettant d'intégrer PI-SPI (transactions, QR Code,
+ * alias, souscriptions, notifications, profil) dans une application mobile
+ * existante, sans reprendre l'app de référence dans son ensemble.
+ *
+ * L'authentification (login, PIN, biométrie) n'est pas gérée par ce SDK :
+ * l'application hôte authentifie son utilisateur, puis fournit au SDK un
+ * {@link PiSpiSdkConfig} (identité utilisateur, token d'accès, callbacks)
+ * via {@link PiSpiSdkEntry}.
+ *
+ * Mêmes exports publics que le package Flutter `bceao_pispi_app`.
+ */
+export { PiSpiPush } from './core/pi_spi_push';
+export {
+  PiSpiSdkConfig,
+  PiSpiUserIdentity,
+  PiSpiCompte,
+  PiSpiApiConfig,
+  PiSpiAppConfig,
+  PiSpiIdentificationConfig,
+  PiSpiLogConfig,
+  type PiSpiLogLevel,
+} from './core/pi_spi_sdk_config';
+export { Themes } from './core/theme';
+export {
+  type AppLocalizations,
+  type SupportedLocaleCode,
+  supportedLocales,
+  lookupAppLocalizations,
+} from './l10n/app_localizations';
+export { PiSpiSdkEntry } from './pi_spi_sdk_entry';