# 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'],
})
```