matthieu
2eb7a5247a
## Résumé
Nouveau composant `MalioInputRichText` : éditeur WYSIWYG basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**, aligné sur le thème Malio (couleurs `m-*`, icônes `mdi:*`, états error / success / hint).
## Détails
- **Toolbar** : gras, italique, barré, H2, H3, liste à puces, liste numérotée, citation, code inline, bloc de code, lien (prompt URL), undo / redo
- **Sortie** : `markdown` (par défaut) ou `html` via la prop `outputFormat`
- **Modes** : `editable`, `disabled`, `readonly` ; mode lecture seule (`editable=false`) rend le contenu en `prose` sans toolbar
- **Accessibilité** : label `for/id`, `aria-invalid`, `aria-describedby`, `aria-pressed` sur les boutons toolbar
- **Style** : floating focus border `m-primary`, error `m-danger`, success `m-success`, toolbar `bg-m-bg`
## Dépendances ajoutées (purement additives, aucun bump existant)
- `@tiptap/vue-3` ^3.22.5
- `@tiptap/starter-kit` ^3.22.5
- `@tiptap/extension-placeholder` ^3.22.5
- `@tiptap/pm` ^3.22.5
- `tiptap-markdown` ^0.9.0
> Note : `@tiptap/extension-link` n'est pas installé séparément car StarterKit v3 l'inclut nativement (configuré via `StarterKit.configure({ link: { ... } })`).
## Test plan
- [x] `npm run test` — 315/315 (12 nouveaux tests sur InputRichText)
- [x] `npm run lint` — 0 erreur sur les fichiers ajoutés
- [x] `npm run story:build` — Histoire build OK (story `Input/RichText` listée)
- [x] `npm run dev` — playground `/composant/input/inputRichText` (vérification visuelle des 8 variantes : simple, hint, erreur, succès, readonly, disabled, lecture seule, sortie HTML)
- [x] `npm run story:dev` — story `Input/RichText` avec docs
## Fichiers
- `app/components/malio/input/InputRichText.vue` — composant
- `app/components/malio/input/InputRichText.test.ts` — tests
- `.playground/pages/composant/input/inputRichText.vue` — playground
- `app/story/input/inputRichText.story.vue` — story Histoire
- `histoire.config.ts` — alias ESM + `optimizeDeps` pour `tiptap-markdown` (sinon Histoire choisit la build UMD)
- `CHANGELOG.md`, `COMPONENTS.md` — documentation
Reviewed-on: #37
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-committed-by: matthieu <matthieu@yuno.malio.fr>
Malio UI Layer (Nuxt)
Layer Nuxt partageable pour centraliser des composants UI et les réutiliser dans plusieurs projets.
Le layer est à la racine du repo.
Le dossier .playground/ sert à tester localement les composants du layer.
Commandes utiles
Installation
npm install
Développement local (playground)
Préparer les fichiers Nuxt générés du playground (utile pour TypeScript + ESLint) :
npm run dev:prepare
Lancer le playground :
npm run dev
Qualité
Lancer le linter :
npm run lint
Build / preview
Build de production du playground :
npm run build
Génération statique du playground :
npm run generate
Prévisualiser le build :
npm run preview
Livraison / publication du layer (CI)
La publication est automatique via .gitea/workflows/release.yml sur push main / master.
Le job CI :
- Installe les dépendances
- Lance
npm run dev:prepare - Lance
npm run lint - Lance
semantic-release(version automatique + publish sur Gitea Packages)
Les versions sont calculées via Conventional Commits :
fix: ...-> patch (1.0.0->1.0.1)feat: ...-> minor (1.0.0->1.1.0)feat!: ...ouBREAKING CHANGE:-> major (1.0.0->2.0.0)
Secrets requis dans le repo Gitea :
NPM_TOKEN: token avec droits publish packageRELEASE_TOKEN: token avec droits write repo (tags/releases)
Commande locale utile avant push :
npm pack --dry-run
Tester un composant dans le playground
Le playground étend déjà le layer via .playground/nuxt.config.ts.
Exemple rapide :
- Créer un composant dans le layer
Fichierapp/components/malio/Badge.vue
<template>
<span class="inline-flex rounded-full bg-gray-900 px-2 py-1 text-xs text-white">
{{ label }}
</span>
</template>
<script setup lang="ts">
withDefaults(defineProps<{ label?: string }>(), {
label: 'Badge',
})
</script>
- L’utiliser dans le playground
Fichier.playground/pages/index.vue
<template>
<div class="p-6 space-y-4">
<MalioBadge label="Nouveau composant" />
</div>
</template>
- Lancer le playground
npm run dev
Utiliser ce layer dans un autre projet Nuxt
1) Configurer le .npmrc du projet consommateur
Option simple :
@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/
Puis :
export NPM_TOKEN=TON_TOKEN_GITEA
2) Installer le package
npm install @malio/layer-ui
3) Étendre le layer
Dans nuxt.config.ts du projet consommateur :
export default defineNuxtConfig({
extends: ['@malio/layer-ui'],
})