gilles/home_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5cfd8184e9c52e4239efb0b039a5f4dbbfe07431
home_hub/design_system/package-smartphone/README.md
T
gilles 4518ed8311 chore(design): ajout du package design system smartphone 
Contient les tokens, composants et exemples adaptés au mobile,
à utiliser comme référence lors du développement des vues smartphone.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-30 08:53:36 +02:00

254 lines
11 KiB
Markdown
Raw Blame History

# mon design system — Package Smartphone (iOS / Android)
> Adaptation mobile complète de mon design system Gruvbox seventies.
> **45+ composants nommés**, optimisés tactile (hit targets ≥ 44px), animations fluides,
> dark + light, gestes nommés et testables, contrôle complet du clavier virtuel.
>
> Version 1.0 · iOS & Android
---
## 🚀 Démarrage rapide
```html
<!DOCTYPE html>
<html data-theme="dark">
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="tokens/tokens.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- Base UI -->
<script type="text/babel" src="components/ui-kit.jsx"></script>
<!-- Mobile -->
<script type="text/babel" src="components/mobile-kit.jsx"></script>
<script type="text/babel" src="components/mobile-sheets.jsx"></script>
<script type="text/babel" src="components/mobile-gestures.jsx"></script>
<script type="text/babel" src="components/mobile-swipeable.jsx"></script>
<script type="text/babel" src="components/mobile-forms.jsx"></script>
<script type="text/babel" src="components/mobile-apps.jsx"></script>
<script type="text/babel">
// Ton app ici
</script>
</body>
</html>
```
---
## 📂 Contenu du package
```
package-smartphone/
├── README.md ← Ce fichier (guide humain)
├── consigne_mobile.md ← Brief pour agents IA
├── tokens/
│ ├── tokens.css ← Variables CSS web (dark + light)
│ ├── tokens.gnome.css ← Pour apps GTK
│ └── tokens.json ← Format générique
├── components/
│ ├── ui-kit.jsx ← Base (Button, Icon, Popup, gauges…)
│ ├── mobile-kit.jsx ← StatusBar, NavBar, TabBar, ActionCard…
│ ├── mobile-sheets.jsx ← BottomSheet, ActionSheet, AlertDialog, Toast, FAB, PullToRefresh
│ ├── mobile-gestures.jsx ← useGesture, GestureZone (9 gestes nommés)
│ ├── mobile-swipeable.jsx ← SwipeableRow (swipe-to-reveal actions)
│ ├── mobile-forms.jsx ← TextInput, DateInput, Dropdown, Checkbox, Radio, MediaInsert…
│ └── mobile-apps.jsx ← Avatar+menu, Onboarding, Chat, Calendar, Maps, Scanner, Caméra, Files
└── examples/
├── exemple-mobile.html ← Vue d'ensemble + gestes interactifs
├── exemple-mobile-saisie.html ← Login, profil, formulaire complet, clavier virtuel
└── exemple-mobile-apps.html ← 10 écrans : onboarding, chat, calendrier, maps, scanner, caméra, fichiers, settings
```
Tous les exemples ont leurs composants copiés à côté pour fonctionner sans navigation `../`. Ouvre n'importe lequel directement dans le navigateur.
---
## 🧩 Tous les composants nommés
### Structure d'écran
- **`StatusBar`** — barre de statut iOS (heure, signal, batterie)
- **`NavBar`** — barre titre, mode compact ou large, bouton retour, actions à droite
- **`TabBar`** — barre d'onglets en bas (3-5 sections)
### Boutons & contrôles
- **`PrimaryButton`** — gros bouton plein largeur (primary, ghost, danger)
- **`IconButton`** — bouton icône seul avec tooltip
- **`Toggle`** — switch on/off
- **`SegmentedControl`** — sélecteur 2-4 options exclusives
- **`Button`** — bouton générique (depuis ui-kit)
### Listes
- **`ListSection / ListRow`** — liste de réglages iOS-style
- **`ActionCard`** — grosse tuile tactile pour grille d'apps
- **`SwipeableRow`** — ligne révélant des actions au swipe (Mail/Things)
- **`FileExplorer`** — liste de fichiers avec icônes par type + actions swipe
### Saisie
- **`FormField`** — wrapper avec label + hint + erreur
- **`TextInput`** — champ texte avec contrôle complet du clavier virtuel
- **`DateInput`** — picker date/heure/datetime natif mobile
- **`Dropdown`** — select avec sélecteur natif
- **`CheckboxItem`** — case à cocher avec label + description
- **`RadioGroup`** — options exclusives empilées
- **`MediaInsert`** — grille pour ajouter photo/image/vidéo/audio/fichier/GPS
- **`SearchBar`** — recherche tactile avec icône loupe
- **`FilterChips`** — chips horizontaux multi-sélection
### Fenêtres / Dialogues
- **`BottomSheet`** — feuille modale qui monte du bas (swipe-down pour fermer)
- **`ActionSheet`** — menu d'actions iOS (2-6 choix)
- **`AlertDialog`** — alerte centrée bloquante (confirmation destructive)
- **`Toast`** — notification éphémère 2.5s
- **`Popup`** — modale glassmorphism (depuis ui-kit)
### Identité utilisateur
- **`Avatar`** — bouton rond avec initiales (haut-droite de chaque écran)
- **`AvatarMenu`** — popup descendant : Profil / Paramètres / Aide / Déconnexion
- **`AvatarLogo`** — gros logo carré arrondi (login, profil)
- **`BiometricButton`** — Face ID / Touch ID
### Patterns d'app
- **`OnboardingSlider`** — slides + dots + suivant/passer
- **`ChatBubble`** — bulle message (envoyé/reçu, statut ✓ ✓✓)
- **`ChatComposer`** — barre d'envoi avec joindre + audio + send
- **`CalendarMonth`** — vue mois avec évènements
- **`MapView`** — carte avec pins colorés
- **`QrScannerView`** — viseur scanner avec ligne animée
- **`CameraView`** — viseur photo avec règle des tiers
### Gestes
- **`useGesture`** — hook qui détecte 9 gestes nommés
- **`GestureZone`** — zone interactive qui affiche le geste détecté
### Datavis (mobile-friendly)
- **`RadialGauge`**, **`BatteryGauge`** (compact ou standard), **`BigRadialGauge`**, **`Sparkline`**, **`LineChart`**, **`StatusLed`**
---
## ✋ Gestes nommés
9 gestes détectables par `useGesture()` :
| Nom | Geste | Usage typique |
|-------------|---------------------------------------|---------------------------------------|
| `Tap` | Pression rapide | Action principale (équiv. clic) |
| `DoubleTap` | Deux Tap rapprochés (< 300 ms) | Zoomer, liker |
| `LongPress` | Pression maintenue ≥ 500 ms | Menu contextuel, sélection |
| `SwipeLeft` | Glisser vers la gauche | Écran suivant, supprimer une ligne |
| `SwipeRight`| Glisser vers la droite | Écran précédent, archiver |
| `SwipeUp` | Glisser vers le haut | Plus de détails, fermer popup |
| `SwipeDown` | Glisser vers le bas | Rafraîchir, fermer BottomSheet |
| `Pan` | Glisser en continu | Déplacer un élément, scroll horizontal|
| `Pinch` | Écarter / rapprocher 2 doigts | Zoomer carte ou image |
---
## ⌨️ Clavier virtuel — paramètres
`TextInput` accepte 4 props clés pour contrôler le clavier mobile :
### `keyboard` (inputmode) — quel clavier afficher
- `text` — clavier standard
- `numeric` — pavé 0-9 (codes, OTP)
- `decimal` — pavé + virgule (prix, mesures)
- `tel` — pavé téléphone
- `email` — clavier texte + @ et . directs
- `url` — clavier texte + / et .com
- `search` — clavier standard, touche Entrée = "Rechercher"
- `none` — aucun clavier (picker custom)
### `autocomplete` — aide à la saisie système
- `email` · `tel` · `name` · `given-name` · `family-name`
- `address-line1` · `postal-code` · `country`
- `current-password` · `new-password`
- `one-time-code` (auto-lecture SMS sur iOS/Android !)
- `off`
### `enterHint` — texte de la touche Entrée
- `send` · `search` · `go` · `done` · `next` · `previous`
### `autocapitalize` — majuscules auto
- `sentences` · `words` · `characters` · `off`
### Combinaisons usuelles
| Cas | Réglages |
|--------------------|-------------------------------------------------------------------|
| Email | `keyboard="email" autocomplete="email" autocapitalize="off"` |
| Mot de passe | `type="password" autocomplete="current-password"` (ou `new-password`) |
| Code OTP SMS | `keyboard="numeric" autocomplete="one-time-code" maxLength={6}` |
| Téléphone | `keyboard="tel" autocomplete="tel"` |
| Recherche | `keyboard="search" enterHint="search"` |
| Prix / mesure | `keyboard="decimal"` |
| Adresse postale | `autocomplete="address-line1"`, puis `postal-code`, `country` |
| Texte libre | `autocapitalize="sentences" spellCheck={true}` |
---
## 🪟 Types de fenêtres mobile
| Type | Quand l'utiliser | Geste pour fermer |
|----------------|------------------------------------------------------------------|----------------------|
| `BottomSheet` | Action contextuelle, formulaire court, choix dans une liste | SwipeDown ↓ |
| `ActionSheet` | Menu d'actions (2-6 choix) sur un élément | Tap "Annuler" ou hors|
| `AlertDialog` | Confirmation destructive (suppression, déconnexion) | Volontairement bloquant|
| `Toast` | Feedback succès/erreur après une action | Auto 2.5s |
| `Popup` | Modale centrée plus large (form de config avancé) | ✕ ou clic extérieur |
---
## 📱 3 pages d'exemples (à ouvrir)
1. **`examples/exemple-mobile.html`** — vue d'ensemble, gestes interactifs, premières patterns
2. **`examples/exemple-mobile-saisie.html`** — login, profil, formulaire complet, clavier virtuel
3. **`examples/exemple-mobile-apps.html`** — 10 patterns d'app : onboarding, chat, calendrier, maps, scanner QR, caméra, fichiers, settings, avatar menu
Chaque page affiche un smartphone à gauche (basculable iOS/Android, sombre/clair) et la doc commentée à droite avec mini-visuels SVG sous chaque composant et écran.
---
## ⚙️ Paramétrage
Tout fonctionne avec les **mêmes tokens CSS** que le package desktop. Pour changer une couleur, édite `tokens/tokens.css` :
```css
:root[data-theme="dark"] {
--accent: #fe8019; /* Orange Gruvbox */
--bg-1: #2a231d; /* Fond app */
--ok: #4dbb26;
--warn: #fabd2f;
--err: #fb4934;
--blue: #3db0d1;
--purple: #c882c8;
}
```
Bascule de thème :
```js
document.documentElement.dataset.theme = 'light'; // ou 'dark'
```
---
## ✅ Checklist d'intégration
- [ ] Polices chargées (Inter, JetBrains Mono, Share Tech Mono)
- [ ] Font Awesome 6 chargé
- [ ] `tokens/tokens.css` chargé
- [ ] `data-theme="dark"` (ou "light") sur `<html>`
- [ ] React 18 + Babel chargés
- [ ] `ui-kit.jsx` chargé en premier
- [ ] Modules mobile chargés dans l'ordre : kit → sheets → gestures → swipeable → forms → apps
---
## 🤖 Pour les agents IA
Lire `consigne_mobile.md` pour les règles d'utilisation et conventions.
Reference in New Issue View Git Blame Copy Permalink