mirror of
https://github.com/MaksTinyWorkshop/_Assistant_Lead_Tech
synced 2026-04-06 13:31:43 +02:00
101 lines
3.7 KiB
Markdown
101 lines
3.7 KiB
Markdown
# Frontend — Risques & vigilance : Design Tokens
|
|
|
|
> Extrait de la base de connaissance Lead_tech. Voir `knowledge/frontend/risques/README.md` pour l'index complet.
|
|
|
|
---
|
|
|
|
<a id="risque-double-systeme-espacement"></a>
|
|
## Double système d'espacement dans un monorepo Expo
|
|
|
|
### Risques
|
|
|
|
- Deux échelles d'espacement coexistent avec des noms différents pour des valeurs identiques (`Spacing.three = 16` vs `spacing.base = 16`)
|
|
- L'audit "zéro hardcode" ne détecte pas l'inconsistance car les deux sont des constantes nommées
|
|
- Les deux échelles peuvent diverger silencieusement
|
|
|
|
### Symptômes
|
|
|
|
- `import { Spacing } from '@/constants/theme'` coexiste avec `import { spacing } from '@/theme'`
|
|
- Certains screens refactorisés utilisent l'ancien système sans que personne ne le détecte
|
|
|
|
### Bonnes pratiques / mitigations
|
|
|
|
- Dès la création de `src/theme/spacing.ts`, supprimer ou vider `constants/theme.ts` (sauf constantes vraiment spécifiques : `MaxContentWidth`, `BottomTabInset`)
|
|
- Faire un `grep from '@/constants/theme'` à chaque story pour détecter les usages résiduels
|
|
- **Cause racine** : le template Expo génère `constants/theme.ts` avec `Spacing = { one, two, three... }` — à purger explicitement lors de la story design tokens
|
|
- Contexte technique : Expo / React Native — app-alexandrie story 0.5, 19-03-2026
|
|
|
|
---
|
|
|
|
<a id="risque-dimensions-image-via-spacing"></a>
|
|
## Dimensions d'image via tokens `spacing` (React Native)
|
|
|
|
### Risques
|
|
|
|
- Si `spacing.huge` change pour une raison d'espacement, la taille de l'image change silencieusement
|
|
- Régression visuelle sans que personne ne réalise l'impact — les deux changements semblent indépendants
|
|
|
|
### Symptômes
|
|
|
|
- `width: spacing.huge, height: spacing.huge` pour une image dont la taille est fixée par la spec Figma
|
|
|
|
### Bonnes pratiques / mitigations
|
|
|
|
```typescript
|
|
// Correct : constante locale ou token dédié
|
|
const THUMBNAIL_SIZE = 48; // Figma spec node 1-16147
|
|
|
|
// OU token dans un fichier sizes.ts dédié si la valeur est partagée
|
|
export const sizes = { thumbnail: 48, avatar: 40 } as const;
|
|
```
|
|
|
|
**Règle** : `spacing` = espacement entre éléments. `sizes` ou constantes locales = dimensions de composants.
|
|
|
|
- Contexte technique : React Native / design tokens — app-alexandrie story 0.4, 19-03-2026
|
|
|
|
---
|
|
|
|
<a id="risque-inline-styles-dashboard"></a>
|
|
## Inline styles dans les composants dashboard
|
|
|
|
### Risques
|
|
|
|
- Contourne le système Tailwind + tokens CSS
|
|
- Crée des incohérences visuelles non détectées par le linter
|
|
|
|
### Symptômes
|
|
|
|
- `style={{ color: '#123456', marginTop: 8 }}` dans un composant dashboard
|
|
|
|
### Bonnes pratiques / mitigations
|
|
|
|
- Bloquer en code review systématiquement tout `style={{...}}` dans les composants dashboard
|
|
- Exception acceptable uniquement : animations CSS dynamiques (valeurs calculées au runtime)
|
|
|
|
- Contexte technique : React / Tailwind — app-template-resto 22-03-2026
|
|
|
|
---
|
|
|
|
<a id="risque-tailwind-classes-invalides"></a>
|
|
## Classes Tailwind invalides courantes (bugs silencieux)
|
|
|
|
### Risques
|
|
|
|
- Classes Tailwind invalides sont silencieusement ignorées — aucun warning, comportement visuellement cassé
|
|
|
|
### Symptômes
|
|
|
|
- Item masqué affiché à pleine opacité (`opacity-55` → invalide)
|
|
- Largeur incorrecte (`w-35` → invalide)
|
|
|
|
### Bonnes pratiques / mitigations
|
|
|
|
Erreurs courantes :
|
|
- `opacity-55` → invalide. Scale : 0/5/10/20/25/30/40/50/60/70/75/80/90/95/100 → utiliser `opacity-50` ou `opacity-60`
|
|
- `w-35` → invalide. Scale saute de `w-32` à `w-36` → utiliser `w-36`
|
|
- `box-border` → redondant. Tailwind Preflight applique déjà `box-sizing: border-box` globalement
|
|
|
|
- Toujours vérifier les classes custom/non-standard avec l'extension Tailwind IntelliSense
|
|
|
|
- Contexte technique : Tailwind CSS — app-template-resto 22-03-2026
|