feat: socle initial du package mutualisé
- primitives de design partagées / mécanisme moods commun - isolé, opt-in, sans impact sur les projets existants Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -0,0 +1,5 @@
|
||||
node_modules/
|
||||
.output/
|
||||
.nuxt/
|
||||
dist/
|
||||
*.log
|
||||
@@ -0,0 +1,48 @@
|
||||
# @yvv/nuxt-base
|
||||
|
||||
Nuxt layer partagé pour les projets Nuxt Yvv (librodrome, GrateWizard, libreDecision, SejeteralO).
|
||||
Fournit le **mécanisme** commun, jamais les couleurs (chaque projet garde son identité).
|
||||
|
||||
## Contenu
|
||||
|
||||
- `app/composables/useMood.ts` — mécanisme d'ambiances/palettes (extrait de libreDecision, généralisé).
|
||||
Supporte les 2 patterns existants sans réécrire le CSS d'un projet :
|
||||
- **classes `.mood-<id>`** + variables `--mood-*` définies en CSS (style libreDecision) ;
|
||||
- **variables CSS injectées en JS** via `MoodDef.vars` (style librodrome `--color-*`) ;
|
||||
- option `lightDarkClasses` pour basculer aussi `.palette-light/.palette-dark`.
|
||||
|
||||
## Adoption (à faire AVEC vérif visuelle mobile + desktop — zéro régression)
|
||||
|
||||
Dans `nuxt.config.ts` du projet :
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
extends: ['../yvv-nuxt-base'], // chemin relatif depuis la racine frontend du projet
|
||||
})
|
||||
```
|
||||
|
||||
`useMood` devient auto-importé. Puis, par projet :
|
||||
|
||||
### libreDecision (risque quasi nul — c'est le mécanisme canonique)
|
||||
Remplacer le corps de `frontend/app/composables/useMood.ts` par un appel au layer :
|
||||
```ts
|
||||
// frontend/app/composables/useMood.ts
|
||||
const moods = [
|
||||
{ id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
|
||||
{ id: 'zen', label: 'Zen', description: 'Nature vivante', icon: 'i-lucide-leaf', color: '#2e8b48', isDark: false },
|
||||
{ id: 'chagrine', label: 'Chagrine', description: 'Nuit profonde', icon: 'i-lucide-moon', color: '#6488d8', isDark: true },
|
||||
{ id: 'grave', label: 'Grave', description: 'Ambre mineral', icon: 'i-lucide-shield', color: '#d8a030', isDark: true },
|
||||
]
|
||||
export const useLibreMood = () => useMood(moods, { storageKey: 'libredecision_mood', defaultId: 'peps' })
|
||||
```
|
||||
`moods.css` (les couleurs) reste inchangé. Vérifier le switch des 4 moods + persistance.
|
||||
|
||||
### librodrome (via l'option vars — le CSS `--color-*` reste inchangé)
|
||||
Convertir `stores/palette.ts` pour déléguer l'application DOM à `useMood`, en passant les triplets HSL dans `vars` (`--color-primary`, etc.) et `lightDarkClasses: true`. Le store peut rester pour l'API publique, mais l'application au DOM passe par le mécanisme partagé. Vérifier les 4 saisons + light/dark.
|
||||
|
||||
### GrateWizard / SejeteralO
|
||||
Adopter après les deux premiers, même principe. SejeteralO (pas d'UnoCSS, vue-router 5) en dernier, prudemment.
|
||||
|
||||
## Principe
|
||||
|
||||
Ce layer unifie la **logique** (application DOM, persistance, SSR-guard, color-mode), pas le **contrat CSS**. Migrer le contrat CSS (renommer `--color-*` → `--mood-*`) est une étape séparée, optionnelle, à faire sous contrôle visuel.
|
||||
@@ -0,0 +1,113 @@
|
||||
import { ref, readonly, type Ref } from 'vue'
|
||||
|
||||
/**
|
||||
* Définition d'une ambiance ("mood") / palette.
|
||||
* Chaque projet fournit SA propre liste (ses couleurs = son identité).
|
||||
*/
|
||||
export interface MoodDef {
|
||||
id: string
|
||||
label?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
color?: string
|
||||
isDark: boolean
|
||||
/**
|
||||
* Variables CSS à poser sur <html> quand ce mood est actif.
|
||||
* Optionnel — pour les projets qui injectent les variables en JS
|
||||
* (style librodrome) plutôt que via des classes .mood-<id> en CSS
|
||||
* (style libreDecision). Les deux approches sont supportées.
|
||||
*/
|
||||
vars?: Record<string, string>
|
||||
}
|
||||
|
||||
export interface UseMoodOptions {
|
||||
/** clé localStorage (défaut: 'yvv_mood') */
|
||||
storageKey?: string
|
||||
/** id du mood par défaut (défaut: premier de la liste) */
|
||||
defaultId?: string
|
||||
/** synchronise useColorMode().preference depuis isDark (défaut: true) */
|
||||
syncColorMode?: boolean
|
||||
/** bascule aussi les classes .palette-light / .palette-dark (style librodrome) (défaut: false) */
|
||||
lightDarkClasses?: boolean
|
||||
}
|
||||
|
||||
const currentMood: Ref<string> = ref('')
|
||||
|
||||
/**
|
||||
* Mécanisme moods partagé (extrait de libreDecision, généralisé).
|
||||
* Applique sur <html> : classe .mood-<id>, variables CSS éventuelles,
|
||||
* synchro color-mode, persistance localStorage. SSR-safe.
|
||||
*
|
||||
* @example
|
||||
* const moods: MoodDef[] = [
|
||||
* { id: 'peps', label: 'Peps', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
|
||||
* { id: 'grave', label: 'Grave', icon: 'i-lucide-shield', color: '#d8a030', isDark: true },
|
||||
* ]
|
||||
* const { moods: list, currentMood, setMood, initMood } = useMood(moods)
|
||||
*/
|
||||
export function useMood(moods: MoodDef[], options: UseMoodOptions = {}) {
|
||||
const {
|
||||
storageKey = 'yvv_mood',
|
||||
defaultId = moods[0]?.id ?? '',
|
||||
syncColorMode = true,
|
||||
lightDarkClasses = false,
|
||||
} = options
|
||||
|
||||
function applyMood(moodId: string) {
|
||||
if (import.meta.server) return
|
||||
const mood = moods.find(m => m.id === moodId)
|
||||
if (!mood) return
|
||||
|
||||
const html = document.documentElement
|
||||
|
||||
// classe .mood-<id>
|
||||
moods.forEach(m => html.classList.remove(`mood-${m.id}`))
|
||||
html.classList.add(`mood-${moodId}`)
|
||||
|
||||
// variables CSS injectées (si le projet en fournit)
|
||||
if (mood.vars) {
|
||||
for (const [k, v] of Object.entries(mood.vars)) {
|
||||
html.style.setProperty(k, v)
|
||||
}
|
||||
}
|
||||
|
||||
// classes palette-light / palette-dark (compat style librodrome)
|
||||
if (lightDarkClasses) {
|
||||
html.classList.toggle('palette-light', !mood.isDark)
|
||||
html.classList.toggle('palette-dark', mood.isDark)
|
||||
html.style.setProperty('color-scheme', mood.isDark ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
// synchro color-mode Nuxt (si dispo et demandé)
|
||||
if (syncColorMode) {
|
||||
try {
|
||||
// @ts-expect-error auto-import Nuxt (résolu chez le consommateur)
|
||||
const colorMode = useColorMode()
|
||||
colorMode.preference = mood.isDark ? 'dark' : 'light'
|
||||
} catch {
|
||||
/* @nuxtjs/color-mode absent : on ignore */
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem(storageKey, moodId)
|
||||
currentMood.value = moodId
|
||||
}
|
||||
|
||||
function setMood(moodId: string) {
|
||||
applyMood(moodId)
|
||||
}
|
||||
|
||||
function initMood() {
|
||||
if (import.meta.server) return
|
||||
const saved = localStorage.getItem(storageKey)
|
||||
const moodId = saved && moods.some(m => m.id === saved) ? saved : defaultId
|
||||
applyMood(moodId)
|
||||
}
|
||||
|
||||
return {
|
||||
moods,
|
||||
currentMood: readonly(currentMood),
|
||||
setMood,
|
||||
initMood,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// @yvv/nuxt-base — Nuxt layer partagé (mécanismes communs aux projets Nuxt Yvv)
|
||||
// Consommé via: export default defineNuxtConfig({ extends: ['../yvv-nuxt-base'] })
|
||||
// Fournit (auto-importés chez le consommateur) : composables/useMood.ts
|
||||
// N'impose AUCUN module ni CSS — les projets gardent leur stack et leurs couleurs.
|
||||
export default defineNuxtConfig({})
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "@yvv/nuxt-base",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "Nuxt layer partagé (composables communs : useMood) pour les projets Nuxt Yvv",
|
||||
"type": "module",
|
||||
"main": "./nuxt.config.ts"
|
||||
}
|
||||
Reference in New Issue
Block a user