gilles/home_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4518ed8311abc4de7964b618b391ebe0142d424c
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

11 KiB
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

<!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 :

: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 :

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