Isi-APP Docs fonctionnelles
Toutes les docs
Markdown brut
PRD — Migration UI vers Onyx
Actif dev functional Revu le 2026-03-20 dev/ui-onyx-migration.md

PRD — Migration UI vers Onyx

Statut : En cours | Dernière MAJ : 2026-03-18 | Owner : Dev

Contexte

ISI-APP dispose d'un design system interne appelé Onyx (x-onyx.*). Ce document liste toutes les vues et modules qui utilisent encore l'ancien système (Bootstrap brut, x-global.*) et sert de backlog pour migrer progressivement vers Onyx.

Bilan global

Catégorie Fichiers %
Modernes (x-onyx uniquement) 310 14.7%
Legacy (sans x-onyx) 1 801 85.3%
TOTAL 2 111 100%

Répartition du legacy

Pattern Occurrences Composant Onyx cible
class="row" / class="col-*" ~600 — (pas de x-onyx.grid prévu)
class="card" / class="card-body" ~153 x-onyx.panel
class="modal" ~150 x-onyx.modal (à créer)
class="form-group" / class="form-control" ~81 x-onyx.form-group + x-onyx.input
class="btn" ~43 x-onyx.button
class="alert" ~40 x-onyx.alert
x-global.* ~342 fichiers Remplacer par x-onyx équivalents

Composants Onyx existants (41)

Catégorie Composants
Inputs input, select, form-group, toggle, file-upload, icon-picker
Buttons button, dropdown, dropdown-item, back-button, back-top
Alerts alert, callout, empty-state
Cards panel, stat-card, media-card, menu-card, menu-card-compact
Nav tabs, tabs-nav, accordion, stepper, timeline, description-list
Status badge, status-dot, progress, spinner, skeleton
Data chart, period-selector
Utils avatar, divider, tooltip, kbd, code, page-header

Composants manquants (à créer avant migration)

Composant Urgence Occurrences actuelles
x-onyx.modal HAUTE ~150 fichiers
x-onyx.breadcrumb MOYENNE —
x-onyx.pagination MOYENNE —
x-onyx.table BASSE (TableWire couvre ce cas)

Backlog par module

PHASE 1 — Composants globaux (débloque tout le reste)

Impact maximal. Refactoriser components/global/* migre indirectement des centaines de vues qui les incluent.

Statut Module Fichiers legacy Priorité
[ ] components/global/input/* ~30 HAUTE
[ ] components/global/button/* ~20 HAUTE
[ ] components/global/modal.blade.php 1 (mais ~150 usages) HAUTE
[ ] components/global/card/* ~15 MOYENNE
[ ] components/global/alert/* 7 MOYENNE
[ ] Reste components/global/ ~180 BASSE

PHASE 2 — Modules pilotes (faible volume, fort impact vitrine)

Statut Module Fichiers legacy Notes
[ ] livewire/admin/ 33 Bon ratio, visible en interne
[ ] livewire/gmao/ 22 Presque terminé
[ ] admin/ (views) 10 Petit volume
[ ] livewire/param-dsi/ ~6 Impact cross-module

PHASE 3 — Livewire (cœur de l'app)

538 fichiers legacy sur 687 (78%). À traiter sous-module par sous-module.

Statut Sous-module Legacy Total % moderne
[ ] livewire/core-model/ 4 21 81% ✅ (finir)
[ ] livewire/ticketv4/ 41 90 54% (en cours)
[ ] livewire/user/ 24 26 8%
[ ] livewire/crm/ 33 35 6%
[ ] livewire/project/ 59 61 3%
[ ] livewire/entity/ 26 26 0%
[ ] livewire/hardware/ 25 25 0%
[ ] Reste livewire/ ~326 — —

PHASE 4 — Hook (vues custom clients)

216 fichiers legacy sur 241 (89%). Vues générées/custom par client — migration délicate.

Statut Sous-dossier Fichiers legacy Notes
[ ] hook/*view.blade.php ~100 Vues principales hook
[ ] hook/custom/tab/ ~50 Onglets custom
[ ] hook/custom/ctl/ ~30 Contrôles custom
[ ] hook/custom/tabcontent/ ~40 Contenus onglets

PHASE 5 — Autres modules

Statut Module Fichiers legacy Notes
[ ] crm/ (views) 68 100% legacy
[ ] see/ 68 88% legacy
[ ] wikiv2/ 37 95% legacy
[ ] email/ 39 100% legacy (templates mail, à évaluer)
[ ] project/ (views) 27 96% legacy
[ ] ticketv4/ (views) 18 86% legacy
[ ] exports/ 145 100% legacy — probablement hors scope (rapports PDF/Excel)
[ ] widgets/ 11 —

Règles de migration

Ce qu'on remplace

{{-- ❌ AVANT --}}
<div class="card">
    <div class="card-header">Titre</div>
    <div class="card-body">Contenu</div>
</div>

{{-- ✅ APRÈS --}}
<x-onyx.panel title="Titre">Contenu</x-onyx.panel>
{{-- ❌ AVANT --}}
<div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" wire:model="email">
</div>

{{-- ✅ APRÈS --}}
<x-onyx.input type="email" label="Email" wire:model="email" />
{{-- ❌ AVANT --}}
<button class="btn btn-primary">Enregistrer</button>

{{-- ✅ APRÈS --}}
<x-onyx.button>Enregistrer</x-onyx.button>
{{-- ❌ AVANT --}}
<x-global.alert type="success" message="Sauvegardé" />

{{-- ✅ APRÈS --}}
<x-onyx.alert type="success">Sauvegardé</x-onyx.alert>

Ce qu'on ne remplace PAS

  • exports/ — templates PDF/Excel, Bootstrap utilisé pour le rendu impression
  • email/ — templates mail HTML, contrainte de compatibilité clients mail
  • Layouts racines (layouts/) — refactorer séparément avec précaution

Comment utiliser ce fichier

  1. Choisir un module dans le backlog ci-dessus
  2. Cocher [x] quand le module est terminé
  3. Lancer : grep -rL "x-onyx" resources/views/<module>/ pour lister les fichiers restants
  4. Utiliser le skill /onyx-ui pour la migration
  5. Après migration : vendor/bin/duster fix --dirty

Liens utiles

  • Référence composants Onyx : docs/dev/ui-components-reference.md
  • Skill migration : /onyx-ui
  • Composants Onyx sources : resources/views/components/onyx/