tristan
2a66739040
All checks were successful
Release / release (push) Successful in 57s
| 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é Co-authored-by: kevin <kevin@yuno.malio.fr> Reviewed-on: #7 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
156 lines
2.7 KiB
Markdown
156 lines
2.7 KiB
Markdown
# 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
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### Développement local (playground)
|
||
|
||
Préparer les fichiers Nuxt générés du playground (utile pour TypeScript + ESLint) :
|
||
|
||
```bash
|
||
npm run dev:prepare
|
||
```
|
||
|
||
Lancer le playground :
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### Qualité
|
||
|
||
Lancer le linter :
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
### Build / preview
|
||
|
||
Build de production du playground :
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
Génération statique du playground :
|
||
|
||
```bash
|
||
npm run generate
|
||
```
|
||
|
||
Prévisualiser le build :
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
### Livraison / publication du layer (CI)
|
||
|
||
La publication est automatique via `.gitea/workflows/release.yml` sur push `main` / `master`.
|
||
|
||
Le job CI :
|
||
|
||
1. Installe les dépendances
|
||
2. Lance `npm run dev:prepare`
|
||
3. Lance `npm run lint`
|
||
4. 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!: ...` ou `BREAKING CHANGE:` -> major (`1.0.0` -> `2.0.0`)
|
||
|
||
Secrets requis dans le repo Gitea :
|
||
|
||
- `NPM_TOKEN` : token avec droits publish package
|
||
- `RELEASE_TOKEN` : token avec droits write repo (tags/releases)
|
||
|
||
Commande locale utile avant push :
|
||
|
||
```bash
|
||
npm pack --dry-run
|
||
```
|
||
|
||
## Tester un composant dans le playground
|
||
|
||
Le playground étend déjà le layer via `.playground/nuxt.config.ts`.
|
||
|
||
Exemple rapide :
|
||
|
||
1. Créer un composant dans le layer
|
||
Fichier `app/components/malio/Badge.vue`
|
||
|
||
```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>
|
||
```
|
||
|
||
2. L’utiliser dans le playground
|
||
Fichier `.playground/pages/index.vue`
|
||
|
||
```vue
|
||
<template>
|
||
<div class="p-6 space-y-4">
|
||
<MalioBadge label="Nouveau composant" />
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
3. Lancer le playground
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
## Utiliser ce layer dans un autre projet Nuxt
|
||
|
||
### 1) Configurer le `.npmrc` du projet consommateur
|
||
|
||
Option simple :
|
||
|
||
```ini
|
||
@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/
|
||
```
|
||
Puis :
|
||
|
||
```bash
|
||
export NPM_TOKEN=TON_TOKEN_GITEA
|
||
```
|
||
|
||
### 2) Installer le package
|
||
|
||
```bash
|
||
npm install @malio/layer-ui
|
||
```
|
||
|
||
### 3) Étendre le layer
|
||
|
||
Dans `nuxt.config.ts` du projet consommateur :
|
||
|
||
```ts
|
||
export default defineNuxtConfig({
|
||
extends: ['@malio/layer-ui'],
|
||
})
|
||
```
|