@pi-spi/app 1.5.1 → 2.0.0

package/src/shared/utils/color.ts

@@ -0,0 +1,14 @@
+/**
+ * Équivalent de `Color.withValues(alpha:)` : la couleur [color] avec
+ * l'opacité [alpha] (0 à 1). Accepte `#RGB`, `#RRGGBB` et `#RRGGBBAA` ;
+ * toute autre forme est rendue telle quelle.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  let hex = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color)?.[1];
+  if (hex == null) return color;
+  if (hex.length === 3) hex = hex.replace(/./g, (c) => c + c);
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${hex.slice(0, 6)}${a}`;
+}

package/src/shared/widgets/custom_progressbar.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 
-import { Themer } from '../../core/theme';
+import { useTheme } from '../../core/theme';
 
 /**
  * Anneau de progression (≈ `CustomCircularProgressBar`) : cercle de fond
@@ -25,6 +25,7 @@ export function CustomCircularProgressBar({
   strokeWidth?: number;
   children?: ReactNode;
 }) {
+  const theme = useTheme();
   const radius = size / 2;
   const box = size + strokeWidth;
   const center = box / 2;
@@ -38,7 +39,7 @@ export function CustomCircularProgressBar({
             cx={center}
             cy={center}
             r={radius}
-            stroke={progressColor ?? Themer.primary}
+            stroke={progressColor ?? theme.colorScheme.primary}
             strokeWidth={strokeWidth}
             fill="none"
             strokeLinecap="round"

package/src/shared/widgets/error_card_widget.tsx

@@ -0,0 +1,58 @@
+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 { Card } from '../material/card';
+
+/** Couleur d'erreur du thème avec une opacité (0 à 1). */
+function erreur(alpha: number): string {
+  const hex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+  return `${Themer.systemErrorColor}${hex}`;
+}
+
+/**
+ * Carte d'avertissement : fond teinté, bordure et icône dans la couleur
+ * d'erreur du thème, suivies du `message`.
+ */
+export function ErrorCardWidget({
+  message,
+  icon = 'warning-amber',
+}: {
+  message: string;
+  icon?: ComponentProps<typeof MaterialIcons>['name'];
+}) {
+  const theme = useTheme();
+  const texte = theme.textTheme.bodySmall;
+  return (
+    <Card style={styles.card}>
+      <View style={styles.row}>
+        <View style={styles.icon}>
+          <MaterialIcons name={icon} size={18} color={Themer.systemErrorColor} />
+        </View>
+        <Text
+          style={[
+            texte,
+            styles.message,
+            texte?.fontSize != null && { lineHeight: texte.fontSize * 1.4 },
+          ]}
+        >
+          {message}
+        </Text>
+      </View>
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 0,
+    backgroundColor: erreur(0.08),
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: erreur(0.35),
+  },
+  row: { flexDirection: 'row', alignItems: 'flex-start', padding: 14 },
+  icon: { padding: 6, borderRadius: 999, backgroundColor: erreur(0.15), marginRight: 12 },
+  message: { flex: 1, textAlign: 'left', color: Themer.systemErrorColor },
+});

package/src/shared/widgets/selection.tsx

@@ -0,0 +1,98 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Themer, useTheme } from '../../core/theme';
+import { withAlpha } from '../utils/color';
+
+/**
+ * Feuille de sélection : poignée, [titre], [entete] facultatif, puis le
+ * [contenu] (qui défile s'il est trop long : utiliser un ScrollView).
+ * À ouvrir avec showModalBottomSheet.
+ */
+export function SelectionSheet({
+  titre,
+  titreSize,
+  entete,
+  contenu,
+}: {
+  titre?: string;
+  titreSize?: number;
+  entete?: ReactNode;
+  contenu: ReactNode;
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  return (
+    <View
+      style={[
+        styles.sheet,
+        { maxHeight: height * 0.75, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom },
+      ]}
+    >
+      {/* Poignée */}
+      <View style={[styles.poignee, { backgroundColor: withAlpha(Themer.neural03Color, 0.4) }]} />
+      {titre != null && (
+        <Text style={[theme.textTheme.headlineLarge, styles.titre, titreSize != null ? { fontSize: titreSize } : null]}>{titre}</Text>
+      )}
+      {entete != null && <View style={styles.entete}>{entete}</View>}
+      <View style={styles.gap8} />
+      <View style={styles.contenu}>{contenu}</View>
+    </View>
+  );
+}
+
+/** Ligne d'une feuille de sélection : [pastille], [texte], [detail] facultatif et coche si elle est [choisie]. */
+export function SbSelectionLigne({
+  pastille,
+  texte,
+  detail,
+  choisie,
+  onPress,
+}: {
+  pastille: ReactNode;
+  texte: string;
+  detail?: string;
+  choisie: boolean;
+  onPress: () => void;
+}) {
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: choisie }}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.ligne,
+        { backgroundColor: choisie ? withAlpha(primaire, 0.08) : pressed ? theme.colorScheme.secondary : 'transparent' },
+      ]}
+    >
+      {pastille}
+      <View style={styles.textes}>
+        <Text numberOfLines={1} style={[theme.textTheme.displayLarge, { fontWeight: choisie ? '700' : '500' }]}>
+          {texte}
+        </Text>
+        {detail != null && detail.length > 0 && (
+          <Text numberOfLines={1} style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+            {detail}
+          </Text>
+        )}
+      </View>
+      {choisie && <MaterialIcons name="check-circle" size={22} color={primaire} />}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: { width: '100%', borderTopLeftRadius: 20, borderTopRightRadius: 20 },
+  poignee: { alignSelf: 'center', marginTop: 10, marginBottom: 14, width: 36, height: 4, borderRadius: 2 },
+  titre: { paddingHorizontal: 20 },
+  entete: { paddingHorizontal: 20, paddingTop: 12 },
+  contenu: { flexShrink: 1 },
+  gap8: { height: 8 },
+  ligne: { flexDirection: 'row', alignItems: 'center', marginVertical: 2, paddingHorizontal: 8, paddingVertical: 10, borderRadius: 14 },
+  textes: { flex: 1, marginHorizontal: 14 },
+});