tristan
e2dabb0a26
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #48 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
125 lines
4.4 KiB
Markdown
125 lines
4.4 KiB
Markdown
# Refonte du système de playground
|
|
|
|
Date : 2026-05-21
|
|
Branche : `feature/MUI-34-revoir-le-systeme-de-playground`
|
|
|
|
## Contexte
|
|
|
|
Le playground actuel (`.playground/`) est une **fausse SPA** : une unique page
|
|
`index.vue` contient une sidebar codée à la main et charge dynamiquement les
|
|
pages de démo via `import.meta.glob` + `<component :is>`. Il n'y a ni vrai
|
|
routage, ni layout, et la sidebar ne réutilise pas le composant `MalioSidebar`
|
|
de la bibliothèque.
|
|
|
|
Les pages de démo existent déjà dans `.playground/pages/composant/<catégorie>/<nom>.vue`
|
|
mais ne sont pas exploitées comme de vraies routes.
|
|
|
|
## Objectif
|
|
|
|
Refondre le playground autour du **vrai routage fichier de Nuxt** et d'un
|
|
**layout par défaut** qui embarque le composant `MalioSidebar` de production
|
|
(dogfooding du composant).
|
|
|
|
## Décisions validées
|
|
|
|
| Sujet | Décision |
|
|
|-------|----------|
|
|
| Navigation | Vrai routage Nuxt + layout dédié |
|
|
| Construction de la sidebar | Liste manuelle centralisée |
|
|
| Habillage du layout | Sidebar + contenu seul (épuré, chaque page gère son titre) |
|
|
| Page d'accueil | Page de bienvenue simple |
|
|
| Surbrillance lien actif | Hors périmètre (MalioSidebar inchangé) |
|
|
|
|
## Architecture
|
|
|
|
### 1. Config de navigation centralisée
|
|
|
|
Nouveau fichier `.playground/playground.nav.ts` exportant un tableau
|
|
`SidebarSection[]` (type exporté par `MalioSidebar`). Les sections sont
|
|
définies manuellement ; chaque item est un `{ label, to }` pointant vers la
|
|
route de démo.
|
|
|
|
```ts
|
|
import type { SidebarSection } from '../app/components/malio/sidebar/Sidebar.vue'
|
|
|
|
export const navSections: SidebarSection[] = [
|
|
{
|
|
label: 'BOUTONS',
|
|
icon: 'mdi:gesture-tap-button',
|
|
items: [
|
|
{ label: 'Button', to: '/composant/button/button' },
|
|
{ label: 'Button Icon', to: '/composant/button/buttonIcon' },
|
|
],
|
|
},
|
|
// … autres sections (Champs, Sélections, Navigation, Données, Divers)
|
|
]
|
|
```
|
|
|
|
Les routes correspondent exactement aux fichiers existants dans
|
|
`.playground/pages/composant/`. Liste à couvrir :
|
|
|
|
- **button/** : `button`, `buttonIcon`
|
|
- **checkbox/** : `checkbox`
|
|
- **radio/** : `radioButton`
|
|
- **input/** : `inputText`, `inputNumber`, `inputAmount`, `inputEmail`,
|
|
`inputPassword`, `inputPhone`, `inputTextArea`, `inputAutocomplete`,
|
|
`inputUpload`, `inputRichText`
|
|
- **select/** : `select`, `selectCheckbox`
|
|
- **time/** : `time`
|
|
- **tab/** : `tabList`
|
|
- **sidebar/** : `sidebar`
|
|
- **drawer/** : `drawer`
|
|
- **datatable/** : `datatable`
|
|
- **site/** : `siteSelector`
|
|
- **form/** : `client`
|
|
|
|
Le regroupement en sections et les libellés affichés sont au choix du
|
|
développeur (manuel). Les routes, elles, sont imposées par les fichiers.
|
|
|
|
### 2. Layout par défaut
|
|
|
|
Nouveau fichier `.playground/layouts/default.vue` :
|
|
|
|
- Conteneur `flex` pleine hauteur (`h-screen`).
|
|
- `<MalioSidebar :sections="navSections">` à gauche.
|
|
- Slots `logo` / `logo-collapsed` : logos `LOGO_MALIO.png` /
|
|
`LOGO_MALIO_COLLAPSED.png` (servis depuis le `public/` du layer),
|
|
enveloppés dans un `<NuxtLink to="/">` pour revenir à l'accueil.
|
|
- Collapse géré en interne par le composant (mode non-contrôlé).
|
|
- `<main class="flex-1 overflow-y-auto p-6"><slot /></main>` à droite.
|
|
|
|
Le layout `default` s'applique automatiquement à toutes les pages du
|
|
playground — aucune page n'a besoin de `definePageMeta({ layout })`.
|
|
|
|
### 3. Page d'accueil
|
|
|
|
`.playground/pages/index.vue` réécrite en page de bienvenue simple :
|
|
titre + invitation à choisir un composant dans la sidebar. Toute la logique
|
|
de glob / chargement dynamique / sidebar maison est supprimée.
|
|
|
|
### 4. Pages de démo
|
|
|
|
**Inchangées.** Elles sont déjà des routes `/composant/<cat>/<nom>` et
|
|
hériteront automatiquement du layout `default`.
|
|
|
|
### 5. Mise à jour du skill `creating-malio-component`
|
|
|
|
Ajouter une étape au skill : lors de la création d'un nouveau composant,
|
|
ajouter son entrée dans `.playground/playground.nav.ts` pour qu'il apparaisse
|
|
dans la sidebar.
|
|
|
|
## Hors périmètre
|
|
|
|
- Surbrillance de l'item actif dans `MalioSidebar` (ticket dédié si besoin).
|
|
- Toute autre évolution de `MalioSidebar`.
|
|
- Refonte du contenu des pages de démo existantes.
|
|
|
|
## Critères de réussite
|
|
|
|
- `npm run dev` lance le playground avec `MalioSidebar` dans un layout.
|
|
- Cliquer sur un item de la sidebar change l'URL et affiche la bonne démo.
|
|
- Le logo ramène à l'accueil ; l'accueil affiche le message de bienvenue.
|
|
- Plus aucune trace de la sidebar maison ni du chargement dynamique dans
|
|
`index.vue`.
|
|
- `npm run lint` et `npm run test` passent.
|