malio-layer-ui/docs/superpowers/specs/2026-05-21-refonte-playground-design.md

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.

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.